Remove node on click?

[martinshaw]

Hello, I'm loving the project I just had one question which I have not been able to find an answer to.

I have created a new ElementNode based on the quote block node from the rich text package.

It will contain predetermined messages suggesting/hinting the user on which type of content would be suitable in this area of the document. For specification / documentation purposes.

I don't want the user to be able to edit the text content and when the node is clicked, I would like it to be removed / persistently hidden and for the cursor focus to be taken by the sibling node.

Do you have any idea how to do this? Here is the current implementation which seems to result in the following error.

// File Name: lexicalContentSuggestionNode.tsx
// Created:  2022-09-30T15:09:23.120Z
// Modified: !date!
//
// Description: Based on https://github.com/facebook/lexical/blob/main/packages/lexical-rich-text/src/index.ts#L89
//

import {
    $getRoot,
    $getSelection,
    DOMConversionMap,
    EditorConfig,
    LexicalNode,
    NodeKey,
    ParagraphNode,
    SerializedElementNode,
    Spread,
} from 'lexical';

import {
    addClassNamesToElement,
} from '@lexical/utils';

import {
    $createParagraphNode,
    ElementNode,
    DOMConversionOutput,
} from 'lexical';

export type lexicalContentSuggestionNodeSerializedType = Spread<
    {
        type: 'lexicalContentSuggestion';
        version: 1;
    },
    SerializedElementNode
>;

function convertBlockquoteElement(): DOMConversionOutput {
    const node = $createLexicalContentSuggestionNode();
    return {node};
}

/** @noInheritDoc */
export class lexicalContentSuggestionNode extends ElementNode {
    static getType(): string {
        return 'lexicalContentSuggestion';
    }

    static clone(node: lexicalContentSuggestionNode): lexicalContentSuggestionNode {
        return new lexicalContentSuggestionNode(node.__key);
    }

    constructor(key?: NodeKey) {
        super(key);
    }

    // View

    createDOM(config: EditorConfig): HTMLElement {
        // console.log('createDOM', config, this, parent);

        const element = document.createElement('blockquote');
        addClassNamesToElement(element, config.theme.lexicalContentSuggestion);

        element.addEventListener('click', this.onClick.bind(this));

        return element;
    }
    updateDOM(prevNode: lexicalContentSuggestionNode, dom: HTMLElement): boolean {
        console.log('updateDOM', prevNode, dom);
        return false;
    }

    static importDOM(): DOMConversionMap | null {
        return {
            blockquote: (node: Node) => ({
                conversion: convertBlockquoteElement,
                priority: 0,
            }),
        };
    }

    static importJSON(serializedNode: lexicalContentSuggestionNodeSerializedType): lexicalContentSuggestionNode {
        const node = $createLexicalContentSuggestionNode();
        node.setFormat(serializedNode.format);
        node.setIndent(serializedNode.indent);
        node.setDirection(serializedNode.direction);
        return node;
    }

    exportJSON(): SerializedElementNode {
        return {
            ...super.exportJSON(),
            type: 'lexicalContentSuggestion',
        };
    }

    // Mutation

    insertNewAfter(): ParagraphNode {
        const newBlock = $createParagraphNode();
        const direction = this.getDirection();
        newBlock.setDirection(direction);
        this.insertAfter(newBlock);
        return newBlock;
    }

    collapseAtStart(): true {
        const paragraph = $createParagraphNode();
        const children = this.getChildren();
        children.forEach((child) => paragraph.append(child));
        this.replace(paragraph);
        return true;
    }

    // Native Event Handlers

    onClick(): void {
        // console.log('onClick', this, this.getLatest());
        this.remove();
    }
}

export function $createLexicalContentSuggestionNode(): lexicalContentSuggestionNode {
    return new lexicalContentSuggestionNode();
}

export function $isLexicalContentSuggestionNode(node: LexicalNode | null | undefined): node is lexicalContentSuggestionNode {
    return node instanceof lexicalContentSuggestionNode;
}

app.js:174597 Uncaught Error: Unable to find an active editor state. State helpers or node methods can only be used synchronously during the callback of editor.update() or editorState.read().
    at getActiveEditorState (app.js:174597:13)
    at $getNodeByKey (app.js:170053:39)

[acywatson]

Yea, you won't be able to do that.

The canonical way to add event listeners to nodes is to use a Mutation Listener: https://lexical.dev/docs/concepts/listeners#registermutationlistener

When the node is created, use getElementByKey to get the underlying DOM node and add a listener. Remove it when the node is destroyed.

[martinshaw]

If anyone is having a similar issue and is looking for a solution, I fixed the issue here:

    const handleClick = useCallback(() => {
        editor.update(() => {
            const node = $getNodeByKey(nodeKey);
            if ($isCodeatlasLexicalContentSuggestionNode(node)) node.remove();
        });
    }, []);