Change how context is passed through to binding drawers to ensure it's always available

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>

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()
-                  e.stopPropagation()
+                  }
                 }}
                 on:mouseleave={() => {
                   popover.hide()

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}

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}

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()
 

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}

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}