Making caret move over a particular node and delete the whole node on backspace.

[Zunehfu]

I started using lexical recently. Now I'm trying to create a custom mentions plugin but cannot figure out how to move the caret over my mention node and and delete it at once(same as in discord, I have attached a small video).

currently MentionNode.jsx look like this,

//MentionNode.jsx
import { TextNode } from "lexical";

export class MentionNode extends TextNode {
    static getType() {
        return "mention";
    }

    static clone(node) {
        return new MentionNode(node.__user_id, node.__text, node.__key);
    }

    constructor(user_id, text, key) {
        super(text, key);
        this.__user_id = user_id;
    }

    createDOM(config) {
        const dom = super.createDOM(config);
        dom.className =
            "text-emerald-900 font-semibold bg-emerald-500 rounded-md";
        dom.innerText = this.__text;
        return dom;
    }

    updateDOM(prevNode, dom, config) {
        return false;
    }

    static importJSON(serializedNode) {
        const node = $createMentionNode(
            serializedNode.user_id,
            serializedNode.text
        );
        node.setFormat(serializedNode.format);
        node.setDetail(serializedNode.detail);
        node.setMode(serializedNode.mode);
        node.setStyle(serializedNode.style);
        return node;
    }

    exportJSON() {
        return {
            ...super.exportJSON(),
            type: MentionNode.getType(),
            user_id: this.__user_id,
        };
    }
}

export function $createMentionNode(user_id, text) {
    return new MentionNode(user_id, text);
}

export function $isMentionNode(node) {
    return node instanceof MentionNode;
}

https://github.com/facebook/lexical/assets/44388248/246af033-f7b6-4f82-b13b-a56c00fc18f8
how to achieve this?