Bug: Custom node is not generated by $generateNodesFromDOM about lexical

[acywatson]

You're missing the importDOM function on your custom node. This is what tells lexical how to interpret that node from HTML.

[Fillipee]

Thank you for the reply. I tried it, but I can't seem to make it work correctly. I don't see any option to add classs to the node, just styles. Here is the code.

static importDOM(): DOMConversionMap | null {
        const importers = TextNode.importDOM();
        return {
            ...importers,
            span: (node: HTMLElement) => {
                if (isMainTextColourNode(node as HTMLElement)) {
                    return {
                        conversion: styleConversion(importers?.span),
                        priority: 1,
                    };
                }
                return null;
            },
        };
    }

function styleConversion(
    originalDOMConverter?: (node: HTMLElement) => DOMConversion | null
): (node: HTMLElement) => DOMConversionOutput | null {
    return (node) => {
        const original = originalDOMConverter?.(node);
        if (!original) {
            return null;
        }

        const originalOutput = original.conversion(node);
        if (!originalOutput) {
            return originalOutput;
        }

        const backgroundColor = "red";
        const color = node.style.color;
        const fontFamily = node.style.fontFamily;
        const fontWeight = node.style.fontWeight;
        const fontSize = node.style.fontSize;
        const textDecoration = node.style.textDecoration;
        const className = node.className;

        return {
            ...originalOutput,
            forChild: (lexicalNode, parent) => {
                const originalForChild = originalOutput?.forChild ?? ((x) => x);
                const result = originalForChild(lexicalNode, parent);
                if ($isTextNode(result)) {
                    const style = [
                        backgroundColor ? `background-color: ${backgroundColor}` : null,
                        color ? `color: ${color}` : null,
                        fontFamily ? `font-family: ${fontFamily}` : null,
                        fontWeight ? `font-weight: ${fontWeight}` : null,
                        fontSize ? `font-size: ${fontSize}` : null,
                        textDecoration ? `text-decoration: ${textDecoration}` : null,
                    ]
                        .filter((value) => value != null)
                        .join("; ");

                    //Need to set className

                    if (style.length) {
                        return result.setStyle(style);
                    }
                }
                return result;
            },
        };
    };
}

function isMainTextColourNode(node: HTMLSpanElement): node is HTMLSpanElement {
    return node.classList.contains("editor-mainTextColour");
}

[acywatson]

How about

node.classList.add('my-class')

?

[Fillipee]

But I need to add the class to the result, right? I want it to have the class in the editor.
So I want something like

result.classList.add('my-class')
//or
result.setClassName('my-class')

but that does not exist.

[acywatson]

But I need to add the class to the result, right? I want it to have the class in the editor. So I want something like

result.classList.add('my-class')
//or
result.setClassName('my-class')

but that does not exist.

Oh, sorry - yes, of course - I misunderstood.

In that case you can just add it in the node's createDOM method, right? I mean, you have a custom node so if you always want to add that class, you can just do it in createDOM, otherwise if there's some condition you can add a property on the custom node class, set that in importDOM, and read it in createDOM, right?

[Fillipee]

But I am already doing that in createDOM.

createDOM(_config: EditorConfig, _editor: LexicalEditor): HTMLElement {
        const element = super.createDOM(_config);
        element.className = _config.theme.mainTextColour;
        return element;
    }

[Fillipee]

So I think I finally figured it out by doing this:

static importDOM(): DOMConversionMap | null {
        const importers = TextNode.importDOM();
        return {
            ...importers,
            span: (node: HTMLElement) => {
                if (isMainTextColourNode(node as HTMLElement)) {
                    return {
                        conversion: (domNode: HTMLElement) => {
                            return {
                                node: $createMainTextColourNode(domNode.textContent || ""),
                            };
                        },
                        priority: 1,
                    };
                }
                return null;
            },
        };
    }