@lexical/react 0.14.5 → 0.16.0

package/LexicalTableOfContents.dev.mjs

@@ -3,10 +3,13 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
+ *
  */
+
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { $isHeadingNode, HeadingNode } from '@lexical/rich-text';
-import { $getRoot, $getNodeByKey, TextNode } from 'lexical';
+import { $getNextRightPreorderNode } from '@lexical/utils';
+import { $getRoot, $isElementNode, $getNodeByKey, TextNode } from 'lexical';
 import { useState, useEffect } from 'react';
 
 /**
@@ -16,6 +19,7 @@ import { useState, useEffect } from 'react';
  * LICENSE file in the root directory of this source tree.
  *
  */
+
 function toEntry(heading) {
   return [heading.getKey(), heading.getTextContent(), heading.getTag()];
 }
@@ -26,12 +30,20 @@ function $insertHeadingIntoTableOfContents(prevHeading, newHeading, currentTable
   const newEntry = toEntry(newHeading);
   let newTableOfContents = [];
   if (prevHeading === null) {
+    // check if key already exists
+    if (currentTableOfContents.length > 0 && currentTableOfContents[0][0] === newHeading.__key) {
+      return currentTableOfContents;
+    }
     newTableOfContents = [newEntry, ...currentTableOfContents];
   } else {
     for (let i = 0; i < currentTableOfContents.length; i++) {
       const key = currentTableOfContents[i][0];
       newTableOfContents.push(currentTableOfContents[i]);
       if (key === prevHeading.getKey() && key !== newHeading.getKey()) {
+        // check if key already exists
+        if (i + 1 < currentTableOfContents.length && currentTableOfContents[i + 1][0] === newHeading.__key) {
+          return currentTableOfContents;
+        }
         newTableOfContents.push(newEntry);
       }
     }
@@ -80,7 +92,14 @@ function $updateHeadingPosition(prevHeading, heading, currentTableOfContents) {
   }
   return newTableOfContents;
 }
-function LexicalTableOfContentsPlugin({
+function $getPreviousHeading(node) {
+  let prevHeading = $getNextRightPreorderNode(node);
+  while (prevHeading !== null && !$isHeadingNode(prevHeading)) {
+    prevHeading = $getNextRightPreorderNode(prevHeading);
+  }
+  return prevHeading;
+}
+function TableOfContentsPlugin({
   children
 }) {
   const [tableOfContents, setTableOfContents] = useState([]);
@@ -98,6 +117,31 @@ function LexicalTableOfContentsPlugin({
       }
       setTableOfContents(currentTableOfContents);
     });
+    const removeRootUpdateListener = editor.registerUpdateListener(({
+      editorState,
+      dirtyElements
+    }) => {
+      editorState.read(() => {
+        const updateChildHeadings = node => {
+          for (const child of node.getChildren()) {
+            if ($isHeadingNode(child)) {
+              const prevHeading = $getPreviousHeading(child);
+              currentTableOfContents = $updateHeadingPosition(prevHeading, child, currentTableOfContents);
+              setTableOfContents(currentTableOfContents);
+            } else if ($isElementNode(child)) {
+              updateChildHeadings(child);
+            }
+          }
+        };
+
+        // If a node is changes, all child heading positions need to be updated
+        $getRoot().getChildren().forEach(node => {
+          if ($isElementNode(node) && dirtyElements.get(node.__key)) {
+            updateChildHeadings(node);
+          }
+        });
+      });
+    });
 
     // Listen to updates to heading mutations and update state
     const removeHeaderMutationListener = editor.registerMutationListener(HeadingNode, mutatedNodes => {
@@ -106,10 +150,7 @@ function LexicalTableOfContentsPlugin({
           if (mutation === 'created') {
             const newHeading = $getNodeByKey(nodeKey);
             if (newHeading !== null) {
-              let prevHeading = newHeading.getPreviousSibling();
-              while (prevHeading !== null && !$isHeadingNode(prevHeading)) {
-                prevHeading = prevHeading.getPreviousSibling();
-              }
+              const prevHeading = $getPreviousHeading(newHeading);
               currentTableOfContents = $insertHeadingIntoTableOfContents(prevHeading, newHeading, currentTableOfContents);
             }
           } else if (mutation === 'destroyed') {
@@ -117,10 +158,7 @@ function LexicalTableOfContentsPlugin({
           } else if (mutation === 'updated') {
             const newHeading = $getNodeByKey(nodeKey);
             if (newHeading !== null) {
-              let prevHeading = newHeading.getPreviousSibling();
-              while (prevHeading !== null && !$isHeadingNode(prevHeading)) {
-                prevHeading = prevHeading.getPreviousSibling();
-              }
+              const prevHeading = $getPreviousHeading(newHeading);
               currentTableOfContents = $updateHeadingPosition(prevHeading, newHeading, currentTableOfContents);
             }
           }
@@ -149,9 +187,18 @@ function LexicalTableOfContentsPlugin({
     return () => {
       removeHeaderMutationListener();
       removeTextNodeMutationListener();
+      removeRootUpdateListener();
     };
   }, [editor]);
   return children(tableOfContents, editor);
 }
 
-export { LexicalTableOfContentsPlugin as default };
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+export { TableOfContentsPlugin as default };

package/LexicalTableOfContents.js

@@ -3,7 +3,9 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
+ *
  */
+
 'use strict'
 const LexicalTableOfContents = process.env.NODE_ENV === 'development' ? require('./LexicalTableOfContents.dev.js') : require('./LexicalTableOfContents.prod.js');
 module.exports = LexicalTableOfContents;

package/LexicalTableOfContents.js.flow

@@ -7,11 +7,7 @@
  * @flow strict
  */
 
-import type {HeadingTagType} from '@lexical/rich-text';
-import type {NodeKey} from 'lexical';
+import {TableOfContentsPlugin} from '@lexical/react/LexicalTableOfContentsPlugin';
 
-declare export default function LexicalTableOfContentsPlugin({
-  children: (
-    tableOfContents: Array<[NodeKey, string, HeadingTagType]>,
-  ) => React$Node,
-}): React$Node;
+/** @deprecated use the named export {@link LexicalTableOfContentsPlugin} */
+declare export default typeof TableOfContentsPlugin;

package/LexicalTableOfContents.mjs

@@ -3,7 +3,9 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
+ *
  */
+
 import * as modDev from './LexicalTableOfContents.dev.mjs';
 import * as modProd from './LexicalTableOfContents.prod.mjs';
 const mod = process.env.NODE_ENV === 'development' ? modDev : modProd;

package/LexicalTableOfContents.node.mjs

@@ -3,6 +3,8 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
+ *
  */
+
 const mod = await (process.env.NODE_ENV === 'development' ? import('./LexicalTableOfContents.dev.mjs') : import('./LexicalTableOfContents.prod.mjs'));
 export default mod.default;

package/LexicalTableOfContents.prod.js

@@ -3,8 +3,10 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
+ *
  */
-'use strict';var l=require("@lexical/react/LexicalComposerContext"),m=require("@lexical/rich-text"),q=require("lexical"),u=require("react");function w(n){return[n.getKey(),n.getTextContent(),n.getTag()]}
-module.exports=function({children:n}){let [x,r]=u.useState([]),[h]=l.useLexicalComposerContext();u.useEffect(()=>{let c=[];h.getEditorState().read(()=>{let p=q.$getRoot().getChildren();for(let a of p)m.$isHeadingNode(a)&&c.push([a.getKey(),a.getTextContent(),a.getTag()]);r(c)});let y=h.registerMutationListener(m.HeadingNode,p=>{h.getEditorState().read(()=>{for(const [k,t]of p)if("created"===t){var a=q.$getNodeByKey(k);if(null!==a){for(var b=a.getPreviousSibling();null!==b&&!m.$isHeadingNode(b);)b=
-b.getPreviousSibling();var d=c;if(null===a)c=d;else{var g=w(a),e=[];if(null===b)e=[g,...d];else for(let f=0;f<d.length;f++){let v=d[f][0];e.push(d[f]);v===b.getKey()&&v!==a.getKey()&&e.push(g)}c=e}}}else if("destroyed"===t){b=k;a=c;d=[];for(let f of a)f[0]!==b&&d.push(f);c=d}else if("updated"===t&&(a=q.$getNodeByKey(k),null!==a)){for(b=a.getPreviousSibling();null!==b&&!m.$isHeadingNode(b);)b=b.getPreviousSibling();d=c;g=[];e=w(a);b||g.push(e);for(let f of d)f[0]!==a.getKey()&&(g.push(f),b&&f[0]===
-b.getKey()&&g.push(e));c=g}r(c)})}),z=h.registerMutationListener(q.TextNode,p=>{h.getEditorState().read(()=>{for(const [d,g]of p)if("updated"===g){var a=q.$getNodeByKey(d);if(null!==a&&(a=a.getParentOrThrow(),m.$isHeadingNode(a))){var b=c;let e=[];for(let k of b)k[0]===a.getKey()?e.push(w(a)):e.push(k);c=e;r(c)}}})});return()=>{y();z()}},[h]);return n(x,h)}
+
+'use strict';var h=require("@lexical/react/LexicalComposerContext"),q=require("@lexical/rich-text"),v=require("@lexical/utils"),w=require("lexical"),x=require("react");function y(d){return[d.getKey(),d.getTextContent(),d.getTag()]}function z(d,t,n){let e=[],c=y(t);d||e.push(c);for(let r of n)r[0]!==t.getKey()&&(e.push(r),d&&r[0]===d.getKey()&&e.push(c));return e}function B(d){for(d=v.$getNextRightPreorderNode(d);null!==d&&!q.$isHeadingNode(d);)d=v.$getNextRightPreorderNode(d);return d}
+exports.default=function({children:d}){let [t,n]=x.useState([]),[e]=h.useLexicalComposerContext();x.useEffect(()=>{let c=[];e.getEditorState().read(()=>{let l=w.$getRoot().getChildren();for(let a of l)q.$isHeadingNode(a)&&c.push([a.getKey(),a.getTextContent(),a.getTag()]);n(c)});let r=e.registerUpdateListener(({editorState:l,dirtyElements:a})=>{l.read(()=>{const f=b=>{for(const g of b.getChildren())q.$isHeadingNode(g)?(b=B(g),c=z(b,g,c),n(c)):w.$isElementNode(g)&&f(g)};w.$getRoot().getChildren().forEach(b=>
+{w.$isElementNode(b)&&a.get(b.__key)&&f(b)})})}),C=e.registerMutationListener(q.HeadingNode,l=>{e.getEditorState().read(()=>{for(const [g,m]of l)if("created"===m){var a=w.$getNodeByKey(g);if(null!==a)a:{var f=B(a),b=c;if(null===a){c=b;break a}let k=y(a),u=[];if(null===f){if(0<b.length&&b[0][0]===a.__key){c=b;break a}u=[k,...b]}else for(let p=0;p<b.length;p++){let A=b[p][0];u.push(b[p]);if(A===f.getKey()&&A!==a.getKey()){if(p+1<b.length&&b[p+1][0]===a.__key){c=b;break a}u.push(k)}}c=u}}else if("destroyed"===
+m){f=g;a=c;b=[];for(let k of a)k[0]!==f&&b.push(k);c=b}else"updated"===m&&(f=w.$getNodeByKey(g),null!==f&&(a=B(f),c=z(a,f,c)));n(c)})}),D=e.registerMutationListener(w.TextNode,l=>{e.getEditorState().read(()=>{for(const [b,g]of l)if("updated"===g){var a=w.$getNodeByKey(b);if(null!==a&&(a=a.getParentOrThrow(),q.$isHeadingNode(a))){var f=c;let m=[];for(let k of f)k[0]===a.getKey()?m.push(y(a)):m.push(k);c=m;n(c)}}})});return()=>{C();D();r()}},[e]);return d(t,e)}

package/LexicalTableOfContents.prod.mjs

@@ -3,5 +3,7 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
+ *
  */
-import{useLexicalComposerContext as t}from"@lexical/react/LexicalComposerContext";import{$isHeadingNode as e,HeadingNode as o}from"@lexical/rich-text";import{$getRoot as n,$getNodeByKey as r,TextNode as i}from"lexical";import{useState as s,useEffect as u}from"react";function l(t){return[t.getKey(),t.getTextContent(),t.getTag()]}function f(t,e,o){if(null===e)return o;const n=l(e);let r=[];if(null===t)r=[n,...o];else for(let i=0;i<o.length;i++){const s=o[i][0];r.push(o[i]),s===t.getKey()&&s!==e.getKey()&&r.push(n)}return r}function c(t,e){const o=[];for(const n of e)n[0]!==t&&o.push(n);return o}function g(t,e){const o=[];for(const n of e)n[0]===t.getKey()?o.push(l(t)):o.push(n);return o}function a(t,e,o){const n=[],r=l(e);t||n.push(r);for(const i of o)i[0]!==e.getKey()&&(n.push(i),t&&i[0]===t.getKey()&&n.push(r));return n}function p({children:l}){const[p,d]=s([]),[h]=t();return u((()=>{let t=[];h.getEditorState().read((()=>{const o=n().getChildren();for(const n of o)e(n)&&t.push([n.getKey(),n.getTextContent(),n.getTag()]);d(t)}));const s=h.registerMutationListener(o,(o=>{h.getEditorState().read((()=>{for(const[n,i]of o)if("created"===i){const o=r(n);if(null!==o){let n=o.getPreviousSibling();for(;null!==n&&!e(n);)n=n.getPreviousSibling();t=f(n,o,t)}}else if("destroyed"===i)t=c(n,t);else if("updated"===i){const o=r(n);if(null!==o){let n=o.getPreviousSibling();for(;null!==n&&!e(n);)n=n.getPreviousSibling();t=a(n,o,t)}}d(t)}))})),u=h.registerMutationListener(i,(o=>{h.getEditorState().read((()=>{for(const[n,i]of o)if("updated"===i){const o=r(n);if(null!==o){const n=o.getParentOrThrow();e(n)&&(t=g(n,t),d(t))}}}))}));return()=>{s(),u()}}),[h]),l(p,h)}export{p as default};
+
+import{useLexicalComposerContext as t}from"@lexical/react/LexicalComposerContext";import{$isHeadingNode as e,HeadingNode as r}from"@lexical/rich-text";import{$getNextRightPreorderNode as n}from"@lexical/utils";import{$getRoot as o,$isElementNode as i,$getNodeByKey as s,TextNode as f}from"lexical";import{useState as c,useEffect as l}from"react";function u(t){return[t.getKey(),t.getTextContent(),t.getTag()]}function a(t,e,r){if(null===e)return r;const n=u(e);let o=[];if(null===t){if(r.length>0&&r[0][0]===e.__key)return r;o=[n,...r]}else for(let i=0;i<r.length;i++){const s=r[i][0];if(o.push(r[i]),s===t.getKey()&&s!==e.getKey()){if(i+1<r.length&&r[i+1][0]===e.__key)return r;o.push(n)}}return o}function g(t,e){const r=[];for(const n of e)n[0]!==t&&r.push(n);return r}function d(t,e){const r=[];for(const n of e)n[0]===t.getKey()?r.push(u(t)):r.push(n);return r}function h(t,e,r){const n=[],o=u(e);t||n.push(o);for(const i of r)i[0]!==e.getKey()&&(n.push(i),t&&i[0]===t.getKey()&&n.push(o));return n}function p(t){let r=n(t);for(;null!==r&&!e(r);)r=n(r);return r}function m({children:n}){const[u,m]=c([]),[y]=t();return l((()=>{let t=[];y.getEditorState().read((()=>{const r=o().getChildren();for(const n of r)e(n)&&t.push([n.getKey(),n.getTextContent(),n.getTag()]);m(t)}));const n=y.registerUpdateListener((({editorState:r,dirtyElements:n})=>{r.read((()=>{const r=n=>{for(const o of n.getChildren())if(e(o)){const e=p(o);t=h(e,o,t),m(t)}else i(o)&&r(o)};o().getChildren().forEach((t=>{i(t)&&n.get(t.__key)&&r(t)}))}))})),c=y.registerMutationListener(r,(e=>{y.getEditorState().read((()=>{for(const[r,n]of e)if("created"===n){const e=s(r);if(null!==e){const r=p(e);t=a(r,e,t)}}else if("destroyed"===n)t=g(r,t);else if("updated"===n){const e=s(r);if(null!==e){const r=p(e);t=h(r,e,t)}}m(t)}))})),l=y.registerMutationListener(f,(r=>{y.getEditorState().read((()=>{for(const[n,o]of r)if("updated"===o){const r=s(n);if(null!==r){const n=r.getParentOrThrow();e(n)&&(t=d(n,t),m(t))}}}))}));return()=>{c(),l(),n()}}),[y]),n(u,y)}export{m as default};

package/LexicalTableOfContentsPlugin.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+/// <reference types="react" />
+import { HeadingTagType } from '@lexical/rich-text';
+import { LexicalEditor, NodeKey } from 'lexical';
+export type TableOfContentsEntry = [
+    key: NodeKey,
+    text: string,
+    tag: HeadingTagType
+];
+type Props = {
+    children: (values: Array<TableOfContentsEntry>, editor: LexicalEditor) => JSX.Element;
+};
+export declare function TableOfContentsPlugin({ children }: Props): JSX.Element;
+export {};

package/LexicalTableOfContentsPlugin.dev.js

@@ -0,0 +1,198 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+'use strict';
+
+var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
+var richText = require('@lexical/rich-text');
+var utils = require('@lexical/utils');
+var lexical = require('lexical');
+var react = require('react');
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+function toEntry(heading) {
+  return [heading.getKey(), heading.getTextContent(), heading.getTag()];
+}
+function $insertHeadingIntoTableOfContents(prevHeading, newHeading, currentTableOfContents) {
+  if (newHeading === null) {
+    return currentTableOfContents;
+  }
+  const newEntry = toEntry(newHeading);
+  let newTableOfContents = [];
+  if (prevHeading === null) {
+    // check if key already exists
+    if (currentTableOfContents.length > 0 && currentTableOfContents[0][0] === newHeading.__key) {
+      return currentTableOfContents;
+    }
+    newTableOfContents = [newEntry, ...currentTableOfContents];
+  } else {
+    for (let i = 0; i < currentTableOfContents.length; i++) {
+      const key = currentTableOfContents[i][0];
+      newTableOfContents.push(currentTableOfContents[i]);
+      if (key === prevHeading.getKey() && key !== newHeading.getKey()) {
+        // check if key already exists
+        if (i + 1 < currentTableOfContents.length && currentTableOfContents[i + 1][0] === newHeading.__key) {
+          return currentTableOfContents;
+        }
+        newTableOfContents.push(newEntry);
+      }
+    }
+  }
+  return newTableOfContents;
+}
+function $deleteHeadingFromTableOfContents(key, currentTableOfContents) {
+  const newTableOfContents = [];
+  for (const heading of currentTableOfContents) {
+    if (heading[0] !== key) {
+      newTableOfContents.push(heading);
+    }
+  }
+  return newTableOfContents;
+}
+function $updateHeadingInTableOfContents(heading, currentTableOfContents) {
+  const newTableOfContents = [];
+  for (const oldHeading of currentTableOfContents) {
+    if (oldHeading[0] === heading.getKey()) {
+      newTableOfContents.push(toEntry(heading));
+    } else {
+      newTableOfContents.push(oldHeading);
+    }
+  }
+  return newTableOfContents;
+}
+
+/**
+ * Returns the updated table of contents, placing the given `heading` before the given `prevHeading`. If `prevHeading`
+ * is undefined, `heading` is placed at the start of table of contents
+ */
+function $updateHeadingPosition(prevHeading, heading, currentTableOfContents) {
+  const newTableOfContents = [];
+  const newEntry = toEntry(heading);
+  if (!prevHeading) {
+    newTableOfContents.push(newEntry);
+  }
+  for (const oldHeading of currentTableOfContents) {
+    if (oldHeading[0] === heading.getKey()) {
+      continue;
+    }
+    newTableOfContents.push(oldHeading);
+    if (prevHeading && oldHeading[0] === prevHeading.getKey()) {
+      newTableOfContents.push(newEntry);
+    }
+  }
+  return newTableOfContents;
+}
+function $getPreviousHeading(node) {
+  let prevHeading = utils.$getNextRightPreorderNode(node);
+  while (prevHeading !== null && !richText.$isHeadingNode(prevHeading)) {
+    prevHeading = utils.$getNextRightPreorderNode(prevHeading);
+  }
+  return prevHeading;
+}
+function TableOfContentsPlugin({
+  children
+}) {
+  const [tableOfContents, setTableOfContents] = react.useState([]);
+  const [editor] = LexicalComposerContext.useLexicalComposerContext();
+  react.useEffect(() => {
+    // Set table of contents initial state
+    let currentTableOfContents = [];
+    editor.getEditorState().read(() => {
+      const root = lexical.$getRoot();
+      const rootChildren = root.getChildren();
+      for (const child of rootChildren) {
+        if (richText.$isHeadingNode(child)) {
+          currentTableOfContents.push([child.getKey(), child.getTextContent(), child.getTag()]);
+        }
+      }
+      setTableOfContents(currentTableOfContents);
+    });
+    const removeRootUpdateListener = editor.registerUpdateListener(({
+      editorState,
+      dirtyElements
+    }) => {
+      editorState.read(() => {
+        const updateChildHeadings = node => {
+          for (const child of node.getChildren()) {
+            if (richText.$isHeadingNode(child)) {
+              const prevHeading = $getPreviousHeading(child);
+              currentTableOfContents = $updateHeadingPosition(prevHeading, child, currentTableOfContents);
+              setTableOfContents(currentTableOfContents);
+            } else if (lexical.$isElementNode(child)) {
+              updateChildHeadings(child);
+            }
+          }
+        };
+
+        // If a node is changes, all child heading positions need to be updated
+        lexical.$getRoot().getChildren().forEach(node => {
+          if (lexical.$isElementNode(node) && dirtyElements.get(node.__key)) {
+            updateChildHeadings(node);
+          }
+        });
+      });
+    });
+
+    // Listen to updates to heading mutations and update state
+    const removeHeaderMutationListener = editor.registerMutationListener(richText.HeadingNode, mutatedNodes => {
+      editor.getEditorState().read(() => {
+        for (const [nodeKey, mutation] of mutatedNodes) {
+          if (mutation === 'created') {
+            const newHeading = lexical.$getNodeByKey(nodeKey);
+            if (newHeading !== null) {
+              const prevHeading = $getPreviousHeading(newHeading);
+              currentTableOfContents = $insertHeadingIntoTableOfContents(prevHeading, newHeading, currentTableOfContents);
+            }
+          } else if (mutation === 'destroyed') {
+            currentTableOfContents = $deleteHeadingFromTableOfContents(nodeKey, currentTableOfContents);
+          } else if (mutation === 'updated') {
+            const newHeading = lexical.$getNodeByKey(nodeKey);
+            if (newHeading !== null) {
+              const prevHeading = $getPreviousHeading(newHeading);
+              currentTableOfContents = $updateHeadingPosition(prevHeading, newHeading, currentTableOfContents);
+            }
+          }
+        }
+        setTableOfContents(currentTableOfContents);
+      });
+    });
+
+    // Listen to text node mutation updates
+    const removeTextNodeMutationListener = editor.registerMutationListener(lexical.TextNode, mutatedNodes => {
+      editor.getEditorState().read(() => {
+        for (const [nodeKey, mutation] of mutatedNodes) {
+          if (mutation === 'updated') {
+            const currNode = lexical.$getNodeByKey(nodeKey);
+            if (currNode !== null) {
+              const parentNode = currNode.getParentOrThrow();
+              if (richText.$isHeadingNode(parentNode)) {
+                currentTableOfContents = $updateHeadingInTableOfContents(parentNode, currentTableOfContents);
+                setTableOfContents(currentTableOfContents);
+              }
+            }
+          }
+        }
+      });
+    });
+    return () => {
+      removeHeaderMutationListener();
+      removeTextNodeMutationListener();
+      removeRootUpdateListener();
+    };
+  }, [editor]);
+  return children(tableOfContents, editor);
+}
+
+exports.TableOfContentsPlugin = TableOfContentsPlugin;

package/LexicalTableOfContentsPlugin.dev.mjs

@@ -0,0 +1,196 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $isHeadingNode, HeadingNode } from '@lexical/rich-text';
+import { $getNextRightPreorderNode } from '@lexical/utils';
+import { $getRoot, $isElementNode, $getNodeByKey, TextNode } from 'lexical';
+import { useState, useEffect } from 'react';
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+function toEntry(heading) {
+  return [heading.getKey(), heading.getTextContent(), heading.getTag()];
+}
+function $insertHeadingIntoTableOfContents(prevHeading, newHeading, currentTableOfContents) {
+  if (newHeading === null) {
+    return currentTableOfContents;
+  }
+  const newEntry = toEntry(newHeading);
+  let newTableOfContents = [];
+  if (prevHeading === null) {
+    // check if key already exists
+    if (currentTableOfContents.length > 0 && currentTableOfContents[0][0] === newHeading.__key) {
+      return currentTableOfContents;
+    }
+    newTableOfContents = [newEntry, ...currentTableOfContents];
+  } else {
+    for (let i = 0; i < currentTableOfContents.length; i++) {
+      const key = currentTableOfContents[i][0];
+      newTableOfContents.push(currentTableOfContents[i]);
+      if (key === prevHeading.getKey() && key !== newHeading.getKey()) {
+        // check if key already exists
+        if (i + 1 < currentTableOfContents.length && currentTableOfContents[i + 1][0] === newHeading.__key) {
+          return currentTableOfContents;
+        }
+        newTableOfContents.push(newEntry);
+      }
+    }
+  }
+  return newTableOfContents;
+}
+function $deleteHeadingFromTableOfContents(key, currentTableOfContents) {
+  const newTableOfContents = [];
+  for (const heading of currentTableOfContents) {
+    if (heading[0] !== key) {
+      newTableOfContents.push(heading);
+    }
+  }
+  return newTableOfContents;
+}
+function $updateHeadingInTableOfContents(heading, currentTableOfContents) {
+  const newTableOfContents = [];
+  for (const oldHeading of currentTableOfContents) {
+    if (oldHeading[0] === heading.getKey()) {
+      newTableOfContents.push(toEntry(heading));
+    } else {
+      newTableOfContents.push(oldHeading);
+    }
+  }
+  return newTableOfContents;
+}
+
+/**
+ * Returns the updated table of contents, placing the given `heading` before the given `prevHeading`. If `prevHeading`
+ * is undefined, `heading` is placed at the start of table of contents
+ */
+function $updateHeadingPosition(prevHeading, heading, currentTableOfContents) {
+  const newTableOfContents = [];
+  const newEntry = toEntry(heading);
+  if (!prevHeading) {
+    newTableOfContents.push(newEntry);
+  }
+  for (const oldHeading of currentTableOfContents) {
+    if (oldHeading[0] === heading.getKey()) {
+      continue;
+    }
+    newTableOfContents.push(oldHeading);
+    if (prevHeading && oldHeading[0] === prevHeading.getKey()) {
+      newTableOfContents.push(newEntry);
+    }
+  }
+  return newTableOfContents;
+}
+function $getPreviousHeading(node) {
+  let prevHeading = $getNextRightPreorderNode(node);
+  while (prevHeading !== null && !$isHeadingNode(prevHeading)) {
+    prevHeading = $getNextRightPreorderNode(prevHeading);
+  }
+  return prevHeading;
+}
+function TableOfContentsPlugin({
+  children
+}) {
+  const [tableOfContents, setTableOfContents] = useState([]);
+  const [editor] = useLexicalComposerContext();
+  useEffect(() => {
+    // Set table of contents initial state
+    let currentTableOfContents = [];
+    editor.getEditorState().read(() => {
+      const root = $getRoot();
+      const rootChildren = root.getChildren();
+      for (const child of rootChildren) {
+        if ($isHeadingNode(child)) {
+          currentTableOfContents.push([child.getKey(), child.getTextContent(), child.getTag()]);
+        }
+      }
+      setTableOfContents(currentTableOfContents);
+    });
+    const removeRootUpdateListener = editor.registerUpdateListener(({
+      editorState,
+      dirtyElements
+    }) => {
+      editorState.read(() => {
+        const updateChildHeadings = node => {
+          for (const child of node.getChildren()) {
+            if ($isHeadingNode(child)) {
+              const prevHeading = $getPreviousHeading(child);
+              currentTableOfContents = $updateHeadingPosition(prevHeading, child, currentTableOfContents);
+              setTableOfContents(currentTableOfContents);
+            } else if ($isElementNode(child)) {
+              updateChildHeadings(child);
+            }
+          }
+        };
+
+        // If a node is changes, all child heading positions need to be updated
+        $getRoot().getChildren().forEach(node => {
+          if ($isElementNode(node) && dirtyElements.get(node.__key)) {
+            updateChildHeadings(node);
+          }
+        });
+      });
+    });
+
+    // Listen to updates to heading mutations and update state
+    const removeHeaderMutationListener = editor.registerMutationListener(HeadingNode, mutatedNodes => {
+      editor.getEditorState().read(() => {
+        for (const [nodeKey, mutation] of mutatedNodes) {
+          if (mutation === 'created') {
+            const newHeading = $getNodeByKey(nodeKey);
+            if (newHeading !== null) {
+              const prevHeading = $getPreviousHeading(newHeading);
+              currentTableOfContents = $insertHeadingIntoTableOfContents(prevHeading, newHeading, currentTableOfContents);
+            }
+          } else if (mutation === 'destroyed') {
+            currentTableOfContents = $deleteHeadingFromTableOfContents(nodeKey, currentTableOfContents);
+          } else if (mutation === 'updated') {
+            const newHeading = $getNodeByKey(nodeKey);
+            if (newHeading !== null) {
+              const prevHeading = $getPreviousHeading(newHeading);
+              currentTableOfContents = $updateHeadingPosition(prevHeading, newHeading, currentTableOfContents);
+            }
+          }
+        }
+        setTableOfContents(currentTableOfContents);
+      });
+    });
+
+    // Listen to text node mutation updates
+    const removeTextNodeMutationListener = editor.registerMutationListener(TextNode, mutatedNodes => {
+      editor.getEditorState().read(() => {
+        for (const [nodeKey, mutation] of mutatedNodes) {
+          if (mutation === 'updated') {
+            const currNode = $getNodeByKey(nodeKey);
+            if (currNode !== null) {
+              const parentNode = currNode.getParentOrThrow();
+              if ($isHeadingNode(parentNode)) {
+                currentTableOfContents = $updateHeadingInTableOfContents(parentNode, currentTableOfContents);
+                setTableOfContents(currentTableOfContents);
+              }
+            }
+          }
+        }
+      });
+    });
+    return () => {
+      removeHeaderMutationListener();
+      removeTextNodeMutationListener();
+      removeRootUpdateListener();
+    };
+  }, [editor]);
+  return children(tableOfContents, editor);
+}
+
+export { TableOfContentsPlugin };

package/LexicalTableOfContentsPlugin.js

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+'use strict'
+const LexicalTableOfContentsPlugin = process.env.NODE_ENV === 'development' ? require('./LexicalTableOfContentsPlugin.dev.js') : require('./LexicalTableOfContentsPlugin.prod.js');
+module.exports = LexicalTableOfContentsPlugin;

package/LexicalTableOfContentsPlugin.js.flow

@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict
+ */
+
+import type {HeadingTagType} from '@lexical/rich-text';
+import type {LexicalEditor, NodeKey} from 'lexical';
+
+declare export function TableOfContentsPlugin({
+  children: (
+    tableOfContents: Array<[NodeKey, string, HeadingTagType]>,
+    editor: LexicalEditor,
+  ) => React$Node,
+}): React$Node;