fix: resolve readme copy functionality in Safari (#2554)

Author: MatteoGabriele

app/composables/useClipboardAsync.ts

@@ -0,0 +1,41 @@
+import type { ShallowRef } from 'vue'
+
+type UseClipboardAsyncReturn = {
+  copy: () => void
+  copied: ShallowRef<boolean>
+}
+
+type UseClipboardAsyncOptions = {
+  copiedDuring: number
+}
+
+export function useClipboardAsync(
+  fn: () => Promise<string>,
+  options?: UseClipboardAsyncOptions,
+): UseClipboardAsyncReturn {
+  const copied = shallowRef(false)
+  const timeout = useTimeoutFn(() => (copied.value = false), options?.copiedDuring ?? 0, {
+    immediate: false,
+  })
+
+  async function copy() {
+    const asyncClipboard = new ClipboardItem({
+      'text/plain': fn().then(text => {
+        return new Blob([text], { type: 'text/plain' })
+      }),
+    })
+
+    try {
+      await navigator.clipboard.write([asyncClipboard])
+      copied.value = true
+      timeout.start()
+    } catch {
+      copied.value = false
+    }
+  }
+
+  return {
+    copy,
+    copied,
+  }
+}

app/pages/package/[[org]]/[name].vue

@@ -96,26 +96,22 @@ const {
 )
 
 //copy README file as Markdown
-const { copied: copiedReadme, copy: copyReadme } = useClipboard({
-  source: () => '',
-  copiedDuring: 2000,
-})
+const { copied: copiedReadme, copy: copyReadme } = useClipboardAsync(
+  async () => {
+    await fetchReadmeMarkdown()
+    return readmeMarkdownData.value?.markdown ?? ''
+  },
+  {
+    copiedDuring: 2000,
+  },
+)
 
 function prefetchReadmeMarkdown() {
   if (readmeMarkdownStatus.value === 'idle') {
     fetchReadmeMarkdown()
   }
 }
 
-async function copyReadmeHandler() {
-  await fetchReadmeMarkdown()
-
-  const markdown = readmeMarkdownData.value?.markdown
-  if (!markdown) return
-
-  await copyReadme(markdown)
-}
-
 // Track active TOC item based on scroll position
 const tocItems = computed(() => readmeData.value?.toc ?? [])
 const { activeId: activeTocId } = useActiveTocItem(tocItems)
@@ -1019,7 +1015,7 @@ const showSkeleton = shallowRef(false)
                 <ButtonBase
                   @mouseenter="prefetchReadmeMarkdown"
                   @focus="prefetchReadmeMarkdown"
-                  @click="copyReadmeHandler()"
+                  @click="copyReadme"
                   :aria-pressed="copiedReadme"
                   :aria-label="
                     copiedReadme ? $t('common.copied') : $t('package.readme.copy_as_markdown')