@remotion/web-renderer 4.0.406 → 4.0.407

package/dist/drawing/text/draw-text.d.ts

@@ -1,6 +1,7 @@
 import type { DrawFn } from '../drawn-fn';
-export declare const drawText: ({ span, logLevel, onlyBackgroundClipText, }: {
+export declare const drawText: ({ span, logLevel, onlyBackgroundClipText, parentRect, }: {
     span: HTMLSpanElement;
     logLevel: "error" | "info" | "trace" | "verbose" | "warn";
+    parentRect: DOMRect;
     onlyBackgroundClipText: boolean;
 }) => DrawFn;

package/dist/drawing/text/find-line-breaks.text.d.ts

@@ -1,5 +1,6 @@
-export declare function findLineBreaks(span: HTMLSpanElement, rtl: boolean): Array<{
+type Token = {
     text: string;
-    height: number;
-    offsetHorizontal: number;
-}>;
+    rect: DOMRect;
+};
+export declare const findWords: (span: HTMLSpanElement) => Token[];
+export {};

package/dist/drawing/text/get-collapsed-text.d.ts

@@ -1 +1,8 @@
-export declare const getCollapsedText: (span: HTMLSpanElement) => string;
+export declare const getCollapsedText: ({ span, previousText, wordsToAdd, canCollapseStart, }: {
+    wordsToAdd: string;
+    span: HTMLSpanElement;
+    previousText: string;
+    canCollapseStart: boolean;
+}) => {
+    collapsedText: string;
+};

package/dist/esm/index.mjs

@@ -3244,151 +3244,42 @@ var applyTextTransform = (text, transform) => {
   return text;
 };
 
-// src/drawing/text/get-collapsed-text.ts
-var getCollapsedText = (span) => {
-  const textNode = span.firstChild;
-  if (!textNode || textNode.nodeType !== Node.TEXT_NODE) {
-    throw new Error("Span must contain a single text node");
-  }
-  const originalText = textNode.textContent || "";
-  let collapsedText = originalText;
-  const measureWidth = (text) => {
-    textNode.textContent = text;
-    return span.getBoundingClientRect().width;
-  };
-  const originalWidth = measureWidth(originalText);
-  if (/^\s/.test(collapsedText)) {
-    const trimmedLeading = collapsedText.replace(/^\s+/, "");
-    const newWidth = measureWidth(trimmedLeading);
-    if (newWidth === originalWidth) {
-      collapsedText = trimmedLeading;
-    }
-  }
-  if (/\s$/.test(collapsedText)) {
-    const currentWidth = measureWidth(collapsedText);
-    const trimmedTrailing = collapsedText.replace(/\s+$/, "");
-    const newWidth = measureWidth(trimmedTrailing);
-    if (newWidth === currentWidth) {
-      collapsedText = trimmedTrailing;
-    }
-  }
-  if (/\s\s/.test(collapsedText)) {
-    const currentWidth = measureWidth(collapsedText);
-    const collapsedInternal = collapsedText.replace(/\s\s+/g, " ");
-    const newWidth = measureWidth(collapsedInternal);
-    if (newWidth === currentWidth) {
-      collapsedText = collapsedInternal;
-    }
-  }
-  textNode.textContent = originalText;
-  return collapsedText;
-};
-
 // src/drawing/text/find-line-breaks.text.ts
-var cannotStartLine = (segment) => {
-  if (segment.length === 0)
-    return false;
-  const firstChar = segment[0];
-  const forbiddenLineStarts = [
-    ".",
-    ",",
-    ";",
-    ":",
-    "!",
-    "?",
-    ")",
-    "]",
-    "}",
-    '"',
-    "'",
-    '"',
-    `'`,
-    "»",
-    "…",
-    "‥",
-    "·",
-    "%",
-    "‰"
-  ];
-  return forbiddenLineStarts.includes(firstChar);
-};
-function findLineBreaks(span, rtl) {
-  const textNode = span.childNodes[0];
-  const originalText = textNode.textContent;
-  const originalRect = span.getBoundingClientRect();
-  const computedStyle = getComputedStyle(span);
+var findWords = (span) => {
+  const originalText = span.textContent;
   const segmenter = new Intl.Segmenter("en", { granularity: "word" });
-  const segments = segmenter.segment(originalText);
+  const segments = segmenter.segment(span.textContent);
   const words = Array.from(segments).map((s) => s.segment);
-  const lines = [];
-  let currentLine = "";
-  let testText = "";
-  let previousRect = originalRect;
-  textNode.textContent = "";
-  for (let i = 0;i < words.length; i += 1) {
+  const tokens = [];
+  for (let i = 0;i < words.length; i++) {
+    const wordsBefore = words.slice(0, i);
+    const wordsAfter = words.slice(i + 1);
     const word = words[i];
-    testText += word;
-    let wordsToAdd = word;
-    while (typeof words[i + 1] !== "undefined" && words[i + 1].trim() === "") {
-      testText += words[i + 1];
-      wordsToAdd += words[i + 1];
-      i++;
-    }
-    previousRect = span.getBoundingClientRect();
-    textNode.textContent = testText;
-    const collapsedText = getCollapsedText(span);
-    textNode.textContent = collapsedText;
-    const rect = span.getBoundingClientRect();
-    const currentHeight = rect.height;
-    if (previousRect && previousRect.height !== 0 && Math.abs(currentHeight - previousRect.height) > 2) {
-      const offsetHorizontal = rtl ? previousRect.right - originalRect.right : previousRect.left - originalRect.left;
-      const shouldCollapse = !computedStyle.whiteSpaceCollapse.includes("preserve");
-      let textForPreviousLine = currentLine;
-      let textForNewLine = wordsToAdd;
-      if (cannotStartLine(word)) {
-        const currentLineSegments = Array.from(segmenter.segment(currentLine)).map((s) => s.segment);
-        let lastWordIndex = currentLineSegments.length - 1;
-        while (lastWordIndex >= 0 && currentLineSegments[lastWordIndex].trim() === "") {
-          lastWordIndex--;
-        }
-        if (lastWordIndex >= 0) {
-          textForPreviousLine = currentLineSegments.slice(0, lastWordIndex).join("");
-          textForNewLine = currentLineSegments.slice(lastWordIndex).join("") + wordsToAdd;
-        }
-      }
-      lines.push({
-        text: shouldCollapse ? textForPreviousLine.trim() : textForPreviousLine,
-        height: currentHeight - previousRect.height,
-        offsetHorizontal
-      });
-      currentLine = textForNewLine;
-    } else {
-      currentLine += wordsToAdd;
-    }
-  }
-  if (currentLine) {
-    textNode.textContent = testText;
-    const rects = span.getClientRects();
-    const rect = span.getBoundingClientRect();
-    const lastRect = rects[rects.length - 1];
-    const offsetHorizontal = rtl ? lastRect.right - originalRect.right : lastRect.left - originalRect.left;
-    lines.push({
-      text: currentLine,
-      height: rect.height - lines.reduce((acc, curr) => acc + curr.height, 0),
-      offsetHorizontal
-    });
+    const wordsBeforeText = wordsBefore.join("");
+    const wordsAfterText = wordsAfter.join("");
+    const beforeNode = document.createTextNode(wordsBeforeText);
+    const afterNode = document.createTextNode(wordsAfterText);
+    const interstitialNode = document.createElement("span");
+    interstitialNode.textContent = word;
+    span.textContent = "";
+    span.appendChild(beforeNode);
+    span.appendChild(interstitialNode);
+    span.appendChild(afterNode);
+    const rect = interstitialNode.getBoundingClientRect();
+    span.textContent = originalText;
+    tokens.push({ text: word, rect });
   }
-  textNode.textContent = originalText;
-  return lines;
-}
+  return tokens;
+};
 
 // src/drawing/text/draw-text.ts
 var drawText = ({
   span,
   logLevel,
-  onlyBackgroundClipText
+  onlyBackgroundClipText,
+  parentRect
 }) => {
-  const drawFn = ({ dimensions: rect, computedStyle, contextToDraw }) => {
+  const drawFn = ({ computedStyle, contextToDraw }) => {
     const {
       fontFamily,
       fontSize,
@@ -3416,20 +3307,16 @@ var drawText = ({
     contextToDraw.textAlign = isRTL ? "right" : "left";
     contextToDraw.textBaseline = "alphabetic";
     const originalText = span.textContent;
-    const collapsedText = getCollapsedText(span);
-    const transformedText = applyTextTransform(collapsedText, textTransform);
+    const transformedText = applyTextTransform(originalText, textTransform);
     span.textContent = transformedText;
-    const xPosition = isRTL ? rect.right : rect.left;
-    const lines = findLineBreaks(span, isRTL);
-    let offsetTop = 0;
-    const measurements = contextToDraw.measureText(lines[0].text);
-    const { fontBoundingBoxDescent, fontBoundingBoxAscent } = measurements;
-    const fontHeight = fontBoundingBoxAscent + fontBoundingBoxDescent;
-    for (const line of lines) {
-      const leading = line.height - fontHeight;
+    const tokens = findWords(span);
+    for (const token of tokens) {
+      const measurements = contextToDraw.measureText(originalText);
+      const { fontBoundingBoxDescent, fontBoundingBoxAscent } = measurements;
+      const fontHeight = fontBoundingBoxAscent + fontBoundingBoxDescent;
+      const leading = token.rect.height - fontHeight;
       const halfLeading = leading / 2;
-      contextToDraw.fillText(line.text, xPosition + line.offsetHorizontal, rect.top + halfLeading + fontBoundingBoxAscent + offsetTop);
-      offsetTop += line.height;
+      contextToDraw.fillText(token.text, (isRTL ? token.rect.right : token.rect.left) - parentRect.x, token.rect.top + fontBoundingBoxAscent + halfLeading - parentRect.y);
     }
     span.textContent = originalText;
     contextToDraw.restore();
@@ -3458,7 +3345,7 @@ var handleTextNode = async ({
   const value = await processNode({
     context,
     element: span,
-    draw: drawText({ span, logLevel, onlyBackgroundClipText }),
+    draw: drawText({ span, logLevel, onlyBackgroundClipText, parentRect }),
     logLevel,
     parentRect,
     internalState,

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/web-renderer"
 	},
 	"name": "@remotion/web-renderer",
-	"version": "4.0.406",
+	"version": "4.0.407",
 	"main": "dist/index.js",
 	"type": "module",
 	"sideEffects": false,
@@ -19,14 +19,14 @@
 	"author": "Remotion <jonny@remotion.dev>",
 	"license": "UNLICENSED",
 	"dependencies": {
-		"@remotion/licensing": "4.0.406",
-		"remotion": "4.0.406",
+		"@remotion/licensing": "4.0.407",
+		"remotion": "4.0.407",
 		"mediabunny": "1.27.3"
 	},
 	"devDependencies": {
-		"@remotion/eslint-config-internal": "4.0.406",
-		"@remotion/player": "4.0.406",
-		"@remotion/media": "4.0.406",
+		"@remotion/eslint-config-internal": "4.0.407",
+		"@remotion/player": "4.0.407",
+		"@remotion/media": "4.0.407",
 		"@typescript/native-preview": "7.0.0-dev.20260105.1",
 		"@vitejs/plugin-react": "4.1.0",
 		"@vitest/browser-playwright": "4.0.9",