JSON > HTML > Back to JSON

1

Hello,

I am extremely knew to Prosemirror.

However am trying to get a flow working where

  1. I have the Prosemirror document json (generated by a schema + Node Views)

  2. I have schema (without the Node views)

  3. I need to Generate HTML from this json - done and working

    const state: EditorState = EditorState.create({ schema, doc: Node.fromJSON(schema, documentJson.content), }); const html = DOMSerializer.fromSchema(schema).serializeFragment(state.doc.content, {document}); div.appendChild(html);

  4. Need to edit the HTML for some content and then convert it back to Prosemirror JSON where all elements must match. Using a parser like so DOMParser.fromSchema(schema).parse(element);

**** Step 4 is where am blocked. The generated json is not the same as the original json (which was constructed using Schema + custom Node views) and is missing some elements/content in the json

What do I need to do to apply the same Node Views?

It looks like the parseDOM in schema is unable to access the domNode: That is one of the problems.

getAttrs(domNode: HTMLSpanElement) { return { condition: domNode.getAttribute(‘data-condition’), };

Any help is appreciated! Thank you!

2

If your schema’s toDOM and parseDOM specs are defined in a way so that each node’s DOM representation is parsed back to that node, serializing and then parsing should not change your document. Try to see if you can isolate the problem more precisely. It might be a bug in your schema, or an HTML parser quirk (you can’t nest <p> nodes, for example), or related to the modification you say you’re applying in the DOM.

3

Thank you for responding! The puzzling piece is that the same schema i.e toDOM and parseDOM methods (which I am using for pm > html > pm ) is used to generate the original json. Except the fact that NodeViews are also used. Maybe am missing something, but like you said I’lll try to isolate the problem and post an update. Thank you again for helping.

4

One of the problems like you mentioned @marijn is the p tag. Contents of additional P tags are getting rolled over into 1 single element.

eg: -Incoming json

  {
    "type": "p",
    "content": [
      {
        "type": "text",
        "text": "para 1"
      }
    ]
  },
  {
    "type": "p",
    "content": [
      {
        "type": "text",
        "text": "para 2"
      }
    ]
  },

Output html has separate p tags as expected (not shown here because of markup) :

para 1

para 2

Outgoing json parsed back results in

  {
    "type": "p",
    "content": [
      {
        "type": "text",
        "text": "para 1para 2"
      }
    ]
  },

Schema used : const p = { group: ‘block’, content: ‘inline*’, toDOM: () => [‘p’, 0], parseDOM: [{ tag: ‘p’, }], };

const SchemaSpec: any = (param: any) => ({ nodes: { element1, element2, element3, element4, p, element5, text: { group: ‘inline’, inline: true, }, doc: { content: ‘element1 element1 element3 element4 p+ element5*’, }, }, });

What could I be doing wrong? Thank you!

5

That’s not the <p> issue I mentioned (that only occurs when you put one inside the other), though. Node views also can’t really be involved, since neither the DOMParser nor the DOMSerializer knows about those. Try simplifying the code that creates the issue until you figure out what, precisely, causes it.