Custom nodeView not destroy, when delete and insert at same time

Show
1

I have a custom node view called ProductCardNodeView When I select the custom node, selectionFrom is 5 and selectionTo is 6 (just a example for more clarity) now I call

tr.delete(5, 6);
dispatch(tr);

then this node is removed, and also ProductCardNodeView’s destroy method called

:blush:But in fact, I want to replace ProductCardNodeView with a paragraphNode, So I need to insert a paragraphNode.

const textNode = schema.text('test');
const paragraphNode = paragraph.create({}, Fragment.from(textNode));
tr.delete(5, 6);
tr.insert(5, paragraphNode);
dispatch(tr);

But this time ProductCardNodeView’s destroy method not call, instead the update method called, the ProductCardNodeView still show.

Then I print editorState.doc.toJSON(), it show me change works.

question: Is my way correct? If not how do I do

2

See the docs for the update method. If you define that, you have to make sure it returns false when given a node that it can’t display.

3

Thank you very much, I solved it through handle update

update(node: Node, decorations: Array<Decoration>): boolean {
    if (node.attrs.productId) return false;
}

1、Is it a standard way handle this situation?

2、I still have some confused about why this ProductNode receive other node’s (paragraphNode in this example) attributes, I delete this node at first.

5

I’d check node.type, rather than attrs.

Nodes don’t have identity in this system, so node views just indicate that a given node is in the document at a given position, it’s not actually tied to a specific node object. If you delete a node and replace it with another node of that type, you’ll be able to reuse your node view.

6

Thanks for your answer :blush: