chore: normalize line endings

1 files changed, 212 insertions, 212 deletions

diff --git a/apps/web/src/components/editor/panels/preview/text-edit-overlay.tsx b/apps/web/src/components/editor/panels/preview/text-edit-overlay.tsx
index d3c61a24..aff77f0f 100644
--- a/apps/web/src/components/editor/panels/preview/text-edit-overlay.tsx
+++ b/apps/web/src/components/editor/panels/preview/text-edit-overlay.tsx
@@ -1,212 +1,212 @@
-"use client";
-
-import { useCallback, useEffect, useRef } from "react";
-import { usePreviewViewport } from "@/components/editor/panels/preview/preview-viewport";
-import { useEditor } from "@/hooks/use-editor";
-import type { TextElement } from "@/lib/timeline";
-import {
-	FONT_SIZE_SCALE_REFERENCE,
-} from "@/constants/text-constants";
-import { DEFAULTS } from "@/lib/timeline/defaults";
-import {
-	getMetricAscent,
-	getMetricDescent,
-	setCanvasLetterSpacing,
-} from "@/lib/text/layout";
-
-let cachedCanvas: HTMLCanvasElement | null = null;
-
-function getMeasurementContext(): CanvasRenderingContext2D | null {
-	if (!cachedCanvas) cachedCanvas = document.createElement("canvas");
-	return cachedCanvas.getContext("2d");
-}
-
-/**
- * Uses fontBoundingBox metrics (which CSS uses for line box layout) rather than
- * actualBoundingBox to model where the browser places the baseline within the
- * line box, then measures actual glyph bounds to find the visual center.
- */
-function measureCSSVisualCenterOffset({
-	lines,
-	fontString,
-	letterSpacingPx,
-	lineHeightPx,
-	displayFontSize,
-}: {
-	lines: string[];
-	fontString: string;
-	letterSpacingPx: number;
-	lineHeightPx: number;
-	displayFontSize: number;
-}): number {
-	const ctx = getMeasurementContext();
-	if (!ctx) return 0;
-
-	ctx.font = fontString;
-	ctx.textBaseline = "alphabetic";
-	setCanvasLetterSpacing({ ctx, letterSpacingPx });
-
-	const probe = ctx.measureText("M");
-	const fontAscent = probe.fontBoundingBoxAscent ?? displayFontSize * 0.8;
-	const fontDescent = probe.fontBoundingBoxDescent ?? displayFontSize * 0.2;
-	const halfLeading = (lineHeightPx - fontAscent - fontDescent) / 2;
-
-	let visualTop = Number.POSITIVE_INFINITY;
-	let visualBottom = Number.NEGATIVE_INFINITY;
-
-	for (let i = 0; i < lines.length; i++) {
-		const metrics = ctx.measureText(lines[i] || " ");
-		const baseline = i * lineHeightPx + halfLeading + fontAscent;
-		visualTop = Math.min(
-			visualTop,
-			baseline - getMetricAscent({ metrics, fallbackFontSize: displayFontSize }),
-		);
-		visualBottom = Math.max(
-			visualBottom,
-			baseline + getMetricDescent({ metrics, fallbackFontSize: displayFontSize }),
-		);
-	}
-
-	const cssBlockHeight = lines.length * lineHeightPx;
-	return (visualTop + visualBottom) / 2 - cssBlockHeight / 2;
-}
-
-export function TextEditOverlay({
-	trackId,
-	elementId,
-	element,
-	onCommit,
-}: {
-	trackId: string;
-	elementId: string;
-	element: TextElement;
-	onCommit: () => void;
-}) {
-	const editor = useEditor();
-	const viewport = usePreviewViewport();
-	const divRef = useRef<HTMLDivElement>(null);
-
-	useEffect(() => {
-		const div = divRef.current;
-		if (!div) return;
-		div.focus();
-		const range = document.createRange();
-		range.selectNodeContents(div);
-		const selection = window.getSelection();
-		selection?.removeAllRanges();
-		selection?.addRange(range);
-	}, []);
-
-	const handleInput = useCallback(() => {
-		const div = divRef.current;
-		if (!div) return;
-		const text = div.innerText;
-		editor.timeline.previewElements({
-			updates: [{ trackId, elementId, updates: { content: text } }],
-		});
-	}, [editor.timeline, trackId, elementId]);
-
-	const handleKeyDown = useCallback(
-		({ event }: { event: React.KeyboardEvent }) => {
-			const { key } = event;
-			if (key === "Escape") {
-				event.preventDefault();
-				onCommit();
-				return;
-			}
-		},
-		[onCommit],
-	);
-
-	const canvasSize = editor.project.getActive().settings.canvasSize;
-
-	if (!canvasSize) return null;
-
-	const { x: posX, y: posY } = viewport.positionToOverlay({
-		positionX: element.transform.position.x,
-		positionY: element.transform.position.y,
-	});
-
-	const { x: displayScaleX } = viewport.getDisplayScale();
-
-	const displayFontSize =
-		element.fontSize *
-		(canvasSize.height / FONT_SIZE_SCALE_REFERENCE) *
-		displayScaleX;
-
-	const lineHeight = element.lineHeight ?? DEFAULTS.text.lineHeight;
-	const fontWeight = element.fontWeight === "bold" ? "bold" : "normal";
-	const fontStyle = element.fontStyle === "italic" ? "italic" : "normal";
-	const displayLetterSpacing = (element.letterSpacing ?? 0) * displayScaleX;
-	const lineHeightPx = displayFontSize * lineHeight;
-	const lines = (element.content || "").split("\n");
-	const fontString = `${fontStyle} ${fontWeight} ${displayFontSize}px "${element.fontFamily}", sans-serif`;
-
-	const cssVisualCenterOffset = measureCSSVisualCenterOffset({
-		lines,
-		fontString,
-		letterSpacingPx: displayLetterSpacing,
-		lineHeightPx,
-		displayFontSize,
-	});
-
-	const bg = element.background;
-	const shouldShowBackground =
-		bg.enabled && bg.color && bg.color !== "transparent";
-	const fontSizeRatio = element.fontSize / DEFAULTS.text.element.fontSize;
-	const displayPaddingX = shouldShowBackground
-		? (bg.paddingX ?? DEFAULTS.text.background.paddingX) *
-			fontSizeRatio *
-			displayScaleX
-		: 0;
-	const displayPaddingY = shouldShowBackground
-		? (bg.paddingY ?? DEFAULTS.text.background.paddingY) *
-			fontSizeRatio *
-			displayScaleX
-		: 0;
-
-	return (
-		<div
-			className="absolute"
-			style={{
-				left: posX,
-				top: posY - cssVisualCenterOffset,
-				transform: `translate(-50%, -50%) scale(${element.transform.scaleX}, ${element.transform.scaleY}) rotate(${element.transform.rotate}deg)`,
-				transformOrigin: "center center",
-			}}
-		>
-			{/* biome-ignore lint/a11y/useSemanticElements: contenteditable required for multiline, IME, paste */}
-			<div
-				ref={divRef}
-				contentEditable
-				suppressContentEditableWarning
-				tabIndex={0}
-				role="textbox"
-				aria-label="Edit text"
-				className="cursor-text select-text outline-none whitespace-pre"
-				style={{
-					fontSize: displayFontSize,
-					fontFamily: element.fontFamily,
-					fontWeight,
-					fontStyle,
-					textAlign: element.textAlign,
-					letterSpacing: `${displayLetterSpacing}px`,
-					lineHeight,
-					color: element.color,
-					backgroundColor: shouldShowBackground ? bg.color : "transparent",
-					minHeight: lineHeightPx,
-					textDecoration: element.textDecoration ?? "none",
-					padding: shouldShowBackground
-						? `${displayPaddingY}px ${displayPaddingX}px`
-						: 0,
-					minWidth: 1,
-				}}
-				onInput={handleInput}
-				onBlur={onCommit}
-				onKeyDown={(event) => handleKeyDown({ event })}
-			>
-				{element.content || ""}
-			</div>
-		</div>
-	);
-}
+"use client";

+

+import { useCallback, useEffect, useRef } from "react";

+import { usePreviewViewport } from "@/components/editor/panels/preview/preview-viewport";

+import { useEditor } from "@/hooks/use-editor";

+import type { TextElement } from "@/lib/timeline";

+import {

+	FONT_SIZE_SCALE_REFERENCE,

+} from "@/constants/text-constants";

+import { DEFAULTS } from "@/lib/timeline/defaults";

+import {

+	getMetricAscent,

+	getMetricDescent,

+	setCanvasLetterSpacing,

+} from "@/lib/text/layout";

+

+let cachedCanvas: HTMLCanvasElement | null = null;

+

+function getMeasurementContext(): CanvasRenderingContext2D | null {

+	if (!cachedCanvas) cachedCanvas = document.createElement("canvas");

+	return cachedCanvas.getContext("2d");

+}

+

+/**

+ * Uses fontBoundingBox metrics (which CSS uses for line box layout) rather than

+ * actualBoundingBox to model where the browser places the baseline within the

+ * line box, then measures actual glyph bounds to find the visual center.

+ */

+function measureCSSVisualCenterOffset({

+	lines,

+	fontString,

+	letterSpacingPx,

+	lineHeightPx,

+	displayFontSize,

+}: {

+	lines: string[];

+	fontString: string;

+	letterSpacingPx: number;

+	lineHeightPx: number;

+	displayFontSize: number;

+}): number {

+	const ctx = getMeasurementContext();

+	if (!ctx) return 0;

+

+	ctx.font = fontString;

+	ctx.textBaseline = "alphabetic";

+	setCanvasLetterSpacing({ ctx, letterSpacingPx });

+

+	const probe = ctx.measureText("M");

+	const fontAscent = probe.fontBoundingBoxAscent ?? displayFontSize * 0.8;

+	const fontDescent = probe.fontBoundingBoxDescent ?? displayFontSize * 0.2;

+	const halfLeading = (lineHeightPx - fontAscent - fontDescent) / 2;

+

+	let visualTop = Number.POSITIVE_INFINITY;

+	let visualBottom = Number.NEGATIVE_INFINITY;

+

+	for (let i = 0; i < lines.length; i++) {

+		const metrics = ctx.measureText(lines[i] || " ");

+		const baseline = i * lineHeightPx + halfLeading + fontAscent;

+		visualTop = Math.min(

+			visualTop,

+			baseline - getMetricAscent({ metrics, fallbackFontSize: displayFontSize }),

+		);

+		visualBottom = Math.max(

+			visualBottom,

+			baseline + getMetricDescent({ metrics, fallbackFontSize: displayFontSize }),

+		);

+	}

+

+	const cssBlockHeight = lines.length * lineHeightPx;

+	return (visualTop + visualBottom) / 2 - cssBlockHeight / 2;

+}

+

+export function TextEditOverlay({

+	trackId,

+	elementId,

+	element,

+	onCommit,

+}: {

+	trackId: string;

+	elementId: string;

+	element: TextElement;

+	onCommit: () => void;

+}) {

+	const editor = useEditor();

+	const viewport = usePreviewViewport();

+	const divRef = useRef<HTMLDivElement>(null);

+

+	useEffect(() => {

+		const div = divRef.current;

+		if (!div) return;

+		div.focus();

+		const range = document.createRange();

+		range.selectNodeContents(div);

+		const selection = window.getSelection();

+		selection?.removeAllRanges();

+		selection?.addRange(range);

+	}, []);

+

+	const handleInput = useCallback(() => {

+		const div = divRef.current;

+		if (!div) return;

+		const text = div.innerText;

+		editor.timeline.previewElements({

+			updates: [{ trackId, elementId, updates: { content: text } }],

+		});

+	}, [editor.timeline, trackId, elementId]);

+

+	const handleKeyDown = useCallback(

+		({ event }: { event: React.KeyboardEvent }) => {

+			const { key } = event;

+			if (key === "Escape") {

+				event.preventDefault();

+				onCommit();

+				return;

+			}

+		},

+		[onCommit],

+	);

+

+	const canvasSize = editor.project.getActive().settings.canvasSize;

+

+	if (!canvasSize) return null;

+

+	const { x: posX, y: posY } = viewport.positionToOverlay({

+		positionX: element.transform.position.x,

+		positionY: element.transform.position.y,

+	});

+

+	const { x: displayScaleX } = viewport.getDisplayScale();

+

+	const displayFontSize =

+		element.fontSize *

+		(canvasSize.height / FONT_SIZE_SCALE_REFERENCE) *

+		displayScaleX;

+

+	const lineHeight = element.lineHeight ?? DEFAULTS.text.lineHeight;

+	const fontWeight = element.fontWeight === "bold" ? "bold" : "normal";

+	const fontStyle = element.fontStyle === "italic" ? "italic" : "normal";

+	const displayLetterSpacing = (element.letterSpacing ?? 0) * displayScaleX;

+	const lineHeightPx = displayFontSize * lineHeight;

+	const lines = (element.content || "").split("\n");

+	const fontString = `${fontStyle} ${fontWeight} ${displayFontSize}px "${element.fontFamily}", sans-serif`;

+

+	const cssVisualCenterOffset = measureCSSVisualCenterOffset({

+		lines,

+		fontString,

+		letterSpacingPx: displayLetterSpacing,

+		lineHeightPx,

+		displayFontSize,

+	});

+

+	const bg = element.background;

+	const shouldShowBackground =

+		bg.enabled && bg.color && bg.color !== "transparent";

+	const fontSizeRatio = element.fontSize / DEFAULTS.text.element.fontSize;

+	const displayPaddingX = shouldShowBackground

+		? (bg.paddingX ?? DEFAULTS.text.background.paddingX) *

+			fontSizeRatio *

+			displayScaleX

+		: 0;

+	const displayPaddingY = shouldShowBackground

+		? (bg.paddingY ?? DEFAULTS.text.background.paddingY) *

+			fontSizeRatio *

+			displayScaleX

+		: 0;

+

+	return (

+		<div

+			className="absolute"

+			style={{

+				left: posX,

+				top: posY - cssVisualCenterOffset,

+				transform: `translate(-50%, -50%) scale(${element.transform.scaleX}, ${element.transform.scaleY}) rotate(${element.transform.rotate}deg)`,

+				transformOrigin: "center center",

+			}}

+		>

+			{/* biome-ignore lint/a11y/useSemanticElements: contenteditable required for multiline, IME, paste */}

+			<div

+				ref={divRef}

+				contentEditable

+				suppressContentEditableWarning

+				tabIndex={0}

+				role="textbox"

+				aria-label="Edit text"

+				className="cursor-text select-text outline-none whitespace-pre"

+				style={{

+					fontSize: displayFontSize,

+					fontFamily: element.fontFamily,

+					fontWeight,

+					fontStyle,

+					textAlign: element.textAlign,

+					letterSpacing: `${displayLetterSpacing}px`,

+					lineHeight,

+					color: element.color,

+					backgroundColor: shouldShowBackground ? bg.color : "transparent",

+					minHeight: lineHeightPx,

+					textDecoration: element.textDecoration ?? "none",

+					padding: shouldShowBackground

+						? `${displayPaddingY}px ${displayPaddingX}px`

+						: 0,

+					minWidth: 1,

+				}}

+				onInput={handleInput}

+				onBlur={onCommit}

+				onKeyDown={(event) => handleKeyDown({ event })}

+			>

+				{element.content || ""}

+			</div>

+		</div>

+	);

+}