How can I change the behavior of tiptap when pasting plain text?

Question

I'm currently trying to implement a visual editor using a library called tiptap.

https://v1.tiptap.dev/

I think v2 is the most common tiptap, but there are circumstances where v1 must be used.

However, I was not satisfied with the behavior when I pasted plain text into tiptap, and when I looked into it, I found that the condition set in the library prosemirror was different from what I expected.

https://github.com/ProseMirror/prosemirror-view/blob/master/src/clipboard.js#L57-L59

text.trim().split(/(?:\r\n?|\n)+/).forEach(block => {
 dom.appendChild(document.createElement("p")).appendChild(serializer.serializeNode(schema.text(block, marks)))
})

It seems that prosemirror converts a single newline to <p></p> . I would like to change the condition so that it converts to <br> if there is one newline, and <p></p> if there are two newlines. But I don't know how to make it happen, and I'm having a very hard time.

editorProps: {
  clipboardTextParser(text, $context) {
    console.log(text)
    console.log($context)
    // :(
  }
}

I started by using tiptap's EditorProps feature to overwrite the entire processing of prosemirror's clipboardTextParser . However, clipboardTextParser uses a number of variables and objects in prosemirror, and I have no idea how to write them in editorProps. And I gave up because I didn't know how to proceed.

Is there any way to solve this? I'm thinking that if tiptap can do almost the same thing as clipboardTextParser , it should be fine.

Pardon my broken English. Please help me!

Answer 1

You should use transformPastedHTML

https://prosemirror.net/docs/ref/#view.EditorProps.transformPastedHTML

That will give you a html node then you can simply change the output it like this:

private cleanHtmlHanlder (html: string): string {
  const elementHtml = document.createElement('br')
  elementHtml.innerHTML = html

  return elementHtml
}

Hope it helps