🐛(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

@@ -21,6 +21,10 @@ and this project adheres to
 - 🔒️(backend) configure throttle on every viewsets #1343
 - ⬆️ Bump eslint to V9 #1071
 
+### 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

@@ -699,8 +699,23 @@ 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();
+ // Group flag
+ await page.getByText('Flags').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;