From 43d546b2dbbdf36b7d4653b8d36dfd58315f4361 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 11 Oct 2021 16:18:20 +0100
Subject: [PATCH] Fix inserting bindings manually when using JS

---
 .../builder/src/builderStore/dataBinding.js    |  4 ----
 .../common/bindings/BindingPanel.svelte        | 18 ++++++++++++------
 .../string-templates/src/helpers/javascript.js |  1 -
 3 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/packages/builder/src/builderStore/dataBinding.js b/packages/builder/src/builderStore/dataBinding.js
index 41f23c577..3389e20d4 100644
--- a/packages/builder/src/builderStore/dataBinding.js
+++ b/packages/builder/src/builderStore/dataBinding.js
@@ -438,10 +438,6 @@ function replaceBetween(string, start, end, replacement) {
 function bindingReplacement(bindableProperties, textWithBindings, convertTo) {
   // Decide from base64 if using JS
   const isJS = isJSBinding(textWithBindings)
-  console.log("isJS: " + isJS)
-  if (isJS) {
-    console.log(textWithBindings)
-  }
   if (isJS) {
     textWithBindings = decodeJSBinding(textWithBindings)
   }
diff --git a/packages/builder/src/components/common/bindings/BindingPanel.svelte b/packages/builder/src/components/common/bindings/BindingPanel.svelte
index e393702bf..8c57b381d 100644
--- a/packages/builder/src/components/common/bindings/BindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPanel.svelte
@@ -19,13 +19,12 @@
   export let valid
   export let allowJS = true
 
-  $: console.log(value)
-
   let helpers = handlebarsCompletions()
   let getCaretPosition
   let search = ""
-  let mode = "Handlebars"
+  let mode = value?.startsWith("{{ js ") ? "JavaScript" : "Handlebars"
 
+  $: jsValue = value?.startsWith("{{ js ")
   $: usingJS = mode === "JavaScript"
   $: valid = isValid(readableToRuntimeBinding(bindableProperties, value))
   $: dispatch("change", value)
@@ -38,13 +37,20 @@
     return helper.label.match(searchRgx) || helper.description.match(searchRgx)
   })
 
+  // Adds a HBS helper to the expression
   const addHelper = helper => {
     value = addHBSBinding(value, getCaretPosition(), helper.text)
   }
 
+  // Adds a data binding to the expression
   const addBinding = binding => {
-    const fn = usingJS ? addJSBinding : addHBSBinding
-    value = fn(value, getCaretPosition(), binding.readableBinding)
+    if (usingJS) {
+      let js = decodeJSBinding(value)
+      js = addJSBinding(js, getCaretPosition(), binding.readableBinding)
+      value = encodeJSBinding(js)
+    } else {
+      value = addHBSBinding(value, getCaretPosition(), binding.readableBinding)
+    }
   }
 </script>
 
@@ -93,7 +99,7 @@
         <div class="main-content">
           <TextArea
             bind:getCaretPosition
-            {value}
+            value={jsValue ? null : value}
             on:change={e => (value = e.detail)}
             placeholder="Add text, or click the objects on the left to add them to the textbox."
           />
diff --git a/packages/string-templates/src/helpers/javascript.js b/packages/string-templates/src/helpers/javascript.js
index 0607fcf1f..cba396621 100644
--- a/packages/string-templates/src/helpers/javascript.js
+++ b/packages/string-templates/src/helpers/javascript.js
@@ -38,7 +38,6 @@ module.exports.processJS = (handlebars, context) => {
     vm.createContext(sandboxContext)
     return vm.runInNewContext(js, sandboxContext)
   } catch (error) {
-    console.warn(error)
     return "Error while executing JS"
   }
 }