How do I do a Custom Text Editor plugin?

[IvanFarkas]

How do I do a Custom SSML (text) Editor plugin?

The documentation is very weak when it comes to the Custom Plugin.

I'd like to do an SSML Editor in Next.js, with TypeScript.

Basic functionality:

• Selects text
• Click the toolbar icon, like Sentence
• Editor wraps selection in SSML elements, like <s></s>.
• If the mark has attributes a popup is provided to enter. just like Link in RTE.

I am already using the RTE in my code successfully and understand the concepts.
I looked at the following:

• Emoticons
• @lexical/react
• @lexical/mark
• @lexical/plain-text
• lexical-playground plugins

It's still unclear to me what's the best, clean way to do this, although I am leaning toward somehow extending the @lexical/react.
Any help or pointers are greatly appreciated.
Docs need work.

[IvanFarkas]

Perhaps Extending ElementNode?

[svssrinivas]

@IvanFarkas I am experimenting with something similar. I have extended ElementNode to create nodes for custom XML tags. My requirements to add XML tags are similar to yours.

When I try to insert a custom ElementNode at selection, the contents of selection are lost. Is there some way to add the contents ofRangeSelection back to the newly created node?

Additionally, I am not sure of how to handle the case where the selection starts / ends in the middle of a TextNode.