Focus the code editor on mount (#12628)

* Focus the code editor on mount

* Save drawer shortcut

* Revert "Save drawer shortcut"

This reverts commit 95860ea6b9.

* Autofocus prop CodeEditor

* autofocusEditor prop for JS binding

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

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">

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
 />

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}

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"