@depup/lexical__react 0.41.0-depup.0

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"@lexical/extension";export{registerTabIndentation}from"@lexical/extension";import{useLexicalComposerContext as t}from"@lexical/react/LexicalComposerContext";import{useEffect as n}from"react";function o({maxIndent:o,$canIndent:r}){const[i]=t();return n(()=>e(i,o,r),[i,o,r]),null}export{o 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 '@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,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('@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 updateCurrentTableOfContents = node => {
+        for (const child of node.getChildren()) {
+          if (richText.$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 (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);
+      });
+    },
+    // 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 (richText.$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 '@lexical/react/LexicalComposerContext';
+import { HeadingNode, $isHeadingNode } 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 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 '@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;

package/LexicalTableOfContentsPlugin.mjs

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

package/LexicalTableOfContentsPlugin.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('./LexicalTableOfContentsPlugin.dev.mjs') : import('./LexicalTableOfContentsPlugin.prod.mjs'));
+export const TableOfContentsPlugin = mod.TableOfContentsPlugin;

package/LexicalTableOfContentsPlugin.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("@lexical/react/LexicalComposerContext"),t=require("@lexical/rich-text"),n=require("@lexical/utils"),o=require("lexical"),r=require("react");function i(e){return[e.getKey(),e.getTextContent(),e.getTag()]}function s(e,t,n){if(null===t)return n;const o=i(t);let r=[];if(null===e){if(n.length>0&&n[0][0]===t.__key)return n;r=[o,...n]}else for(let i=0;i<n.length;i++){const s=n[i][0];if(r.push(n[i]),s===e.getKey()&&s!==t.getKey()){if(i+1<n.length&&n[i+1][0]===t.__key)return n;r.push(o)}}return r}function u(e,t){const n=[];for(const o of t)o[0]!==e&&n.push(o);return n}function l(e,t){const n=[];for(const o of t)o[0]===e.getKey()?n.push(i(e)):n.push(o);return n}function c(e,t,n){const o=[],r=i(t);e||o.push(r);for(const i of n)i[0]!==t.getKey()&&(o.push(i),e&&i[0]===e.getKey()&&o.push(r));return o}function d(e){let o=n.$getNextRightPreorderNode(e);for(;null!==o&&!t.$isHeadingNode(o);)o=n.$getNextRightPreorderNode(o);return o}exports.TableOfContentsPlugin=function({children:n}){const[i,g]=r.useState([]),[f]=e.useLexicalComposerContext();return r.useEffect(()=>{let e=[];f.getEditorState().read(()=>{const n=r=>{for(const i of r.getChildren())t.$isHeadingNode(i)?e.push([i.getKey(),i.getTextContent(),i.getTag()]):o.$isElementNode(i)&&n(i)};n(o.$getRoot()),g(e)});const n=f.registerUpdateListener(({editorState:n,dirtyElements:r})=>{n.read(()=>{const n=r=>{for(const i of r.getChildren())if(t.$isHeadingNode(i)){const t=d(i);e=c(t,i,e),g(e)}else o.$isElementNode(i)&&n(i)};o.$getRoot().getChildren().forEach(e=>{o.$isElementNode(e)&&r.get(e.__key)&&n(e)})})}),r=f.registerMutationListener(t.HeadingNode,t=>{f.getEditorState().read(()=>{for(const[n,r]of t)if("created"===r){const t=o.$getNodeByKey(n);if(null!==t){const n=d(t);e=s(n,t,e)}}else if("destroyed"===r)e=u(n,e);else if("updated"===r){const t=o.$getNodeByKey(n);if(null!==t){const n=d(t);e=c(n,t,e)}}g(e)})},{skipInitialization:!0}),i=f.registerMutationListener(o.TextNode,n=>{f.getEditorState().read(()=>{for(const[r,i]of n)if("updated"===i){const n=o.$getNodeByKey(r);if(null!==n){const o=n.getParentOrThrow();t.$isHeadingNode(o)&&(e=l(o,e),g(e))}}})},{skipInitialization:!0});return()=>{r(),i(),n()}},[f]),n(i,f)};

package/LexicalTableOfContentsPlugin.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 t}from"@lexical/react/LexicalComposerContext";import{HeadingNode as e,$isHeadingNode as n}from"@lexical/rich-text";import{$getNextRightPreorderNode as r}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,n){if(null===e)return n;const r=u(e);let o=[];if(null===t){if(n.length>0&&n[0][0]===e.__key)return n;o=[r,...n]}else for(let i=0;i<n.length;i++){const s=n[i][0];if(o.push(n[i]),s===t.getKey()&&s!==e.getKey()){if(i+1<n.length&&n[i+1][0]===e.__key)return n;o.push(r)}}return o}function g(t,e){const n=[];for(const r of e)r[0]!==t&&n.push(r);return n}function d(t,e){const n=[];for(const r of e)r[0]===t.getKey()?n.push(u(t)):n.push(r);return n}function p(t,e,n){const r=[],o=u(e);t||r.push(o);for(const i of n)i[0]!==e.getKey()&&(r.push(i),t&&i[0]===t.getKey()&&r.push(o));return r}function h(t){let e=r(t);for(;null!==e&&!n(e);)e=r(e);return e}function m({children:r}){const[u,m]=c([]),[y]=t();return l(()=>{let t=[];y.getEditorState().read(()=>{const e=r=>{for(const o of r.getChildren())n(o)?t.push([o.getKey(),o.getTextContent(),o.getTag()]):i(o)&&e(o)};e(o()),m(t)});const r=y.registerUpdateListener(({editorState:e,dirtyElements:r})=>{e.read(()=>{const e=r=>{for(const o of r.getChildren())if(n(o)){const e=h(o);t=p(e,o,t),m(t)}else i(o)&&e(o)};o().getChildren().forEach(t=>{i(t)&&r.get(t.__key)&&e(t)})})}),c=y.registerMutationListener(e,e=>{y.getEditorState().read(()=>{for(const[n,r]of e)if("created"===r){const e=s(n);if(null!==e){const n=h(e);t=a(n,e,t)}}else if("destroyed"===r)t=g(n,t);else if("updated"===r){const e=s(n);if(null!==e){const n=h(e);t=p(n,e,t)}}m(t)})},{skipInitialization:!0}),l=y.registerMutationListener(f,e=>{y.getEditorState().read(()=>{for(const[r,o]of e)if("updated"===o){const e=s(r);if(null!==e){const r=e.getParentOrThrow();n(r)&&(t=d(r,t),m(t))}}})},{skipInitialization:!0});return()=>{c(),l(),r()}},[y]),r(u,y)}export{m as TableOfContentsPlugin};

package/LexicalTablePlugin.d.ts

@@ -0,0 +1,46 @@
+/**
+ * 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';
+export interface TablePluginProps {
+    /**
+     * When `false` (default `true`), merged cell support (colspan and rowspan) will be disabled and all
+     * tables will be forced into a regular grid with 1x1 table cells.
+     */
+    hasCellMerge?: boolean;
+    /**
+     * When `false` (default `true`), the background color of TableCellNode will always be removed.
+     */
+    hasCellBackgroundColor?: boolean;
+    /**
+     * When `true` (default `true`), the tab key can be used to navigate table cells.
+     */
+    hasTabHandler?: boolean;
+    /**
+     * When `true` (default `false`), tables will be wrapped in a `<div>` to enable horizontal scrolling
+     */
+    hasHorizontalScroll?: boolean;
+    /**
+     * When `true` (default `false`), nested tables will be allowed.
+     *
+     * @experimental Nested tables are not officially supported.
+     */
+    hasNestedTables?: boolean;
+    /**
+     * When `true` (default `false`), nested tables will be resized to fit the width of the parent table cell.
+     *
+     * @experimental Nested tables are not officially supported.
+     */
+    hasFitNestedTables?: boolean;
+}
+/**
+ * A plugin to enable all of the features of Lexical's TableNode.
+ *
+ * @param props - See type for documentation
+ * @returns An element to render in your LexicalComposer
+ */
+export declare function TablePlugin({ hasCellMerge, hasCellBackgroundColor, hasTabHandler, hasHorizontalScroll, hasNestedTables, hasFitNestedTables, }: TablePluginProps): JSX.Element | null;

package/LexicalTablePlugin.dev.js

@@ -0,0 +1,84 @@
+/**
+ * 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 extension = require('@lexical/extension');
+var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
+var table = require('@lexical/table');
+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.
+ *
+ */
+
+/**
+ * A plugin to enable all of the features of Lexical's TableNode.
+ *
+ * @param props - See type for documentation
+ * @returns An element to render in your LexicalComposer
+ */
+function TablePlugin({
+  hasCellMerge = true,
+  hasCellBackgroundColor = true,
+  hasTabHandler = true,
+  hasHorizontalScroll = false,
+  hasNestedTables = false,
+  hasFitNestedTables = false
+}) {
+  const [editor] = LexicalComposerContext.useLexicalComposerContext();
+  react.useEffect(() => {
+    const hadHorizontalScroll = table.$isScrollableTablesActive(editor);
+    if (hadHorizontalScroll !== hasHorizontalScroll) {
+      table.setScrollableTablesActive(editor, hasHorizontalScroll);
+      // Registering the transform has the side-effect of marking all existing
+      // TableNodes as dirty. The handler is immediately unregistered.
+      editor.registerNodeTransform(table.TableNode, () => {})();
+    }
+  }, [editor, hasHorizontalScroll]);
+  const hasNestedTablesSignal = usePropSignal(hasNestedTables);
+  const hasFitNestedTablesSignal = usePropSignal(hasFitNestedTables);
+  react.useEffect(() => table.registerTablePlugin(editor, {
+    hasFitNestedTables: hasFitNestedTablesSignal,
+    hasNestedTables: hasNestedTablesSignal
+  }), [editor, hasNestedTablesSignal, hasFitNestedTablesSignal]);
+  react.useEffect(() => table.registerTableSelectionObserver(editor, hasTabHandler), [editor, hasTabHandler]);
+
+  // Unmerge cells when the feature isn't enabled
+  react.useEffect(() => {
+    if (!hasCellMerge) {
+      return table.registerTableCellUnmergeTransform(editor);
+    }
+  }, [editor, hasCellMerge]);
+
+  // Remove cell background color when feature is disabled
+  react.useEffect(() => {
+    if (hasCellBackgroundColor) {
+      return;
+    }
+    return editor.registerNodeTransform(table.TableCellNode, node => {
+      if (node.getBackgroundColor() !== null) {
+        node.setBackgroundColor(null);
+      }
+    });
+  }, [editor, hasCellBackgroundColor, hasCellMerge]);
+  return null;
+}
+function usePropSignal(value) {
+  const [configSignal] = react.useState(() => extension.signal(value));
+  if (configSignal.peek() !== value) {
+    configSignal.value = value;
+  }
+  return configSignal;
+}
+
+exports.TablePlugin = TablePlugin;