Fragment Mark View or Node View

1

I have a mark per-word in a large document. Displaying all marks takes ~10x longer to render (~700ms vs 70ms) due to the overhead of creating so many DOM nodes. Since they’re only needed conditionally is there a way to render them as fragments without mutating the document to remove all “word” type marks?

I’ve tried returning document.createDocumentFragment(), document.createTextNode(""), and [0] from toDOM in both marks and nodes but that just tends to hide the mark and its contents whereas I still want to show its contents.

2

I’m not sure what you are trying to do. A document fragment is just a collection of DOM nodes. It doesn’t help with optimizing the rendering of such nodes.

Is the 700ms the initial rendering time of the editor, or the rendering time on editing actions in an existing editor?

3

Is the 700ms the initial rendering time of the editor

Yes.

I’m not sure what you are trying to do.

Just trying to make my first document render faster without having to remove (and then add back) ~70k marks. The marks matter for editing, but they only matter for viewing in one use case.

A document fragment is just a collection of DOM nodes. It doesn’t help with optimizing the rendering of such nodes.

Document fragments can improve the first render time to ~580ms. See this fiddle and open the dev tools console before clicking each button to see the time to render.

However, a special return value (like null) to skip rendering the mark’s node but still render the mark’s content would allow getting closer to the ~70ms.

The API I want is:

marks: {
  em: {
    toDOM: (node) => null, // some new sentinel value that means no wrapper node
  },
},

OR

nodes: {
  em: {
    toDOM: (node) => document.createTextContent(node.innerText), // I think you mindfully decided against allowing this, which is fine
  },
},
4

One of ProseMirror’s core principles is that the rendered representation of content contains all the information needed to parse it back into the original document. Rendering a mark as nothing, or a non-text node as plain text, would violate that principle, and simply not work (even inside the editor, changed content is often parsed after changes in order to figure out what changed).

5

One of ProseMirror’s core principles is that the rendered representation of content contains all the information needed to parse it back into the original document.

Fair enough. Thanks for explaining!