fix lack of suggestions in flow editor

frontend/Caddyfile

@@ -2,6 +2,7 @@ http://localhost {
   bind {$ADDRESS}
   reverse_proxy /api/* http://localhost:8000
   reverse_proxy /* http://localhost:3000
+  reverse_proxy /ws/* http://localhost:3001
 }
 
 https://localhost {  

frontend/package-lock.json

@@ -25,14 +25,15 @@
 				"highlight.js": "^11.7.0",
 				"lodash": "^4.17.21",
 				"lucide-svelte": "^0.115.0",
-				"monaco-editor": "0.33.0",
-				"monaco-languageclient": "2.1.0",
+				"monaco-editor": "0.34.1",
+				"monaco-languageclient": "5.0.0-next.3",
 				"svelte-autosize": "^1.0.1",
 				"svelte-chartjs": "^3.1.0",
 				"svelte-portal": "^2.2.0",
 				"svelte-select": "^5.3.1",
 				"tailwind-merge": "^1.9.1",
-				"vscode-ws-jsonrpc": "^2.0.1"
+				"vscode-languageclient": "~8.0.2",
+				"vscode-ws-jsonrpc": "3.0.0-next.1"
 			},
 			"devDependencies": {
 				"@playwright/test": "^1.31.1",
@@ -55,7 +56,7 @@
 				"eslint": "^8.28.0",
 				"eslint-config-prettier": "^8.6.0",
 				"eslint-plugin-svelte3": "^4.0.0",
-				"monaco-editor-workers": "0.33.0",
+				"monaco-editor-workers": "0.34.2",
 				"ol": "^7.2.2",
 				"openapi-typescript-codegen": "^0.23.0",
 				"path-browserify": "^1.0.1",
@@ -3291,11 +3292,6 @@
 				"node": ">= 6"
 			}
 		},
-		"node_modules/glob-to-regexp": {
-			"version": "0.4.1",
-			"resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
-			"integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw=="
-		},
 		"node_modules/global-modules": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/global-modules/-/global-modules-2.0.0.tgz",
@@ -4238,30 +4234,30 @@
 			}
 		},
 		"node_modules/monaco-editor": {
-			"version": "0.33.0",
-			"resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.33.0.tgz",
-			"integrity": "sha512-VcRWPSLIUEgQJQIE0pVT8FcGBIgFoxz7jtqctE+IiCxWugD0DwgyQBcZBhdSrdMC84eumoqMZsGl2GTreOzwqw=="
+			"version": "0.34.1",
+			"resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.34.1.tgz",
+			"integrity": "sha512-FKc80TyiMaruhJKKPz5SpJPIjL+dflGvz4CpuThaPMc94AyN7SeC9HQ8hrvaxX7EyHdJcUY5i4D0gNyJj1vSZQ=="
 		},
 		"node_modules/monaco-editor-workers": {
-			"version": "0.33.0",
-			"resolved": "https://registry.npmjs.org/monaco-editor-workers/-/monaco-editor-workers-0.33.0.tgz",
-			"integrity": "sha512-KrIju+r4mKCzGi9kDVqUIze78EilSf8VbvNOQD7p14LSVah5fy1Z3z5QRYDDgHcHFEkzT7vbVMRnBRy6CI/aHQ==",
-			"dev": true,
-			"dependencies": {
-				"monaco-editor": "0.33.0"
-			}
+			"version": "0.34.2",
+			"resolved": "https://registry.npmjs.org/monaco-editor-workers/-/monaco-editor-workers-0.34.2.tgz",
+			"integrity": "sha512-MdO1nvAbGNzc7ygyzwACvs5DOPaTOUNDjU/qTQx0Rsw00BrhL88eMi9sWBm+LYfQbPaZf+YBqwJaJUovl3M6bQ==",
+			"dev": true
 		},
 		"node_modules/monaco-languageclient": {
-			"version": "2.1.0",
-			"resolved": "https://registry.npmjs.org/monaco-languageclient/-/monaco-languageclient-2.1.0.tgz",
-			"integrity": "sha512-Ps+G97MH8p/T7dk7NqJnDgub6x2+SiAmFR6rjUyJ2qdSGUNgg310bPD521rEPUTNKGfP7VwBggFjcnoGGCi0vg==",
+			"version": "5.0.0-next.3",
+			"resolved": "https://registry.npmjs.org/monaco-languageclient/-/monaco-languageclient-5.0.0-next.3.tgz",
+			"integrity": "sha512-WX5mwntWdR74z1Y5EPFLBZGRUJ+3PhFTeoaszMfIHlpeWaTrdabz1zjAj/zlZKPkDv+CWLhn+VYrfPlGd5mwZA==",
 			"dependencies": {
-				"glob-to-regexp": "0.4.1",
-				"vscode": "npm:@codingame/monaco-vscode-api@~1.67.20",
 				"vscode-jsonrpc": "8.0.2",
-				"vscode-languageclient": "8.0.2",
-				"vscode-languageserver-textdocument": "1.0.5",
-				"vscode-uri": "3.0.3"
+				"vscode-languageclient": "8.0.2"
+			},
+			"engines": {
+				"node": ">=16.11.0",
+				"npm": ">=9.0.0"
+			},
+			"peerDependencies": {
+				"vscode": "npm:@codingame/monaco-vscode-api@~1.69.0"
 			}
 		},
 		"node_modules/mri": {
@@ -7111,11 +7107,14 @@
 		},
 		"node_modules/vscode": {
 			"name": "@codingame/monaco-vscode-api",
-			"version": "1.67.20",
-			"resolved": "https://registry.npmjs.org/@codingame/monaco-vscode-api/-/monaco-vscode-api-1.67.20.tgz",
-			"integrity": "sha512-3+swJLtpNWmn2hsnVFv/qbLuQLt+FlaDLgcK0PgYwWVIJn2FjO48a0+ke8ZYS/tiqZxJgJSk+y6hdohgZo7n0g==",
-			"dependencies": {
-				"monaco-editor": "^0.33.0"
+			"version": "1.69.24",
+			"resolved": "https://registry.npmjs.org/@codingame/monaco-vscode-api/-/monaco-vscode-api-1.69.24.tgz",
+			"integrity": "sha512-D105o8lg/sKUAjQKOlDlEvmnnfUpB/3cBr37ZpF5cFQrHqnJ/0XwWsk2iET36brrdjsk67l0Uctik98in8BzxA==",
+			"peer": true,
+			"peerDependencies": {
+				"monaco-editor": "~0.34.0",
+				"vscode-oniguruma": "^1.6.2",
+				"vscode-textmate": "^7.0.1"
 			}
 		},
 		"node_modules/vscode-jsonrpc": {
@@ -7153,20 +7152,22 @@
 			"resolved": "https://registry.npmjs.org/vscode-languageserver-types/-/vscode-languageserver-types-3.17.2.tgz",
 			"integrity": "sha512-zHhCWatviizPIq9B7Vh9uvrH6x3sK8itC84HkamnBWoDFJtzBf7SWlpLCZUit72b3os45h6RWQNC9xHRDF8dRA=="
 		},
-		"node_modules/vscode-languageserver-textdocument": {
-			"version": "1.0.5",
-			"resolved": "https://registry.npmjs.org/vscode-languageserver-textdocument/-/vscode-languageserver-textdocument-1.0.5.tgz",
-			"integrity": "sha512-1ah7zyQjKBudnMiHbZmxz5bYNM9KKZYz+5VQLj+yr8l+9w3g+WAhCkUkWbhMEdC5u0ub4Ndiye/fDyS8ghIKQg=="
+		"node_modules/vscode-oniguruma": {
+			"version": "1.7.0",
+			"resolved": "https://registry.npmjs.org/vscode-oniguruma/-/vscode-oniguruma-1.7.0.tgz",
+			"integrity": "sha512-L9WMGRfrjOhgHSdOYgCt/yRMsXzLDJSL7BPrOZt73gU0iWO4mpqzqQzOz5srxqTvMBaR0XZTSrVWo4j55Rc6cA==",
+			"peer": true
 		},
-		"node_modules/vscode-uri": {
-			"version": "3.0.3",
-			"resolved": "https://registry.npmjs.org/vscode-uri/-/vscode-uri-3.0.3.tgz",
-			"integrity": "sha512-EcswR2S8bpR7fD0YPeS7r2xXExrScVMxg4MedACaWHEtx9ftCF/qHG1xGkolzTPcEmjTavCQgbVzHUIdTMzFGA=="
+		"node_modules/vscode-textmate": {
+			"version": "7.0.4",
+			"resolved": "https://registry.npmjs.org/vscode-textmate/-/vscode-textmate-7.0.4.tgz",
+			"integrity": "sha512-9hJp0xL7HW1Q5OgGe03NACo7yiCTMEk3WU/rtKXUbncLtdg6rVVNJnHwD88UhbIYU2KoxY0Dih0x+kIsmUKn2A==",
+			"peer": true
 		},
 		"node_modules/vscode-ws-jsonrpc": {
-			"version": "2.0.2",
-			"resolved": "https://registry.npmjs.org/vscode-ws-jsonrpc/-/vscode-ws-jsonrpc-2.0.2.tgz",
-			"integrity": "sha512-gIOGdaWwKYwwqohgeRC8AtqqHSNghK8wA3oVcBi7UMAdZnRSAf8n4/Svtd+JHqGiIguYdNa/sC0s4IW3ZDF7mA==",
+			"version": "3.0.0-next.1",
+			"resolved": "https://registry.npmjs.org/vscode-ws-jsonrpc/-/vscode-ws-jsonrpc-3.0.0-next.1.tgz",
+			"integrity": "sha512-9Snn23NgLKRO+LDuNcF+0mYIjgsDFXXinLQNP/unPXzaE6YO6eaO2uyf88HHg3M9wyQf/bArO67sYhsBFdC3Ow==",
 			"dependencies": {
 				"vscode-jsonrpc": "8.0.2"
 			},
@@ -9626,11 +9627,6 @@
 				"is-glob": "^4.0.1"
 			}
 		},
-		"glob-to-regexp": {
-			"version": "0.4.1",
-			"resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
-			"integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw=="
-		},
 		"global-modules": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/global-modules/-/global-modules-2.0.0.tgz",
@@ -10345,30 +10341,23 @@
 			}
 		},
 		"monaco-editor": {
-			"version": "0.33.0",
-			"resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.33.0.tgz",
-			"integrity": "sha512-VcRWPSLIUEgQJQIE0pVT8FcGBIgFoxz7jtqctE+IiCxWugD0DwgyQBcZBhdSrdMC84eumoqMZsGl2GTreOzwqw=="
+			"version": "0.34.1",
+			"resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.34.1.tgz",
+			"integrity": "sha512-FKc80TyiMaruhJKKPz5SpJPIjL+dflGvz4CpuThaPMc94AyN7SeC9HQ8hrvaxX7EyHdJcUY5i4D0gNyJj1vSZQ=="
 		},
 		"monaco-editor-workers": {
-			"version": "0.33.0",
-			"resolved": "https://registry.npmjs.org/monaco-editor-workers/-/monaco-editor-workers-0.33.0.tgz",
-			"integrity": "sha512-KrIju+r4mKCzGi9kDVqUIze78EilSf8VbvNOQD7p14LSVah5fy1Z3z5QRYDDgHcHFEkzT7vbVMRnBRy6CI/aHQ==",
-			"dev": true,
-			"requires": {
-				"monaco-editor": "0.33.0"
-			}
+			"version": "0.34.2",
+			"resolved": "https://registry.npmjs.org/monaco-editor-workers/-/monaco-editor-workers-0.34.2.tgz",
+			"integrity": "sha512-MdO1nvAbGNzc7ygyzwACvs5DOPaTOUNDjU/qTQx0Rsw00BrhL88eMi9sWBm+LYfQbPaZf+YBqwJaJUovl3M6bQ==",
+			"dev": true
 		},
 		"monaco-languageclient": {
-			"version": "2.1.0",
-			"resolved": "https://registry.npmjs.org/monaco-languageclient/-/monaco-languageclient-2.1.0.tgz",
-			"integrity": "sha512-Ps+G97MH8p/T7dk7NqJnDgub6x2+SiAmFR6rjUyJ2qdSGUNgg310bPD521rEPUTNKGfP7VwBggFjcnoGGCi0vg==",
+			"version": "5.0.0-next.3",
+			"resolved": "https://registry.npmjs.org/monaco-languageclient/-/monaco-languageclient-5.0.0-next.3.tgz",
+			"integrity": "sha512-WX5mwntWdR74z1Y5EPFLBZGRUJ+3PhFTeoaszMfIHlpeWaTrdabz1zjAj/zlZKPkDv+CWLhn+VYrfPlGd5mwZA==",
 			"requires": {
-				"glob-to-regexp": "0.4.1",
-				"vscode": "npm:@codingame/monaco-vscode-api@~1.67.20",
 				"vscode-jsonrpc": "8.0.2",
-				"vscode-languageclient": "8.0.2",
-				"vscode-languageserver-textdocument": "1.0.5",
-				"vscode-uri": "3.0.3"
+				"vscode-languageclient": "8.0.2"
 			}
 		},
 		"mri": {
@@ -12353,12 +12342,11 @@
 			"requires": {}
 		},
 		"vscode": {
-			"version": "npm:@codingame/monaco-vscode-api@1.67.20",
-			"resolved": "https://registry.npmjs.org/@codingame/monaco-vscode-api/-/monaco-vscode-api-1.67.20.tgz",
-			"integrity": "sha512-3+swJLtpNWmn2hsnVFv/qbLuQLt+FlaDLgcK0PgYwWVIJn2FjO48a0+ke8ZYS/tiqZxJgJSk+y6hdohgZo7n0g==",
-			"requires": {
-				"monaco-editor": "^0.33.0"
-			}
+			"version": "npm:@codingame/monaco-vscode-api@1.69.24",
+			"resolved": "https://registry.npmjs.org/@codingame/monaco-vscode-api/-/monaco-vscode-api-1.69.24.tgz",
+			"integrity": "sha512-D105o8lg/sKUAjQKOlDlEvmnnfUpB/3cBr37ZpF5cFQrHqnJ/0XwWsk2iET36brrdjsk67l0Uctik98in8BzxA==",
+			"peer": true,
+			"requires": {}
 		},
 		"vscode-jsonrpc": {
 			"version": "8.0.2",
@@ -12391,20 +12379,22 @@
 				}
 			}
 		},
-		"vscode-languageserver-textdocument": {
-			"version": "1.0.5",
-			"resolved": "https://registry.npmjs.org/vscode-languageserver-textdocument/-/vscode-languageserver-textdocument-1.0.5.tgz",
-			"integrity": "sha512-1ah7zyQjKBudnMiHbZmxz5bYNM9KKZYz+5VQLj+yr8l+9w3g+WAhCkUkWbhMEdC5u0ub4Ndiye/fDyS8ghIKQg=="
+		"vscode-oniguruma": {
+			"version": "1.7.0",
+			"resolved": "https://registry.npmjs.org/vscode-oniguruma/-/vscode-oniguruma-1.7.0.tgz",
+			"integrity": "sha512-L9WMGRfrjOhgHSdOYgCt/yRMsXzLDJSL7BPrOZt73gU0iWO4mpqzqQzOz5srxqTvMBaR0XZTSrVWo4j55Rc6cA==",
+			"peer": true
 		},
-		"vscode-uri": {
-			"version": "3.0.3",
-			"resolved": "https://registry.npmjs.org/vscode-uri/-/vscode-uri-3.0.3.tgz",
-			"integrity": "sha512-EcswR2S8bpR7fD0YPeS7r2xXExrScVMxg4MedACaWHEtx9ftCF/qHG1xGkolzTPcEmjTavCQgbVzHUIdTMzFGA=="
+		"vscode-textmate": {
+			"version": "7.0.4",
+			"resolved": "https://registry.npmjs.org/vscode-textmate/-/vscode-textmate-7.0.4.tgz",
+			"integrity": "sha512-9hJp0xL7HW1Q5OgGe03NACo7yiCTMEk3WU/rtKXUbncLtdg6rVVNJnHwD88UhbIYU2KoxY0Dih0x+kIsmUKn2A==",
+			"peer": true
 		},
 		"vscode-ws-jsonrpc": {
-			"version": "2.0.2",
-			"resolved": "https://registry.npmjs.org/vscode-ws-jsonrpc/-/vscode-ws-jsonrpc-2.0.2.tgz",
-			"integrity": "sha512-gIOGdaWwKYwwqohgeRC8AtqqHSNghK8wA3oVcBi7UMAdZnRSAf8n4/Svtd+JHqGiIguYdNa/sC0s4IW3ZDF7mA==",
+			"version": "3.0.0-next.1",
+			"resolved": "https://registry.npmjs.org/vscode-ws-jsonrpc/-/vscode-ws-jsonrpc-3.0.0-next.1.tgz",
+			"integrity": "sha512-9Snn23NgLKRO+LDuNcF+0mYIjgsDFXXinLQNP/unPXzaE6YO6eaO2uyf88HHg3M9wyQf/bArO67sYhsBFdC3Ow==",
 			"requires": {
 				"vscode-jsonrpc": "8.0.2"
 			}

frontend/package.json

@@ -36,7 +36,7 @@
 		"eslint-config-prettier": "^8.6.0",
 		"eslint-plugin-svelte3": "^4.0.0",
 		"ol": "^7.2.2",
-		"monaco-editor-workers": "0.33.0",
+		"monaco-editor-workers": "0.34.2",
 		"openapi-typescript-codegen": "^0.23.0",
 		"path-browserify": "^1.0.1",
 		"pdfjs-dist": "^3.4.120",
@@ -83,14 +83,15 @@
 		"highlight.js": "^11.7.0",
 		"lodash": "^4.17.21",
 		"lucide-svelte": "^0.115.0",
-		"monaco-editor": "0.33.0",
-		"monaco-languageclient": "2.1.0",
+		"monaco-editor": "0.34.1",
+		"monaco-languageclient": "5.0.0-next.3",
+		"vscode-languageclient": "~8.0.2",
 		"svelte-autosize": "^1.0.1",
 		"svelte-chartjs": "^3.1.0",
 		"svelte-portal": "^2.2.0",
 		"svelte-select": "^5.3.1",
 		"tailwind-merge": "^1.9.1",
-		"vscode-ws-jsonrpc": "^2.0.1"
+		"vscode-ws-jsonrpc": "3.0.0-next.1"
 	},
 	"peerDependencies": {
 		"svelte": "^3.55.1"

frontend/src/lib/components/Editor.svelte

@@ -1,10 +1,12 @@
 <script lang="ts" context="module">
-	import getMessageServiceOverride from 'vscode/service-override/messages'
 	import { StandaloneServices } from 'vscode/services'
+	import getNotificationServiceOverride from 'vscode/service-override/notifications'
+	import getDialogServiceOverride from 'vscode/service-override/dialogs'
 
 	try {
 		StandaloneServices?.initialize({
-			...getMessageServiceOverride(document.body)
+			...getNotificationServiceOverride(document.body),
+			...getDialogServiceOverride()
 		})
 	} catch (e) {
 		console.error(e)
@@ -17,12 +19,7 @@
 	import { sendUserToast } from '$lib/utils'
 
 	import { buildWorkerDefinition } from 'monaco-editor-workers'
-	import type {
-		Disposable,
-		DocumentUri,
-		MessageTransports,
-		MonacoLanguageClient
-	} from 'monaco-languageclient'
+	import type { MonacoLanguageClient } from 'monaco-languageclient'
 	import { createEventDispatcher, onDestroy, onMount } from 'svelte'
 
 	import { languages, editor as meditor, KeyCode, KeyMod, Uri as mUri } from 'monaco-editor'
@@ -63,6 +60,8 @@
 		updateOptions
 	} from '$lib/editorUtils'
 	import { dirtyStore } from './common/confirmationModal/dirtyStore'
+	import type { Disposable } from 'vscode'
+	import type { DocumentUri, MessageTransports } from 'vscode-languageclient'
 
 	let divEl: HTMLDivElement | null = null
 	let editor: meditor.IStandaloneCodeEditor
@@ -395,12 +394,14 @@
 		websocketInterval && clearInterval(websocketInterval)
 	}
 
+	let widgets: HTMLElement | undefined = document.getElementById('monaco-widgets-root') ?? undefined
 	async function loadMonaco() {
 		const model = meditor.createModel(code, lang, mUri.parse(uri))
 
 		model.updateOptions(updateOptions)
 		editor = meditor.create(divEl as HTMLDivElement, {
 			...editorConfig(model, code, lang, automaticLayout, fixedOverflowWidgets),
+			overflowWidgetsDomNode: widgets,
 			tabSize: lang == 'python' ? 4 : 2
 		})
 

frontend/src/lib/components/FlowBuilder.svelte

@@ -261,7 +261,7 @@
 	<div class="flex flex-col flex-1 h-screen">
 		<!-- Nav between steps-->
 		<div
-			class="justify-between flex flex-row w-full items-center pl-2.5 pr-6  space-x-4 overflow-x-auto scrollbar-hidden max-h-12 h-full"
+			class="justify-between flex flex-row w-full items-center pl-2.5 pr-6 space-x-4 overflow-x-auto scrollbar-hidden max-h-12 h-full"
 		>
 			<div class="flex flex-row gap-4 items-center">
 				<FlowImportExportMenu />

frontend/src/lib/components/common/drawer/Drawer.svelte

@@ -77,13 +77,13 @@
 <svelte:window on:keydown={onKeyDown} />
 
 <aside
-	class="drawer {$$props.class} {$$props.positionClass}"
+	class="drawer {$$props.class ?? ''} {$$props.positionClass ?? ''}"
 	class:open
 	class:close={!open && timeout}
 	{style}
 >
 	<!-- svelte-ignore a11y-click-events-have-key-events -->
-	<div class="overlay {$$props.positionClass}" on:click={handleClickAway} />
+	<div class="overlay {$$props.positionClass ?? ''}" on:click={handleClickAway} />
 	<div class="panel {placement} {$$props.positionClass}" class:size>
 		{#if open || !timeout || alwaysOpen}
 			<slot {open} />

frontend/src/lib/components/flows/content/FlowModuleComponent.svelte

@@ -179,33 +179,31 @@
 				<Splitpanes horizontal>
 					<Pane size={isScript ? 30 : 50} minSize={20}>
 						{#if value.type === 'rawscript'}
-							<div class="h-full">
-								<Editor
-									bind:websocketAlive
-									bind:this={editor}
-									class="h-full px-2"
-									bind:code={value.content}
-									deno={value.language === RawScript.language.DENO}
-									lang={scriptLangToEditorLang(value.language)}
-									automaticLayout={true}
-									cmdEnterAction={async () => {
-										selected = 'test'
-										if (value.type === 'rawscript') {
-											value.content = editor.getCode()
-										}
-										await reload(flowModule)
-										modulePreview?.runTestWithStepArgs()
-									}}
-									on:change={async (event) => {
-										if (flowModule.value.type === 'rawscript') {
-											flowModule.value.content = event.detail
-										}
-										await reload(flowModule)
-									}}
-									formatAction={() => reload(flowModule)}
-									fixedOverflowWidgets
-								/>
-							</div>
+							<Editor
+								bind:websocketAlive
+								bind:this={editor}
+								class="h-full relative"
+								bind:code={value.content}
+								deno={value.language === RawScript.language.DENO}
+								lang={scriptLangToEditorLang(value.language)}
+								automaticLayout={true}
+								cmdEnterAction={async () => {
+									selected = 'test'
+									if (value.type === 'rawscript') {
+										value.content = editor.getCode()
+									}
+									await reload(flowModule)
+									modulePreview?.runTestWithStepArgs()
+								}}
+								on:change={async (event) => {
+									if (flowModule.value.type === 'rawscript') {
+										flowModule.value.content = event.detail
+									}
+									await reload(flowModule)
+								}}
+								formatAction={() => reload(flowModule)}
+								fixedOverflowWidgets={true}
+							/>
 						{:else if value.type === 'script'}
 							{#key forceReload}
 								<FlowModuleScript path={value.path} hash={value.hash} />
@@ -264,7 +262,7 @@
 										<FlowModuleSleep previousModuleId={previousModule?.id} bind:flowModule />
 									</div>
 								{:else if selected === 'advanced-same_worker'}
-									<div class="p-4  h-full overflow-auto">
+									<div class="p-4 h-full overflow-auto">
 										<Alert type="info" title="Share a directory between steps">
 											If shared directory is set, will share a folder that will be mounted on
 											`./shared` for each of them to pass data between each other.

frontend/src/lib/editorUtils.ts

@@ -1,155 +1,162 @@
 import { languages } from 'monaco-editor/esm/vs/editor/editor.api'
-export function editorConfig(model: any, code: string, lang: string, automaticLayout: boolean, fixedOverflowWidgets: boolean) {
-
-    return {
-        model,
-        value: code,
-        language: lang,
-        automaticLayout,
-        readOnly: false,
-        fixedOverflowWidgets,
-        autoDetectHighContrast: true,
-        //lineNumbers: 'off',
-        lineDecorationsWidth: 15,
-        lineNumbersMinChars: 2,
-        scrollbar: { alwaysConsumeMouseWheel: false },
-        folding: false,
-        scrollBeyondLastLine: false,
-        minimap: {
-            enabled: false
-        },
-        lightbulb: {
-            enabled: true
-        },
-        suggest: {
-            showKeywords: false,
-        },
-        'bracketPairColorization.enabled': true,
-        matchBrackets: 'always' as 'always',
-    }
+export function editorConfig(
+	model: any,
+	code: string,
+	lang: string,
+	automaticLayout: boolean,
+	fixedOverflowWidgets: boolean
+) {
+	return {
+		model,
+		value: code,
+		language: lang,
+		automaticLayout,
+		readOnly: false,
+		fixedOverflowWidgets,
+		autoDetectHighContrast: true,
+		//lineNumbers: 'off',
+		lineDecorationsWidth: 15,
+		lineNumbersMinChars: 2,
+		scrollbar: { alwaysConsumeMouseWheel: false },
+		folding: false,
+		scrollBeyondLastLine: false,
+		minimap: {
+			enabled: false
+		},
+		lightbulb: {
+			enabled: true
+		},
+		suggest: {
+			showKeywords: false
+		},
+		bracketPairColorization: {
+			enabled: true
+		},
+		'bracketPairColorization.enabled': true,
+		matchBrackets: 'always' as 'always'
+	}
 }
 
 export function createHash() {
-    return (Math.random() + 1).toString(36).substring(2)
+	return (Math.random() + 1).toString(36).substring(2)
 }
 
 export function langToExt(lang: string): string {
-    switch (lang) {
-        case 'javascript':
-            return 'js'
-        case 'json':
-            return 'json'
-        case 'sql':
-            return 'sql'
-        case 'yaml':
-            return 'yaml'
-        case 'typescript':
-            return 'ts'
-        case 'python':
-            return 'py'
-        case 'go':
-            return 'go'
-        case 'bash':
-            return 'sh'
-        default:
-            return 'unknown'
-    }
+	switch (lang) {
+		case 'javascript':
+			return 'js'
+		case 'json':
+			return 'json'
+		case 'sql':
+			return 'sql'
+		case 'yaml':
+			return 'yaml'
+		case 'typescript':
+			return 'ts'
+		case 'python':
+			return 'py'
+		case 'go':
+			return 'go'
+		case 'bash':
+			return 'sh'
+		default:
+			return 'unknown'
+	}
 }
 
 export const updateOptions = { tabSize: 2, insertSpaces: true }
 
 export function convertKind(kind: string): any {
-    switch (kind) {
-        case Kind.primitiveType:
-        case Kind.keyword:
-            return languages.CompletionItemKind.Keyword;
-        case Kind.variable:
-        case Kind.localVariable:
-            return languages.CompletionItemKind.Variable;
-        case Kind.memberVariable:
-        case Kind.memberGetAccessor:
-        case Kind.memberSetAccessor:
-            return languages.CompletionItemKind.Field;
-        case Kind.function:
-        case Kind.memberFunction:
-        case Kind.constructSignature:
-        case Kind.callSignature:
-        case Kind.indexSignature:
-            return languages.CompletionItemKind.Function;
-        case Kind.enum:
-            return languages.CompletionItemKind.Enum;
-        case Kind.module:
-            return languages.CompletionItemKind.Module;
-        case Kind.class:
-            return languages.CompletionItemKind.Class;
-        case Kind.interface:
-            return languages.CompletionItemKind.Interface;
-        case Kind.warning:
-            return languages.CompletionItemKind.File;
-    }
+	switch (kind) {
+		case Kind.primitiveType:
+		case Kind.keyword:
+			return languages.CompletionItemKind.Keyword
+		case Kind.variable:
+		case Kind.localVariable:
+			return languages.CompletionItemKind.Variable
+		case Kind.memberVariable:
+		case Kind.memberGetAccessor:
+		case Kind.memberSetAccessor:
+			return languages.CompletionItemKind.Field
+		case Kind.function:
+		case Kind.memberFunction:
+		case Kind.constructSignature:
+		case Kind.callSignature:
+		case Kind.indexSignature:
+			return languages.CompletionItemKind.Function
+		case Kind.enum:
+			return languages.CompletionItemKind.Enum
+		case Kind.module:
+			return languages.CompletionItemKind.Module
+		case Kind.class:
+			return languages.CompletionItemKind.Class
+		case Kind.interface:
+			return languages.CompletionItemKind.Interface
+		case Kind.warning:
+			return languages.CompletionItemKind.File
+	}
 
-    return languages.CompletionItemKind.Property;
+	return languages.CompletionItemKind.Property
 }
 
 class Kind {
-    public static unknown: string = '';
-    public static keyword: string = 'keyword';
-    public static script: string = 'script';
-    public static module: string = 'module';
-    public static class: string = 'class';
-    public static interface: string = 'interface';
-    public static type: string = 'type';
-    public static enum: string = 'enum';
-    public static variable: string = 'var';
-    public static localVariable: string = 'local var';
-    public static function: string = 'function';
-    public static localFunction: string = 'local function';
-    public static memberFunction: string = 'method';
-    public static memberGetAccessor: string = 'getter';
-    public static memberSetAccessor: string = 'setter';
-    public static memberVariable: string = 'property';
-    public static constructorImplementation: string = 'constructor';
-    public static callSignature: string = 'call';
-    public static indexSignature: string = 'index';
-    public static constructSignature: string = 'construct';
-    public static parameter: string = 'parameter';
-    public static typeParameter: string = 'type parameter';
-    public static primitiveType: string = 'primitive type';
-    public static label: string = 'label';
-    public static alias: string = 'alias';
-    public static const: string = 'const';
-    public static let: string = 'let';
-    public static warning: string = 'warning';
+	public static unknown: string = ''
+	public static keyword: string = 'keyword'
+	public static script: string = 'script'
+	public static module: string = 'module'
+	public static class: string = 'class'
+	public static interface: string = 'interface'
+	public static type: string = 'type'
+	public static enum: string = 'enum'
+	public static variable: string = 'var'
+	public static localVariable: string = 'local var'
+	public static function: string = 'function'
+	public static localFunction: string = 'local function'
+	public static memberFunction: string = 'method'
+	public static memberGetAccessor: string = 'getter'
+	public static memberSetAccessor: string = 'setter'
+	public static memberVariable: string = 'property'
+	public static constructorImplementation: string = 'constructor'
+	public static callSignature: string = 'call'
+	public static indexSignature: string = 'index'
+	public static constructSignature: string = 'construct'
+	public static parameter: string = 'parameter'
+	public static typeParameter: string = 'type parameter'
+	public static primitiveType: string = 'primitive type'
+	public static label: string = 'label'
+	public static alias: string = 'alias'
+	public static const: string = 'const'
+	public static let: string = 'let'
+	public static warning: string = 'warning'
 }
 
 export function createDocumentationString(details: any): string {
-    let documentationString = displayPartsToString(details.documentation);
-    if (details.tags) {
-        for (const tag of details.tags) {
-            documentationString += `\n\n${tagToString(tag)}`;
-        }
-    }
-    return documentationString;
+	let documentationString = displayPartsToString(details.documentation)
+	if (details.tags) {
+		for (const tag of details.tags) {
+			documentationString += `\n\n${tagToString(tag)}`
+		}
+	}
+	return documentationString
 }
 
-
 function tagToString(tag: any): string {
-    let tagLabel = `*@${tag.name}*`;
-    if (tag.name === 'param' && tag.text) {
-        const [paramName, ...rest] = tag.text;
-        tagLabel += `\`${paramName.text}\``;
-        if (rest.length > 0) tagLabel += ` — ${rest.map((r) => r.text).join(' ')}`;
-    } else if (Array.isArray(tag.text)) {
-        tagLabel += ` — ${tag.text.map((r) => r.text).join(' ')}`;
-    } else if (tag.text) {
-        tagLabel += ` — ${tag.text}`;
-    }
-    return tagLabel;
+	let tagLabel = `*@${tag.name}*`
+	if (tag.name === 'param' && tag.text) {
+		const [paramName, ...rest] = tag.text
+		tagLabel += `\`${paramName.text}\``
+		if (rest.length > 0) tagLabel += ` — ${rest.map((r) => r.text).join(' ')}`
+	} else if (Array.isArray(tag.text)) {
+		tagLabel += ` — ${tag.text.map((r) => r.text).join(' ')}`
+	} else if (tag.text) {
+		tagLabel += ` — ${tag.text}`
+	}
+	return tagLabel
 }
 
 export function displayPartsToString(displayParts: any | undefined): string {
-    if (displayParts) {
-        return displayParts.map((displayPart) => displayPart.text).join('');
-    }
-    return '';
+	if (displayParts) {
+		return displayParts.map((displayPart) => displayPart.text).join('')
+	}
+	return ''
 }

frontend/src/routes/(root)/(logged)/flows/add/+page.svelte

@@ -89,4 +89,6 @@
 	$dirtyStore = true
 </script>
 
+<div id="monaco-widgets-root" class="monaco-editor" style="z-index: 999;" />
+
 <FlowBuilder {flowStore} {flowStateStore} {selectedId} {loading} />

frontend/src/routes/(root)/(logged)/flows/edit/[...path]/+page.svelte

@@ -62,6 +62,8 @@
 	}
 </script>
 
+<div id="monaco-widgets-root" class="monaco-editor" style="z-index: 999;" />
+
 <FlowBuilder
 	{flowStore}
 	{flowStateStore}