Replace Lexical LinkNode / change the way it renders inside the editor

[bhofstaetter]

I've extended payloads LinkFeature and added custom fields to enable my editors to mark and configure a link as a button.
To represent that inside the editor, i'd like to add additional classes to the a tag which gets rendered inside lexical editor depending on the configuration my content editor makes.

I've done a similiar thing with the default TextNode. I was able to replace it through a client feature

export const styledTextNodeFeature = createClientFeature({
    nodes: [
        StyledTextNode,
        {
            replace: TextNode,
            with: (orig: TextNode) => $createStyledTextNodeFrom(orig),
            withKlass: StyledTextNode,
        },
    ],
});

sadly this does not work with payloads LinkNode, it seems like there is server side code inside. I tried the replacement inside the server feature, but this seems not to work at all

export const customLinkNodeFeature = createServerFeature({
    key: 'customLinkNodeFeature',
    feature: {
        nodes: [
            createNode({
                node: CustomLinkNode,
            }),
            createNode({
                node: {
                    replace: LinkNode,
                    with: (orig: LinkNode) => $createCustomLinkNode(orig),
                    withKlass: CustomLinkNode,
                },
            }),
        ],
    },
});

Can someone please guide me to the right direction?
And in general, what would be the best way to change how a node gets rendered inside (payloads) lexical?

[bhofstaetter]

Bump :)

[urgosxd]

In my case just needed the client replace node object, thank you.
Check out your Custom Class the method $applyNodeReplacement:

export function $createCustomListItemNode(iconType?: IconType, value?: number, checked?: boolean): CustomListItemNode {
    // Pass key as undefined, Lexical handles it
    const node = new CustomListItemNode(iconType, value, checked);
    // If $applyNodeReplacement is not directly applicable or causes issues,
    // just return the new node. Lexical often handles replacement internally.
    return $applyNodeReplacement(node);
}