Best way to insert/update custom text node on selection

[mihajlovco]

What is the best way to insert/update a custom text node without losing the styles from the previous state?

I have a custom FontColorNode text node that takes theme style name from the global theme or custom color hex value.

Problems that occurred to me:

1. When I insert the new node:
   But when I insert the node, the selection of text from the previous node is lost.

2. when I select part of the FontColorNode text and try to update the node (bold, underline, other theme style name) then half of the text styles will be lost including the theme style name or the custom color.

I am using $insertNodes to insert/update the nodes.

export const FontColorPlugin: React.FC = () => {
    const [editor] = useLexicalComposerContext();

    useEffect(() => {
        return editor.registerCommand<FontColorPayload>(
            ADD_FONT_COLOR_COMMAND,
            payload => {
                editor.update(() => {
                    const { color, themeColorName } = payload;
                    const selection = $getSelection();

                    if ($isRangeSelection(selection)) {
                        const fontColorNode = $createFontColorNode(
                            selection.getTextContent(),
                            color,
                            themeColorName
                        );
                        $applyStylesToNode(fontColorNode, selection);
                        $insertNodes([fontColorNode]);
                        if ($isRootOrShadowRoot(fontColorNode.getParentOrThrow())) {
                            $wrapNodeInElement(fontColorNode, $createParagraphNode).selectEnd();
                        }
                    }
                });
                return true;
            },
            COMMAND_PRIORITY_EDITOR
        );
    }, [editor]);

    return null;
};

Do you have some code samples or how can I modify this code to have correct updates.

[timaxlucas]

@mihajlovco Do you have a solution yet?