@lexical/table 0.20.1-nightly.20241112.0 → 0.20.1-nightly.20241114.0

package/LexicalTable.dev.js

@@ -1429,6 +1429,20 @@ function $getChildrenRecursively(node) {
  *
  */
 
+function $getTableAndElementByKey(tableNodeKey, editor = lexical.$getEditor()) {
+  const tableNode = lexical.$getNodeByKey(tableNodeKey);
+  if (!$isTableNode(tableNode)) {
+    throw Error(`TableObserver: Expected tableNodeKey ${tableNodeKey} to be a TableNode`);
+  }
+  const tableElement = getTableElement(tableNode, editor.getElementByKey(tableNodeKey));
+  if (!(tableElement !== null)) {
+    throw Error(`TableObserver: Expected to find TableElement in DOM for key ${tableNodeKey}`);
+  }
+  return {
+    tableElement,
+    tableNode
+  };
+}
 class TableObserver {
   constructor(editor, tableNodeKey) {
     this.isHighlightingCells = false;
@@ -1450,12 +1464,13 @@ class TableObserver {
     this.anchorCell = null;
     this.focusCell = null;
     this.hasHijackedSelectionStyles = false;
-    this.trackTable();
     this.isSelecting = false;
+    this.shouldCheckSelection = false;
     this.abortController = new AbortController();
     this.listenerOptions = {
       signal: this.abortController.signal
     };
+    this.trackTable();
   }
   getTable() {
     return this.table;
@@ -1465,9 +1480,12 @@ class TableObserver {
     Array.from(this.listenersToRemove).forEach(removeListener => removeListener());
     this.listenersToRemove.clear();
   }
+  $lookup() {
+    return $getTableAndElementByKey(this.tableNodeKey, this.editor);
+  }
   trackTable() {
     const observer = new MutationObserver(records => {
-      this.editor.update(() => {
+      this.editor.getEditorState().read(() => {
         let gridNeedsRedraw = false;
         for (let i = 0; i < records.length; i++) {
           const record = records[i];
@@ -1481,24 +1499,28 @@ class TableObserver {
         if (!gridNeedsRedraw) {
           return;
         }
-        const tableElement = this.editor.getElementByKey(this.tableNodeKey);
-        if (!tableElement) {
-          throw new Error('Expected to find TableElement in DOM');
-        }
-        this.table = getTable(tableElement);
+        const {
+          tableNode,
+          tableElement
+        } = this.$lookup();
+        this.table = getTable(tableNode, tableElement);
+      }, {
+        editor: this.editor
       });
     });
-    this.editor.update(() => {
-      const tableElement = this.editor.getElementByKey(this.tableNodeKey);
-      if (!tableElement) {
-        throw new Error('Expected to find TableElement in DOM');
-      }
-      this.table = getTable(tableElement);
+    this.editor.getEditorState().read(() => {
+      const {
+        tableNode,
+        tableElement
+      } = this.$lookup();
+      this.table = getTable(tableNode, tableElement);
       observer.observe(tableElement, {
         attributes: true,
         childList: true,
         subtree: true
       });
+    }, {
+      editor: this.editor
     });
   }
   clearHighlight() {
@@ -1516,15 +1538,11 @@ class TableObserver {
     this.hasHijackedSelectionStyles = false;
     this.enableHighlightStyle();
     editor.update(() => {
-      const tableNode = lexical.$getNodeByKey(this.tableNodeKey);
-      if (!$isTableNode(tableNode)) {
-        throw new Error('Expected TableNode.');
-      }
-      const tableElement = editor.getElementByKey(this.tableNodeKey);
-      if (!tableElement) {
-        throw new Error('Expected to find TableElement in DOM');
-      }
-      const grid = getTable(tableElement);
+      const {
+        tableNode,
+        tableElement
+      } = this.$lookup();
+      const grid = getTable(tableNode, tableElement);
       $updateDOMForSelection(editor, grid, null);
       lexical.$setSelection(null);
       editor.dispatchCommand(lexical.SELECTION_CHANGE_COMMAND, undefined);
@@ -1532,25 +1550,27 @@ class TableObserver {
   }
   enableHighlightStyle() {
     const editor = this.editor;
-    editor.update(() => {
-      const tableElement = editor.getElementByKey(this.tableNodeKey);
-      if (!tableElement) {
-        throw new Error('Expected to find TableElement in DOM');
-      }
+    editor.getEditorState().read(() => {
+      const {
+        tableElement
+      } = this.$lookup();
       utils.removeClassNamesFromElement(tableElement, editor._config.theme.tableSelection);
       tableElement.classList.remove('disable-selection');
       this.hasHijackedSelectionStyles = false;
+    }, {
+      editor
     });
   }
   disableHighlightStyle() {
     const editor = this.editor;
-    editor.update(() => {
-      const tableElement = editor.getElementByKey(this.tableNodeKey);
-      if (!tableElement) {
-        throw new Error('Expected to find TableElement in DOM');
-      }
+    editor.getEditorState().read(() => {
+      const {
+        tableElement
+      } = this.$lookup();
       utils.addClassNamesToElement(tableElement, editor._config.theme.tableSelection);
       this.hasHijackedSelectionStyles = true;
+    }, {
+      editor
     });
   }
   updateTableTableSelection(selection) {
@@ -1567,17 +1587,35 @@ class TableObserver {
       this.updateTableTableSelection(selection);
     }
   }
+
+  /**
+   * @internal
+   * Firefox has a strange behavior where pressing the down arrow key from
+   * above the table will move the caret after the table and then lexical
+   * will select the last cell instead of the first.
+   * We do still want to let the browser handle caret movement but we will
+   * use this property to "tag" the update so that we can recheck the
+   * selection after the event is processed.
+   */
+  setShouldCheckSelection() {
+    this.shouldCheckSelection = true;
+  }
+  /**
+   * @internal
+   */
+  getAndClearShouldCheckSelection() {
+    if (this.shouldCheckSelection) {
+      this.shouldCheckSelection = false;
+      return true;
+    }
+    return false;
+  }
   setFocusCellForSelection(cell, ignoreStart = false) {
     const editor = this.editor;
     editor.update(() => {
-      const tableNode = lexical.$getNodeByKey(this.tableNodeKey);
-      if (!$isTableNode(tableNode)) {
-        throw new Error('Expected TableNode.');
-      }
-      const tableElement = editor.getElementByKey(this.tableNodeKey);
-      if (!tableElement) {
-        throw new Error('Expected to find TableElement in DOM');
-      }
+      const {
+        tableNode
+      } = this.$lookup();
       const cellX = cell.x;
       const cellY = cell.y;
       this.focusCell = cell;
@@ -1702,15 +1740,26 @@ const getDOMSelection = targetWindow => CAN_USE_DOM ? (targetWindow || window).g
 const isMouseDownOnEvent = event => {
   return (event.buttons & 1) === 1;
 };
-function applyTableHandlers(tableNode, tableElement, editor, hasTabHandler) {
+function getTableElement(tableNode, dom) {
+  if (!dom) {
+    return dom;
+  }
+  const element = dom.nodeName === 'TABLE' ? dom : tableNode.getDOMSlot(dom).element;
+  if (!(element.nodeName === 'TABLE')) {
+    throw Error(`getTableElement: Expecting table in as DOM node for TableNode, not ${dom.nodeName}`);
+  }
+  return element;
+}
+function applyTableHandlers(tableNode, element, editor, hasTabHandler) {
   const rootElement = editor.getRootElement();
   if (rootElement === null) {
     throw new Error('No root element.');
   }
   const tableObserver = new TableObserver(editor, tableNode.getKey());
   const editorWindow = editor._window || window;
+  const tableElement = getTableElement(tableNode, element);
   attachTableObserverToTableElement(tableElement, tableObserver);
-  tableObserver.listenersToRemove.add(() => deatatchTableObserverFromTableElement(tableElement, tableObserver));
+  tableObserver.listenersToRemove.add(() => detatchTableObserverFromTableElement(tableElement, tableObserver));
   const createMouseHandlers = () => {
     const onMouseUp = () => {
       tableObserver.isSelecting = false;
@@ -2052,6 +2101,21 @@ function applyTableHandlers(tableNode, tableElement, editor, hasTabHandler) {
   tableObserver.listenersToRemove.add(editor.registerCommand(lexical.SELECTION_CHANGE_COMMAND, () => {
     const selection = lexical.$getSelection();
     const prevSelection = lexical.$getPreviousSelection();
+    // If they pressed the down arrow with the selection outside of the
+    // table, and then the selection ends up in the table but not in the
+    // first cell, then move the selection to the first cell.
+    if (tableObserver.getAndClearShouldCheckSelection() && lexical.$isRangeSelection(prevSelection) && lexical.$isRangeSelection(selection) && selection.isCollapsed()) {
+      const anchor = selection.anchor.getNode();
+      const firstRow = tableNode.getFirstChild();
+      const anchorCell = $findCellNode(anchor);
+      if (anchorCell !== null && $isTableRowNode(firstRow)) {
+        const firstCell = firstRow.getFirstChild();
+        if ($isTableCellNode(firstCell) && !utils.$findMatchingParent(anchorCell, node => node.is(firstCell))) {
+          firstCell.selectStart();
+          return true;
+        }
+      }
+    }
     if (lexical.$isRangeSelection(selection)) {
       const {
         anchor,
@@ -2155,7 +2219,7 @@ function applyTableHandlers(tableNode, tableElement, editor, hasTabHandler) {
   }, lexical.COMMAND_PRIORITY_CRITICAL));
   return tableObserver;
 }
-function deatatchTableObserverFromTableElement(tableElement, tableObserver) {
+function detatchTableObserverFromTableElement(tableElement, tableObserver) {
   if (getTableObserverFromTableElement(tableElement) === tableObserver) {
     delete tableElement[LEXICAL_ELEMENT_KEY];
   }
@@ -2185,7 +2249,8 @@ function getDOMCellFromTarget(node) {
   }
   return null;
 }
-function getTable(tableElement) {
+function getTable(tableNode, dom) {
+  const tableElement = getTableElement(tableNode, dom);
   const domRows = [];
   const grid = {
     columns: 0,
@@ -2527,6 +2592,10 @@ function $handleArrowKey(editor, event, direction, tableNode, tableObserver) {
         }
       }
     }
+    if (direction === 'down' && $isScrollableTablesActive(editor)) {
+      // Enable Firefox workaround
+      tableObserver.setShouldCheckSelection();
+    }
     return false;
   }
   if (lexical.$isRangeSelection(selection) && selection.isCollapsed()) {
@@ -2541,9 +2610,9 @@ function $handleArrowKey(editor, event, direction, tableNode, tableObserver) {
     }
     const anchorCellTable = $findTableNode(anchorCellNode);
     if (anchorCellTable !== tableNode && anchorCellTable != null) {
-      const anchorCellTableElement = editor.getElementByKey(anchorCellTable.getKey());
+      const anchorCellTableElement = getTableElement(anchorCellTable, editor.getElementByKey(anchorCellTable.getKey()));
       if (anchorCellTableElement != null) {
-        tableObserver.table = getTable(anchorCellTableElement);
+        tableObserver.table = getTable(anchorCellTable, anchorCellTableElement);
         return $handleArrowKey(editor, event, direction, anchorCellTable, tableObserver);
       }
     }
@@ -2609,12 +2678,15 @@ function $handleArrowKey(editor, event, direction, tableNode, tableObserver) {
     const anchorCellNode = utils.$findMatchingParent(anchor.getNode(), $isTableCellNode);
     const focusCellNode = utils.$findMatchingParent(focus.getNode(), $isTableCellNode);
     const [tableNodeFromSelection] = selection.getNodes();
-    const tableElement = editor.getElementByKey(tableNodeFromSelection.getKey());
+    if (!$isTableNode(tableNodeFromSelection)) {
+      throw Error(`$handleArrowKey: TableSelection.getNodes()[0] expected to be TableNode`);
+    }
+    const tableElement = getTableElement(tableNodeFromSelection, editor.getElementByKey(tableNodeFromSelection.getKey()));
     if (!$isTableCellNode(anchorCellNode) || !$isTableCellNode(focusCellNode) || !$isTableNode(tableNodeFromSelection) || tableElement == null) {
       return false;
     }
     tableObserver.updateTableTableSelection(selection);
-    const grid = getTable(tableElement);
+    const grid = getTable(tableNodeFromSelection, tableElement);
     const cordsAnchor = tableNode.getCordsFromCellNode(anchorCellNode, grid);
     const anchorCell = tableNode.getDOMCellFromCordsOrThrow(cordsAnchor.x, cordsAnchor.y, grid);
     tableObserver.setAnchorCellForSelection(anchorCell);
@@ -2710,14 +2782,21 @@ function $getTableEdgeCursorPosition(editor, selection, tableNode) {
   if (!tableNodeParent) {
     return undefined;
   }
-  const tableNodeParentDOM = editor.getElementByKey(tableNodeParent.getKey());
-  if (!tableNodeParentDOM) {
-    return undefined;
-  }
 
   // TODO: Add support for nested tables
   const domSelection = window.getSelection();
-  if (!domSelection || domSelection.anchorNode !== tableNodeParentDOM) {
+  if (!domSelection) {
+    return undefined;
+  }
+  const domAnchorNode = domSelection.anchorNode;
+  const tableNodeParentDOM = editor.getElementByKey(tableNodeParent.getKey());
+  const tableElement = getTableElement(tableNode, editor.getElementByKey(tableNode.getKey()));
+  // We are only interested in the scenario where the
+  // native selection anchor is:
+  // - at or inside the table's parent DOM
+  // - and NOT at or inside the table DOM
+  // It may be adjacent to the table DOM (e.g. in a wrapper)
+  if (!domAnchorNode || !tableNodeParentDOM || !tableElement || !tableNodeParentDOM.contains(domAnchorNode) || tableElement.contains(domAnchorNode)) {
     return undefined;
   }
   const anchorCellNode = utils.$findMatchingParent(selection.anchor.getNode(), n => $isTableCellNode(n));
@@ -2779,6 +2858,20 @@ function setRowStriping(dom, config, rowStriping) {
     dom.removeAttribute('data-lexical-row-striping');
   }
 }
+const scrollableEditors = new WeakSet();
+function $isScrollableTablesActive(editor = lexical.$getEditor()) {
+  return scrollableEditors.has(editor);
+}
+function setScrollableTablesActive(editor, active) {
+  if (active) {
+    if (!editor._config.theme.tableScrollableWrapper) {
+      console.warn('TableNode: hasHorizontalScroll is active but theme.tableScrollableWrapper is not defined.');
+    }
+    scrollableEditors.add(editor);
+  } else {
+    scrollableEditors.delete(editor);
+  }
+}
 
 /** @noInheritDoc */
 class TableNode extends lexical.ElementNode {
@@ -2832,15 +2925,34 @@ class TableNode extends lexical.ElementNode {
       version: 1
     };
   }
+  getDOMSlot(element) {
+    const tableElement = element.nodeName !== 'TABLE' && element.querySelector('table') || element;
+    if (!(tableElement.nodeName === 'TABLE')) {
+      throw Error(`TableNode.getDOMSlot: createDOM() did not return a table`);
+    }
+    return super.getDOMSlot(tableElement).withAfter(tableElement.querySelector('colgroup'));
+  }
   createDOM(config, editor) {
     const tableElement = document.createElement('table');
     const colGroup = document.createElement('colgroup');
     tableElement.appendChild(colGroup);
     updateColgroup(tableElement, config, this.getColumnCount(), this.getColWidths());
+    lexical.setDOMUnmanaged(colGroup);
     utils.addClassNamesToElement(tableElement, config.theme.table);
     if (this.__rowStriping) {
       setRowStriping(tableElement, config, true);
     }
+    if ($isScrollableTablesActive(editor)) {
+      const wrapperElement = document.createElement('div');
+      const classes = config.theme.tableScrollableWrapper;
+      if (classes) {
+        utils.addClassNamesToElement(wrapperElement, classes);
+      } else {
+        wrapperElement.style.cssText = 'overflow-x: auto;';
+      }
+      wrapperElement.appendChild(tableElement);
+      return wrapperElement;
+    }
     return tableElement;
   }
   updateDOM(prevNode, dom, config) {
@@ -2854,19 +2966,20 @@ class TableNode extends lexical.ElementNode {
     return {
       ...super.exportDOM(editor),
       after: tableElement => {
-        if (tableElement) {
-          const newElement = tableElement.cloneNode();
-          const colGroup = document.createElement('colgroup');
+        if (tableElement && utils.isHTMLElement(tableElement) && tableElement.nodeName !== 'TABLE') {
+          tableElement = tableElement.querySelector('table');
+        }
+        if (!tableElement || !utils.isHTMLElement(tableElement)) {
+          return null;
+        }
+        // Wrap direct descendant rows in a tbody for export
+        const rows = tableElement.querySelectorAll(':scope > tr');
+        if (rows.length > 0) {
           const tBody = document.createElement('tbody');
-          if (utils.isHTMLElement(tableElement)) {
-            const cols = tableElement.querySelectorAll('col');
-            colGroup.append(...cols);
-            const rows = tableElement.querySelectorAll('tr');
-            tBody.append(...rows);
-          }
-          newElement.replaceChildren(colGroup, tBody);
-          return newElement;
+          tBody.append(...rows);
+          tableElement.append(tBody);
         }
+        return tableElement;
       }
     };
   }
@@ -2973,10 +3086,10 @@ class TableNode extends lexical.ElementNode {
 }
 function $getElementForTableNode(editor, tableNode) {
   const tableElement = editor.getElementByKey(tableNode.getKey());
-  if (tableElement == null) {
-    throw new Error('Table Element Not Found');
+  if (!(tableElement !== null)) {
+    throw Error(`$getElementForTableNode: Table Element Not Found`);
   }
-  return getTable(tableElement);
+  return getTable(tableNode, tableElement);
 }
 function $convertTableElement(domNode) {
   const tableNode = $createTableNode();
@@ -3023,6 +3136,7 @@ exports.$findCellNode = $findCellNode;
 exports.$findTableNode = $findTableNode;
 exports.$getElementForTableNode = $getElementForTableNode;
 exports.$getNodeTriplet = $getNodeTriplet;
+exports.$getTableAndElementByKey = $getTableAndElementByKey;
 exports.$getTableCellNodeFromLexicalNode = $getTableCellNodeFromLexicalNode;
 exports.$getTableCellNodeRect = $getTableCellNodeRect;
 exports.$getTableColumnIndexFromTableCellNode = $getTableColumnIndexFromTableCellNode;
@@ -3033,6 +3147,7 @@ exports.$insertTableColumn = $insertTableColumn;
 exports.$insertTableColumn__EXPERIMENTAL = $insertTableColumn__EXPERIMENTAL;
 exports.$insertTableRow = $insertTableRow;
 exports.$insertTableRow__EXPERIMENTAL = $insertTableRow__EXPERIMENTAL;
+exports.$isScrollableTablesActive = $isScrollableTablesActive;
 exports.$isTableCellNode = $isTableCellNode;
 exports.$isTableNode = $isTableNode;
 exports.$isTableRowNode = $isTableRowNode;
@@ -3047,4 +3162,6 @@ exports.TableObserver = TableObserver;
 exports.TableRowNode = TableRowNode;
 exports.applyTableHandlers = applyTableHandlers;
 exports.getDOMCellFromTarget = getDOMCellFromTarget;
+exports.getTableElement = getTableElement;
 exports.getTableObserverFromTableElement = getTableObserverFromTableElement;
+exports.setScrollableTablesActive = setScrollableTablesActive;