@lexical/table 0.47.0 → 0.47.1-nightly.20260713.0

package/dist/LexicalTable.dev.js

@@ -2497,6 +2497,27 @@ function $getTableNodeByKeyOrThrow(key) {
 const isPointerDownOnEvent = event => {
   return (event.buttons & 1) === 1;
 };
+
+// Distance (px) from a scroll container edge at which drag auto-scroll kicks
+// in, and the maximum scroll delta applied per animation frame.
+const AUTO_SCROLL_EDGE_ZONE = 40;
+const AUTO_SCROLL_MAX_STEP = 18;
+
+// Given a pointer position and the start/end edges of a scroll container on one
+// axis, return the signed per-frame scroll delta: negative near the start edge,
+// positive near the end edge, 0 while outside both edge zones. The delta ramps
+// up the deeper the pointer is into the zone (and is capped once it reaches or
+// passes the edge).
+function autoScrollStep(pos, start, end) {
+  const speed = depth => Math.max(1, Math.ceil(Math.min(AUTO_SCROLL_EDGE_ZONE, depth) / AUTO_SCROLL_EDGE_ZONE * AUTO_SCROLL_MAX_STEP));
+  if (pos <= start + AUTO_SCROLL_EDGE_ZONE) {
+    return -speed(start + AUTO_SCROLL_EDGE_ZONE - pos);
+  }
+  if (pos >= end - AUTO_SCROLL_EDGE_ZONE) {
+    return speed(pos - (end - AUTO_SCROLL_EDGE_ZONE));
+  }
+  return 0;
+}
 function isHTMLTableElement(el) {
   return lexical.isHTMLElement(el) && el.nodeName === 'TABLE';
 }
@@ -2588,22 +2609,177 @@ function $handleTableClick(editor, event, selectedDOMCell, tableElement, tableOb
         tableObserver.$setAnchorCellForSelection(startingCell);
       });
     }
-    const onPointerUp = () => {
+    let lastClientX = event.clientX;
+    let lastClientY = event.clientY;
+    let autoScrollRafId = null;
+    const stopSelecting = () => {
       tableObserver.isSelecting = false;
+      if (autoScrollRafId !== null) {
+        editorWindow.cancelAnimationFrame(autoScrollRafId);
+        autoScrollRafId = null;
+      }
       editorWindow.removeEventListener('pointerup', onPointerUp);
       editorWindow.removeEventListener('pointermove', onPointerMove);
     };
+
+    // Resolve the table cell under the given viewport coordinates via the
+    // table's own root so elementsFromPoint isn't retargeted; narrow with the
+    // type guards rather than casting so the detached-table case (Node) falls
+    // through to no hit-test.
+    const resolveFocusCellFromPoint = (clientX, clientY) => {
+      const tableRoot = tableElement.getRootNode();
+      if (!lexical.isDOMDocumentNode(tableRoot) && !lexical.isDOMShadowRoot(tableRoot)) {
+        return null;
+      }
+      for (const el of tableRoot.elementsFromPoint(clientX, clientY)) {
+        const cell = getDOMCellInTableFromTarget(tableElement, el);
+        if (cell) {
+          return cell;
+        }
+      }
+      return null;
+    };
+    const applyFocusCell = (focusCell, override) => {
+      // Fallback: set anchor if still missing (handles race conditions)
+      if (tableObserver.anchorCell === null) {
+        editor.update(() => {
+          tableObserver.$setAnchorCellForSelection(focusCell);
+        });
+      }
+      if (tableObserver.focusCell === null || focusCell.elem !== tableObserver.focusCell.elem) {
+        tableObservers.setNextFocus({
+          focusCell,
+          override,
+          tableKey: tableObserver.tableNodeKey
+        });
+        editor.dispatchCommand(lexical.SELECTION_CHANGE_COMMAND, undefined);
+      }
+    };
+
+    // Walk up from the table to the nearest ancestor that can actually scroll
+    // on the requested axis (the scrollable-tables wrapper for 'x'). Returns
+    // null when none is found, in which case the caller may fall back to the
+    // window.
+    const findScrollContainer = axis => {
+      for (let el = tableElement.parentElement; el; el = el.parentElement) {
+        const canScroll = axis === 'x' ? el.scrollWidth > el.clientWidth : el.scrollHeight > el.clientHeight;
+        if (canScroll) {
+          const style = editorWindow.getComputedStyle(el);
+          const overflow = axis === 'x' ? style.overflowX : style.overflowY;
+          if (overflow === 'auto' || overflow === 'scroll') {
+            return el;
+          }
+        }
+      }
+      return null;
+    };
+
+    // Scroll `container` (or the window when null) on `axis` if the pointer is
+    // within the edge zone. Returns whether it actually scrolled.
+    const scrollAxis = (container, pos, axis) => {
+      let start;
+      let end;
+      if (container === null) {
+        start = 0;
+        end = axis === 'x' ? editorWindow.innerWidth : editorWindow.innerHeight;
+      } else {
+        const rect = container.getBoundingClientRect();
+        start = axis === 'x' ? rect.left : rect.top;
+        end = axis === 'x' ? rect.right : rect.bottom;
+      }
+      const step = autoScrollStep(pos, start, end);
+      if (step === 0) {
+        return false;
+      }
+      if (container === null) {
+        const before = axis === 'x' ? editorWindow.scrollX : editorWindow.scrollY;
+        editorWindow.scrollBy(axis === 'x' ? step : 0, axis === 'x' ? 0 : step);
+        return (axis === 'x' ? editorWindow.scrollX : editorWindow.scrollY) !== before;
+      }
+      if (axis === 'x') {
+        const before = container.scrollLeft;
+        container.scrollLeft += step;
+        return container.scrollLeft !== before;
+      }
+      const before = container.scrollTop;
+      container.scrollTop += step;
+      return container.scrollTop !== before;
+    };
+
+    // Clamp the last pointer position into the visible bounds of the scroll
+    // container(s) so a pointer dragged past an edge still hit-tests onto the
+    // newly-revealed cell instead of empty space beyond the table.
+    const clampHitPoint = (hContainer, vContainer) => {
+      let x = lastClientX;
+      let y = lastClientY;
+      if (hContainer === null) {
+        x = Math.min(Math.max(x, 1), editorWindow.innerWidth - 1);
+      } else {
+        const rect = hContainer.getBoundingClientRect();
+        x = Math.min(Math.max(x, rect.left + 1), rect.right - 1);
+      }
+      if (vContainer === null) {
+        y = Math.min(Math.max(y, 1), editorWindow.innerHeight - 1);
+      } else {
+        const rect = vContainer.getBoundingClientRect();
+        y = Math.min(Math.max(y, rect.top + 1), rect.bottom - 1);
+      }
+      return [x, y];
+    };
+    const isNearScrollEdge = () => {
+      const hContainer = findScrollContainer('x');
+      if (hContainer !== null) {
+        const rect = hContainer.getBoundingClientRect();
+        if (autoScrollStep(lastClientX, rect.left, rect.right) !== 0) {
+          return true;
+        }
+      }
+      const vContainer = findScrollContainer('y');
+      const vStart = vContainer === null ? 0 : vContainer.getBoundingClientRect().top;
+      const vEnd = vContainer === null ? editorWindow.innerHeight : vContainer.getBoundingClientRect().bottom;
+      return autoScrollStep(lastClientY, vStart, vEnd) !== 0;
+    };
+    const tickAutoScroll = () => {
+      autoScrollRafId = null;
+      if (!tableObserver.isSelecting) {
+        return;
+      }
+      const hContainer = findScrollContainer('x');
+      const vContainer = findScrollContainer('y');
+      // Only the table's own wrapper scrolls horizontally; pages don't
+      // auto-scroll sideways. Vertically we fall back to the window.
+      const scrolledX = hContainer !== null && scrollAxis(hContainer, lastClientX, 'x');
+      const scrolledY = scrollAxis(vContainer, lastClientY, 'y');
+      if (scrolledX || scrolledY) {
+        const [hitX, hitY] = clampHitPoint(hContainer, vContainer);
+        const focusCell = resolveFocusCellFromPoint(hitX, hitY);
+        if (focusCell) {
+          applyFocusCell(focusCell, false);
+        }
+        autoScrollRafId = editorWindow.requestAnimationFrame(tickAutoScroll);
+      }
+    };
+    const maybeStartAutoScroll = () => {
+      // Touch taps don't initiate table selection, so they shouldn't scroll.
+      if (autoScrollRafId !== null || tableObserver.pointerType === 'touch' || !isNearScrollEdge()) {
+        return;
+      }
+      autoScrollRafId = editorWindow.requestAnimationFrame(tickAutoScroll);
+    };
+    const onPointerUp = () => {
+      stopSelecting();
+    };
     const onPointerMove = moveEvent => {
       if (!isPointerDownOnEvent(moveEvent) && tableObserver.isSelecting) {
-        tableObserver.isSelecting = false;
-        editorWindow.removeEventListener('pointerup', onPointerUp);
-        editorWindow.removeEventListener('pointermove', onPointerMove);
+        stopSelecting();
         return;
       }
       const moveTarget = lexical.getComposedEventTarget(moveEvent);
       if (!lexical.isDOMNode(moveTarget)) {
         return;
       }
+      lastClientX = moveEvent.clientX;
+      lastClientY = moveEvent.clientY;
       let focusCell = null;
       // In firefox the moveEvent.target may be captured so we must always
       // consult the coordinates #7245
@@ -2611,37 +2787,14 @@ function $handleTableClick(editor, event, selectedDOMCell, tableElement, tableOb
       if (override) {
         focusCell = getDOMCellInTableFromTarget(tableElement, moveTarget);
       } else {
-        // Resolve via the table's own root so elementsFromPoint isn't
-        // retargeted; narrow with the type guards rather than casting so the
-        // detached-table case (Node) falls through to no hit-test.
-        const tableRoot = tableElement.getRootNode();
-        if (!lexical.isDOMDocumentNode(tableRoot) && !lexical.isDOMShadowRoot(tableRoot)) {
-          return;
-        }
-        for (const el of tableRoot.elementsFromPoint(moveEvent.clientX, moveEvent.clientY)) {
-          focusCell = getDOMCellInTableFromTarget(tableElement, el);
-          if (focusCell) {
-            break;
-          }
-        }
+        focusCell = resolveFocusCellFromPoint(moveEvent.clientX, moveEvent.clientY);
       }
       if (focusCell) {
-        const anchorCell = focusCell;
-        // Fallback: set anchor if still missing (handles race conditions)
-        if (tableObserver.anchorCell === null) {
-          editor.update(() => {
-            tableObserver.$setAnchorCellForSelection(anchorCell);
-          });
-        }
-        if (tableObserver.focusCell === null || focusCell.elem !== tableObserver.focusCell.elem) {
-          tableObservers.setNextFocus({
-            focusCell,
-            override,
-            tableKey: tableObserver.tableNodeKey
-          });
-          editor.dispatchCommand(lexical.SELECTION_CHANGE_COMMAND, undefined);
-        }
+        applyFocusCell(focusCell, override);
       }
+      // Keep the selection reachable when dragging toward/past an edge of a
+      // scrollable table (#7153).
+      maybeStartAutoScroll();
     };
     editorWindow.addEventListener('pointerup', onPointerUp, tableObserver.listenerOptions);
     editorWindow.addEventListener('pointermove', onPointerMove, tableObserver.listenerOptions);

package/dist/LexicalTable.dev.mjs

@@ -2495,6 +2495,27 @@ function $getTableNodeByKeyOrThrow(key) {
 const isPointerDownOnEvent = event => {
   return (event.buttons & 1) === 1;
 };
+
+// Distance (px) from a scroll container edge at which drag auto-scroll kicks
+// in, and the maximum scroll delta applied per animation frame.
+const AUTO_SCROLL_EDGE_ZONE = 40;
+const AUTO_SCROLL_MAX_STEP = 18;
+
+// Given a pointer position and the start/end edges of a scroll container on one
+// axis, return the signed per-frame scroll delta: negative near the start edge,
+// positive near the end edge, 0 while outside both edge zones. The delta ramps
+// up the deeper the pointer is into the zone (and is capped once it reaches or
+// passes the edge).
+function autoScrollStep(pos, start, end) {
+  const speed = depth => Math.max(1, Math.ceil(Math.min(AUTO_SCROLL_EDGE_ZONE, depth) / AUTO_SCROLL_EDGE_ZONE * AUTO_SCROLL_MAX_STEP));
+  if (pos <= start + AUTO_SCROLL_EDGE_ZONE) {
+    return -speed(start + AUTO_SCROLL_EDGE_ZONE - pos);
+  }
+  if (pos >= end - AUTO_SCROLL_EDGE_ZONE) {
+    return speed(pos - (end - AUTO_SCROLL_EDGE_ZONE));
+  }
+  return 0;
+}
 function isHTMLTableElement(el) {
   return isHTMLElement(el) && el.nodeName === 'TABLE';
 }
@@ -2586,22 +2607,177 @@ function $handleTableClick(editor, event, selectedDOMCell, tableElement, tableOb
         tableObserver.$setAnchorCellForSelection(startingCell);
       });
     }
-    const onPointerUp = () => {
+    let lastClientX = event.clientX;
+    let lastClientY = event.clientY;
+    let autoScrollRafId = null;
+    const stopSelecting = () => {
       tableObserver.isSelecting = false;
+      if (autoScrollRafId !== null) {
+        editorWindow.cancelAnimationFrame(autoScrollRafId);
+        autoScrollRafId = null;
+      }
       editorWindow.removeEventListener('pointerup', onPointerUp);
       editorWindow.removeEventListener('pointermove', onPointerMove);
     };
+
+    // Resolve the table cell under the given viewport coordinates via the
+    // table's own root so elementsFromPoint isn't retargeted; narrow with the
+    // type guards rather than casting so the detached-table case (Node) falls
+    // through to no hit-test.
+    const resolveFocusCellFromPoint = (clientX, clientY) => {
+      const tableRoot = tableElement.getRootNode();
+      if (!isDOMDocumentNode(tableRoot) && !isDOMShadowRoot(tableRoot)) {
+        return null;
+      }
+      for (const el of tableRoot.elementsFromPoint(clientX, clientY)) {
+        const cell = getDOMCellInTableFromTarget(tableElement, el);
+        if (cell) {
+          return cell;
+        }
+      }
+      return null;
+    };
+    const applyFocusCell = (focusCell, override) => {
+      // Fallback: set anchor if still missing (handles race conditions)
+      if (tableObserver.anchorCell === null) {
+        editor.update(() => {
+          tableObserver.$setAnchorCellForSelection(focusCell);
+        });
+      }
+      if (tableObserver.focusCell === null || focusCell.elem !== tableObserver.focusCell.elem) {
+        tableObservers.setNextFocus({
+          focusCell,
+          override,
+          tableKey: tableObserver.tableNodeKey
+        });
+        editor.dispatchCommand(SELECTION_CHANGE_COMMAND, undefined);
+      }
+    };
+
+    // Walk up from the table to the nearest ancestor that can actually scroll
+    // on the requested axis (the scrollable-tables wrapper for 'x'). Returns
+    // null when none is found, in which case the caller may fall back to the
+    // window.
+    const findScrollContainer = axis => {
+      for (let el = tableElement.parentElement; el; el = el.parentElement) {
+        const canScroll = axis === 'x' ? el.scrollWidth > el.clientWidth : el.scrollHeight > el.clientHeight;
+        if (canScroll) {
+          const style = editorWindow.getComputedStyle(el);
+          const overflow = axis === 'x' ? style.overflowX : style.overflowY;
+          if (overflow === 'auto' || overflow === 'scroll') {
+            return el;
+          }
+        }
+      }
+      return null;
+    };
+
+    // Scroll `container` (or the window when null) on `axis` if the pointer is
+    // within the edge zone. Returns whether it actually scrolled.
+    const scrollAxis = (container, pos, axis) => {
+      let start;
+      let end;
+      if (container === null) {
+        start = 0;
+        end = axis === 'x' ? editorWindow.innerWidth : editorWindow.innerHeight;
+      } else {
+        const rect = container.getBoundingClientRect();
+        start = axis === 'x' ? rect.left : rect.top;
+        end = axis === 'x' ? rect.right : rect.bottom;
+      }
+      const step = autoScrollStep(pos, start, end);
+      if (step === 0) {
+        return false;
+      }
+      if (container === null) {
+        const before = axis === 'x' ? editorWindow.scrollX : editorWindow.scrollY;
+        editorWindow.scrollBy(axis === 'x' ? step : 0, axis === 'x' ? 0 : step);
+        return (axis === 'x' ? editorWindow.scrollX : editorWindow.scrollY) !== before;
+      }
+      if (axis === 'x') {
+        const before = container.scrollLeft;
+        container.scrollLeft += step;
+        return container.scrollLeft !== before;
+      }
+      const before = container.scrollTop;
+      container.scrollTop += step;
+      return container.scrollTop !== before;
+    };
+
+    // Clamp the last pointer position into the visible bounds of the scroll
+    // container(s) so a pointer dragged past an edge still hit-tests onto the
+    // newly-revealed cell instead of empty space beyond the table.
+    const clampHitPoint = (hContainer, vContainer) => {
+      let x = lastClientX;
+      let y = lastClientY;
+      if (hContainer === null) {
+        x = Math.min(Math.max(x, 1), editorWindow.innerWidth - 1);
+      } else {
+        const rect = hContainer.getBoundingClientRect();
+        x = Math.min(Math.max(x, rect.left + 1), rect.right - 1);
+      }
+      if (vContainer === null) {
+        y = Math.min(Math.max(y, 1), editorWindow.innerHeight - 1);
+      } else {
+        const rect = vContainer.getBoundingClientRect();
+        y = Math.min(Math.max(y, rect.top + 1), rect.bottom - 1);
+      }
+      return [x, y];
+    };
+    const isNearScrollEdge = () => {
+      const hContainer = findScrollContainer('x');
+      if (hContainer !== null) {
+        const rect = hContainer.getBoundingClientRect();
+        if (autoScrollStep(lastClientX, rect.left, rect.right) !== 0) {
+          return true;
+        }
+      }
+      const vContainer = findScrollContainer('y');
+      const vStart = vContainer === null ? 0 : vContainer.getBoundingClientRect().top;
+      const vEnd = vContainer === null ? editorWindow.innerHeight : vContainer.getBoundingClientRect().bottom;
+      return autoScrollStep(lastClientY, vStart, vEnd) !== 0;
+    };
+    const tickAutoScroll = () => {
+      autoScrollRafId = null;
+      if (!tableObserver.isSelecting) {
+        return;
+      }
+      const hContainer = findScrollContainer('x');
+      const vContainer = findScrollContainer('y');
+      // Only the table's own wrapper scrolls horizontally; pages don't
+      // auto-scroll sideways. Vertically we fall back to the window.
+      const scrolledX = hContainer !== null && scrollAxis(hContainer, lastClientX, 'x');
+      const scrolledY = scrollAxis(vContainer, lastClientY, 'y');
+      if (scrolledX || scrolledY) {
+        const [hitX, hitY] = clampHitPoint(hContainer, vContainer);
+        const focusCell = resolveFocusCellFromPoint(hitX, hitY);
+        if (focusCell) {
+          applyFocusCell(focusCell, false);
+        }
+        autoScrollRafId = editorWindow.requestAnimationFrame(tickAutoScroll);
+      }
+    };
+    const maybeStartAutoScroll = () => {
+      // Touch taps don't initiate table selection, so they shouldn't scroll.
+      if (autoScrollRafId !== null || tableObserver.pointerType === 'touch' || !isNearScrollEdge()) {
+        return;
+      }
+      autoScrollRafId = editorWindow.requestAnimationFrame(tickAutoScroll);
+    };
+    const onPointerUp = () => {
+      stopSelecting();
+    };
     const onPointerMove = moveEvent => {
       if (!isPointerDownOnEvent(moveEvent) && tableObserver.isSelecting) {
-        tableObserver.isSelecting = false;
-        editorWindow.removeEventListener('pointerup', onPointerUp);
-        editorWindow.removeEventListener('pointermove', onPointerMove);
+        stopSelecting();
         return;
       }
       const moveTarget = getComposedEventTarget(moveEvent);
       if (!isDOMNode(moveTarget)) {
         return;
       }
+      lastClientX = moveEvent.clientX;
+      lastClientY = moveEvent.clientY;
       let focusCell = null;
       // In firefox the moveEvent.target may be captured so we must always
       // consult the coordinates #7245
@@ -2609,37 +2785,14 @@ function $handleTableClick(editor, event, selectedDOMCell, tableElement, tableOb
       if (override) {
         focusCell = getDOMCellInTableFromTarget(tableElement, moveTarget);
       } else {
-        // Resolve via the table's own root so elementsFromPoint isn't
-        // retargeted; narrow with the type guards rather than casting so the
-        // detached-table case (Node) falls through to no hit-test.
-        const tableRoot = tableElement.getRootNode();
-        if (!isDOMDocumentNode(tableRoot) && !isDOMShadowRoot(tableRoot)) {
-          return;
-        }
-        for (const el of tableRoot.elementsFromPoint(moveEvent.clientX, moveEvent.clientY)) {
-          focusCell = getDOMCellInTableFromTarget(tableElement, el);
-          if (focusCell) {
-            break;
-          }
-        }
+        focusCell = resolveFocusCellFromPoint(moveEvent.clientX, moveEvent.clientY);
       }
       if (focusCell) {
-        const anchorCell = focusCell;
-        // Fallback: set anchor if still missing (handles race conditions)
-        if (tableObserver.anchorCell === null) {
-          editor.update(() => {
-            tableObserver.$setAnchorCellForSelection(anchorCell);
-          });
-        }
-        if (tableObserver.focusCell === null || focusCell.elem !== tableObserver.focusCell.elem) {
-          tableObservers.setNextFocus({
-            focusCell,
-            override,
-            tableKey: tableObserver.tableNodeKey
-          });
-          editor.dispatchCommand(SELECTION_CHANGE_COMMAND, undefined);
-        }
+        applyFocusCell(focusCell, override);
       }
+      // Keep the selection reachable when dragging toward/past an edge of a
+      // scrollable table (#7153).
+      maybeStartAutoScroll();
     };
     editorWindow.addEventListener('pointerup', onPointerUp, tableObserver.listenerOptions);
     editorWindow.addEventListener('pointermove', onPointerMove, tableObserver.listenerOptions);