fix: Preserve table cell styles on Google Docs paste

packages/layout-engine/painters/dom/src/table/renderTableRow.test.ts

@@ -126,6 +126,89 @@ describe('renderTableRow', () => {
     expect(call.borders?.right).toBeDefined();
   });
 
+  it('does not paint interior right border for explicit cell borders in collapsed mode', () => {
+    renderTableRow(
+      createDeps({
+        rowIndex: 0,
+        totalRows: 1,
+        cellSpacingPx: 0,
+        columnWidths: [100, 100],
+        rowMeasure: {
+          height: 20,
+          cells: [
+            { width: 100, height: 20, gridColumnStart: 0, colSpan: 1, rowSpan: 1 },
+            { width: 100, height: 20, gridColumnStart: 1, colSpan: 1, rowSpan: 1 },
+          ],
+        },
+        row: {
+          id: 'row-1',
+          cells: [
+            {
+              id: 'cell-1',
+              attrs: {
+                borders: {
+                  top: { style: 'single', width: 2, color: '#123456' },
+                  right: { style: 'single', width: 2, color: '#123456' },
+                  bottom: { style: 'single', width: 2, color: '#123456' },
+                  left: { style: 'single', width: 2, color: '#123456' },
+                },
+              },
+              blocks: [{ kind: 'paragraph', id: 'p1', runs: [] }],
+            },
+            {
+              id: 'cell-2',
+              blocks: [{ kind: 'paragraph', id: 'p2', runs: [] }],
+            },
+          ],
+        },
+      }) as never,
+    );
+
+    expect(renderTableCellMock).toHaveBeenCalledTimes(2);
+    const firstCall = renderTableCellMock.mock.calls[0][0] as {
+      borders?: { right?: unknown; left?: unknown };
+    };
+
+    expect(firstCall.borders?.right).toBeUndefined();
+    expect(firstCall.borders?.left).toBeDefined();
+  });
+
+  it('does not paint interior bottom border for explicit cell borders in collapsed mode on non-final row', () => {
+    const explicit = {
+      top: { style: 'single' as const, width: 2, color: '#123456' },
+      right: { style: 'single' as const, width: 2, color: '#123456' },
+      bottom: { style: 'single' as const, width: 2, color: '#123456' },
+      left: { style: 'single' as const, width: 2, color: '#123456' },
+    };
+    renderTableRow(
+      createDeps({
+        rowIndex: 2,
+        totalRows: 5,
+        cellSpacingPx: 0,
+        columnWidths: [100],
+        rowMeasure: {
+          height: 20,
+          cells: [{ width: 100, height: 20, gridColumnStart: 0, colSpan: 1, rowSpan: 1 }],
+        },
+        row: {
+          id: 'row-1',
+          cells: [
+            {
+              id: 'cell-1',
+              attrs: { borders: explicit },
+              blocks: [{ kind: 'paragraph', id: 'p1', runs: [] }],
+            },
+          ],
+        },
+      }) as never,
+    );
+
+    expect(renderTableCellMock).toHaveBeenCalledTimes(1);
+    const call = getRenderedCellCall();
+    expect(call.borders?.bottom).toBeUndefined();
+    expect(call.borders?.top).toBeDefined();
+  });
+
   it('applies the table bottom border to a rowspan cell that reaches the final row', () => {
     renderTableRow(
       createDeps({

packages/layout-engine/painters/dom/src/table/renderTableRow.ts

@@ -74,6 +74,22 @@ const resolveRenderedCellBorders = ({
   const touchesBottomBoundary = cellBounds.touchesBottomEdge || continuesOnNext;
 
   if (hasExplicitBorders) {
+    if (cellSpacingPx === 0) {
+      // Collapsed model: avoid double interior borders by using single-owner sides.
+      // Keep explicit top/left (or table fallbacks), and only render right/bottom on table edges.
+      // Assumes shared interior edges specify the same border on both adjacent cells (e.g. Google Docs
+      // round-trips this way). Asymmetric (only one cell’s side set) may miss a line until we add conflict resolution.
+      return {
+        top: resolveTableBorderValue(cellBorders.top, touchesTopBoundary ? tableBorders.top : tableBorders.insideH),
+        right: cellBounds.touchesRightEdge ? resolveTableBorderValue(cellBorders.right, tableBorders.right) : undefined,
+        bottom: touchesBottomBoundary ? resolveTableBorderValue(cellBorders.bottom, tableBorders.bottom) : undefined,
+        left: resolveTableBorderValue(
+          cellBorders.left,
+          cellBounds.touchesLeftEdge ? tableBorders.left : tableBorders.insideV,
+        ),
+      };
+    }
+
     return {
       top: resolveTableBorderValue(cellBorders.top, touchesTopBoundary ? tableBorders.top : tableBorders.insideH),
       right: resolveTableBorderValue(cellBorders.right, cellBounds.touchesRightEdge ? tableBorders.right : undefined),

packages/super-editor/src/editors/v1/extensions/shared/parseCellBorders.js

@@ -0,0 +1,139 @@
+// @ts-check
+import { parseSizeUnit } from '@core/utilities/parseSizeUnit.js';
+import { cssColorToHex } from '@core/utilities/cssColorToHex.js';
+import { halfPointToPixels } from '@core/super-converter/helpers.js';
+
+/**
+ * Parsed cell border shape used by table cell / header parseDOM.
+ * @typedef {Object} ParsedCellBorder
+ * @property {'none' | 'single' | 'dashed' | 'dotted'} val
+ * @property {number} size
+ * @property {string} color
+ * @property {string} style
+ */
+
+/**
+ * Parsed borders object for each side.
+ * @typedef {Object} ParsedCellBorders
+ * @property {ParsedCellBorder} [top]
+ * @property {ParsedCellBorder} [right]
+ * @property {ParsedCellBorder} [bottom]
+ * @property {ParsedCellBorder} [left]
+ */
+
+const STYLE_TOKEN_SET = new Set([
+  'none',
+  'hidden',
+  'dotted',
+  'dashed',
+  'solid',
+  'double',
+  'groove',
+  'ridge',
+  'inset',
+  'outset',
+]);
+
+const STYLE_TOKEN_PATTERN = Array.from(STYLE_TOKEN_SET).join('|');
+
+/**
+ * Parse border width token into pixel number.
+ *
+ * @param {string} value
+ * @returns {number | null}
+ */
+const parseBorderWidth = (value) => {
+  const widthMatch = value.match(/(?:^|\s)(-?\d*\.?\d+(?:px|pt))(?=\s|$)/i);
+  if (!widthMatch?.[1]) return null;
+
+  const [widthValue, widthUnit] = parseSizeUnit(widthMatch[1]);
+
+  const numericWidth = Number(widthValue);
+  const size = widthUnit === 'pt' ? halfPointToPixels(numericWidth) : numericWidth;
+  return size;
+};
+
+/**
+ * Parse border style token.
+ *
+ * @param {string} value
+ * @returns {string | null}
+ */
+const parseBorderStyle = (value) => {
+  const styleMatch = value.match(new RegExp(`(?:^|\\s)(${STYLE_TOKEN_PATTERN})(?=\\s|$)`, 'i'));
+  return styleMatch?.[1] ? styleMatch[1].toLowerCase() : null;
+};
+
+/**
+ * Parse border color token.
+ *
+ * @param {string} value
+ * @returns {string | null}
+ */
+const parseBorderColor = (value) => {
+  const directColorMatch = value.match(/(rgba?\([^)]+\)|hsla?\([^)]+\)|#[0-9a-fA-F]{3,8}|var\([^)]+\))/i);
+  if (directColorMatch?.[1]) return directColorMatch[1];
+
+  const tokenColorMatch = value
+    .split(/\s+/)
+    .find((part) => /^[a-z]+$/i.test(part) && !STYLE_TOKEN_SET.has(part.toLowerCase()));
+  return tokenColorMatch || null;
+};
+
+/**
+ * Parse a single CSS border declaration.
+ *
+ * @param {string | undefined | null} rawValue
+ * @returns {ParsedCellBorder | null}
+ */
+const parseBorderValue = (rawValue) => {
+  if (!rawValue || typeof rawValue !== 'string') return null;
+  const value = rawValue.trim();
+  if (!value) return null;
+
+  if (value === 'none') {
+    return { val: 'none', size: 0, color: 'auto', style: 'none' };
+  }
+
+  const size = parseBorderWidth(value);
+  const style = parseBorderStyle(value);
+  const color = parseBorderColor(value);
+
+  const hexColor = cssColorToHex(color);
+  if (style === 'none') {
+    return { val: 'none', size: 0, color: 'auto', style: 'none' };
+  }
+
+  if (size == null && !hexColor && !style) return null;
+
+  return {
+    val: style === 'dashed' || style === 'dotted' ? style : 'single',
+    size: size ?? 1,
+    color: hexColor || 'auto',
+    style: style || 'solid',
+  };
+};
+
+/**
+ * Parse cell borders from inline TD/TH styles.
+ *
+ * @param {HTMLElement} element
+ * @returns {ParsedCellBorders | null}
+ */
+export const parseCellBorders = (element) => {
+  const { style } = element;
+
+  const top = parseBorderValue(style?.borderTop || style?.border);
+  const right = parseBorderValue(style?.borderRight || style?.border);
+  const bottom = parseBorderValue(style?.borderBottom || style?.border);
+  const left = parseBorderValue(style?.borderLeft || style?.border);
+
+  if (!top && !right && !bottom && !left) return null;
+
+  return {
+    ...(top ? { top } : {}),
+    ...(right ? { right } : {}),
+    ...(bottom ? { bottom } : {}),
+    ...(left ? { left } : {}),
+  };
+};

packages/super-editor/src/editors/v1/extensions/shared/parseCellMargins.js

@@ -0,0 +1,52 @@
+// @ts-check
+import { parseSizeUnit } from '@core/utilities/parseSizeUnit.js';
+import { halfPointToPixels } from '@core/super-converter/helpers.js';
+
+/**
+ * Cell margins configuration in pixels.
+ * @typedef {Object} CellMargins
+ * @property {number} [top] - Top margin in pixels
+ * @property {number} [right] - Right margin in pixels
+ * @property {number} [bottom] - Bottom margin in pixels
+ * @property {number} [left] - Left margin in pixels
+ */
+
+/**
+ * Parse one CSS padding side into pixels.
+ *
+ * @param {string} sideValue
+ * @returns {number | undefined}
+ */
+const parseSide = (sideValue) => {
+  if (!sideValue) return undefined;
+  const [rawValue, unit] = parseSizeUnit(sideValue);
+  const numericValue = Number(rawValue);
+  const calculatedValue = unit === 'pt' ? halfPointToPixels(numericValue) : numericValue;
+  return calculatedValue;
+};
+
+/**
+ * Parse cell margins from inline TD/TH padding styles.
+ *
+ * @param {HTMLElement} element
+ * @returns {CellMargins | null}
+ */
+export const parseCellMargins = (element) => {
+  const { style } = element;
+
+  const top = parseSide(style?.paddingTop);
+  const right = parseSide(style?.paddingRight);
+  const bottom = parseSide(style?.paddingBottom);
+  const left = parseSide(style?.paddingLeft);
+
+  if (top == null && right == null && bottom == null && left == null) {
+    return null;
+  }
+
+  return {
+    ...(top != null ? { top } : {}),
+    ...(right != null ? { right } : {}),
+    ...(bottom != null ? { bottom } : {}),
+    ...(left != null ? { left } : {}),
+  };
+};

packages/super-editor/src/editors/v1/extensions/shared/parseCellVerticalAlign.js

@@ -0,0 +1,16 @@
+// @ts-check
+
+/**
+ * Parse `vertical-align` from inline styles on table cells (TD/TH), e.g. pasted HTML.
+ * Maps CSS `middle` to the schema value `center`.
+ *
+ * @param {HTMLElement} element
+ * @returns {string | null}
+ */
+export function parseCellVerticalAlignFromStyle(element) {
+  const value = element.style?.verticalAlign;
+  if (!value || typeof value !== 'string') return null;
+  const normalized = value.trim().toLowerCase();
+  if (normalized === 'middle') return 'center';
+  return normalized;
+}

packages/super-editor/src/editors/v1/extensions/table-cell/helpers/renderCellBorderStyle.js → packages/super-editor/src/editors/v1/extensions/shared/renderCellBorderStyle.js

@@ -6,7 +6,7 @@
  * Shared by both `tableCell` and `tableHeader` node `renderDOM` methods
  * so the border-rendering logic stays in one place.
  *
- * @param {import('./createCellBorders.js').CellBorders | null | undefined} borders
+ * @param {import('../table-cell/helpers/createCellBorders.js').CellBorders | null | undefined} borders
  * @returns {{ style: string } | {}}
  */
 export const renderCellBorderStyle = (borders) => {