[full-ci] Bugfix: Paste action (keyboard) not working in project spac…

…es (#7514) * Extend keyboard actions focus * Add global paste shortcut * Add changelog, linting, snapshots * Make ctrl+c, +v, +x global * Linting * Refactor function names * Update snapshot * Bind files-view instead of files * Update snapshots
owncloud · Aug 26, 2022 · edb83bf · edb83bf
1 parent f254f78
commit edb83bf
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 12 deletions.
diff --git a/changelog/unreleased/bugfix-keyboard-not-working-spaces b/changelog/unreleased/bugfix-keyboard-not-working-spaces
@@ -0,0 +1,6 @@
+Bugfix: Paste action (keyboard) not working in project spaces
+
+We've fixed a bug which caused the user to be unable to paste in project spaces.
+
+https://github.com/owncloud/web/issues/7510
+https://github.com/owncloud/web/pull/7514
diff --git a/packages/web-app-files/src/components/FilesList/KeyboardActions.vue b/packages/web-app-files/src/components/FilesList/KeyboardActions.vue
@@ -16,10 +16,10 @@ export default defineComponent({
       type: Array,
       required: true
     },
-    keybindOnElementId: {
-      type: String,
+    keybindOnElementIds: {
+      type: Array,
       required: false,
-      default: 'files-view'
+      default: () => ['files-view', 'web-nav-sidebar']
     }
   },
   setup() {
@@ -40,10 +40,14 @@ export default defineComponent({
   },
 
   mounted() {
-    const filesList = document.getElementById(this.keybindOnElementId)
-    if (filesList) {
-      filesList.addEventListener('keydown', this.handleShortcut, false)
+    for (const elementId of this.keybindOnElementIds) {
+      const element = document.getElementById(elementId)
+      if (element) {
+        element.addEventListener('keydown', this.handleSelectionShortcuts, false)
+      }
     }
+    document.addEventListener('keydown', this.handleClipboardShortcuts)
+
     const fileListClickedEvent = bus.subscribe('app.files.list.clicked', this.resetSelectionCursor)
     const fileListClickedMetaEvent = bus.subscribe(
       'app.files.list.clicked.meta',
@@ -58,7 +62,13 @@ export default defineComponent({
       bus.unsubscribe('app.files.list.clicked', fileListClickedEvent)
       bus.unsubscribe('app.files.list.clicked.meta', fileListClickedMetaEvent)
       bus.unsubscribe('app.files.list.clicked.shift', fileListClickedShiftEvent)
-      filesList.removeEventListener('keydown', this.handleShortcut)
+      for (const elementId of this.keybindOnElementIds) {
+        const element = document.getElementById(elementId)
+        if (element) {
+          element.removeEventListener('keydown', this.handleSelectionShortcuts)
+        }
+      }
+      document.removeEventListener('keydown', this.handleClipboardShortcuts)
     })
   },
 
@@ -78,20 +88,23 @@ export default defineComponent({
       addFileSelection: 'ADD_FILE_SELECTION'
     }),
 
-    handleShortcut(event) {
+    handleSelectionShortcuts(event) {
       const key = event.keyCode || event.which
       const ctrl = window.navigator.platform.match('Mac') ? event.metaKey : event.ctrlKey
       const shift = event.shiftKey
 
-      this.handleFileActionsShortcuts(key, ctrl)
       this.handleFileSelectionShortcuts(key, shift, ctrl, event)
     },
 
-    handleFileActionsShortcuts(key, ctrl) {
+    handleClipboardShortcuts(event) {
+      const key = event.keyCode || event.which
+      const ctrl = window.navigator.platform.match('Mac') ? event.metaKey : event.ctrlKey
       const isCopyAction = key === 67
       const isPasteAction = key === 86
       const isCutAction = key === 88
+      const isTextSelected = window.getSelection().type === 'Range'
 
+      if (isTextSelected) return
       if (isCopyAction && ctrl) return this.copySelectedFiles()
       if (isPasteAction && ctrl) return this.handlePasteAction()
       if (isCutAction && ctrl) return this.cutSelectedFiles()

diff --git a/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Project.spec.js.snap b/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Project.spec.js.snap
@@ -2,7 +2,7 @@
 
 exports[`Spaces project view space image should show if given 1`] = `
 <div class="space-overview oc-flex">
-  <keyboard-actions-stub paginatedresources="" keybindonelementid="files-view"></keyboard-actions-stub>
+  <keyboard-actions-stub paginatedresources="" keybindonelementids="files-view,web-nav-sidebar"></keyboard-actions-stub>
   <files-view-wrapper-stub>
     <app-bar-stub breadcrumbs="" breadcrumbscontextactionsitems="[object Object]" hasbulkactions="true" hassidebartoggle="true" hasviewoptions="true" showactionsonselection="true"></app-bar-stub>
     <div>
@@ -41,7 +41,7 @@ exports[`Spaces project view space image should show if given 1`] = `
 
 exports[`Spaces project view space readme should show if given 1`] = `
 <div class="space-overview oc-flex">
-  <keyboard-actions-stub paginatedresources="" keybindonelementid="files-view"></keyboard-actions-stub>
+  <keyboard-actions-stub paginatedresources="" keybindonelementids="files-view,web-nav-sidebar"></keyboard-actions-stub>
   <files-view-wrapper-stub>
     <app-bar-stub breadcrumbs="" breadcrumbscontextactionsitems="[object Object]" hasbulkactions="true" hassidebartoggle="true" hasviewoptions="true" showactionsonselection="true"></app-bar-stub>
     <div>