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

NameType
Textends RootContent

Parameters

NameTypeDescription
propsObject-
props.block?booleanWhether or not the editor edits blocks (multiple paragraphs)
props.contentEditableProps?{} & AllHTMLAttributes<HTMLDivElement>Props passed to the ContentEditable component.
props.getContent(mdastNode: T) => 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: T, children: RootContent[]) => TA 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 })} />