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?