Hoist elements when parsing DOM


I’m working on an editor using tiptap (which is built with Prosemirror) which will replace our old CKEditor editor. Since we have TONS of content that has already been written using CKEditor there are some changes that we are doing in order for the new editor to also support the already existing markup.

Currently, I’m working on an image extension. Ideally, I want to make the image extension a Node. The thing is that I have existing DOM that may look something like:

<p>Some text some text some text. <br><img ...></p>

If I mark the image as a Node, Prosemirror simply ignores the image while parsing the DOM since it’s a block element within a block element. What I would love to do is to “hoist” the image outside the paragraph. The end result should look something like:

<p>Some text some text some text. <br></p> <!-- Maybe even removing that useless <br>? not a must -->
<img ...> <!-- In the editor the images use a NodeView, I might wrap it in a <figure> in the toDOM conversion -->

How can I achieve this?


This might be easiest to implement as a separate pass on the content, applied before feeding it to ProseMirror’s parser.

Yea I guess this is that I will do. For now I’ve created 2 separate extensions to handle the change in syntax. Both of those extensions use the same NodeView so it feels okay. Thanks!

@marijn It doesn’t seems like a good option.

  1. I have around 6GB of data (millions of documents) in certain collections of MongoDB who are using html based Froala Editor and i need to shift to prosemirror because of editor issues we have.
  2. If i go by the way you have described, it will create a chaos manipulating the data on the server side knowing the risk of mistake can happen while manipulating the existing records.
  3. It will be a long lasting tradeoff adding the script on client side validating the html structure and making it prosemirror compatible.

Could you please guide a better way to resolve this problem?