[WEB-5415] fix: enter handler for emoji

[V1pinChaudhary]

Description

fix enter handler for emoji

Type of Change

• Bug fix (non-breaking change which fixes an issue)

Screenshots and Media (if applicable)

Screen.Recording.2025-11-13.at.1.35.10.PM.mov

Test Scenarios

References

Summary by CodeRabbit

• Bug Fixes
  • Improved emoji picker keyboard navigation to properly handle Enter key selection and interactions.

[coderabbitai]

Walkthrough

Changes introduce emoji picker integration into the editor's keyboard handling system. A DOM identifier is added to the emoji picker container, node priority is configured for the emoji extension, and the editor's Enter key handler defers to the emoji picker when active.

Changes

Cohort / File(s)	Summary
Emoji Picker Component packages/editor/src/core/extensions/emoji/components/emojis-list.tsx	Added id="emojis-picker" attribute to the dropdown container div for DOM identification and control flow reference.
Emoji Node Extension packages/editor/src/core/extensions/emoji/emoji.ts	Configured emoji node priority to 1001 in the node definition creation options.
Editor Keyboard Handler packages/editor/src/core/props.ts	Added conditional early return in keydown handler: when Enter is pressed and an element with id="emojis-picker" exists, the handler returns true to bypass default slash-command handling and defer to the emoji picker.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant Editor as Editor (keydown handler)
    participant Emoji as Emoji Picker
    
    User->>Editor: Presses Enter
    alt Emoji Picker (`#emojis-picker`) is visible
        Editor->>Editor: Check for emoji picker element
        Editor->>Emoji: Defer handling to emoji picker
        Emoji->>User: Handle emoji selection
    else Emoji Picker not visible
        Editor->>Editor: Continue with slash-command handling
    end

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

• Focus areas requiring attention:
  • The control flow logic in packages/editor/src/core/props.ts requires understanding how the Enter key handler interacts with existing slash-command processing and the emoji picker state lifecycle
  • Verify the priority value 1001 in packages/editor/src/core/extensions/emoji/emoji.ts aligns with the intended node rendering order and doesn't conflict with other extensions
  • Confirm the DOM selector #emojis-picker is consistently used between the component and the keyboard handler

Poem

🐰 A little bunny hops around,
With emoji picker now so sound!
When Enter's pressed and picker's there,
It defers with keyboard flair!
Priority raised, ID assigned—
Emoji magic intertwined! ✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The description is largely incomplete. The 'Description' section only contains a one-line summary, and critical sections like 'Test Scenarios' and 'References' are empty with only template comments.	Expand the Description section with details about what the bug was and how it was fixed. Complete Test Scenarios describing how the fix was validated, and link the related issue (WEB-5415).

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title '[WEB-5415] fix: enter handler for emoji' clearly summarizes the main change—fixing the enter key handler for emoji functionality.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix-emoji_enter_handler

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (2)

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

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

The id="emojis-picker" addition enables the Enter key handling fix in props.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 and props.ts:

// In a shared constants file:
export const EMOJIS_PICKER_ID = "emojis-picker";

Then use it in both locations:

-        id="emojis-picker"
+        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;
+          }
+        }
       },

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between a04d3b5 and 4d6e890.

📒 Files selected for processing (3)

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

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)

• GitHub Check: Agent
• GitHub Check: CodeQL analysis (javascript-typescript)
• GitHub Check: Build and lint web apps
• GitHub Check: Analyze (javascript)

🔇 Additional comments (1)

packages/editor/src/core/extensions/emoji/emoji.ts (1)

82-82: Emoji extension priority verified—no conflicts found.

The priority: 1001 is intentionally set higher than other extensions (utility and custom-link at 1000), ensuring emoji processes first in the event chain. All remaining extensions use the default priority, so there are no conflicts or inadvertent overrides.