@lexical/table 0.48.0 → 0.48.1-nightly.20260720.0

package/src/LexicalTableCellNode.ts

@@ -14,7 +14,6 @@ import {
   $isLineBreakNode,
   $isTextNode,
   addClassNamesToElement,
-  type DOMConversionMap,
   type DOMConversionOutput,
   type DOMExportOutput,
   type EditorConfig,
@@ -68,17 +67,20 @@ export class TableCellNode extends ElementNode {
   /** @internal */
   __verticalAlign?: undefined | string;
 
-  static getType(): string {
-    return 'tablecell';
-  }
-
-  static clone(node: TableCellNode): TableCellNode {
-    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: this): void {
@@ -91,23 +93,6 @@ export class TableCellNode extends ElementNode {
     this.__width = node.__width;
   }
 
-  static importDOM(): DOMConversionMap | null {
-    return {
-      td: (node: Node) => ({
-        conversion: $convertTableCellNodeElement,
-        priority: 0,
-      }),
-      th: (node: Node) => ({
-        conversion: $convertTableCellNodeElement,
-        priority: 0,
-      }),
-    };
-  }
-
-  static importJSON(serializedNode: SerializedTableCellNode): TableCellNode {
-    return $createTableCellNode().updateFromJSON(serializedNode);
-  }
-
   updateFromJSON(
     serializedNode: LexicalUpdateJSON<SerializedTableCellNode>,
   ): this {

package/src/LexicalTableExtension.ts

@@ -6,12 +6,15 @@
  *
  */
 
+import type {LexicalEditor} from 'lexical';
+
 import {effect, namedSignals} from '@lexical/extension';
 import {CoreImportExtension, DOMImportExtension} from '@lexical/html';
 import {
   $fullReconcile,
   configExtension,
   defineExtension,
+  isHTMLElement,
   mergeRegister,
   safeCast,
 } from 'lexical';
@@ -19,7 +22,11 @@ import {
 import {TableCellNode} from './LexicalTableCellNode';
 import {
   $isScrollableTablesActive,
+  attachStickyScrollbarListeners,
+  findStickyScrollbarElements,
   setScrollableTablesActive,
+  type StickyScrollbarElements,
+  syncStickyScrollbar,
   TableNode,
 } from './LexicalTableNode';
 import {
@@ -48,6 +55,19 @@ export interface TableConfig {
    * When `true` (default `true`), tables will be wrapped in a `<div>` to enable horizontal scrolling
    */
   hasHorizontalScroll: boolean;
+  /**
+   * When `true` (default `false`), a sticky scrollbar is rendered below each table that overflows horizontally.
+   * Requires `hasHorizontalScroll` to be `true`. The native scrollbar is hidden via inline
+   * `scrollbar-width: none` (Firefox/Chromium). Themed consumers providing a `tableScrollableWrapper`
+   * class should also add `::-webkit-scrollbar { display: none }` for Safari/WebKit.
+   * A themed scrollbar is expected to guarantee its own visible height (the
+   * playground does this with `::-webkit-scrollbar { height: ... }`); the
+   * unthemed fallback depends on classic native scrollbars, so on platforms
+   * where those render with no thickness (overlay scrollbars, and non-layout
+   * environments like jsdom) it is disabled at runtime and the wrapper's
+   * native scrollbar is restored.
+   */
+  hasStickyScrollbar: boolean;
   /**
    * When `true` (default `false`), nested tables will be allowed.
    *
@@ -56,6 +76,64 @@ export interface TableConfig {
   hasNestedTables: boolean;
 }
 
+function registerStickyScrollbar(editor: LexicalEditor) {
+  const attached = new Map<
+    string,
+    {cleanup: () => void; parts: StickyScrollbarElements}
+  >();
+  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})
@@ -69,6 +147,7 @@ export const TableExtension = /* @__PURE__ */ defineExtension({
     hasCellMerge: true,
     hasHorizontalScroll: true,
     hasNestedTables: false,
+    hasStickyScrollbar: false,
     hasTabHandler: true,
   }),
   dependencies: [
@@ -84,23 +163,44 @@ export 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);
         }
+        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

package/src/LexicalTableNode.ts

@@ -6,8 +6,10 @@
  *
  */
 
+import type {TableExtension} from './LexicalTableExtension';
 import type {TableDOMCell, TableDOMTable} from './LexicalTableObserver';
 
+import {getPeerDependencyFromEditor} from '@lexical/extension';
 import invariant from '@lexical/internal/invariant';
 import {$descendantsMatching} from '@lexical/utils';
 import {
@@ -17,7 +19,6 @@ import {
   $getNearestNodeFromDOMNode,
   addClassNamesToElement,
   type BaseSelection,
-  type DOMConversionMap,
   type DOMConversionOutput,
   type DOMExportOutput,
   type EditorConfig,
@@ -149,6 +150,177 @@ function alignTableElement(
   addClassNamesToElement(dom, ...addClasses);
 }
 
+function $createScrollableWrapper(
+  tableElement: HTMLTableElement,
+  config: EditorConfig,
+  hideNativeScrollbar: boolean,
+): HTMLDivElement {
+  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: EditorConfig): HTMLDivElement {
+  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;
+}
+
+export interface StickyScrollbarElements {
+  scrollable: HTMLDivElement;
+  scrollbar: HTMLDivElement;
+  tableElement: HTMLTableElement;
+}
+
+// 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<HTMLDivElement>();
+
+function measureScrollbarThickness(scrollbar: HTMLDivElement): number {
+  const prevDisplay = scrollbar.style.display;
+  scrollbar.style.display = '';
+  const thickness = scrollbar.offsetHeight - scrollbar.clientHeight;
+  scrollbar.style.display = prevDisplay;
+  return thickness;
+}
+
+export function attachStickyScrollbarListeners(
+  elements: StickyScrollbarElements,
+): () => void {
+  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: ResizeObserver | null = 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;
+}
+
+export function syncStickyScrollbar(
+  scrollable: HTMLDivElement,
+  scrollbar: HTMLDivElement,
+): void {
+  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';
+}
+
+export function findStickyScrollbarElements(
+  dom: HTMLElement,
+): StickyScrollbarElements | null {
+  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<LexicalEditor>();
 
 export function $isScrollableTablesActive(
@@ -157,6 +329,22 @@ export function $isScrollableTablesActive(
   return scrollableEditors.has(editor);
 }
 
+export function $isStickyScrollbarActive(
+  editor: LexicalEditor = $getEditor(),
+): boolean {
+  const dep = getPeerDependencyFromEditor<typeof TableExtension>(
+    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;
+}
+
 export function setScrollableTablesActive(
   editor: LexicalEditor,
   active: boolean,
@@ -176,13 +364,25 @@ export function setScrollableTablesActive(
 /** @noInheritDoc */
 export class TableNode extends ElementNode {
   /** @internal */
-  __rowStriping: boolean;
-  __frozenColumnCount: number;
-  __frozenRowCount: number;
-  __colWidths?: readonly number[];
-
-  static getType(): string {
-    return 'table';
+  __rowStriping: boolean = false;
+  __frozenColumnCount: number = 0;
+  __frozenRowCount: number = 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: readonly number[] | undefined = undefined;
+
+  $config() {
+    return this.config('table', {
+      extends: ElementNode,
+      importDOM: {
+        table: () => ({
+          conversion: $convertTableElement,
+          priority: 1,
+        }),
+      },
+    });
   }
 
   getColWidths(): readonly number[] | undefined {
@@ -198,10 +398,6 @@ export class TableNode extends ElementNode {
     return self;
   }
 
-  static clone(node: TableNode): TableNode {
-    return new TableNode(node.__key);
-  }
-
   afterCloneFrom(prevNode: this) {
     super.afterCloneFrom(prevNode);
     this.__colWidths = prevNode.__colWidths;
@@ -210,19 +406,6 @@ export class TableNode extends ElementNode {
     this.__frozenRowCount = prevNode.__frozenRowCount;
   }
 
-  static importDOM(): DOMConversionMap | null {
-    return {
-      table: (_node: Node) => ({
-        conversion: $convertTableElement,
-        priority: 1,
-      }),
-    };
-  }
-
-  static importJSON(serializedNode: SerializedTableNode): TableNode {
-    return $createTableNode().updateFromJSON(serializedNode);
-  }
-
   updateFromJSON(serializedNode: LexicalUpdateJSON<SerializedTableNode>): this {
     return super
       .updateFromJSON(serializedNode)
@@ -232,14 +415,6 @@ export class TableNode extends ElementNode {
       .setColWidths(serializedNode.colWidths);
   }
 
-  constructor(key?: NodeKey) {
-    super(key);
-    this.__rowStriping = false;
-    this.__frozenColumnCount = 0;
-    this.__frozenRowCount = 0;
-    this.__colWidths = undefined;
-  }
-
   exportJSON(): SerializedTableNode {
     return {
       ...super.exportJSON(),
@@ -285,16 +460,23 @@ export 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';
+      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;
       }
-      wrapperElement.appendChild(tableElement);
-      this.updateTableWrapper(null, wrapperElement, tableElement, config);
-      return wrapperElement;
+      return scrollableWrapper;
     }
     return tableElement;
   }
@@ -352,7 +534,16 @@ export 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;

package/src/LexicalTableRowNode.ts

@@ -12,7 +12,6 @@ import {
   $getDocument,
   addClassNamesToElement,
   type BaseSelection,
-  type DOMConversionMap,
   type DOMConversionOutput,
   type EditorConfig,
   ElementNode,
@@ -38,12 +37,16 @@ export class TableRowNode extends ElementNode {
   /** @internal */
   __height?: number;
 
-  static getType(): string {
-    return 'tablerow';
-  }
-
-  static clone(node: TableRowNode): TableRowNode {
-    return new TableRowNode(node.__height, node.__key);
+  $config() {
+    return this.config('tablerow', {
+      extends: ElementNode,
+      importDOM: {
+        tr: () => ({
+          conversion: $convertTableRowElement,
+          priority: 0,
+        }),
+      },
+    });
   }
 
   afterCloneFrom(prevNode: this): void {
@@ -51,19 +54,6 @@ export class TableRowNode extends ElementNode {
     this.__height = prevNode.__height;
   }
 
-  static importDOM(): DOMConversionMap | null {
-    return {
-      tr: (node: Node) => ({
-        conversion: $convertTableRowElement,
-        priority: 0,
-      }),
-    };
-  }
-
-  static importJSON(serializedNode: SerializedTableRowNode): TableRowNode {
-    return $createTableRowNode().updateFromJSON(serializedNode);
-  }
-
   updateFromJSON(
     serializedNode: LexicalUpdateJSON<SerializedTableRowNode>,
   ): this {
@@ -72,7 +62,9 @@ export class TableRowNode extends ElementNode {
       .setHeight(serializedNode.height);
   }
 
-  constructor(height?: number, key?: NodeKey) {
+  // `height` carries an explicit `undefined` default so the constructor reports
+  // zero required arguments and `$config` can synthesize the static `clone`.
+  constructor(height: number | undefined = undefined, key?: NodeKey) {
     super(key);
     this.__height = height;
   }

package/src/LexicalTableSelection.ts

@@ -289,7 +289,7 @@ export class TableSelection implements BaseSelection {
     selection.insertNodes(nodes);
   }
 
-  // TODO Deprecate this method. It's confusing when used with colspan|rowspan
+  /** @deprecated Use {@link $computeTableMap} and {@link $computeTableCellRectBoundary} directly. */
   getShape(): TableSelectionShape {
     const {anchorCell, focusCell} = $getCellNodes(this);
     const anchorCellNodeRect = $getTableCellNodeRect(anchorCell);
@@ -417,21 +417,27 @@ export class TableSelection implements BaseSelection {
   }
 }
 
+/** Type guard for {@link TableSelection}. */
 export function $isTableSelection(x: unknown): x is TableSelection {
   return x instanceof TableSelection;
 }
 
+/** @deprecated Use {@link $createTableSelectionFrom} instead. */
 export function $createTableSelection(): TableSelection {
-  // 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.
+ */
 export function $createTableSelectionFrom(
   tableNode: TableNode,
   anchorCell: TableCellNode,
@@ -463,7 +469,11 @@ export function $createTableSelectionFrom(
   const prevSelection = $getSelection();
   const nextSelection = $isTableSelection(prevSelection)
     ? prevSelection.clone()
-    : $createTableSelection();
+    : new TableSelection(
+        'root',
+        $createPoint('root', 0, 'element'),
+        $createPoint('root', 0, 'element'),
+      );
   nextSelection.set(
     tableNode.getKey(),
     anchorCell.getKey(),