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[bot]]

💎 $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 :wave: , 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 ?

[syedbarimanjan]

@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 ?

I will restart working on it at night so if you already have a working solution you can raise a pr.

[hunxjunedo]

@YousefED I've implemented it and prepared to raise the pull request. Should I proceed or wait till I get assigned ?

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

[YousefED]

If you have it ready you can raise a pr as syed suggests. Then ill review that tomorrow or friday and decide how to move fwd

On Wed, 19 Jun 2024 at 17:48, Hunain Ahmed @.***> wrote:

@YousefED https://github.com/YousefED I've implemented it and prepared to raise the pull request. Should I proceed or wait till I get assigned ?

— Reply to this email directly, view it on GitHub https://github.com/TypeCellOS/BlockNote/issues/808#issuecomment-2179019606, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAC2BWOV5ALHMX5NZKEJT5DZIGR6NAVCNFSM6AAAAABI2KJG7SVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCNZZGAYTSNRQGY . You are receiving this because you were mentioned.Message ID: @.***>

[hunxjunedo]

If you have it ready you can raise a pr as syed suggests. Then ill review that tomorrow or friday and decide how to move fwd

On Wed, 19 Jun 2024 at 17:48, Hunain Ahmed @.***> wrote:

@YousefED https://github.com/YousefED I've implemented it and prepared to raise the pull request. Should I proceed or wait till I get assigned ?

— Reply to this email directly, view it on GitHub https://github.com/TypeCellOS/BlockNote/issues/808#issuecomment-2179019606, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAC2BWOV5ALHMX5NZKEJT5DZIGR6NAVCNFSM6AAAAABI2KJG7SVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCNZZGAYTSNRQGY . You are receiving this because you were mentioned.Message ID: @.***>

Alright, doing it as soon as I get to a computer.

[algora-pbc[bot]]

💡 @hunxjunedo submitted a pull request that claims the bounty. You can visit your bounty board to reward.

[hunxjunedo]

@YousefED I've raised a PR, kindly review it.

[fridaystreet]

We have an emoji-mart based tiptap plugin we built that we are now using in blocknote, works as is in blocknote. We've just added a blocknote sidemenu button helper component.

Features: 1) It has the emoji picker on typing : (which honours the skin colour) This utilises the frequently used feature of emoji-mart to prioritise the list shown, so before you type any search chars after the : you get you frequent items.

We listed them long ways with the shorcodes and shorthand so you could start to learn the codes over time

2) It has full the emoji-mart picker so you chen you can change skin theme settings, see the recent used etc. Open this menu by adding the smile icon to side menu or slash menu

3) It has a text input rule to pick up when emojis are just typed shothand not with shortcodes eg :-) and will automatiucllay turn them into emojis after hitting space while typing.

[ayush-oswal]

Hey @YousefED is this still open?

[algora-pbc[bot]]

🎉🎈 @hunxjunedo has been awarded $100! 🎈🎊

• Share on socials
• Give feedback