Saving content containing DOM generated by nodeView

1

Hi,
I have set up a nodeView for wrapping tags inside a wrapping container in which I append another for displaying a resize handler in the corner above the image, another as a tooltip displaying the width of the image. The DOM structure of the nodeView is:

<div class="ProseMirror">
<span class="wrap">
<span class="resize"></span>
<span class="tooltip">200px</span>
<img src="...">
</span>
</div>

At present, when I save the content to my database, the DOM generated by the nodeView is saved in my database. Then, when I reload the content from my database into my editor, Prosemirror strangely unwrap the innerText of the tooltip span and “relocates” it above the wrap span.
I get the structure below:

<div class="ProseMirror">
200px
<span class="wrap">
<span class="resize"></span>
<span class="tooltip">200px</span>
<img src="...">
</span>
</div>

The same happens if the wrap span contains text content (<span class="wrap">hello<span class="resize">...</span>). It gives after reloading from database: <div class="ProseMirror">hello200px<span...</span></div>.

Should I remove the generated DOM from the content before saving to database ? Or is this rather related to the Schema not parsing the spans correctly ?

thank you

2

It sounds like you’re using the editor’s innerHTML and saving that in the database. In general, that’s a bad idea. Define data-only toDOM methods for your node types, and use a DOMSerializer to create a clean representation of the document when saving.

3

HI @marijn, I use document.createElement and innerText inside the constructor of my NodeView class, then assign the built element to the dom property of the class. Is it a wrong way ? Here’s my code:

class ResizableImageNodeView {
  constructor (node, view, getPos, decorations) {
    const wrap = document.createElement('span');
    wrap.classList.add('wrap');
    wrap.style.width = node.attrs.width + 'px';
    wrap.innerText = 'hello';

    const handle = document.createElement('span');
    handle.classList.add('resize-handle');
    handle.innerText = 'hello';

    const img = document.createElement('img');
    img.setAttribute('src', node.attrs.src);
    img.setAttribute('width', node.attrs.width);
    img.setAttribute('data-src-width', node.attrs['data-src-width']);
    img.setAttribute('height', node.attrs.height);
    const maxWidth = node.attrs['data-src-width'];
    const ratio = node.attrs.height / node.attrs.width;

    const tooltip = document.createElement('span');
    tooltip.classList.add('tooltip');
    tooltip.innerText = node.attrs.width + 'px';

    wrap.appendChild(handle);
    wrap.appendChild(tooltip);
    wrap.appendChild(img);

    this.dom = wrap;
    this.handle = handle;
    this.tolltip = tooltip;
    this.img = img;
  }
  selectNode () {
    this.handle.classList.add('active');
    this.tooltip.classList.add('active');
    this.img.classList.add('ProseMirror-selectednode');
  }

  deselectNode () {
    this.handle.classList.remove('active');
    this.tooltip.classList.remove('active');
    this.img.classList.remove('ProseMirror-selectednode');
  }
}
4

I wasn’t talking about the node view implementation, I was talking about the way you store content in the database.

5

I don’t understand: I save to my database the HTML produced by Prosemirror in the editor using view.dom.innerHTML, which is valid HTML. And I load it from my database into the editor using DOMParser.
Do I really need to use a DOMSerializer to get the content from the editor ? I cannot find an example in the docs and not sure about how to use it.

thank you

6

Yes, and I’m saying don’t do that, use DOMSerializer. It’s documented, and not hard to use.

let scratch = document.createElement("div")
scratch.appendChild(DOMSerializer.fromSchema(mySchema).serializeFragment(myDoc.content))
return scratch.innerHTML
1 Like
7

Indeed ! thank you.
I love ProseMirror.