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