@lexical/table 0.1.9

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Dominic Gannaway
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/LexicalTable.dev.js

@@ -0,0 +1,909 @@
+/**
+ * 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 lexical = require('lexical');
+
+/**
+ * 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 addClassNamesToElement(element, ...classNames) {
+  classNames.forEach(className => {
+    if (className != null && typeof className === 'string') {
+      element.classList.add(...className.split(' '));
+    }
+  });
+}
+
+/**
+ * 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.
+ *
+ * 
+ */
+class TableCellNode extends lexical.ElementNode {
+  static getType() {
+    return 'table-cell';
+  }
+
+  static clone(node) {
+    return new TableCellNode(false, node.__key);
+  }
+
+  constructor(isHeader = false, key) {
+    super(key);
+    this.__isHeader = isHeader;
+  }
+
+  getTag() {
+    return this.__isHeader ? 'th' : 'td';
+  }
+
+  createDOM(config) {
+    const element = document.createElement(this.getTag());
+    addClassNamesToElement(element, config.theme.tableCell, this.__isHeader === true && config.theme.tableCellHeader);
+    return element;
+  }
+
+  updateDOM() {
+    return false;
+  }
+
+  collapseAtStart() {
+    return true;
+  }
+
+  canBeEmpty() {
+    return false;
+  }
+
+}
+function $createTableCellNode(isHeader) {
+  return new TableCellNode(isHeader);
+}
+function $isTableCellNode(node) {
+  return node instanceof TableCellNode;
+}
+
+/**
+ * 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 $findMatchingParent(startingNode, findFn) {
+  let curr = startingNode;
+
+  while (curr !== lexical.$getRoot() && curr != null) {
+    if (findFn(curr)) {
+      return curr;
+    }
+
+    curr = curr.getParent();
+  }
+
+  return null;
+}
+
+/**
+ * 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 LowPriority = 1;
+const CriticalPriority = 4;
+const removeHighlightStyle = document.createElement('style');
+removeHighlightStyle.appendChild(document.createTextNode('::selection{background-color: transparent}'));
+
+function getCellFromTarget(node) {
+  let currentNode = node;
+
+  while (currentNode != null) {
+    const nodeName = currentNode.nodeName;
+
+    if (nodeName === 'TD' || nodeName === 'TH') {
+      // $FlowFixMe: internal field
+      const cell = currentNode._cell;
+
+      if (cell === undefined) {
+        return null;
+      }
+
+      return cell;
+    }
+
+    currentNode = currentNode.parentNode;
+  }
+
+  return null;
+}
+
+function trackTableGrid(tableNode, tableElement, editor) {
+  const cells = [];
+  const grid = {
+    cells,
+    columns: 0,
+    rows: 0
+  };
+  const observer = new MutationObserver(records => {
+    editor.update(() => {
+      let currentNode = tableElement.firstChild;
+      let x = 0;
+      let y = 0;
+      let gridNeedsRedraw = false;
+
+      for (let i = 0; i < records.length; i++) {
+        const record = records[i];
+        const target = record.target;
+        const nodeName = target.nodeName;
+
+        if (nodeName === 'TABLE' || nodeName === 'TR') {
+          gridNeedsRedraw = true;
+          break;
+        }
+      }
+
+      if (!gridNeedsRedraw) {
+        return;
+      }
+
+      cells.length = 0;
+
+      while (currentNode != null) {
+        const nodeMame = currentNode.nodeName;
+
+        if (nodeMame === 'TD' || nodeMame === 'TH') {
+          // $FlowFixMe: TD is always an HTMLElement
+          const elem = currentNode;
+          const cell = {
+            elem,
+            highlighted: false,
+            x,
+            y
+          }; // $FlowFixMe: internal field
+
+          currentNode._cell = cell;
+
+          if (cells[y] === undefined) {
+            cells[y] = [];
+          }
+
+          cells[y][x] = cell;
+        } else {
+          const child = currentNode.firstChild;
+
+          if (child != null) {
+            currentNode = child;
+            continue;
+          }
+        }
+
+        const sibling = currentNode.nextSibling;
+
+        if (sibling != null) {
+          x++;
+          currentNode = sibling;
+          continue;
+        }
+
+        const parent = currentNode.parentNode;
+
+        if (parent != null) {
+          const parentSibling = parent.nextSibling;
+
+          if (parentSibling == null) {
+            break;
+          }
+
+          y++;
+          x = 0;
+          currentNode = parentSibling;
+        }
+      }
+
+      grid.columns = x + 1;
+      grid.rows = y + 1;
+      tableNode.setGrid(grid);
+    });
+  });
+  observer.observe(tableElement, {
+    childList: true,
+    subtree: true
+  });
+  tableNode.setGrid(grid);
+  return grid;
+}
+
+function updateCells(fromX, toX, fromY, toY, cells) {
+  const highlighted = [];
+
+  for (let y = 0; y < cells.length; y++) {
+    const row = cells[y];
+
+    for (let x = 0; x < row.length; x++) {
+      const cell = row[x];
+      const elemStyle = cell.elem.style;
+
+      if (x >= fromX && x <= toX && y >= fromY && y <= toY) {
+        if (!cell.highlighted) {
+          cell.highlighted = true;
+          elemStyle.setProperty('background-color', 'rgb(163, 187, 255)');
+          elemStyle.setProperty('caret-color', 'transparent');
+        }
+
+        highlighted.push(cell);
+      } else if (cell.highlighted) {
+        cell.highlighted = false;
+        elemStyle.removeProperty('background-color');
+        elemStyle.removeProperty('caret-color');
+      }
+    }
+  }
+
+  return highlighted;
+}
+
+function applyCustomTableHandlers(tableNode, tableElement, editor) {
+  const rootElement = editor.getRootElement();
+
+  if (rootElement === null) {
+    return;
+  }
+
+  trackTableGrid(tableNode, tableElement, editor);
+  const grid = tableNode.getGrid();
+  let isSelected = false;
+  let isHighlightingCells = false;
+  let startX = -1;
+  let startY = -1;
+  let currentX = -1;
+  let currentY = -1;
+  let highlightedCells = [];
+
+  if (grid == null) {
+    throw new Error('Table grid not found.');
+  }
+
+  tableElement.addEventListener('mousemove', event => {
+    if (isSelected) {
+      // $FlowFixMe: event.target is always a Node on the DOM
+      const cell = getCellFromTarget(event.target);
+
+      if (cell !== null) {
+        const cellX = cell.x;
+        const cellY = cell.y;
+
+        if (!isHighlightingCells && (startX !== cellX || startY !== cellY)) {
+          event.preventDefault();
+          const windowSelection = window.getSelection(); // Collapse the selection
+
+          windowSelection.setBaseAndExtent(windowSelection.anchorNode, 0, windowSelection.anchorNode, 0);
+          isHighlightingCells = true;
+
+          if (document.body) {
+            document.body.appendChild(removeHighlightStyle);
+          }
+
+          if (deleteCharacterListener === null) {
+            deleteCharacterListener = editor.addListener('command', (type, payload) => {
+              if (type === 'deleteCharacter') {
+                if (highlightedCells.length === grid.columns * grid.rows) {
+                  tableNode.selectPrevious(); // Delete entire table
+
+                  tableNode.remove();
+                  clearHighlight();
+                  return true;
+                }
+
+                highlightedCells.forEach(({
+                  elem
+                }) => {
+                  const cellNode = lexical.$getNearestNodeFromDOMNode(elem);
+
+                  if (lexical.$isElementNode(cellNode)) {
+                    cellNode.clear();
+                    const paragraphNode = lexical.$createParagraphNode();
+                    const textNode = lexical.$createTextNode();
+                    paragraphNode.append(textNode);
+                    cellNode.append(paragraphNode);
+                  }
+                });
+                tableNode.setSelectionState(null);
+                lexical.$setSelection(null);
+                return true;
+              } else if (type === 'formatText') {
+                formatCells(payload);
+                return true;
+              } else if (type === 'insertText') {
+                clearHighlight();
+                return false;
+              }
+
+              return false;
+            }, LowPriority);
+          }
+        } else if (cellX === currentX && cellY === currentY) {
+          return;
+        }
+
+        currentX = cellX;
+        currentY = cellY;
+
+        if (isHighlightingCells) {
+          const fromX = Math.min(startX, currentX);
+          const toX = Math.max(startX, currentX);
+          const fromY = Math.min(startY, currentY);
+          const toY = Math.max(startY, currentY);
+          editor.update(() => {
+            highlightedCells = tableNode.setSelectionState({
+              fromX,
+              fromY,
+              toX,
+              toY
+            });
+          });
+        }
+      }
+    }
+  });
+
+  const clearHighlight = () => {
+    editor.update(() => {
+      isHighlightingCells = false;
+      isSelected = false;
+      startX = -1;
+      startY = -1;
+      currentX = -1;
+      currentY = -1;
+      editor.update(() => {
+        tableNode.setSelectionState(null);
+      });
+      highlightedCells = [];
+
+      if (deleteCharacterListener !== null) {
+        deleteCharacterListener();
+        deleteCharacterListener = null;
+      }
+
+      const parent = removeHighlightStyle.parentNode;
+
+      if (parent != null) {
+        parent.removeChild(removeHighlightStyle);
+      }
+    });
+  };
+
+  tableElement.addEventListener('mouseleave', event => {
+    if (isSelected) {
+      return;
+    }
+  });
+
+  const formatCells = type => {
+    let selection = lexical.$getSelection();
+
+    if (selection === null) {
+      selection = lexical.$createRangeSelection();
+    } // This is to make Flow play ball.
+
+
+    const formatSelection = selection;
+    const anchor = formatSelection.anchor;
+    const focus = formatSelection.focus;
+    highlightedCells.forEach(highlightedCell => {
+      const cellNode = lexical.$getNearestNodeFromDOMNode(highlightedCell.elem);
+
+      if (lexical.$isElementNode(cellNode)) {
+        anchor.set(cellNode.getKey(), 0, 'element');
+        focus.set(cellNode.getKey(), cellNode.getChildrenSize(), 'element');
+        formatSelection.formatText(type);
+      }
+    }); // Collapse selection
+
+    selection.anchor.set(selection.anchor.key, selection.anchor.offset, selection.anchor.type);
+    selection.focus.set(selection.anchor.key, selection.anchor.offset, selection.anchor.type);
+    lexical.$setSelection(selection);
+  };
+
+  let deleteCharacterListener = null;
+  tableElement.addEventListener('mousedown', event => {
+    if (isSelected) {
+      if (isHighlightingCells) {
+        clearHighlight();
+      }
+
+      return;
+    }
+
+    setTimeout(() => {
+      if (isHighlightingCells) {
+        clearHighlight();
+      } // $FlowFixMe: event.target is always a Node on the DOM
+
+
+      const cell = getCellFromTarget(event.target);
+
+      if (cell !== null) {
+        isSelected = true;
+        startX = cell.x;
+        startY = cell.y;
+        document.addEventListener('mouseup', () => {
+          isSelected = false;
+        }, {
+          capture: true,
+          once: true
+        });
+      }
+    }, 0);
+  });
+  window.addEventListener('click', e => {
+    if (highlightedCells.length > 0 && !tableElement.contains(e.target)) {
+      editor.update(() => {
+        tableNode.setSelectionState(null);
+      });
+    }
+  });
+
+  const selectGridNodeInDirection = (x, y, direction) => {
+    switch (direction) {
+      case 'backward':
+      case 'forward':
+        {
+          const isForward = direction === 'forward';
+
+          if (y !== (isForward ? grid.columns - 1 : 0)) {
+            tableNode.getCellNodeFromCords(x, y + (isForward ? 1 : -1)).select();
+          } else {
+            if (x !== (isForward ? grid.rows - 1 : 0)) {
+              tableNode.getCellNodeFromCords(x + (isForward ? 1 : -1), isForward ? 0 : grid.columns - 1).select();
+            } else if (!isForward) {
+              tableNode.selectPrevious();
+            } else {
+              tableNode.selectNext();
+            }
+          }
+
+          return true;
+        }
+
+      case 'up':
+        {
+          if (x !== 0) {
+            tableNode.getCellNodeFromCords(x - 1, y).select();
+          } else {
+            tableNode.selectPrevious();
+          }
+
+          return true;
+        }
+
+      case 'down':
+        {
+          if (x !== grid.rows - 1) {
+            tableNode.getCellNodeFromCords(x + 1, y).select();
+          } else {
+            tableNode.selectNext();
+          }
+
+          return true;
+        }
+    }
+
+    return false;
+  };
+
+  editor.addListener('command', (type, payload) => {
+    const selection = lexical.$getSelection();
+
+    if (selection == null) {
+      return false;
+    }
+
+    const tableCellNode = $findMatchingParent(selection.anchor.getNode(), n => $isTableCellNode(n));
+
+    if (!$isTableCellNode(tableCellNode)) {
+      return false;
+    }
+
+    if (type === 'deleteCharacter') {
+      if (highlightedCells.length === 0 && selection.isCollapsed() && selection.anchor.offset === 0) {
+        return true;
+      }
+    }
+
+    if (type === 'indentContent' || type === 'outdentContent') {
+      if (selection.isCollapsed() && highlightedCells.length === 0) {
+        const currentCords = tableNode.getCordsFromCellNode(tableCellNode);
+        selectGridNodeInDirection(currentCords.x, currentCords.y, type === 'indentContent' ? 'forward' : 'backward');
+        return true;
+      }
+    }
+
+    if (type === 'keyArrowDown' || type === 'keyArrowUp') {
+      const event = payload;
+
+      if (selection.isCollapsed() && highlightedCells.length === 0) {
+        const currentCords = tableNode.getCordsFromCellNode(tableCellNode);
+        const elementParentNode = $findMatchingParent(selection.anchor.getNode(), n => lexical.$isElementNode(n));
+
+        if (type === 'keyArrowUp' && elementParentNode === tableCellNode.getFirstChild() || type === 'keyArrowDown' && elementParentNode === tableCellNode.getLastChild()) {
+          event.preventDefault();
+          event.stopImmediatePropagation();
+          selectGridNodeInDirection(currentCords.x, currentCords.y, type === 'keyArrowUp' ? 'up' : 'down');
+          return true;
+        }
+      }
+    }
+
+    return false;
+  }, CriticalPriority);
+}
+
+class TableNode extends lexical.ElementNode {
+  static getType() {
+    return 'table';
+  }
+
+  static clone(node, selectionShape, grid) {
+    return new TableNode(node.__key, node.__selectionShape, node.__grid);
+  }
+
+  constructor(key, selectionShape, grid) {
+    super(key);
+    this.__selectionShape = selectionShape;
+    this.__grid = grid;
+  }
+
+  createDOM(config, editor) {
+    const element = document.createElement('table');
+    addClassNamesToElement(element, config.theme.table);
+    applyCustomTableHandlers(this, element, editor);
+    return element;
+  }
+
+  updateDOM() {
+    return false;
+  }
+
+  canExtractContents() {
+    return false;
+  }
+
+  canBeEmpty() {
+    return false;
+  }
+
+  setSelectionState(selectionShape) {
+    const self = this.getWritable();
+    self.__selectionShape = selectionShape;
+    if (this.__grid == null) return [];
+
+    if (!selectionShape) {
+      return updateCells(-1, -1, -1, -1, this.__grid.cells);
+    }
+
+    return updateCells(selectionShape.fromX, selectionShape.toX, selectionShape.fromY, selectionShape.toY, this.__grid.cells);
+  }
+
+  getSelectionState() {
+    return this.__selectionShape;
+  }
+
+  getCordsFromCellNode(tableCellNode) {
+    if (!this.__grid) {
+      throw Error(`Grid not found.`);
+    }
+
+    const {
+      rows,
+      cells
+    } = this.__grid;
+
+    for (let x = 0; x < rows; x++) {
+      const row = cells[x];
+
+      if (row == null) {
+        throw new Error(`Row not found at x:${x}`);
+      }
+
+      const y = row.findIndex(({
+        elem
+      }) => {
+        const cellNode = lexical.$getNearestNodeFromDOMNode(elem);
+        return cellNode === tableCellNode;
+      });
+
+      if (y !== -1) {
+        return {
+          x,
+          y
+        };
+      }
+    }
+
+    throw new Error('Cell not found in table.');
+  }
+
+  getCellNodeFromCords(x, y) {
+    if (!this.__grid) {
+      throw Error(`Grid not found.`);
+    }
+
+    const {
+      cells
+    } = this.__grid;
+    const row = cells[x];
+
+    if (row == null) {
+      throw new Error(`Table row x:"${x}" not found.`);
+    }
+
+    const cell = row[y];
+
+    if (cell == null) {
+      throw new Error(`Table cell y:"${y}" in row x:"${x}" not found.`);
+    }
+
+    const node = lexical.$getNearestNodeFromDOMNode(cell.elem);
+
+    if ($isTableCellNode(node)) {
+      return node;
+    }
+
+    throw new Error('Node at cords not TableCellNode.');
+  }
+
+  setGrid(grid) {
+    const self = this.getWritable();
+    self.__grid = grid;
+  }
+
+  getGrid() {
+    return this.__grid;
+  }
+
+  canSelectBefore() {
+    return true;
+  }
+
+}
+function $createTableNode() {
+  return new TableNode();
+}
+function $isTableNode(node) {
+  return node instanceof TableNode;
+}
+
+/**
+ * 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.
+ *
+ * 
+ */
+class TableRowNode extends lexical.ElementNode {
+  static getType() {
+    return 'table-row';
+  }
+
+  static clone(node) {
+    return new TableRowNode(node.__key);
+  }
+
+  constructor(key) {
+    super(key);
+  }
+
+  createDOM(config) {
+    const element = document.createElement('tr');
+    addClassNamesToElement(element, config.theme.tableRow);
+    return element;
+  }
+
+  updateDOM() {
+    return false;
+  }
+
+  canBeEmpty() {
+    return false;
+  }
+
+}
+function $createTableRowNode() {
+  return new TableRowNode();
+}
+function $isTableRowNode(node) {
+  return node instanceof TableRowNode;
+}
+
+/**
+ * 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 $createTableNodeWithDimensions(rowCount, columnCount, includeHeader = true) {
+  const tableNode = $createTableNode();
+
+  for (let iRow = 0; iRow < rowCount; iRow++) {
+    const tableRowNode = $createTableRowNode();
+
+    for (let iColumn = 0; iColumn < columnCount; iColumn++) {
+      const tableCellNode = $createTableCellNode(iRow === 0 && includeHeader);
+      const paragraphNode = lexical.$createParagraphNode();
+      paragraphNode.append(lexical.$createTextNode());
+      tableCellNode.append(paragraphNode);
+      tableRowNode.append(tableCellNode);
+    }
+
+    tableNode.append(tableRowNode);
+  }
+
+  return tableNode;
+}
+function $getTableCellNodeFromLexicalNode(startingNode) {
+  const node = $findMatchingParent(startingNode, n => $isTableCellNode(n));
+
+  if ($isTableCellNode(node)) {
+    return node;
+  }
+
+  return null;
+}
+function $getTableRowNodeFromTableCellNodeOrThrow(startingNode) {
+  const node = $findMatchingParent(startingNode, n => $isTableRowNode(n));
+
+  if ($isTableRowNode(node)) {
+    return node;
+  }
+
+  throw new Error('Expected table cell to be inside of table row.');
+}
+function $getTableNodeFromLexicalNodeOrThrow(startingNode) {
+  const node = $findMatchingParent(startingNode, n => $isTableNode(n));
+
+  if ($isTableNode(node)) {
+    return node;
+  }
+
+  throw new Error('Expected table cell to be inside of table.');
+}
+function $getTableRowIndexFromTableCellNode(tableCellNode) {
+  const tableRowNode = $getTableRowNodeFromTableCellNodeOrThrow(tableCellNode);
+  const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableRowNode);
+  return tableNode.getChildren().findIndex(n => n.is(tableRowNode));
+}
+function $getTableColumnIndexFromTableCellNode(tableCellNode) {
+  const tableRowNode = $getTableRowNodeFromTableCellNodeOrThrow(tableCellNode);
+  return tableRowNode.getChildren().findIndex(n => n.is(tableCellNode));
+}
+function $removeTableRowAtIndex(tableNode, indexToDelete) {
+  const tableRows = tableNode.getChildren();
+
+  if (indexToDelete >= tableRows.length || indexToDelete < 0) {
+    throw new Error('Expected table cell to be inside of table row.');
+  }
+
+  const targetRowNode = tableRows[indexToDelete];
+  targetRowNode.remove();
+  return tableNode;
+}
+function $insertTableRow(tableNode, targetIndex, shouldInsertAfter = true, rowCount) {
+  const tableRows = tableNode.getChildren();
+
+  if (targetIndex >= tableRows.length || targetIndex < 0) {
+    throw new Error('Table row target index out of range');
+  }
+
+  const targetRowNode = tableRows[targetIndex];
+
+  if ($isTableRowNode(targetRowNode)) {
+    for (let i = 0; i < rowCount; i++) {
+      const tableColumnCount = targetRowNode.getChildren().length;
+      const newTableRowNode = $createTableRowNode();
+
+      for (let j = 0; j < tableColumnCount; j++) {
+        const tableCellNode = $createTableCellNode(false);
+        tableCellNode.append(lexical.$createTextNode());
+        newTableRowNode.append(tableCellNode);
+      }
+
+      if (shouldInsertAfter) {
+        targetRowNode.insertAfter(newTableRowNode);
+      } else {
+        targetRowNode.insertBefore(newTableRowNode);
+      }
+    }
+  } else {
+    throw new Error('Row before insertion index does not exist.');
+  }
+
+  return tableNode;
+}
+function $insertTableColumn(tableNode, targetIndex, shouldInsertAfter = true, columnCount) {
+  const tableRows = tableNode.getChildren();
+
+  for (let i = 0; i < tableRows.length; i++) {
+    const currentTableRowNode = tableRows[i];
+
+    if ($isTableRowNode(currentTableRowNode)) {
+      for (let j = 0; j < columnCount; j++) {
+        const newTableCell = $createTableCellNode(i === 0);
+        newTableCell.append(lexical.$createTextNode());
+        const tableRowChildren = currentTableRowNode.getChildren();
+
+        if (targetIndex >= tableRowChildren.length || targetIndex < 0) {
+          throw new Error('Table column target index out of range');
+        }
+
+        const targetCell = tableRowChildren[targetIndex];
+
+        if (shouldInsertAfter) {
+          targetCell.insertAfter(newTableCell);
+        } else {
+          targetCell.insertBefore(newTableCell);
+        }
+      }
+    }
+  }
+
+  return tableNode;
+}
+function $deleteTableColumn(tableNode, targetIndex) {
+  const tableRows = tableNode.getChildren();
+
+  for (let i = 0; i < tableRows.length; i++) {
+    const currentTableRowNode = tableRows[i];
+
+    if ($isTableRowNode(currentTableRowNode)) {
+      const tableRowChildren = currentTableRowNode.getChildren();
+
+      if (targetIndex >= tableRowChildren.length || targetIndex < 0) {
+        throw new Error('Table column target index out of range');
+      }
+
+      tableRowChildren[targetIndex].remove();
+    }
+  }
+
+  return tableNode;
+}
+
+exports.$createTableCellNode = $createTableCellNode;
+exports.$createTableNode = $createTableNode;
+exports.$createTableNodeWithDimensions = $createTableNodeWithDimensions;
+exports.$createTableRowNode = $createTableRowNode;
+exports.$deleteTableColumn = $deleteTableColumn;
+exports.$getTableCellNodeFromLexicalNode = $getTableCellNodeFromLexicalNode;
+exports.$getTableColumnIndexFromTableCellNode = $getTableColumnIndexFromTableCellNode;
+exports.$getTableNodeFromLexicalNodeOrThrow = $getTableNodeFromLexicalNodeOrThrow;
+exports.$getTableRowIndexFromTableCellNode = $getTableRowIndexFromTableCellNode;
+exports.$getTableRowNodeFromTableCellNodeOrThrow = $getTableRowNodeFromTableCellNodeOrThrow;
+exports.$insertTableColumn = $insertTableColumn;
+exports.$insertTableRow = $insertTableRow;
+exports.$isTableCellNode = $isTableCellNode;
+exports.$isTableNode = $isTableNode;
+exports.$isTableRowNode = $isTableRowNode;
+exports.$removeTableRowAtIndex = $removeTableRowAtIndex;
+exports.TableCellNode = TableCellNode;
+exports.TableNode = TableNode;
+exports.TableRowNode = TableRowNode;

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

package/LexicalTable.prod.js

@@ -0,0 +1,29 @@
+/**
+ * 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.
+ */
+var q=require("lexical");function x(a,...b){b.forEach(c=>{null!=c&&"string"===typeof c&&a.classList.add(...c.split(" "))})}
+class y extends q.ElementNode{static getType(){return"table-cell"}static clone(a){return new y(!1,a.__key)}constructor(a=!1,b){super(b);this.__isHeader=a}getTag(){return this.__isHeader?"th":"td"}createDOM(a){const b=document.createElement(this.getTag());x(b,a.theme.tableCell,!0===this.__isHeader&&a.theme.tableCellHeader);return b}updateDOM(){return!1}collapseAtStart(){return!0}canBeEmpty(){return!1}}function z(a){return new y(a)}function B(a){return a instanceof y}
+function C(a){throw Error(`Minified Lexical error #${a}; see codes.json for the full message or `+"use the non-minified dev environment for full errors and additional helpful warnings.");}function D(a,b){for(;a!==q.$getRoot()&&null!=a;){if(b(a))return a;a=a.getParent()}return null}const F=document.createElement("style");F.appendChild(document.createTextNode("::selection{background-color: transparent}"));
+function G(a){for(;null!=a;){const b=a.nodeName;if("TD"===b||"TH"===b){a=a._cell;if(void 0===a)break;return a}a=a.parentNode}return null}
+function H(a,b,c){const g=[],d={cells:g,columns:0,rows:0};(new MutationObserver(n=>{c.update(()=>{var e=b.firstChild;let p=0,m=0;var h=!1;for(let r=0;r<n.length;r++){const w=n[r].target.nodeName;if("TABLE"===w||"TR"===w){h=!0;break}}if(h){for(g.length=0;null!=e;){h=e.nodeName;if("TD"===h||"TH"===h)h={elem:e,highlighted:!1,x:p,y:m},e._cell=h,void 0===g[m]&&(g[m]=[]),g[m][p]=h;else if(h=e.firstChild,null!=h){e=h;continue}h=e.nextSibling;if(null!=h)p++,e=h;else if(h=e.parentNode,null!=h){e=h.nextSibling;
+if(null==e)break;m++;p=0}}d.columns=p+1;d.rows=m+1;a.setGrid(d)}})})).observe(b,{childList:!0,subtree:!0});a.setGrid(d);return d}
+function I(a,b,c,g,d){const n=[];for(let e=0;e<d.length;e++){const p=d[e];for(let m=0;m<p.length;m++){const h=p[m],r=h.elem.style;m>=a&&m<=b&&e>=c&&e<=g?(h.highlighted||(h.highlighted=!0,r.setProperty("background-color","rgb(163, 187, 255)"),r.setProperty("caret-color","transparent")),n.push(h)):h.highlighted&&(h.highlighted=!1,r.removeProperty("background-color"),r.removeProperty("caret-color"))}}return n}
+function J(a,b,c){if(null!==c.getRootElement()){H(a,b,c);var g=a.getGrid(),d=!1,n=!1,e=-1,p=-1,m=-1,h=-1,r=[];if(null==g)throw Error("Table grid not found.");b.addEventListener("mousemove",k=>{if(d){var f=G(k.target);if(null!==f){const l=f.x;f=f.y;if(!n&&(e!==l||p!==f))k.preventDefault(),k=window.getSelection(),k.setBaseAndExtent(k.anchorNode,0,k.anchorNode,0),n=!0,document.body&&document.body.appendChild(F),null===A&&(A=c.addListener("command",(u,v)=>{if("deleteCharacter"===u){if(r.length===g.columns*
+g.rows)return a.selectPrevious(),a.remove(),w(),!0;r.forEach(({elem:t})=>{t=q.$getNearestNodeFromDOMNode(t);if(q.$isElementNode(t)){t.clear();const E=q.$createParagraphNode(),T=q.$createTextNode();E.append(T);t.append(E)}});a.setSelectionState(null);q.$setSelection(null);return!0}if("formatText"===u)return U(v),!0;"insertText"===u&&w();return!1},1));else if(l===m&&f===h)return;m=l;h=f;if(n){const u=Math.min(e,m),v=Math.max(e,m),t=Math.min(p,h),E=Math.max(p,h);c.update(()=>{r=a.setSelectionState({fromX:u,
+fromY:t,toX:v,toY:E})})}}}});var w=()=>{c.update(()=>{d=n=!1;h=m=p=e=-1;c.update(()=>{a.setSelectionState(null)});r=[];null!==A&&(A(),A=null);const k=F.parentNode;null!=k&&k.removeChild(F)})};b.addEventListener("mouseleave",()=>{});var U=k=>{let f=q.$getSelection();null===f&&(f=q.$createRangeSelection());const l=f,u=l.anchor,v=l.focus;r.forEach(t=>{t=q.$getNearestNodeFromDOMNode(t.elem);q.$isElementNode(t)&&(u.set(t.getKey(),0,"element"),v.set(t.getKey(),t.getChildrenSize(),"element"),l.formatText(k))});
+f.anchor.set(f.anchor.key,f.anchor.offset,f.anchor.type);f.focus.set(f.anchor.key,f.anchor.offset,f.anchor.type);q.$setSelection(f)},A=null;b.addEventListener("mousedown",k=>{d?n&&w():setTimeout(()=>{n&&w();const f=G(k.target);null!==f&&(d=!0,e=f.x,p=f.y,document.addEventListener("mouseup",()=>{d=!1},{capture:!0,once:!0}))},0)});window.addEventListener("click",k=>{0<r.length&&!b.contains(k.target)&&c.update(()=>{a.setSelectionState(null)})});var O=(k,f,l)=>{switch(l){case "backward":case "forward":return l=
+"forward"===l,f!==(l?g.columns-1:0)?a.getCellNodeFromCords(k,f+(l?1:-1)).select():k!==(l?g.rows-1:0)?a.getCellNodeFromCords(k+(l?1:-1),l?0:g.columns-1).select():l?a.selectNext():a.selectPrevious(),!0;case "up":return 0!==k?a.getCellNodeFromCords(k-1,f).select():a.selectPrevious(),!0;case "down":return k!==g.rows-1?a.getCellNodeFromCords(k+1,f).select():a.selectNext(),!0}return!1};c.addListener("command",(k,f)=>{var l=q.$getSelection();if(null==l)return!1;const u=D(l.anchor.getNode(),v=>B(v));if(!B(u))return!1;
+if("deleteCharacter"===k&&0===r.length&&l.isCollapsed()&&0===l.anchor.offset)return!0;if(("indentContent"===k||"outdentContent"===k)&&l.isCollapsed()&&0===r.length)return f=a.getCordsFromCellNode(u),O(f.x,f.y,"indentContent"===k?"forward":"backward"),!0;if(("keyArrowDown"===k||"keyArrowUp"===k)&&l.isCollapsed()&&0===r.length){const v=a.getCordsFromCellNode(u);l=D(l.anchor.getNode(),t=>q.$isElementNode(t));if("keyArrowUp"===k&&l===u.getFirstChild()||"keyArrowDown"===k&&l===u.getLastChild())return f.preventDefault(),
+f.stopImmediatePropagation(),O(v.x,v.y,"keyArrowUp"===k?"up":"down"),!0}return!1},4)}}
+class K extends q.ElementNode{static getType(){return"table"}static clone(a){return new K(a.__key,a.__selectionShape,a.__grid)}constructor(a,b,c){super(a);this.__selectionShape=b;this.__grid=c}createDOM(a,b){const c=document.createElement("table");x(c,a.theme.table);J(this,c,b);return c}updateDOM(){return!1}canExtractContents(){return!1}canBeEmpty(){return!1}setSelectionState(a){this.getWritable().__selectionShape=a;return null==this.__grid?[]:a?I(a.fromX,a.toX,a.fromY,a.toY,this.__grid.cells):I(-1,
+-1,-1,-1,this.__grid.cells)}getSelectionState(){return this.__selectionShape}getCordsFromCellNode(a){this.__grid||C(55);const {rows:b,cells:c}=this.__grid;for(let d=0;d<b;d++){var g=c[d];if(null==g)throw Error(`Row not found at x:${d}`);g=g.findIndex(({elem:n})=>q.$getNearestNodeFromDOMNode(n)===a);if(-1!==g)return{x:d,y:g}}throw Error("Cell not found in table.");}getCellNodeFromCords(a,b){this.__grid||C(55);var {cells:c}=this.__grid;c=c[a];if(null==c)throw Error(`Table row x:"${a}" not found.`);
+c=c[b];if(null==c)throw Error(`Table cell y:"${b}" in row x:"${a}" not found.`);a=q.$getNearestNodeFromDOMNode(c.elem);if(B(a))return a;throw Error("Node at cords not TableCellNode.");}setGrid(a){this.getWritable().__grid=a}getGrid(){return this.__grid}canSelectBefore(){return!0}}function L(){return new K}function M(a){return a instanceof K}
+class N extends q.ElementNode{static getType(){return"table-row"}static clone(a){return new N(a.__key)}constructor(a){super(a)}createDOM(a){const b=document.createElement("tr");x(b,a.theme.tableRow);return b}updateDOM(){return!1}canBeEmpty(){return!1}}function P(){return new N}function Q(a){return a instanceof N}function R(a){a=D(a,b=>Q(b));if(Q(a))return a;throw Error("Expected table cell to be inside of table row.");}
+function S(a){a=D(a,b=>M(b));if(M(a))return a;throw Error("Expected table cell to be inside of table.");}exports.$createTableCellNode=z;exports.$createTableNode=L;exports.$createTableNodeWithDimensions=function(a,b,c=!0){const g=L();for(let d=0;d<a;d++){const n=P();for(let e=0;e<b;e++){const p=z(0===d&&c),m=q.$createParagraphNode();m.append(q.$createTextNode());p.append(m);n.append(p)}g.append(n)}return g};exports.$createTableRowNode=P;
+exports.$deleteTableColumn=function(a,b){const c=a.getChildren();for(let d=0;d<c.length;d++){var g=c[d];if(Q(g)){g=g.getChildren();if(b>=g.length||0>b)throw Error("Table column target index out of range");g[b].remove()}}return a};exports.$getTableCellNodeFromLexicalNode=function(a){a=D(a,b=>B(b));return B(a)?a:null};exports.$getTableColumnIndexFromTableCellNode=function(a){return R(a).getChildren().findIndex(b=>b.is(a))};exports.$getTableNodeFromLexicalNodeOrThrow=S;
+exports.$getTableRowIndexFromTableCellNode=function(a){const b=R(a);return S(b).getChildren().findIndex(c=>c.is(b))};exports.$getTableRowNodeFromTableCellNodeOrThrow=R;exports.$insertTableColumn=function(a,b,c=!0,g){const d=a.getChildren();for(let e=0;e<d.length;e++){const p=d[e];if(Q(p))for(let m=0;m<g;m++){const h=z(0===e);h.append(q.$createTextNode());var n=p.getChildren();if(b>=n.length||0>b)throw Error("Table column target index out of range");n=n[b];c?n.insertAfter(h):n.insertBefore(h)}}return a};
+exports.$insertTableRow=function(a,b,c=!0,g){var d=a.getChildren();if(b>=d.length||0>b)throw Error("Table row target index out of range");b=d[b];if(Q(b))for(d=0;d<g;d++){const n=b.getChildren().length,e=P();for(let p=0;p<n;p++){const m=z(!1);m.append(q.$createTextNode());e.append(m)}c?b.insertAfter(e):b.insertBefore(e)}else throw Error("Row before insertion index does not exist.");return a};exports.$isTableCellNode=B;exports.$isTableNode=M;exports.$isTableRowNode=Q;
+exports.$removeTableRowAtIndex=function(a,b){const c=a.getChildren();if(b>=c.length||0>b)throw Error("Expected table cell to be inside of table row.");c[b].remove();return a};exports.TableCellNode=y;exports.TableNode=K;exports.TableRowNode=N;

package/README.md

@@ -0,0 +1,5 @@
+# `@lexical/table`
+
+This package contains the functionality for the Tables feature of Lexical.
+
+More documentation coming soon.

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@lexical/table",
+  "author": {
+    "name": "Dominic Gannaway",
+    "email": "dg@domgan.com"
+  },
+  "description": "This package provides the Table feature for Lexical.",
+  "keywords": [
+    "lexical",
+    "editor",
+    "rich-text",
+    "table"
+  ],
+  "license": "MIT",
+  "version": "0.1.9",
+  "main": "LexicalTable.js",
+  "peerDependencies": {
+    "lexical": "0.1.9"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/facebook/lexical",
+    "directory": "packages/lexical-table"
+  }
+}