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

/

I think v2 is the most mon 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.

.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!

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

https://v1.tiptap.dev/

I think v2 is the most mon 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./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!

• javascript
• vue.js
• tiptap
• prose-mirror

1 Answer 1

You should use transformPastedHTML

https://prosemirror/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