Tiptap: Alter the content onDrop

[shredding]

Is there an option to alter the content onDrop? I

I get the content I drop from the passed arguments and i have the content I want to have at hand.

I tried setContent and string.replace() on onUpdate but it alters the cursor position on normal input, and I can't do it on onDrop as it's before the alteration.

[shredding]

I managed to get this to work with a plugin, so for reference to whomever comes after me:

I have within my data() something like this:

snippets: [
        {
          title: 'Title 1',
          content: 'Content of title 1'
        },
        {
          title: 'Titel 2',
          content: 'Content of title 2'
        }
      ]

The content may be very long, which is why I need to display the title and replace it with the content on drop.

I use https://github.com/SortableJS/Vue.Draggable to create snippets like this:

<draggable v-for="snippet in snippets" :key="snippet.title" :setData="(evt) => { evt.setData('text/plain', snippet.content) }">
      <div class="snippet">{{snippet.title}}</div>
</draggable>

Note the setData, that injects the actual snippet content into the dataTransfer.

Now I have this extension, that can be simply loaded with new SnippetExtension() within the extension property of tiptap:

import {  Plugin, Paragraph } from 'tiptap'

export default class Snippet extends Paragraph {

  get name() {
    return 'snippet'
  }

  get plugins() {
    return [
      new Plugin({
        props: {
          handleDOMEvents: {
            drop(view, event) {
              event.preventDefault()
              const coordinates = view.posAtCoords({ left: event.clientX, top: event.clientY })
              const content = event.dataTransfer.getData('text/plain')
              const transaction = view.state.tr.insertText(content, coordinates.pos)
              view.dispatch(transaction)
            }
          }
        }
      })
    ]
  }
}

Works like a charm :-)