From 461418390d6a72bbb012d88d85543c6b7d18979b Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 16 Feb 2024 12:36:03 +0000
Subject: [PATCH] Change how context is passed through to binding drawers to
 ensure it's always available

---
 .../common/bindings/BindingPanel.svelte       | 20 +++++++++----------
 .../common/bindings/BindingPicker.svelte      | 17 ++++++++--------
 .../common/bindings/ClientBindingPanel.svelte |  4 ++--
 .../bindings/DrawerBindableInput.svelte       |  2 --
 .../ButtonConfiguration.svelte                |  1 +
 .../settings/controls/PropertyControl.svelte  |  2 --
 .../Component/ComponentSettingsSection.svelte |  2 --
 7 files changed, 20 insertions(+), 28 deletions(-)

diff --git a/packages/builder/src/components/common/bindings/BindingPanel.svelte b/packages/builder/src/components/common/bindings/BindingPanel.svelte
index cb564593a0..d7b0e6e65c 100644
--- a/packages/builder/src/components/common/bindings/BindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPanel.svelte
@@ -135,13 +135,10 @@
         selected={mode}
         on:select={onChangeMode}
         beforeSwitch={selectedMode => {
-          if (selectedMode == mode) {
+          if (selectedMode === mode) {
             return true
           }
-
-          //Get the current mode value
           const editorValue = usingJS ? decodeJSBinding(jsValue) : hbsValue
-
           if (editorValue) {
             targetMode = selectedMode
             return false
@@ -204,9 +201,9 @@
                     <div class="syntax-error">
                       Current Handlebars syntax is invalid, please check the
                       guide
-                      <a href="https://handlebarsjs.com/guide/" target="_blank"
-                        >here</a
-                      >
+                      <a href="https://handlebarsjs.com/guide/" target="_blank">
+                        here
+                      </a>
                       for more details.
                     </div>
                   {:else}
@@ -523,9 +520,10 @@
     border-radius: var(--border-radius-s);
     font-family: monospace;
     border: 1px solid var(--spectrum-global-color-gray-300);
-    max-height: 200px;
-    overflow: auto;
-    white-space: pre;
-    word-wrap: anywhere;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    max-height: 92px;
   }
 </style>
diff --git a/packages/builder/src/components/common/bindings/BindingPicker.svelte b/packages/builder/src/components/common/bindings/BindingPicker.svelte
index 8ae236a7ab..cb990b277a 100644
--- a/packages/builder/src/components/common/bindings/BindingPicker.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPicker.svelte
@@ -10,7 +10,6 @@
   export let mode
   export let allowHelpers
   export let context = null
-  export let noPaddingTop = false
 
   let search = ""
   let popover
@@ -70,6 +69,8 @@
     return names
   }
 
+  $: console.log(context)
+
   const getBindingValue = binding => {
     const hbs = `{{ ${binding.runtimeBinding} }}`
     return processStringSync(hbs, context)
@@ -165,15 +166,13 @@
                 class="binding"
                 on:mouseenter={e => {
                   let val = getBindingValue(binding)
-                  if (val === "") {
-                    val = " "
+                  if (val !== "") {
+                    popoverAnchor = e.target
+                    hoverTarget = {
+                      code: val,
+                    }
+                    popover.show()
                   }
-                  popoverAnchor = e.target
-                  hoverTarget = {
-                    code: val,
-                  }
-                  popover.show()
-                  e.stopPropagation()
                 }}
                 on:mouseleave={() => {
                   popover.hide()
diff --git a/packages/builder/src/components/common/bindings/ClientBindingPanel.svelte b/packages/builder/src/components/common/bindings/ClientBindingPanel.svelte
index 4bf05190db..39d8aaf2f5 100644
--- a/packages/builder/src/components/common/bindings/ClientBindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/ClientBindingPanel.svelte
@@ -1,12 +1,12 @@
 <script>
   import BindingPanel from "./BindingPanel.svelte"
+  import { previewStore } from "stores/builder"
 
   export let bindings = []
   export let valid
   export let value = ""
   export let allowJS = false
   export let allowHelpers = true
-  export let context = null
   export let autofocusEditor = false
 
   $: enrichedBindings = enrichBindings(bindings)
@@ -26,7 +26,7 @@
 <BindingPanel
   bind:valid
   bindings={enrichedBindings}
-  {context}
+  context={$previewStore.selectedComponentContext}
   {value}
   {allowJS}
   {allowHelpers}
diff --git a/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte b/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
index e0c1942cb4..11b7901e84 100644
--- a/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
+++ b/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
@@ -24,7 +24,6 @@
   export let drawerLeft
   export let key
   export let disableBindings = false
-  export let context = null
 
   const dispatch = createEventDispatcher()
 
@@ -106,7 +105,6 @@
     bind:valid
     value={readableValue}
     on:change={event => (tempValue = event.detail)}
-    {context}
     {bindings}
     {allowJS}
     {allowHelpers}
diff --git a/packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonConfiguration.svelte b/packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonConfiguration.svelte
index 186392bd90..feddc3cdc0 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonConfiguration.svelte
+++ b/packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonConfiguration.svelte
@@ -14,6 +14,7 @@
   export let key
   export let nested
   export let max
+  export let context
 
   const dispatch = createEventDispatcher()
 
diff --git a/packages/builder/src/components/design/settings/controls/PropertyControl.svelte b/packages/builder/src/components/design/settings/controls/PropertyControl.svelte
index 2ecf3b6f96..94c9d22f54 100644
--- a/packages/builder/src/components/design/settings/controls/PropertyControl.svelte
+++ b/packages/builder/src/components/design/settings/controls/PropertyControl.svelte
@@ -24,7 +24,6 @@
   export let propertyFocus = false
   export let info = null
   export let disableBindings = false
-  export let context = null
   export let wide
 
   $: nullishValue = value == null || value === ""
@@ -99,7 +98,6 @@
       onChange={handleChange}
       bindings={allBindings}
       name={key}
-      {context}
       {nested}
       {key}
       {type}
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte
index c7fe7b6b33..1e01ec1840 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte
@@ -27,7 +27,6 @@
     tag,
     includeHidden
   )
-  $: context = $previewStore.selectedComponentContext
 
   const getSections = (instance, definition, isScreen, tag, includeHidden) => {
     const settings = definition?.settings ?? []
@@ -199,7 +198,6 @@
                 min: setting.min ?? null,
                 max: setting.max ?? null,
               }}
-              {context}
               {bindings}
               {componentBindings}
               {componentInstance}