@astryxdesign/richtext 0.7.15 → 0.7.16-canary.g9b5ad42

package/dist/CodePastePlugin.d.ts

@@ -1,2 +1,5 @@
+import { type BaseSelection, type RangeSelection } from 'lexical';
+/** Whether content inserted at the selection lands in a code block. */
+export declare function $startsInCodeBlock(selection: BaseSelection | null): selection is RangeSelection;
 export declare function CodePastePlugin(): null;
 //# sourceMappingURL=CodePastePlugin.d.ts.map

package/dist/CodePastePlugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CodePastePlugin.d.ts","sourceRoot":"","sources":["../src/CodePastePlugin.tsx"],"names":[],"mappings":"AAuFA,wBAAgB,eAAe,IAAI,IAAI,CAuDtC"}
+{"version":3,"file":"CodePastePlugin.d.ts","sourceRoot":"","sources":["../src/CodePastePlugin.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAaL,KAAK,aAAa,EAElB,KAAK,cAAc,EACpB,MAAM,SAAS,CAAC;AAKjB,uEAAuE;AACvE,wBAAgB,kBAAkB,CAChC,SAAS,EAAE,aAAa,GAAG,IAAI,GAC9B,SAAS,IAAI,cAAc,CAQ7B;AAqCD,wBAAgB,eAAe,IAAI,IAAI,CAuDtC"}

package/dist/CodePastePlugin.js

@@ -7,7 +7,8 @@
  * @input Uses @lexical/react (composer context), @lexical/code (CodeNode), and
  *   lexical.
  * @output Exports CodePastePlugin, which makes rich content pasted or dropped
- *   into a code block go in as plain lines of code.
+ *   into a code block go in as plain lines of code, and $startsInCodeBlock,
+ *   which TablePastePlugin uses to leave such a paste to it.
  * @position Rendered by RichTextEditor; always on; not exported. A paste
  *   whose selection starts in a code block goes in as plain text: the
  *   clipboard's plain text, or else one line per pasted block.
@@ -21,7 +22,7 @@ import { $addUpdateTag, $findMatchingParent, $getSelection, $isElementNode, $isR
 const RICH_TYPES = ['text/html', 'application/x-lexical-editor'];
 
 /** Whether content inserted at the selection lands in a code block. */
-function $startsInCodeBlock(selection) {
+export function $startsInCodeBlock(selection) {
   if (!$isRangeSelection(selection)) {
     return false;
   }

package/dist/RichTextEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RichTextEditor.d.ts","sourceRoot":"","sources":["../src/RichTextEditor.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"RichTextEditor.d.ts","sourceRoot":"","sources":["../src/RichTextEditor.tsx"],"names":[],"mappings":"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"}

package/dist/RichTextEditor.js

@@ -49,6 +49,7 @@ import { TablePlugin } from '@lexical/react/LexicalTablePlugin';
 import { HorizontalRuleExtension } from '@lexical/extension';
 import { TextSemanticsExtension } from "./textSemantics.js";
 import { TableColumnFloorPlugin } from "./TableColumnFloorPlugin.js";
+import { TablePastePlugin } from "./TablePastePlugin.js";
 import { CodeBackspacePlugin } from "./CodeBackspacePlugin.js";
 import { CodeBlockHeaderPlugin } from "./CodeBlockHeaderPlugin.js";
 import { CodePastePlugin } from "./CodePastePlugin.js";
@@ -364,7 +365,7 @@ export const RichTextEditor = function RichTextEditor({
               hasCellBackgroundColor: false,
               hasTabHandler: false,
               hasHorizontalScroll: true
-            }), /*#__PURE__*/_jsx(TableColumnFloorPlugin, {}), /*#__PURE__*/_jsx(CodeBlockHeaderPlugin, {
+            }), /*#__PURE__*/_jsx(TableColumnFloorPlugin, {}), /*#__PURE__*/_jsx(TablePastePlugin, {}), /*#__PURE__*/_jsx(CodeBlockHeaderPlugin, {
               codeLanguages: codeLanguages
             }), /*#__PURE__*/_jsx(CodeSyntaxPlugin, {
               codeLanguages: codeLanguages

package/dist/TablePastePlugin.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Pastes a table into a table's cells. A table alone goes in cell by cell
+ * (`$pasteTableIntoCells`). A table that comes with other content, such as
+ * the paragraph and table a web page copies, goes into the cell with each
+ * table as text, since a cell holds no table. Any other paste is left to
+ * the editor's own handlers.
+ */
+export declare function TablePastePlugin(): null;
+//# sourceMappingURL=TablePastePlugin.d.ts.map

package/dist/TablePastePlugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TablePastePlugin.d.ts","sourceRoot":"","sources":["../src/TablePastePlugin.tsx"],"names":[],"mappings":"AAoLA;;;;;;GAMG;AACH,wBAAgB,gBAAgB,IAAI,IAAI,CAmCvC"}

package/dist/TablePastePlugin.js

@@ -0,0 +1,183 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file TablePastePlugin.tsx
+ * @input Uses @lexical/react (composer context), @lexical/table,
+ *   @lexical/utils, and lexical.
+ * @output Exports TablePastePlugin, which pastes into a table's cells without
+ *   dropping any of the paste or emptying a cell.
+ * @position Rendered by RichTextEditor beside TablePlugin. It answers a paste
+ *   that holds a table, made with the selection in one table's cells, ahead of
+ *   TablePlugin's own handler. That handler refuses a table that comes with
+ *   other content, and fits a pasted merged cell by merging the cells under
+ *   it, which drops their text.
+ */
+import { useEffect } from 'react';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $computeTableCellRectBoundary, $computeTableMap, $computeTableMapSkipCellCheck, $insertTableColumnAtNode, $insertTableRowAtNode, $isTableCellNode, $isTableNode, $isTableSelection } from '@lexical/table';
+import { $dfs, $findMatchingParent } from '@lexical/utils';
+import { $startsInCodeBlock } from "./CodePastePlugin.js";
+import { $createParagraphNode, $createTabNode, $createTextNode, $isRangeSelection, COMMAND_PRIORITY_LOW, SELECTION_INSERT_CLIPBOARD_NODES_COMMAND } from 'lexical';
+
+/** A selection that starts and ends in cells of one table. */
+
+function $cellSelection(selection) {
+  if (!$isRangeSelection(selection) && !$isTableSelection(selection)) {
+    return null;
+  }
+  const points = selection.getStartEndPoints();
+  if (points == null) {
+    return null;
+  }
+  const anchorCell = $findMatchingParent(points[0].getNode(), $isTableCellNode);
+  const focusCell = $findMatchingParent(points[1].getNode(), $isTableCellNode);
+  if (anchorCell == null || focusCell == null) {
+    return null;
+  }
+  const table = $findMatchingParent(anchorCell, $isTableNode);
+  if (table == null || !table.isParentOf(focusCell)) {
+    return null;
+  }
+  return {
+    selection,
+    table,
+    anchorCell,
+    focusCell
+  };
+}
+
+/**
+ * Writes a pasted table into the table cell by cell, starting at the
+ * top-left selected cell and adding the rows and columns it reaches past the
+ * table's edge; selected cells bound it instead. Each pasted cell replaces
+ * what its cell held. A merged pasted cell fills only the cell where it
+ * starts: the rest of its span, like the missing end of a short row, leaves
+ * the cells under it as they were, so no cell is merged or emptied.
+ */
+function $pasteTableIntoCells(pasted, {
+  selection,
+  table,
+  anchorCell,
+  focusCell
+}) {
+  const [grid, anchorEntry, focusEntry] = $computeTableMap(table, anchorCell, focusCell);
+  const {
+    minRow,
+    minColumn,
+    maxRow,
+    maxColumn
+  } = $computeTableCellRectBoundary(grid, anchorEntry, focusEntry);
+  const [source] = $computeTableMapSkipCellCheck(pasted, null, null);
+  // Pasted rows can differ in length, so the widest one sets the width.
+  let rows = source.length;
+  let columns = Math.max(0, ...source.map(row => row.length));
+  if ($isTableSelection(selection)) {
+    rows = Math.min(rows, maxRow - minRow + 1);
+    columns = Math.min(columns, maxColumn - minColumn + 1);
+  }
+  for (let count = grid.length; count < minRow + rows; count++) {
+    const [current] = $computeTableMapSkipCellCheck(table, null, null);
+    $insertTableRowAtNode(current[current.length - 1][0].cell);
+  }
+  for (let count = grid[0].length; count < minColumn + columns; count++) {
+    const [current] = $computeTableMapSkipCellCheck(table, null, null);
+    $insertTableColumnAtNode(current[0][current[0].length - 1].cell, true, false);
+  }
+  const [target] = $computeTableMapSkipCellCheck(table, null, null);
+  for (let row = 0; row < rows; row++) {
+    for (let column = 0; column < columns; column++) {
+      const entry = source[row][column];
+      if (entry == null || entry.startRow !== row || entry.startColumn !== column) {
+        continue;
+      }
+      const cell = target[minRow + row][minColumn + column].cell;
+      const replaced = cell.getChildren();
+      cell.append(...entry.cell.getChildren());
+      for (const node of replaced) {
+        node.remove();
+      }
+    }
+  }
+  target[minRow][minColumn].cell.selectEnd();
+}
+
+/**
+ * A table as text a cell can hold: a paragraph per row, with the text of the
+ * row's cells between tabs. A merged cell's text appears once, where the
+ * cell starts.
+ */
+function $tableAsParagraphs(table) {
+  const [grid] = $computeTableMapSkipCellCheck(table, null, null);
+  return grid.map((row, rowIndex) => {
+    const paragraph = $createParagraphNode();
+    row.forEach((entry, column) => {
+      if (column > 0) {
+        paragraph.append($createTabNode());
+      }
+      if (entry.startRow !== rowIndex || entry.startColumn !== column) {
+        return;
+      }
+      const text = entry.cell.getTextContent().replace(/\s+/g, ' ').trim();
+      if (text !== '') {
+        paragraph.append($createTextNode(text));
+      }
+    });
+    return paragraph;
+  });
+}
+
+/** `node` with every table in it, or the node itself if a table, as text. */
+function $withTablesAsText(node) {
+  if ($isTableNode(node)) {
+    return $tableAsParagraphs(node);
+  }
+  for (const {
+    node: inner
+  } of $dfs(node)) {
+    if ($isTableNode(inner)) {
+      for (const paragraph of $tableAsParagraphs(inner)) {
+        inner.insertBefore(paragraph);
+      }
+      inner.remove();
+    }
+  }
+  return [node];
+}
+
+/**
+ * Pastes a table into a table's cells. A table alone goes in cell by cell
+ * (`$pasteTableIntoCells`). A table that comes with other content, such as
+ * the paragraph and table a web page copies, goes into the cell with each
+ * table as text, since a cell holds no table. Any other paste is left to
+ * the editor's own handlers.
+ */
+export function TablePastePlugin() {
+  const [editor] = useLexicalComposerContext();
+  useEffect(() => editor.registerCommand(SELECTION_INSERT_CLIPBOARD_NODES_COMMAND, ({
+    nodes,
+    selection
+  }, dispatchEditor) => {
+    // A paste into a code block, even one in a cell, belongs to
+    // CodePastePlugin, which adds plain code lines.
+    if (dispatchEditor !== editor || $startsInCodeBlock(selection) || !nodes.some(node => $dfs(node).some(({
+      node: inner
+    }) => $isTableNode(inner)))) {
+      return false;
+    }
+    const cells = $cellSelection(selection);
+    if (cells == null) {
+      return false;
+    }
+    if (nodes.length === 1 && $isTableNode(nodes[0])) {
+      $pasteTableIntoCells(nodes[0], cells);
+    } else {
+      cells.selection.insertNodes(nodes.flatMap($withTablesAsText));
+    }
+    return true;
+  },
+  // Ahead of TablePlugin's handler, which runs at the editor priority.
+  COMMAND_PRIORITY_LOW), [editor]);
+  return null;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@astryxdesign/richtext",
   "displayName": "Rich Text",
-  "version": "0.7.15",
+  "version": "0.7.16-canary.g9b5ad42",
   "description": "Astryx rich text — a Lexical-based rich text editor and viewer, styled with Astryx design tokens.",
   "author": "Meta Open Source",
   "license": "MIT",
@@ -66,7 +66,7 @@
   },
   "peerDependencies": {
     "@stylexjs/stylex": ">=0.10.0",
-    "@astryxdesign/core": "0.7.15",
+    "@astryxdesign/core": "0.7.16-canary.g9b5ad42",
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0",
     "lexical": "^0.52.0",
@@ -125,6 +125,8 @@
     }
   },
   "devDependencies": {
+    "@astryxdesign/a11y-spec": "0.7.16-canary.g9b5ad42",
+    "@astryxdesign/cli": "0.7.16-canary.g9b5ad42",
     "@babel/cli": "^7.29.7",
     "@babel/core": "^7.29.7",
     "@babel/preset-react": "^7.29.7",
@@ -143,9 +145,7 @@
     "@lexical/utils": "^0.52.0",
     "@stylexjs/babel-plugin": "^0.19.1",
     "@testing-library/react": "^16.3.3",
-    "lexical": "^0.52.0",
-    "@astryxdesign/a11y-spec": "0.0.0",
-    "@astryxdesign/cli": "0.7.15"
+    "lexical": "^0.52.0"
   },
   "scripts": {
     "build": "node ../../scripts/clean-dist.mjs && pnpm build:esm && tsc --project tsconfig.build.json && node ../../scripts/add-declaration-extensions.mjs && pnpm build:css && node ../../scripts/check-no-dev-jsx.mjs && node ../../scripts/check-fully-specified.mjs",

package/src/CodePastePlugin.tsx

@@ -7,7 +7,8 @@
  * @input Uses @lexical/react (composer context), @lexical/code (CodeNode), and
  *   lexical.
  * @output Exports CodePastePlugin, which makes rich content pasted or dropped
- *   into a code block go in as plain lines of code.
+ *   into a code block go in as plain lines of code, and $startsInCodeBlock,
+ *   which TablePastePlugin uses to leave such a paste to it.
  * @position Rendered by RichTextEditor; always on; not exported. A paste
  *   whose selection starts in a code block goes in as plain text: the
  *   clipboard's plain text, or else one line per pasted block.
@@ -38,7 +39,7 @@ import {
 const RICH_TYPES = ['text/html', 'application/x-lexical-editor'];
 
 /** Whether content inserted at the selection lands in a code block. */
-function $startsInCodeBlock(
+export function $startsInCodeBlock(
   selection: BaseSelection | null,
 ): selection is RangeSelection {
   if (!$isRangeSelection(selection)) {

package/src/RichTextEditor.doc.mjs

@@ -236,7 +236,7 @@ export const docs = {
       {
         guidance: true,
         description:
-          'GFM pipe tables import, edit, and export by default. The first row renders as header cells, delimiter-row colons set each column alignment, rows shorter than the widest row gain empty cells, and a wide table scrolls inside its own wrapper. Arrow keys move between cells; Tab keeps its editor meaning, so Escape then Tab still leaves the editor. Tables export in the canonical form: outer pipes and three-dash delimiters. RichTextView renders the same tables. Install @lexical/table with the other lexical peers.',
+          'GFM pipe tables import, edit, and export by default. The first row renders as header cells, delimiter-row colons set each column alignment, rows shorter than the widest row gain empty cells, and a wide table scrolls inside its own wrapper. Arrow keys move between cells; Tab keeps its editor meaning, so Escape then Tab still leaves the editor. Pasting a table into a table fills its cells one by one from the cell holding the caret, or within the selected cells, adding rows and columns as needed; a cell the paste does not fill keeps its text, and a table pasted with other content goes into the cell as text. Tables export in the canonical form: outer pipes and three-dash delimiters. RichTextView renders the same tables. Install @lexical/table with the other lexical peers.',
       },
       {
         guidance: true,

package/src/RichTextEditor.tsx

@@ -77,6 +77,7 @@ import {TablePlugin} from '@lexical/react/LexicalTablePlugin';
 import {HorizontalRuleExtension} from '@lexical/extension';
 import {TextSemanticsExtension} from './textSemantics';
 import {TableColumnFloorPlugin} from './TableColumnFloorPlugin';
+import {TablePastePlugin} from './TablePastePlugin';
 import {CodeBackspacePlugin} from './CodeBackspacePlugin';
 import {CodeBlockHeaderPlugin} from './CodeBlockHeaderPlugin';
 import {CodePastePlugin} from './CodePastePlugin';
@@ -730,6 +731,7 @@ export const RichTextEditor = function RichTextEditor({
                 hasHorizontalScroll
               />
               <TableColumnFloorPlugin />
+              <TablePastePlugin />
               <CodeBlockHeaderPlugin codeLanguages={codeLanguages} />
               <CodeSyntaxPlugin codeLanguages={codeLanguages} />
               {/* Backspace at the very start of a code block makes it a

package/src/TablePastePlugin.tsx

@@ -0,0 +1,223 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file TablePastePlugin.tsx
+ * @input Uses @lexical/react (composer context), @lexical/table,
+ *   @lexical/utils, and lexical.
+ * @output Exports TablePastePlugin, which pastes into a table's cells without
+ *   dropping any of the paste or emptying a cell.
+ * @position Rendered by RichTextEditor beside TablePlugin. It answers a paste
+ *   that holds a table, made with the selection in one table's cells, ahead of
+ *   TablePlugin's own handler. That handler refuses a table that comes with
+ *   other content, and fits a pasted merged cell by merging the cells under
+ *   it, which drops their text.
+ */
+
+import {useEffect} from 'react';
+import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
+import {
+  $computeTableCellRectBoundary,
+  $computeTableMap,
+  $computeTableMapSkipCellCheck,
+  $insertTableColumnAtNode,
+  $insertTableRowAtNode,
+  $isTableCellNode,
+  $isTableNode,
+  $isTableSelection,
+  type TableCellNode,
+  type TableNode,
+  type TableSelection,
+} from '@lexical/table';
+import {$dfs, $findMatchingParent} from '@lexical/utils';
+import {$startsInCodeBlock} from './CodePastePlugin';
+import {
+  $createParagraphNode,
+  $createTabNode,
+  $createTextNode,
+  $isRangeSelection,
+  COMMAND_PRIORITY_LOW,
+  SELECTION_INSERT_CLIPBOARD_NODES_COMMAND,
+  type BaseSelection,
+  type LexicalNode,
+  type ParagraphNode,
+  type RangeSelection,
+} from 'lexical';
+
+/** A selection that starts and ends in cells of one table. */
+interface CellSelection {
+  readonly selection: RangeSelection | TableSelection;
+  readonly table: TableNode;
+  readonly anchorCell: TableCellNode;
+  readonly focusCell: TableCellNode;
+}
+
+function $cellSelection(selection: BaseSelection): CellSelection | null {
+  if (!$isRangeSelection(selection) && !$isTableSelection(selection)) {
+    return null;
+  }
+  const points = selection.getStartEndPoints();
+  if (points == null) {
+    return null;
+  }
+  const anchorCell = $findMatchingParent(points[0].getNode(), $isTableCellNode);
+  const focusCell = $findMatchingParent(points[1].getNode(), $isTableCellNode);
+  if (anchorCell == null || focusCell == null) {
+    return null;
+  }
+  const table = $findMatchingParent(anchorCell, $isTableNode);
+  if (table == null || !table.isParentOf(focusCell)) {
+    return null;
+  }
+  return {selection, table, anchorCell, focusCell};
+}
+
+/**
+ * Writes a pasted table into the table cell by cell, starting at the
+ * top-left selected cell and adding the rows and columns it reaches past the
+ * table's edge; selected cells bound it instead. Each pasted cell replaces
+ * what its cell held. A merged pasted cell fills only the cell where it
+ * starts: the rest of its span, like the missing end of a short row, leaves
+ * the cells under it as they were, so no cell is merged or emptied.
+ */
+function $pasteTableIntoCells(
+  pasted: TableNode,
+  {selection, table, anchorCell, focusCell}: CellSelection,
+): void {
+  const [grid, anchorEntry, focusEntry] = $computeTableMap(
+    table,
+    anchorCell,
+    focusCell,
+  );
+  const {minRow, minColumn, maxRow, maxColumn} = $computeTableCellRectBoundary(
+    grid,
+    anchorEntry,
+    focusEntry,
+  );
+  const [source] = $computeTableMapSkipCellCheck(pasted, null, null);
+  // Pasted rows can differ in length, so the widest one sets the width.
+  let rows = source.length;
+  let columns = Math.max(0, ...source.map(row => row.length));
+  if ($isTableSelection(selection)) {
+    rows = Math.min(rows, maxRow - minRow + 1);
+    columns = Math.min(columns, maxColumn - minColumn + 1);
+  }
+  for (let count = grid.length; count < minRow + rows; count++) {
+    const [current] = $computeTableMapSkipCellCheck(table, null, null);
+    $insertTableRowAtNode(current[current.length - 1][0].cell);
+  }
+  for (let count = grid[0].length; count < minColumn + columns; count++) {
+    const [current] = $computeTableMapSkipCellCheck(table, null, null);
+    $insertTableColumnAtNode(
+      current[0][current[0].length - 1].cell,
+      true,
+      false,
+    );
+  }
+  const [target] = $computeTableMapSkipCellCheck(table, null, null);
+  for (let row = 0; row < rows; row++) {
+    for (let column = 0; column < columns; column++) {
+      const entry = source[row][column];
+      if (
+        entry == null ||
+        entry.startRow !== row ||
+        entry.startColumn !== column
+      ) {
+        continue;
+      }
+      const cell = target[minRow + row][minColumn + column].cell;
+      const replaced = cell.getChildren();
+      cell.append(...entry.cell.getChildren());
+      for (const node of replaced) {
+        node.remove();
+      }
+    }
+  }
+  target[minRow][minColumn].cell.selectEnd();
+}
+
+/**
+ * A table as text a cell can hold: a paragraph per row, with the text of the
+ * row's cells between tabs. A merged cell's text appears once, where the
+ * cell starts.
+ */
+function $tableAsParagraphs(table: TableNode): Array<ParagraphNode> {
+  const [grid] = $computeTableMapSkipCellCheck(table, null, null);
+  return grid.map((row, rowIndex) => {
+    const paragraph = $createParagraphNode();
+    row.forEach((entry, column) => {
+      if (column > 0) {
+        paragraph.append($createTabNode());
+      }
+      if (entry.startRow !== rowIndex || entry.startColumn !== column) {
+        return;
+      }
+      const text = entry.cell.getTextContent().replace(/\s+/g, ' ').trim();
+      if (text !== '') {
+        paragraph.append($createTextNode(text));
+      }
+    });
+    return paragraph;
+  });
+}
+
+/** `node` with every table in it, or the node itself if a table, as text. */
+function $withTablesAsText(node: LexicalNode): Array<LexicalNode> {
+  if ($isTableNode(node)) {
+    return $tableAsParagraphs(node);
+  }
+  for (const {node: inner} of $dfs(node)) {
+    if ($isTableNode(inner)) {
+      for (const paragraph of $tableAsParagraphs(inner)) {
+        inner.insertBefore(paragraph);
+      }
+      inner.remove();
+    }
+  }
+  return [node];
+}
+
+/**
+ * Pastes a table into a table's cells. A table alone goes in cell by cell
+ * (`$pasteTableIntoCells`). A table that comes with other content, such as
+ * the paragraph and table a web page copies, goes into the cell with each
+ * table as text, since a cell holds no table. Any other paste is left to
+ * the editor's own handlers.
+ */
+export function TablePastePlugin(): null {
+  const [editor] = useLexicalComposerContext();
+  useEffect(
+    () =>
+      editor.registerCommand(
+        SELECTION_INSERT_CLIPBOARD_NODES_COMMAND,
+        ({nodes, selection}, dispatchEditor) => {
+          // A paste into a code block, even one in a cell, belongs to
+          // CodePastePlugin, which adds plain code lines.
+          if (
+            dispatchEditor !== editor ||
+            $startsInCodeBlock(selection) ||
+            !nodes.some(node =>
+              $dfs(node).some(({node: inner}) => $isTableNode(inner)),
+            )
+          ) {
+            return false;
+          }
+          const cells = $cellSelection(selection);
+          if (cells == null) {
+            return false;
+          }
+          if (nodes.length === 1 && $isTableNode(nodes[0])) {
+            $pasteTableIntoCells(nodes[0], cells);
+          } else {
+            cells.selection.insertNodes(nodes.flatMap($withTablesAsText));
+          }
+          return true;
+        },
+        // Ahead of TablePlugin's handler, which runs at the editor priority.
+        COMMAND_PRIORITY_LOW,
+      ),
+    [editor],
+  );
+  return null;
+}