I'm currently trying to implement a visual editor using a library called tiptap.
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!
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