From 1497f3f680fc9419a654208a776d4039c026959e Mon Sep 17 00:00:00 2001
From: Maurits Lourens <maurits.lourens@gmail.com>
Date: Mon, 26 Jul 2021 23:48:59 +0200
Subject: [PATCH] delete component using the keyboard

---
 .../design/AppPreview/CurrentItemPreview.svelte    | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte b/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte
index 607061013d..a6d186817c 100644
--- a/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte
+++ b/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte
@@ -103,8 +103,7 @@
       } else if (type === "update-prop") {
         store.actions.components.updateProp(data.prop, data.value)
       } else if (type === "delete-component" && data.id) {
-        idToDelete = data.id
-        confirmDeleteDialog.show()
+        confirmDeleteComponent(data.id)
       } else if (type === "preview-loaded") {
         // Wait for this event to show the client library if intelligent
         // loading is supported
@@ -113,8 +112,19 @@
         console.warning(`Client sent unknown event type: ${type}`)
       }
     })
+
+    iframe.contentWindow.addEventListener("keydown", event => {
+      if ((event.key === "Delete" || event.key === "Backspace") && selectedComponentId) {
+        confirmDeleteComponent(selectedComponentId);
+      }
+    })
   })
 
+  const confirmDeleteComponent = (componentId) => {
+    idToDelete = componentId
+    confirmDeleteDialog.show()
+  }
+
   const deleteComponent = () => {
     store.actions.components.delete({ _id: idToDelete })
     idToDelete = null