Function: NestedLexicalEditor()
NestedLexicalEditor<
T
>(props
):Element
A nested editor React component that allows editing of the contents of complex markdown nodes that have nested markdown content (for example, custom directives or JSX elements).
Type parameters
Type parameter |
---|
T extends RootContent |
Parameters
Parameter | Type | Description |
---|---|---|
props | object | - |
props.block ? | boolean | Whether or not the editor edits blocks (multiple paragraphs) |
props.contentEditableProps ? | Props & RefAttributes<HTMLDivElement> | Props passed to the ContentEditable component. |
props.getContent | (mdastNode ) => RootContent [] | A function that returns the phrasing content of the mdast node. In most cases, this will be the children property of the mdast node, but you can also have multiple nested nodes with their own children. |
props.getUpdatedMdastNode | (mdastNode , children ) => T | A function that should return the updated mdast node based on the original mdast node and the new content (serialized as mdast tree) produced by the editor. |
Returns
Element
Example
You can use a type param to specify the type of the mdast node
interface CalloutDirectiveNode extends LeafDirective {
name: 'callout'
children: Mdast.PhrasingContent[]
}
return <NestedLexicalEditor<CalloutDirectiveNode> getContent={node => node.children} getUpdatedMdastNode={(node, children) => ({ ...node, children })} />