From e77a105bb250f35c401b0447eae504fb6967dee4 Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Tue, 18 Jul 2023 16:46:35 +0100
Subject: [PATCH] General fixes for bindings and the undo/redo behaviour

---
 packages/bbui/src/Drawer/Drawer.svelte               |  1 +
 .../components/common/CodeEditor/CodeEditor.svelte   |  3 ++-
 .../src/components/common/UndoRedoControl.svelte     | 12 ++++++++++--
 .../components/common/bindings/BindingPanel.svelte   |  4 ++--
 packages/builder/src/helpers/helpers.js              | 12 ++++++++++++
 packages/builder/src/helpers/index.js                |  1 +
 .../navigation/ComponentKeyHandler.svelte            |  9 ++-------
 packages/string-templates/src/index.cjs              |  3 ++-
 packages/string-templates/src/index.js               |  2 ++
 packages/string-templates/src/index.mjs              |  1 +
 10 files changed, 35 insertions(+), 13 deletions(-)

diff --git a/packages/bbui/src/Drawer/Drawer.svelte b/packages/bbui/src/Drawer/Drawer.svelte
index 782c3c6ed2..4ff4df854b 100644
--- a/packages/bbui/src/Drawer/Drawer.svelte
+++ b/packages/bbui/src/Drawer/Drawer.svelte
@@ -30,6 +30,7 @@
   setContext("drawer-actions", {
     hide,
     show,
+    headless,
   })
 
   const easeInOutQuad = x => {
diff --git a/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte b/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte
index 2ce93e42c8..406885aeb4 100644
--- a/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte
+++ b/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",
diff --git a/packages/builder/src/components/common/UndoRedoControl.svelte b/packages/builder/src/components/common/UndoRedoControl.svelte
index 321350e32a..84144b77ee 100644
--- a/packages/builder/src/components/common/UndoRedoControl.svelte
+++ b/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()
     }
   }
diff --git a/packages/builder/src/components/common/bindings/BindingPanel.svelte b/packages/builder/src/components/common/bindings/BindingPanel.svelte
index beb205fa81..3855ec7daa 100644
--- a/packages/builder/src/components/common/bindings/BindingPanel.svelte
+++ b/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}
diff --git a/packages/builder/src/helpers/helpers.js b/packages/builder/src/helpers/helpers.js
index 72c034d9a6..bf5cdc003b 100644
--- a/packages/builder/src/helpers/helpers.js
+++ b/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
+}
diff --git a/packages/builder/src/helpers/index.js b/packages/builder/src/helpers/index.js
index 2b272998c1..687723e361 100644
--- a/packages/builder/src/helpers/index.js
+++ b/packages/builder/src/helpers/index.js
@@ -7,4 +7,5 @@ export {
   get_name,
   get_capitalised_name,
   lowercase,
+  isBuilderInputFocused,
 } from "./helpers"
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentKeyHandler.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentKeyHandler.svelte
index e1b85b6f3f..4813757727 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentKeyHandler.svelte
+++ b/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()
-    const inCodeEditor =
-      document.activeElement?.classList?.contains("cm-content")
-    if (
-      (inCodeEditor || ["input", "textarea"].indexOf(activeTag) !== -1) &&
-      e.key !== "Escape"
-    ) {
+    if (isBuilderInputFocused(e)) {
       return
     }
     // Key events are always for the selected component
diff --git a/packages/string-templates/src/index.cjs b/packages/string-templates/src/index.cjs
index 12fd86b6cb..1cf3c8d0c6 100644
--- a/packages/string-templates/src/index.cjs
+++ b/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)
   })
diff --git a/packages/string-templates/src/index.js b/packages/string-templates/src/index.js
index 26f44369b0..4844bf5fb6 100644
--- a/packages/string-templates/src/index.js
+++ b/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
diff --git a/packages/string-templates/src/index.mjs b/packages/string-templates/src/index.mjs
index 58b0c9dde4..ae640624b2 100644
--- a/packages/string-templates/src/index.mjs
+++ b/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) {
   /**