What's the lexical-way to identify incoming HTML and parse out my custom node?

Question

In lexicaljs, I created a node from a TextNode that is basically a placeholder representation. User selects from a dropdown and I add this new PlaceholderNode into the editor, represented as "{Placeholder Name}" wrapped in a span with an identifying class.

This is all fine when creating, but I have alot of old data that I'll end up loading into the editor that doesn't have the span with the identifying class surrounding the "{Placeholder Name}"

I'm trying to figure the best way to handle this when I'm loading up some of this older text.

So for example, I'd start the editor with an input HTML of <p>Hi there {Placeholder Name}</p>, but it obviously doesn't recognize the "{Placeholder Name}" as a PlaceholderNode, so it just renders as text. I want to be able to recognize the "{Placeholder Name}" and convert it to a PlaceholderNode. I'm currently working in importDOM and trying to catch the outer P to do it but the html manipulation seems like I'm going down a rabbit hole of a bad idea.

Examples of importDOM that I've found seem to all be expecting the data to already be identified as a node type, can't really find anything that does manipulation on what's coming in.

So with all that, what would be the lexical-way of handling this and is there any examples y'all are aware of?

Have you found any solutions to this problem? I am currently facing something similar and the only solution that I currently have is checking the content of every possible outer node for the {placeholder} content... — nicko454g
– nicko454g, Commented Oct 29 at 8:34

Fedor · Accepted Answer · 2024-11-21 17:10:17Z

1

Override the importDOM method of your custom node

static importDOM(): DOMConversionMap | null {
    return {
        div: () => ({
            conversion: convertCustomElement,
            priority: 4
        })
    };
}

Add custom logic to identify the incoming html

function convertCustomElement(domNode: Node): null | DOMConversionOutput {
    if (
        domNode.nodeName === 'DIV' &&
        (domNode as HTMLElement).id === 'my-id'
    ) {
        const node = $createCustomNode(domNode as HTMLDivElement);
        return { node };
    }
    return null;
}

edited Nov 21, 2024 at 17:10

Fedor

24.7k45 gold badges59 silver badges188 bronze badges

answered Nov 18, 2024 at 21:23

mursal rabb

411 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

What's the lexical-way to identify incoming HTML and parse out my custom node?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related