How to not separate createDOM() output from decorate() response?

[EvHaus]

I'm looking to create a custom DecoratorNode which has one behaviour when exported to HTML but a different behaviour when rendered inside the Lexical editor itself.

• When serialized to HTML I want the node to return <span>Some text</span>, but
• When rendered inside Lexical I want the node to render a custom React component

I can almost get there using createDOM() and decorate() methods but it seems like whatever I put in decorate() goes INSIDE whatever I put in createDOM() rather than replace it. I'm wondering if there's a way to avoid this.

Current code:

export class MyCustomNode extends DecoratorNode<JSX.Element> {
	...

	createDOM(): HTMLElement {
		const element = document.createElement('span');
		element.textContent = 'Some text';
		return element;
	}

	decorate(): JSX.Element {
		return <MyCustomComponent />;
	}
}

This works great when serialized to HTML but when rendered inside the Lexical editor I get:

<span>Some text<MyCustomComponent/></span>

instead of just:

<MyCustomComponent />

Any recommendations would be greatly appreciated.

[EvHaus]

Figured it out. I need to use exportDOM() instead.