Feat. Add Emoji Picker Option

[hunxjunedo]

/claim #808 fixes #808 this pull request adds the emoji picker option which is accessible by both the trigger character (:) and the slash menu.

Recordings

Screencast from 19-06-2024 20:11:04.webm

https://github.com/TypeCellOS/BlockNote/assets/89797440/aa1637e1-8bf1-47b6-a3a6-1dea329103c8

Approach

I started with a custom suggestion menu as suggested, with custom component and getItems function. The function fetches all the emojis from the Emojimart at initial render, and then returns the emojis as items on every search. This approach may sound unfamiliar as using emoji-mart as the picker would have been preferable, however the main issue with almost all emoji-pickers is that either they don't allow filtering out the emojis shown, or even if indirectly allowed (like emoji-mart allows to hide some emoijs ), they don't update dynamically to reflect those changes. Therefore I was left with an option of creating a custom picker, which worked pretty fine. I then proceeded to add the functionality in the useSuggestionMenuKeyboardNavigation.ts file to handle all sorts of navigation forward and backward arrows if it's for the emojiMenu.

Secondly, the task was to make this menu accessible by the slash-menu, therefore I added a custom option to slash menu for emojis, which was similar to other options except that this option doesn't insert anything into the editor, instead it just simulates a keydown when clicked, which is listened by the onKeyDown function specified in the plugin props in the suggestionPlugin.ts file, which then carries the logic and opens the emojiMenu

Tests

• The code is vigorously tested on multiple network throttling levels to ensure that the emojis don't take too much time to load.
• All types of examples are used, including showing document Json and the one with mentions menu
• All types of keyboard navigation is tested, including right and left arrows.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
blocknote	✅ Ready (Inspect)	Visit Preview	Jun 29, 2024 7:02am

[vercel[bot]]

@hunxjunedo is attempting to deploy a commit to the TypeCell Team on Vercel.

A member of the Team first needs to authorize it.

[YousefED]

@flipvh wdyt of this? You can see a preview here: https://blocknote-git-fork-hunxjunedo-main-typecell.vercel.app/basic/minimal

The UX is very much based on Notion. There are some things to be improved (i.e.: dark / light mode), but I think the basics look great. wdyt?

[hunxjunedo]

Acknowledged the comments, updating on that soon 👍

[flipvh]

I like it too! Maybe in a second round, the use of emoji option in the command menu can be made more intuitive. Now it just renders a : without any feedback on what to do. Perhaps it would be nice if it can open the emoij suggestions menu too? Great work!

[hunxjunedo]

@flipvh if I don't get you wrong, do you mean that the emoji option in the slash menu doesn't open the Emoji Menu ? Because I've tested it and can be seen in the demo that it works fine, is that a browser issue ?

[hunxjunedo]

@YousefED it's been almost a week, what's the progress of this PR ? Are we moving towards merging it ? Is this a low-priority ?

[matthewlipski]

I'll look into this PR tomorrow so we can try to finish it up and merge👍

[matthewlipski]

So I implemented the fix to opening the menu and started with the refactor, this should give you a good starting point to work off for the remaining changes👍

[hunxjunedo]

@matthewlipski thanks for taking charge and the valuable reviews. It's night here in my time zone, I'll do what's necessary tomorrow morning.

[hunxjunedo]

@matthewlipski @YousefED I've addressed the requested changes, can you please finalize.

[iandreileo]

Hi Folks, any news here? :D