Do not use nested iframes in VSCode custom editor (#197)

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();