@lexical/table 0.14.2 → 0.14.4

package/LexicalTable.dev.js

@@ -221,6 +221,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) {
@@ -234,6 +239,20 @@ function convertTableCellNodeElement(domNode) {
         if (lexical.$isLineBreakNode(lexicalNode) && lexicalNode.getTextContent() === '\n') {
           return null;
         }
+        if (lexical.$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;
       }
@@ -1296,7 +1315,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;
@@ -1319,6 +1337,7 @@ class TableObserver {
     this.focusCell = null;
     this.hasHijackedSelectionStyles = false;
     this.trackTable();
+    this.isSelecting = false;
   }
   getTable() {
     return this.table;
@@ -1458,7 +1477,7 @@ class TableObserver {
       this.focusY = cellY;
       if (this.isHighlightingCells) {
         const focusTableCellNode = lexical.$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;
@@ -1556,6 +1575,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) {
@@ -1564,6 +1584,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) {
@@ -1577,17 +1615,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);
@@ -1655,18 +1687,6 @@ function applyTableHandlers(tableNode, tableElement, editor, hasTabHandler) {
         // TODO: Fix Delete Line in Table Cells.
         return true;
       }
-      if (command === lexical.DELETE_CHARACTER_COMMAND || command === lexical.DELETE_WORD_COMMAND) {
-        if (selection.isCollapsed() && selection.anchor.offset === 0) {
-          if (nearestElementNode !== topLevelCellElementNode) {
-            const children = nearestElementNode.getChildren();
-            const newParagraphNode = lexical.$createParagraphNode();
-            children.forEach(child => newParagraphNode.append(child));
-            nearestElementNode.replace(newParagraphNode);
-            nearestElementNode.getWritable().__parent = tableCellNode.getKey();
-            return true;
-          }
-        }
-      }
     }
     return false;
   };
@@ -1752,6 +1772,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, [lexical.$createTextNode(payload)]);
+          return true;
+        }
+      }
     }
     return false;
   }, lexical.COMMAND_PRIORITY_CRITICAL));
@@ -1882,7 +1909,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');
+        }
         lexical.$setSelection(newSelection);
         $addHighlightStyleToTable(editor, tableObserver);
       } else if (isWithinTable) {
@@ -1891,6 +1922,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 = lexical.$getNearestNodeFromDOMNode(domSelection.focusNode);
+        const isFocusOutside = focusNode && !tableNode.is($findTableNode(focusNode));
+        const anchorNode = lexical.$getNearestNodeFromDOMNode(domSelection.anchorNode);
+        const isAnchorInside = anchorNode && tableNode.is($findTableNode(anchorNode));
+        if (isFocusOutside && isAnchorInside && domSelection.rangeCount > 0) {
+          const newSelection = lexical.$createRangeSelectionFromDom(domSelection, editor);
+          if (newSelection) {
+            newSelection.anchor.set(tableNode.getKey(), selection.isBackward() ? tableNode.getChildrenSize() : 0, 'element');
+            domSelection.removeAllRanges();
+            lexical.$setSelection(newSelection);
+          }
         }
       }
     }
@@ -1909,6 +1968,18 @@ function applyTableHandlers(tableNode, tableElement, editor, hasTabHandler) {
     }
     return false;
   }, lexical.COMMAND_PRIORITY_CRITICAL));
+  tableObserver.listenersToRemove.add(editor.registerCommand(lexical.INSERT_PARAGRAPH_COMMAND, () => {
+    const selection = lexical.$getSelection();
+    if (!lexical.$isRangeSelection(selection) || !selection.isCollapsed() || !$isSelectionInTable(selection, tableNode)) {
+      return false;
+    }
+    const edgePosition = $getTableEdgeCursorPosition(editor, selection, tableNode);
+    if (edgePosition) {
+      $insertParagraphAtTableEdge(edgePosition, tableNode);
+      return true;
+    }
+    return false;
+  }, lexical.COMMAND_PRIORITY_CRITICAL));
   return tableObserver;
 }
 function attachTableObserverToTableElement(tableElement, tableObserver) {
@@ -2165,14 +2236,31 @@ function $findTableNode(node) {
 function $handleArrowKey(editor, event, direction, tableNode, tableObserver) {
   const selection = lexical.$getSelection();
   if (!$isSelectionInTable(selection, tableNode)) {
+    if (direction === 'backward' && lexical.$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 = utils.$findMatchingParent(anchorNode, n => lexical.$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 (lexical.$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
@@ -2190,6 +2278,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) {
@@ -2261,6 +2361,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 = utils.$findMatchingParent(anchorNode, n => lexical.$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 = utils.$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 = utils.$findMatchingParent(anchorNode, n => lexical.$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 = lexical.$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 = utils.$findMatchingParent(selection.anchor.getNode(), n => $isTableCellNode(n));
+  if (!anchorCellNode) {
+    return undefined;
+  }
+  const parentTable = utils.$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.