Add syntax highlighting to live binding eval

packages/builder/package.json

@@ -70,6 +70,7 @@
     "dayjs": "^1.10.8",
     "downloadjs": "1.4.7",
     "fast-json-patch": "^3.1.1",
+    "json-format-highlight": "^1.0.4",
     "lodash": "4.17.21",
     "posthog-js": "^1.36.0",
     "remixicon": "2.5.0",

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

@@ -33,6 +33,7 @@
   } from "../CodeEditor"
   import BindingPicker from "./BindingPicker.svelte"
   import { BindingHelpers } from "./utils"
+  import formatHighlight from "json-format-highlight"
 
   const dispatch = createEventDispatcher()
 
@@ -123,6 +124,24 @@
     onSelectBinding("", { forceJS: true })
   }
 
+  const highlight = json => {
+    // Attempt to parse and then stringify, in case this is valid JSON
+    try {
+      json = JSON.stringify(JSON.parse(json), null, 2)
+    } catch (err) {
+      // Ignore
+    }
+
+    return formatHighlight(json, {
+      keyColor: "#e06c75",
+      numberColor: "#e5c07b",
+      stringColor: "#98c379",
+      trueColor: "#d19a66",
+      falseColor: "#d19a66",
+      nullColor: "#c678dd",
+    })
+  }
+
   onMount(() => {
     valid = isValid(readableToRuntimeBinding(bindings, value))
   })
@@ -192,7 +211,7 @@
               </div>
               {#if expressionResult}
                 <div class="result">
-                  {expressionResult}
+                  {@html highlight(expressionResult)}
                 </div>
               {/if}
               <div class="binding-footer">
@@ -301,7 +320,7 @@
                 </div>
                 {#if expressionResult}
                   <div class="result">
-                    {expressionResult}
+                    {@html highlight(expressionResult)}
                   </div>
                 {/if}
                 <div class="binding-footer">
@@ -524,6 +543,6 @@
     overflow-x: hidden;
     white-space: pre-wrap;
     word-wrap: break-word;
-    max-height: 92px;
+    max-height: 128px;
   }
 </style>

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

@@ -3,6 +3,7 @@
   import { convertToJS, processStringSync } from "@budibase/string-templates"
   import { Input, Layout, ActionButton, Icon, Popover } from "@budibase/bbui"
   import { handlebarsCompletions } from "constants/completions"
+  import formatHighlight from "json-format-highlight"
 
   export let addHelper
   export let addBinding
@@ -70,8 +71,20 @@
   }
 
   const getBindingValue = binding => {
-    const hbs = `{{ ${binding.runtimeBinding} }}`
+    const hbs = `{{ literal ${binding.runtimeBinding} }}`
-    return processStringSync(hbs, context)
+    const res = processStringSync(hbs, context)
+    return JSON.stringify(res, null, 2)
+  }
+
+  const highlight = json => {
+    return formatHighlight(json, {
+      keyColor: "#e06c75",
+      numberColor: "#e5c07b",
+      stringColor: "#98c379",
+      trueColor: "#d19a66",
+      falseColor: "#d19a66",
+      nullColor: "#c678dd",
+    })
   }
 </script>
 
@@ -79,7 +92,7 @@
   align="left-outside"
   bind:this={popover}
   anchor={popoverAnchor}
-  maxWidth={400}
+  maxWidth={600}
   maxHeight={300}
   dismissible={false}
 >
@@ -92,7 +105,7 @@
         </div>
       {/if}
       {#if hoverTarget.code}
-        <pre>{hoverTarget.code}</pre>
+        <pre>{@html highlight(hoverTarget.code)}</pre>
       {/if}
     </Layout>
   </div>
@@ -387,8 +400,14 @@
     padding: 0;
     margin: 0;
     font-size: 12px;
-    white-space: pre-wrap;
+    white-space: pre;
-    word-break: break-all;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+  .helper pre :global(span) {
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
+    white-space: nowrap !important;
   }
   .helper :global(p) {
     padding: 0;