feat(clipboard): paste images and text from the system clipboard

Replace the internal single-node clipboard with real clipboard paste:
the prompt composer uploads pasted image files as references, and the
canvas pastes clipboard images as nodes and clipboard text as text
nodes anchored at the pointer, reading from the async clipboard API on
the context-menu paste action.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

frontend/src/ui/pages/CanvasWorkspace/index.tsx

@@ -600,7 +600,6 @@ export function CanvasWorkspace({ projectId }: { projectId: string }) {
   const [alignmentGuides, setAlignmentGuides] = useState<AlignmentGuide[]>([]);
   const [canvasFileDragging, setCanvasFileDragging] = useState(false);
   const [error, setError] = useState("");
-  const [clipboardNode, setClipboardNode] = useState<CanvasNode | null>(null);
   const [hiddenNodeIds, setHiddenNodeIds] = useState<Set<string>>(() => new Set());
   const [lockedNodeIds, setLockedNodeIds] = useState<Set<string>>(() => new Set());
   const [toolbarVisibility, setToolbarVisibility] = useState<ImageToolbarVisibility>(defaultToolbarVisibility);
@@ -1837,20 +1836,11 @@ export function CanvasWorkspace({ projectId }: { projectId: string }) {
   };
 
   const copyNode = (node: CanvasNode) => {
-    setClipboardNode(node);
     void writeCanvasNodeToSystemClipboard(node)
       .then(() => showCanvasToast(t("clipboardCopied")))
       .catch(() => showCanvasToast(t("clipboardCopyFailed"), "error"));
   };
 
-  const pasteNode = (sourceNode = clipboardNode) => {
-    if (!sourceNode) return;
-    const copy = cloneCanvasNode(sourceNode, cryptoFallbackId());
-    setNodes((current) => [...current, copy]);
-    selectOnlyNode(copy.id);
-    setDirty(true);
-  };
-
   const reorderNode = (nodeId: string, action: "forward" | "backward" | "front" | "back") => {
     setNodes((current) => reorderNodeOp(current, nodeId, action));
     setDirty(true);
@@ -2037,6 +2027,74 @@ export function CanvasWorkspace({ projectId }: { projectId: string }) {
     setDirty(true);
   };
 
+  const clipboardPasteAnchor = () => {
+    const pointer = lastCanvasPointerRef.current;
+    return pointer ? canvasPointFromClient(pointer.clientX, pointer.clientY) : canvasCenterPoint();
+  };
+
+  const pasteClipboardText = (value: string, anchor = clipboardPasteAnchor()) => {
+    const content = value.replace(/\u00a0/g, " ");
+    if (!content.trim()) return false;
+
+    const currentViewport = viewportRef.current;
+    const zoom = Math.max(currentViewport.k, 0.01);
+    const size = { width: defaultTextVisibleBox.width / zoom, height: defaultTextVisibleBox.height / zoom };
+    const node = fitTextNodeToContent({
+      id: cryptoFallbackId(),
+      type: "text",
+      title: t("newTextNode"),
+      x: anchor.x - size.width / 2,
+      y: anchor.y - size.height / 2,
+      width: size.width,
+      height: size.height,
+      content,
+      tone: "ink",
+      status: "draft",
+      layerRole: "editable-text",
+      fontFamily: "Inter",
+      fontWeight: "Regular",
+      fontSize: defaultTextVisibleFontSize / zoom,
+      color: "#000000",
+      textAlign: "left",
+      opacity: 1,
+      strokeColor: "#000000",
+      strokeWidth: 0,
+      lineHeight: 0,
+      letterSpacing: 0,
+      textDecoration: "none",
+      textTransform: "none"
+    });
+    setNodes((current) => {
+      const next = [...current, node];
+      nodesRef.current = next;
+      return next;
+    });
+    selectOnlyNode(node.id);
+    setDirty(true);
+    return true;
+  };
+
+  const pasteFromClipboardData = (dataTransfer: DataTransfer) => {
+    const anchor = clipboardPasteAnchor();
+    const imageFile = latestDataTransferImageFile(dataTransfer, "clipboard-image");
+    if (imageFile) {
+      void uploadImagesToCanvas([imageFile], anchor);
+      return true;
+    }
+    return pasteClipboardText(dataTransfer.getData("text/plain"), anchor);
+  };
+
+  const pasteFromSystemClipboard = async () => {
+    const anchor = clipboardPasteAnchor();
+    const imageFile = await latestNavigatorClipboardImageFile("clipboard-image").catch(() => null);
+    if (imageFile) {
+      await uploadImagesToCanvas([imageFile], anchor);
+      return;
+    }
+    const text = await navigator.clipboard?.readText?.().catch(() => "");
+    if (text) pasteClipboardText(text, anchor);
+  };
+
   const sendNodeToAgentComposer = (node: CanvasNode) => {
     if (isRealCanvasImageNode(node)) {
       insertCanvasImageReference(node, { focus: true });
@@ -2056,7 +2114,7 @@ export function CanvasWorkspace({ projectId }: { projectId: string }) {
       copyNode(node);
       removeNode(node.id);
     },
-    paste: pasteNode,
+    paste: () => void pasteFromSystemClipboard(),
     duplicate: () => duplicateNode(node),
     bringForward: () => reorderNode(node.id, "forward"),
     sendBackward: () => reorderNode(node.id, "backward"),
@@ -2143,33 +2201,10 @@ export function CanvasWorkspace({ projectId }: { projectId: string }) {
   useEffect(() => {
     const handlePaste = (event: ClipboardEvent) => {
       if (isEditableShortcutTarget(event.target)) return;
-
-      const imageFiles = event.clipboardData ? dataTransferImageFiles(event.clipboardData, "clipboard-image") : [];
-      const pasteImageFiles = () => {
-        const pointer = lastCanvasPointerRef.current;
-        const anchor = pointer ? canvasPointFromClient(pointer.clientX, pointer.clientY) : canvasCenterPoint();
-        void uploadImagesToCanvas(imageFiles, anchor);
-      };
-      if (clipboardNode && imageFiles.length > 0 && isTransparentClipboardNode(clipboardNode)) {
+      if (!event.clipboardData) return;
+      if (pasteFromClipboardData(event.clipboardData)) {
         event.preventDefault();
-        void shouldUseInternalClipboardNode(clipboardNode, imageFiles).then((useInternalNode) => {
-          if (useInternalNode) {
-            pasteNode(clipboardNode);
-            return;
-          }
-          pasteImageFiles();
-        });
-        return;
       }
-      if (imageFiles.length > 0) {
-        event.preventDefault();
-        pasteImageFiles();
-        return;
-      }
-
-      if (!clipboardNode) return;
-      event.preventDefault();
-      pasteNode();
     };
 
     window.addEventListener("paste", handlePaste);
@@ -3108,7 +3143,7 @@ export function CanvasWorkspace({ projectId }: { projectId: string }) {
             width: size.width,
             height: size.height,
             content: previewUrl,
-            tone: "natural",
+            tone,
             status: "uploading"
           }
         });
@@ -3322,7 +3357,7 @@ export function CanvasWorkspace({ projectId }: { projectId: string }) {
                   }}
                   selectionScale={viewport.k}
                   viewportScale={viewport.k}
-                  hasClipboard={Boolean(clipboardNode)}
+                  hasClipboard
                   contextMenuHandlers={canOperateNode && canUseNodeContextMenu(node) ? createNodeContextMenuHandlers(node) : null}
                   onPointerDown={(event) => handleNodePointerDown(event, node)}
                   onContextMenu={() => {
@@ -5025,21 +5060,6 @@ function canvasBackgroundStorageKey(projectId: string) {
   return `fluxo:canvas-background:${projectId}`;
 }
 
-function isTransparentClipboardNode(node: CanvasNode) {
-  return node.type === "image" && (node.layerRole === "background-removed" || node.tone === "transparent-image");
-}
-
-async function shouldUseInternalClipboardNode(node: CanvasNode, imageFiles: File[]) {
-  const imageFile = imageFiles[0];
-  if (!imageFile) return false;
-  try {
-    const dimensions = await readImageDimensions(imageFile);
-    return dimensions.width === Math.max(1, Math.round(node.width)) && dimensions.height === Math.max(1, Math.round(node.height));
-  } catch {
-    return false;
-  }
-}
-
 async function writeCanvasNodeToSystemClipboard(node: CanvasNode) {
   if (node.type === "text") {
     await writeClipboardText(node.content || node.title);
@@ -5132,6 +5152,23 @@ function dataTransferImageFiles(dataTransfer: DataTransfer, fallbackBaseName = "
   }, []);
 }
 
+function latestDataTransferImageFile(dataTransfer: DataTransfer, fallbackBaseName = "canvas-image") {
+  return dataTransferImageFiles(dataTransfer, fallbackBaseName).at(-1) ?? null;
+}
+
+async function latestNavigatorClipboardImageFile(fallbackBaseName = "clipboard-image") {
+  if (!navigator.clipboard?.read) return null;
+  const items = await navigator.clipboard.read();
+  for (let itemIndex = items.length - 1; itemIndex >= 0; itemIndex -= 1) {
+    const item = items[itemIndex];
+    const type = item.types.filter((itemType) => itemType.startsWith("image/")).at(-1);
+    if (!type) continue;
+    const blob = await item.getType(type);
+    return ensureImageFileName(new File([blob], "", { type: blob.type || type, lastModified: Date.now() }), `${fallbackBaseName}-${Date.now()}-${itemIndex + 1}`);
+  }
+  return null;
+}
+
 function dataTransferHasImage(dataTransfer: DataTransfer) {
   const files = dataTransferImageFiles(dataTransfer);
   if (files.length > 0) return true;

frontend/src/ui/pages/HomePage/index.tsx

@@ -734,6 +734,7 @@ export function HomePage() {
               onTextChange={setPrompt}
               onReferencesChange={syncReferenceImages}
               onReferenceRemoved={handleReferenceRemoved}
+              onPasteFile={attachImage}
               onSubmit={() => createProject()}
             />
             <div className="prompt-actions">