From 7eed0b46661967fd37dfa4fa9a1741835947719a Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Sun, 2 Apr 2023 17:41:43 +0200
Subject: [PATCH] update highlight + fix transform editor suggestions

---
 frontend/package-lock.json                    | 35 +++++--------------
 frontend/package.json                         |  2 +-
 .../src/lib/components/FlowGraphViewer.svelte |  6 +---
 .../src/lib/components/HighlightCode.svelte   |  2 +-
 .../lib/components/InputTransformForm.svelte  |  4 +--
 .../components/InputTransformsViewer.svelte   |  2 +-
 .../src/lib/components/SimpleEditor.svelte    | 10 +++---
 .../src/lib/components/TemplateEditor.svelte  |  3 ++
 frontend/src/lib/components/flows/utils.ts    |  3 +-
 9 files changed, 26 insertions(+), 41 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index fca17171ce..40fe304392 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -71,7 +71,7 @@
 				"svelte-awesome": "^3.2.0",
 				"svelte-awesome-color-picker": "^2.4.1",
 				"svelte-check": "^3.0.2",
-				"svelte-highlight": "^6.2.1",
+				"svelte-highlight": "^7.2.1",
 				"svelte-overlay": "^1.4.1",
 				"svelte-popperjs": "^1.3.2",
 				"svelte-preprocess": "^5.0.1",
@@ -6405,21 +6405,12 @@
 			}
 		},
 		"node_modules/svelte-highlight": {
-			"version": "6.2.1",
-			"resolved": "https://registry.npmjs.org/svelte-highlight/-/svelte-highlight-6.2.1.tgz",
-			"integrity": "sha512-nZoweg5atreJHAJPaB0nca+r6YhDzbEJQrtKDO2mR/muEzsRKxMeSF3Q8BV0Au+T2jMWGBPwlBzA/tqv9yG9UQ==",
+			"version": "7.2.1",
+			"resolved": "https://registry.npmjs.org/svelte-highlight/-/svelte-highlight-7.2.1.tgz",
+			"integrity": "sha512-Qyxd4CFbvufKo661AmtIFLFh7bW8BZ6G5vUGYdRlyhaoWEOCyCgKimdKW8/8aJ4/kKidSFbgY/2/fyzwYDEjWg==",
 			"dev": true,
 			"dependencies": {
-				"highlight.js": "11.6.0"
-			}
-		},
-		"node_modules/svelte-highlight/node_modules/highlight.js": {
-			"version": "11.6.0",
-			"resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.6.0.tgz",
-			"integrity": "sha512-ig1eqDzJaB0pqEvlPVIpSSyMaO92bH1N2rJpLMN/nX396wTpDA4Eq0uK+7I/2XG17pFaaKE0kjV/XPeGt7Evjw==",
-			"dev": true,
-			"engines": {
-				"node": ">=12.0.0"
+				"highlight.js": "11.7.0"
 			}
 		},
 		"node_modules/svelte-hmr": {
@@ -11865,20 +11856,12 @@
 			}
 		},
 		"svelte-highlight": {
-			"version": "6.2.1",
-			"resolved": "https://registry.npmjs.org/svelte-highlight/-/svelte-highlight-6.2.1.tgz",
-			"integrity": "sha512-nZoweg5atreJHAJPaB0nca+r6YhDzbEJQrtKDO2mR/muEzsRKxMeSF3Q8BV0Au+T2jMWGBPwlBzA/tqv9yG9UQ==",
+			"version": "7.2.1",
+			"resolved": "https://registry.npmjs.org/svelte-highlight/-/svelte-highlight-7.2.1.tgz",
+			"integrity": "sha512-Qyxd4CFbvufKo661AmtIFLFh7bW8BZ6G5vUGYdRlyhaoWEOCyCgKimdKW8/8aJ4/kKidSFbgY/2/fyzwYDEjWg==",
 			"dev": true,
 			"requires": {
-				"highlight.js": "11.6.0"
-			},
-			"dependencies": {
-				"highlight.js": {
-					"version": "11.6.0",
-					"resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.6.0.tgz",
-					"integrity": "sha512-ig1eqDzJaB0pqEvlPVIpSSyMaO92bH1N2rJpLMN/nX396wTpDA4Eq0uK+7I/2XG17pFaaKE0kjV/XPeGt7Evjw==",
-					"dev": true
-				}
+				"highlight.js": "11.7.0"
 			}
 		},
 		"svelte-hmr": {
diff --git a/frontend/package.json b/frontend/package.json
index 99bcf60f75..ed9b0365b7 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -51,7 +51,7 @@
 		"svelte-awesome": "^3.2.0",
 		"svelte-awesome-color-picker": "^2.4.1",
 		"svelte-check": "^3.0.2",
-		"svelte-highlight": "^6.2.1",
+		"svelte-highlight": "^7.2.1",
 		"svelte-overlay": "^1.4.1",
 		"svelte-popperjs": "^1.3.2",
 		"svelte-preprocess": "^5.0.1",
diff --git a/frontend/src/lib/components/FlowGraphViewer.svelte b/frontend/src/lib/components/FlowGraphViewer.svelte
index 7df24b606e..31879cb8cc 100644
--- a/frontend/src/lib/components/FlowGraphViewer.svelte
+++ b/frontend/src/lib/components/FlowGraphViewer.svelte
@@ -153,11 +153,7 @@
 								json={stepDetail.value.iterator.value}
 							/>{:else}
 							<span class="text-xs">
-								<Highlight
-									offsetTop={0}
-									language={typescript}
-									code={cleanExpr(stepDetail.value.iterator.expr)}
-								/>
+								<Highlight language={typescript} code={cleanExpr(stepDetail.value.iterator.expr)} />
 							</span>
 						{/if}</p
 					>
diff --git a/frontend/src/lib/components/HighlightCode.svelte b/frontend/src/lib/components/HighlightCode.svelte
index ff88547371..dd0b6ea8b8 100644
--- a/frontend/src/lib/components/HighlightCode.svelte
+++ b/frontend/src/lib/components/HighlightCode.svelte
@@ -27,7 +27,7 @@
 </script>
 
 {#if code?.length < 5000}
-	<Highlight className="nowrap {$$props.class}" language={lang} {code} />
+	<Highlight class="nowrap {$$props.class}" language={lang} {code} />
 {:else}
 	<pre class="overflow-auto max-h-screen {$$props.class}"
 		><code class="language-{language}">{code}</code></pre
diff --git a/frontend/src/lib/components/InputTransformForm.svelte b/frontend/src/lib/components/InputTransformForm.svelte
index c7fb99aef0..a04652c64a 100644
--- a/frontend/src/lib/components/InputTransformForm.svelte
+++ b/frontend/src/lib/components/InputTransformForm.svelte
@@ -166,9 +166,9 @@
 							}
 							if (arg) {
 								arg.value = undefined
+								arg.type = 'javascript'
 							}
 							propertyType = 'javascript'
-							arg.type = 'javascript'
 						} else {
 							if (staticTemplate) {
 								if (arg) {
@@ -227,7 +227,7 @@
 	</div>
 
 	<div class="max-w-xs" />
-
+	{JSON.stringify(arg)}
 	<div
 		class="relative mb-6 {$propPickerConfig?.propName == argName
 			? 'outline outline-offset-0 outline-2 outline-blue-500 rounded-md'
diff --git a/frontend/src/lib/components/InputTransformsViewer.svelte b/frontend/src/lib/components/InputTransformsViewer.svelte
index a945420ac0..3bd5e9bd9c 100644
--- a/frontend/src/lib/components/InputTransformsViewer.svelte
+++ b/frontend/src/lib/components/InputTransformsViewer.svelte
@@ -15,7 +15,7 @@
 					json={val.value}
 				/>{:else}
 				<span class="text-xs">
-					<Highlight offsetTop={0} language={typescript} code={cleanExpr(val.expr)} />
+					<Highlight language={typescript} code={cleanExpr(val.expr)} />
 				</span>
 			{/if}
 		</li>
diff --git a/frontend/src/lib/components/SimpleEditor.svelte b/frontend/src/lib/components/SimpleEditor.svelte
index 0080aad958..6098fe2e07 100644
--- a/frontend/src/lib/components/SimpleEditor.svelte
+++ b/frontend/src/lib/components/SimpleEditor.svelte
@@ -90,11 +90,13 @@
 		model = meditor.createModel(code, lang, mUri.parse(uri))
 
 		model.updateOptions(updateOptions)
+		let widgets: HTMLElement | undefined =
+			document.getElementById('monaco-widgets-root') ?? undefined
 
-		editor = meditor.create(
-			divEl as HTMLDivElement,
-			editorConfig(model, code, lang, automaticLayout, fixedOverflowWidgets)
-		)
+		editor = meditor.create(divEl as HTMLDivElement, {
+			...editorConfig(model, code, lang, automaticLayout, fixedOverflowWidgets),
+			overflowWidgetsDomNode: widgets
+		})
 
 		let timeoutModel: NodeJS.Timeout | undefined = undefined
 		editor.onDidChangeModelContent((event) => {
diff --git a/frontend/src/lib/components/TemplateEditor.svelte b/frontend/src/lib/components/TemplateEditor.svelte
index 32755384d8..f99265ee49 100644
--- a/frontend/src/lib/components/TemplateEditor.svelte
+++ b/frontend/src/lib/components/TemplateEditor.svelte
@@ -412,6 +412,8 @@
 	let extraModel
 
 	let width = 0
+	let widgets: HTMLElement | undefined = document.getElementById('monaco-widgets-root') ?? undefined
+
 	async function loadMonaco() {
 		model = meditor.createModel(code, lang, mUri.parse(uri))
 
@@ -419,6 +421,7 @@
 
 		editor = meditor.create(divEl as HTMLDivElement, {
 			...editorConfig(model, code, lang, automaticLayout, fixedOverflowWidgets),
+			overflowWidgetsDomNode: widgets,
 			lineNumbers: 'off',
 			fontSize,
 			suggestOnTriggerCharacters: true,
diff --git a/frontend/src/lib/components/flows/utils.ts b/frontend/src/lib/components/flows/utils.ts
index d8c23c04a7..5041bb0860 100644
--- a/frontend/src/lib/components/flows/utils.ts
+++ b/frontend/src/lib/components/flows/utils.ts
@@ -150,11 +150,12 @@ export function codeToStaticTemplate(code?: string): string | undefined {
 	if (!code || typeof code != 'string') return undefined
 
 	const lines = code.split('\n')
-
 	if (lines.length == 1) {
 		const line = lines[0].trim()
 		if (line[0] == '`' && line.charAt(line.length - 1) == '`') {
 			return line.slice(1, line.length - 1).replaceAll('\\`', '`')
+		} else {
+			return `\$\{${line}\}`
 		}
 	}
 	return undefined