fix(super-editor): persist data-URI images set as SDT preset content (SD-3116)

packages/layout-engine/contracts/src/index.ts

@@ -290,6 +290,10 @@ export type FlowRunLink = {
   history?: boolean;
 };
 
+export const EMPTY_SDT_PLACEHOLDER_TEXT = 'Click or tap here to enter text';
+
+export type SdtVisualPlaceholder = 'emptyInlineSdt' | 'emptyBlockSdt';
+
 /**
  * Common formatting marks that can be applied to any run type.
  * Used by TextRun, TabRun, and other run types that support inline formatting.
@@ -343,7 +347,7 @@ export type TextRun = RunMarks & {
   dataAttrs?: Record<string, string>;
   sdt?: SdtMetadata;
   /** Layout-only placeholder for visual affordances that do not represent document text. */
-  visualPlaceholder?: 'emptyInlineSdt';
+  visualPlaceholder?: SdtVisualPlaceholder;
   link?: FlowRunLink;
   /** Token annotations for dynamic content (page numbers, etc.). */
   token?: 'pageNumber' | 'totalPageCount' | 'pageReference';
@@ -2199,6 +2203,11 @@ export { isResolvedTableItem, isResolvedImageItem, isResolvedDrawingItem } from
 
 // Pure transformations on inline-run shapes (used by pm-adapter, layout-bridge,
 // and painter-dom). Located in contracts to avoid reverse stage dependencies.
-export { expandRunsForInlineNewlines, isEmptyInlineSdtPlaceholderRun, sliceRunsForLine } from './run-helpers.js';
+export {
+  expandRunsForInlineNewlines,
+  isEmptyInlineSdtPlaceholderRun,
+  isEmptySdtPlaceholderRun,
+  sliceRunsForLine,
+} from './run-helpers.js';
 
 export * as Engines from './engines/index.js';

packages/layout-engine/contracts/src/pm-range.ts

@@ -1,4 +1,5 @@
 import type { FlowBlock, Line, ParagraphBlock, ParagraphMeasure } from './index.js';
+import { isEmptySdtPlaceholderRun } from './run-helpers.js';
 
 /**
  * Represents a ProseMirror position range for a line or fragment.
@@ -93,6 +94,15 @@ export function computeLinePmRange(block: FlowBlock, line: Line): LinePmRange {
     const runPmStart = coercePmStart(run);
     if (runPmStart == null) continue;
 
+    if (isEmptySdtPlaceholderRun(run)) {
+      const runPmEnd = coercePmEnd(run) ?? runPmStart;
+      if (pmStart == null) {
+        pmStart = runPmStart;
+      }
+      pmEnd = runPmEnd;
+      continue;
+    }
+
     if (isAtomicRunKind((run as { kind?: unknown }).kind) || isImageLikeRun(run)) {
       const runPmEnd = coercePmEnd(run) ?? runPmStart + 1;
       if (pmStart == null) {

packages/layout-engine/contracts/src/run-helpers.test.ts

@@ -1,6 +1,6 @@
 import { describe, it, expect } from 'vitest';
 import type { FlowBlock, Line, ParagraphBlock, Run, TabRun, TextRun, TrackedChangeMeta } from './index.js';
-import { expandRunsForInlineNewlines, sliceRunsForLine } from './run-helpers.js';
+import { expandRunsForInlineNewlines, isEmptySdtPlaceholderRun, sliceRunsForLine } from './run-helpers.js';
 
 describe('expandRunsForInlineNewlines', () => {
   const makeRun = (text: string, pmStart = 0): TextRun => ({
@@ -153,4 +153,17 @@ describe('sliceRunsForLine', () => {
 
     expect(sliceRunsForLine(block, line)).toEqual([run]);
   });
+
+  it('recognizes block SDT visual placeholders', () => {
+    const run: TextRun = {
+      kind: 'text',
+      text: '',
+      fontFamily: 'Arial',
+      fontSize: 12,
+      visualPlaceholder: 'emptyBlockSdt',
+      sdt: { type: 'structuredContent', scope: 'block', id: 'sdt-block-1' },
+    };
+
+    expect(isEmptySdtPlaceholderRun(run)).toBe(true);
+  });
 });

packages/layout-engine/contracts/src/run-helpers.ts

@@ -9,14 +9,20 @@
 
 import type { FlowBlock, Line, Run, TextRun } from './index.js';
 
-export function isEmptyInlineSdtPlaceholderRun(run: Run): run is TextRun & { visualPlaceholder: 'emptyInlineSdt' } {
+export function isEmptySdtPlaceholderRun(
+  run: Run,
+): run is TextRun & { visualPlaceholder: 'emptyInlineSdt' | 'emptyBlockSdt' } {
   return (
     (run.kind === 'text' || run.kind === undefined) &&
     'text' in run &&
-    (run as TextRun).visualPlaceholder === 'emptyInlineSdt'
+    ((run as TextRun).visualPlaceholder === 'emptyInlineSdt' || (run as TextRun).visualPlaceholder === 'emptyBlockSdt')
   );
 }
 
+export function isEmptyInlineSdtPlaceholderRun(run: Run): run is TextRun & { visualPlaceholder: 'emptyInlineSdt' } {
+  return isEmptySdtPlaceholderRun(run) && run.visualPlaceholder === 'emptyInlineSdt';
+}
+
 /**
  * Expands text runs that contain inline newlines into multiple runs.
  *
@@ -90,7 +96,7 @@ export function sliceRunsForLine(block: FlowBlock, line: Line): Run[] {
     }
 
     const text = run.text ?? '';
-    if (isEmptyInlineSdtPlaceholderRun(run)) {
+    if (isEmptySdtPlaceholderRun(run)) {
       result.push(run);
       continue;
     }

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

@@ -10,7 +10,7 @@ import type {
   ParagraphIndent,
   LeaderDecoration,
 } from '@superdoc/contracts';
-import { Engines } from '@superdoc/contracts';
+import { EMPTY_SDT_PLACEHOLDER_TEXT, Engines, isEmptySdtPlaceholderRun } from '@superdoc/contracts';
 import type { WordParagraphLayoutOutput } from '@superdoc/word-layout';
 import {
   LIST_MARKER_GAP as _LIST_MARKER_GAP,
@@ -126,6 +126,10 @@ function fontString(run: Run): string {
  * @returns Text content of the run, or empty string for non-text runs
  */
 function runText(run: Run): string {
+  if (isEmptySdtPlaceholderRun(run)) {
+    return run.sdt?.type === 'structuredContent' && run.sdt.appearance === 'hidden' ? '' : EMPTY_SDT_PLACEHOLDER_TEXT;
+  }
+
   return 'src' in run ||
     run.kind === 'lineBreak' ||
     run.kind === 'break' ||
@@ -1380,6 +1384,17 @@ export function remeasureParagraph(
       if (text.length > 0 && isTextRun(run)) {
         lineMaxTextFontSize = Math.max(lineMaxTextFontSize, run.fontSize ?? 16);
       }
+      if (isEmptySdtPlaceholderRun(run)) {
+        const placeholderWidth = text.length > 0 ? measureRunSliceWidth(run, 0, text.length) : 0;
+        if (width > 0 && width + placeholderWidth > effectiveMaxWidth - WIDTH_FUDGE_PX) {
+          didBreakInThisLine = true;
+          break;
+        }
+        width += placeholderWidth;
+        endRun = r;
+        endChar = text.length > 0 ? text.length : start + 1;
+        continue;
+      }
       for (let c = start; c < text.length; c += 1) {
         const ch = text[c];
         if (ch === '\t') {

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

@@ -11,7 +11,13 @@
  */
 
 import { beforeAll, describe, expect, it } from 'vitest';
-import type { ParagraphBlock, Run, TabStop } from '@superdoc/contracts';
+import {
+  EMPTY_SDT_PLACEHOLDER_TEXT,
+  computeLinePmRange,
+  type ParagraphBlock,
+  type Run,
+  type TabStop,
+} from '@superdoc/contracts';
 import { remeasureParagraph } from '../src/remeasure.ts';
 
 /**
@@ -216,6 +222,53 @@ describe('remeasureParagraph', () => {
       expect(measure.totalHeight).toBe(0);
     });
 
+    it('measures visible empty SDT placeholders using the placeholder prompt width', () => {
+      const block = createBlock([
+        textRun('', {
+          kind: 'text',
+          visualPlaceholder: 'emptyBlockSdt',
+          sdt: { type: 'structuredContent', scope: 'block', id: 'empty-block-sdt' },
+          pmStart: 12,
+          pmEnd: 12,
+        }),
+      ]);
+      const measure = remeasureParagraph(block, 500);
+
+      expect(measure.lines).toHaveLength(1);
+      expect(measure.lines[0].width).toBe(EMPTY_SDT_PLACEHOLDER_TEXT.length * CHAR_WIDTH);
+      expect(computeLinePmRange(block, measure.lines[0])).toEqual({ pmStart: 12, pmEnd: 12 });
+    });
+
+    it('keeps a visible empty SDT placeholder atomic when it is wider than the line', () => {
+      const block = createBlock([
+        textRun('', {
+          kind: 'text',
+          visualPlaceholder: 'emptyBlockSdt',
+          sdt: { type: 'structuredContent', scope: 'block', id: 'narrow-empty-block-sdt' },
+        }),
+      ]);
+      const measure = remeasureParagraph(block, 60);
+
+      expect(measure.lines).toHaveLength(1);
+      expect(measure.lines[0].fromRun).toBe(0);
+      expect(measure.lines[0].toRun).toBe(0);
+      expect(measure.lines[0].width).toBe(EMPTY_SDT_PLACEHOLDER_TEXT.length * CHAR_WIDTH);
+    });
+
+    it('keeps hidden empty SDT placeholders zero-width during remeasurement', () => {
+      const block = createBlock([
+        textRun('', {
+          kind: 'text',
+          visualPlaceholder: 'emptyBlockSdt',
+          sdt: { type: 'structuredContent', scope: 'block', id: 'hidden-block-sdt', appearance: 'hidden' },
+        }),
+      ]);
+      const measure = remeasureParagraph(block, 500);
+
+      expect(measure.lines).toHaveLength(1);
+      expect(measure.lines[0].width).toBe(0);
+    });
+
     it('handles single character per line when maxWidth is very narrow', () => {
       // With maxWidth=11 (barely fits 1 char at 10px + fudge), each char should be on its own line
       const block = createBlock([textRun('ABC')]);

packages/layout-engine/measuring/dom/src/index.test.ts

@@ -9,6 +9,7 @@ import type {
   DrawingBlock,
   TableMeasure,
 } from '@superdoc/contracts';
+import { EMPTY_SDT_PLACEHOLDER_TEXT } from '@superdoc/contracts';
 
 const expectParagraphMeasure = (measure: Measure): ParagraphMeasure => {
   expect(measure.kind).toBe('paragraph');
@@ -685,7 +686,7 @@ describe('measureBlock', () => {
       });
     });
 
-    it('measures empty inline SDT placeholders as a small inline box', async () => {
+    it('measures empty inline SDT placeholders using the visible placeholder text width', async () => {
       const block: FlowBlock = {
         kind: 'paragraph',
         id: 'empty-inline-sdt',
@@ -707,14 +708,44 @@ describe('measureBlock', () => {
       const measure = expectParagraphMeasure(await measureBlock(block, 1000));
 
       expect(measure.lines).toHaveLength(1);
-      expect(measure.lines[0]).toMatchObject({
-        fromRun: 0,
-        fromChar: 0,
-        toRun: 0,
-        toChar: 0,
-        width: 8,
-        segments: [{ runIndex: 0, fromChar: 0, toChar: 0, width: 8 }],
-      });
+      expect(measure.lines[0]).toMatchObject({ fromRun: 0, fromChar: 0, toRun: 0, toChar: 0 });
+      expect(measure.lines[0].width).toBeGreaterThan(8);
+      expect(measure.lines[0].segments).toHaveLength(1);
+      expect(measure.lines[0].segments[0]).toMatchObject({ runIndex: 0, fromChar: 0, toChar: 0 });
+      expect(measure.lines[0].segments[0].width).toBe(measure.lines[0].width);
+    });
+
+    it('applies textTransform when measuring empty SDT placeholder text', async () => {
+      const canvas = document.createElement('canvas');
+      const ctx = canvas.getContext('2d');
+      expect(ctx).not.toBeNull();
+      ctx!.font = '16px Arial';
+      const transformedPlaceholderText = EMPTY_SDT_PLACEHOLDER_TEXT.toUpperCase();
+      const transformedWidth = ctx!.measureText(transformedPlaceholderText).width;
+      const untransformedWidth = ctx!.measureText(EMPTY_SDT_PLACEHOLDER_TEXT).width;
+      expect(transformedWidth).not.toBeCloseTo(untransformedWidth, 2);
+
+      const block: FlowBlock = {
+        kind: 'paragraph',
+        id: 'empty-inline-sdt-uppercase',
+        runs: [
+          {
+            kind: 'text',
+            text: '',
+            fontFamily: 'Arial',
+            fontSize: 16,
+            textTransform: 'uppercase',
+            visualPlaceholder: 'emptyInlineSdt',
+            sdt: { type: 'structuredContent', scope: 'inline', id: 'sdt-empty-uppercase' },
+          },
+        ],
+        attrs: {},
+      };
+
+      const measure = expectParagraphMeasure(await measureBlock(block, 1000));
+
+      expect(measure.lines).toHaveLength(1);
+      expect(measure.lines[0].width).toBeCloseTo(transformedWidth, 2);
     });
   });
 

packages/layout-engine/measuring/dom/src/index.ts

@@ -61,8 +61,9 @@ import {
   type CellSpacing,
   type TableBorders,
   type TableBorderValue,
+  EMPTY_SDT_PLACEHOLDER_TEXT,
   effectiveTableCellSpacing,
-  isEmptyInlineSdtPlaceholderRun,
+  isEmptySdtPlaceholderRun,
   LeaderDecoration,
   resolveBaseFontSizeForVerticalText,
 } from '@superdoc/contracts';
@@ -209,8 +210,6 @@ const FIELD_ANNOTATION_VERTICAL_PADDING = 6; // Vertical padding/border for pill
 const DEFAULT_FIELD_ANNOTATION_FONT_SIZE = 16; // Default font size for field annotations
 const DEFAULT_PARAGRAPH_FONT_SIZE = 12;
 const DEFAULT_PARAGRAPH_FONT_FAMILY = 'Arial';
-const EMPTY_INLINE_SDT_PLACEHOLDER_WIDTH = 8;
-
 const isValidFontSize = (value: unknown): value is number =>
   typeof value === 'number' && Number.isFinite(value) && value > 0;
 
@@ -1036,7 +1035,7 @@ async function measureParagraphBlock(block: ParagraphBlock, maxWidth: number): P
   const emptyParagraphRun =
     normalizedRuns.length === 1 &&
     isEmptyTextRun(normalizedRuns[0] as Run) &&
-    !isEmptyInlineSdtPlaceholderRun(normalizedRuns[0] as Run)
+    !isEmptySdtPlaceholderRun(normalizedRuns[0] as Run)
       ? (normalizedRuns[0] as TextRun)
       : null;
   if (emptyParagraphRun) {
@@ -2018,11 +2017,22 @@ async function measureParagraphBlock(block: ParagraphBlock, maxWidth: number): P
       continue;
     }
 
-    if (isEmptyInlineSdtPlaceholderRun(run)) {
+    if (isEmptySdtPlaceholderRun(run)) {
+      const placeholderFont = buildFontString(run).font;
+      const placeholderText = applyTextTransform(EMPTY_SDT_PLACEHOLDER_TEXT, run);
+      const measuredPlaceholderWidth = getMeasuredTextWidth(
+        placeholderText,
+        placeholderFont,
+        run.letterSpacing ?? 0,
+        ctx,
+      );
+      const fallbackPlaceholderWidth = placeholderText.length * run.fontSize * 0.45;
       const placeholderWidth =
         run.sdt?.type === 'structuredContent' && run.sdt.appearance === 'hidden'
           ? 0
-          : EMPTY_INLINE_SDT_PLACEHOLDER_WIDTH;
+          : measuredPlaceholderWidth > 0
+            ? measuredPlaceholderWidth
+            : fallbackPlaceholderWidth;
 
       if (!currentLine) {
         currentLine = {