General fixes for bindings and the undo/redo behaviour

packages/bbui/src/Drawer/Drawer.svelte

@@ -30,6 +30,7 @@
   setContext("drawer-actions", {
     hide,
     show,
+    headless,
   })
 
   const easeInOutQuad = x => {

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

@@ -1,6 +1,7 @@
 <script>
   import { Label } from "@budibase/bbui"
   import { onMount, createEventDispatcher } from "svelte"
+  import { FIND_ANY_HBS_REGEX } from "@budibase/string-templates"
 
   import {
     autocompletion,
@@ -78,7 +79,7 @@
 
   // For handlebars only.
   const bindStyle = new MatchDecorator({
-    regexp: /{{[."#\-\w\s\][]*}}/g,
+    regexp: FIND_ANY_HBS_REGEX,
     decoration: () => {
       return Decoration.mark({
         tag: "span",

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

@@ -1,6 +1,7 @@
 <script>
   import { Icon } from "@budibase/bbui"
   import { onMount } from "svelte"
+  import { isBuilderInputFocused } from "helpers"
 
   export let store
 
@@ -8,9 +9,16 @@
     if (!(e.ctrlKey || e.metaKey)) {
       return
     }
-    if (e.shiftKey && e.key === "Z") {
+
+    let keyLowerCase = e.key.toLowerCase()
+
+    // Ignore events when typing
+    if (isBuilderInputFocused(e)) {
+      return
+    }
+    if (e.shiftKey && keyLowerCase === "z") {
       store.redo()
-    } else if (e.key === "z") {
+    } else if (keyLowerCase === "z") {
       store.undo()
     }
   }

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

@@ -339,7 +339,7 @@
           </Tab>
         {/if}
         <div class="drawer-actions">
-          {#if drawerActions?.hide}
+          {#if typeof drawerActions.hide === "function" && drawerActions.headless}
             <Button
               secondary
               quiet
@@ -350,7 +350,7 @@
               Cancel
             </Button>
           {/if}
-          {#if bindingDrawerActions?.save}
+          {#if typeof bindingDrawerActions?.save === "function" && drawerActions.headless}
             <Button
               cta
               disabled={!valid}

packages/builder/src/helpers/helpers.js

@@ -29,3 +29,15 @@ export const lowercase = s => s.substring(0, 1).toLowerCase() + s.substring(1)
 export const get_name = s => (!s ? "" : last(s.split("/")))
 
 export const get_capitalised_name = name => pipe(name, [get_name, capitalise])
+
+export const isBuilderInputFocused = e => {
+  const activeTag = document.activeElement?.tagName.toLowerCase()
+  const inCodeEditor = document.activeElement?.classList?.contains("cm-content")
+  if (
+    (inCodeEditor || ["input", "textarea"].indexOf(activeTag) !== -1) &&
+    e.key !== "Escape"
+  ) {
+    return true
+  }
+  return false
+}

packages/builder/src/helpers/index.js

@@ -7,4 +7,5 @@ export {
   get_name,
   get_capitalised_name,
   lowercase,
+  isBuilderInputFocused,
 } from "./helpers"

packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentKeyHandler.svelte

@@ -5,6 +5,7 @@
   import { goto, isActive } from "@roxi/routify"
   import { notifications } from "@budibase/bbui"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
+  import { isBuilderInputFocused } from "helpers"
 
   let confirmDeleteDialog
   let confirmEjectDialog
@@ -100,13 +101,7 @@
       return
     }
     // Ignore events when typing
-    const activeTag = document.activeElement?.tagName.toLowerCase()
+    if (isBuilderInputFocused(e)) {
-    const inCodeEditor =
-      document.activeElement?.classList?.contains("cm-content")
-    if (
-      (inCodeEditor || ["input", "textarea"].indexOf(activeTag) !== -1) &&
-      e.key !== "Escape"
-    ) {
       return
     }
     // Key events are always for the selected component

packages/string-templates/src/index.cjs

@@ -18,6 +18,7 @@ module.exports.doesContainString = templates.doesContainString
 module.exports.disableEscaping = templates.disableEscaping
 module.exports.findHBSBlocks = templates.findHBSBlocks
 module.exports.convertToJS = templates.convertToJS
+module.exports.FIND_ANY_HBS_REGEX = templates.FIND_ANY_HBS_REGEX
 
 if (!process.env.NO_JS) {
   const { VM } = require("vm2")
@@ -28,7 +29,7 @@ if (!process.env.NO_JS) {
   setJSRunner((js, context) => {
     const vm = new VM({
       sandbox: context,
-      timeout: 1000
+      timeout: 1000,
     })
     return vm.run(js)
   })

packages/string-templates/src/index.js

@@ -389,3 +389,5 @@ module.exports.convertToJS = hbs => {
   js += "`;"
   return `${varBlock}${js}`
 }
+
+module.exports.FIND_ANY_HBS_REGEX = FIND_ANY_HBS_REGEX

packages/string-templates/src/index.mjs

@@ -20,6 +20,7 @@ export const doesContainString = templates.doesContainString
 export const disableEscaping = templates.disableEscaping
 export const findHBSBlocks = templates.findHBSBlocks
 export const convertToJS = templates.convertToJS
+export const FIND_ANY_HBS_REGEX = templates.FIND_ANY_HBS_REGEX
 
 if (process && !process.env.NO_JS) {
   /**