How do I refresh the view after modifying node.attrs?

[SF-Simon]

We need to update the nodes mentioned. Therefore, we find all the nodes, and then modify the attrs value of the node.
But now we don't know how to update the view of this node to make the node re render HTML.

editor.state.doc.forEach(node, offset) => {
  if (node.attrs.id === "custom") {
    node.attrs.label = "New label";
    editor.view.updateState(editor.state); // no work
  }
});

[philippkuehn]

nodes are immutable. You have to use transactions to update the state. Something like this should work

editor.state.doc.descendants((node, position) => {
  if (node.attrs.id === 'custom') {
    const tr = editor.state.tr

    tr.setNodeMarkup(pos, undefined, {
      ...node.attrs,
      { label: 'New label' },
    })

    editor.view.dispatch(tr)
  }
})

You can also use an inline command for it.

editor.commands.command(({ tr }) => {
  tr.doc.descendants((node, position) => {
    if (node.attrs.id === 'custom') {
      tr.setNodeMarkup(pos, undefined, {
        ...node.attrs,
        { label: 'New label' },
      })
    }
  })
  
  return true
})

[SF-Simon]

nodes are immutable. You have to use transactions to update the state. Something like this should work

editor.state.doc.descendants((node, position) => {
  if (node.attrs.id === 'custom') {
    const tr = editor.state.tr

    tr.setNodeMarkup(pos, undefined, {
      ...node.attrs,
      { label: 'New label' },
    })

    editor.view.dispatch(tr)
  }
})

You can also use an inline command for it.

editor.commands.command(({ tr }) => {
  tr.doc.descendants((node, position) => {
    if (node.attrs.id === 'custom') {
      tr.setNodeMarkup(pos, undefined, {
        ...node.attrs,
        { label: 'New label' },
      })
    }
  })
  
  return true
})

However, this method will leave a history and make the process revocable.
How should we deal with this problem?

[philippkuehn]

try tr.setMeta('addToHistory', false)

[SF-Simon]

try tr.setMeta('addToHistory', false)

editor.state.doc.descendants((node, position) => {
  if (node.attrs.id === 'custom') {
    const tr = editor.state.tr

    tr.setNodeMarkup(pos, undefined, {
      ...node.attrs,
      ...{ label: 'New label' },
    })
    tr.setMeta('addToHistory', false); // here stop history
    editor.view.dispatch(tr)
  }
})

This code works for us, but there are still some things we don't understand.

We want to delete this Node object under certain conditions. If we want to remove a specific Node, how should we write this process? Will deletion in the descendants process affect future location values?

editor.state.doc.descendants((node, position) => {
        if (node.type.name === "CustomType") { // new
          const tr = editor.state.tr;
          ////// ======== 
          tr.setMeta("addToHistory", false); // here stop history
          editor.view.dispatch(tr);
        }
      });

[philippkuehn]

try tr.delete https://prosemirror.net/docs/ref/#transform.Transform.delete