Figure's wrapped in div

I’ve got some figures which are block nodes. It looks like ProseMirror is wrapping them in a <div> when within the editor, grabbing the HTML from the editor, removes this div though. The issue here is that I have some CSS for paragraphs that are after a figure, which doesn’t get applied due to this extra <div>.

HTML within Editor (wrong):

<p>...</p>
<div><figure>...</figure></div>
<p>...</p>

serialized HTML (correct):

<p>...</p>
<figure>...</figure>
<p>...</p>

This is intentional, and necessary for the browser to allow a cursor position before and after the non-editable figure node, which ProseMirror needs in order to be able to set a node selection on it. I’d prefer not to have this hack too, but for non-editable block nodes, I haven’t found a better solution (we could put a hidden node before and after it, maybe, but that’d cause the same kind of issue here).

How about giving the div a class so I can at least target it with CSS?

I just ran into a few other issues with the way the editor was setting the DOM selection for node selections, which was a rather scary hack anyway, so I’ve gone back to not setting a DOM selection at all in this case in this patch. It’s a bit problematic that we aren’t telling the browser where the selection is when a node is selected, but it seems like it’s the less kludgey option.

I’ll bring out a new patch version in a moment.

1 Like