Emoji extensions with images and copy/paste support

[Pavel-Son]

Hi there! I would like to make an extension with emojis as picture support and already got some progress but, there are many issues I'm facing.

Here is emoji extension now.

let emojiService: EmojiService
export default Node.create({
  onBeforeCreate() {
    emojiService = getEmojiService()
  },
  name: 'emoji',
  group: 'inline',
  inline: true,
  selectable: false,
  atom: true,
  content: 'text*',

  addAttributes() {
    return {
      text: {},
      emoji: {}
    }
  },

  parseHTML() {
    return [
      {
        tag: 'span[text]',
      },
    ]
  },

  renderHTML({ HTMLAttributes }): any {
    if (!HTMLAttributes.text) {
      return [
        'span', {}, ''
      ]
    }
    const emoji = emojiService.findEmoji(HTMLAttributes.text)
    if (!emoji) {
      return [
        'span', 0
      ]
    }
    return [
      'span',
      {
        class: 'tm-emoji',
        style: `
          padding: 2px;
          background-position: ${emoji.getPosition()}
        `,
        text: emoji.native,
      },
      emoji.native,
    ]
  },

  addCommands(): any {
    return {
      setEmoji: (emoji: any) => ({ commands }: any) => {
        commands.insertContent(
          {
            type: 'emoji',
            attrs: {
              emoji,
              text: emoji.native
            }
          }
        )
      },
    }
  },

  addInputRules() {
    return [
      nodeInputRule(
        emojiService.getEmojiShortnameRegexp(true),
        this.type,
        match => emojiService.inputRuleHandler(match)
      ),
      nodeInputRule(
        emojiService.getEmojiRegexp(true),
        this.type,
        match => emojiService.inputRuleHandler(match)
      ),
    ]
  },

  addPasteRules() {
    return [
      nodePasteRule(
        emojiService.getEmojiShortnameRegexp(false, true),
        this.type,
        (match: string[]) => emojiService.emojiPasteRule(match),
        (match: string) => {
          return !!emojiService.findEmoji(match)
        }
      ),
      nodePasteRule(
        emojiService.getEmojiRegexp(false, true),
        this.type,
        (match: string[]) => emojiService.emojiPasteRule(match),
        (match: string) => {
          return !!emojiService.findEmoji(match)
        }
      )
    ]
  }

})

1. I get pretty well working input/paste rules but, when you type something like :qweqweqweqw: it would be an empty emoji
2. Emojis wouldn't copy and paste in any other source but could be pasted
3. cursor might fall into emoji sometimes
4. when you add emoji as last symbol there is no way to click on line below to activate editor