@lexical/table 0.14.5 → 0.16.0

package/LexicalTable.dev.mjs

@@ -3,9 +3,11 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
+ *
  */
+
 import { addClassNamesToElement, $findMatchingParent, removeClassNamesFromElement, isHTMLElement } from '@lexical/utils';
-import { ElementNode, $applyNodeReplacement, $createParagraphNode, $isElementNode, $isLineBreakNode, $isTextNode, createCommand, $createTextNode, $getSelection, $isRangeSelection, $normalizeSelection__EXPERIMENTAL, $getNodeByKey, isCurrentlyReadOnlyMode, $createPoint, $setSelection, SELECTION_CHANGE_COMMAND, $getNearestNodeFromDOMNode, $createRangeSelection, $getRoot, KEY_ARROW_DOWN_COMMAND, COMMAND_PRIORITY_HIGH, KEY_ARROW_UP_COMMAND, KEY_ARROW_LEFT_COMMAND, KEY_ARROW_RIGHT_COMMAND, KEY_ESCAPE_COMMAND, DELETE_WORD_COMMAND, DELETE_LINE_COMMAND, DELETE_CHARACTER_COMMAND, COMMAND_PRIORITY_CRITICAL, KEY_BACKSPACE_COMMAND, KEY_DELETE_COMMAND, FORMAT_TEXT_COMMAND, FORMAT_ELEMENT_COMMAND, CONTROLLED_TEXT_INSERTION_COMMAND, KEY_TAB_COMMAND, FOCUS_COMMAND, SELECTION_INSERT_CLIPBOARD_NODES_COMMAND, $getPreviousSelection, $createRangeSelectionFromDom, INSERT_PARAGRAPH_COMMAND } from 'lexical';
+import { ElementNode, $createParagraphNode, $isElementNode, $isLineBreakNode, $isTextNode, $applyNodeReplacement, createCommand, $createTextNode, $getSelection, $isRangeSelection, $createPoint, $normalizeSelection__EXPERIMENTAL, $getNodeByKey, isCurrentlyReadOnlyMode, $setSelection, SELECTION_CHANGE_COMMAND, $getNearestNodeFromDOMNode, $createRangeSelection, $getRoot, KEY_ARROW_DOWN_COMMAND, COMMAND_PRIORITY_HIGH, KEY_ARROW_UP_COMMAND, KEY_ARROW_LEFT_COMMAND, KEY_ARROW_RIGHT_COMMAND, KEY_ESCAPE_COMMAND, DELETE_WORD_COMMAND, DELETE_LINE_COMMAND, DELETE_CHARACTER_COMMAND, COMMAND_PRIORITY_CRITICAL, KEY_BACKSPACE_COMMAND, KEY_DELETE_COMMAND, FORMAT_TEXT_COMMAND, FORMAT_ELEMENT_COMMAND, CONTROLLED_TEXT_INSERTION_COMMAND, KEY_TAB_COMMAND, FOCUS_COMMAND, SELECTION_INSERT_CLIPBOARD_NODES_COMMAND, $getPreviousSelection, $createRangeSelectionFromDom, INSERT_PARAGRAPH_COMMAND, $isDecoratorNode } from 'lexical';
 
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
@@ -17,6 +19,10 @@ import { ElementNode, $applyNodeReplacement, $createParagraphNode, $isElementNod
 
 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.
  *
@@ -24,6 +30,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,
@@ -54,11 +61,11 @@ class TableCellNode extends ElementNode {
   static importDOM() {
     return {
       td: node => ({
-        conversion: convertTableCellNodeElement,
+        conversion: $convertTableCellNodeElement,
         priority: 0
       }),
       th: node => ({
-        conversion: convertTableCellNodeElement,
+        conversion: $convertTableCellNodeElement,
         priority: 0
       })
     };
@@ -102,8 +109,6 @@ class TableCellNode extends 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;
@@ -111,7 +116,7 @@ class TableCellNode extends 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();
@@ -206,7 +211,7 @@ class TableCellNode extends ElementNode {
     return false;
   }
 }
-function convertTableCellNodeElement(domNode) {
+function $convertTableCellNodeElement(domNode) {
   const domNode_ = domNode;
   const nodeName = domNode.nodeName.toLowerCase();
   let width = undefined;
@@ -220,10 +225,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) {
@@ -273,6 +279,7 @@ function $isTableCellNode(node) {
  * LICENSE file in the root directory of this source tree.
  *
  */
+
 const INSERT_TABLE_COMMAND = createCommand('INSERT_TABLE_COMMAND');
 
 /**
@@ -282,6 +289,7 @@ const INSERT_TABLE_COMMAND = createCommand('INSERT_TABLE_COMMAND');
  * LICENSE file in the root directory of this source tree.
  *
  */
+
 /** @noInheritDoc */
 class TableRowNode extends ElementNode {
   /** @internal */
@@ -295,7 +303,7 @@ class TableRowNode extends ElementNode {
   static importDOM() {
     return {
       tr: node => ({
-        conversion: convertTableRowElement,
+        conversion: $convertTableRowElement,
         priority: 0
       })
     };
@@ -346,7 +354,7 @@ class TableRowNode extends ElementNode {
     return false;
   }
 }
-function convertTableRowElement(domNode) {
+function $convertTableRowElement(domNode) {
   const domNode_ = domNode;
   let height = undefined;
   if (PIXEL_VALUE_REG_EXP.test(domNode_.style.height)) {
@@ -380,6 +388,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++) {
@@ -912,6 +921,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;
@@ -931,10 +950,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;
     }
   }
@@ -960,12 +979,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) {
@@ -1048,6 +1061,7 @@ function $getTableCellNodeRect(tableCellNode) {
  * LICENSE file in the root directory of this source tree.
  *
  */
+
 class TableSelection {
   constructor(tableKey, anchor, focus) {
     this.anchor = anchor;
@@ -1313,6 +1327,7 @@ function $getChildrenRecursively(node) {
  * LICENSE file in the root directory of this source tree.
  *
  */
+
 class TableObserver {
   constructor(editor, tableNodeKey) {
     this.isHighlightingCells = false;
@@ -1351,7 +1366,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;
           }
@@ -1572,8 +1587,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) {
@@ -1589,11 +1608,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,
@@ -1691,7 +1719,7 @@ function applyTableHandlers(tableNode, tableElement, editor, hasTabHandler) {
   [DELETE_WORD_COMMAND, DELETE_LINE_COMMAND, DELETE_CHARACTER_COMMAND].forEach(command => {
     tableObserver.listenersToRemove.add(editor.registerCommand(command, deleteTextHandler(command), COMMAND_PRIORITY_CRITICAL));
   });
-  const deleteCellHandler = event => {
+  const $deleteCellHandler = event => {
     const selection = $getSelection();
     if (!$isSelectionInTable(selection, tableNode)) {
       return false;
@@ -1709,8 +1737,8 @@ function applyTableHandlers(tableNode, tableElement, editor, hasTabHandler) {
     }
     return false;
   };
-  tableObserver.listenersToRemove.add(editor.registerCommand(KEY_BACKSPACE_COMMAND, deleteCellHandler, COMMAND_PRIORITY_CRITICAL));
-  tableObserver.listenersToRemove.add(editor.registerCommand(KEY_DELETE_COMMAND, deleteCellHandler, COMMAND_PRIORITY_CRITICAL));
+  tableObserver.listenersToRemove.add(editor.registerCommand(KEY_BACKSPACE_COMMAND, $deleteCellHandler, COMMAND_PRIORITY_CRITICAL));
+  tableObserver.listenersToRemove.add(editor.registerCommand(KEY_DELETE_COMMAND, $deleteCellHandler, COMMAND_PRIORITY_CRITICAL));
   tableObserver.listenersToRemove.add(editor.registerCommand(FORMAT_TEXT_COMMAND, payload => {
     const selection = $getSelection();
     if (!$isSelectionInTable(selection, tableNode)) {
@@ -1908,7 +1936,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');
         }
@@ -2232,6 +2260,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 = $getSelection();
   if (!$isSelectionInTable(selection, tableNode)) {
     if (direction === 'backward' && $isRangeSelection(selection) && selection.isCollapsed()) {
@@ -2283,6 +2314,10 @@ function $handleArrowKey(editor, event, direction, tableNode, tableObserver) {
       if (!anchorNode) {
         return false;
       }
+      const selectedNodes = selection.getNodes();
+      if (selectedNodes.length === 1 && $isDecoratorNode(selectedNodes[0])) {
+        return false;
+      }
       if (isExitingTableAnchor(anchorType, anchorOffset, anchorNode, direction)) {
         return $handleTableExit(event, anchorNode, tableNode, direction);
       }
@@ -2359,13 +2394,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 = $findMatchingParent(anchorNode, n => $isElementNode(n) && !n.isInline());
   if (!parentNode) {
     return false;
@@ -2382,7 +2426,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;
   }
@@ -2403,7 +2447,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 = $findMatchingParent(anchorNode, n => $isElementNode(n) && !n.isInline());
   if (!parentNode) {
     return undefined;
@@ -2422,9 +2466,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 = $findMatchingParent(selection.anchor.getNode(), n => $isTableCellNode(n));
@@ -2460,6 +2513,7 @@ function $getTableEdgeCursorPosition(editor, selection, tableNode) {
  * LICENSE file in the root directory of this source tree.
  *
  */
+
 /** @noInheritDoc */
 class TableNode extends ElementNode {
   static getType() {
@@ -2471,7 +2525,7 @@ class TableNode extends ElementNode {
   static importDOM() {
     return {
       table: _node => ({
-        conversion: convertTableElement,
+        conversion: $convertTableElement,
         priority: 1
       })
     };
@@ -2611,7 +2665,7 @@ function $getElementForTableNode(editor, tableNode) {
   }
   return getTable(tableElement);
 }
-function convertTableElement(_domNode) {
+function $convertTableElement(_domNode) {
   return {
     node: $createTableNode()
   };
@@ -2623,4 +2677,4 @@ function $isTableNode(node) {
   return node instanceof TableNode;
 }
 
-export { $computeTableMap, $createTableCellNode, $createTableNode, $createTableNodeWithDimensions, $createTableRowNode, $createTableSelection, $deleteTableColumn, $deleteTableColumn__EXPERIMENTAL, $deleteTableRow__EXPERIMENTAL, $getElementForTableNode, $getNodeTriplet, $getTableCellNodeFromLexicalNode, $getTableCellNodeRect, $getTableColumnIndexFromTableCellNode, $getTableNodeFromLexicalNodeOrThrow, $getTableRowIndexFromTableCellNode, $getTableRowNodeFromTableCellNodeOrThrow, $insertTableColumn, $insertTableColumn__EXPERIMENTAL, $insertTableRow, $insertTableRow__EXPERIMENTAL, $isTableCellNode, $isTableNode, $isTableRowNode, $isTableSelection, $removeTableRowAtIndex, $unmergeCell, INSERT_TABLE_COMMAND, TableCellHeaderStates, TableCellNode, TableNode, TableObserver, TableRowNode, applyTableHandlers, getDOMCellFromTarget, getTableObserverFromTableElement };
+export { $computeTableMap, $computeTableMapSkipCellCheck, $createTableCellNode, $createTableNode, $createTableNodeWithDimensions, $createTableRowNode, $createTableSelection, $deleteTableColumn, $deleteTableColumn__EXPERIMENTAL, $deleteTableRow__EXPERIMENTAL, $getElementForTableNode, $getNodeTriplet, $getTableCellNodeFromLexicalNode, $getTableCellNodeRect, $getTableColumnIndexFromTableCellNode, $getTableNodeFromLexicalNodeOrThrow, $getTableRowIndexFromTableCellNode, $getTableRowNodeFromTableCellNodeOrThrow, $insertTableColumn, $insertTableColumn__EXPERIMENTAL, $insertTableRow, $insertTableRow__EXPERIMENTAL, $isTableCellNode, $isTableNode, $isTableRowNode, $isTableSelection, $removeTableRowAtIndex, $unmergeCell, INSERT_TABLE_COMMAND, TableCellHeaderStates, TableCellNode, TableNode, TableObserver, TableRowNode, applyTableHandlers, getDOMCellFromTarget, getTableObserverFromTableElement };

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

package/LexicalTable.mjs

@@ -3,11 +3,14 @@
  *
  * 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 './LexicalTable.dev.mjs';
 import * as modProd from './LexicalTable.prod.mjs';
 const mod = process.env.NODE_ENV === 'development' ? modDev : modProd;
 export const $computeTableMap = mod.$computeTableMap;
+export const $computeTableMapSkipCellCheck = mod.$computeTableMapSkipCellCheck;
 export const $createTableCellNode = mod.$createTableCellNode;
 export const $createTableNode = mod.$createTableNode;
 export const $createTableNodeWithDimensions = mod.$createTableNodeWithDimensions;

package/LexicalTable.node.mjs

@@ -3,9 +3,12 @@
  *
  * 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 === 'development' ? import('./LexicalTable.dev.mjs') : import('./LexicalTable.prod.mjs'));
 export const $computeTableMap = mod.$computeTableMap;
+export const $computeTableMapSkipCellCheck = mod.$computeTableMapSkipCellCheck;
 export const $createTableCellNode = mod.$createTableCellNode;
 export const $createTableNode = mod.$createTableNode;
 export const $createTableNodeWithDimensions = mod.$createTableNodeWithDimensions;