prop picker improvements

frontend/src/lib/components/Editor.svelte

@@ -357,6 +357,10 @@
 			dispatch('change')
 		})
 
+		editor.onDidFocusEditorText(() => {
+			dispatch('focus')
+		})
+
 		if (lang == 'json') {
 			monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
 				validate: true,

frontend/src/lib/components/SchemaForm.svelte

@@ -22,6 +22,8 @@
 
 	let inputCheck: { [id: string]: boolean } = {}
 	let overlays: { [id: string]: OverlayPropertyPicker } = {}
+	let monacos: { [id: string]: Editor } = {}
+
 	$: isValid = allTrue(inputCheck) ?? false
 
 	let propertiesTypes: { [id: string]: InputTransform.type } = inputTransform
@@ -85,6 +87,16 @@
 	function isStaticTemplate(inputCat: InputCat) {
 		return inputCat === 'string' || inputCat === 'number'
 	}
+
+	function focusProp(argName: string) {
+		Object.keys(overlays).forEach((k) => {
+			if (k == argName) {
+				overlays[k].focus()
+			} else {
+				overlays[k].unfocus()
+			}
+		})
+	}
 </script>
 
 <div class="w-full">
@@ -142,7 +154,7 @@
 					{#if propertiesTypes[argName] === undefined || propertiesTypes[argName] === InputTransform.type.STATIC}
 						<OverlayPropertyPicker
 							bind:this={overlays[argName]}
-							bind:pickableProperties
+							{pickableProperties}
 							disabled={!isStaticTemplate(inputCats[argName])}
 							on:select={(event) => {
 								const toAppend = `\$\{${event.detail}}`
@@ -151,15 +163,7 @@
 							}}
 						>
 							<ArgInput
-								on:focus={() => {
-									Object.keys(overlays).forEach((k) => {
-										if (k == argName) {
-											overlays[k].focus()
-										} else {
-											overlays[k].unfocus()
-										}
-									})
-								}}
+								on:focus={() => focusProp(argName)}
 								label={argName}
 								bind:description={schema.properties[argName].description}
 								bind:value={args[argName].value}
@@ -184,15 +188,25 @@
 						</OverlayPropertyPicker>
 					{:else if propertiesTypes[argName] === InputTransform.type.JAVASCRIPT}
 						{#if args[argName].expr != undefined}
-							<div class="border rounded p-2 mt-2 border-gray-300">
-								<Editor
-									bind:code={args[argName].expr}
-									lang="javascript"
-									class="few-lines-editor"
-									{extraLib}
-									extraLibPath="file:///node_modules/@types/windmill@{i}/index.d.ts"
-								/>
-							</div>
+							<OverlayPropertyPicker
+								bind:this={overlays[argName]}
+								{pickableProperties}
+								on:select={(event) => {
+									monacos[argName].insertAtCursor(event.detail)
+								}}
+							>
+								<div class="border rounded p-2 mt-2 border-gray-300">
+									<Editor
+										bind:this={monacos[argName]}
+										on:focus={() => focusProp(argName)}
+										bind:code={args[argName].expr}
+										lang="javascript"
+										class="few-lines-editor"
+										{extraLib}
+										extraLibPath="file:///node_modules/@types/windmill@{i}/index.d.ts"
+									/>
+								</div>
+							</OverlayPropertyPicker>
 							<DynamicInputHelpBox />
 						{/if}
 					{:else}

frontend/src/lib/components/propertyPicker/ObjectViewer.svelte

@@ -22,7 +22,7 @@
 		closeBracket = isArray ? ']' : '}'
 	}
 
-	$: collapsed = false
+	$: collapsed = level == 2
 
 	function collapse() {
 		collapsed = !collapsed
@@ -52,7 +52,8 @@
 
 {#if keys.length > 0}
 	<span class:hidden={collapsed}>
-		<!-- <span class="cursor-pointer hover:bg-slate-200" on:click={collapse}>{openBracket}</span> -->
+		{#if level != 0}<span class="cursor-pointer hover:bg-slate-200" on:click={collapse}>(-)</span
+			>{/if}
 		<ul class="w-full">
 			{#each keys as key, index}
 				<li class={getTypeAsString(json[key]) !== 'object' ? 'hover:bg-sky-100 pt-1' : 'pt-1'}>
@@ -86,7 +87,6 @@
 				</li>
 			{/each}
 		</ul>
-		<!-- <span class="cursor-pointer hover:bg-slate-200" on:click={collapse}>{closeBracket}</span> -->
 	</span>
 	<span class="cursor-pointer hover:bg-slate-200" class:hidden={!collapsed} on:click={collapse}>
 		{openBracket}{collapsedSymbol}{closeBracket}

frontend/src/lib/components/propertyPicker/WarningMessage.svelte

@@ -1,4 +1,4 @@
-<div class="flex p-4 bg-yellow-100 rounded-lg dark:bg-yellow-200" role="alert">
+<div class="flex px-4 pt-1 bg-yellow-100 rounded-lg dark:bg-yellow-200" role="alert">
 	<svg
 		class="flex-shrink-0 w-5 h-5 text-yellow-700 dark:text-yellow-800"
 		fill="currentColor"