Isolating node got re-rendered, how to fix it?

1

Here’s our custom node definition

      content: "inline*",
      group: "block",
      atom: true,
      selectable: false,
      isolating: true,
      draggable: false,

We found that when pressing Backspace under the node, the node got deleted and re-added back. Though the final results make it isolating, the node got re-mounted ( we have a react component inside the node).

Could we get enlightened on how to eliminate the re-rendering, making the node truly isolating?

We vaguely understand the viewdesc is sth like a virtual-dom and ViewTreeUpdater syncs the view desc to DOM. But there’s just too much to handle for us and we don’t have more clues.

We traced that the deletion happens in findNodeMatch and the re-adding process happens in addNode inside NodeViewDesc.updateChildren (https://github.com/ProseMirror/prosemirror-view/blob/550d4ddc071ee08a4d96109f2385b445ae3be5ab/src/viewdesc.ts#L728-L740)

// Observation 1: the node got destroyed
destroy	@	index.js:1517
destroyBetween	@	index.js:1684
findNodeMatch	@	index.js:1755
eval	@	index.js:1293
iterDeco	@	index.js:2011
updateChildren	@	index.js:1280
updateInner	@	index.js:1377
update	@	index.js:1369
updateStateInner	@	index.js:5138
updateState	@	index.js:5092
dispatchTransaction	@	index.js:383
dispatch	@	index.js:5421
joinBackward	@	index.js:59
eval	@	index.js:744
eval	@	index.js:99
eval	@	index.js:2991
someProp	@	index.js:5229
editHandlers.keydown	@	index.js:2991
view.dom.addEventListener.view.input.eventHandlers.<computed>	@	index.js:2913

// Obeservation 2: the node got re-created
create	@	index.js:1198
addNode	@	index.js:1841
eval	@	index.js:1301
iterDeco	@	index.js:2011
updateChildren	@	index.js:1280
updateInner	@	index.js:1377
update	@	index.js:1369
updateStateInner	@	index.js:5138
updateState	@	index.js:5092
dispatchTransaction	@	index.js:383
dispatch	@	index.js:5421
joinBackward	@	index.js:59
eval	@	index.js:744
eval	@	index.js:99
eval	@	index.js:2991
someProp	@	index.js:5229
editHandlers.keydown	@	index.js:2991
view.dom.addEventListener.view.input.eventHandlers.<computed>	@	index.js:2913
2

And weirdly enough, if there’s a random char just before the re-rendered block, the node does not get re-rendered.

Another unstable behavior I observed is that if I keep the page open for long enough (maybe something happened) and the custom nodes constantly re-renders when I move the cursor. Seems like the reconciliation process is not stable.

3

Which platform does this happen on? What does the DOM for the node look like?

4

The node screenshot

image
image1756×1762 208 KB

Happens on OSX Chrome.

UA: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36

5

There is nothing about the isolating flag that guarantees when a node may or may not be re-rendered.

In this case, I assume the browser’s native backspace behavior messes with the node’s DOM, so the editor makes sure to redraw it.