🐛(frontend) fix callout emoji list

Removing explicit categories prop from
EmojiPicker to let emoji-mart manage categories
and avoid mismatch causing runtime error with
locales.

Author: AntoLC

CHANGELOG.md

@@ -25,6 +25,10 @@ and this project adheres to
   - #1341
 - ♻️(tilt) use helm dev-backend chart
 
+### Fixed
+
+- 🐛(frontend) fix callout emoji list #1366
+
 ## [3.6.0] - 2025-09-04
 
 ### Added

src/frontend/apps/e2e/__tests__/app-impress/doc-editor.spec.ts

@@ -703,8 +703,20 @@ test.describe('Doc Editor', () => {
     const emojiButton = calloutBlock.getByRole('button');
     await expect(emojiButton).toHaveText('💡');
     await emojiButton.click();
-    await page.locator('button[aria-label="⚠️"]').click();
-    await expect(emojiButton).toHaveText('⚠️');
+    // Group smiley
+    await expect(page.getByRole('button', { name: '🤠' })).toBeVisible();
+    // Group animals
+    await page.getByText('Animals & Nature').scrollIntoViewIfNeeded();
+    await expect(page.getByRole('button', { name: '🦆' })).toBeVisible();
+    // Group travel
+    await page.getByText('Travel & Places').scrollIntoViewIfNeeded();
+    await expect(page.getByRole('button', { name: '🚝' })).toBeVisible();
+    // Group objects
+    await page.getByText('Objects').scrollIntoViewIfNeeded();
+    await expect(page.getByRole('button', { name: '🪇' })).toBeVisible();
+    // Group symbol
+    await page.getByText('Symbols').scrollIntoViewIfNeeded();
+    await expect(page.getByRole('button', { name: '🛃' })).toBeVisible();
 
     await page.locator('.bn-side-menu > button').last().click();
     await page.locator('.mantine-Menu-dropdown > button').last().click();

src/frontend/apps/impress/src/features/docs/doc-editor/components/EmojiPicker.tsx

@@ -7,14 +7,12 @@ import { Box } from '@/components';
 
 interface EmojiPickerProps {
   emojiData: EmojiMartData;
-  categories: string[];
   onClickOutside: () => void;
   onEmojiSelect: ({ native }: { native: string }) => void;
 }
 
 export const EmojiPicker = ({
   emojiData,
-  categories,
   onClickOutside,
   onEmojiSelect,
 }: EmojiPickerProps) => {
@@ -24,7 +22,6 @@ export const EmojiPicker = ({
     <Box $position="absolute" $zIndex={1000} $margin="2rem 0 0 0">
       <Picker
         data={emojiData}
-        categories={categories}
         locale={i18n.resolvedLanguage}
         navPosition="none"
         onClickOutside={onClickOutside}

src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/CalloutBlock.tsx

@@ -10,7 +10,7 @@ import { Box, BoxButton, Icon } from '@/components';
 import { DocsBlockNoteEditor } from '../../types';
 import { EmojiPicker } from '../EmojiPicker';
 
-import InitEmojiCallout from './initEmojiCallout';
+import emojidata from './initEmojiCallout';
 
 export const CalloutBlock = createReactBlockSpec(
   {
@@ -79,8 +79,7 @@ export const CalloutBlock = createReactBlockSpec(
 
           {openEmojiPicker && (
             <EmojiPicker
-              emojiData={InitEmojiCallout.emojidata}
-              categories={InitEmojiCallout.calloutCategories}
+              emojiData={emojidata}
               onClickOutside={onClickOutside}
               onEmojiSelect={onEmojiSelect}
             />

src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/initEmojiCallout.ts

@@ -56,21 +56,4 @@ if (!emojidata.categories.some((c) => c.id === CALLOUT_ID)) {
 
 void init({ data: emojidata });
 
-const calloutCategories = [
-  'callout',
-  'people',
-  'nature',
-  'foods',
-  'activity',
-  'places',
-  'flags',
-  'objects',
-  'symbols',
-];
-
-const calloutEmojiData = {
-  emojidata,
-  calloutCategories,
-};
-
-export default calloutEmojiData;
+export default emojidata;