fix: image rendering inside textbox

Co-authored-by: VladaHarbour <dataart.vladyslava@harbourcollaborators.com>
Co-authored-by: Luccas Correa <luccascorrea@gmail.com>
Co-authored-by: Luccas Correa <luccas@harbourshare.com>
Source-PR: #3739
Closes #3739

Ported-From-Source-Repo: superdoc/orbit
Ported-From-Source-Commit: 7fc0712e48812f289c0482ce11e991fef5aee665
Ported-Public-Prefix: superdoc/public

Author: VladaHarbour

packages/layout-engine/layout-bridge/src/remeasure.ts

@@ -18,6 +18,12 @@ import {
   DEFAULT_TAB_INTERVAL_PX as _DEFAULT_TAB_INTERVAL_PX,
 } from '@superdoc/common/layout-constants';
 import { resolveListTextStartPx } from '@superdoc/common/list-marker-utils';
+import {
+  isAtomicLayoutRun,
+  getAtomicRunLayoutSize,
+  type MeasureAtomicText,
+  type MinimalAtomicRun,
+} from '@superdoc/common/atomic-run-size';
 
 /**
  * Type definition for paragraph block attributes that include indentation and tab stops.
@@ -349,6 +355,49 @@ const getRunWidth = (run: Run): number => {
   return typeof width === 'number' ? width : 0;
 };
 
+/**
+ * Measures field annotation label text on the shared canvas. Mirrors the run's
+ * font properties so the pill width tracks the painted glyphs. Falls back to a
+ * proportional estimate when no canvas context is available (SSR), matching how
+ * {@link measureRunSliceWidth} approximates ordinary text.
+ */
+const measureAtomicText: MeasureAtomicText = (text, run, fontSize) => {
+  const family = (run.fontFamily as string | undefined) || 'Arial';
+  const context = getCtx();
+  if (!context) {
+    return Math.max(0, text.length * (fontSize * 0.6));
+  }
+  const italic = run.italic ? 'italic ' : '';
+  const bold = run.bold ? 'bold ' : '';
+  context.font = `${italic}${bold}${fontSize}px ${family}`.trim();
+  return context.measureText(text).width;
+};
+
+const getAtomicRunLayoutWidth = (run: Run): number =>
+  getAtomicRunLayoutSize(run as MinimalAtomicRun, measureAtomicText).width;
+
+const getAtomicRunLayoutHeight = (run: Run): number =>
+  getAtomicRunLayoutSize(run as MinimalAtomicRun, measureAtomicText).height;
+
+/** Max atomic (image/math/field) height for runs actually included on [fromRun, toRun]. */
+const getLineMaxAtomicHeight = (
+  runs: Run[],
+  fromRun: number,
+  fromChar: number,
+  toRun: number,
+  toChar: number,
+): number => {
+  let max = 0;
+  for (let r = fromRun; r <= toRun; r += 1) {
+    const run = runs[r];
+    if (!isAtomicLayoutRun(run)) continue;
+    if (r === toRun && toChar === 0) continue;
+    if (r === fromRun && r === toRun && toChar <= fromChar) continue;
+    max = Math.max(max, getAtomicRunLayoutHeight(run));
+  }
+  return max;
+};
+
 /**
  * Checks if a break run is a line break (as opposed to page/column break).
  *
@@ -672,7 +721,10 @@ const scanTabAlignmentGroup = (
 
     const text = runText(run);
     if (!text) {
-      const runWidth = getRunWidth(run);
+      // Atomic runs (image/math/field annotation) carry their box in the shared sizer,
+      // not in `run.width` — field annotations in particular are 0 via getRunWidth, which
+      // would zero out the group and skip center/right/decimal alignment.
+      const runWidth = isAtomicLayoutRun(run) ? getAtomicRunLayoutWidth(run) : getRunWidth(run);
       if (runWidth > 0) {
         totalWidth += runWidth;
         endRun = r;
@@ -742,7 +794,7 @@ const measureTabAlignmentGroupInLine = (
 
     const text = runText(run);
     if (!text) {
-      totalWidth += getRunWidth(run);
+      totalWidth += isAtomicLayoutRun(run) ? getAtomicRunLayoutWidth(run) : getRunWidth(run);
       continue;
     }
 
@@ -1001,7 +1053,27 @@ const applyTabLayoutToLines = (
 
       const text = runText(run);
       if (!text) {
-        cursorX += getRunWidth(run);
+        const atomicWidth = isAtomicLayoutRun(run) ? getAtomicRunLayoutWidth(run) : getRunWidth(run);
+        // Position atomic runs (image/math/field annotation) that follow an
+        // end/center/decimal tab so the pill aligns to the stop, matching the DOM
+        // measurer. Without this the pending alignment would leak to a later text run.
+        const pendingTabAlign = consumePendingTabAlignStart();
+        if (pendingTabAlign != null) {
+          const segment: LineSegment = {
+            runIndex,
+            fromChar: 0,
+            toChar: 1,
+            width: atomicWidth,
+            x: pendingTabAlign.paintX,
+            ...(pendingTabAlign.precedingTabEndX !== undefined
+              ? { precedingTabEndX: pendingTabAlign.precedingTabEndX }
+              : {}),
+          };
+          cursorX = pendingTabAlign.layoutX + atomicWidth;
+          segments.push(segment);
+        } else {
+          cursorX += atomicWidth;
+        }
         lineWidth = Math.max(lineWidth, cursorX);
         continue;
       }
@@ -1395,6 +1467,17 @@ export function remeasureParagraph(
         endChar = text.length > 0 ? text.length : start + 1;
         continue;
       }
+      if (text.length === 0 && isAtomicLayoutRun(run)) {
+        const atomicWidth = getAtomicRunLayoutWidth(run);
+        if (width > 0 && width + atomicWidth > effectiveMaxWidth - WIDTH_FUDGE_PX) {
+          didBreakInThisLine = true;
+          break;
+        }
+        width += atomicWidth;
+        endRun = r;
+        endChar = 1;
+        continue;
+      }
       for (let c = start; c < text.length; c += 1) {
         const ch = text[c];
         if (ch === '\t') {
@@ -1488,6 +1571,8 @@ export function remeasureParagraph(
       endChar = startChar + 1;
     }
 
+    const lineMaxAtomicHeight = getLineMaxAtomicHeight(runs, startRun, startChar, endRun, endChar);
+
     const line: Line = {
       fromRun: startRun,
       fromChar: startChar,
@@ -1496,8 +1581,9 @@ export function remeasureParagraph(
       width,
       ascent: 0,
       descent: 0,
-      lineHeight: lineHeightForRuns(runs, startRun, endRun, lastMeasuredFontSize),
+      lineHeight: Math.max(lineHeightForRuns(runs, startRun, endRun, lastMeasuredFontSize), lineMaxAtomicHeight),
       maxWidth: effectiveMaxWidth,
+      ...(lineMaxAtomicHeight > 0 ? { maxImageHeight: lineMaxAtomicHeight } : {}),
     };
     lines.push(line);
     if (lineMaxTextFontSize > 0) {

packages/layout-engine/layout-bridge/test/remeasure.test.ts

@@ -1638,4 +1638,125 @@ describe('remeasureParagraph', () => {
       expect(measure.lines[0].width).toBeGreaterThan(0);
     });
   });
+
+  describe('atomic runs', () => {
+    it('does not retain image line height after rewinding past an inline image break point', () => {
+      const block = createBlock([
+        textRun('A '),
+        {
+          kind: 'image',
+          src: 'data:image/png;base64,abc',
+          width: 179,
+          height: 179,
+          pmStart: 3,
+          pmEnd: 4,
+        },
+        textRun('B'.repeat(30)),
+      ]);
+
+      // Fits "A " + image, then overflows on following text and rewinds to the space.
+      const measure = remeasureParagraph(block, 200);
+
+      expect(measure.lines.length).toBeGreaterThan(1);
+      expect(measure.lines[0].toRun).toBe(0);
+      expect(measure.lines[0].toChar).toBe(2);
+      expect(measure.lines[0].maxImageHeight).toBeUndefined();
+      expect(measure.lines[0].lineHeight).toBeCloseTo(16 * 1.2);
+      expect(measure.lines[1].maxImageHeight).toBe(179);
+    });
+
+    it('measures image-only paragraphs with correct width and line height', () => {
+      const block = createBlock([
+        {
+          kind: 'image',
+          src: 'data:image/png;base64,abc',
+          width: 179,
+          height: 179,
+          pmStart: 1,
+          pmEnd: 2,
+        },
+      ]);
+      block.attrs = { alignment: 'center' };
+
+      const measure = remeasureParagraph(block, 179.8);
+
+      expect(measure.lines).toHaveLength(1);
+      expect(measure.lines[0].width).toBe(179);
+      expect(measure.lines[0].lineHeight).toBe(179);
+      expect(measure.lines[0].maxImageHeight).toBe(179);
+      expect(measure.totalHeight).toBe(179);
+    });
+
+    it('sizes field annotation pills from displayLabel + padding (not run.width/height)', () => {
+      // Regression: field annotation runs carry no top-level width/height, so the old
+      // atomic sizing measured them 0x0 and the pill collapsed. The shared sizer now
+      // measures the label (4 chars * 10px) + pill padding (8px) = 48px wide.
+      const block = createBlock([
+        {
+          kind: 'fieldAnnotation',
+          variant: 'text',
+          displayLabel: 'Name',
+          fontSize: 16,
+          pmStart: 1,
+          pmEnd: 2,
+        } as unknown as Run,
+      ]);
+
+      const measure = remeasureParagraph(block, 200);
+
+      expect(measure.lines).toHaveLength(1);
+      expect(measure.lines[0].width).toBe(48);
+      // Pill height = fontSize * 1.2 + vertical padding (6) = 25.2, taller than the
+      // 16px-text line height, so it drives both maxImageHeight and lineHeight.
+      expect(measure.lines[0].maxImageHeight).toBeCloseTo(16 * 1.2 + 6);
+      expect(measure.lines[0].lineHeight).toBeCloseTo(16 * 1.2 + 6);
+    });
+
+    it('sizes math runs from precomputed dimensions without adding dist* margins', () => {
+      const block = createBlock([
+        {
+          kind: 'math',
+          ommlJson: {},
+          textContent: '',
+          width: 30,
+          height: 24,
+          // dist* is not part of the math box; it must be ignored.
+          distLeft: 9,
+          distTop: 9,
+          pmStart: 1,
+          pmEnd: 2,
+        } as unknown as Run,
+      ]);
+
+      const measure = remeasureParagraph(block, 200);
+
+      expect(measure.lines).toHaveLength(1);
+      expect(measure.lines[0].width).toBe(30);
+      expect(measure.lines[0].maxImageHeight).toBe(24);
+    });
+
+    it('right-aligns a field annotation following an end tab (atomic group sizing)', () => {
+      // Regression: the tab look-ahead measured the field with getRunWidth (0), so the
+      // group width was zero and the aligned branch was skipped, leaving the pill at the
+      // tab stop instead of ending on it. The pill is 'AB' (2*10) + 8 padding = 28px, so
+      // a right (end) stop at 100px must start it at 72px.
+      const tabStop: TabStop = { pos: pxToTwips(100), val: 'end' };
+      const field = {
+        kind: 'fieldAnnotation',
+        variant: 'text',
+        displayLabel: 'AB',
+        fontSize: 16,
+        pmStart: 3,
+        pmEnd: 4,
+      } as unknown as Run;
+      const block = createBlock([textRun('X'), tabRun(), field], { tabs: [tabStop] });
+
+      const measure = remeasureParagraph(block, 200);
+
+      expect(measure.lines).toHaveLength(1);
+      const fieldSegment = measure.lines[0].segments?.find((segment) => segment.runIndex === 2);
+      expect(fieldSegment?.width).toBe(28);
+      expect(fieldSegment?.x).toBeCloseTo(72, 1);
+    });
+  });
 });

packages/layout-engine/layout-engine/src/layout-drawing.test.ts

@@ -842,6 +842,70 @@ describe('layoutDrawingBlock', () => {
       expect(fragment.x).toBe(400);
     });
 
+    it('should center inline textboxShape drawings using paragraph alignment metadata', () => {
+      const context = createMockContext(
+        {
+          drawingKind: 'textboxShape',
+          attrs: {
+            pmStart: 10,
+            pmEnd: 11,
+            wrap: { type: 'Inline' },
+            inlineParagraphAlignment: 'center',
+          },
+        },
+        { width: 200, height: 150 },
+      );
+      const state = context.ensurePage();
+
+      layoutDrawingBlock(context);
+
+      const fragment = state.page.fragments[0] as DrawingFragment;
+      // alignBox = 600, extra = 600 - 200 = 400, x = 0 + 200 = 200
+      expect(fragment.x).toBe(200);
+    });
+
+    it('should right-align inline textboxShape drawings using paragraph alignment metadata', () => {
+      const context = createMockContext(
+        {
+          drawingKind: 'textboxShape',
+          attrs: {
+            pmStart: 10,
+            pmEnd: 11,
+            wrap: { type: 'Inline' },
+            inlineParagraphAlignment: 'right',
+          },
+        },
+        { width: 200, height: 150 },
+      );
+      const state = context.ensurePage();
+
+      layoutDrawingBlock(context);
+
+      const fragment = state.page.fragments[0] as DrawingFragment;
+      expect(fragment.x).toBe(400);
+    });
+
+    it('should not apply paragraph alignment metadata when textboxShape is not inline', () => {
+      const context = createMockContext(
+        {
+          drawingKind: 'textboxShape',
+          attrs: {
+            pmStart: 10,
+            pmEnd: 11,
+            wrap: { type: 'Square' },
+            inlineParagraphAlignment: 'center',
+          },
+        },
+        { width: 200, height: 150 },
+      );
+      const state = context.ensurePage();
+
+      layoutDrawingBlock(context);
+
+      const fragment = state.page.fragments[0] as DrawingFragment;
+      expect(fragment.x).toBe(0);
+    });
+
     it('should not apply paragraph alignment metadata when shapeGroup is not inline', () => {
       const context = createMockContext(
         {

packages/layout-engine/layout-engine/src/layout-drawing.ts

@@ -89,7 +89,10 @@ export function layoutDrawingBlock({
   const maxWidthForBlock =
     attrs?.isFullWidth === true && maxWidth > 0 ? Math.max(1, maxWidth - indentLeft - indentRight) : maxWidth;
   const rawWrap = attrs?.wrap as { type?: unknown } | undefined;
-  const isInlineShapeGroup = block.drawingKind === 'shapeGroup' && rawWrap?.type === 'Inline';
+  // Inline shape groups and textboxes render at their authored width, so a centered or
+  // right-aligned host paragraph must offset the whole box within the column (SD: IT-1140).
+  const isInlineAlignableDrawing =
+    (block.drawingKind === 'shapeGroup' || block.drawingKind === 'textboxShape') && rawWrap?.type === 'Inline';
   const inlineParagraphAlignment =
     attrs?.inlineParagraphAlignment === 'center' || attrs?.inlineParagraphAlignment === 'right'
       ? attrs.inlineParagraphAlignment
@@ -117,7 +120,7 @@ export function layoutDrawingBlock({
 
   const pmRange = extractBlockPmRange(block);
   let x = columnX(state) + marginLeft + indentLeft;
-  if (isInlineShapeGroup && inlineParagraphAlignment) {
+  if (isInlineAlignableDrawing && inlineParagraphAlignment) {
     const pIndentLeft = typeof attrs?.paragraphIndentLeft === 'number' ? attrs.paragraphIndentLeft : 0;
     const pIndentRight = typeof attrs?.paragraphIndentRight === 'number' ? attrs.paragraphIndentRight : 0;
     const alignBox = Math.max(0, maxWidthForBlock - pIndentLeft - pIndentRight);