From bdcda34f26f8273f69a6195d8e3f7cb3f083f395 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 13 Feb 2025 12:42:16 +0000
Subject: [PATCH 1/2] Pull out new code editor field and drawer bindable slot
 into single component to ensure they are kept in sync

---
 .../SetupPanel/AutomationBlockSetup.svelte    | 53 +++------------
 .../common/bindings/BindingPanel.svelte       |  6 +-
 .../common/bindings/CodeEditorField.svelte    |  4 +-
 .../DrawerBindableCodeEditorField.svelte      | 68 +++++++++++++++++++
 .../common/bindings/DrawerBindableSlot.svelte |  3 +-
 5 files changed, 83 insertions(+), 51 deletions(-)
 create mode 100644 packages/builder/src/components/common/bindings/DrawerBindableCodeEditorField.svelte

diff --git a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
index 5e6fdeb47f..207275497e 100644
--- a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
@@ -64,6 +64,7 @@
   import { utils } from "@budibase/shared-core"
   import { encodeJSBinding } from "@budibase/string-templates"
   import CodeEditorField from "@/components/common/bindings/CodeEditorField.svelte"
+  import DrawerBindableCodeEditorField from "@/components/common/bindings/DrawerBindableCodeEditorField.svelte"
 
   export let automation
   export let block
@@ -910,32 +911,17 @@
               />
             {:else if value.customType === "code" && stepId === ActionStepID.EXECUTE_SCRIPT_V2}
               <div class="scriptv2-wrapper">
-                <DrawerBindableSlot
-                  title={"Edit Code"}
-                  panel={AutomationBindingPanel}
-                  type={"longform"}
-                  {schema}
-                  on:change={e => onChange({ [key]: e.detail })}
-                  value={inputData[key]}
+                <DrawerBindableCodeEditorField
                   {bindings}
-                  allowJS={true}
-                  allowHBS={false}
-                  updateOnChange={false}
+                  {schema}
+                  panel={AutomationBindingPanel}
+                  on:change={e => {
+                    console.log("new val", e.detail)
+                    onChange({ [key]: e.detail })
+                  }}
                   context={$memoContext}
-                >
-                  <div class="field-wrap code-editor">
-                    <CodeEditorField
-                      value={inputData[key]}
-                      {bindings}
-                      context={$memoContext}
-                      allowHBS={false}
-                      allowJS
-                      placeholder={"Add bindings by typing $"}
-                      on:blur={e =>
-                        onChange({ [key]: encodeJSBinding(e.detail) })}
-                    />
-                  </div>
-                </DrawerBindableSlot>
+                  value={inputData[key]}
+                />
               </div>
             {:else if value.customType === "code" && stepId === ActionStepID.EXECUTE_SCRIPT}
               <!-- DEPRECATED -->
@@ -1088,23 +1074,4 @@
     flex: 3;
     margin-top: calc((var(--spacing-xl) * -1) + 1px);
   }
-
-  .field-wrap :global(.cm-editor),
-  .field-wrap :global(.cm-scroller) {
-    border-radius: 4px;
-  }
-  .field-wrap {
-    box-sizing: border-box;
-    border: 1px solid var(--spectrum-global-color-gray-400);
-    border-radius: 4px;
-  }
-  .field-wrap.code-editor {
-    height: 180px;
-  }
-  .scriptv2-wrapper :global(.icon.slot-icon) {
-    top: 1px;
-    border-bottom-left-radius: var(--spectrum-alias-border-radius-regular);
-    border-right: 0px;
-    border-bottom: 1px solid var(--spectrum-alias-border-color);
-  }
 </style>
diff --git a/packages/builder/src/components/common/bindings/BindingPanel.svelte b/packages/builder/src/components/common/bindings/BindingPanel.svelte
index 84bd1edb40..be1318b8af 100644
--- a/packages/builder/src/components/common/bindings/BindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPanel.svelte
@@ -61,6 +61,8 @@
   let mode: BindingMode | null
   let sidePanel: SidePanel | null
   let initialValueJS = value?.startsWith?.("{{ js ")
+  let jsValue = initialValueJS ? value : null
+  let hbsValue = initialValueJS ? null : value
   let getCaretPosition: CaretPositionFn | undefined
   let insertAtPos: InsertAtPositionFn | undefined
   let targetMode: BindingMode | null = null
@@ -69,10 +71,6 @@
   let expressionError: string | undefined
   let evaluating = false
 
-  // Ensure these values are not stale
-  $: jsValue = initialValueJS ? value : null
-  $: hbsValue = initialValueJS ? null : value
-
   $: useSnippets = allowSnippets && !$licensing.isFreePlan
   $: editorModeOptions = getModeOptions(allowHBS, allowJS)
   $: sidePanelOptions = getSidePanelOptions(
diff --git a/packages/builder/src/components/common/bindings/CodeEditorField.svelte b/packages/builder/src/components/common/bindings/CodeEditorField.svelte
index ea70c7f0ab..35d1cbc39e 100644
--- a/packages/builder/src/components/common/bindings/CodeEditorField.svelte
+++ b/packages/builder/src/components/common/bindings/CodeEditorField.svelte
@@ -36,6 +36,7 @@
   export let context = null
   export let autofocusEditor = false
   export let placeholder = null
+  export let height = 180
 
   let getCaretPosition: CaretPositionFn | undefined
   let insertAtPos: InsertAtPositionFn | undefined
@@ -131,7 +132,7 @@
   }
 </script>
 
-<div class="code-panel">
+<div class="code-panel" style="height:{height}px;">
   <div class="editor">
     {#key jsCompletions}
       <CodeEditor
@@ -154,7 +155,6 @@
 
 <style>
   .code-panel {
-    height: 100%;
     display: flex;
   }
 
diff --git a/packages/builder/src/components/common/bindings/DrawerBindableCodeEditorField.svelte b/packages/builder/src/components/common/bindings/DrawerBindableCodeEditorField.svelte
new file mode 100644
index 0000000000..82f566ad92
--- /dev/null
+++ b/packages/builder/src/components/common/bindings/DrawerBindableCodeEditorField.svelte
@@ -0,0 +1,68 @@
+<script>
+  import { createEventDispatcher } from "svelte"
+  import {
+    ClientBindingPanel,
+    DrawerBindableSlot,
+  } from "@/components/common/bindings"
+  import CodeEditorField from "@/components/common/bindings/CodeEditorField.svelte"
+
+  export let value = ""
+  export let panel = ClientBindingPanel
+  export let schema = null
+  export let bindings = []
+  export let context = {}
+  export let height = 180
+
+  const dispatch = createEventDispatcher()
+</script>
+
+<div class="wrapper">
+  <DrawerBindableSlot
+    {panel}
+    {schema}
+    {value}
+    {bindings}
+    {context}
+    title="Edit Code"
+    type="longform"
+    allowJS={true}
+    allowHBS={false}
+    updateOnChange={false}
+    on:change={e => {
+      value = e.detail
+      dispatch("change", value)
+    }}
+  >
+    <div class="code-editor-wrapper">
+      <CodeEditorField
+        {value}
+        {bindings}
+        {context}
+        {height}
+        allowHBS={false}
+        allowJS
+        placeholder={"Add bindings by typing $"}
+        on:change={e => (value = e.detail)}
+        on:blur={() => dispatch("change", value)}
+      />
+    </div>
+  </DrawerBindableSlot>
+</div>
+
+<style>
+  .wrapper :global(.icon.slot-icon) {
+    top: 1px;
+    border-radius: 0 4px 0 4px;
+    border-right: 0;
+    border-bottom: 1px solid var(--spectrum-alias-border-color);
+  }
+  .wrapper :global(.cm-editor),
+  .wrapper :global(.cm-scroller) {
+    border-radius: 4px;
+  }
+  .code-editor-wrapper {
+    box-sizing: border-box;
+    border: 1px solid var(--spectrum-global-color-gray-400);
+    border-radius: 4px;
+  }
+</style>
diff --git a/packages/builder/src/components/common/bindings/DrawerBindableSlot.svelte b/packages/builder/src/components/common/bindings/DrawerBindableSlot.svelte
index 8c10239b49..617b6aa590 100644
--- a/packages/builder/src/components/common/bindings/DrawerBindableSlot.svelte
+++ b/packages/builder/src/components/common/bindings/DrawerBindableSlot.svelte
@@ -22,7 +22,6 @@
   export let updateOnChange = true
   export let type
   export let schema
-
   export let allowHBS = true
   export let context = {}
 
@@ -174,7 +173,7 @@
   {:else}
     <slot />
   {/if}
-  {#if !disabled && type !== "formula" && !disabled && !attachmentTypes.includes(type)}
+  {#if !disabled && type !== "formula" && !attachmentTypes.includes(type)}
     <div
       class={`icon ${getIconClass(value, type)}`}
       on:click={() => {

From 75a0dede6a6376e205d5f4a1489459c0cd7d0ce6 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 13 Feb 2025 13:14:42 +0000
Subject: [PATCH 2/2] Lint

---
 .../automation/SetupPanel/AutomationBlockSetup.svelte      | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
index 207275497e..778f324564 100644
--- a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
@@ -62,8 +62,6 @@
   } from "@budibase/types"
   import PropField from "./PropField.svelte"
   import { utils } from "@budibase/shared-core"
-  import { encodeJSBinding } from "@budibase/string-templates"
-  import CodeEditorField from "@/components/common/bindings/CodeEditorField.svelte"
   import DrawerBindableCodeEditorField from "@/components/common/bindings/DrawerBindableCodeEditorField.svelte"
 
   export let automation
@@ -915,10 +913,7 @@
                   {bindings}
                   {schema}
                   panel={AutomationBindingPanel}
-                  on:change={e => {
-                    console.log("new val", e.detail)
-                    onChange({ [key]: e.detail })
-                  }}
+                  on:change={e => onChange({ [key]: e.detail })}
                   context={$memoContext}
                   value={inputData[key]}
                 />