Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Integrate emoji picker #808

Open
YousefED opened this issue Jun 5, 2024 · 20 comments · May be fixed by #854
Open

Integrate emoji picker #808

YousefED opened this issue Jun 5, 2024 · 20 comments · May be fixed by #854
Assignees
Labels
💎 Bounty enhancement New feature or request

Comments

@YousefED
Copy link
Collaborator

YousefED commented Jun 5, 2024

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 YousefED added the enhancement New feature or request label Jun 5, 2024
@YousefED
Copy link
Collaborator Author

YousefED commented Jun 5, 2024

/bounty 100

Copy link

algora-pbc bot commented Jun 5, 2024

💎 $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 bountyShare 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
Copy link

Please assign @YousefED

@Bhavyajain21
Copy link

Bhavyajain21 commented Jun 5, 2024

/attempt

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

@syedbarimanjan
Copy link

syedbarimanjan commented Jun 5, 2024

/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
Copy link

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

@hunxjunedo
Copy link

hunxjunedo commented Jun 17, 2024

/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
Copy link
Collaborator Author

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

@syedbarimanjan
Copy link

syedbarimanjan commented Jun 19, 2024

@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
Copy link
Collaborator Author

@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
Copy link

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

@hunxjunedo
Copy link

hunxjunedo commented Jun 19, 2024

@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
Copy link

@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
Copy link

hunxjunedo commented Jun 19, 2024

@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
Copy link
Collaborator Author

YousefED commented Jun 19, 2024 via email

@hunxjunedo
Copy link

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
#808 (comment),
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.

@hunxjunedo hunxjunedo linked a pull request Jun 20, 2024 that will close this issue
Copy link

algora-pbc bot commented Jun 20, 2024

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

@hunxjunedo
Copy link

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

@fridaystreet
Copy link
Contributor

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

Screenshot 2024-06-21 at 12 53 26 pm Screenshot 2024-06-21 at 12 53 34 pm
  1. 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
Screenshot 2024-06-21 at 12 52 25 pm
  1. 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.
Screenshot 2024-06-21 at 12 53 52 pm Screenshot 2024-06-21 at 12 53 57 pm

@ayush-oswal
Copy link

Hey @YousefED is this still open?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
💎 Bounty enhancement New feature or request
Projects
None yet
Development

Successfully merging a pull request may close this issue.

6 participants