Description
Description
LexicalTableOfContentsPlugin is limited to capture only "heading" (H) nodes. With very little changes, we can turn it into a generic TOC that is capable to capture ElementNodes , and non ElementNodes as well.
Motivation:
Customization of Lexical.dev goes with creating custom Nodes. Custom nodes might be relevant to be displayed in Table of Contents
Example:
With this change, I was able to print DecoratorNodes. See picture:
e.g. it's a DecoratorNode "1832 Code Civil"
Please find the code changes:
- mainly, creating an argument that takes a matcher with specific functions to match the Node, get the content, ...
- Replace references to HeadingNode with LexicalNode. In hierarchical traversal methods, use the reference to ElementNode.
Sorry, I'm not versed in creating patches. The attached code retains the original formatting and changes were done on the minimum necessary.
Sample code for using this function.
In this sample, I'm adding HeadingNode and non-heading (decorator) nodes in the TOC.
In the array below, the Heading must come before decorators, because decorators will attach to Headings or ElementNodes
`const headingMatch : HeadingMatchType[] = [
{getTagName:(node)=>(node as HeadingNode).getTag(),getContent:(node)=>(node as HeadingNode).getTextContent(),isNode:$isHeadingNode,nodeType:HeadingNode},
{getTagName:(node)=>node.getType(),getContent:(node)=>(node as ArticleNode).getId(),isNode:$isArticleNode,nodeType:ArticleNode},
{getTagName:(node)=>node.getType(),getContent:(node)=>(node as ArticleNode).getId(),isNode:$isCassateurNode,nodeType:CassateurNode},
];`
return ( <TocPlugin headingMatch={headingMatch}> {(tableOfContentsArray) => { return <TableOfContentsList tableOfContents={tableOfContentsArray} />; }} </TocPlugin>