How to check that a node has been removed?

[fdemian]

I have the following use case:

I'm using lexical to implement user mentions in my application. So far, I've adapted the mentions plugin to track whenever a new mention is selected (it adds the mention to a list). At this point the mention is a lexical decorator node.

 export class MentionNode extends DecoratorNode<React$Node> {
  __mentionName: string;
  __link: string;

  static getType(): string {
    return 'mention';
  }

  static importJSON(serializedNode: SerializedMentionNode): EmojiNode {
    const node = $createMentionNode(serializedNode.name, serializedNode.link);
    return node;
  }

  exportJSON(): SerializedEmojiNode {
    return {
      name: this.__mentionName,
      link: this.__link,
      type: 'mention',
      version: 1
    };
  }

  static clone(node: MentionNode): MentionNode {
    return new MentionNode(node.__mentionName, node.__link, node.__key);
  }

  constructor(mentionName: string, link: string, key?: NodeKey) {
    super(key);
    this.__mentionName = mentionName;
    this.__link = link;
  }

  createDOM(): HTMLElement {
    return document.createElement('span');
  }

  updateDOM(): false {
    return false;
  }

  decorate(): React$Node {
    return (
    <a href={this.__link} className="user-mention">
      @{this.__mentionName}
    </a>
    );
  }
}

I need to be able to track when the mention is removed because if the user deletes the mention node (e.g the user mentioned @john and then deleted that part of the text) the obvious expectation is that he/she does not want to mention @john anymore.

It seems like I need for a way to check that a given node has been or is about to be removed. Is there currently a way to do this?

[acywatson]

You can use a Mutation Listener for this:

https://lexical.dev/docs/concepts/listeners#registermutationlistener

[fdemian]

Thanks! Just I case someone else encounters this problem, this is how I solved it for my library:

 useEffect(() => {
    const mentionNodeList = new Map<NodeKey, TableSelection>();

    if (!editor.hasNodes([MentionNode])) {
      throw new Error('MentionsPlugin: MentionNode not registered on editor');
    }

    return editor.registerMutationListener(MentionNode, (nodeMutations) => {
      for (const [nodeKey, mutation] of nodeMutations) {
        if (mutation === 'created') {
          editor.update(() => {
            const mentionNode = $getNodeByKey<MentionNode>(nodeKey);
            mentionNodeList.set(nodeKey, mentionNode);
          })
        } else if (mutation === 'destroyed') {
            const mentionNode = mentionNodeList.get(nodeKey);
            if (mentionNode !== undefined) {
              mentionNodeList.delete(nodeKey);
              config.onRemoveMention(mentionNode.__mentionName);
            }
        }
      }
    })
  }, [editor]);

I'm not certain where to unregister the listener, though.

[ankhzet]

@fdemian editor.registerMutationListener() returns unregister callback, so by returning the result of editor.registerMutationListener() in the useEffect hook you are effectively making it unregister automatically.