@lexical/table 0.14.5 → 0.16.0

package/LexicalTable.dev.js

@@ -3,7 +3,9 @@
  *
  * 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 utils = require('@lexical/utils');
@@ -19,6 +21,10 @@ var lexical = require('lexical');
 
 const PIXEL_VALUE_REG_EXP = /^(\d+(?:\.\d+)?)px$/;
 
+// .PlaygroundEditorTheme__tableCell width value from
+// packages/lexical-playground/src/themes/PlaygroundEditorTheme.css
+const COLUMN_WIDTH = 75;
+
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
@@ -26,6 +32,7 @@ const PIXEL_VALUE_REG_EXP = /^(\d+(?:\.\d+)?)px$/;
  * LICENSE file in the root directory of this source tree.
  *
  */
+
 const TableCellHeaderStates = {
   BOTH: 3,
   COLUMN: 2,
@@ -56,11 +63,11 @@ class TableCellNode extends lexical.ElementNode {
   static importDOM() {
     return {
       td: node => ({
-        conversion: convertTableCellNodeElement,
+        conversion: $convertTableCellNodeElement,
         priority: 0
       }),
       th: node => ({
-        conversion: convertTableCellNodeElement,
+        conversion: $convertTableCellNodeElement,
         priority: 0
       })
     };
@@ -104,8 +111,6 @@ class TableCellNode extends lexical.ElementNode {
     } = super.exportDOM(editor);
     if (element) {
       const element_ = element;
-      const maxWidth = 700;
-      const colCount = this.getParentOrThrow().getChildrenSize();
       element_.style.border = '1px solid black';
       if (this.__colSpan > 1) {
         element_.colSpan = this.__colSpan;
@@ -113,7 +118,7 @@ class TableCellNode extends lexical.ElementNode {
       if (this.__rowSpan > 1) {
         element_.rowSpan = this.__rowSpan;
       }
-      element_.style.width = `${this.getWidth() || Math.max(90, maxWidth / colCount)}px`;
+      element_.style.width = `${this.getWidth() || COLUMN_WIDTH}px`;
       element_.style.verticalAlign = 'top';
       element_.style.textAlign = 'start';
       const backgroundColor = this.getBackgroundColor();
@@ -208,7 +213,7 @@ class TableCellNode extends lexical.ElementNode {
     return false;
   }
 }
-function convertTableCellNodeElement(domNode) {
+function $convertTableCellNodeElement(domNode) {
   const domNode_ = domNode;
   const nodeName = domNode.nodeName.toLowerCase();
   let width = undefined;
@@ -222,10 +227,11 @@ function convertTableCellNodeElement(domNode) {
     tableCellNode.__backgroundColor = backgroundColor;
   }
   const style = domNode_.style;
+  const textDecoration = style.textDecoration.split(' ');
   const hasBoldFontWeight = style.fontWeight === '700' || style.fontWeight === 'bold';
-  const hasLinethroughTextDecoration = style.textDecoration === 'line-through';
+  const hasLinethroughTextDecoration = textDecoration.includes('line-through');
   const hasItalicFontStyle = style.fontStyle === 'italic';
-  const hasUnderlineTextDecoration = style.textDecoration === 'underline';
+  const hasUnderlineTextDecoration = textDecoration.includes('underline');
   return {
     after: childLexicalNodes => {
       if (childLexicalNodes.length === 0) {
@@ -275,6 +281,7 @@ function $isTableCellNode(node) {
  * LICENSE file in the root directory of this source tree.
  *
  */
+
 const INSERT_TABLE_COMMAND = lexical.createCommand('INSERT_TABLE_COMMAND');
 
 /**
@@ -284,6 +291,7 @@ const INSERT_TABLE_COMMAND = lexical.createCommand('INSERT_TABLE_COMMAND');
  * LICENSE file in the root directory of this source tree.
  *
  */
+
 /** @noInheritDoc */
 class TableRowNode extends lexical.ElementNode {
   /** @internal */
@@ -297,7 +305,7 @@ class TableRowNode extends lexical.ElementNode {
   static importDOM() {
     return {
       tr: node => ({
-        conversion: convertTableRowElement,
+        conversion: $convertTableRowElement,
         priority: 0
       })
     };
@@ -348,7 +356,7 @@ class TableRowNode extends lexical.ElementNode {
     return false;
   }
 }
-function convertTableRowElement(domNode) {
+function $convertTableRowElement(domNode) {
   const domNode_ = domNode;
   let height = undefined;
   if (PIXEL_VALUE_REG_EXP.test(domNode_.style.height)) {
@@ -382,6 +390,7 @@ const CAN_USE_DOM = typeof window !== 'undefined' && typeof window.document !==
  * LICENSE file in the root directory of this source tree.
  *
  */
+
 function $createTableNodeWithDimensions(rowCount, columnCount, includeHeaders = true) {
   const tableNode = $createTableNode();
   for (let iRow = 0; iRow < rowCount; iRow++) {
@@ -914,6 +923,16 @@ function $unmergeCell() {
   }
 }
 function $computeTableMap(grid, cellA, cellB) {
+  const [tableMap, cellAValue, cellBValue] = $computeTableMapSkipCellCheck(grid, cellA, cellB);
+  if (!(cellAValue !== null)) {
+    throw Error(`Anchor not found in Grid`);
+  }
+  if (!(cellBValue !== null)) {
+    throw Error(`Focus not found in Grid`);
+  }
+  return [tableMap, cellAValue, cellBValue];
+}
+function $computeTableMapSkipCellCheck(grid, cellA, cellB) {
   const tableMap = [];
   let cellAValue = null;
   let cellBValue = null;
@@ -933,10 +952,10 @@ function $computeTableMap(grid, cellA, cellB) {
         tableMap[startRow + i][startColumn + j] = value;
       }
     }
-    if (cellA.is(cell)) {
+    if (cellA !== null && cellA.is(cell)) {
       cellAValue = value;
     }
-    if (cellB.is(cell)) {
+    if (cellB !== null && cellB.is(cell)) {
       cellBValue = value;
     }
   }
@@ -962,12 +981,6 @@ function $computeTableMap(grid, cellA, cellB) {
       j += cell.__colSpan;
     }
   }
-  if (!(cellAValue !== null)) {
-    throw Error(`Anchor not found in Grid`);
-  }
-  if (!(cellBValue !== null)) {
-    throw Error(`Focus not found in Grid`);
-  }
   return [tableMap, cellAValue, cellBValue];
 }
 function $getNodeTriplet(source) {
@@ -1050,6 +1063,7 @@ function $getTableCellNodeRect(tableCellNode) {
  * LICENSE file in the root directory of this source tree.
  *
  */
+
 class TableSelection {
   constructor(tableKey, anchor, focus) {
     this.anchor = anchor;
@@ -1315,6 +1329,7 @@ function $getChildrenRecursively(node) {
  * LICENSE file in the root directory of this source tree.
  *
  */
+
 class TableObserver {
   constructor(editor, tableNodeKey) {
     this.isHighlightingCells = false;
@@ -1353,7 +1368,7 @@ class TableObserver {
           const record = records[i];
           const target = record.target;
           const nodeName = target.nodeName;
-          if (nodeName === 'TABLE' || nodeName === 'TR') {
+          if (nodeName === 'TABLE' || nodeName === 'TBODY' || nodeName === 'THEAD' || nodeName === 'TR') {
             gridNeedsRedraw = true;
             break;
           }
@@ -1574,8 +1589,12 @@ class TableObserver {
  * LICENSE file in the root directory of this source tree.
  *
  */
+
 const LEXICAL_ELEMENT_KEY = '__lexicalTableSelection';
 const getDOMSelection = targetWindow => CAN_USE_DOM ? (targetWindow || window).getSelection() : null;
+const isMouseDownOnEvent = event => {
+  return (event.buttons & 1) === 1;
+};
 function applyTableHandlers(tableNode, tableElement, editor, hasTabHandler) {
   const rootElement = editor.getRootElement();
   if (rootElement === null) {
@@ -1591,11 +1610,20 @@ function applyTableHandlers(tableNode, tableElement, editor, hasTabHandler) {
       editorWindow.removeEventListener('mousemove', onMouseMove);
     };
     const onMouseMove = moveEvent => {
-      const focusCell = getDOMCellFromTarget(moveEvent.target);
-      if (focusCell !== null && (tableObserver.anchorX !== focusCell.x || tableObserver.anchorY !== focusCell.y)) {
-        moveEvent.preventDefault();
-        tableObserver.setFocusCellForSelection(focusCell);
-      }
+      // delaying mousemove handler to allow selectionchange handler from LexicalEvents.ts to be executed first
+      setTimeout(() => {
+        if (!isMouseDownOnEvent(moveEvent) && tableObserver.isSelecting) {
+          tableObserver.isSelecting = false;
+          editorWindow.removeEventListener('mouseup', onMouseUp);
+          editorWindow.removeEventListener('mousemove', onMouseMove);
+          return;
+        }
+        const focusCell = getDOMCellFromTarget(moveEvent.target);
+        if (focusCell !== null && (tableObserver.anchorX !== focusCell.x || tableObserver.anchorY !== focusCell.y)) {
+          moveEvent.preventDefault();
+          tableObserver.setFocusCellForSelection(focusCell);
+        }
+      }, 0);
     };
     return {
       onMouseMove: onMouseMove,
@@ -1693,7 +1721,7 @@ function applyTableHandlers(tableNode, tableElement, editor, hasTabHandler) {
   [lexical.DELETE_WORD_COMMAND, lexical.DELETE_LINE_COMMAND, lexical.DELETE_CHARACTER_COMMAND].forEach(command => {
     tableObserver.listenersToRemove.add(editor.registerCommand(command, deleteTextHandler(command), lexical.COMMAND_PRIORITY_CRITICAL));
   });
-  const deleteCellHandler = event => {
+  const $deleteCellHandler = event => {
     const selection = lexical.$getSelection();
     if (!$isSelectionInTable(selection, tableNode)) {
       return false;
@@ -1711,8 +1739,8 @@ function applyTableHandlers(tableNode, tableElement, editor, hasTabHandler) {
     }
     return false;
   };
-  tableObserver.listenersToRemove.add(editor.registerCommand(lexical.KEY_BACKSPACE_COMMAND, deleteCellHandler, lexical.COMMAND_PRIORITY_CRITICAL));
-  tableObserver.listenersToRemove.add(editor.registerCommand(lexical.KEY_DELETE_COMMAND, deleteCellHandler, lexical.COMMAND_PRIORITY_CRITICAL));
+  tableObserver.listenersToRemove.add(editor.registerCommand(lexical.KEY_BACKSPACE_COMMAND, $deleteCellHandler, lexical.COMMAND_PRIORITY_CRITICAL));
+  tableObserver.listenersToRemove.add(editor.registerCommand(lexical.KEY_DELETE_COMMAND, $deleteCellHandler, lexical.COMMAND_PRIORITY_CRITICAL));
   tableObserver.listenersToRemove.add(editor.registerCommand(lexical.FORMAT_TEXT_COMMAND, payload => {
     const selection = lexical.$getSelection();
     if (!$isSelectionInTable(selection, tableNode)) {
@@ -1910,7 +1938,7 @@ function applyTableHandlers(tableNode, tableElement, editor, hasTabHandler) {
       if (isPartialyWithinTable) {
         const newSelection = selection.clone();
         if (isFocusInside) {
-          newSelection.focus.set(tableNode.getParentOrThrow().getKey(), isBackward ? tableNode.getIndexWithinParent() : tableNode.getIndexWithinParent() + 1, 'element');
+          newSelection.focus.set(tableNode.getParentOrThrow().getKey(), tableNode.getIndexWithinParent(), 'element');
         } else {
           newSelection.anchor.set(tableNode.getParentOrThrow().getKey(), isBackward ? tableNode.getIndexWithinParent() + 1 : tableNode.getIndexWithinParent(), 'element');
         }
@@ -2234,6 +2262,9 @@ function $findTableNode(node) {
   return $isTableNode(tableNode) ? tableNode : null;
 }
 function $handleArrowKey(editor, event, direction, tableNode, tableObserver) {
+  if ((direction === 'up' || direction === 'down') && isTypeaheadMenuInView(editor)) {
+    return false;
+  }
   const selection = lexical.$getSelection();
   if (!$isSelectionInTable(selection, tableNode)) {
     if (direction === 'backward' && lexical.$isRangeSelection(selection) && selection.isCollapsed()) {
@@ -2285,6 +2316,10 @@ function $handleArrowKey(editor, event, direction, tableNode, tableObserver) {
       if (!anchorNode) {
         return false;
       }
+      const selectedNodes = selection.getNodes();
+      if (selectedNodes.length === 1 && lexical.$isDecoratorNode(selectedNodes[0])) {
+        return false;
+      }
       if (isExitingTableAnchor(anchorType, anchorOffset, anchorNode, direction)) {
         return $handleTableExit(event, anchorNode, tableNode, direction);
       }
@@ -2361,13 +2396,22 @@ function stopEvent(event) {
   event.stopImmediatePropagation();
   event.stopPropagation();
 }
+function isTypeaheadMenuInView(editor) {
+  // There is no inbuilt way to check if the component picker is in view
+  // but we can check if the root DOM element has the aria-controls attribute "typeahead-menu".
+  const root = editor.getRootElement();
+  if (!root) {
+    return false;
+  }
+  return root.hasAttribute('aria-controls') && root.getAttribute('aria-controls') === 'typeahead-menu';
+}
 function isExitingTableAnchor(type, offset, anchorNode, direction) {
-  return isExitingTableElementAnchor(type, anchorNode, direction) || isExitingTableTextAnchor(type, offset, anchorNode, direction);
+  return isExitingTableElementAnchor(type, anchorNode, direction) || $isExitingTableTextAnchor(type, offset, anchorNode, direction);
 }
 function isExitingTableElementAnchor(type, anchorNode, direction) {
   return type === 'element' && (direction === 'backward' ? anchorNode.getPreviousSibling() === null : anchorNode.getNextSibling() === null);
 }
-function isExitingTableTextAnchor(type, offset, anchorNode, direction) {
+function $isExitingTableTextAnchor(type, offset, anchorNode, direction) {
   const parentNode = utils.$findMatchingParent(anchorNode, n => lexical.$isElementNode(n) && !n.isInline());
   if (!parentNode) {
     return false;
@@ -2384,7 +2428,7 @@ function $handleTableExit(event, anchorNode, tableNode, direction) {
   if (!isExitingCell(tableMap, cellValue, direction)) {
     return false;
   }
-  const toNode = getExitingToNode(anchorNode, direction, tableNode);
+  const toNode = $getExitingToNode(anchorNode, direction, tableNode);
   if (!toNode || $isTableNode(toNode)) {
     return false;
   }
@@ -2405,7 +2449,7 @@ function isExitingCell(tableMap, cellValue, direction) {
   } = cellValue;
   return direction === 'backward' ? startColumn === firstCell.startColumn && startRow === firstCell.startRow : startColumn === lastCell.startColumn && startRow === lastCell.startRow;
 }
-function getExitingToNode(anchorNode, direction, tableNode) {
+function $getExitingToNode(anchorNode, direction, tableNode) {
   const parentNode = utils.$findMatchingParent(anchorNode, n => lexical.$isElementNode(n) && !n.isInline());
   if (!parentNode) {
     return undefined;
@@ -2424,9 +2468,18 @@ function $insertParagraphAtTableEdge(edgePosition, tableNode, children) {
   paragraphNode.selectEnd();
 }
 function $getTableEdgeCursorPosition(editor, selection, tableNode) {
+  const tableNodeParent = tableNode.getParent();
+  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 !== editor.getRootElement()) {
+  if (!domSelection || domSelection.anchorNode !== tableNodeParentDOM) {
     return undefined;
   }
   const anchorCellNode = utils.$findMatchingParent(selection.anchor.getNode(), n => $isTableCellNode(n));
@@ -2462,6 +2515,7 @@ function $getTableEdgeCursorPosition(editor, selection, tableNode) {
  * LICENSE file in the root directory of this source tree.
  *
  */
+
 /** @noInheritDoc */
 class TableNode extends lexical.ElementNode {
   static getType() {
@@ -2473,7 +2527,7 @@ class TableNode extends lexical.ElementNode {
   static importDOM() {
     return {
       table: _node => ({
-        conversion: convertTableElement,
+        conversion: $convertTableElement,
         priority: 1
       })
     };
@@ -2613,7 +2667,7 @@ function $getElementForTableNode(editor, tableNode) {
   }
   return getTable(tableElement);
 }
-function convertTableElement(_domNode) {
+function $convertTableElement(_domNode) {
   return {
     node: $createTableNode()
   };
@@ -2626,6 +2680,7 @@ function $isTableNode(node) {
 }
 
 exports.$computeTableMap = $computeTableMap;
+exports.$computeTableMapSkipCellCheck = $computeTableMapSkipCellCheck;
 exports.$createTableCellNode = $createTableCellNode;
 exports.$createTableNode = $createTableNode;
 exports.$createTableNodeWithDimensions = $createTableNodeWithDimensions;