fix encoding of embed data & compress (#2240)

src/tests/export.test.tsx

@@ -0,0 +1,155 @@
+import React from "react";
+import { render, waitFor } from "./test-utils";
+import App from "../components/App";
+import { API } from "./helpers/api";
+import {
+  encodePngMetadata,
+  encodeSvgMetadata,
+  decodeSvgMetadata,
+} from "../data/image";
+import { serializeAsJSON } from "../data/json";
+
+import fs from "fs";
+import util from "util";
+import path from "path";
+
+const readFile = util.promisify(fs.readFile);
+
+const { h } = window;
+
+const testElements = [
+  {
+    ...API.createElement({
+      type: "text",
+      id: "A",
+      text: "😀",
+    }),
+    // can't get jsdom text measurement to work so this is a temp hack
+    //  to ensure the element isn't stripped as invisible
+    width: 16,
+    height: 16,
+  },
+];
+
+// tiny polyfill for TextDecoder.decode on which we depend
+Object.defineProperty(window, "TextDecoder", {
+  value: class TextDecoder {
+    decode(ab: ArrayBuffer) {
+      return new Uint8Array(ab).reduce(
+        (acc, c) => acc + String.fromCharCode(c),
+        "",
+      );
+    }
+  },
+});
+
+describe("appState", () => {
+  beforeEach(() => {
+    render(<App />);
+  });
+
+  it("export embedded png and reimport", async () => {
+    const pngBlob = new Blob(
+      [await readFile(path.resolve(__dirname, "./fixtures/smiley.png"))],
+      { type: "image/png" },
+    );
+
+    const pngBlobEmbedded = await encodePngMetadata({
+      blob: pngBlob,
+      metadata: serializeAsJSON(testElements, h.state),
+    });
+    API.dropFile(pngBlobEmbedded);
+
+    await waitFor(() => {
+      expect(h.elements).toEqual([
+        expect.objectContaining({ type: "text", text: "😀" }),
+      ]);
+    });
+  });
+
+  it("test encoding/decoding scene for SVG export", async () => {
+    const encoded = await encodeSvgMetadata({
+      text: serializeAsJSON(testElements, h.state),
+    });
+    const decoded = JSON.parse(await decodeSvgMetadata({ svg: encoded }));
+    expect(decoded.elements).toEqual([
+      expect.objectContaining({ type: "text", text: "😀" }),
+    ]);
+  });
+
+  it("import embedded png (legacy v1)", async () => {
+    const pngBlob = new Blob(
+      [
+        await readFile(
+          path.resolve(__dirname, "./fixtures/test_embedded_v1.png"),
+        ),
+      ],
+      { type: "image/png" },
+    );
+
+    API.dropFile(pngBlob);
+
+    await waitFor(() => {
+      expect(h.elements).toEqual([
+        expect.objectContaining({ type: "text", text: "test" }),
+      ]);
+    });
+  });
+
+  it("import embedded png (v2)", async () => {
+    const pngBlob = new Blob(
+      [
+        await readFile(
+          path.resolve(__dirname, "./fixtures/smiley_embedded_v2.png"),
+        ),
+      ],
+      { type: "image/png" },
+    );
+
+    API.dropFile(pngBlob);
+
+    await waitFor(() => {
+      expect(h.elements).toEqual([
+        expect.objectContaining({ type: "text", text: "😀" }),
+      ]);
+    });
+  });
+
+  it("import embedded svg (legacy v1)", async () => {
+    const svgBlob = new Blob(
+      [
+        await readFile(
+          path.resolve(__dirname, "./fixtures/test_embedded_v1.svg"),
+        ),
+      ],
+      { type: "image/svg+xml" },
+    );
+
+    API.dropFile(svgBlob);
+
+    await waitFor(() => {
+      expect(h.elements).toEqual([
+        expect.objectContaining({ type: "text", text: "test" }),
+      ]);
+    });
+  });
+
+  it("import embedded svg (v2)", async () => {
+    const svgBlob = new Blob(
+      [
+        await readFile(
+          path.resolve(__dirname, "./fixtures/smiley_embedded_v2.svg"),
+        ),
+      ],
+      { type: "image/svg+xml" },
+    );
+
+    API.dropFile(svgBlob);
+
+    await waitFor(() => {
+      expect(h.elements).toEqual([
+        expect.objectContaining({ type: "text", text: "😀" }),
+      ]);
+    });
+  });
+});

src/tests/fixtures/smiley_embedded_v2.svg

@@ -0,0 +1,16 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 77">
+  <!-- svg-source:excalidraw -->
+  <!-- payload-type:application/vnd.excalidraw+json --><!-- payload-version:2 --><!-- payload-start -->eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nGVSy07jMFx1MDAxNN3zXHUwMDE1kdmOIE1IXztcdTAwMWVcdTAwMDNiw6ZcdTAwMTKjXHUwMDExXHUwMDFhjUxym1hcdTAwMTjbsm9pU4TEZ8xufpFPwNcpcVqyiHTPfVx1MDAxZJ9zX4+ShGFrgM1cdTAwMTNcdTAwMDabkktRWb5mP1xif1x1MDAwMeuEVj6VhdjplS1DZYNo5qenUvuGRjuc52madk0g4Vx1MDAxOVx1MDAxNDpf9uDjJHlccn+fXHUwMDExXHUwMDE1tS4up2Urr2/M9lwivV1v26vf8Pc+tIaiLy5cYlx1MDAxYozoxkPT6biPW1x1MDAxZufF5KTokbWosCE0XHUwMDE2NSDqXHUwMDA2PVZMeoyrWtL8tEdcdTAwMWNa/Vx1MDAwNJdaakt7j8tZxjNcdTAwMWVXP/LyqbZ6paq+XHUwMDA2LVfOcOufXHUwMDE565ZCylx1MDAwNbay04eXzcpcdTAwMDI72PJrR3J0gPd9Tnv9Y5dfWzdcbpzb69GGl1x1MDAwMkmCUVx1MDAxYd9BXHUwMDFjzW1cdTAwMTV0/3M4v+HW7OYwR8GAXHUwMDE5XHUwMDAw+ZJl6WSSj2dxzcD9/Fx1MDAxMLzTKlx1MDAxY0IxK/JiXHUwMDFj08Jdef8xTFxccukgykhcbv7sbqNjqVZSRtvJbk/u4/+/94GmWuFCbGHfV0Kv+bOQ7Z4sNOJcXIqaXHUwMDE4M1x0y4E3njVcbn+qfVx1MDAxYbVcdTAwMTk67EBcbkVbzkZcdTAwMDF88/+gIePGLJAj5bo7Zi9cdTAwMDLWXHUwMDE332/ieFx1MDAxOb7dVO+GqHbM6Z1HNPPtXHUwMDEz+I3nwSJ9<!-- payload-end -->
+  <defs>
+    <style>
+      @font-face {
+        font-family: "Virgil";
+        src: url("https://excalidraw.com/FG_Virgil.woff2");
+      }
+      @font-face {
+        font-family: "Cascadia";
+        src: url("https://excalidraw.com/Cascadia.woff2");
+      }
+    </style>
+  </defs>
+  <rect x="0" y="0" width="56" height="77" fill="#ffffff"></rect><g transform="translate(10 10) rotate(0 18 28.5)"><text x="0" y="41" font-family="Virgil, Segoe UI Emoji" font-size="36px" fill="#c92a2a" text-anchor="start" style="white-space: pre;" direction="ltr">😀</text></g></svg>

src/tests/fixtures/test_embedded_v1.svg

@@ -0,0 +1,16 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 97 77">
+  <!-- svg-source:excalidraw -->
+  <!-- payload-type:application/vnd.excalidraw+json --><!-- payload-start -->ewogICJ0eXBlIjogImV4Y2FsaWRyYXciLAogICJ2ZXJzaW9uIjogMiwKICAic291cmNlIjogImh0dHBzOi8vZXhjYWxpZHJhdy5jb20iLAogICJlbGVtZW50cyI6IFsKICAgIHsKICAgICAgImlkIjogInRabVFwa0cyQlZ2SzNxT01icHVXeiIsCiAgICAgICJ0eXBlIjogInRleHQiLAogICAgICAieCI6IDg2MS4xMTExMTExMTExMTExLAogICAgICAieSI6IDM1Ni4zMzMzMzMzMzMzMzMzLAogICAgICAid2lkdGgiOiA3NywKICAgICAgImhlaWdodCI6IDU3LAogICAgICAiYW5nbGUiOiAwLAogICAgICAic3Ryb2tlQ29sb3IiOiAiIzAwMDAwMCIsCiAgICAgICJiYWNrZ3JvdW5kQ29sb3IiOiAiIzg2OGU5NiIsCiAgICAgICJmaWxsU3R5bGUiOiAiY3Jvc3MtaGF0Y2giLAogICAgICAic3Ryb2tlV2lkdGgiOiAyLAogICAgICAic3Ryb2tlU3R5bGUiOiAic29saWQiLAogICAgICAicm91Z2huZXNzIjogMSwKICAgICAgIm9wYWNpdHkiOiAxMDAsCiAgICAgICJncm91cElkcyI6IFtdLAogICAgICAic3Ryb2tlU2hhcnBuZXNzIjogInJvdW5kIiwKICAgICAgInNlZWQiOiA0NzYzNjM3OTMsCiAgICAgICJ2ZXJzaW9uIjogMjMsCiAgICAgICJ2ZXJzaW9uTm9uY2UiOiA1OTc0MzUxMzUsCiAgICAgICJpc0RlbGV0ZWQiOiBmYWxzZSwKICAgICAgImJvdW5kRWxlbWVudElkcyI6IG51bGwsCiAgICAgICJ0ZXh0IjogInRlc3QiLAogICAgICAiZm9udFNpemUiOiAzNiwKICAgICAgImZvbnRGYW1pbHkiOiAxLAogICAgICAidGV4dEFsaWduIjogImxlZnQiLAogICAgICAidmVydGljYWxBbGlnbiI6ICJ0b3AiLAogICAgICAiYmFzZWxpbmUiOiA0MQogICAgfQogIF0sCiAgImFwcFN0YXRlIjogewogICAgInZpZXdCYWNrZ3JvdW5kQ29sb3IiOiAiI2ZmZmZmZiIsCiAgICAiZ3JpZFNpemUiOiBudWxsCiAgfQp9<!-- payload-end -->
+  <defs>
+    <style>
+      @font-face {
+        font-family: "Virgil";
+        src: url("https://excalidraw.com/FG_Virgil.woff2");
+      }
+      @font-face {
+        font-family: "Cascadia";
+        src: url("https://excalidraw.com/Cascadia.woff2");
+      }
+    </style>
+  </defs>
+  <rect x="0" y="0" width="97" height="77" fill="#ffffff"></rect><g transform="translate(10 10) rotate(0 38.5 28.5)"><text x="0" y="41" font-family="Virgil, Segoe UI Emoji" font-size="36px" fill="#000000" text-anchor="start" style="white-space: pre;" direction="ltr">test</text></g></svg>

src/tests/helpers/api.ts

@@ -138,19 +138,22 @@ export class API {
     return element as any;
   };
 
-  static dropFile(sceneData: ImportedDataState) {
+  static dropFile(data: ImportedDataState | Blob) {
     const fileDropEvent = createEvent.drop(GlobalTestState.canvas);
-    const file = new Blob(
-      [
-        JSON.stringify({
-          type: "excalidraw",
-          ...sceneData,
-        }),
-      ],
-      {
-        type: "application/json",
-      },
-    );
+    const file =
+      data instanceof Blob
+        ? data
+        : new Blob(
+            [
+              JSON.stringify({
+                type: "excalidraw",
+                ...data,
+              }),
+            ],
+            {
+              type: "application/json",
+            },
+          );
     Object.defineProperty(fileDropEvent, "dataTransfer", {
       value: {
         files: [file],