packages/editor/src/core/extensions/emoji/components/emojis-list.tsx (1)

124-124:LGTM! Consider extracting the ID as a constant.

Theid="emojis-picker" addition enables the Enter key handling fix inprops.ts. The approach is simple and effective.

For better maintainability, consider extracting this ID as a shared constant to avoid string duplication between this file andprops.ts:

// In a shared constants file:exportconstEMOJIS_PICKER_ID="emojis-picker";

Then use it in both locations:

-+        id={EMOJIS_PICKER_ID}

packages/editor/src/core/props.ts (1)

22-27:LGTM! Consider refactoring to reduce duplication.

The Enter key handling for the emoji picker correctly prevents default behavior when the picker is active, fixing the reported issue.

The logic duplicates the pattern used for slash commands (lines 29-34). Consider refactoring to reduce code duplication:

       keydown: (_view, event) => {-        // prevent default event listeners from firing when slash command is active-        if (["Enter"].includes(event.key)) {-          const emojisPicker = document.querySelector("#emojis-picker");-          if (emojisPicker) {-            return true;-          }-        }--        if (["ArrowUp", "ArrowDown", "Enter"].includes(event.key)) {-          const slashCommand = document.querySelector("#slash-command");-          if (slashCommand) {-            return true;-          }-        }+        // prevent default event listeners when suggestion dropdowns are active+        const activeDropdowns = [+          { keys: ["Enter"], selector: "#emojis-picker" },+          { keys: ["ArrowUp", "ArrowDown", "Enter"], selector: "#slash-command" },+        ];++        for (const { keys, selector } of activeDropdowns) {+          if (keys.includes(event.key) && document.querySelector(selector)) {+            return true;+          }+        }       },

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro