Tiptap: Feature req: emojis 🙏

[andreasvirkus]

Hi there,

Firstly, thanks for an amazing text editor for Vue!
A thing that our team is really missing atm is a way to integrate an emoji picker with tiptap.
Is this something you'd be willing to consider supporting?

If not, then what'd be the best way to integrate something like v-emoji-picker with tiptap?

Best,
andreas

[bartroodzant]

Can't you use the emoji menu's that are integrated in Windows 10 or Mac OSX? On Windows 10 this is activated by pressing Windows key + ; and on Mac OSX this is done by pressing ctrl + cmd + space.

[andreasvirkus]

I'm aware of this, but my app's end-users aren't/might not be (most non power users aren't).
That's also why most UIs present the user with an emoji picker.

Or maybe you could suggest how to achieve the GitHub/Slack approach where after typing in a :, I'm presented with a searchable list of emojis?

[andreasvirkus]

Bump; any plans to include this under the examples (or some help regarding my :heart: pattern question? 🙏 )

Edit: Will try to implement something like https://github.com/Agezao/emoji-to-short-name as a custom plugin/extension as soon as I find the time and then do my best to form it into an example PR.

[philippkuehn]

Hey Andreas! This should be already possible. You can use input rules to register emojis with something like :heart:. You can use the suggestions plugin (from the mentions example) to render a dropdown with a searchable list of emojis when typing :.

[andreasvirkus]

Yeah, realised that when I found the emoji-to-short-name package 🤦‍♂

[andreasvirkus]

I've created a basic example with both an emoji picker and an inline search. The codesandbox example doesn't let you insert because of a version conflict for prosemirror-model, but the code works fine in a proper environment.

https://codesandbox.io/s/tiptap-editor-k9r2e

Edit: almost done with the emoji inline search (custom Mention extension) as well.. I think I need a custom schema, modifying the toDOM callback by not prefixing it with the matcher, right?
https://github.com/ueberdosis/tiptap/blob/main/packages/tiptap-extensions/src/nodes/Mention.js#L45

Edit2: modified the schema. The only bug left is that I can only add 1 emoji Mention per block (and that's with [email protected] pinned, so it's not the same as https://github.com/ueberdosis/tiptap/issues/874) 🤔

[hanspagel]

How cool is that! 😊

I have no experience with the Suggestion extension, so I’m not sure if I’m able to help here, but I reopened the issue to give it more visibility.

Also I see us adding an emoji extension to v2 (won’t be a top priority, but would be a cool example to show the possibilities of a Suggestion extension).

Anyway, thanks for your work and thanks for sharing! I hope someone can help here.

[andreasvirkus]

The 1 Mention per paragraph is the only issue left. This is what I currently have:

export class EmojiSearch extends Mention {
  options!: {
    matcher: {
      char: string
    }
    mentionClass: string
  }

  get name() {
    return 'emoji-search'
  }

  getLabel(dom: HTMLElement) {
    return dom.innerText.split(this.options.matcher.char).join('')
  }

  get schema() {
    return {
      attrs: {
        id: {},
        label: {},
      },
      group: 'inline',
      inline: true,
      content: 'inline*',
      selectable: false,
      atom: true,
      toDOM: (node) => ['span', {}, node.attrs.label],
      parseDOM: [
        {
          tag: 'span[data-mention-id]',
          getAttrs: (dom: HTMLElement) => {
            const id = dom.getAttribute('data-mention-id')
            const label = this.getLabel(dom)
            return { id, label }
          },
          getContent: (dom: HTMLElement, schema) => {
            const label = this.getLabel(dom)
            return Fragment.fromJSON(schema, [
              {
                type: 'text',
                text: `${this.options.matcher.char}${label}`,
              },
            ])
          },
        },
      ],
    }
  }
}

The important bit is toDOM: (node) => ['span', {}, node.attrs.label], (looking at it now, parseDom could be trimmed down as well I believe 🤔 ).

I'll look into making the Codesandbox fully functional, although I don't have much confidence there - the same prosemirror-model version conflict also exists on the official Tiptap bug repl sandbox.

Edit: also added an intergration with the Giphy API, will try to update the sandbox

Recording of the 3 features/extensions:
https://drive.google.com/file/d/13mrMADIpEf5C5YyJLd7lFT_99PhHs9uv/view?usp=sharing