How can I manually destroy a node view?

[dkrusenstrahle]

Hello,

I am looking for a way to delete the currently selected node using a button (and not the backspace key) inside the node.

I can replace the current node with the below code but I need the node to disappear not be replaced.

const from = this.props.editor.state.selection.from;
const to = this.props.editor.state.selection.to;
return this.props.editor.commands.insertContentAt({ from: from, to: to }, {
   type: 'text',
   text: 'yay',
})

[philippkuehn]

You have to calculate the range of your node view. After that you can use the deleteRange command.

// get some node view props
// depends on your setup (vue, react)
const { editor, getPos, node } = this

const from = getPos()
const to = from + node.nodeSize

editor.commands.deleteRange({ from, to })

[dkrusenstrahle]

@philippkuehn Worked perfectly! Thank you!

Are you planning of adding some "synthetic sugar" to Tiptap to make it even easier to do things like inserting before or after the current node or remove the current node and such without writing a lot of code? Editor "language" is very difficult to comprehend.

Like this for example to insert a new node between the current node and the node after.

this.node.insertContentAfter(NODEVIEW TO BE INSERTED);

Or this to delete the current node:

this.node.destroyNode();

[philippkuehn]

I've added this.props.deleteNode() in the latest version.

[Sashkan]

If anyone needs to do so with a react custom node, here's a simple example:

export const RemovableNode = ({ destroyNode, myLink }) => {
  return (
    <NodeViewWrapper className="signature">
      <div>
        <span>
          sent with{' '}
          <a
            href={myLink}
            target="_blank"
            referrerPolicy="no-referrer"
            rel="noreferrer"
          >
            folk
          </a>
        </span>
        <Button
          type="button"
          onClick={() => destroyNode()}
        >
          <MdClose />
        </Button>
      </div>
    </NodeViewWrapper>
  );
};

[peiris]

Thank you so much!

[bpospanov]

Where did you get the destroyNode function?

[SergkeiM]

@bpospanov Not sure about React but in Vue this is passed as props ( I guess in React as well)

[paduc]

The previous solutions didn't work for me so here's how I got it to work.

I wanted to delete a specific node (photoNode is a custom node).

import {
  findChildren,
} from '@tiptap/react'

const photoNodes = findChildren(
  editor.state.doc,
  (node) => node.type.name === 'photoNode' && node.attrs['photoId'] === photoId
)

if (photoNodes.length) {
  const photoNode = photoNodes.at(0)!
  editor
    .chain()
    .focus()
    .deleteRange({ from: photoNode.pos, to: photoNode.pos + photoNode.node.nodeSize })
    .run()
}

[paduc]

cc @bpospanov