Move keyboard handling into client library so that component deletion via keyboard can reference client app state

packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte

@@ -107,14 +107,12 @@
 
     // Add listener for events sent by client library in preview
     iframe.contentWindow.addEventListener("bb-event", handleBudibaseEvent)
-    iframe.contentWindow.addEventListener("keydown", handleKeydownEvent)
   })
 
   // Remove all iframe event listeners on component destroy
   onDestroy(() => {
     if (iframe.contentWindow) {
       iframe.contentWindow.removeEventListener("bb-event", handleBudibaseEvent)
-      iframe.contentWindow.removeEventListener("keydown", handleKeydownEvent)
     }
   })
 
@@ -155,18 +153,6 @@
     }
   }
 
-  const handleKeydownEvent = event => {
-    if (
-      (event.key === "Delete" || event.key === "Backspace") &&
-      selectedComponentId &&
-      ["input", "textarea"].indexOf(
-        iframe.contentWindow.document.activeElement?.tagName.toLowerCase()
-      ) === -1
-    ) {
-      confirmDeleteComponent(selectedComponentId)
-    }
-  }
-
   const confirmDeleteComponent = componentId => {
     idToDelete = componentId
     confirmDeleteDialog.show()

packages/client/src/components/ClientApp.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { writable } from "svelte/store"
+  import { writable, get } from "svelte/store"
   import { setContext, onMount } from "svelte"
   import { Layout, Heading, Body } from "@budibase/bbui"
   import Component from "./Component.svelte"
@@ -25,6 +25,7 @@
   import CustomThemeWrapper from "./CustomThemeWrapper.svelte"
   import DNDHandler from "components/preview/DNDHandler.svelte"
   import ErrorSVG from "builder/assets/error.svg"
+  import KeyboardManager from "components/preview/KeyboardManager.svelte"
 
   // Provide contexts
   setContext("sdk", SDK)
@@ -39,7 +40,7 @@
     await initialise()
     await authStore.actions.fetchUser()
     dataLoaded = true
-    if ($builderStore.inBuilder) {
+    if (get(builderStore).inBuilder) {
       builderStore.actions.notifyLoaded()
     } else {
       builderStore.actions.pingEndUser()
@@ -143,6 +144,7 @@
       </UserBindingsProvider>
     {/if}
   </div>
+  <KeyboardManager />
 {/if}
 
 <style>

packages/client/src/components/preview/KeyboardManager.svelte

@@ -0,0 +1,35 @@
+<script>
+  import { onMount, onDestroy } from "svelte"
+  import { get } from "svelte/store"
+  import { builderStore } from "stores"
+
+  onMount(() => {
+    if (get(builderStore).inBuilder) {
+      document.addEventListener("keydown", onKeyDown)
+    }
+  })
+
+  onDestroy(() => {
+    if (get(builderStore).inBuilder) {
+      document.removeEventListener("keydown", onKeyDown)
+    }
+  })
+
+  const onKeyDown = e => {
+    if (e.key === "Delete" || e.key === "Backspace") {
+      deleteSelectedComponent()
+    }
+  }
+
+  const deleteSelectedComponent = () => {
+    const state = get(builderStore)
+    if (!state.inBuilder || !state.selectedComponentId || state.editMode) {
+      return
+    }
+    const activeTag = document.activeElement?.tagName.toLowerCase()
+    if (["input", "textarea"].indexOf(activeTag) !== -1) {
+      return
+    }
+    builderStore.actions.deleteComponent(state.selectedComponentId)
+  }
+</script>