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   | 54 +++++++++++--------
 .../navigation/ComponentListPanel.svelte      |  4 ++
 .../components/preview/KeyboardManager.svelte |  6 +++
 4 files changed, 55 insertions(+), 22 deletions(-)

diff --git a/packages/bbui/src/Menu/Item.svelte b/packages/bbui/src/Menu/Item.svelte
index a5609683a8..138eb33b35 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 ed66c66c29..d2e35b8364 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)}>
+    <MenuItem
+      icon="Cut"
+      keyBind="Ctrl+X"
+      on:click={() => storeComponentForCopy(true)}
+    >
       Cut
     </MenuItem>
-    <MenuItem icon="Copy" on:click={() => storeComponentForCopy(false)}>
+    <MenuItem
+      icon="Copy"
+      keyBind="Ctrl+C"
+      on:click={() => storeComponentForCopy(false)}
+    >
       Copy
     </MenuItem>
-    <MenuItem
-      icon="LayersBringToFront"
-      on:click={() => pasteComponent("above")}
-      disabled={noPaste}
-    >
-      Paste above
-    </MenuItem>
     <MenuItem
       icon="LayersSendToBack"
-      on:click={() => pasteComponent("below")}
+      keyBind="Ctrl+V"
+      on:click={() => pasteComponent("inside")}
       disabled={noPaste}
     >
-      Paste below
-    </MenuItem>
-    <MenuItem
-      icon="ShowOneLayer"
-      on:click={() => pasteComponent("inside")}
-      disabled={noPaste || noChildrenAllowed}
-    >
-      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 b8ce275722..c8926c325c 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 7371874705..1eedb0fde7 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>