From 0a67d3fb87c7270b6bbf6cd065e4ccc5a7db9dcc Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Mon, 3 Oct 2022 03:54:18 +0200
Subject: [PATCH] fix: change command behavior for monacos

---
 frontend/src/lib/components/Editor.svelte     | 25 ++++++++-----------
 .../src/lib/components/FlowBuilder.svelte     | 10 ++++++++
 .../src/lib/components/SimpleEditor.svelte    | 24 ++++++++----------
 .../components/flows/content/FlowLoop.svelte  |  1 +
 .../flows/header/FlowEditorHeader.svelte      | 18 -------------
 5 files changed, 32 insertions(+), 46 deletions(-)

diff --git a/frontend/src/lib/components/Editor.svelte b/frontend/src/lib/components/Editor.svelte
index cbba40edc0..1274aa6961 100644
--- a/frontend/src/lib/components/Editor.svelte
+++ b/frontend/src/lib/components/Editor.svelte
@@ -364,20 +364,6 @@
 			editorConfig(model, code, lang, automaticLayout)
 		)
 
-		if (shouldBindKey) {
-			editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, function () {
-				code = getCode()
-				format()
-			})
-
-			editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter, function () {
-				if (cmdEnterAction) {
-					code = getCode()
-					cmdEnterAction()
-				}
-			})
-		}
-
 		let timeoutModel: NodeJS.Timeout | undefined = undefined
 		editor.onDidChangeModelContent((event) => {
 			timeoutModel && clearTimeout(timeoutModel)
@@ -389,6 +375,17 @@
 
 		editor.onDidFocusEditorText(() => {
 			dispatch('focus')
+
+			editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, function () {
+				code = getCode()
+				shouldBindKey && format && format()
+			})
+
+			editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter, function () {
+				code = getCode()
+				shouldBindKey && cmdEnterAction && cmdEnterAction()
+			})
+
 			if (
 				!websocketAlive.black &&
 				!websocketAlive.deno &&
diff --git a/frontend/src/lib/components/FlowBuilder.svelte b/frontend/src/lib/components/FlowBuilder.svelte
index 865911206b..41edc7697c 100644
--- a/frontend/src/lib/components/FlowBuilder.svelte
+++ b/frontend/src/lib/components/FlowBuilder.svelte
@@ -158,6 +158,16 @@
 <div class="flex flex-col flex-1 h-full">
 	<!-- Nav between steps-->
 	<div class="justify-between flex flex-row w-full my-2 px-4 space-x-4 h-10">
+		<div id="flow_title" class="flex justify-between items-center">
+			<button class="flex flex-row items-center w-full h-full" on:click={() => select('settings')}>
+				<span class="font-mono text-sm"> {$flowStore.path}</span>
+				<Icon
+					data={faPen}
+					scale={0.8}
+					class="text-gray-500 ml-2 flex justify-center items-center mb-0.5"
+				/>
+			</button>
+		</div>
 		<div class="shrink h-full">
 			<button
 				class="flex flex-row items-center w-full h-full"
diff --git a/frontend/src/lib/components/SimpleEditor.svelte b/frontend/src/lib/components/SimpleEditor.svelte
index bb32362a34..dcac237d70 100644
--- a/frontend/src/lib/components/SimpleEditor.svelte
+++ b/frontend/src/lib/components/SimpleEditor.svelte
@@ -38,7 +38,7 @@
 	export let automaticLayout = true
 	export let extraLib: string = ''
 	export let extraLibPath: string = ''
-	export let shouldBindKey: boolean = false
+	export let shouldBindKey: boolean = true
 
 	const dispatch = createEventDispatcher()
 
@@ -105,19 +105,6 @@
 			editorConfig(model, code, lang, automaticLayout)
 		)
 
-		if (shouldBindKey) {
-			editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, function () {
-				format()
-			})
-
-			editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter, function () {
-				if (cmdEnterAction) {
-					code = getCode()
-					cmdEnterAction()
-				}
-			})
-		}
-
 		let timeoutModel: NodeJS.Timeout | undefined = undefined
 		editor.onDidChangeModelContent((event) => {
 			timeoutModel && clearTimeout(timeoutModel)
@@ -128,6 +115,15 @@
 		})
 
 		editor.onDidFocusEditorText(() => {
+			editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, function () {
+				code = getCode()
+				shouldBindKey && format && format()
+			})
+
+			editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter, function () {
+				code = getCode()
+				shouldBindKey && cmdEnterAction && cmdEnterAction()
+			})
 			dispatch('focus')
 		})
 
diff --git a/frontend/src/lib/components/flows/content/FlowLoop.svelte b/frontend/src/lib/components/flows/content/FlowLoop.svelte
index 2246bc5e01..afcd5cf2b3 100644
--- a/frontend/src/lib/components/flows/content/FlowLoop.svelte
+++ b/frontend/src/lib/components/flows/content/FlowLoop.svelte
@@ -48,6 +48,7 @@
 							lang="javascript"
 							bind:code={$flowStore.value.modules[index].value.iterator.expr}
 							class="small-editor"
+							shouldBindKey={false}
 						/>
 					</PropPickerWrapper>
 				</div>
diff --git a/frontend/src/lib/components/flows/header/FlowEditorHeader.svelte b/frontend/src/lib/components/flows/header/FlowEditorHeader.svelte
index 8c71cf6175..25499aad08 100644
--- a/frontend/src/lib/components/flows/header/FlowEditorHeader.svelte
+++ b/frontend/src/lib/components/flows/header/FlowEditorHeader.svelte
@@ -1,27 +1,9 @@
 <script lang="ts">
-	import { flowStore } from '$lib/components/flows/flowStore'
-	import { faPen } from '@fortawesome/free-solid-svg-icons'
-	import Icon from 'svelte-awesome'
 	import FlowPreviewButtons from './FlowPreviewButtons.svelte'
 	import FlowStatus from './FlowStatus.svelte'
-
-	import { getContext } from 'svelte'
-	import type { FlowEditorContext } from '../types'
-
-	const { select } = getContext<FlowEditorContext>('FlowEditorContext')
 </script>
 
 <div class="flex justify-between items-center border-y p-2 px-4 space-x-2">
-	<div id="flow_title" class="flex justify-between items-center">
-		<button on:click={() => select('settings')}>
-			<span class="font-mono text-sm"> {$flowStore.path}</span>
-			<Icon
-				data={faPen}
-				scale={0.8}
-				class="text-gray-500 ml-2 flex justify-center items-center mb-0.5"
-			/>
-		</button>
-	</div>
 	<FlowStatus />
 	<FlowPreviewButtons />
 </div>