Make bundled emoji opt-in for @tiptap-pro/extension-emoji

Haraldson commented 1 year ago

What problem are you facing?

The current @tiptap-pro/extension-emoji bundles all emoji in a very non-efficient way, and also makes it impossible to provide your own set of emoji. In my app, I already have an emoji picker made with missive/emoji-mart.

As I can’t build an emoji picker based on what’s provided by Tiptap’s emoji extension, the logical course of action is to do the opposite – use the emoji from the picker in the Tiptap editor. This is a problem, as not all the shortnames and IDs match. Many of them do and I have a mostly working version running, but there are enough misses among the hits for it not to be a viable long-term solution.

What’s the solution you would like to see?

Make it possible to opt out of all the hundreds of kilobytes of bundled emoji data
Establish a clear data contract and make it possible for consumers of the emoji extension to provide emoji data from the outside

When the data provided to the extension and the suggestion.items() search is based on the same library, mismatches are eliminated.

What alternatives did you consider?

I don’t really see any, short of painstakingly mapping every mismatching emoji manually.

Anything to add? (optional)

No response

Are you sponsoring us?

[X] Yes, I’m a sponsor. 💖

github-actions[bot] commented 1 year ago

This issue is stale because it has been open 45 days with no activity. Remove stale label or comment or this will be closed in 7 days

Haraldson commented 1 year ago

Nah, still needed

denyskleimenov commented 7 months ago

Hi, I'm not sure if my solution is what you want, but I ended up creating a custom emoji extension that extends the original Emoji extension with a custom command that accepts the emoji as a string (such as 😎) and inserts it using the insertContent command

import Emoji from '@tiptap-pro/extension-emoji';

export const CustomEmoji = Emoji.extend({
  name: 'emoji',

  addCommands() {
    return {
      setEmoji:
        (emoji) =>
        ({ commands }) => {
          return commands.insertContent(emoji);
        },
    };
  },
});

I understand that the provided code won't help with custom emojis because it is used for unicode emojis, but maybe it will help someone... Anyway, I think creating a custom extension is the only way at the moment.

ueberdosis / tiptap