fix: copy no longer working

Author: Akryum

packages/app-frontend/src/features/components/SelectedComponentPane.vue

@@ -4,7 +4,7 @@ import EmptyPane from '@front/features/layout/EmptyPane.vue'
 import RenderCode from './RenderCode.vue'
 
 import { defineComponent, ref, watch, computed } from 'vue'
-import { getComponentDisplayName, SharedData } from '@vue-devtools/shared-utils'
+import { copyToClipboard, getComponentDisplayName, SharedData } from '@vue-devtools/shared-utils'
 import { onKeyDown } from '@front/util/keyboard'
 import { useSelectedComponent } from './composable'
 
@@ -45,7 +45,7 @@ export default defineComponent({
     const showCopiedName = ref(false)
     let copiedNameTimeout
     function copyName () {
-      navigator.clipboard.writeText(displayName.value)
+      copyToClipboard(displayName.value)
       showCopiedName.value = true
       clearTimeout(copiedNameTimeout)
       copiedNameTimeout = setTimeout(() => {

packages/shared-utils/src/util.ts

@@ -741,7 +741,14 @@ export function copyToClipboard (state) {
     text = stringify(state, 'user')
   }
 
-  navigator.clipboard.writeText(text)
+  // @TODO navigator.clipboard is buggy in extensions
+  if (typeof document === 'undefined') return
+  const dummyTextArea = document.createElement('textarea')
+  dummyTextArea.textContent = text
+  document.body.appendChild(dummyTextArea)
+  dummyTextArea.select()
+  document.execCommand('copy')
+  document.body.removeChild(dummyTextArea)
 }
 
 export function isEmptyObject (obj) {