@lexical/table 0.48.0 → 0.48.1-nightly.20260720.0

package/dist/LexicalTable.dev.mjs

@@ -7,7 +7,7 @@
  */
 
 import { ElementNode, $getDocument, addClassNamesToElement, isHTMLElement, $isInlineElementOrDecoratorNode, $isTextNode, $isLineBreakNode, $createParagraphNode, $applyNodeReplacement, createCommand, $createTextNode, $getSelection, $isRangeSelection, $findMatchingParent, $isParagraphNode, $createPoint, $getNodeByKey, $isElementNode, $normalizeSelection__EXPERIMENTAL, isCurrentlyReadOnlyMode, TEXT_TYPE_TO_FORMAT, $getEditor, $setSelection, SELECTION_CHANGE_COMMAND, removeClassNamesFromElement, getDOMSelection, $createRangeSelection, $isRootNode, INSERT_PARAGRAPH_COMMAND, registerEventListener, KEY_ARROW_DOWN_COMMAND, KEY_ARROW_UP_COMMAND, KEY_ARROW_LEFT_COMMAND, KEY_ARROW_RIGHT_COMMAND, COMMAND_PRIORITY_HIGH, KEY_ESCAPE_COMMAND, DELETE_WORD_COMMAND, DELETE_LINE_COMMAND, DELETE_CHARACTER_COMMAND, KEY_BACKSPACE_COMMAND, KEY_DELETE_COMMAND, CUT_COMMAND, PASTE_COMMAND, getComposedEventTarget, isDOMNode, getActiveElement, COPY_COMMAND, FORMAT_TEXT_COMMAND, FORMAT_ELEMENT_COMMAND, CONTROLLED_TEXT_INSERTION_COMMAND, KEY_TAB_COMMAND, FOCUS_COMMAND, $getNearestNodeFromDOMNode, $isRootOrShadowRoot, getDOMSelectionRange, getDOMSelectionPoints, $getPreviousSelection, $caretFromPoint, $isExtendableTextPointCaret, $extendCaretToRange, $isSiblingCaret, $getSiblingCaret, $setPointFromCaret, $normalizeCaret, $createRangeSelectionFromDom, $isChildCaret, $getChildCaret, $getAdjacentChildCaret, IS_FIREFOX, $getNodeByKeyOrThrow, isDOMDocumentNode, isDOMShadowRoot, setDOMStyleFromCSS, setDOMUnmanaged, mergeRegister, COMMAND_PRIORITY_EDITOR, SELECTION_INSERT_CLIPBOARD_NODES_COMMAND, SELECT_ALL_COMMAND, COMMAND_PRIORITY_LOW, CLICK_COMMAND, $getRoot, isHTMLTableRowElement, IS_BOLD, IS_ITALIC, IS_UNDERLINE, IS_STRIKETHROUGH, defineExtension, $fullReconcile, configExtension, safeCast } from 'lexical';
-import { signal, effect, namedSignals } from '@lexical/extension';
+import { getPeerDependencyFromEditor, signal, effect, namedSignals } from '@lexical/extension';
 import { defineImportRule, sel, ImportTextFormat, ImportTextStyle, contextValue, $propagateTextAlignToBlockChildren, CoreImportExtension, DOMImportExtension } from '@lexical/html';
 import { $descendantsMatching, objectKlassEquals, $insertFirst as $insertFirst$1, $insertNodeToNearestRoot, $dfs, $unwrapAndFilterDescendants } from '@lexical/utils';
 import { copyToClipboard, $getClipboardDataFromSelection } from '@lexical/clipboard';
@@ -54,11 +54,20 @@ class TableCellNode extends ElementNode {
   __backgroundColor;
   /** @internal */
   __verticalAlign;
-  static getType() {
-    return 'tablecell';
-  }
-  static clone(node) {
-    return new TableCellNode(node.__headerState, node.__colSpan, node.__width, node.__key);
+  $config() {
+    return this.config('tablecell', {
+      extends: ElementNode,
+      importDOM: {
+        td: () => ({
+          conversion: $convertTableCellNodeElement,
+          priority: 0
+        }),
+        th: () => ({
+          conversion: $convertTableCellNodeElement,
+          priority: 0
+        })
+      }
+    });
   }
   afterCloneFrom(node) {
     super.afterCloneFrom(node);
@@ -69,21 +78,6 @@ class TableCellNode extends ElementNode {
     this.__headerState = node.__headerState;
     this.__width = node.__width;
   }
-  static importDOM() {
-    return {
-      td: node => ({
-        conversion: $convertTableCellNodeElement,
-        priority: 0
-      }),
-      th: node => ({
-        conversion: $convertTableCellNodeElement,
-        priority: 0
-      })
-    };
-  }
-  static importJSON(serializedNode) {
-    return $createTableCellNode().updateFromJSON(serializedNode);
-  }
   updateFromJSON(serializedNode) {
     return super.updateFromJSON(serializedNode).setHeaderStyles(serializedNode.headerState).setColSpan(serializedNode.colSpan || 1).setRowSpan(serializedNode.rowSpan || 1).setWidth(serializedNode.width || undefined).setBackgroundColor(serializedNode.backgroundColor || null).setVerticalAlign(serializedNode.verticalAlign || undefined);
   }
@@ -381,31 +375,28 @@ function formatDevErrorMessage(message) {
 class TableRowNode extends ElementNode {
   /** @internal */
   __height;
-  static getType() {
-    return 'tablerow';
-  }
-  static clone(node) {
-    return new TableRowNode(node.__height, node.__key);
+  $config() {
+    return this.config('tablerow', {
+      extends: ElementNode,
+      importDOM: {
+        tr: () => ({
+          conversion: $convertTableRowElement,
+          priority: 0
+        })
+      }
+    });
   }
   afterCloneFrom(prevNode) {
     super.afterCloneFrom(prevNode);
     this.__height = prevNode.__height;
   }
-  static importDOM() {
-    return {
-      tr: node => ({
-        conversion: $convertTableRowElement,
-        priority: 0
-      })
-    };
-  }
-  static importJSON(serializedNode) {
-    return $createTableRowNode().updateFromJSON(serializedNode);
-  }
   updateFromJSON(serializedNode) {
     return super.updateFromJSON(serializedNode).setHeight(serializedNode.height);
   }
-  constructor(height, key) {
+
+  // `height` carries an explicit `undefined` default so the constructor reports
+  // zero required arguments and `$config` can synthesize the static `clone`.
+  constructor(height = undefined, key) {
     super(key);
     this.__height = height;
   }
@@ -1389,6 +1380,11 @@ function $computeTableCellRectSpans(map, boundary) {
     topSpan
   };
 }
+
+/**
+ * Compute the bounding rectangle of two table cells in a table map,
+ * expanding iteratively to include any merged cells that overlap the boundary.
+ */
 function $computeTableCellRectBoundary(map, cellAMap, cellBMap) {
   // Initial boundaries based on the anchor and focus cells
   let minColumn = Math.min(cellAMap.startColumn, cellBMap.startColumn);
@@ -1897,7 +1893,7 @@ class TableSelection {
     selection.insertNodes(nodes);
   }
 
-  // TODO Deprecate this method. It's confusing when used with colspan|rowspan
+  /** @deprecated Use {@link $computeTableMap} and {@link $computeTableCellRectBoundary} directly. */
   getShape() {
     const {
       anchorCell,
@@ -2009,19 +2005,28 @@ class TableSelection {
     return textContent;
   }
 }
+
+/** Type guard for {@link TableSelection}. */
 function $isTableSelection(x) {
   return x instanceof TableSelection;
 }
+
+/** @deprecated Use {@link $createTableSelectionFrom} instead. */
 function $createTableSelection() {
-  // TODO this is a suboptimal design, it doesn't make sense to have
-  // a table selection that isn't associated with a table. This
-  // constructor should have required arguments and in __DEV__ we
-  // should check that they point to a table and are element points to
-  // cell nodes of that table.
   const anchor = $createPoint('root', 0, 'element');
   const focus = $createPoint('root', 0, 'element');
   return new TableSelection('root', anchor, focus);
 }
+
+/**
+ * Creates a {@link TableSelection} spanning from `anchorCell` to `focusCell`
+ * within `tableNode`. In `__DEV__` mode, validates that both cells belong to
+ * the given table and that the table is attached to the editor state.
+ *
+ * If the current selection is already a TableSelection, it clones and
+ * re-targets it (preserving identity for dirty-checking); otherwise it
+ * constructs a fresh one.
+ */
 function $createTableSelectionFrom(tableNode, anchorCell, focusCell) {
   const tableNodeKey = tableNode.getKey();
   const anchorCellKey = anchorCell.getKey();
@@ -2038,7 +2043,7 @@ function $createTableSelectionFrom(tableNode, anchorCell, focusCell) {
     } // TODO: Check for rectangular grid
   }
   const prevSelection = $getSelection();
-  const nextSelection = $isTableSelection(prevSelection) ? prevSelection.clone() : $createTableSelection();
+  const nextSelection = $isTableSelection(prevSelection) ? prevSelection.clone() : new TableSelection('root', $createPoint('root', 0, 'element'), $createPoint('root', 0, 'element'));
   nextSelection.set(tableNode.getKey(), anchorCell.getKey(), focusCell.getKey());
   return nextSelection;
 }
@@ -2897,7 +2902,7 @@ function applyTableHandlers(tableNode, element, editor, hasTabHandler, tableObse
     }
     return false;
   }, COMMAND_PRIORITY_HIGH));
-  const deleteTextHandler = command => () => {
+  const $deleteTextHandler = () => {
     const selection = $getSelection();
     if (!$isSelectionInTable(selection, tableNode)) {
       return false;
@@ -2905,34 +2910,11 @@ function applyTableHandlers(tableNode, element, editor, hasTabHandler, tableObse
     if ($isTableSelection(selection)) {
       tableObserver.$clearText();
       return true;
-    } else if ($isRangeSelection(selection)) {
-      const tableCellNode = $findParentTableCellNodeInTable(tableNode, selection.anchor.getNode());
-      if (!$isTableCellNode(tableCellNode)) {
-        return false;
-      }
-      const anchorNode = selection.anchor.getNode();
-      const focusNode = selection.focus.getNode();
-      const isAnchorInside = tableNode.isParentOf(anchorNode);
-      const isFocusInside = tableNode.isParentOf(focusNode);
-      const selectionContainsPartialTable = isAnchorInside && !isFocusInside || isFocusInside && !isAnchorInside;
-      if (selectionContainsPartialTable) {
-        tableObserver.$clearText();
-        return true;
-      }
-      const nearestElementNode = $findMatchingParent(selection.anchor.getNode(), n => $isElementNode(n));
-      const topLevelCellElementNode = nearestElementNode && $findMatchingParent(nearestElementNode, n => $isElementNode(n) && $isTableCellNode(n.getParent()));
-      if (!$isElementNode(topLevelCellElementNode) || !$isElementNode(nearestElementNode)) {
-        return false;
-      }
-      if (command === DELETE_LINE_COMMAND && topLevelCellElementNode.getPreviousSibling() === null) {
-        // TODO: Fix Delete Line in Table Cells.
-        return true;
-      }
     }
     return false;
   };
   for (const command of DELETE_TEXT_COMMANDS) {
-    tableObserver.listenersToRemove.add(editor.registerCommand(command, deleteTextHandler(command), COMMAND_PRIORITY_HIGH));
+    tableObserver.listenersToRemove.add(editor.registerCommand(command, $deleteTextHandler, COMMAND_PRIORITY_HIGH));
   }
   const $deleteCellHandler = event => {
     const selection = $getSelection();
@@ -3045,11 +3027,6 @@ function applyTableHandlers(tableNode, element, editor, hasTabHandler, tableObse
     if ($isTableSelection(selection)) {
       tableObserver.$formatCells(payload);
       return true;
-    } else if ($isRangeSelection(selection)) {
-      const tableCellNode = $findMatchingParent(selection.anchor.getNode(), n => $isTableCellNode(n));
-      if (!$isTableCellNode(tableCellNode)) {
-        return false;
-      }
     }
     return false;
   }, COMMAND_PRIORITY_HIGH));
@@ -4195,10 +4172,167 @@ function alignTableElement(dom, config, formatType) {
   removeClassNamesFromElement(dom, ...removeClasses);
   addClassNamesToElement(dom, ...addClasses);
 }
+function $createScrollableWrapper(tableElement, config, hideNativeScrollbar) {
+  const wrapper = $getDocument().createElement('div');
+  const classes = config.theme.tableScrollableWrapper;
+  if (classes) {
+    addClassNamesToElement(wrapper, classes);
+  } else {
+    wrapper.style.overflowX = 'auto';
+  }
+  if (hideNativeScrollbar) {
+    wrapper.style.scrollbarWidth = 'none';
+  }
+  wrapper.appendChild(tableElement);
+  return wrapper;
+}
+function $createStickyScrollbar(config) {
+  const doc = $getDocument();
+  const scrollbar = doc.createElement('div');
+  const classes = config.theme.tableStickyScrollbar;
+  if (classes) {
+    addClassNamesToElement(scrollbar, classes);
+  } else {
+    scrollbar.style.position = 'sticky';
+    scrollbar.style.bottom = '0';
+    scrollbar.style.overflowX = 'scroll';
+    scrollbar.style.overflowY = 'hidden';
+  }
+  scrollbar.style.display = 'none';
+  scrollbar.setAttribute('aria-hidden', 'true');
+  scrollbar.tabIndex = -1;
+  const spacer = doc.createElement('div');
+  spacer.style.height = '1px';
+  spacer.style.width = '0px';
+  scrollbar.appendChild(spacer);
+  return scrollbar;
+}
+// Unthemed sticky scrollbars whose environment cannot render a persistent
+// proxy scrollbar (overlay scrollbars reserve no height and show no idle
+// thumb), permanently hidden in favor of the wrapper's native scrollbar.
+const overlayStickyScrollbars = new WeakSet();
+function measureScrollbarThickness(scrollbar) {
+  const prevDisplay = scrollbar.style.display;
+  scrollbar.style.display = '';
+  const thickness = scrollbar.offsetHeight - scrollbar.clientHeight;
+  scrollbar.style.display = prevDisplay;
+  return thickness;
+}
+function attachStickyScrollbarListeners(elements) {
+  const {
+    scrollable,
+    scrollbar,
+    tableElement
+  } = elements;
+  // A themed scrollbar (theme.tableStickyScrollbar, detectable by its
+  // classes) is the integrator's responsibility to keep visible (e.g. via
+  // ::-webkit-scrollbar height or scrollbar-width). The unthemed fallback
+  // relies on classic native scrollbars for its height, so where the
+  // environment renders overlay scrollbars (no reserved thickness — e.g.
+  // macOS "show scrollbars when scrolling", or non-layout environments like
+  // jsdom) the proxy would be an invisible strip: keep it hidden and
+  // restore the wrapper's native scrollbar instead of presenting no scroll
+  // affordance at all.
+  if (scrollbar.classList.length === 0 && measureScrollbarThickness(scrollbar) === 0) {
+    overlayStickyScrollbars.add(scrollbar);
+    scrollbar.style.display = 'none';
+    scrollable.style.scrollbarWidth = 'auto';
+    return () => {};
+  }
+  const onWrapperScroll = () => {
+    if (scrollbar.scrollLeft !== scrollable.scrollLeft) {
+      scrollbar.scrollLeft = scrollable.scrollLeft;
+    }
+  };
+  const onScrollbarScroll = () => {
+    if (scrollable.scrollLeft !== scrollbar.scrollLeft) {
+      scrollable.scrollLeft = scrollbar.scrollLeft;
+    }
+  };
+  scrollable.addEventListener('scroll', onWrapperScroll, {
+    passive: true
+  });
+  scrollbar.addEventListener('scroll', onScrollbarScroll, {
+    passive: true
+  });
+  let resizeObserver = null;
+  if (typeof ResizeObserver !== 'undefined') {
+    resizeObserver = new ResizeObserver(() => {
+      syncStickyScrollbar(scrollable, scrollbar);
+    });
+    resizeObserver.observe(scrollable);
+    resizeObserver.observe(tableElement);
+  }
+  const cleanup = () => {
+    scrollable.removeEventListener('scroll', onWrapperScroll);
+    scrollbar.removeEventListener('scroll', onScrollbarScroll);
+    if (resizeObserver) {
+      resizeObserver.disconnect();
+    }
+  };
+  syncStickyScrollbar(scrollable, scrollbar);
+  return cleanup;
+}
+function syncStickyScrollbar(scrollable, scrollbar) {
+  if (overlayStickyScrollbars.has(scrollbar)) {
+    return;
+  }
+  const spacer = scrollbar.firstElementChild;
+  if (!spacer || !isHTMLElement(spacer) || !scrollable.isConnected) {
+    return;
+  }
+  const view = scrollable.ownerDocument.defaultView;
+  if (!view) {
+    scrollbar.style.display = 'none';
+    return;
+  }
+  // All layout reads happen before any write so a sync forces at most one
+  // reflow, and both metrics come from the same element so their rounding
+  // can't disagree at fractional zoom levels.
+  const overflowX = view.getComputedStyle(scrollable).overflowX;
+  const isScrollable = overflowX === 'auto' || overflowX === 'scroll';
+  const scrollWidth = scrollable.scrollWidth;
+  const clientWidth = scrollable.clientWidth;
+  const spacerWidth = scrollWidth + 'px';
+  if (spacer.style.width !== spacerWidth) {
+    spacer.style.width = spacerWidth;
+  }
+  const hasOverflow = isScrollable && scrollWidth > clientWidth;
+  scrollbar.style.display = hasOverflow ? '' : 'none';
+}
+function findStickyScrollbarElements(dom) {
+  if (!dom.hasAttribute('data-lexical-sticky-scrollbar')) {
+    return null;
+  }
+  const firstChild = dom.firstElementChild;
+  if (!isHTMLDivElement(firstChild)) {
+    return null;
+  }
+  const tableElement = firstChild.querySelector(':scope > table');
+  if (!isHTMLTableElement(tableElement)) {
+    return null;
+  }
+  const scrollbar = firstChild.nextElementSibling;
+  if (!isHTMLDivElement(scrollbar)) {
+    return null;
+  }
+  return {
+    scrollable: firstChild,
+    scrollbar,
+    tableElement
+  };
+}
 const scrollableEditors = new WeakSet();
 function $isScrollableTablesActive(editor = $getEditor()) {
   return scrollableEditors.has(editor);
 }
+function $isStickyScrollbarActive(editor = $getEditor()) {
+  const dep = getPeerDependencyFromEditor(editor, '@lexical/table/Table');
+  // peek() so a reconcile that runs inside a signals effect (e.g. via a
+  // discrete update or force-commit read) does not subscribe that effect to
+  // the table config; re-rendering on change is the TableExtension's job.
+  return dep ? dep.output.hasStickyScrollbar.peek() && dep.output.hasHorizontalScroll.peek() : false;
+}
 function setScrollableTablesActive(editor, active) {
   if (active) {
     if (!editor._config.theme.tableScrollableWrapper) {
@@ -4213,12 +4347,24 @@ function setScrollableTablesActive(editor, active) {
 /** @noInheritDoc */
 class TableNode extends ElementNode {
   /** @internal */
-  __rowStriping;
-  __frozenColumnCount;
-  __frozenRowCount;
-  __colWidths;
-  static getType() {
-    return 'table';
+  __rowStriping = false;
+  __frozenColumnCount = 0;
+  __frozenRowCount = 0;
+  // Initialized unconditionally (not `__colWidths?: ...`) so a freshly
+  // constructed instance always has the own property — `@lexical/yjs` derives a
+  // node's syncable properties from `Object.keys(new Klass())`, so an
+  // uninitialized optional field would silently drop out of collab sync.
+  __colWidths = undefined;
+  $config() {
+    return this.config('table', {
+      extends: ElementNode,
+      importDOM: {
+        table: () => ({
+          conversion: $convertTableElement,
+          priority: 1
+        })
+      }
+    });
   }
   getColWidths() {
     const self = this.getLatest();
@@ -4230,9 +4376,6 @@ class TableNode extends ElementNode {
     self.__colWidths = colWidths !== undefined && __DEV__ ? Object.freeze(colWidths) : colWidths;
     return self;
   }
-  static clone(node) {
-    return new TableNode(node.__key);
-  }
   afterCloneFrom(prevNode) {
     super.afterCloneFrom(prevNode);
     this.__colWidths = prevNode.__colWidths;
@@ -4240,27 +4383,9 @@ class TableNode extends ElementNode {
     this.__frozenColumnCount = prevNode.__frozenColumnCount;
     this.__frozenRowCount = prevNode.__frozenRowCount;
   }
-  static importDOM() {
-    return {
-      table: _node => ({
-        conversion: $convertTableElement,
-        priority: 1
-      })
-    };
-  }
-  static importJSON(serializedNode) {
-    return $createTableNode().updateFromJSON(serializedNode);
-  }
   updateFromJSON(serializedNode) {
     return super.updateFromJSON(serializedNode).setRowStriping(serializedNode.rowStriping || false).setFrozenColumns(serializedNode.frozenColumnCount || 0).setFrozenRows(serializedNode.frozenRowCount || 0).setColWidths(serializedNode.colWidths);
   }
-  constructor(key) {
-    super(key);
-    this.__rowStriping = false;
-    this.__frozenColumnCount = 0;
-    this.__frozenRowCount = 0;
-    this.__colWidths = undefined;
-  }
   exportJSON() {
     return {
       ...super.exportJSON(),
@@ -4291,16 +4416,19 @@ class TableNode extends ElementNode {
     addClassNamesToElement(tableElement, config.theme.table);
     this.updateTableElement(null, tableElement, config);
     if ($isScrollableTablesActive(editor)) {
-      const wrapperElement = $getDocument().createElement('div');
-      const classes = config.theme.tableScrollableWrapper;
-      if (classes) {
-        addClassNamesToElement(wrapperElement, classes);
-      } else {
-        wrapperElement.style.overflowX = 'auto';
-      }
-      wrapperElement.appendChild(tableElement);
-      this.updateTableWrapper(null, wrapperElement, tableElement, config);
-      return wrapperElement;
+      const hasStickyScrollbar = $isStickyScrollbarActive(editor);
+      const scrollableWrapper = $createScrollableWrapper(tableElement, config, hasStickyScrollbar);
+      this.updateTableWrapper(null, scrollableWrapper, tableElement, config);
+      if (hasStickyScrollbar) {
+        const stickyScrollbar = $createStickyScrollbar(config);
+        const outerWrapper = $getDocument().createElement('div');
+        outerWrapper.setAttribute('data-lexical-sticky-scrollbar', 'true');
+        outerWrapper.appendChild(scrollableWrapper);
+        outerWrapper.appendChild(stickyScrollbar);
+        setDOMUnmanaged(stickyScrollbar);
+        return outerWrapper;
+      }
+      return scrollableWrapper;
     }
     return tableElement;
   }
@@ -4332,7 +4460,16 @@ class TableNode extends ElementNode {
       return true;
     }
     if (isHTMLDivElement(dom)) {
-      this.updateTableWrapper(prevNode, dom, tableElement, config);
+      const hasStickyDom = dom.hasAttribute('data-lexical-sticky-scrollbar');
+      if (hasStickyDom !== $isStickyScrollbarActive()) {
+        return true;
+      }
+      // The scrollable wrapper is the table's immediate parent in both
+      // layouts (the inner div in sticky mode, dom itself otherwise).
+      const scrollable = tableElement.parentElement;
+      if (isHTMLDivElement(scrollable)) {
+        this.updateTableWrapper(prevNode, scrollable, tableElement, config);
+      }
     }
     this.updateTableElement(prevNode, tableElement, config);
     return false;
@@ -5155,6 +5292,51 @@ const TableImportRules = [TableRule, TableRowRule, TableCellRule];
  *
  */
 
+function registerStickyScrollbar(editor) {
+  const attached = new Map();
+  const detachAll = () => {
+    for (const {
+      cleanup
+    } of attached.values()) {
+      cleanup();
+    }
+    attached.clear();
+  };
+  return mergeRegister(detachAll, editor.registerMutationListener(TableNode, nodeMutations => {
+    for (const [nodeKey, mutation] of nodeMutations) {
+      const prev = attached.get(nodeKey);
+      if (mutation === 'destroyed') {
+        if (prev) {
+          prev.cleanup();
+          attached.delete(nodeKey);
+        }
+        continue;
+      }
+      const dom = editor.getElementByKey(nodeKey);
+      const parts = dom && isHTMLElement(dom) ? findStickyScrollbarElements(dom) : null;
+      if (prev && parts && prev.parts.scrollable === parts.scrollable && prev.parts.scrollbar === parts.scrollbar && prev.parts.tableElement === parts.tableElement) {
+        // Same DOM: keep the listeners, but resync since the
+        // update may still change scrollability (e.g. a frozen
+        // rows toggle switches the wrapper to overflow-x: clip).
+        syncStickyScrollbar(parts.scrollable, parts.scrollbar);
+        continue;
+      }
+      if (prev) {
+        prev.cleanup();
+        attached.delete(nodeKey);
+      }
+      if (parts) {
+        attached.set(nodeKey, {
+          cleanup: attachStickyScrollbarListeners(parts),
+          parts
+        });
+      }
+    }
+  }, {
+    skipInitialization: false
+  }));
+}
+
 /**
  * Configures {@link TableNode}, {@link TableRowNode}, {@link TableCellNode} and
  * registers table behaviors (see {@link TableConfig})
@@ -5168,6 +5350,7 @@ const TableExtension = /* @__PURE__ */defineExtension({
     hasCellMerge: true,
     hasHorizontalScroll: true,
     hasNestedTables: false,
+    hasStickyScrollbar: false,
     hasTabHandler: true
   }),
   dependencies: [
@@ -5181,18 +5364,31 @@ const TableExtension = /* @__PURE__ */defineExtension({
   nodes: () => [TableNode, TableRowNode, TableCellNode],
   register(editor, config, state) {
     const stores = state.getOutput();
+    let prevStickyScrollbar = false;
     return mergeRegister(effect(() => {
       const hasHorizontalScroll = stores.hasHorizontalScroll.value;
+      const hasStickyScrollbar = stores.hasStickyScrollbar.value && hasHorizontalScroll;
       const hadHorizontalScroll = $isScrollableTablesActive(editor);
       if (hadHorizontalScroll !== hasHorizontalScroll) {
         setScrollableTablesActive(editor, hasHorizontalScroll);
+      }
+      if (hadHorizontalScroll !== hasHorizontalScroll || prevStickyScrollbar !== hasStickyScrollbar) {
         // Re-render existing tables through the new scroll-wrapper config
         // without cloning every TableNode the way marking them dirty would. A
         // full reconcile marks no nodes dirty, so it's deferred (no
         // synchronous render from this effect) and produces no history entry.
         editor.update($fullReconcile);
       }
-    }), registerTablePlugin(editor, stores), effect(() => registerTableSelectionObserver(editor, stores.hasTabHandler.value)), effect(() => stores.hasCellMerge.value ? undefined : registerTableCellUnmergeTransform(editor)), effect(() => stores.hasCellBackgroundColor.value ? undefined : editor.registerNodeTransform(TableCellNode, node => {
+      prevStickyScrollbar = hasStickyScrollbar;
+    }), registerTablePlugin(editor, stores), effect(() => registerTableSelectionObserver(editor, stores.hasTabHandler.value)), effect(() => {
+      if (stores.hasStickyScrollbar.value && stores.hasHorizontalScroll.value) {
+        return editor.registerRootListener(rootElement => {
+          if (rootElement) {
+            return registerStickyScrollbar(editor);
+          }
+        });
+      }
+    }), effect(() => stores.hasCellMerge.value ? undefined : registerTableCellUnmergeTransform(editor)), effect(() => stores.hasCellBackgroundColor.value ? undefined : editor.registerNodeTransform(TableCellNode, node => {
       if (node.getBackgroundColor() !== null) {
         node.setBackgroundColor(null);
       }
@@ -5214,4 +5410,4 @@ const TableImportExtension = /* @__PURE__ */defineExtension({
   name: '@lexical/table/Import'
 });
 
-export { $computeTableMap, $computeTableMapSkipCellCheck, $createTableCellNode, $createTableNode, $createTableNodeWithDimensions, $createTableRowNode, $createTableSelection, $createTableSelectionFrom, $deleteTableColumn, $deleteTableColumnAtSelection, $deleteTableColumn__EXPERIMENTAL, $deleteTableRowAtSelection, $deleteTableRow__EXPERIMENTAL, $findCellNode, $findTableNode, $getElementForTableNode, $getNodeTriplet, $getTableAndElementByKey, $getTableCellNodeFromLexicalNode, $getTableCellNodeRect, $getTableColumnIndexFromTableCellNode, $getTableNodeFromLexicalNodeOrThrow, $getTableRowIndexFromTableCellNode, $getTableRowNodeFromTableCellNodeOrThrow, $insertTableColumn, $insertTableColumnAtNode, $insertTableColumnAtSelection, $insertTableColumn__EXPERIMENTAL, $insertTableRow, $insertTableRowAtNode, $insertTableRowAtSelection, $insertTableRow__EXPERIMENTAL, $isScrollableTablesActive, $isSimpleTable, $isTableCellNode, $isTableNode, $isTableRowNode, $isTableSelection, $mergeCells, $moveTableColumn, $moveTableRow, $removeTableRowAtIndex, $setTableColumnIsHeader, $setTableRowIsHeader, $unmergeCell, $unmergeCellNode, INSERT_TABLE_COMMAND, TableCellHeaderStates, TableCellNode, TableExtension, TableImportExtension, TableImportRules, TableNode, TableObserver, TableRowNode, TableRowSchema, TableSchema, applyTableHandlers, getDOMCellFromTarget, getTableElement, getTableObserverFromTableElement, registerTableCellUnmergeTransform, registerTablePlugin, registerTableSelectionObserver, setScrollableTablesActive };
+export { $computeTableCellRectBoundary, $computeTableMap, $computeTableMapSkipCellCheck, $createTableCellNode, $createTableNode, $createTableNodeWithDimensions, $createTableRowNode, $createTableSelection, $createTableSelectionFrom, $deleteTableColumn, $deleteTableColumnAtSelection, $deleteTableColumn__EXPERIMENTAL, $deleteTableRowAtSelection, $deleteTableRow__EXPERIMENTAL, $findCellNode, $findTableNode, $getElementForTableNode, $getNodeTriplet, $getTableAndElementByKey, $getTableCellNodeFromLexicalNode, $getTableCellNodeRect, $getTableColumnIndexFromTableCellNode, $getTableNodeFromLexicalNodeOrThrow, $getTableRowIndexFromTableCellNode, $getTableRowNodeFromTableCellNodeOrThrow, $insertTableColumn, $insertTableColumnAtNode, $insertTableColumnAtSelection, $insertTableColumn__EXPERIMENTAL, $insertTableRow, $insertTableRowAtNode, $insertTableRowAtSelection, $insertTableRow__EXPERIMENTAL, $isScrollableTablesActive, $isSimpleTable, $isStickyScrollbarActive, $isTableCellNode, $isTableNode, $isTableRowNode, $isTableSelection, $mergeCells, $moveTableColumn, $moveTableRow, $removeTableRowAtIndex, $setTableColumnIsHeader, $setTableRowIsHeader, $unmergeCell, $unmergeCellNode, INSERT_TABLE_COMMAND, TableCellHeaderStates, TableCellNode, TableExtension, TableImportExtension, TableImportRules, TableNode, TableObserver, TableRowNode, TableRowSchema, TableSchema, applyTableHandlers, getDOMCellFromTarget, getTableElement, getTableObserverFromTableElement, registerTableCellUnmergeTransform, registerTablePlugin, registerTableSelectionObserver, setScrollableTablesActive };

package/dist/LexicalTable.js.flow

@@ -47,8 +47,6 @@ declare export class TableCellNode extends ElementNode {
   __headerState: TableCellHeaderState;
   __width?: number;
   __backgroundColor: null | string;
-  static getType(): string;
-  static clone(node: TableCellNode): TableCellNode;
   constructor(
     headerState?: TableCellHeaderState,
     colSpan?: number,
@@ -97,8 +95,6 @@ export type TableMapValueType = {
 export type TableMapType = TableMapValueType[][];
 
 declare export class TableNode extends ElementNode {
-  static getType(): string;
-  static clone(node: TableNode): TableNode;
   constructor(key?: NodeKey): void;
   createDOM(config: EditorConfig): HTMLElement;
   insertNewAfter(selection: RangeSelection): null | ParagraphNode | TableNode;
@@ -122,6 +118,9 @@ declare export function $isTableNode(
 declare export function $isScrollableTablesActive(
   editor?: LexicalEditor
 ): boolean;
+declare export function $isStickyScrollbarActive(
+  editor?: LexicalEditor
+): boolean;
 declare export function setScrollableTablesActive(
   editor: LexicalEditor,
   active: boolean,
@@ -139,8 +138,6 @@ declare export function $getTableAndElementByKey(
  */
 
 declare export class TableRowNode extends ElementNode {
-  static getType(): string;
-  static clone(node: TableRowNode): TableRowNode;
   constructor(height?: ?number, key?: NodeKey): void;
   createDOM(config: EditorConfig): HTMLElement;
   setHeight(height: number): ?number;
@@ -467,6 +464,8 @@ export type TableConfig = {
   hasCellBackgroundColor: boolean;
   hasTabHandler: boolean;
   hasHorizontalScroll: boolean;
+  hasStickyScrollbar: boolean;
+  hasNestedTables: boolean;
 };
 
 

package/dist/LexicalTable.mjs

@@ -9,6 +9,7 @@
 import * as modDev from './LexicalTable.dev.mjs';
 import * as modProd from './LexicalTable.prod.mjs';
 const mod = process.env.NODE_ENV !== 'production' ? modDev : modProd;
+export const $computeTableCellRectBoundary = mod.$computeTableCellRectBoundary;
 export const $computeTableMap = mod.$computeTableMap;
 export const $computeTableMapSkipCellCheck = mod.$computeTableMapSkipCellCheck;
 export const $createTableCellNode = mod.$createTableCellNode;
@@ -43,6 +44,7 @@ export const $insertTableRowAtSelection = mod.$insertTableRowAtSelection;
 export const $insertTableRow__EXPERIMENTAL = mod.$insertTableRow__EXPERIMENTAL;
 export const $isScrollableTablesActive = mod.$isScrollableTablesActive;
 export const $isSimpleTable = mod.$isSimpleTable;
+export const $isStickyScrollbarActive = mod.$isStickyScrollbarActive;
 export const $isTableCellNode = mod.$isTableCellNode;
 export const $isTableNode = mod.$isTableNode;
 export const $isTableRowNode = mod.$isTableRowNode;

package/dist/LexicalTable.node.mjs

@@ -7,6 +7,7 @@
  */
 
 const mod = await (process.env.NODE_ENV !== 'production' ? import('./LexicalTable.dev.mjs') : import('./LexicalTable.prod.mjs'));
+export const $computeTableCellRectBoundary = mod.$computeTableCellRectBoundary;
 export const $computeTableMap = mod.$computeTableMap;
 export const $computeTableMapSkipCellCheck = mod.$computeTableMapSkipCellCheck;
 export const $createTableCellNode = mod.$createTableCellNode;
@@ -41,6 +42,7 @@ export const $insertTableRowAtSelection = mod.$insertTableRowAtSelection;
 export const $insertTableRow__EXPERIMENTAL = mod.$insertTableRow__EXPERIMENTAL;
 export const $isScrollableTablesActive = mod.$isScrollableTablesActive;
 export const $isSimpleTable = mod.$isSimpleTable;
+export const $isStickyScrollbarActive = mod.$isStickyScrollbarActive;
 export const $isTableCellNode = mod.$isTableCellNode;
 export const $isTableNode = mod.$isTableNode;
 export const $isTableRowNode = mod.$isTableRowNode;