Integrate emoji picker

[YousefED]

Describe the solution you'd like
An emoji picker that works similar to the one in Notion:

Main requirements:
[ ] Easy to update with new emojis, possibly use a library like https://www.npmjs.com/package/emoji-mart, https://www.npmjs.com/package/react-input-emoji, or different
[ ] As seen in the gif above, the focus should remain on the editor, while the user filters. Perhaps it needs to be implemented as a custom suggestion menu, but that currently doesn't have support for keyboard nav to left / right, so that would need to be added. It might be necessary to create your own version of SuggestionMenuController for this (and share common code nicely)
[ ] Should be accessible (both keyboard navigation and screen reader support would be ideal)
[ ] Component should be selectable both via the slash menu, and when the user types a trigger character (:)

This will require to get up to speed with the codebase and understand how suggestions work internally, so I don't recommend this issue for beginners

[YousefED]

/bounty 100

[algora-pbc]

💎 $100 bounty • BlockNote

Steps to solve:

1. Start working: Comment /attempt #808 with your implementation plan
2. Submit work: Create a pull request including /claim #808 in the PR body to claim the bounty
3. Receive payment: 100% of the bounty is received 2-5 days post-reward. Make sure you are eligible for payouts

Thank you for contributing to TypeCellOS/BlockNote!

Add a bounty • Share on socials

Attempt	Started (GMT+0)	Solution
🟢 @Bhavyajain21	Jun 5, 2024, 9:38:20 AM	WIP
🟢 @syedbarimanjan	Jun 5, 2024, 12:36:58 PM	WIP
🟢 @hunxjunedo	Jun 17, 2024, 7:48:20 PM	#854

[Bhavyajain21]

Please assign @YousefED

[Bhavyajain21]

/attempt

Algora profile	Completed bounties	Tech	Active attempts	Options
@Bhavyajain21	11 bounties from 3 projects	Rust, TypeScript, JavaScript & more		Cancel attempt

[syedbarimanjan]

/attempt #808
@YousefED I am thinking of using emoji-mart as it is best suited for this and creating an element named AccessibleSuggestionMenuController which will use the useSuggestionMenuKeyboardNavigation hook for adding keyboard navigation. can you confirm that this will be alright or should i attempt it some other way. Thanks.

Edit: and i am creating a new file in packages/core/src/extensions/SuggestionMenu named getDefaultEmojiMenuItems.ts where i will get the emojis from the emoji-mart return them.

ps: can i get assigned.

Algora profile	Completed bounties	Tech	Active attempts	Options
@syedbarimanjan	3 bounties from 3 projects	TypeScript, Go, JavaScript		Cancel attempt

[syedbarimanjan]

I implemented it and then suddenly got a better idea on how to do it so it wil take some more time.

[hunxjunedo]

/attempt #808
hey @YousefED 👋 , It's been almost 2 weeks. Meanwhile I've been looking into it and have almost reached an optimal working solution. I'm in a position of creating a pull request today Inshallah, can I please get assigned so I can proceed with the pull request ?

Algora profile	Completed bounties	Tech	Active attempts	Options
@hunxjunedo	1 bounty from 1 project	JavaScript		Cancel attempt

[YousefED]

@syedbarimanjan any update on this? Otherwise I'll assign another attempt later this week

[syedbarimanjan]

@syedbarimanjan any update on this? Otherwise I'll assign another attempt later this week

I am working on it, trying to integrate emoji-mart picker as it has all the functionality we need. If that is not possible then i will have to create the picker myself which means alot of more code to maintain.

[YousefED]

@syedbarimanjan any update on this? Otherwise I'll assign another attempt later this week

I am working on it, trying to integrate emoji-mart picker as it has all the functionality we need. If that is not possible then i will have to create the picker myself which means alot of more code to maintain.

Alright, thanks for the update!

[syedbarimanjan]

@hunxjunedo if you have a working fix create a pr till tonight.

[hunxjunedo]

@hunxjunedo if you have a working fix create a pr till tonight.

@YousefED I'm going with that, you okay with this ? Coming back in abt 12 hours.
Should I create a PR even if the issue is still assigned to someone else ?