From 5737e23dd6b7e5463a00316e7c6d7e8a8adaf8f3 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 29 Jul 2022 12:10:53 +0100
Subject: [PATCH] Add keybindings to component context menu. Add duplicate
 keybinding. Simplify pasting

---
 packages/bbui/src/Menu/Item.svelte            | 13 +++++
 .../navigation/ComponentDropdownMenu.svelte   | 52 +++++++++++--------
 .../navigation/ComponentListPanel.svelte      |  4 ++
 .../components/preview/KeyboardManager.svelte |  6 +++
 4 files changed, 54 insertions(+), 21 deletions(-)

diff --git a/packages/bbui/src/Menu/Item.svelte b/packages/bbui/src/Menu/Item.svelte
index a5609683a..138eb33b3 100644
--- a/packages/bbui/src/Menu/Item.svelte
+++ b/packages/bbui/src/Menu/Item.svelte
@@ -8,6 +8,7 @@
   export let icon = undefined
   export let disabled = undefined
   export let noClose = false
+  export let keyBind = undefined
 
   const onClick = () => {
     if (actionMenu && !noClose) {
@@ -36,10 +37,22 @@
     </svg>
   {/if}
   <span class="spectrum-Menu-itemLabel"><slot /></span>
+  {#if keyBind}
+    <div class="keyBind">
+      {keyBind}
+    </div>
+  {/if}
 </li>
 
 <style>
   .spectrum-Menu-itemIcon {
     align-self: center;
   }
+  .keyBind {
+    margin-left: var(--spacing-xl);
+    color: var(--spectrum-global-color-gray-600);
+    text-transform: uppercase;
+    font-size: 12px;
+    font-weight: 600;
+  }
 </style>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentDropdownMenu.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentDropdownMenu.svelte
index ed66c66c2..d2e35b836 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentDropdownMenu.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentDropdownMenu.svelte
@@ -64,44 +64,54 @@
     <div slot="control" class="icon">
       <Icon size="S" hoverable name="MoreSmallList" />
     </div>
-    <MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>
+    <MenuItem icon="Delete" keyBind="Del" on:click={confirmDeleteDialog.show}>
       Delete
     </MenuItem>
-    <MenuItem noClose icon="ChevronUp" on:click={moveUpComponent}>
+    <MenuItem
+      noClose
+      icon="ChevronUp"
+      keyBind="Ctrl+↑"
+      on:click={moveUpComponent}
+    >
       Move up
     </MenuItem>
-    <MenuItem noClose icon="ChevronDown" on:click={moveDownComponent}>
+    <MenuItem
+      noClose
+      icon="ChevronDown"
+      keyBind="Ctrl+↓"
+      on:click={moveDownComponent}
+    >
       Move down
     </MenuItem>
-    <MenuItem noClose icon="Duplicate" on:click={duplicateComponent}>
+    <MenuItem
+      noClose
+      icon="Duplicate"
+      keyBind="Ctrl+D"
+      on:click={duplicateComponent}
+    >
       Duplicate
     </MenuItem>
-    <MenuItem icon="Cut" on:click={() => storeComponentForCopy(true)}>
-      Cut
-    </MenuItem>
-    <MenuItem icon="Copy" on:click={() => storeComponentForCopy(false)}>
-      Copy
-    </MenuItem>
     <MenuItem
-      icon="LayersBringToFront"
-      on:click={() => pasteComponent("above")}
-      disabled={noPaste}
+      icon="Cut"
+      keyBind="Ctrl+X"
+      on:click={() => storeComponentForCopy(true)}
     >
-      Paste above
+      Cut
     </MenuItem>
     <MenuItem
-      icon="LayersSendToBack"
-      on:click={() => pasteComponent("below")}
-      disabled={noPaste}
+      icon="Copy"
+      keyBind="Ctrl+C"
+      on:click={() => storeComponentForCopy(false)}
     >
-      Paste below
+      Copy
     </MenuItem>
     <MenuItem
-      icon="ShowOneLayer"
+      icon="LayersSendToBack"
+      keyBind="Ctrl+V"
       on:click={() => pasteComponent("inside")}
-      disabled={noPaste || noChildrenAllowed}
+      disabled={noPaste}
     >
-      Paste inside
+      Paste
     </MenuItem>
   </ActionMenu>
   <ConfirmDialog
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentListPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentListPanel.svelte
index b8ce27572..c8926c325 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentListPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentListPanel.svelte
@@ -105,6 +105,10 @@
         } else if (e.key === "v") {
           e.preventDefault()
           await store.actions.components.paste(component, "inside")
+        } else if (e.key === "d") {
+          e.preventDefault()
+          await store.actions.components.copy(component)
+          await store.actions.components.paste(component, "below")
         } else if (e.key === "Enter") {
           e.preventDefault()
           $goto("./new")
diff --git a/packages/client/src/components/preview/KeyboardManager.svelte b/packages/client/src/components/preview/KeyboardManager.svelte
index 737187470..1eedb0fde 100644
--- a/packages/client/src/components/preview/KeyboardManager.svelte
+++ b/packages/client/src/components/preview/KeyboardManager.svelte
@@ -24,6 +24,12 @@
     if (["input", "textarea"].indexOf(activeTag) !== -1) {
       return
     }
+
+    // Need to manually block certain keys from propagating to the browser
+    if (e.ctrlKey && e.key === "d") {
+      e.preventDefault()
+    }
+
     builderStore.actions.keyDown(e.key, e.ctrlKey)
   }
 </script>