Fix bug determining if a binding is JS or not

packages/builder/src/builderStore/dataBinding.js

@@ -438,6 +438,10 @@ 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)
   }

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

@@ -2,7 +2,11 @@
   import groupBy from "lodash/fp/groupBy"
   import { Search, TextArea, DrawerContent, Tabs, Tab } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
-  import { isValid } from "@budibase/string-templates"
+  import {
+    isValid,
+    decodeJSBinding,
+    encodeJSBinding,
+  } from "@budibase/string-templates"
   import { readableToRuntimeBinding } from "builderStore/dataBinding"
   import { handlebarsCompletions } from "constants/completions"
   import { addHBSBinding, addJSBinding } from "./utils"
@@ -15,6 +19,8 @@
   export let valid
   export let allowJS = true
 
+  $: console.log(value)
+
   let helpers = handlebarsCompletions()
   let getCaretPosition
   let search = ""
@@ -82,7 +88,7 @@
     </div>
   </svelte:fragment>
   <div class="main">
-    <Tabs selected="Handlebars" on:select={e => (mode = e.detail)}>
+    <Tabs selected={mode} on:select={e => (mode = e.detail)}>
       <Tab title="Handlebars">
         <div class="main-content">
           <TextArea
@@ -106,8 +112,8 @@
             <CodeMirrorEditor
               bind:getCaretPosition
               height={200}
-              {value}
-              on:change={e => (value = e.detail)}
+              value={decodeJSBinding(value)}
+              on:change={e => (value = encodeJSBinding(e.detail))}
               hints={context?.map(x => `$("${x.readableBinding}")`)}
             />
           </div>

packages/string-templates/src/helpers/javascript.js

@@ -58,6 +58,12 @@ module.exports.decodeJSBinding = handlebars => {
   if (!handlebars || typeof handlebars !== "string") {
     return null
   }
+
+  // JS is only valid if it is the only HBS expression
+  if (!handlebars.trim().startsWith("{{ js ")) {
+    return null
+  }
+
   const match = handlebars.match(CAPTURE_JS)
   if (!match || match.length < 2) {
     return null