Inject theme object in my custom TextNode class

[mihajlovco]

Hi to all,

I need to implement a toolbar action where the user can select a theme color and apply to the selected text. Theme color can be changed in settings so the changes on the theme color need to be reflected in the text.

From the technical perspective, I need to set the theme color variable to the node and save it as a data attribute, map the theme color, and apply the color style.

This is the theme colors object:

{
 color1: "#00000"
 color2: "#c1c1c1"
...
}

Render
When I need to render the text I need to take the new theme object (new from the react hook - API) and apply the new color.
example: __themeStyles.colors[color1]

My implementation
I have implemented a custom TextNode
Lexical Paragraph 1

I have 2 questions:

1. How theme to be available inside importJSON method in my custom node class so I can take the theme color.

static override importJSON(serializedNode: SerializedFontColorNode): TextNode {
        const color = serializedNode.themeColor === "custom" ? serializedNode.color : serializedNode.themeColor;
        const node = $createFontColorNode(
            serializedNode.text,
            color,
            themeStyles // is not available from constructor when you render the nodes
        );
...

2. Is this the right way to add the custom node to my plugin? I want to protect my node to not be destroyed when the user applies bold or italic action.

useEffect(() => {
        return editor.registerCommand<FontColorPayload>(
            ADD_FONT_COLOR_COMMAND,
            payload => {
                editor.update(() => {
                    const { color } = payload;
                    const selection = $getSelection();
                    if ($isRangeSelection(selection)) {
                            const fontColorNode = $createFontColorNode(
                                selection.getTextContent(),
                                color,
                                theme.styles
                            );
                            $insertNodes([fontColorNode]);
                            if ($isRootOrShadowRoot(fontColorNode.getParentOrThrow())) {
                                $wrapNodeInElement(fontColorNode, $createParagraphNode).selectEnd();
                            }
                    }
                });
                return true;
            },
            COMMAND_PRIORITY_EDITOR
        );
    }, [editor]);