@lexical/table 0.14.2 → 0.14.3

package/LexicalTable.dev.js

@@ -1296,7 +1296,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 +1318,7 @@ class TableObserver {
     this.focusCell = null;
     this.hasHijackedSelectionStyles = false;
     this.trackTable();
+    this.isSelecting = false;
   }
   getTable() {
     return this.table;
@@ -1458,7 +1458,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 +1556,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 +1565,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 +1596,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);
@@ -1752,6 +1765,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 +1902,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 +1915,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 +1961,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 +2229,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 +2271,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 +2354,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.

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, 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, $createRangeSelectionFromDom, INSERT_PARAGRAPH_COMMAND } from 'lexical';
 
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
@@ -1294,7 +1294,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 +1316,7 @@ class TableObserver {
     this.focusCell = null;
     this.hasHijackedSelectionStyles = false;
     this.trackTable();
+    this.isSelecting = false;
   }
   getTable() {
     return this.table;
@@ -1456,7 +1456,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 +1554,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 +1563,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 +1594,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);
@@ -1750,6 +1763,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 +1900,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 +1913,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 +1959,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 +2227,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 +2269,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 +2352,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;