@ekz/lexical-react 0.40.0

package/LexicalSelectionAlwaysOnDisplay.node.mjs

@@ -0,0 +1,10 @@
+/**
+ * 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.
+ *
+ */
+
+const mod = await (process.env.NODE_ENV !== 'production' ? import('./LexicalSelectionAlwaysOnDisplay.dev.mjs') : import('./LexicalSelectionAlwaysOnDisplay.prod.mjs'));
+export const SelectionAlwaysOnDisplay = mod.SelectionAlwaysOnDisplay;

package/LexicalSelectionAlwaysOnDisplay.prod.js

@@ -0,0 +1,9 @@
+/**
+ * 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 e=require("@ekz/lexical-react/LexicalComposerContext"),t=require("@ekz/lexical-utils"),i=require("react");exports.SelectionAlwaysOnDisplay=function({onReposition:l}){const[r]=e.useLexicalComposerContext();return i.useEffect(()=>t.selectionAlwaysOnDisplay(r,l),[r,l]),null};

package/LexicalSelectionAlwaysOnDisplay.prod.mjs

@@ -0,0 +1,9 @@
+/**
+ * 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 as o}from"@ekz/lexical-react/LexicalComposerContext";import{selectionAlwaysOnDisplay as t}from"@ekz/lexical-utils";import{useEffect as e}from"react";function r({onReposition:r}){const[i]=o();return e(()=>t(i,r),[i,r]),null}export{r as SelectionAlwaysOnDisplay};

package/LexicalTabIndentationPlugin.d.ts

@@ -0,0 +1,17 @@
+/**
+ * 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 { registerTabIndentation } from '@ekz/lexical-extension';
+export { registerTabIndentation };
+/**
+ * This plugin adds the ability to indent content using the tab key. Generally, we don't
+ * recommend using this plugin as it could negatively affect accessibility for keyboard
+ * users, causing focus to become trapped within the editor.
+ */
+export declare function TabIndentationPlugin({ maxIndent }: {
+    maxIndent?: number;
+}): null;

package/LexicalTabIndentationPlugin.dev.js

@@ -0,0 +1,40 @@
+/**
+ * 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 lexicalExtension = require('@ekz/lexical-extension');
+var LexicalComposerContext = require('@ekz/lexical-react/LexicalComposerContext');
+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.
+ *
+ */
+
+
+/**
+ * This plugin adds the ability to indent content using the tab key. Generally, we don't
+ * recommend using this plugin as it could negatively affect accessibility for keyboard
+ * users, causing focus to become trapped within the editor.
+ */
+function TabIndentationPlugin({
+  maxIndent
+}) {
+  const [editor] = LexicalComposerContext.useLexicalComposerContext();
+  react.useEffect(() => {
+    return lexicalExtension.registerTabIndentation(editor, maxIndent);
+  }, [editor, maxIndent]);
+  return null;
+}
+
+exports.registerTabIndentation = lexicalExtension.registerTabIndentation;
+exports.TabIndentationPlugin = TabIndentationPlugin;

package/LexicalTabIndentationPlugin.dev.mjs

@@ -0,0 +1,38 @@
+/**
+ * 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 { registerTabIndentation } from '@ekz/lexical-extension';
+export { registerTabIndentation } from '@ekz/lexical-extension';
+import { useLexicalComposerContext } from '@ekz/lexical-react/LexicalComposerContext';
+import { 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.
+ *
+ */
+
+
+/**
+ * This plugin adds the ability to indent content using the tab key. Generally, we don't
+ * recommend using this plugin as it could negatively affect accessibility for keyboard
+ * users, causing focus to become trapped within the editor.
+ */
+function TabIndentationPlugin({
+  maxIndent
+}) {
+  const [editor] = useLexicalComposerContext();
+  useEffect(() => {
+    return registerTabIndentation(editor, maxIndent);
+  }, [editor, maxIndent]);
+  return null;
+}
+
+export { TabIndentationPlugin };

package/LexicalTabIndentationPlugin.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 LexicalTabIndentationPlugin = process.env.NODE_ENV !== 'production' ? require('./LexicalTabIndentationPlugin.dev.js') : require('./LexicalTabIndentationPlugin.prod.js');
+module.exports = LexicalTabIndentationPlugin;

package/LexicalTabIndentationPlugin.js.flow

@@ -0,0 +1,21 @@
+/**
+ * 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 {LexicalEditor} from '@ekz/lexical';
+
+declare export function registerTabIndentation(
+  editor: LexicalEditor,
+  maxIndent?: number,
+): () => void;
+
+type Props = $ReadOnly<{
+  maxIndent?: number,
+}>;
+
+declare export function TabIndentationPlugin(props: Props): null;

package/LexicalTabIndentationPlugin.mjs

@@ -0,0 +1,13 @@
+/**
+ * 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 * as modDev from './LexicalTabIndentationPlugin.dev.mjs';
+import * as modProd from './LexicalTabIndentationPlugin.prod.mjs';
+const mod = process.env.NODE_ENV !== 'production' ? modDev : modProd;
+export const TabIndentationPlugin = mod.TabIndentationPlugin;
+export const registerTabIndentation = mod.registerTabIndentation;

package/LexicalTabIndentationPlugin.node.mjs

@@ -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.
+ *
+ */
+
+const mod = await (process.env.NODE_ENV !== 'production' ? import('./LexicalTabIndentationPlugin.dev.mjs') : import('./LexicalTabIndentationPlugin.prod.mjs'));
+export const TabIndentationPlugin = mod.TabIndentationPlugin;
+export const registerTabIndentation = mod.registerTabIndentation;

package/LexicalTabIndentationPlugin.prod.js

@@ -0,0 +1,9 @@
+/**
+ * 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 e=require("@ekz/lexical-extension"),t=require("@ekz/lexical-react/LexicalComposerContext"),n=require("react");exports.registerTabIndentation=e.registerTabIndentation,exports.TabIndentationPlugin=function({maxIndent:r}){const[i]=t.useLexicalComposerContext();return n.useEffect(()=>e.registerTabIndentation(i,r),[i,r]),null};

package/LexicalTabIndentationPlugin.prod.mjs

@@ -0,0 +1,9 @@
+/**
+ * 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{registerTabIndentation as e}from"@ekz/lexical-extension";export{registerTabIndentation}from"@ekz/lexical-extension";import{useLexicalComposerContext as t}from"@ekz/lexical-react/LexicalComposerContext";import{useEffect as o}from"react";function r({maxIndent:r}){const[n]=t();return o(()=>e(n,r),[n,r]),null}export{r as TabIndentationPlugin};

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.
+ *
+ */
+import type { JSX } from 'react';
+import { HeadingTagType } from '@ekz/lexical-rich-text';
+import { LexicalEditor, NodeKey } from '@ekz/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,209 @@
+/**
+ * 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('@ekz/lexical-react/LexicalComposerContext');
+var lexicalRichText = require('@ekz/lexical-rich-text');
+var lexicalUtils = require('@ekz/lexical-utils');
+var lexical = require('@ekz/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 = lexicalUtils.$getNextRightPreorderNode(node);
+  while (prevHeading !== null && !lexicalRichText.$isHeadingNode(prevHeading)) {
+    prevHeading = lexicalUtils.$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 updateCurrentTableOfContents = node => {
+        for (const child of node.getChildren()) {
+          if (lexicalRichText.$isHeadingNode(child)) {
+            currentTableOfContents.push([child.getKey(), child.getTextContent(), child.getTag()]);
+          } else if (lexical.$isElementNode(child)) {
+            updateCurrentTableOfContents(child);
+          }
+        }
+      };
+      updateCurrentTableOfContents(lexical.$getRoot());
+      setTableOfContents(currentTableOfContents);
+    });
+    const removeRootUpdateListener = editor.registerUpdateListener(({
+      editorState,
+      dirtyElements
+    }) => {
+      editorState.read(() => {
+        const updateChildHeadings = node => {
+          for (const child of node.getChildren()) {
+            if (lexicalRichText.$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(lexicalRichText.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);
+      });
+    },
+    // Initialization is handled separately
+    {
+      skipInitialization: true
+    });
+
+    // 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 (lexicalRichText.$isHeadingNode(parentNode)) {
+                currentTableOfContents = $updateHeadingInTableOfContents(parentNode, currentTableOfContents);
+                setTableOfContents(currentTableOfContents);
+              }
+            }
+          }
+        }
+      });
+    },
+    // Initialization is handled separately
+    {
+      skipInitialization: true
+    });
+    return () => {
+      removeHeaderMutationListener();
+      removeTextNodeMutationListener();
+      removeRootUpdateListener();
+    };
+  }, [editor]);
+  return children(tableOfContents, editor);
+}
+
+exports.TableOfContentsPlugin = TableOfContentsPlugin;

package/LexicalTableOfContentsPlugin.dev.mjs

@@ -0,0 +1,207 @@
+/**
+ * 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 '@ekz/lexical-react/LexicalComposerContext';
+import { HeadingNode, $isHeadingNode } from '@ekz/lexical-rich-text';
+import { $getNextRightPreorderNode } from '@ekz/lexical-utils';
+import { $getRoot, $isElementNode, $getNodeByKey, TextNode } from '@ekz/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 updateCurrentTableOfContents = node => {
+        for (const child of node.getChildren()) {
+          if ($isHeadingNode(child)) {
+            currentTableOfContents.push([child.getKey(), child.getTextContent(), child.getTag()]);
+          } else if ($isElementNode(child)) {
+            updateCurrentTableOfContents(child);
+          }
+        }
+      };
+      updateCurrentTableOfContents($getRoot());
+      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);
+      });
+    },
+    // Initialization is handled separately
+    {
+      skipInitialization: true
+    });
+
+    // 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);
+              }
+            }
+          }
+        }
+      });
+    },
+    // Initialization is handled separately
+    {
+      skipInitialization: true
+    });
+    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 !== 'production' ? 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 '@ekz/lexical-rich-text';
+import type {LexicalEditor, NodeKey} from '@ekz/lexical';
+
+declare export function TableOfContentsPlugin({
+  children: (
+    tableOfContents: Array<[NodeKey, string, HeadingTagType]>,
+    editor: LexicalEditor,
+  ) => React.Node,
+}): React.Node;