How to cleanup custom NodeView with vanilla javascript

[tt4g]

The Update node attributes section on the Node Views page in the Tiptap documentation contains sample code as follows:

addNodeView() {
  return ({ editor, node, getPos }) => {
    const { view } = editor

    // Create a button …
    const button = document.createElement('button')
    button.innerHTML = `This button has been clicked ${node.attrs.count} times.`

    // … and when it’s clicked …
    button.addEventListener('click', () => {
      if (typeof getPos === 'function') {
        // … dispatch a transaction, for the current position in the document …
        view.dispatch(view.state.tr.setNodeMarkup(getPos(), undefined, {
          count: node.attrs.count + 1,
        }))

        // … and set the focus back to the editor.
        editor.commands.focus()
      }
    })

    // …
  }
}

I understand that this sample can register event listeners to the DOM, but I didn't know how to remove them.
In React and Vue, we can remove event listeners during the unmount lifecycle, but to achieve this in vanilla JavaScript, we need a callback that is triggered when the NodeView is removed.

[vofronte]

Hi @tt4g,

I'm pretty sure the way to go is to use the destroy method on the NodeView object you return. Tiptap just uses the standard ProseMirror NodeView interface under the hood, and that has a destroy hook for exactly this kind of cleanup.

I haven't spun this up myself to test it, but it should totally work. Maybe you can give this a shot?

addNodeView() {
  return ({ editor, node, getPos }) => {
    const { view } = editor;

    const button = document.createElement('button');
    button.innerHTML = `This button has been clicked ${node.attrs.count} times.`;

    // define the handler so you can remove it later
    const handleClick = () => {
      if (typeof getPos === 'function') {
        view.dispatch(view.state.tr.setNodeMarkup(getPos(), undefined, {
          count: node.attrs.count + 1,
        }));
        editor.commands.focus();
      }
    };

    button.addEventListener('click', handleClick);

    return {
      dom: button,
      destroy: () => {
        // cleanup!
        button.removeEventListener('click', handleClick);
        console.log('NodeView destroyed, listener removed.');
      },
    };
  };
}

Let us know if that works for ya

[tt4g]

Thank you for your detailed explanation.
This was very helpful.

I was able to cleanup the DOM object by setting a callback to the destroy property.

For anyone who finds this discussion, I'll leave a small sample code:

import { Node } from '@tiptap/core';

export default Node.create({
  name: 'clickMeButton',

  content: 'inline*',

  group: 'block',

  parseHTML() {
    return [{ tag: 'button' }];
  },

  renderHTML({ HTMLAttributes }) {
    return ['button', HTMLAttributes, 0];
  },

  addNodeView() {
    return ({ HTMLAttributes }) => {
      const button = document.createElement('button')
      Object.entries(HTMLAttributes).forEach(([key, value]) =>
        button.setAttribute(key, value),
      );
      button.innerText = 'Click Me!'

      const handleClick = () => console.log('Click!');
      button.addEventListener('click', handleClick);

      return {
        dom: button,
        contentDom: button,
        destroy: () => {
            button.removeEventListener('click', handleClick);
        }
      };
    }
  }
});