How to create Mentions (or any Node) from paste input?

[andreasvirkus]

Sort of related to #184, since Nodes were mentioned in the initial todo list there.

If I have a list of suggestions, could I automatically convert some of them to Mentions in a paste handler? For example

This is a comment. Well done! #appraisal

would become

This is a comment. Well done! #appraisal

Currently, my hashtags setup is:

export const Hashtag = class Hashtag extends Mention {
  get name() {
    return 'hashtag'
  }
}

And when setting up the editor, this is how i initialise the extension:

new Hashtag({
  matcher: {
    char: '#',
  },
  items: () => this.internalTags,
  onEnter: ({ items, query, range, command, virtualNode }) => {
    this.suggestionType = 'hashtag'
    this.suggestionQuery = query
    this.filteredSuggestions = items
    this.suggestionRange = range
    this.renderSuggestionPopup(virtualNode)
    this.insertSuggestion = command
  },
  onChange: ({ items, query, range, virtualNode }) => {
    this.suggestionQuery = query
    this.filteredSuggestions = items
    this.suggestionRange = range
    this.navigatedSuggestionIndex = 0
    this.renderSuggestionPopup(virtualNode)
  },
  onExit: () => {
    this.suggestionType = ''
    this.suggestionQuery = null
    this.filteredSuggestions = []
    this.suggestionRange = null
    this.navigatedSuggestionIndex = 0
    this.destroySuggestionPopup()
  },
  onKeyDown: this.onKeyDownHandler,
  onFilter: (items, query) => {
    if (!query) return items

    return items.filter((i) => i.toLowerCase().includes(query.toLowerCase())
  },
}),

How would I go about using the internalTags array to match for the #appraisal tag found in the text and upon a successful match, creating a Mention node? 🤔

Current result

Expected result

[andreasvirkus]

@hanspagel do you have any suggestions how I could tackle this? We've now added an emoji picker and our custom emoji set to it.. But when a user copy-pastes text that has custom emojis in it, this happens 😬

The custom emoji is a modified Image extension:

export class Klausmoji extends Image {
  get name() {
    return 'klausmoji'
  }

  get schema() {
    return {
      inline: true,
      attrs: {
        src: {},
        alt: {
          default: null,
        },
        title: {
          default: null,
        },
        height: {
          default: 16,
        },
        width: {
          default: 16,
        },
      },
      group: 'inline',
      draggable: false,
      parseDOM: [
        {
          tag: 'img[src]',
          getAttrs: dom => ({
            src: dom.getAttribute('src'),
            alt: dom.getAttribute('alt'),
            title: dom.getAttribute('title'),
            height: dom.getAttribute('height'),
            width: dom.getAttribute('width'),
          }),
        },
      ],
      toDOM: node => ['img', { ...node.attrs, style: `vertical-align: middle`, class: 'klausmoji' }],
    }
  }
}

[andreasvirkus]

I think this is related - #689