Integrate emoji picker - Githubissues

TypeCellOS / BlockNote

A React Rich Text Editor that's block-based (Notion style) and extensible. Built on top of Prosemirror and Tiptap.

https://www.blocknotejs.org/

Mozilla Public License 2.0

5.9k stars 384 forks source link

Integrate emoji picker #808

Open YousefED opened 4 weeks ago

YousefED commented 4 weeks ago

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

emoji

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 commented 4 weeks ago

/bounty 100

algora-pbc[bot] commented 4 weeks ago

💎 $100 bounty • BlockNote

Steps to solve:

Start working: Comment /attempt #808 with your implementation plan
Submit work: Create a pull request including /claim #808 in the PR body to claim the bounty
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 commented 4 weeks ago

Please assign @YousefED

Bhavyajain21 commented 4 weeks ago

/attempt

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

syedbarimanjan commented 4 weeks ago

/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 commented 3 weeks ago

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

hunxjunedo commented 2 weeks ago

/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 commented 2 weeks ago

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

syedbarimanjan commented 2 weeks ago

@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 commented 2 weeks ago

@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 commented 2 weeks ago

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

hunxjunedo commented 2 weeks ago

@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 commented 2 weeks ago

@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 commented 2 weeks ago

@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 commented 2 weeks ago

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 commented 2 weeks ago

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] commented 2 weeks ago

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

hunxjunedo commented 2 weeks ago

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

fridaystreet commented 1 week ago

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 commented 1 week ago

Hey @YousefED is this still open?