More clipboard write fixes, add utility function (#2286)

Signed-off-by: Alexander Onnikov <alexander.onnikov@xored.com>

packages/presentation/src/utils.ts

@@ -148,6 +148,20 @@ export async function getBlobURL (blob: Blob): Promise<string> {
   })
 }
 
+export async function copyTextToClipboard (text: string): Promise<void> {
+  try {
+    // Safari specific behavior
+    // see https://bugs.webkit.org/show_bug.cgi?id=222262
+    const clipboardItem = new ClipboardItem({
+      'text/plain': Promise.resolve(text)
+    })
+    await navigator.clipboard.write([clipboardItem])
+  } catch {
+    // Fallback to default clipboard API implementation
+    await navigator.clipboard.writeText(text)
+  }
+}
+
 export type AttributeCategory = 'attribute' | 'inplace' | 'collection' | 'array'
 
 export const AttributeCategoryOrder = { attribute: 0, inplace: 1, collection: 2, array: 2 }

plugins/chunter-resources/src/components/Message.svelte

@@ -21,7 +21,7 @@
   import { Ref, WithLookup, getCurrentAccount } from '@hcengineering/core'
   import { NotificationClientImpl } from '@hcengineering/notification-resources'
   import { getResource } from '@hcengineering/platform'
-  import { Avatar, getClient, MessageViewer } from '@hcengineering/presentation'
+  import { Avatar, copyTextToClipboard, getClient, MessageViewer } from '@hcengineering/presentation'
   import ui, {
     ActionIcon,
     IconMoreH,
@@ -121,7 +121,7 @@
       } else {
         location.path.length = 4
       }
-      await navigator.clipboard.writeText(`${window.location.origin}${locationToUrl(location)}`)
+      await copyTextToClipboard(`${window.location.origin}${locationToUrl(location)}`)
     }
   }
 

plugins/contact-resources/src/components/ChannelEditor.svelte

@@ -15,6 +15,7 @@
 <script lang="ts">
   import type { IntlString } from '@hcengineering/platform'
   import { translate } from '@hcengineering/platform'
+  import { copyTextToClipboard } from '@hcengineering/presentation'
   import type { PopupOptions } from '@hcengineering/ui'
   import {
     Button,
@@ -47,7 +48,7 @@
 
   const copyChannel = (): void => {
     if (label === plugin.string.CopyToClipboard) {
-      navigator.clipboard.writeText(value).then(() => (label = plugin.string.Copied))
+      copyTextToClipboard(value).then(() => (label = plugin.string.Copied))
       setTimeout(() => {
         label = plugin.string.CopyToClipboard
       }, 3000)

plugins/contact-resources/src/components/ChannelsPopup.svelte

@@ -15,6 +15,7 @@
 -->
 <script lang="ts">
   import type { IntlString, Asset } from '@hcengineering/platform'
+  import { copyTextToClipboard } from '@hcengineering/presentation'
   import { CircleButton, closeTooltip, Label } from '@hcengineering/ui'
   import IconCopy from './icons/Copy.svelte'
 
@@ -27,7 +28,7 @@
   export let value: Item
 
   const copyLink = (): void => {
-    navigator.clipboard.writeText(value.value)
+    copyTextToClipboard(value.value)
     // .then(() => {
     //   console.log('Copied!', value.value)
     // })

plugins/login-resources/package.json

@@ -35,6 +35,7 @@
     "@hcengineering/login": "~0.6.1",
     "@hcengineering/ui": "^0.6.2",
     "@hcengineering/workbench": "~0.6.1",
-    "@hcengineering/core": "^0.6.17"
+    "@hcengineering/core": "^0.6.17",
+    "@hcengineering/presentation": "~0.6.2"
   }
 }

plugins/login-resources/src/components/InviteLink.svelte

@@ -14,6 +14,7 @@
 -->
 <script lang="ts">
   import { Timestamp } from '@hcengineering/core'
+  import { copyTextToClipboard } from '@hcengineering/presentation'
   import { Button, getCurrentLocation, Label, locationToUrl, ticker } from '@hcengineering/ui'
   import { getInviteLink } from '../utils'
   import { createEventDispatcher } from 'svelte'
@@ -47,7 +48,7 @@
     }
   }
   function copy (link: string): void {
-    navigator.clipboard.writeText(link)
+    copyTextToClipboard(link)
     copied = true
     copiedTime = Date.now()
   }

plugins/recruit-resources/src/utils.ts

@@ -1,6 +1,6 @@
 import core, { Doc, Ref, TxOperations } from '@hcengineering/core'
 import { translate } from '@hcengineering/platform'
-import { getClient } from '@hcengineering/presentation'
+import { copyTextToClipboard, getClient } from '@hcengineering/presentation'
 import { Applicant, Candidate } from '@hcengineering/recruit'
 import { getPanelURI } from '@hcengineering/ui'
 import view from '@hcengineering/view'
@@ -37,5 +37,5 @@ export async function copyToClipboard (
     default:
       return
   }
-  await navigator.clipboard.writeText(text)
+  await copyTextToClipboard(text)
 }

plugins/tracker-resources/src/components/issues/edit/CopyToClipboardButton.svelte

@@ -14,6 +14,7 @@
 -->
 <script lang="ts">
   import { Asset, IntlString } from '@hcengineering/platform'
+  import { copyTextToClipboard } from '@hcengineering/presentation'
   import { Button } from '@hcengineering/ui'
 
   export let icon: Asset
@@ -25,5 +26,5 @@
   {icon}
   kind={'transparent'}
   showTooltip={{ label: title, direction: 'bottom' }}
-  on:click={() => navigator.clipboard.writeText(text)}
+  on:click={() => copyTextToClipboard(text)}
 />

plugins/tracker-resources/src/issues.ts

@@ -1,5 +1,5 @@
 import { Doc, DocumentUpdate, Ref, RelatedDocument, TxOperations } from '@hcengineering/core'
-import { getClient } from '@hcengineering/presentation'
+import { copyTextToClipboard, getClient } from '@hcengineering/presentation'
 import { Issue, Project, Sprint, Team, trackerId } from '@hcengineering/tracker'
 import { getCurrentLocation, getPanelURI, Location } from '@hcengineering/ui'
 import { workbenchId } from '@hcengineering/workbench'
@@ -48,17 +48,7 @@ export async function copyToClipboard (object: Issue, ev: Event, { type }: { typ
       return
   }
 
-  try {
-    // Chromium
-    await navigator.clipboard.writeText(text)
-  } catch {
-    // Safari specific behavior
-    // see https://bugs.webkit.org/show_bug.cgi?id=222262
-    const clipboardItem = new ClipboardItem({
-      'text/plain': Promise.resolve(text)
-    })
-    await navigator.clipboard.write([clipboardItem])
-  }
+  await copyTextToClipboard(text)
 }
 
 export function generateIssueShortLink (issueId: string): string {