fix: use line-height-based bounds for text elements

apps/web/content/changelog/0.3.0.md

@@ -81,5 +81,7 @@ changes:
     text: "You can now import transcript files to generate captions instead of running auto-transcription."
   - type: new
     text: "Graph editor for keyframe curves. Shape the easing between keyframes by dragging bezier handles."
+  - type: fixed
+    text: "Text element handles no longer shift position as you type."
 
 ---

apps/web/src/lib/text/layout.ts

@@ -54,32 +54,19 @@ export function getMetricDescent({
 export function measureTextBlock({
 	lineMetrics,
 	lineHeightPx,
-	fallbackFontSize,
 }: {
 	lineMetrics: TextMetrics[];
 	lineHeightPx: number;
-	fallbackFontSize: number;
 }): TextBlockMeasurement {
-	let top = Number.POSITIVE_INFINITY;
-	let bottom = Number.NEGATIVE_INFINITY;
 	let maxWidth = 0;
 
-	for (let index = 0; index < lineMetrics.length; index++) {
+	for (const metrics of lineMetrics) {
-		const metrics = lineMetrics[index];
-		const lineY = index * lineHeightPx;
-		top = Math.min(
-			top,
-			lineY - getMetricAscent({ metrics, fallbackFontSize }),
-		);
-		bottom = Math.max(
-			bottom,
-			lineY + getMetricDescent({ metrics, fallbackFontSize }),
-		);
 		maxWidth = Math.max(maxWidth, metrics.width);
 	}
 
-	const height = bottom - top;
+	const lineCount = lineMetrics.length;
-	const visualCenterOffset = (top + bottom) / 2;
+	const height = lineCount * lineHeightPx;
+	const visualCenterOffset = ((lineCount - 1) * lineHeightPx) / 2;
 
 	return { visualCenterOffset, height, maxWidth };
 }

apps/web/src/lib/text/measure-element.ts

@@ -72,7 +72,6 @@ export function measureTextElement({
 	const block = measureTextBlock({
 		lineMetrics,
 		lineHeightPx,
-		fallbackFontSize: scaledFontSize,
 	});
 
 	const bg = element.background;