fix: tables inside sdt field (#2712)

Author: VladaHarbour

packages/super-editor/src/editors/v1/extensions/table/table.js

@@ -189,7 +189,7 @@ import {
 } from '../table-cell/helpers/legacyBorderMigration.js';
 import { isInTable } from '@helpers/isInTable.js';
 import { findParentNode } from '@helpers/findParentNode.js';
-import { TextSelection, Plugin, PluginKey } from 'prosemirror-state';
+import { TextSelection, NodeSelection, Plugin, PluginKey } from 'prosemirror-state';
 import { isCellSelection } from './tableHelpers/isCellSelection.js';
 import {
   addColumnBefore as originalAddColumnBefore,
@@ -318,6 +318,113 @@ function getFirstTableCellTextPos(tablePos, tableNode) {
   return tablePos + 1 + map.map[0] + 2;
 }
 
+/**
+ * Resolves the table targeted by a command.
+ *
+ * When a block SDT that wraps a single table is selected, table commands should
+ * still operate on that inner table rather than an ancestor wrapper table.
+ *
+ * @param {import('prosemirror-state').Selection} selection
+ * @returns {{ node: import('prosemirror-model').Node, pos: number } | null}
+ */
+function resolveCommandTargetTable(selection) {
+  if (selection?.node?.type?.name === 'structuredContentBlock') {
+    let found = null;
+    let count = 0;
+    selection.node.descendants((node, pos) => {
+      if (node.type?.name !== 'table') return true;
+      count += 1;
+      found = {
+        node,
+        pos: selection.from + 1 + pos,
+      };
+      return false;
+    });
+
+    if (count === 1 && found) {
+      return found;
+    }
+  }
+
+  return findParentNode((node) => node.type.name === 'table')(selection);
+}
+
+/**
+ * Resolves insertion coordinates when a table is inserted inside a block SDT.
+ *
+ * Block structured content allows block children (`content: 'block*'`), so
+ * table insertion should operate on its inner block list rather than using the
+ * top-level document insertion path.
+ *
+ * @param {import('prosemirror-state').Selection} selection
+ * @returns {{ from: number, to: number, tablePos: number } | null}
+ */
+function resolveStructuredContentBlockTableInsertion(selection) {
+  if (selection instanceof NodeSelection && selection.node?.type?.name === 'structuredContentBlock') {
+    const contentStart = selection.from + 1;
+    const firstChild = selection.node.firstChild;
+    const shouldReplaceOnlyEmptyParagraph =
+      selection.node.childCount === 1 && firstChild?.type?.name === 'paragraph' && firstChild.textContent === '';
+
+    if (shouldReplaceOnlyEmptyParagraph) {
+      return {
+        from: contentStart,
+        to: contentStart + firstChild.nodeSize,
+        tablePos: contentStart,
+      };
+    }
+
+    const contentEnd = contentStart + selection.node.content.size;
+    return {
+      from: contentEnd,
+      to: contentEnd,
+      tablePos: contentEnd,
+    };
+  }
+
+  const $from = selection.$from;
+  let structuredContentDepth = -1;
+  for (let depth = $from.depth; depth > 0; depth--) {
+    if ($from.node(depth).type?.name === 'structuredContentBlock') {
+      structuredContentDepth = depth;
+      break;
+    }
+  }
+
+  if (structuredContentDepth === -1) {
+    return null;
+  }
+
+  const paragraphDepth = $from.parent?.type?.name === 'run' ? $from.depth - 1 : $from.depth;
+  if (paragraphDepth <= structuredContentDepth) {
+    const contentEnd = $from.end(structuredContentDepth);
+    return {
+      from: contentEnd,
+      to: contentEnd,
+      tablePos: contentEnd,
+    };
+  }
+
+  const paragraph = $from.node(paragraphDepth);
+  const isEmptyParagraph = paragraph.type.name === 'paragraph' && paragraph.textContent === '';
+
+  if (isEmptyParagraph) {
+    const from = $from.before(paragraphDepth);
+    return {
+      from,
+      to: $from.after(paragraphDepth),
+      tablePos: from,
+    };
+  }
+
+  const from = $from.after(paragraphDepth);
+  return {
+    from,
+    to: from,
+    tablePos: from,
+  };
+}
+
 const IMPORT_CONTEXT_SELECTOR = '[data-superdoc-import="true"]';
 const IMPORT_DEFAULT_TABLE_WIDTH_PCT = 5000; // OOXML percent units where 5000 == 100%
 
@@ -732,6 +839,15 @@ export const Table = Node.create({
           const node = createTable(editor.schema, rows, cols, withHeaderRow, null, widths, tableAttrs);
 
           if (dispatch) {
+            const structuredContentInsertion = resolveStructuredContentBlockTableInsertion(tr.selection);
+            if (structuredContentInsertion) {
+              const { from, to, tablePos } = structuredContentInsertion;
+              tr.replaceWith(from, to, node);
+              const selectionPos = getFirstTableCellTextPos(tablePos, node);
+              tr.scrollIntoView().setSelection(TextSelection.near(tr.doc.resolve(selectionPos)));
+              return true;
+            }
+
             let offset;
             let replaceRange = undefined;
 
@@ -1348,18 +1464,15 @@ export const Table = Node.create({
             return false;
           }
 
-          const table = findParentNode((node) => node.type.name === this.name)(state.selection);
+          const table = resolveCommandTargetTable(state.selection);
 
           if (!table) {
             return false;
           }
 
-          const from = table.pos;
-          const to = table.pos + table.node.nodeSize;
-
           // remove from cells — write nil borders to tableCellProperties.borders (canonical source)
           const nilBorder = { val: 'nil', size: 0, space: 0, color: 'auto' };
-          state.doc.nodesBetween(from, to, (node, pos) => {
+          table.node.descendants((node, pos) => {
             if (['tableCell', 'tableHeader'].includes(node.type.name)) {
               const nextTableCellProperties = {
                 ...(node.attrs.tableCellProperties ?? {}),
@@ -1371,13 +1484,14 @@ export const Table = Node.create({
                 },
               };
               const nextInlineKeys = [...new Set([...(node.attrs.tableCellPropertiesInlineKeys || []), 'borders'])];
-              tr.setNodeMarkup(pos, undefined, {
+              tr.setNodeMarkup(table.pos + 1 + pos, undefined, {
                 ...node.attrs,
                 borders: null,
                 tableCellProperties: nextTableCellProperties,
                 tableCellPropertiesInlineKeys: nextInlineKeys,
               });
             }
+            return true;
           });
 
           // remove from table

packages/super-editor/src/editors/v1/extensions/table/table.test.js

@@ -963,6 +963,67 @@ describe('Table commands', async () => {
 
       sharedTests();
     });
+
+    it('targets the inner table when a structuredContentBlock wrapper around it is selected', async () => {
+      const { docx, media, mediaFiles, fonts } = cachedBlankDoc;
+      ({ editor } = initTestEditor({ content: docx, media, mediaFiles, fonts }));
+      ({ schema } = editor);
+
+      const nilBorders = Object.assign(
+        {},
+        ...['top', 'left', 'bottom', 'right'].map((side) => ({
+          [side]: { color: 'auto', size: 0, space: 0, val: 'nil' },
+        })),
+      );
+
+      const outerBorders = {
+        top: { val: 'single', size: 8, space: 0, color: '000000' },
+        bottom: { val: 'single', size: 8, space: 0, color: '000000' },
+        left: { val: 'single', size: 8, space: 0, color: '000000' },
+        right: { val: 'single', size: 8, space: 0, color: '000000' },
+      };
+
+      const innerTable = createTable(schema, 2, 2, false);
+      const sdt = schema.nodes.structuredContentBlock.create({ id: '2001', tag: 'block_table_sdt' }, [innerTable]);
+      const outerCell = schema.nodes.tableCell.create(
+        {
+          tableCellProperties: { borders: outerBorders },
+          tableCellPropertiesInlineKeys: ['borders'],
+        },
+        [sdt],
+      );
+      const outerRow = schema.nodes.tableRow.create({ paraId: 'A1B2C3D4' }, [outerCell]);
+      const outerTable = schema.nodes.table.create({}, [outerRow]);
+      const doc = schema.nodes.doc.create(null, [outerTable]);
+      editor.setState(EditorState.create({ schema, doc, plugins: editor.state.plugins }));
+
+      let sdtPos = null;
+      editor.state.doc.descendants((node, pos) => {
+        if (node.type.name === 'structuredContentBlock') {
+          sdtPos = pos;
+          return false;
+        }
+        return true;
+      });
+      expect(sdtPos).not.toBeNull();
+
+      editor.view.dispatch(editor.state.tr.setSelection(NodeSelection.create(editor.state.doc, sdtPos)));
+
+      const success = editor.commands.deleteCellAndTableBorders(editor);
+      expect(success).toBe(true);
+
+      const updatedOuterTable = editor.state.doc.child(0);
+      const updatedOuterCell = updatedOuterTable.firstChild.firstChild;
+      expect(updatedOuterCell.attrs.tableCellProperties?.borders).toEqual(outerBorders);
+
+      const updatedInnerTable = updatedOuterCell.firstChild.firstChild;
+      expect(updatedInnerTable.type.name).toBe('table');
+      updatedInnerTable.forEach((row) => {
+        row.forEach((cell) => {
+          expect(cell.attrs.tableCellProperties?.borders).toEqual(nilBorders);
+        });
+      });
+    });
   });
 
   describe('table style normalization', async () => {
@@ -1305,6 +1366,51 @@ describe('Table commands', async () => {
       expect($from.node($from.depth - 1).type.spec.tableRole).toBe('cell');
     });
 
+    it('inserts the table inside a selected structuredContentBlock instead of creating a sibling block', async () => {
+      const { docx, media, mediaFiles, fonts } = cachedBlankDoc;
+      ({ editor } = initTestEditor({ content: docx, media, mediaFiles, fonts }));
+
+      const { schema } = editor.state;
+      const emptyParagraph = schema.nodes.paragraph.create();
+      const sdt = schema.nodes.structuredContentBlock.create({ id: '1001', tag: 'block_table_sdt' }, [emptyParagraph]);
+      const doc = schema.nodes.doc.create(null, [sdt]);
+      editor.setState(EditorState.create({ schema, doc, plugins: editor.state.plugins }));
+
+      editor.view.dispatch(editor.state.tr.setSelection(NodeSelection.create(editor.state.doc, 0)));
+      editor.commands.insertTable({ rows: 2, cols: 2 });
+
+      expect(editor.state.doc.childCount).toBe(1);
+      expect(editor.state.doc.child(0).type.name).toBe('structuredContentBlock');
+
+      const insertedSdt = editor.state.doc.child(0);
+      expect(insertedSdt.childCount).toBe(1);
+      expect(insertedSdt.child(0).type.name).toBe('table');
+    });
+
+    it('inserts the table inside structuredContentBlock content for text selections', async () => {
+      const { docx, media, mediaFiles, fonts } = cachedBlankDoc;
+      ({ editor } = initTestEditor({ content: docx, media, mediaFiles, fonts }));
+
+      const { schema } = editor.state;
+      const paragraph = schema.nodes.paragraph.create(null, schema.text('Hello'));
+      const sdt = schema.nodes.structuredContentBlock.create({ id: '1002', tag: 'block_table_sdt' }, [paragraph]);
+      const doc = schema.nodes.doc.create(null, [sdt]);
+      editor.setState(EditorState.create({ schema, doc, plugins: editor.state.plugins }));
+
+      const textSelection = TextSelection.create(editor.state.doc, 2, 7);
+      editor.view.dispatch(editor.state.tr.setSelection(textSelection));
+
+      editor.commands.insertTable({ rows: 2, cols: 2 });
+
+      expect(editor.state.doc.childCount).toBe(1);
+      expect(editor.state.doc.child(0).type.name).toBe('structuredContentBlock');
+
+      const insertedSdt = editor.state.doc.child(0);
+      expect(insertedSdt.childCount).toBe(2);
+      expect(insertedSdt.child(0).type.name).toBe('paragraph');
+      expect(insertedSdt.child(1).type.name).toBe('table');
+    });
+
     it('places cursor in first cell and adds trailing paragraph when inserting table with AllSelection', async () => {
       const { docx, media, mediaFiles, fonts } = cachedBlankDoc;
       ({ editor } = initTestEditor({ content: docx, media, mediaFiles, fonts }));