[WEB-5415] fix: enter handler for emoji

[im-vipin]

Description

fix enter handler for emoji

Type of Change

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

Screenshots and Media (if applicable)

https://github.com/user-attachments/assets/acb697b9-aa13-4572-96e1-a40731cf46f6

Test Scenarios

References

Summary by CodeRabbit

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

[coderabbitai[bot]]

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

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.}