@lexical/table 0.14.2 → 0.14.4

package/{LexicalTable.dev.esm.js → LexicalTable.dev.mjs}

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { addClassNamesToElement, $findMatchingParent, removeClassNamesFromElement, isHTMLElement } from '@lexical/utils';
-import { ElementNode, $applyNodeReplacement, $createParagraphNode, $isElementNode, $isLineBreakNode, 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, $isTextNode, $getPreviousSelection } from 'lexical';
+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';
 
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
@@ -219,6 +219,11 @@ function convertTableCellNodeElement(domNode) {
   if (backgroundColor !== '') {
     tableCellNode.__backgroundColor = backgroundColor;
   }
+  const style = domNode_.style;
+  const hasBoldFontWeight = style.fontWeight === '700' || style.fontWeight === 'bold';
+  const hasLinethroughTextDecoration = style.textDecoration === 'line-through';
+  const hasItalicFontStyle = style.fontStyle === 'italic';
+  const hasUnderlineTextDecoration = style.textDecoration === 'underline';
   return {
     after: childLexicalNodes => {
       if (childLexicalNodes.length === 0) {
@@ -232,6 +237,20 @@ function convertTableCellNodeElement(domNode) {
         if ($isLineBreakNode(lexicalNode) && lexicalNode.getTextContent() === '\n') {
           return null;
         }
+        if ($isTextNode(lexicalNode)) {
+          if (hasBoldFontWeight) {
+            lexicalNode.toggleFormat('bold');
+          }
+          if (hasLinethroughTextDecoration) {
+            lexicalNode.toggleFormat('strikethrough');
+          }
+          if (hasItalicFontStyle) {
+            lexicalNode.toggleFormat('italic');
+          }
+          if (hasUnderlineTextDecoration) {
+            lexicalNode.toggleFormat('underline');
+          }
+        }
         paragraphNode.append(lexicalNode);
         return paragraphNode;
       }
@@ -1294,7 +1313,6 @@ function $getChildrenRecursively(node) {
  * LICENSE file in the root directory of this source tree.
  *
  */
-const getDOMSelection = targetWindow => CAN_USE_DOM ? (targetWindow || window).getSelection() : null;
 class TableObserver {
   constructor(editor, tableNodeKey) {
     this.isHighlightingCells = false;
@@ -1317,6 +1335,7 @@ class TableObserver {
     this.focusCell = null;
     this.hasHijackedSelectionStyles = false;
     this.trackTable();
+    this.isSelecting = false;
   }
   getTable() {
     return this.table;
@@ -1456,7 +1475,7 @@ class TableObserver {
       this.focusY = cellY;
       if (this.isHighlightingCells) {
         const focusTableCellNode = $getNearestNodeFromDOMNode(cell.elem);
-        if (this.tableSelection != null && this.anchorCellNodeKey != null && $isTableCellNode(focusTableCellNode)) {
+        if (this.tableSelection != null && this.anchorCellNodeKey != null && $isTableCellNode(focusTableCellNode) && tableNode.is($findTableNode(focusTableCellNode))) {
           const focusNodeKey = focusTableCellNode.getKey();
           this.tableSelection = this.tableSelection.clone() || $createTableSelection();
           this.focusCellNodeKey = focusNodeKey;
@@ -1554,6 +1573,7 @@ class TableObserver {
  *
  */
 const LEXICAL_ELEMENT_KEY = '__lexicalTableSelection';
+const getDOMSelection = targetWindow => CAN_USE_DOM ? (targetWindow || window).getSelection() : null;
 function applyTableHandlers(tableNode, tableElement, editor, hasTabHandler) {
   const rootElement = editor.getRootElement();
   if (rootElement === null) {
@@ -1562,6 +1582,24 @@ function applyTableHandlers(tableNode, tableElement, editor, hasTabHandler) {
   const tableObserver = new TableObserver(editor, tableNode.getKey());
   const editorWindow = editor._window || window;
   attachTableObserverToTableElement(tableElement, tableObserver);
+  const createMouseHandlers = () => {
+    const onMouseUp = () => {
+      tableObserver.isSelecting = false;
+      editorWindow.removeEventListener('mouseup', onMouseUp);
+      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);
+      }
+    };
+    return {
+      onMouseMove: onMouseMove,
+      onMouseUp: onMouseUp
+    };
+  };
   tableElement.addEventListener('mousedown', event => {
     setTimeout(() => {
       if (event.button !== 0) {
@@ -1575,17 +1613,11 @@ function applyTableHandlers(tableNode, tableElement, editor, hasTabHandler) {
         stopEvent(event);
         tableObserver.setAnchorCellForSelection(anchorCell);
       }
-      const onMouseUp = () => {
-        editorWindow.removeEventListener('mouseup', onMouseUp);
-        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);
-        }
-      };
+      const {
+        onMouseUp,
+        onMouseMove
+      } = createMouseHandlers();
+      tableObserver.isSelecting = true;
       editorWindow.addEventListener('mouseup', onMouseUp);
       editorWindow.addEventListener('mousemove', onMouseMove);
     }, 0);
@@ -1653,18 +1685,6 @@ function applyTableHandlers(tableNode, tableElement, editor, hasTabHandler) {
         // TODO: Fix Delete Line in Table Cells.
         return true;
       }
-      if (command === DELETE_CHARACTER_COMMAND || command === DELETE_WORD_COMMAND) {
-        if (selection.isCollapsed() && selection.anchor.offset === 0) {
-          if (nearestElementNode !== topLevelCellElementNode) {
-            const children = nearestElementNode.getChildren();
-            const newParagraphNode = $createParagraphNode();
-            children.forEach(child => newParagraphNode.append(child));
-            nearestElementNode.replace(newParagraphNode);
-            nearestElementNode.getWritable().__parent = tableCellNode.getKey();
-            return true;
-          }
-        }
-      }
     }
     return false;
   };
@@ -1750,6 +1770,13 @@ function applyTableHandlers(tableNode, tableElement, editor, hasTabHandler) {
       if (!$isTableCellNode(tableCellNode)) {
         return false;
       }
+      if (typeof payload === 'string') {
+        const edgePosition = $getTableEdgeCursorPosition(editor, selection, tableNode);
+        if (edgePosition) {
+          $insertParagraphAtTableEdge(edgePosition, tableNode, [$createTextNode(payload)]);
+          return true;
+        }
+      }
     }
     return false;
   }, COMMAND_PRIORITY_CRITICAL));
@@ -1880,7 +1907,11 @@ function applyTableHandlers(tableNode, tableElement, editor, hasTabHandler) {
       const isBackward = selection.isBackward();
       if (isPartialyWithinTable) {
         const newSelection = selection.clone();
-        newSelection.focus.set(tableNode.getKey(), isBackward ? 0 : tableNode.getChildrenSize(), 'element');
+        if (isFocusInside) {
+          newSelection.focus.set(tableNode.getParentOrThrow().getKey(), isBackward ? tableNode.getIndexWithinParent() : tableNode.getIndexWithinParent() + 1, 'element');
+        } else {
+          newSelection.anchor.set(tableNode.getParentOrThrow().getKey(), isBackward ? tableNode.getIndexWithinParent() + 1 : tableNode.getIndexWithinParent(), 'element');
+        }
         $setSelection(newSelection);
         $addHighlightStyleToTable(editor, tableObserver);
       } else if (isWithinTable) {
@@ -1889,6 +1920,34 @@ function applyTableHandlers(tableNode, tableElement, editor, hasTabHandler) {
         if (!anchorCellNode.is(focusCellNode)) {
           tableObserver.setAnchorCellForSelection(getObserverCellFromCellNode(anchorCellNode));
           tableObserver.setFocusCellForSelection(getObserverCellFromCellNode(focusCellNode), true);
+          if (!tableObserver.isSelecting) {
+            setTimeout(() => {
+              const {
+                onMouseUp,
+                onMouseMove
+              } = createMouseHandlers();
+              tableObserver.isSelecting = true;
+              editorWindow.addEventListener('mouseup', onMouseUp);
+              editorWindow.addEventListener('mousemove', onMouseMove);
+            }, 0);
+          }
+        }
+      }
+    } else if (selection && $isTableSelection(selection) && selection.is(prevSelection) && selection.tableKey === tableNode.getKey()) {
+      // if selection goes outside of the table we need to change it to Range selection
+      const domSelection = getDOMSelection(editor._window);
+      if (domSelection && domSelection.anchorNode && domSelection.focusNode) {
+        const focusNode = $getNearestNodeFromDOMNode(domSelection.focusNode);
+        const isFocusOutside = focusNode && !tableNode.is($findTableNode(focusNode));
+        const anchorNode = $getNearestNodeFromDOMNode(domSelection.anchorNode);
+        const isAnchorInside = anchorNode && tableNode.is($findTableNode(anchorNode));
+        if (isFocusOutside && isAnchorInside && domSelection.rangeCount > 0) {
+          const newSelection = $createRangeSelectionFromDom(domSelection, editor);
+          if (newSelection) {
+            newSelection.anchor.set(tableNode.getKey(), selection.isBackward() ? tableNode.getChildrenSize() : 0, 'element');
+            domSelection.removeAllRanges();
+            $setSelection(newSelection);
+          }
         }
       }
     }
@@ -1907,6 +1966,18 @@ function applyTableHandlers(tableNode, tableElement, editor, hasTabHandler) {
     }
     return false;
   }, COMMAND_PRIORITY_CRITICAL));
+  tableObserver.listenersToRemove.add(editor.registerCommand(INSERT_PARAGRAPH_COMMAND, () => {
+    const selection = $getSelection();
+    if (!$isRangeSelection(selection) || !selection.isCollapsed() || !$isSelectionInTable(selection, tableNode)) {
+      return false;
+    }
+    const edgePosition = $getTableEdgeCursorPosition(editor, selection, tableNode);
+    if (edgePosition) {
+      $insertParagraphAtTableEdge(edgePosition, tableNode);
+      return true;
+    }
+    return false;
+  }, COMMAND_PRIORITY_CRITICAL));
   return tableObserver;
 }
 function attachTableObserverToTableElement(tableElement, tableObserver) {
@@ -2163,14 +2234,31 @@ function $findTableNode(node) {
 function $handleArrowKey(editor, event, direction, tableNode, tableObserver) {
   const selection = $getSelection();
   if (!$isSelectionInTable(selection, tableNode)) {
+    if (direction === 'backward' && $isRangeSelection(selection) && selection.isCollapsed()) {
+      const anchorType = selection.anchor.type;
+      const anchorOffset = selection.anchor.offset;
+      if (anchorType !== 'element' && !(anchorType === 'text' && anchorOffset === 0)) {
+        return false;
+      }
+      const anchorNode = selection.anchor.getNode();
+      if (!anchorNode) {
+        return false;
+      }
+      const parentNode = $findMatchingParent(anchorNode, n => $isElementNode(n) && !n.isInline());
+      if (!parentNode) {
+        return false;
+      }
+      const siblingNode = parentNode.getPreviousSibling();
+      if (!siblingNode || !$isTableNode(siblingNode)) {
+        return false;
+      }
+      stopEvent(event);
+      siblingNode.selectEnd();
+      return true;
+    }
     return false;
   }
   if ($isRangeSelection(selection) && selection.isCollapsed()) {
-    // Horizontal move between cels seem to work well without interruption
-    // so just exit early, and handle vertical moves
-    if (direction === 'backward' || direction === 'forward') {
-      return false;
-    }
     const {
       anchor,
       focus
@@ -2188,6 +2276,18 @@ function $handleArrowKey(editor, event, direction, tableNode, tableObserver) {
         return $handleArrowKey(editor, event, direction, anchorCellTable, tableObserver);
       }
     }
+    if (direction === 'backward' || direction === 'forward') {
+      const anchorType = anchor.type;
+      const anchorOffset = anchor.offset;
+      const anchorNode = anchor.getNode();
+      if (!anchorNode) {
+        return false;
+      }
+      if (isExitingTableAnchor(anchorType, anchorOffset, anchorNode, direction)) {
+        return $handleTableExit(event, anchorNode, tableNode, direction);
+      }
+      return false;
+    }
     const anchorCellDom = editor.getElementByKey(anchorCellNode.__key);
     const anchorDOM = editor.getElementByKey(anchor.key);
     if (anchorDOM == null || anchorCellDom == null) {
@@ -2259,6 +2359,99 @@ function stopEvent(event) {
   event.stopImmediatePropagation();
   event.stopPropagation();
 }
+function isExitingTableAnchor(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) {
+  const parentNode = $findMatchingParent(anchorNode, n => $isElementNode(n) && !n.isInline());
+  if (!parentNode) {
+    return false;
+  }
+  const hasValidOffset = direction === 'backward' ? offset === 0 : offset === anchorNode.getTextContentSize();
+  return type === 'text' && hasValidOffset && (direction === 'backward' ? parentNode.getPreviousSibling() === null : parentNode.getNextSibling() === null);
+}
+function $handleTableExit(event, anchorNode, tableNode, direction) {
+  const anchorCellNode = $findMatchingParent(anchorNode, $isTableCellNode);
+  if (!$isTableCellNode(anchorCellNode)) {
+    return false;
+  }
+  const [tableMap, cellValue] = $computeTableMap(tableNode, anchorCellNode, anchorCellNode);
+  if (!isExitingCell(tableMap, cellValue, direction)) {
+    return false;
+  }
+  const toNode = getExitingToNode(anchorNode, direction, tableNode);
+  if (!toNode || $isTableNode(toNode)) {
+    return false;
+  }
+  stopEvent(event);
+  if (direction === 'backward') {
+    toNode.selectEnd();
+  } else {
+    toNode.selectStart();
+  }
+  return true;
+}
+function isExitingCell(tableMap, cellValue, direction) {
+  const firstCell = tableMap[0][0];
+  const lastCell = tableMap[tableMap.length - 1][tableMap[0].length - 1];
+  const {
+    startColumn,
+    startRow
+  } = cellValue;
+  return direction === 'backward' ? startColumn === firstCell.startColumn && startRow === firstCell.startRow : startColumn === lastCell.startColumn && startRow === lastCell.startRow;
+}
+function getExitingToNode(anchorNode, direction, tableNode) {
+  const parentNode = $findMatchingParent(anchorNode, n => $isElementNode(n) && !n.isInline());
+  if (!parentNode) {
+    return undefined;
+  }
+  const anchorSibling = direction === 'backward' ? parentNode.getPreviousSibling() : parentNode.getNextSibling();
+  return anchorSibling && $isTableNode(anchorSibling) ? anchorSibling : direction === 'backward' ? tableNode.getPreviousSibling() : tableNode.getNextSibling();
+}
+function $insertParagraphAtTableEdge(edgePosition, tableNode, children) {
+  const paragraphNode = $createParagraphNode();
+  if (edgePosition === 'first') {
+    tableNode.insertBefore(paragraphNode);
+  } else {
+    tableNode.insertAfter(paragraphNode);
+  }
+  paragraphNode.append(...(children || []));
+  paragraphNode.selectEnd();
+}
+function $getTableEdgeCursorPosition(editor, selection, tableNode) {
+  // TODO: Add support for nested tables
+  const domSelection = window.getSelection();
+  if (!domSelection || domSelection.anchorNode !== editor.getRootElement()) {
+    return undefined;
+  }
+  const anchorCellNode = $findMatchingParent(selection.anchor.getNode(), n => $isTableCellNode(n));
+  if (!anchorCellNode) {
+    return undefined;
+  }
+  const parentTable = $findMatchingParent(anchorCellNode, n => $isTableNode(n));
+  if (!$isTableNode(parentTable) || !parentTable.is(tableNode)) {
+    return undefined;
+  }
+  const [tableMap, cellValue] = $computeTableMap(tableNode, anchorCellNode, anchorCellNode);
+  const firstCell = tableMap[0][0];
+  const lastCell = tableMap[tableMap.length - 1][tableMap[0].length - 1];
+  const {
+    startRow,
+    startColumn
+  } = cellValue;
+  const isAtFirstCell = startRow === firstCell.startRow && startColumn === firstCell.startColumn;
+  const isAtLastCell = startRow === lastCell.startRow && startColumn === lastCell.startColumn;
+  if (isAtFirstCell) {
+    return 'first';
+  } else if (isAtLastCell) {
+    return 'last';
+  } else {
+    return undefined;
+  }
+}
 
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.

package/{LexicalTable.esm.js → LexicalTable.mjs}

@@ -4,8 +4,8 @@
  * 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.esm.js';
-import * as modProd from './LexicalTable.prod.esm.js';
+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 $createTableCellNode = mod.$createTableCellNode;

package/LexicalTable.node.mjs

@@ -0,0 +1,43 @@
+/**
+ * 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 mod = await (process.env.NODE_ENV === 'development' ? import('./LexicalTable.dev.mjs') : import('./LexicalTable.prod.mjs'));
+export const $computeTableMap = mod.$computeTableMap;
+export const $createTableCellNode = mod.$createTableCellNode;
+export const $createTableNode = mod.$createTableNode;
+export const $createTableNodeWithDimensions = mod.$createTableNodeWithDimensions;
+export const $createTableRowNode = mod.$createTableRowNode;
+export const $createTableSelection = mod.$createTableSelection;
+export const $deleteTableColumn = mod.$deleteTableColumn;
+export const $deleteTableColumn__EXPERIMENTAL = mod.$deleteTableColumn__EXPERIMENTAL;
+export const $deleteTableRow__EXPERIMENTAL = mod.$deleteTableRow__EXPERIMENTAL;
+export const $getElementForTableNode = mod.$getElementForTableNode;
+export const $getNodeTriplet = mod.$getNodeTriplet;
+export const $getTableCellNodeFromLexicalNode = mod.$getTableCellNodeFromLexicalNode;
+export const $getTableCellNodeRect = mod.$getTableCellNodeRect;
+export const $getTableColumnIndexFromTableCellNode = mod.$getTableColumnIndexFromTableCellNode;
+export const $getTableNodeFromLexicalNodeOrThrow = mod.$getTableNodeFromLexicalNodeOrThrow;
+export const $getTableRowIndexFromTableCellNode = mod.$getTableRowIndexFromTableCellNode;
+export const $getTableRowNodeFromTableCellNodeOrThrow = mod.$getTableRowNodeFromTableCellNodeOrThrow;
+export const $insertTableColumn = mod.$insertTableColumn;
+export const $insertTableColumn__EXPERIMENTAL = mod.$insertTableColumn__EXPERIMENTAL;
+export const $insertTableRow = mod.$insertTableRow;
+export const $insertTableRow__EXPERIMENTAL = mod.$insertTableRow__EXPERIMENTAL;
+export const $isTableCellNode = mod.$isTableCellNode;
+export const $isTableNode = mod.$isTableNode;
+export const $isTableRowNode = mod.$isTableRowNode;
+export const $isTableSelection = mod.$isTableSelection;
+export const $removeTableRowAtIndex = mod.$removeTableRowAtIndex;
+export const $unmergeCell = mod.$unmergeCell;
+export const INSERT_TABLE_COMMAND = mod.INSERT_TABLE_COMMAND;
+export const TableCellHeaderStates = mod.TableCellHeaderStates;
+export const TableCellNode = mod.TableCellNode;
+export const TableNode = mod.TableNode;
+export const TableObserver = mod.TableObserver;
+export const TableRowNode = mod.TableRowNode;
+export const applyTableHandlers = mod.applyTableHandlers;
+export const getDOMCellFromTarget = mod.getDOMCellFromTarget;
+export const getTableObserverFromTableElement = mod.getTableObserverFromTableElement;