Support cross domain/application copy/paste (#6087)

![AnimateDiff_00001](https://github.com/user-attachments/assets/8ae88dc5-bba8-40c0-9cc2-5e81f579761d)


Browsers place very heavy restrictions on what can be copied and pasted.
See:
- https://alexharri.com/blog/clipboard
- https://www.w3.org/TR/clipboard-apis/#mandatory-data-types-x

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6087-Experimental-cross-domain-application-copy-paste-28e6d73d36508154a0a8deeb392f43a4)
by [Unito](https://www.unito.io)

src/composables/useCopy.ts

@@ -1,6 +1,12 @@
 import { useEventListener } from '@vueuse/core'
 
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+import { shouldIgnoreCopyPaste } from '@/workbench/eventHelpers'
+
+const clipboardHTMLWrapper = [
+  '<meta charset="utf-8"><div><span data-metadata="',
+  '"></span></div><span style="white-space:pre-wrap;">Text</span>'
+]
 
 /**
  * Adds a handler on copy that serializes selected nodes to JSON
@@ -9,28 +15,19 @@ export const useCopy = () => {
   const canvasStore = useCanvasStore()
 
   useEventListener(document, 'copy', (e) => {
-    if (!(e.target instanceof Element)) {
-      return
-    }
-    if (
-      (e.target instanceof HTMLTextAreaElement &&
-        e.target.type === 'textarea') ||
-      (e.target instanceof HTMLInputElement && e.target.type === 'text')
-    ) {
+    if (shouldIgnoreCopyPaste(e.target)) {
       // Default system copy
       return
     }
-    const isTargetInGraph =
-      e.target.classList.contains('litegraph') ||
-      e.target.classList.contains('graph-canvas-container') ||
-      e.target.id === 'graph-canvas'
-
     // copy nodes and clear clipboard
     const canvas = canvasStore.canvas
-    if (isTargetInGraph && canvas?.selectedItems) {
-      canvas.copyToClipboard()
+    if (canvas?.selectedItems) {
+      const serializedData = canvas.copyToClipboard()
       // clearData doesn't remove images from clipboard
-      e.clipboardData?.setData('text', ' ')
+      e.clipboardData?.setData(
+        'text/html',
+        clipboardHTMLWrapper.join(btoa(serializedData))
+      )
       e.preventDefault()
       e.stopImmediatePropagation()
       return false

src/composables/usePaste.ts

@@ -7,6 +7,22 @@ import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { app } from '@/scripts/app'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import { isAudioNode, isImageNode, isVideoNode } from '@/utils/litegraphUtil'
+import { shouldIgnoreCopyPaste } from '@/workbench/eventHelpers'
+
+function pasteClipboardItems(data: DataTransfer): boolean {
+  const rawData = data.getData('text/html')
+  const match = rawData.match(/data-metadata="([A-Za-z0-9+/=]+)"/)?.[1]
+  if (!match) return false
+  try {
+    useCanvasStore()
+      .getCanvas()
+      ._deserializeItems(JSON.parse(atob(match)), {})
+    return true
+  } catch (err) {
+    console.error(err)
+  }
+  return false
+}
 
 /**
  * Adds a handler on paste that extracts and loads images or workflows from pasted JSON data
@@ -38,15 +54,10 @@ export const usePaste = () => {
   }
 
   useEventListener(document, 'paste', async (e) => {
-    const isTargetInGraph =
-      e.target instanceof Element &&
-      (e.target.classList.contains('litegraph') ||
-        e.target.classList.contains('graph-canvas-container') ||
-        e.target.id === 'graph-canvas')
-
-    // If the target is not in the graph, we don't want to handle the paste event
-    if (!isTargetInGraph) return
-
+    if (shouldIgnoreCopyPaste(e.target)) {
+      // Default system copy
+      return
+    }
     // ctrl+shift+v is used to paste nodes with connections
     // this is handled by litegraph
     if (workspaceStore.shiftDown) return
@@ -109,6 +120,7 @@ export const usePaste = () => {
         return
       }
     }
+    if (pasteClipboardItems(data)) return
 
     // No image found. Look for node data
     data = data.getData('text/plain')