Remove node at position

1

i am using float menu on custom node i created. i am trying to implement remove button from the toolbar. how can i detect the position of the node on initialize the tool bar and later use node position to delete the node.

case 1:

  • trigger toolbar
  • the selection is on the node. if i will try deleteSelection everything works fine.

case 2:

  • trigger toolbar
  • selection changed
  • deleteSelection wont work.

how can i find the node position before delete and remove the node by position. i couldn’t find similar example.

class toolbar {
node;
constructor(view, node) {
this.node = node;
}

deleteNode() {
// how can i find the updated position of this.node and how can i remove it if it not on current selection
}
}
2

it will be helpful to have utility function for removing nodes by attribute value and type. code example will be helpful. thanks

3

For a toolbar (and not a custom node view), I would not try to track a node through multiple updates, but instead check whether the current selection is a node selection that matches the node type you want, and then use the selection position to delete the node.

If you are instead using a custom node view, you get can use the getPos method.

4

hey thanks for the response. the issue is when i change value in the toolbar some events changing the selection to empty text. and if i click remove it wont work. thats why i want want to find the node position by his attribute and remove it if exist.

5

That’s generally not a good idea (depending on the type of node, there might be multiple instances with the same attributes in the document). It should be possible to avoid the selection resetting by figuring out what’s causing it—even when the DOM selection and focus move out of the editor, ProseMirror’s state.selection should still point at the selection it had when it was last focused.

6

hey thanks for the answer, still looking for that :sweat_smile: but it general i want to know how to do it in order to understand the framework better and have more tools to customize the editor.i have attribute id with unique value for each node.

7

You can iterate through the entire document with the descendants method, and use the position of matching nodes to create your transaction.

8

Hi, I am trying the following logic to remove the node in the context of a custom view:

        const pos = this.getPos()
        if (typeof pos !== "number") return
        const tr = view.state.tr
        view.dispatch(tr.delete(pos-1, pos))

Any idea what could be wrong? The logic is correctly triggered (if I add a fake text and tweak the position it will delete it) but doesn’t delete the node. deleteRange does nothing either.

Edit: nevermind, found the error as soon as I have posted: the “from” is inclusive, “to” exclusive (as in many languages with slices like Python), so the solution is tr.delete(pos, pos+1)