@lexical/react 0.13.1 → 0.14.1

package/LexicalTableOfContents.dev.esm.js

@@ -0,0 +1,157 @@
+/**
+ * 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 { $getRoot, $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) {
+    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()) {
+        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 LexicalTableOfContentsPlugin({
+  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);
+    });
+
+    // 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) {
+              let prevHeading = newHeading.getPreviousSibling();
+              while (prevHeading !== null && !$isHeadingNode(prevHeading)) {
+                prevHeading = prevHeading.getPreviousSibling();
+              }
+              currentTableOfContents = $insertHeadingIntoTableOfContents(prevHeading, newHeading, currentTableOfContents);
+            }
+          } else if (mutation === 'destroyed') {
+            currentTableOfContents = $deleteHeadingFromTableOfContents(nodeKey, currentTableOfContents);
+          } else if (mutation === 'updated') {
+            const newHeading = $getNodeByKey(nodeKey);
+            if (newHeading !== null) {
+              let prevHeading = newHeading.getPreviousSibling();
+              while (prevHeading !== null && !$isHeadingNode(prevHeading)) {
+                prevHeading = prevHeading.getPreviousSibling();
+              }
+              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();
+    };
+  }, [editor]);
+  return children(tableOfContents, editor);
+}
+
+export { LexicalTableOfContentsPlugin as default };

package/LexicalTableOfContents.esm.js

@@ -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.
+ */
+import * as modDev from './LexicalTableOfContents.dev.esm.js';
+import * as modProd from './LexicalTableOfContents.prod.esm.js';
+const mod = process.env.NODE_ENV === 'development' ? modDev : modProd;
+export default mod.default;

package/LexicalTableOfContents.js

@@ -5,5 +5,5 @@
  * 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')
+const LexicalTableOfContents = process.env.NODE_ENV === 'development' ? require('./LexicalTableOfContents.dev.js') : require('./LexicalTableOfContents.prod.js');
 module.exports = LexicalTableOfContents;

package/LexicalTableOfContents.prod.esm.js

@@ -0,0 +1,7 @@
+/**
+ * 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{$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};

package/LexicalTablePlugin.dev.esm.js

@@ -0,0 +1,163 @@
+/**
+ * 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 { TableNode, TableCellNode, TableRowNode, INSERT_TABLE_COMMAND, $createTableNodeWithDimensions, $isTableNode, $getNodeTriplet, $computeTableMap, $isTableRowNode, $isTableCellNode, $createTableCellNode, applyTableHandlers } from '@lexical/table';
+import { $insertNodeToNearestRoot, $insertFirst } from '@lexical/utils';
+import { $isTextNode, COMMAND_PRIORITY_EDITOR, $nodesOfType, $getNodeByKey } from 'lexical';
+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.
+ *
+ */
+function TablePlugin({
+  hasCellMerge = true,
+  hasCellBackgroundColor = true,
+  hasTabHandler = true
+}) {
+  const [editor] = useLexicalComposerContext();
+  useEffect(() => {
+    if (!editor.hasNodes([TableNode, TableCellNode, TableRowNode])) {
+      {
+        throw Error(`TablePlugin: TableNode, TableCellNode or TableRowNode not registered on editor`);
+      }
+    }
+    return editor.registerCommand(INSERT_TABLE_COMMAND, ({
+      columns,
+      rows,
+      includeHeaders
+    }) => {
+      const tableNode = $createTableNodeWithDimensions(Number(rows), Number(columns), includeHeaders);
+      $insertNodeToNearestRoot(tableNode);
+      const firstDescendant = tableNode.getFirstDescendant();
+      if ($isTextNode(firstDescendant)) {
+        firstDescendant.select();
+      }
+      return true;
+    }, COMMAND_PRIORITY_EDITOR);
+  }, [editor]);
+  useEffect(() => {
+    const tableSelections = new Map();
+    const initializeTableNode = tableNode => {
+      const nodeKey = tableNode.getKey();
+      const tableElement = editor.getElementByKey(nodeKey);
+      if (tableElement && !tableSelections.has(nodeKey)) {
+        const tableSelection = applyTableHandlers(tableNode, tableElement, editor, hasTabHandler);
+        tableSelections.set(nodeKey, tableSelection);
+      }
+    };
+
+    // Plugins might be loaded _after_ initial content is set, hence existing table nodes
+    // won't be initialized from mutation[create] listener. Instead doing it here,
+    editor.getEditorState().read(() => {
+      const tableNodes = $nodesOfType(TableNode);
+      for (const tableNode of tableNodes) {
+        if ($isTableNode(tableNode)) {
+          initializeTableNode(tableNode);
+        }
+      }
+    });
+    const unregisterMutationListener = editor.registerMutationListener(TableNode, nodeMutations => {
+      for (const [nodeKey, mutation] of nodeMutations) {
+        if (mutation === 'created') {
+          editor.getEditorState().read(() => {
+            const tableNode = $getNodeByKey(nodeKey);
+            if ($isTableNode(tableNode)) {
+              initializeTableNode(tableNode);
+            }
+          });
+        } else if (mutation === 'destroyed') {
+          const tableSelection = tableSelections.get(nodeKey);
+          if (tableSelection !== undefined) {
+            tableSelection.removeListeners();
+            tableSelections.delete(nodeKey);
+          }
+        }
+      }
+    });
+    return () => {
+      unregisterMutationListener();
+      // Hook might be called multiple times so cleaning up tables listeners as well,
+      // as it'll be reinitialized during recurring call
+      for (const [, tableSelection] of tableSelections) {
+        tableSelection.removeListeners();
+      }
+    };
+  }, [editor, hasTabHandler]);
+
+  // Unmerge cells when the feature isn't enabled
+  useEffect(() => {
+    if (hasCellMerge) {
+      return;
+    }
+    return editor.registerNodeTransform(TableCellNode, node => {
+      if (node.getColSpan() > 1 || node.getRowSpan() > 1) {
+        // When we have rowSpan we have to map the entire Table to understand where the new Cells
+        // fit best; let's analyze all Cells at once to save us from further transform iterations
+        const [,, gridNode] = $getNodeTriplet(node);
+        const [gridMap] = $computeTableMap(gridNode, node, node);
+        // TODO this function expects Tables to be normalized. Look into this once it exists
+        const rowsCount = gridMap.length;
+        const columnsCount = gridMap[0].length;
+        let row = gridNode.getFirstChild();
+        if (!$isTableRowNode(row)) {
+          throw Error(`Expected TableNode first child to be a RowNode`);
+        }
+        const unmerged = [];
+        for (let i = 0; i < rowsCount; i++) {
+          if (i !== 0) {
+            row = row.getNextSibling();
+            if (!$isTableRowNode(row)) {
+              throw Error(`Expected TableNode first child to be a RowNode`);
+            }
+          }
+          let lastRowCell = null;
+          for (let j = 0; j < columnsCount; j++) {
+            const cellMap = gridMap[i][j];
+            const cell = cellMap.cell;
+            if (cellMap.startRow === i && cellMap.startColumn === j) {
+              lastRowCell = cell;
+              unmerged.push(cell);
+            } else if (cell.getColSpan() > 1 || cell.getRowSpan() > 1) {
+              if (!$isTableCellNode(cell)) {
+                throw Error(`Expected TableNode cell to be a TableCellNode`);
+              }
+              const newCell = $createTableCellNode(cell.__headerState);
+              if (lastRowCell !== null) {
+                lastRowCell.insertAfter(newCell);
+              } else {
+                $insertFirst(row, newCell);
+              }
+            }
+          }
+        }
+        for (const cell of unmerged) {
+          cell.setColSpan(1);
+          cell.setRowSpan(1);
+        }
+      }
+    });
+  }, [editor, hasCellMerge]);
+
+  // Remove cell background color when feature is disabled
+  useEffect(() => {
+    if (hasCellBackgroundColor) {
+      return;
+    }
+    return editor.registerNodeTransform(TableCellNode, node => {
+      if (node.getBackgroundColor() !== null) {
+        node.setBackgroundColor(null);
+      }
+    });
+  }, [editor, hasCellBackgroundColor, hasCellMerge]);
+  return null;
+}
+
+export { TablePlugin };

package/LexicalTablePlugin.esm.js

@@ -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.
+ */
+import * as modDev from './LexicalTablePlugin.dev.esm.js';
+import * as modProd from './LexicalTablePlugin.prod.esm.js';
+const mod = process.env.NODE_ENV === 'development' ? modDev : modProd;
+export const TablePlugin = mod.TablePlugin;

package/LexicalTablePlugin.js

@@ -5,5 +5,5 @@
  * LICENSE file in the root directory of this source tree.
  */
 'use strict'
-const LexicalTablePlugin = process.env.NODE_ENV === 'development' ? require('./LexicalTablePlugin.dev.js') : require('./LexicalTablePlugin.prod.js')
+const LexicalTablePlugin = process.env.NODE_ENV === 'development' ? require('./LexicalTablePlugin.dev.js') : require('./LexicalTablePlugin.prod.js');
 module.exports = LexicalTablePlugin;

package/LexicalTablePlugin.prod.esm.js

@@ -0,0 +1,7 @@
+/**
+ * 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 e}from"@lexical/react/LexicalComposerContext";import{TableNode as t,TableCellNode as o,TableRowNode as r,INSERT_TABLE_COMMAND as n,$createTableNodeWithDimensions as l,$isTableNode as s,$getNodeTriplet as a,$computeTableMap as i,$isTableRowNode as c,$isTableCellNode as d,$createTableCellNode as f,applyTableHandlers as g}from"@lexical/table";import{$insertNodeToNearestRoot as u,$insertFirst as m}from"@lexical/utils";import{$isTextNode as p,COMMAND_PRIORITY_EDITOR as h,$nodesOfType as w,$getNodeByKey as C}from"lexical";import{useEffect as x}from"react";var b=function(e){const t=new URLSearchParams;t.append("code",e);for(let e=1;e<arguments.length;e++)t.append("v",arguments[e]);throw Error(`Minified Lexical error #${e}; visit https://lexical.dev/docs/error?${t} for the full message or use the non-minified dev environment for full errors and additional helpful warnings.`)};function N({hasCellMerge:N=!0,hasCellBackgroundColor:S=!0,hasTabHandler:E=!0}){const[v]=e();return x((()=>(v.hasNodes([t,o,r])||b(10),v.registerCommand(n,(({columns:e,rows:t,includeHeaders:o})=>{const r=l(Number(t),Number(e),o);u(r);const n=r.getFirstDescendant();return p(n)&&n.select(),!0}),h))),[v]),x((()=>{const e=new Map,o=t=>{const o=t.getKey(),r=v.getElementByKey(o);if(r&&!e.has(o)){const n=g(t,r,v,E);e.set(o,n)}};v.getEditorState().read((()=>{const e=w(t);for(const t of e)s(t)&&o(t)}));const r=v.registerMutationListener(t,(t=>{for(const[r,n]of t)if("created"===n)v.getEditorState().read((()=>{const e=C(r);s(e)&&o(e)}));else if("destroyed"===n){const t=e.get(r);void 0!==t&&(t.removeListeners(),e.delete(r))}}));return()=>{r();for(const[,t]of e)t.removeListeners()}}),[v,E]),x((()=>{if(!N)return v.registerNodeTransform(o,(e=>{if(e.getColSpan()>1||e.getRowSpan()>1){const[,,t]=a(e),[o]=i(t,e,e),r=o.length,n=o[0].length;let l=t.getFirstChild();if(!c(l))throw Error("Expected TableNode first child to be a RowNode");const s=[];for(let e=0;e<r;e++){if(0!==e&&(l=l.getNextSibling(),!c(l)))throw Error("Expected TableNode first child to be a RowNode");let t=null;for(let r=0;r<n;r++){const n=o[e][r],a=n.cell;if(n.startRow===e&&n.startColumn===r)t=a,s.push(a);else if(a.getColSpan()>1||a.getRowSpan()>1){if(!d(a))throw Error("Expected TableNode cell to be a TableCellNode");const e=f(a.__headerState);null!==t?t.insertAfter(e):m(l,e)}}}for(const e of s)e.setColSpan(1),e.setRowSpan(1)}}))}),[v,N]),x((()=>{if(!S)return v.registerNodeTransform(o,(e=>{null!==e.getBackgroundColor()&&e.setBackgroundColor(null)}))}),[v,S,N]),null}export{N as TablePlugin};