Feature: Custom Lexical Node Children

[kennetpostigo]

Description

Custom Lexical Nodes that can be authored in React that can take other Lexical Node as children. The nodes that these children take should be checked that they are an instance of a specifc user defined or built in Lexical Node.

Use Case

I'm working on a script editor, and I need to make sure that DialogueNode in scripts take a CharacterNode and ParentheticalNode and ConversationNode. There is a hierarchy to scripts in terms of the elements that make up a script for example a hierarchy like so:

SceneNode
    ActionNode 
    DialogueNode 
        CharacterNode 
        ParentheticalNode
        ConversationNode
    TransitionNode

Implementation

1. Should add a new NodeType to extend from OR add a method On DecoratorNode that lets you specify a method that check child node types.
2. Ability to click around the editor and select nodes in a hierarchy-aware way. For example if I click between 2 SceneNode Children Nodes It should select the Scene Node. This is important for building plugins that can show specific child nodes you can select from to insert into the active Node.

Impact

It would benefit editors that work with content that is Hierarchical in nature like scripts, script breakdowns, A/V scripts, etc.

Side Question

SceneNode takes some meta data that I would like to capture not via a modal or input outside of the content-editable, I would like to try to capture it within the editor itself it needs to capture Location, Title, and Time. Ie. INT. MOUNTAINOUS TERRAIN - DUSK Where INT. is the Location, MOUNTAINOUS TERRAIN is Title, and DUSK is Time. When I use SlashCommandPlugin it makes a popover appear with Nodes to insert. When I click SceneNode I'd like to show placeholder type of UI on the header line of the SceneNode. At the moment this is pretty hard to implement and feel like i'm using lexical wrong here, is there a good way to do this?

[etrepum]

The only way to have LexicalNode children inside of a DecoratorNode is to use a nested editor. There was some discussion about how it might work without that (e.g. #5930 #5981) but nothing has really come of it so I wouldn't hold your breath.

Regarding hierarchy requirements, that's really up to you to enforce in your application code and possibly guaranteed by node transforms. Same thing if you want to change how selection works, there's generally enough flexibility in the commands you can override to sort out most of those situations, and there's always the fallback of dealing with certain DOM events yourself.

There isn't really enough detail about what you're finding hard to implement (or what approach you went down that you found hard) to provide any more specific suggestions.