fix: render manual line breaks correctly (#2807)

VladaHarbour · web-flow · commit b3c7d000f791 · 2026-04-28T15:36:22.000-07:00
* fix: render manual line breaks correctly

* fix: improve line break preserving strategy

* fix: address comments and add tests
diff --git a/packages/layout-engine/layout-bridge/src/remeasure.ts b/packages/layout-engine/layout-bridge/src/remeasure.ts
@@ -994,12 +994,12 @@ const applyTabLayoutToLines = (
  * @returns Line height in pixels (fontSize * 1.2 of the largest font in the range).
  *   For example: 16px font returns 19.2px line height, 24px font returns 28.8px.
  */
-function lineHeightForRuns(runs: Run[], fromRun: number, toRun: number): number {
+function lineHeightForRuns(runs: Run[], fromRun: number, toRun: number, fallbackFontSize: number = 16): number {
   let maxSize = 0;
   for (let i = fromRun; i <= toRun; i += 1) {
     const run = runs[i];
     const textRun = run && isTextRun(run) ? run : null;
-    const size = textRun?.fontSize ?? 16;
+    const size = textRun?.fontSize ?? 0;
     if (size > maxSize) maxSize = size;
   }
   // Calculate line height as 120% of the maximum font size (maxSize * 1.2).
@@ -1014,7 +1014,8 @@ function lineHeightForRuns(runs: Run[], fromRun: number, toRun: number): number
   // Note: This is a simplified calculation. Full typography measurement
   // (in measuring/dom) uses actual font metrics (ascent, descent, lineGap)
   // for more accurate line heights.
-  return maxSize * 1.2;
+  const resolvedSize = maxSize > 0 ? maxSize : fallbackFontSize;
+  return resolvedSize * 1.2;
 }
 
 /**
@@ -1180,6 +1181,10 @@ export function remeasureParagraph(
 
   let currentRun = 0;
   let currentChar = 0;
+  // Match measuring/dom behavior: explicit line breaks without text should use
+  // the most recent text font size (or first text run size for leading breaks).
+  const firstTextRunWithSize = runs.find((run): run is TextRun => isTextRun(run) && typeof run.fontSize === 'number');
+  let lastMeasuredFontSize = firstTextRunWithSize?.fontSize ?? 16;
 
   while (currentRun < runs.length) {
     const isFirstLine = lines.length === 0;
@@ -1199,11 +1204,23 @@ export function remeasureParagraph(
     let endChar = currentChar;
     let tabStopCursor = 0;
     let didBreakInThisLine = false;
+    let explicitLineBreakRun = -1;
     let resumeRun = -1;
     let resumeChar = 0;
+    let lineMaxTextFontSize = 0;
 
     for (let r = currentRun; r < runs.length; r += 1) {
       const run = runs[r];
+      if (isLineBreakRun(run)) {
+        explicitLineBreakRun = r;
+        if (startRun === r && startChar === 0 && width === 0) {
+          // Preserve leading/manual explicit break as an empty line.
+          endRun = r;
+          endChar = 0;
+        }
+        didBreakInThisLine = true;
+        break;
+      }
       if (run.kind === 'tab') {
         const absCurrentX = width + effectiveIndent;
         const { target, nextIndex, stop } = getNextTabStopPx(absCurrentX, tabStops, tabStopCursor);
@@ -1257,6 +1274,9 @@ export function remeasureParagraph(
       if (r === resumeRun) {
         resumeRun = -1;
       }
+      if (text.length > 0 && isTextRun(run)) {
+        lineMaxTextFontSize = Math.max(lineMaxTextFontSize, run.fontSize ?? 16);
+      }
       for (let c = start; c < text.length; c += 1) {
         const ch = text[c];
         if (ch === '\t') {
@@ -1345,7 +1365,7 @@ export function remeasureParagraph(
     }
 
     // If we didn't consume any chars (e.g., very long single char), force one char
-    if (startRun === endRun && startChar === endChar) {
+    if (explicitLineBreakRun < 0 && startRun === endRun && startChar === endChar) {
       endRun = startRun;
       endChar = startChar + 1;
     }
@@ -1358,18 +1378,43 @@ export function remeasureParagraph(
       width,
       ascent: 0,
       descent: 0,
-      lineHeight: lineHeightForRuns(runs, startRun, endRun),
+      lineHeight: lineHeightForRuns(runs, startRun, endRun, lastMeasuredFontSize),
       maxWidth: effectiveMaxWidth,
     };
     lines.push(line);
+    if (lineMaxTextFontSize > 0) {
+      lastMeasuredFontSize = lineMaxTextFontSize;
+    }
 
     // Advance to next line start
-    currentRun = endRun;
-    currentChar = endChar;
+    if (explicitLineBreakRun >= 0) {
+      // Preserve trailing/manual break boundaries:
+      // - If this line started on the break, we've already emitted its empty-line boundary,
+      //   so advance past it.
+      // - If this line ended before the break (text + break), keep the break for the next
+      //   iteration only when the remaining tail is all breaks (trailing break chain).
+      //   This avoids creating an extra empty line for [text, break, break, text].
+      const emittedBreakBoundary =
+        startRun === explicitLineBreakRun && startChar === 0 && endRun === explicitLineBreakRun && endChar === 0;
+      if (emittedBreakBoundary) {
+        currentRun = explicitLineBreakRun + 1;
+      } else {
+        let nextNonBreakRun = explicitLineBreakRun + 1;
+        while (nextNonBreakRun < runs.length && isLineBreakRun(runs[nextNonBreakRun])) {
+          nextNonBreakRun += 1;
+        }
+        const preserveBoundaryForNextIteration = nextNonBreakRun >= runs.length;
+        currentRun = preserveBoundaryForNextIteration ? explicitLineBreakRun : explicitLineBreakRun + 1;
+      }
+      currentChar = 0;
+    } else {
+      currentRun = endRun;
+      currentChar = endChar;
+    }
     if (currentRun >= runs.length) {
       break;
     }
-    if (currentChar >= runText(runs[currentRun]).length) {
+    if (!isLineBreakRun(runs[currentRun]) && currentChar >= runText(runs[currentRun]).length) {
       currentRun += 1;
       currentChar = 0;
     }
diff --git a/packages/layout-engine/layout-bridge/test/remeasure.test.ts b/packages/layout-engine/layout-bridge/test/remeasure.test.ts
@@ -892,7 +892,111 @@ describe('remeasureParagraph', () => {
       const block = createBlock([textRun('Hello'), { kind: 'lineBreak' } as Run, textRun('World')]);
       const measure = remeasureParagraph(block, 200);
 
-      expect(measure.lines.length).toBeGreaterThanOrEqual(1);
+      expect(measure.lines).toHaveLength(2);
+      expect(measure.lines[0].fromRun).toBe(0);
+      expect(measure.lines[0].toRun).toBe(0);
+      expect(measure.lines[1].fromRun).toBe(2);
+      expect(measure.lines[1].toRun).toBe(2);
+    });
+
+    it('creates an empty line for leading lineBreak at start of paragraph', () => {
+      const block = createBlock([{ kind: 'lineBreak' } as Run, textRun('Text')]);
+      const measure = remeasureParagraph(block, 200);
+
+      expect(measure.lines).toHaveLength(2);
+      expect(measure.lines[0].fromRun).toBe(0);
+      expect(measure.lines[0].toRun).toBe(0);
+      expect(measure.lines[0].toChar).toBe(0);
+      expect(measure.lines[1].fromRun).toBe(1);
+      expect(measure.lines[1].toRun).toBe(1);
+    });
+
+    it('preserves multiple explicit lineBreak boundaries', () => {
+      const block = createBlock([
+        textRun('One'),
+        { kind: 'lineBreak' } as Run,
+        textRun('Two'),
+        { kind: 'lineBreak' } as Run,
+        textRun('Three'),
+      ]);
+      const measure = remeasureParagraph(block, 200);
+
+      expect(measure.lines).toHaveLength(3);
+      expect(measure.lines[0].fromRun).toBe(0);
+      expect(measure.lines[0].toRun).toBe(0);
+      expect(measure.lines[1].fromRun).toBe(2);
+      expect(measure.lines[1].toRun).toBe(2);
+      expect(measure.lines[2].fromRun).toBe(4);
+      expect(measure.lines[2].toRun).toBe(4);
+    });
+
+    it('preserves trailing explicit lineBreak as final empty line', () => {
+      const block = createBlock([textRun('Hello'), { kind: 'lineBreak' } as Run]);
+      const measure = remeasureParagraph(block, 200);
+
+      expect(measure.lines).toHaveLength(2);
+      expect(measure.lines[0].fromRun).toBe(0);
+      expect(measure.lines[0].toRun).toBe(0);
+      // Final empty line should be anchored to trailing break run.
+      expect(measure.lines[1].fromRun).toBe(1);
+      expect(measure.lines[1].toRun).toBe(1);
+      expect(measure.lines[1].toChar).toBe(0);
+    });
+
+    it('handles a single explicit lineBreak run as the only paragraph content', () => {
+      const block = createBlock([{ kind: 'lineBreak' } as Run]);
+      const measure = remeasureParagraph(block, 200);
+
+      expect(measure.lines).toHaveLength(1);
+      expect(measure.lines[0].fromRun).toBe(0);
+      expect(measure.lines[0].toRun).toBe(0);
+      expect(measure.lines[0].fromChar).toBe(0);
+      expect(measure.lines[0].toChar).toBe(0);
+    });
+
+    it('uses previous text font size for trailing explicit lineBreak empty line height', () => {
+      const block = createBlock([textRun('Heading', { fontSize: 24 }), { kind: 'lineBreak' } as Run]);
+      const measure = remeasureParagraph(block, 200);
+
+      expect(measure.lines).toHaveLength(2);
+      expect(measure.lines[0].lineHeight).toBe(24 * 1.2);
+      expect(measure.lines[1].fromRun).toBe(1);
+      expect(measure.lines[1].toRun).toBe(1);
+      expect(measure.lines[1].lineHeight).toBe(24 * 1.2);
+    });
+
+    it('preserves multiple trailing explicit lineBreak runs as multiple empty lines', () => {
+      const block = createBlock([textRun('Hello'), { kind: 'lineBreak' } as Run, { kind: 'lineBreak' } as Run]);
+      const measure = remeasureParagraph(block, 200);
+
+      expect(measure.lines).toHaveLength(3);
+      expect(measure.lines[0].fromRun).toBe(0);
+      expect(measure.lines[0].toRun).toBe(0);
+      expect(measure.lines[1].fromRun).toBe(1);
+      expect(measure.lines[1].toRun).toBe(1);
+      expect(measure.lines[1].toChar).toBe(0);
+      expect(measure.lines[2].fromRun).toBe(2);
+      expect(measure.lines[2].toRun).toBe(2);
+      expect(measure.lines[2].toChar).toBe(0);
+    });
+
+    it('matches measureParagraphBlock for text + break + break + text', () => {
+      const block = createBlock([
+        textRun('A'),
+        { kind: 'lineBreak' } as Run,
+        { kind: 'lineBreak' } as Run,
+        textRun('B'),
+      ]);
+      const measure = remeasureParagraph(block, 200);
+
+      expect(measure.lines).toHaveLength(3);
+      expect(measure.lines[0].fromRun).toBe(0);
+      expect(measure.lines[0].toRun).toBe(0);
+      expect(measure.lines[1].fromRun).toBe(2);
+      expect(measure.lines[1].toRun).toBe(2);
+      expect(measure.lines[1].toChar).toBe(0);
+      expect(measure.lines[2].fromRun).toBe(3);
+      expect(measure.lines[2].toRun).toBe(3);
     });
 
     it('handles tabs followed immediately by line break', () => {
diff --git a/packages/layout-engine/measuring/dom/src/index.test.ts b/packages/layout-engine/measuring/dom/src/index.test.ts
@@ -542,6 +542,8 @@ describe('measureBlock', () => {
       expect(measure.lines).toHaveLength(2);
       expect(measure.lines[0].width).toBeGreaterThan(0);
       expect(measure.lines[1].width).toBeGreaterThan(0);
+      expect(measure.lines[1].fromRun).toBe(2);
+      expect(measure.lines[1].toRun).toBe(2);
     });
 
     it('creates an empty line for leading lineBreak at start of paragraph', async () => {
diff --git a/packages/layout-engine/measuring/dom/src/index.ts b/packages/layout-engine/measuring/dom/src/index.ts
@@ -1084,6 +1084,8 @@ async function measureParagraphBlock(block: ParagraphBlock, maxWidth: number): P
     leaders?: Line['leaders'];
     /** Count of breakable spaces already included on this line (for justify-aware fitting) */
     spaceCount: number;
+    /** Internal marker for an empty line seeded by an explicit line break. */
+    isLineBreakPlaceholder?: boolean;
   } | null = null;
 
   // Helper to calculate effective available width based on current line count.
@@ -1459,6 +1461,7 @@ async function measureParagraphBlock(block: ParagraphBlock, maxWidth: number): P
         maxWidth: nextLineMaxWidth,
         segments: [],
         spaceCount: 0,
+        isLineBreakPlaceholder: true,
       };
       tabStopCursor = 0;
       pendingTabAlignment = null;
@@ -1468,6 +1471,15 @@ async function measureParagraphBlock(block: ParagraphBlock, maxWidth: number): P
       continue;
     }
 
+    // When a text/tab/atomic run follows an explicit lineBreak, currentLine is a
+    // placeholder line seeded with the break run index. Re-anchor it so line ranges
+    // start at the first visible run on the new line.
+    if (currentLine?.isLineBreakPlaceholder) {
+      currentLine.fromRun = runIndex;
+      currentLine.toRun = runIndex;
+      currentLine.isLineBreakPlaceholder = false;
+    }
+
     // Handle tab runs specially
     if (isTabRun(run)) {
       // Clear any previous tab group when we encounter a new tab
