From 9f7b84c07ad14260c1594f5253ca1998eaf1cbfa Mon Sep 17 00:00:00 2001
From: melohagan <101575380+melohagan@users.noreply.github.com>
Date: Thu, 4 Jan 2024 11:33:36 +0000
Subject: [PATCH] Focus the code editor on mount (#12628)

* Focus the code editor on mount

* Save drawer shortcut

* Revert "Save drawer shortcut"

This reverts commit 95860ea6b9be2e0edc881a9a4e2d63229a32b512.

* Autofocus prop CodeEditor

* autofocusEditor prop for JS binding
---
 .../src/components/common/CodeEditor/CodeEditor.svelte   | 7 +++++++
 .../src/components/common/bindings/BindingPanel.svelte   | 3 +++
 .../components/common/bindings/ClientBindingPanel.svelte | 2 ++
 .../_components/Component/CustomStylesSection.svelte     | 1 +
 yarn.lock                                                | 9 +++++++++
 5 files changed, 22 insertions(+)

diff --git a/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte b/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte
index 76d7a58ef1..a39634f9a3 100644
--- a/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte
+++ b/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte
@@ -53,6 +53,7 @@
   export let value = ""
   export let placeholder = null
   export let autocompleteEnabled = true
+  export let autofocus = false
 
   // Export a function to expose caret position
   export const getCaretPosition = () => {
@@ -241,6 +242,12 @@
     })
   }
 
+  $: {
+    if (autofocus && isEditorInitialised) {
+      editor.focus()
+    }
+  }
+
   $: editorHeight = typeof height === "number" ? `${height}px` : height
 
   // Init when all elements are ready
diff --git a/packages/builder/src/components/common/bindings/BindingPanel.svelte b/packages/builder/src/components/common/bindings/BindingPanel.svelte
index 4df26c5d03..548a71b483 100644
--- a/packages/builder/src/components/common/bindings/BindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPanel.svelte
@@ -45,6 +45,7 @@
   export let valid
   export let allowJS = false
   export let allowHelpers = true
+  export let autofocusEditor = false
 
   const drawerActions = getContext("drawer-actions")
   const bindingDrawerActions = getContext("binding-drawer-actions")
@@ -199,6 +200,7 @@
                   ]}
                   placeholder=""
                   height="100%"
+                  autofocus={autofocusEditor}
                 />
               </div>
               <div class="binding-footer">
@@ -301,6 +303,7 @@
                     bind:getCaretPosition
                     bind:insertAtPos
                     height="100%"
+                    autofocus={autofocusEditor}
                   />
                 </div>
                 <div class="binding-footer">
diff --git a/packages/builder/src/components/common/bindings/ClientBindingPanel.svelte b/packages/builder/src/components/common/bindings/ClientBindingPanel.svelte
index 74e14574ab..7888f2e486 100644
--- a/packages/builder/src/components/common/bindings/ClientBindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/ClientBindingPanel.svelte
@@ -6,6 +6,7 @@
   export let value = ""
   export let allowJS = false
   export let allowHelpers = true
+  export let autofocusEditor = false
 
   $: enrichedBindings = enrichBindings(bindings)
 
@@ -27,5 +28,6 @@
   {value}
   {allowJS}
   {allowHelpers}
+  {autofocusEditor}
   on:change
 />
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/CustomStylesSection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/CustomStylesSection.svelte
index 1c7eddc476..59c1b5c620 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/CustomStylesSection.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/CustomStylesSection.svelte
@@ -64,6 +64,7 @@
       on:change={event => (tempValue = event.detail)}
       allowJS
       {bindings}
+      autofocusEditor={true}
     />
   </Drawer>
 {/key}
diff --git a/yarn.lock b/yarn.lock
index cab0bd2a21..091dc04baa 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2019,6 +2019,15 @@
     "@babel/parser" "^7.22.15"
     "@babel/types" "^7.22.15"
 
+"@babel/template@^7.22.5", "@babel/template@^7.3.3":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.22.5.tgz#0c8c4d944509875849bd0344ff0050756eefc6ec"
+  integrity sha512-X7yV7eiwAxdj9k94NEylvbVHLiVG1nvzCV2EAowhxLTwODV1jl9UzZ48leOC0sH7OnuHrIkllaBgneUykIcZaw==
+  dependencies:
+    "@babel/code-frame" "^7.22.5"
+    "@babel/parser" "^7.22.5"
+    "@babel/types" "^7.22.5"
+
 "@babel/traverse@^7.22.5":
   version "7.23.6"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.23.6.tgz#b53526a2367a0dd6edc423637f3d2d0f2521abc5"