fix: webkit quicklinks copy for webkit (#9832)

* fix: webkit quicklinks copy for webkit

* Update packages/web-pkg/src/helpers/share/link.ts

Co-authored-by: Dominik Schmidt <[email protected]>

---------

Co-authored-by: Dominik Schmidt <[email protected]>

changelog/unreleased/bugfix-webkit-copy-quicklinks

@@ -0,0 +1,6 @@
+Bugfix: Copy quicklinks for webkit navigator
+
+Copying quicklinks didn't work on safari or other webkit based browsers and is fixed now.
+
+https://github.com/owncloud/web/pull/9832
+https://github.com/owncloud/web/issues/9166

packages/web-pkg/src/composables/actions/files/useFileActionsCreateQuicklink.ts

@@ -1,5 +1,5 @@
 import quickActions, { canShare } from '../../../quickActions'
-import { createQuicklink } from '../../../helpers/share'
+import { copyQuicklink } from '../../../helpers/share'
 import { ShareStatus } from '@ownclouders/web-client/src/helpers/share'
 
 import { isLocationSharesActive } from '../../../router'
@@ -22,7 +22,7 @@ export const useFileActionsCreateQuickLink = ({ store }: { store?: Store<any> }
 
   const handler = async ({ space, resources }: FileActionOptions) => {
     const [resource] = resources
-    await createQuicklink({
+    await copyQuicklink({
       clientService,
       resource,
       storageId: space?.id || resource?.fileId || resource?.id,

packages/web-pkg/src/helpers/share/link.ts

@@ -22,6 +22,49 @@ export interface CreateQuicklink {
   ability: Ability
 }
 
+export const copyQuicklink = async (args: CreateQuicklink) => {
+  const { store, language } = args
+  const { $gettext } = language
+
+  // doCopy creates the requested link and copies the url to the clipboard,
+  // the copy action uses the clipboard // clipboardItem api to work around the webkit limitations.
+  //
+  // https://developer.apple.com/forums/thread/691873
+  //
+  // if those apis not available (or like in firefox behind dom.events.asyncClipboard.clipboardItem)
+  // it has a fallback to the vue-use implementation.
+  //
+  // https://webkit.org/blog/10855/
+  const doCopy = async () => {
+    if (typeof ClipboardItem && navigator?.clipboard?.write) {
+      await navigator.clipboard.write([
+        new ClipboardItem({
+          'text/plain': createQuicklink(args).then(
+            (link) => new Blob([link.url], { type: 'text/plain' })
+          )
+        })
+      ])
+    } else {
+      const link = await createQuicklink(args)
+      const { copy } = useClipboard({ legacy: true })
+      await copy(link.url)
+    }
+  }
+
+  try {
+    await doCopy()
+    await store.dispatch('showMessage', {
+      title: $gettext('The link has been copied to your clipboard.')
+    })
+  } catch (e) {
+    console.error(e)
+    await store.dispatch('showErrorMessage', {
+      title: $gettext('Copy link failed'),
+      error: e
+    })
+  }
+}
+
 export const createQuicklink = async (args: CreateQuicklink): Promise<Share> => {
   const { clientService, resource, store, password, language, ability } = args
   const { $gettext } = language
@@ -68,26 +111,10 @@ export const createQuicklink = async (args: CreateQuicklink): Promise<Share> =>
 
   params.spaceRef = resource.fileId || resource.id
 
-  try {
-    const link = await store.dispatch('Files/addLink', {
-      path: resource.path,
-      client: clientService.owncloudSdk,
-      params,
-      storageId: resource.fileId || resource.id
-    })
-    const { copy } = useClipboard({ legacy: true })
-    copy(link.url)
-
-    await store.dispatch('showMessage', {
-      title: $gettext('The link has been copied to your clipboard.')
-    })
-
-    return link
-  } catch (e) {
-    console.error(e)
-    await store.dispatch('showErrorMessage', {
-      title: $gettext('Copy link failed'),
-      error: e
-    })
-  }
+  return store.dispatch('Files/addLink', {
+    path: resource.path,
+    client: clientService.owncloudSdk,
+    params,
+    storageId: resource.fileId || resource.id
+  })
 }

packages/web-pkg/src/quickActions.ts

@@ -1,4 +1,4 @@
-import { createQuicklink } from './helpers/share'
+import { copyQuicklink } from './helpers/share'
 import { eventBus } from './services/eventBus'
 import { SideBarEventTopics } from './composables/sideBar/eventTopics'
 import { Resource } from '@ownclouders/web-client'
@@ -82,7 +82,7 @@ export default {
         return showQuickLinkPasswordModal(
           { store, $gettext: language.$gettext, passwordPolicyService },
           async (password) => {
-            await createQuicklink({
+            await copyQuicklink({
               ability,
               clientService,
               language,
@@ -94,7 +94,7 @@ export default {
         )
       }
 
-      await createQuicklink({
+      await copyQuicklink({
         ability,
         clientService,
         language,

packages/web-pkg/tests/unit/helpers/share/link.spec.ts

@@ -1,4 +1,4 @@
-import { createQuicklink, CreateQuicklink } from '../../../../src/helpers/share'
+import { copyQuicklink, createQuicklink, CreateQuicklink } from '../../../../src/helpers/share'
 import { DateTime } from 'luxon'
 import { Store } from 'vuex'
 import { ClientService } from '../../../../src/services'
@@ -65,6 +65,7 @@ describe('createQuicklink', () => {
     expect(link).toBeDefined()
     expect(link.url).toBeDefined()
 
+    await copyQuicklink(args)
     expect(useClipboard).toHaveBeenCalled()
 
     expect(mockStore.dispatch).toHaveBeenCalledWith('Files/addLink', {
@@ -106,6 +107,7 @@ describe('createQuicklink', () => {
       expect(link).toBeDefined()
       expect(link.url).toBeDefined()
 
+      await copyQuicklink(args)
       expect(useClipboard).toHaveBeenCalled()
 
       expect(mockStore.dispatch).toHaveBeenCalledWith('Files/addLink', {