Catch-all node attributes in schema (iframes etc)

I have the use case that users are allowed to embed any random iframe (subject to some validation logic) in the documents they’re authoring within ProseMirror. Those iframes might have a ton of attributes and perhaps surrounding elements (e.g. a parent div that wraps an iframe).

I am trying to figure out how to model in this a ProseMirror schema - I could create an iframe node of course, but e.g. pasting in content with a surrounding div is going to be non-trivial. I can’t predict in advance all the ways sites will return embed HTML, but most probably I’m only going to allow iframes.

One possible way of handling this is instead of having an iframe node, is to have my own custom “embed” node which is just a div with a single attribute which is the actual html as returned by external sites. Then I can use a NodeView while editing, and provide my own behaviour like click-to-play when rendering statically.

If anyone has some pointers or has done this before I’d be thrilled to hear your suggestions :slight_smile:

An opaque HTML node should work (depending on whether you need these to appear in inline, block, or both types of positions). You’ll probably need some kind of validation of the content of the node to avoid injection attacks in most scenarios.

By “opaque HTML node” you mean me defining a catch-all “embed” node which is a div with the embed code in (serialized) attr and a NodeView to take care of validation/display, right?

Yeah, a node that can contain any HTML tag, stored as a string.