Detect Mention Deleting

[fillinmar]

hello! I ran into a problem - I need to send a request when deleting a mention. How can I track the removing mention from note content? One of the ideas is to subscribe to onUpdate in Editor and compare transaction.doc (new content) with transaction.docs(previous content). But these will be additional actions that will be performed for each change in the note, and it is heavy on large notes.

I have found the similar unanswered question #2009

[IlyaTrifonov]

I have a similar problem. I would really like it to be fixed

[pekanboy]

I also have this problem

[Roberson-Andrade]

If you're using node views you can know when a specific mention is being deleted through the React/Vue component life cycle.

By extending the Mention extension you can add a node view and customize the parse and render html:

import { default as MentionExtension } from "@tiptap/extension-mention";
import { ReactNodeViewRenderer, mergeAttributes } from "@tiptap/react";
import { Mention } from "../components/Mention";

export const CustomMention = MentionExtension.extend({
  addNodeView() {
    return ReactNodeViewRenderer(Mention);
  },
  parseHTML() {
    return [
      {
        tag: "mention-component",
      },
    ];
  },
  renderHTML({ HTMLAttributes }) {
    return ["mention-component", mergeAttributes(HTMLAttributes)];
  },
});

Inside your new metion node view component you can use a useEffect to know if the mention was deleted:

import { cn } from "@/lib/utils";
import { NodeViewProps, NodeViewWrapper } from "@tiptap/react";
import { useEffect } from "react";

export function Mention(props: NodeViewProps) {
  useEffect(() => {
    return () => {
      console.log(`Mention ${props.node.attrs.label} deleted`);
    };
  }, []);

  return (
    <NodeViewWrapper className="inline w-fit">
      <span
        className={cn(
          "rounded bg-custom-primary-100/20 px-1 py-0.5 font-medium text-custom-primary-100"
        )}
      >
        @{props.node.attrs.label}
      </span>
    </NodeViewWrapper>
  );
}

Checkout the working example here

The result:

[fdb75017]

Hello @Roberson-Andrade , that also solved #5121 , thanks a lot !
Adding the addNodeView extension property is the key 👍 .