How do I specify ContentDOM for each node in ContentExpression?

I am using a NodeView that utilizes a Vue Component to create a custom rendering of a Content Expression. An example schema looks as follows:


const schema = {
            group: "type",
            content: "heading image rich-text ",
            parseDOM: ["example"]
        }

I am able to render the NodeView, but the contentDOM field seems to only specify where all of the content will go, but I want to specify where the heading, image and rich-text will be located.

For instance, I would like for a single node that had four headings as content to be able to render as so:

where each “Default” heading element can be edited and updated independently and also positioned as I see fit. How would I go about doing this?

Can you explain more about this, I am not fully understanding what this means. Doesn’t specifying where all of the content will go, give you the power of where the location will be?

Hi kepta, I think I would like to customize where the content is within say a div element. Like if I had an Heading, Image, and Paragraph, I would like to have a schema like so:

const schema = {
            group: "type",
            content: "heading image paragraph",
            parseDOM: ["example"]
        }

and be able to order it in a div element like so

<div>
<heading/>
<paragraph/>
<image/>
</div>

Or like so:

<div>
<image/>
<paragraph/>
<heading/>
</div>

Or like this:

<div>
<row>
  <col> 
      <heading>
  </col>
< col> 
   <image/>
</row>
<paragraph/>
</row>

This isn’t something you can do with ProseMirror. You could use CSS grid to change the order in which your elements display in the DOM (though I’m not sure cursor motion will behave reasonably in such styled content), but ProseMirror expects content to be in the DOM in document order.

Ok, I will restructure my content expression to follow the structure I need. Thanks!