From e9acbe128f97fa367bea78c2cc15c279f081ba5b Mon Sep 17 00:00:00 2001
From: Diego Imbert <diego@windmill.dev>
Date: Thu, 17 Apr 2025 13:33:36 +0200
Subject: [PATCH] pixel perfect editor placeholder

---
 frontend/src/lib/components/Editor.svelte     |  7 +-
 .../components/FakeMonacoPlaceHolder.svelte   | 81 ++++++++++++-------
 .../lib/components/InputTransformForm.svelte  |  2 +-
 .../inputEditor/EvalV2InputEditor.svelte      |  4 +-
 .../inputEditor/StaticInputEditor.svelte      |  2 +-
 5 files changed, 58 insertions(+), 38 deletions(-)

diff --git a/frontend/src/lib/components/Editor.svelte b/frontend/src/lib/components/Editor.svelte
index db44ec928b..76c3e8071b 100644
--- a/frontend/src/lib/components/Editor.svelte
+++ b/frontend/src/lib/components/Editor.svelte
@@ -1417,12 +1417,7 @@
 <EditorTheme />
 {#if !editor}
 	<div class="inset-0 absolute overflow-clip">
-		<FakeMonacoPlaceHolder
-			marginLeft="51px"
-			{code}
-			fontSize={!small ? 14 : 12}
-			className="dark:bg-[#272D38] h-full leading-[20px]"
-		/>
+		<FakeMonacoPlaceHolder {code} />
 	</div>
 {/if}
 <div bind:this={divEl} class="{$$props.class} editor {disabled ? 'disabled' : ''}"></div>
diff --git a/frontend/src/lib/components/FakeMonacoPlaceHolder.svelte b/frontend/src/lib/components/FakeMonacoPlaceHolder.svelte
index 27dec1eb45..0daaa9701e 100644
--- a/frontend/src/lib/components/FakeMonacoPlaceHolder.svelte
+++ b/frontend/src/lib/components/FakeMonacoPlaceHolder.svelte
@@ -3,40 +3,65 @@
 <script lang="ts">
 	type Props = {
 		code?: string
-		fontSize: number
-		marginLeft?: string
-		className?: string
 	}
 
-	let { code, fontSize, marginLeft = '0', className = '' }: Props = $props()
+	let { code }: Props = $props()
+
+	let lines = $derived(code?.split('\n') ?? [])
+
+	let [clientWidth, clientHeight] = $state([0, 0])
 </script>
 
 <div
-	class={'relative w-full pr-14 py-0 z-9 mt-[-1px] mb-[1px] dark:bg-[#272D38] overflow-y-clip overflow-x-auto mycontainer ' +
-		className}
-	style="padding-left: {marginLeft};"
+	bind:clientWidth
+	bind:clientHeight
+	class="h-full w-full relative editor dark:bg-[#272D38]"
+	style="--vscode-editorCodeLens-lineHeight: 18px; --vscode-editorCodeLens-fontSize: 12px; --vscode-editorCodeLens-fontFeatureSettings: &quot;liga&quot; off, &quot;calt&quot; off; --code-editorInlayHintsFontFamily: Menlo, Monaco, 'Courier New', monospace;"
 >
 	<div
-		class="absolute inset-x-0 h-[22px] dark:bg-[#3A4252] mix-blend-lighten"
-		style="margin-left: {marginLeft};"
-	></div>
-	<code
-		class="text-nowrap whitespace-pre overflow-clip text-tertiary/50"
-		style="font-size: {fontSize}px;"
+		class="monaco-editor no-user-select mac standalone showUnused showDeprecated vs-dark"
+		role="code"
 	>
-		{code}
-		{#if code?.endsWith('\n')}
-			&nbsp;
-		{/if}
-	</code>
+		<div class="overflow-guard" style="width: {clientWidth}px; height: {clientHeight}px;">
+			<div
+				class="margin"
+				role="presentation"
+				aria-hidden="true"
+				style="position: absolute; transform: translate3d(0px, 0px, 0px); contain: strict; top: 0px; width: {clientWidth}px; height: {clientHeight}px;"
+			>
+				<div
+					class="margin-view-overlays"
+					role="presentation"
+					aria-hidden="true"
+					style="position: absolute; font-family: Menlo, Monaco, &quot;Courier New&quot;, monospace; font-weight: normal; font-size: 14px; font-feature-settings: &quot;liga&quot; 0, &quot;calt&quot; 0; font-variation-settings: normal; line-height: 21px; letter-spacing: 0px; width: 51px; height: 4893px;"
+				>
+					{#each lines as _, i}
+						<div style="top:{21 * i}px;height:21px;">
+							<div class="line-numbers" style="left:0px;width:25px;">{i + 1}</div>
+						</div>
+					{/each}
+				</div>
+			</div>
+			<div
+				class="monaco-scrollable-element editor-scrollable vs-dark mac"
+				style="position: absolute; overflow: hidden; left: 51px; width: {clientWidth}px; height: {clientHeight}px"
+			>
+				<div
+					class="lines-content monaco-editor-background"
+					style="position: absolute; overflow: hidden; width: 1.67772e+07px; height: 1.67772e+07px; transform: translate3d(0px, 0px, 0px); contain: strict; top: 0px; left: 0px;"
+				>
+					<div
+						class="view-lines monaco-mouse-cursor-text text-tertiary/60"
+						style="line-height: 21px; position: absolute; font-family: Menlo, Monaco, &quot;Courier New&quot;, monospace; font-weight: normal; font-size: 14px; font-feature-settings: &quot;liga&quot; 0, &quot;calt&quot; 0; font-variation-settings: normal; line-height: 21px; letter-spacing: 0px; width: 1143px; height: 789px;"
+					>
+						{#each lines as line, i}
+							<div style="height: 21px; top: {i * 21}px;" class="text-nowrap whitespace-pre">
+								{line}
+							</div>
+						{/each}
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
 </div>
-
-<style>
-	.mycontainer::-webkit-scrollbar {
-		/* Try to match monaco's scrollbar */
-		height: 12px;
-	}
-	.mycontainer::-webkit-scrollbar-thumb {
-		background-color: transparent;
-	}
-</style>
diff --git a/frontend/src/lib/components/InputTransformForm.svelte b/frontend/src/lib/components/InputTransformForm.svelte
index d23a81514d..a12b4026a8 100644
--- a/frontend/src/lib/components/InputTransformForm.svelte
+++ b/frontend/src/lib/components/InputTransformForm.svelte
@@ -494,7 +494,7 @@
 			<!-- {inputCat}
 			{propertyType} -->
 			<div class="relative flex flex-row items-top gap-2 justify-between">
-				<div class="min-w-0 grow leading-[20px]">
+				<div class="min-w-0 grow">
 					{#if isStaticTemplate(inputCat) && propertyType == 'static' && !noDynamicToggle}
 						{#if argName && schema?.properties?.[argName]?.description}
 							<div class="text-xs italic pb-1 text-secondary">
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/EvalV2InputEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/EvalV2InputEditor.svelte
index 607523d00d..3b59f74051 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/EvalV2InputEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/EvalV2InputEditor.svelte
@@ -71,7 +71,7 @@
 			offset={zIndexes.monacoEditor}
 		>
 			<Splitpanes horizontal class="h-full">
-				<Pane size={50} class="leading-[16px]">
+				<Pane size={50}>
 					<SimpleEditor
 						loadAsync
 						class="h-full w-full"
@@ -103,7 +103,7 @@
 			</Splitpanes>
 		</Drawer>
 	{/if}
-	<div class="border relative leading-[16px]">
+	<div class="border relative">
 		{#if !fullscreen}
 			<SimpleEditor
 				loadAsync
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/StaticInputEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/StaticInputEditor.svelte
index 9bfef97346..87cc7bca78 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/StaticInputEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/StaticInputEditor.svelte
@@ -233,7 +233,7 @@
 					placeholder="Label"
 				/>
 			{:else}
-				<div class="flex w-full flex-col leading-[16px]">
+				<div class="flex w-full flex-col">
 					<JsonEditor
 						loadAsync
 						small