load async monaco in app

Author: diegoimbert

frontend/src/lib/components/Editor.svelte

@@ -1421,7 +1421,7 @@
 			marginLeft="51px"
 			{code}
 			fontSize={!small ? 14 : 12}
-			className="dark:bg-[#272D38] h-full"
+			className="dark:bg-[#272D38] h-full leading-[20px]"
 		/>
 	</div>
 {/if}

frontend/src/lib/components/FakeMonacoPlaceHolder.svelte

@@ -12,7 +12,7 @@
 </script>
 
 <div
-	class={'relative w-full pr-14 z-9 mt-[-1px] mb-[1px] leading-[20px] dark:bg-[#272D38] overflow-y-clip overflow-x-auto mycontainer ' +
+	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};"
 >
@@ -21,7 +21,7 @@
 		style="margin-left: {marginLeft};"
 	></div>
 	<code
-		class="text-nowrap whitespace-pre-wrap overflow-clip text-tertiary/50"
+		class="text-nowrap whitespace-pre overflow-clip text-tertiary/50"
 		style="font-size: {fontSize}px;"
 	>
 		{code}

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">
+				<div class="min-w-0 grow leading-[20px]">
 					{#if isStaticTemplate(inputCat) && propertyType == 'static' && !noDynamicToggle}
 						{#if argName && schema?.properties?.[argName]?.description}
 							<div class="text-xs italic pb-1 text-secondary">

frontend/src/lib/components/JsonEditor.svelte

@@ -9,6 +9,7 @@
 	export let error = ''
 	export let editor: SimpleEditor | undefined = undefined
 	export let small = false
+	export let loadAsync = false
 
 	$: tooBig = code && code?.length > 1000000
 
@@ -38,6 +39,7 @@
 	<div class="flex flex-col w-full">
 		<div class="border w-full">
 			<SimpleEditor
+				{loadAsync}
 				{small}
 				on:focus
 				on:blur

frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/EvalV2InputEditor.svelte

@@ -71,12 +71,13 @@
 			offset={zIndexes.monacoEditor}
 		>
 			<Splitpanes horizontal class="h-full">
-				<Pane size={50}>
+				<Pane size={50} class="leading-[16px]">
 					<SimpleEditor
+						loadAsync
 						class="h-full w-full"
 						bind:this={editor}
 						lang="javascript"
-						bind:code={componentInput.expr}
+						bind:code={() => componentInput.expr ?? '', (e) => (componentInput.expr = e)}
 						shouldBindKey={false}
 						fixedOverflowWidgets={false}
 						{extraLib}
@@ -102,13 +103,14 @@
 			</Splitpanes>
 		</Drawer>
 	{/if}
-	<div class="border relative">
+	<div class="border relative leading-[16px]">
 		{#if !fullscreen}
 			<SimpleEditor
+				loadAsync
 				small
 				bind:this={editor}
 				lang="javascript"
-				bind:code={componentInput.expr}
+				bind:code={() => componentInput.expr ?? '', (e) => (componentInput.expr = e)}
 				shouldBindKey={false}
 				{extraLib}
 				autoHeight

frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/StaticInputEditor.svelte

@@ -233,8 +233,9 @@
 					placeholder="Label"
 				/>
 			{:else}
-				<div class="flex w-full flex-col">
+				<div class="flex w-full flex-col leading-[16px]">
 					<JsonEditor
+						loadAsync
 						small
 						bind:value={componentInput.value}
 						code={JSON.stringify(componentInput.value, null, 2)}