fix(rich-text-web): keep table sizes out of inline styles in class style mode

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Author: samuelreichert

packages/pluggableWidgets/rich-text-web/CHANGELOG.md

@@ -10,6 +10,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 - We fixed an issue where table and cell border settings had no effect when the style data format was set to "Class".
 
+- We fixed an issue where table, column and cell sizes were saved as inline styles when the style data format was set to "Class".
+
 ## [5.1.0] - 2026-09-29
 
 ### Added

packages/pluggableWidgets/rich-text-web/src/__tests__/RichTextFormatStyle.spec.ts

@@ -30,3 +30,26 @@ describe("RichTextFormatStyle.scss table borders", () => {
         expect(css).not.toMatch(/border-(width|style|color): [^;]*\bor\b/);
     });
 });
+
+// Class style mode saves table, column and cell sizes as data attributes only (no `style`
+// attribute), so the sizes must come from these rules. The attribute selectors keep them
+// off inline-mode tables.
+describe("RichTextFormatStyle.scss table sizes", () => {
+    const css = compile(join(__dirname, "../ui/RichTextFormatStyle.scss")).css;
+
+    it.each([
+        [".widget-rich-text table[data-width] {", "width: attr(data-width type(<length-percentage>));"],
+        [".widget-rich-text table[data-min-height] {", "min-height: attr(data-min-height type(<length-percentage>));"],
+        [".widget-rich-text col[data-col-width] {", "width: attr(data-col-width type(<length-percentage>));"],
+        [
+            ".widget-rich-text td[data-cell-width],\n.widget-rich-text th[data-cell-width] {",
+            "width: attr(data-cell-width type(<length-percentage>));"
+        ],
+        [
+            ".widget-rich-text td[data-cell-height],\n.widget-rich-text th[data-cell-height] {",
+            "height: attr(data-cell-height type(<length-percentage>));"
+        ]
+    ])("renders %s from a typed attr()", (selector, declaration) => {
+        expect(css).toContain(`${selector}\n  ${declaration}\n}`);
+    });
+});

packages/pluggableWidgets/rich-text-web/src/extensions/TableBackgroundColor.ts

@@ -17,10 +17,13 @@ declare module "@tiptap/core" {
     }
 }
 
-// Helper to create colgroup (copied from TipTap source)
+// Helper to create colgroup (copied from TipTap source).
+// Inline format puts each column width in the <col> `style`; class format stores it in
+// `data-col-width` instead and RichTextFormatStyle.scss renders it.
 function createColGroup(
     node: any,
-    cellMinWidth: number
+    cellMinWidth: number,
+    styleDataFormat: "inline" | "class" = "inline"
 ): { colgroup: any[]; tableWidth: string; tableMinWidth: string } {
     let totalWidth = 0;
     let fixedWidth = true;
@@ -50,7 +53,11 @@ function createColGroup(
             }
 
             const safeCssWidth = safeSize(cssWidth);
-            cols.push(["col", safeCssWidth ? { style: `width: ${safeCssWidth}` } : {}]);
+            if (styleDataFormat === "class") {
+                cols.push(["col", safeCssWidth ? { "data-col-width": safeCssWidth } : {}]);
+            } else {
+                cols.push(["col", safeCssWidth ? { style: `width: ${safeCssWidth}` } : {}]);
+            }
         }
     }
 
@@ -241,7 +248,11 @@ export const TableBackgroundColor = Table.extend<TableBackgroundColorOptions>({
     },
 
     renderHTML({ node, HTMLAttributes }): DOMOutputSpec {
-        const { colgroup, tableWidth, tableMinWidth } = createColGroup(node, this.options.cellMinWidth || 25);
+        const { colgroup, tableWidth, tableMinWidth } = createColGroup(
+            node,
+            this.options.cellMinWidth || 25,
+            this.options.styleDataFormat
+        );
 
         // Get style attributes from node (all validated before entering the style string)
         const explicitWidth = safeSize(node.attrs.width);
@@ -251,22 +262,22 @@ export const TableBackgroundColor = Table.extend<TableBackgroundColorOptions>({
         // Build the style string by merging table width, background, and border properties
         const segments: string[] = [];
 
-        // Explicit table width wins as the footprint; otherwise fall back to the
-        // colwidth-derived width/min-width. Per-column min-width still comes from colgroup.
-        if (explicitWidth) {
-            segments.push(`width: ${explicitWidth}`);
-        } else if (tableWidth) {
-            segments.push(`width: ${tableWidth}`);
-        } else if (tableMinWidth) {
-            segments.push(`min-width: ${tableMinWidth}`);
-        }
+        if (this.options.styleDataFormat === "inline") {
+            // Explicit table width wins as the footprint; otherwise fall back to the
+            // colwidth-derived width/min-width. Per-column min-width still comes from colgroup.
+            if (explicitWidth) {
+                segments.push(`width: ${explicitWidth}`);
+            } else if (tableWidth) {
+                segments.push(`width: ${tableWidth}`);
+            } else if (tableMinWidth) {
+                segments.push(`min-width: ${tableMinWidth}`);
+            }
 
-        // Explicit table minimum height (rows still grow with content)
-        if (minHeight) {
-            segments.push(`min-height: ${minHeight}`);
-        }
+            // Explicit table minimum height (rows still grow with content)
+            if (minHeight) {
+                segments.push(`min-height: ${minHeight}`);
+            }
 
-        if (this.options.styleDataFormat === "inline") {
             // Add background color if present
             if (backgroundColor) {
                 segments.push(`background-color: ${backgroundColor}`);
@@ -279,7 +290,9 @@ export const TableBackgroundColor = Table.extend<TableBackgroundColorOptions>({
 
         const styleString = segments.join("; ");
 
-        // Build class-based attributes for border properties
+        // Build class-based attributes. Class mode never emits a `style` attribute: explicit
+        // sizes are stored as data attributes (rendered by RichTextFormatStyle.scss) and the
+        // colwidth-derived width/min-width is not stored because it is recomputed.
         const classAttrs: Record<string, any> = {};
         if (this.options.styleDataFormat === "class") {
             const borderColor = safeColor(node.attrs.borderColor);
@@ -580,7 +593,7 @@ class TableBackgroundColorNodeView implements NodeView {
         }
 
         // Create new colgroup
-        const { colgroup } = createColGroup(this.node, this.cellMinWidth);
+        const { colgroup } = createColGroup(this.node, this.cellMinWidth, this.styleDataFormat);
         const colgroupElement = this.createElementFromSpec(colgroup as unknown as DOMOutputSpec);
         this.table.insertBefore(colgroupElement, this.contentDOM);
     }

packages/pluggableWidgets/rich-text-web/src/extensions/__tests__/TableClassFormat.spec.ts

@@ -22,12 +22,12 @@ function makeEditor(styleDataFormat: StyleFormat): Editor {
     });
 }
 
-/** Places the cursor inside the first data cell. */
+/** Places the cursor inside the paragraph of the first data cell. */
 function placeCursorInFirstCell(editor: Editor): void {
     let pos = 1;
     editor.state.doc.descendants((node, nodePos) => {
         if (pos === 1 && node.type.name === "tableCell") {
-            pos = nodePos + 1;
+            pos = nodePos + 2;
         }
         return pos === 1;
     });
@@ -87,3 +87,142 @@ describe("TableBackgroundColor NodeView — class format borders", () => {
         expect(table.classList.contains("has-table-border")).toBe(false);
     });
 });
+
+const SIZED_CLASS_HTML =
+    '<table data-width="400px" data-min-height="120px"><tbody>' +
+    '<tr><th data-cell-width="150px" data-cell-height="40px">H</th><th>H2</th></tr>' +
+    '<tr><td data-cell-width="150px" data-cell-height="40px">A</td><td>B</td></tr>' +
+    "</tbody></table>";
+
+/** Opening tags of every table, col, td and th element in the serialized HTML. */
+function tableTags(html: string): string[] {
+    return html.match(/<(table|col|td|th)\b[^>]*>/g) ?? [];
+}
+
+describe("Table sizes — class format", () => {
+    let editor: Editor;
+    afterEach(() => editor?.destroy());
+
+    it("saves table, column and cell sizes as data attributes without any style attribute", () => {
+        editor = makeEditor("class");
+        editor.commands.setContent(SIZED_CLASS_HTML);
+        const html = editor.getHTML();
+
+        expect(html).toContain('<table data-width="400px" data-min-height="120px">');
+        expect(html).toContain('<colgroup><col data-col-width="150px"><col></colgroup>');
+        expect(html).toContain('<th colspan="1" rowspan="1" data-cell-width="150px" data-cell-height="40px">');
+        expect(html).toContain('<td colspan="1" rowspan="1" data-cell-width="150px" data-cell-height="40px">');
+        const tags = tableTags(html);
+        expect(tags.length).toBe(7);
+        for (const tag of tags) {
+            expect(tag).not.toContain("style=");
+        }
+    });
+
+    it("does not persist the column-derived table width", () => {
+        editor = makeEditor("class");
+        editor.commands.setContent(
+            '<table><tbody><tr><td data-cell-width="150px">A</td><td data-cell-width="100px">B</td></tr></tbody></table>'
+        );
+        expect(tableTags(editor.getHTML())[0]).toBe("<table>");
+    });
+
+    it("round-trips sizes through getHTML/setContent", () => {
+        editor = makeEditor("class");
+        editor.commands.setContent(SIZED_CLASS_HTML);
+        const html = editor.getHTML();
+
+        editor.commands.setContent(html);
+        expect(editor.getHTML()).toBe(html);
+        const table = editor.state.doc.firstChild!;
+        expect(table.attrs.width).toBe("400px");
+        expect(table.attrs.minHeight).toBe("120px");
+        expect(table.firstChild!.firstChild!.attrs.cellWidth).toBe("150px");
+        expect(table.firstChild!.firstChild!.attrs.cellHeight).toBe("40px");
+    });
+
+    it("still loads sizes from older class-format content that has inline style widths", () => {
+        editor = makeEditor("class");
+        editor.commands.setContent(
+            '<table style="width: 400px; min-height: 120px;" data-width="400px" data-min-height="120px">' +
+                '<colgroup><col style="width: 150px;"><col></colgroup><tbody>' +
+                '<tr><td style="width: 150px; height: 40px;" data-cell-width="150px" data-cell-height="40px">A</td>' +
+                '<td style="width: 80px; height: 30px;">B</td></tr>' +
+                "</tbody></table>"
+        );
+        const table = editor.state.doc.firstChild!;
+        const row = table.firstChild!;
+        expect(table.attrs.width).toBe("400px");
+        expect(table.attrs.minHeight).toBe("120px");
+        expect(row.child(0).attrs.cellWidth).toBe("150px");
+        expect(row.child(0).attrs.cellHeight).toBe("40px");
+        // Cells without data attributes fall back to their inline style
+        expect(row.child(1).attrs.cellWidth).toBe("80px");
+        expect(row.child(1).attrs.cellHeight).toBe("30px");
+
+        // Saving again moves everything to data attributes
+        const html = editor.getHTML();
+        expect(html).toContain('<col data-col-width="150px"><col data-col-width="80px">');
+        expect(html).toContain('data-cell-width="80px" data-cell-height="30px"');
+        expect(html).not.toContain("style=");
+    });
+
+    it("renders and updates sizes without ever setting a style attribute", () => {
+        const setAttribute = jest.spyOn(Element.prototype, "setAttribute");
+        try {
+            editor = makeEditor("class");
+            editor.commands.setContent(SIZED_CLASS_HTML);
+            placeCursorInFirstCell(editor);
+            editor.commands.setTableWidth("500px");
+            editor.commands.setTableMinHeight("200px");
+            editor.commands.setCellAttribute("cellWidth", "220px");
+            editor.commands.setCellAttribute("cellHeight", "60px");
+            const html = editor.getHTML();
+
+            expect(html).toContain('<table data-width="500px" data-min-height="200px">');
+            expect(html).toContain('data-cell-width="220px" data-cell-height="60px"');
+            expect(setAttribute.mock.calls.length).toBeGreaterThan(0);
+            expect(setAttribute.mock.calls.filter(([name]) => name.toLowerCase() === "style")).toEqual([]);
+        } finally {
+            setAttribute.mockRestore();
+        }
+    });
+});
+
+describe("Table sizes — inline format", () => {
+    let editor: Editor;
+    afterEach(() => editor?.destroy());
+
+    // Expected strings are the inline renderer's output before the class-format sizing change.
+    it("keeps the explicit-size output unchanged", () => {
+        editor = makeEditor("inline");
+        editor.commands.setContent(
+            '<table style="width: 400px; min-height: 120px"><tbody>' +
+                '<tr><th style="width: 150px; height: 40px">H</th><th>H2</th></tr>' +
+                '<tr><td style="width: 150px; height: 40px">A</td><td>B</td></tr>' +
+                "</tbody></table>"
+        );
+        expect(editor.getHTML()).toBe(
+            '<table style="width: 400px; min-height: 120px;"><colgroup><col style="width: 150px;"><col></colgroup><tbody>' +
+                '<tr><th colspan="1" rowspan="1" style="width: 150px; height: 40px;"><p>H</p></th><th colspan="1" rowspan="1"><p>H2</p></th></tr>' +
+                '<tr><td colspan="1" rowspan="1" style="width: 150px; height: 40px;"><p>A</p></td><td colspan="1" rowspan="1"><p>B</p></td></tr>' +
+                "</tbody></table><p></p>"
+        );
+    });
+
+    it("keeps the column-derived width, colors and borders unchanged", () => {
+        editor = makeEditor("inline");
+        editor.commands.setContent(
+            "<table><tbody><tr>" +
+                '<td style="width: 150px; height: 40px; background-color: #00ff00; border-color: #d33115">A</td>' +
+                '<td style="width: 30%">B</td>' +
+                "</tr></tbody></table>"
+        );
+        expect(editor.getHTML()).toBe(
+            '<table style="min-width: 175px;"><colgroup><col style="width: 150px;"><col style="width: 30%;"></colgroup><tbody><tr>' +
+                '<td colspan="1" rowspan="1" style="width: 150px; height: 40px; background-color: rgb(0, 255, 0); border-style: solid; border-width: 1px; border-color: rgb(211, 49, 21);"><p>A</p></td>' +
+                '<td colspan="1" rowspan="1" style="width: 30%;"><p>B</p></td>' +
+                "</tr></tbody></table><p></p>"
+        );
+    });
+});

packages/pluggableWidgets/rich-text-web/src/extensions/tableCellStyling.ts

@@ -143,18 +143,18 @@ export function renderCellHTML(
     const classAttrs: Record<string, any> = {};
     const segments: string[] = [];
 
-    // Column width applies in both formats (always an inline width on the cell)
-    if (cellWidth) {
-        segments.push(`width: ${cellWidth}`);
-    }
-
-    // Cell height (minimum) applies in both formats
-    if (cellHeight) {
-        segments.push(`height: ${cellHeight}`);
-    }
-
     // Inline mode: build style string with border defaults
     if (styleDataFormat === "inline") {
+        // Column width
+        if (cellWidth) {
+            segments.push(`width: ${cellWidth}`);
+        }
+
+        // Cell height (minimum)
+        if (cellHeight) {
+            segments.push(`height: ${cellHeight}`);
+        }
+
         // Background color
         if (backgroundColor) {
             segments.push(`background-color: ${backgroundColor}`);
@@ -168,7 +168,8 @@ export function renderCellHTML(
 
     const styleString = segments.join("; ");
 
-    // Class mode: use data attributes
+    // Class mode: use data attributes only, never a `style` attribute (sizes are
+    // rendered by RichTextFormatStyle.scss from data-cell-width/data-cell-height)
     if (styleDataFormat === "class") {
         if (cellWidth) {
             classAttrs["data-cell-width"] = cellWidth;

packages/pluggableWidgets/rich-text-web/src/ui/RichTextFormatStyle.scss

@@ -116,4 +116,29 @@
         border-style: attr(data-border-style type(<custom-ident>), solid);
         border-color: attr(data-border-color type(<color>), var(--color-neutral-300, #d9d9d9));
     }
+
+    // Table, column and cell sizes, class mode. Class mode saves sizes as data attributes
+    // (never a `style` attribute); the attribute selectors keep these rules off inline-mode
+    // tables, which carry their sizes in `style`.
+    table[data-width] {
+        width: attr(data-width type(<length-percentage>));
+    }
+
+    table[data-min-height] {
+        min-height: attr(data-min-height type(<length-percentage>));
+    }
+
+    col[data-col-width] {
+        width: attr(data-col-width type(<length-percentage>));
+    }
+
+    td[data-cell-width],
+    th[data-cell-width] {
+        width: attr(data-cell-width type(<length-percentage>));
+    }
+
+    td[data-cell-height],
+    th[data-cell-height] {
+        height: attr(data-cell-height type(<length-percentage>));
+    }
 }