Adding div with foreign html content


I’d like to insert some html content into a [div] tag using the node schema. Inserting the [div] tag itself was rather straight forward. How should I code the parseDOM and toDOM so that the html content can be placed within the [div] tags?

Thank you

You could put the HTML in an attribute of the node, and have parseDOM and toDOM use innerHTML to read the attribute and put it back into the <div>. You’ll probably at some point want to define a node view for such a node to prevent it from re-rendering on every update (which is the default behavior when attributes change).

1 Like

Hi marijn,

Thanks a lot for replying. I understand what you mean. That seems like a long shot though.

Thank you.

We are using the approach Marijn described for foreign HTML content.

We have a special node which has an attribute that contains an arbitrary HTML string. This node type does not allow children in the PM document. We then have a node view which makes a few adjustments to the HTML string before rendering it inside the nodeview dom element. The nodeview has logic to avoid re-parsing and re-rendering the HTML content unless strictly necessary.

There’s a bunch more you can do with it too, but that approach has worked well for us so far and allows for further extension. For example, we have a command which converts the node and its HTML content into a simplified form that maps nicely to nodes in our ProseMirror document schema.

1 Like

Could be feasible adding a property for a node spec (eg ‘opaque’) to manage such cases?