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!