facebook / facebook/lexical

Feature: LexicalTableOfContentsPlugin convert into a catch all matching nodes and not limited to HeadingNodes

Open
#6,717 0 comments 0 reactions 0 assignees View on GitHub
enhancement
Dominant language
TypeScript
Stars
23.9k
Forks
2.2k
Avg merge
1d 14h
Merged PRs (30d)
55

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:

![image](https://github.com/user-attachments/assets/d7f12d4c-8083-430a-82f0-b6febfe17773)
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.

[TocPlugin.txt](https://github.com/user-attachments/files/17298889/TocPlugin.txt)

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 (

{(tableOfContentsArray) => {
return ;
}}
`

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.