fix(super-editor): constrain images to table cell width in web layout (SD-2416) (#2680)

* fix(super-editor): constrain images to table cell width in web layout mode

getMaxContentSize() returned an empty object in web layout mode, bypassing
the table cell width constraint added in SD-1156. Move the cell check before
the web layout early return so images inserted into a cell are resized to fit.

* test: add web layout and Infinity height coverage for image cell constraint

- Add tableHeader web layout test to Editor.webLayout.test.ts
- Add getAllowedImageDimensions tests for height: Infinity (the web
  layout + table cell code path)
- Add test for image fitting within constraints with Infinity height

---------

Co-authored-by: Caio Pizzol <caio@harbourshare.com>

Author: luccas-harbour

packages/super-editor/src/editors/v1/core/Editor.ts

@@ -2492,15 +2492,33 @@ export class Editor extends EventEmitter<EditorEventMap> {
    * images are never wider than their containing cell.
    *
    * @returns Size object with width and height in pixels, or empty object if no page size.
-   * @note In web layout mode, returns empty object to skip content constraints.
-   *       CSS max-width: 100% handles responsive display while preserving full resolution.
+   * @note In web layout mode, returns empty object to skip content constraints unless
+   *       the cursor is inside a table cell, in which case the cell width is returned.
    */
   getMaxContentSize(): { width?: number; height?: number } {
     if (!this.converter) return {};
 
-    // In web layout mode: skip constraints, let CSS handle responsive sizing
-    // This preserves full image resolution while CSS max-width: 100% handles display
+    // When the cursor is inside a table cell, constrain width to the cell's content
+    // width so images inserted into a cell are never wider than that cell.
+    // This applies to both print and web layout modes.
+    let cellConstraintWidth = 0;
+    const { $head } = this.state.selection;
+    for (let d = $head.depth; d > 0; d--) {
+      const node = $head.node(d);
+      if (node.type.name === 'tableCell' || node.type.name === 'tableHeader') {
+        cellConstraintWidth = getCellContentWidthPx(node);
+        break;
+      }
+    }
+
+    // In web layout mode there are no page dimensions. Return cell width constraint
+    // if inside a table cell, otherwise skip constraints entirely (CSS handles display).
     if (this.isWebLayout()) {
+      if (cellConstraintWidth > 0) {
+        // Infinity lets getAllowedImageDimensions() skip the height check while
+        // still applying the width constraint (web layout has no page height).
+        return { width: cellConstraintWidth, height: Infinity };
+      }
       return {};
     }
 
@@ -2523,18 +2541,8 @@ export class Editor extends EventEmitter<EditorEventMap> {
     const maxHeight = height * PIXELS_PER_INCH - topPx - bottomPx - MAX_HEIGHT_BUFFER_PX;
     const maxWidth = width * PIXELS_PER_INCH - leftPx - rightPx - MAX_WIDTH_BUFFER_PX;
 
-    // When the cursor is inside a table cell, constrain width to the cell's content
-    // width so images inserted into a cell are never wider than that cell.
-    const { $head } = this.state.selection;
-    for (let d = $head.depth; d > 0; d--) {
-      const node = $head.node(d);
-      if (node.type.name === 'tableCell' || node.type.name === 'tableHeader') {
-        const cellWidth = getCellContentWidthPx(node);
-        if (cellWidth > 0) {
-          return { width: cellWidth, height: maxHeight };
-        }
-        break;
-      }
+    if (cellConstraintWidth > 0) {
+      return { width: cellConstraintWidth, height: maxHeight };
     }
 
     return {

packages/super-editor/src/editors/v1/core/Editor.webLayout.test.ts

@@ -187,10 +187,12 @@ describe('Editor Web Layout Mode', () => {
      */
     function makeEditor({
       ancestors,
+      layout = 'print' as 'print' | 'web',
       pageSize = { width: 8.5, height: 11 },
       pageMargins = { top: 1, bottom: 1, left: 1, right: 1 },
     }: {
       ancestors: Array<{ type: { name: string }; attrs: Record<string, unknown> }>;
+      layout?: 'print' | 'web';
       pageSize?: { width: number; height: number };
       pageMargins?: { top: number; bottom: number; left: number; right: number };
     }) {
@@ -201,7 +203,7 @@ describe('Editor Web Layout Mode', () => {
 
       return {
         converter: { pageStyles: { pageSize, pageMargins } },
-        options: { viewOptions: { layout: 'print' } },
+        options: { viewOptions: { layout } },
         state: { selection: { $head } },
         isWebLayout() {
           return (this as any).options.viewOptions?.layout === 'web';
@@ -323,5 +325,86 @@ describe('Editor Web Layout Mode', () => {
 
       expect(size.width).toBe(expectedWidth);
     });
+
+    describe('web layout mode', () => {
+      it('constrains width to cell colwidth in web layout mode', () => {
+        const editor = makeEditor({
+          layout: 'web',
+          ancestors: [
+            { type: { name: 'tableRow' }, attrs: {} },
+            { type: { name: 'tableCell' }, attrs: { colwidth: [200], cellMargins: null } },
+            { type: { name: 'paragraph' }, attrs: {} },
+          ],
+        });
+
+        const size = Editor.prototype.getMaxContentSize.call(editor);
+
+        expect(size.width).toBe(200);
+        // Web layout has no page height, so Infinity is used to skip the height check
+        // while still letting getAllowedImageDimensions apply the width constraint.
+        expect(size.height).toBe(Infinity);
+      });
+
+      it('subtracts cell margins in web layout mode', () => {
+        const editor = makeEditor({
+          layout: 'web',
+          ancestors: [
+            { type: { name: 'tableRow' }, attrs: {} },
+            {
+              type: { name: 'tableCell' },
+              attrs: { colwidth: [300], cellMargins: { left: 20, right: 15 } },
+            },
+            { type: { name: 'paragraph' }, attrs: {} },
+          ],
+        });
+
+        const size = Editor.prototype.getMaxContentSize.call(editor);
+
+        expect(size.width).toBe(265); // 300 - 20 - 15
+        expect(size.height).toBe(Infinity);
+      });
+
+      it('returns empty object in web layout mode when not inside a table cell', () => {
+        const editor = makeEditor({
+          layout: 'web',
+          ancestors: [{ type: { name: 'paragraph' }, attrs: {} }],
+        });
+
+        const size = Editor.prototype.getMaxContentSize.call(editor);
+
+        expect(size).toEqual({});
+      });
+
+      it('returns empty object in web layout mode when colwidth is empty', () => {
+        const editor = makeEditor({
+          layout: 'web',
+          ancestors: [
+            { type: { name: 'tableRow' }, attrs: {} },
+            { type: { name: 'tableCell' }, attrs: { colwidth: [], cellMargins: null } },
+            { type: { name: 'paragraph' }, attrs: {} },
+          ],
+        });
+
+        const size = Editor.prototype.getMaxContentSize.call(editor);
+
+        expect(size).toEqual({});
+      });
+
+      it('constrains width for tableHeader in web layout mode', () => {
+        const editor = makeEditor({
+          layout: 'web',
+          ancestors: [
+            { type: { name: 'tableRow' }, attrs: {} },
+            { type: { name: 'tableHeader' }, attrs: { colwidth: [250], cellMargins: { left: 10, right: 10 } } },
+            { type: { name: 'paragraph' }, attrs: {} },
+          ],
+        });
+
+        const size = Editor.prototype.getMaxContentSize.call(editor);
+
+        expect(size.width).toBe(230); // 250 - 10 - 10
+        expect(size.height).toBe(Infinity);
+      });
+    });
   });
 });

packages/super-editor/src/editors/v1/extensions/image/imageHelpers/basicHelpers.test.js

@@ -71,6 +71,18 @@ describe('image helper utilities', () => {
     expect(height).toBeLessThanOrEqual(300);
   });
 
+  it('constrains width while skipping height clamp when maxHeight is Infinity', () => {
+    const { width, height } = getAllowedImageDimensions(1000, 800, () => ({ width: 200, height: Infinity }));
+    expect(width).toBe(200);
+    expect(height).toBe(160); // aspect ratio preserved: 1000/800 = 1.25, 200/1.25 = 160
+  });
+
+  it('returns original dimensions when maxHeight is Infinity and image fits', () => {
+    const { width, height } = getAllowedImageDimensions(100, 80, () => ({ width: 200, height: Infinity }));
+    expect(width).toBe(100);
+    expect(height).toBe(80);
+  });
+
   it('processing image returns resized base64 when no resize needed', async () => {
     const originalImage = globalThis.Image;
     class MockImage {