Simplify clipboard handling

packages/dashboard/src/components/editor/Editor.tsx

@@ -15,7 +15,6 @@ import { DocumentTitleEdit } from "../DocumentTitleEdit";
 import { toastController } from "@uimix/foundation/src/components/toast/Toast";
 import { LoadingErrorOverlay } from "./LoadingErrorOverlay";
 import { assertNonNull } from "../../utils/assertNonNull";
-import { DefaultClipboardHandler } from "@uimix/editor/src/state/DefaultClipboardHandler";
 
 class Connection extends TypedEmitter<{
   readyToShow(): void;
@@ -73,12 +72,6 @@ class Connection extends TypedEmitter<{
             thumbnail: url,
           });
         },
-        getClipboard: async (type) => {
-          return await new DefaultClipboardHandler().get(type);
-        },
-        setClipboard: async (type, text) => {
-          await new DefaultClipboardHandler().set(type, text);
-        },
         getCodeAssets: async () => {
           return undefined;
         },

packages/dashboard/src/components/editor/LocalEditor.tsx

@@ -11,7 +11,6 @@ import { ProjectData } from "@uimix/model/src/collaborative";
 import { LoadingErrorOverlay } from "./LoadingErrorOverlay";
 import { DocumentMetadata, getDesktopAPI } from "../../types/DesktopAPI";
 import { assertNonNull } from "../../utils/assertNonNull";
-import { DefaultClipboardHandler } from "@uimix/editor/src/state/DefaultClipboardHandler";
 
 // TODO: test
 
@@ -49,13 +48,6 @@ class Connection extends TypedEmitter<{
           // TODO: set thumbnail for file
         },
 
-        getClipboard: async (type) => {
-          return await new DefaultClipboardHandler().get(type);
-        },
-        setClipboard: async (type, text) => {
-          await new DefaultClipboardHandler().set(type, text);
-        },
-
         getCodeAssets: async () => {
           // TODO
           return undefined;

packages/editor/src/state/Clipboard.ts

@@ -1,11 +1,53 @@
 import * as Data from "@uimix/model/src/data/v1";
 import { projectState } from "./ProjectState";
-import { DefaultClipboardHandler } from "./DefaultClipboardHandler";
-import { ClipboardHandler } from "../types/ClipboardHandler";
 import isSvg from "is-svg";
 
 // const mimeType = "application/x-macaron-nodes";
 
+interface ClipboardHandler {
+  get(type: "text" | "image"): Promise<string | undefined>;
+  set(type: "text" | "image", textOrDataURL: string): Promise<void>;
+}
+
+class DefaultClipboardHandler {
+  async get(type: "text" | "image") {
+    switch (type) {
+      case "text":
+        return await navigator.clipboard.readText();
+      case "image": {
+        const items = await navigator.clipboard.read();
+        const item = items.find((item) => item.types.includes(`image/png`));
+        if (!item) {
+          return;
+        }
+        const blob = await item.getType(`image/png`);
+
+        return await new Promise<string>((resolve, reject) => {
+          const reader = new FileReader();
+          reader.onload = () => resolve(reader.result as string);
+          reader.onerror = reject;
+          reader.readAsDataURL(blob);
+        });
+      }
+    }
+  }
+
+  async set(type: "text" | "image", textOrDataURL: string) {
+    switch (type) {
+      case "text":
+        await navigator.clipboard.writeText(textOrDataURL);
+      case "image": {
+        const blob = await fetch(textOrDataURL).then((r) => r.blob());
+        await navigator.clipboard.write([
+          new ClipboardItem({
+            "image/png": blob,
+          }),
+        ]);
+      }
+    }
+  }
+}
+
 export class Clipboard {
   static handler: ClipboardHandler = new DefaultClipboardHandler();
 

packages/editor/src/state/IFrameDataConnector.ts

@@ -9,7 +9,6 @@ import {
 } from "../types/IFrameRPC";
 import { throttle } from "lodash-es";
 import { ThumbnailTakerHost } from "./ThumbnailTakerHost";
-import { Clipboard } from "./Clipboard";
 import { viewOptions } from "./ViewOptions";
 
 export function vscodeParentTarget(): Target {
@@ -77,15 +76,6 @@ export class IFrameDataConnector {
 
     void this.rpc.remote.ready();
 
-    // Clipboard.handler = {
-    //   get: async (type) => {
-    //     return this.rpc.remote.getClipboard(type);
-    //   },
-    //   set: async (type, text) => {
-    //     void this.rpc.remote.setClipboard(type, text);
-    //   },
-    // };
-
     void this.rpc.remote.getCodeAssets().then((assets) => {
       if (assets) {
         this.state.project.localCodeAssets = assets;

packages/editor/src/types/IFrameRPC.ts

@@ -16,7 +16,4 @@ export interface IEditorToRootRPCHandler {
   ): Promise<string>;
   updateThumbnail(pngData: Uint8Array): Promise<void>;
   getCodeAssets(): Promise<CodeAssets | undefined>;
-
-  setClipboard(type: "text" | "image", textOrDataURL: string): Promise<void>;
-  getClipboard(type: "text" | "image"): Promise<string | undefined>;
 }

packages/vscode/src/EditorSession.ts

@@ -109,12 +109,6 @@ export class EditorSession {
         updateThumbnail: async () => {
           // no op
         },
-        getClipboard: async () => {
-          throw new Error("should be intercepted in webview.");
-        },
-        setClipboard: async () => {
-          throw new Error("should be intercepted in webview.");
-        },
         getCodeAssets: async () => this.loadCodeAssets(),
       }
     );