Update binding popovers to remove example bindings and therefore make consistent across the board

packages/builder/src/components/common/CodeEditor/CodeEditor.svelte

@@ -47,7 +47,6 @@
 
   export let label
   export let completions = []
-  export let resize = "none"
   export let mode = EditorModes.Handlebars
   export let value = ""
   export let placeholder = null
@@ -55,6 +54,8 @@
   export let autofocus = false
   export let jsBindingWrapping = true
 
+  const dispatch = createEventDispatcher()
+
   // Export a function to expose caret position
   export const getCaretPosition = () => {
     const selection_range = editor.state.selection.ranges[0]
@@ -106,8 +107,6 @@
     }
   )
 
-  const dispatch = createEventDispatcher()
-
   // Theming!
   let currentTheme = $themeStore?.theme
   let isDark = !currentTheme.includes("light")

packages/builder/src/components/common/CodeEditor/index.js

@@ -163,26 +163,12 @@ export const jsAutocomplete = baseCompletions => {
 }
 
 export const buildBindingInfoNode = (completion, binding) => {
+  if (!binding.valueHTML || binding.value == null) {
+    return null
+  }
   const ele = document.createElement("div")
   ele.classList.add("info-bubble")
-
-  if (binding.value != null && binding.valueHTML) {
-    ele.innerHTML = `<div class="binding__example">${binding.valueHTML}</div>`
-    return ele
-  }
-
-  const exampleNodeHtml = binding.readableBinding
-    ? `<div class="binding__example">{{ ${binding.readableBinding} }}</div>`
-    : ""
-
-  const descriptionNodeHtml = binding.description
-    ? `<div class="binding__description">${binding.description}</div>`
-    : ""
-
-  ele.innerHTML = `
-    ${exampleNodeHtml}
-    ${descriptionNodeHtml}
-  `
+  ele.innerHTML = `<div class="binding__example">${binding.valueHTML}</div>`
   return ele
 }
 

packages/builder/src/components/common/bindings/BindingPanel.svelte

@@ -108,6 +108,9 @@
 
   const enrichBindings = (bindings, context) => {
     return bindings.map(binding => {
+      if (!context) {
+        return binding
+      }
       const value = getBindingValue(binding, context)
       return {
         ...binding,
@@ -227,6 +230,7 @@
             ]}
             autofocus={autofocusEditor}
             placeholder="Add bindings by typing {{ or use the menu on the right"
+            jsBindingWrapping={false}
           />
         {:else if mode === Modes.JavaScript}
           <CodeEditor
@@ -243,6 +247,7 @@
             bind:insertAtPos
             autofocus={autofocusEditor}
             placeholder="Add bindings by typing $ or use the menu on the right"
+            jsBindingWrapping
           />
         {/if}
         {#if targetMode}
@@ -279,7 +284,7 @@
           {context}
           addHelper={onSelectHelper}
           addBinding={onSelectBinding}
-          js={editorMode === EditorModes.JS}
+          {mode}
         />
       {:else if sidePanel === SidePanels.Evaluation}
         <EvaluationSidePanel

packages/builder/src/components/common/bindings/BindingSidePanel.svelte

@@ -7,7 +7,7 @@
   export let addHelper
   export let addBinding
   export let bindings
-  export let js
+  export let mode
   export let allowHelpers
   export let context = null
 
@@ -47,7 +47,7 @@
       (!search ||
         helper.label.match(searchRgx) ||
         helper.description.match(searchRgx)) &&
-      (!js || helper.allowsJs)
+      (mode.name !== "javascript" || helper.allowsJs)
     )
   })
 
@@ -71,16 +71,14 @@
   }
 
   const showBindingPopover = (binding, target) => {
-    let code = binding.valueHTML
     if (!context || !binding.value || binding.value === "") {
-      code = null
+      return
     }
     stopHidingPopover()
     popoverAnchor = target
     hoverTarget = {
       helper: false,
-      code,
-      binding: binding.readableBinding,
+      code: binding.valueHTML,
     }
     popover.show()
   }
@@ -94,7 +92,7 @@
     hoverTarget = {
       helper: true,
       description: helper.description,
-      code: getHelperExample(helper, js),
+      code: getHelperExample(helper, mode.name === "javascript"),
     }
     popover.show()
   }
@@ -114,15 +112,6 @@
       hideTimeout = null
     }
   }
-
-  const getReadableBindingLabel = readableBinding => {
-    console.log(js)
-    if (js) {
-      return `$("${readableBinding}")`
-    } else {
-      return `{{ ${readableBinding} }}`
-    }
-  }
 </script>
 
 <Popover
@@ -137,9 +126,6 @@
   on:mouseleave={hidePopover}
 >
   <div class="binding-popover" class:helper={hoverTarget.helper}>
-    {#if hoverTarget.binding}
-      <pre class="binding">{getReadableBindingLabel(hoverTarget.binding)}</pre>
-    {/if}
     {#if hoverTarget.description}
       <div>
         <!-- eslint-disable-next-line svelte/no-at-html-tags-->
@@ -260,7 +246,7 @@
                   class="binding"
                   on:mouseenter={e => showHelperPopover(helper, e.target)}
                   on:mouseleave={hidePopover}
-                  on:click={() => addHelper(helper, js)}
+                  on:click={() => addHelper(helper, mode.name === "javascript")}
                 >
                   <span class="binding__label">{helper.displayText}</span>
                   <span class="binding__typeWrap">
@@ -418,8 +404,7 @@
     text-overflow: ellipsis;
     overflow: hidden;
   }
-  .binding-popover.helper pre,
-  .binding-popover pre.binding {
+  .binding-popover.helper pre {
     color: var(--spectrum-global-color-blue-700);
   }
   .binding-popover pre :global(span) {