Merge f585cfb720 into 6e655cdb24

packages/excalidraw/data/encode.ts

@@ -81,7 +81,7 @@ export const base64urlToString = (str: string) => {
 };
 
 // -----------------------------------------------------------------------------
-// text encoding
+// tEXT encoding/decoding
 // -----------------------------------------------------------------------------
 
 type EncodedData = {
@@ -143,6 +143,113 @@ export const decode = (data: EncodedData): string => {
   return decoded;
 };
 
+// -----------------------------------------------------------------------------
+// iTXt encoding/decoding
+// -----------------------------------------------------------------------------
+
+// Based on PNG spec: http://www.libpng.org/pub/png/spec/1.2/PNG-Chunks.html
+// and iTXt chunk structure: https://www.w3.org/TR/PNG/#11iTXt
+
+export const encodeITXtChunk = ({
+  keyword,
+  text,
+  compressionFlag = true,
+  compressionMethod = 0,
+  languageTag = "",
+  translatedKeyword = "",
+}: {
+  keyword: string;
+  text: string;
+  compressionFlag?: boolean;
+  compressionMethod?: number;
+  languageTag?: string;
+  translatedKeyword?: string;
+}): Uint8Array => {
+  const keywordBytes = new TextEncoder().encode(keyword);
+  const languageTagBytes = new TextEncoder().encode(languageTag);
+  const translatedKeywordBytes = new TextEncoder().encode(translatedKeyword);
+  const textBytes = new TextEncoder().encode(text);
+
+  const totalSize =
+    keywordBytes.length +
+    1 + // null separator after keyword
+    1 + // compression flag
+    1 + // compression method
+    languageTagBytes.length +
+    1 + // null separator after language tag
+    translatedKeywordBytes.length +
+    1 + // null separator after translated keyword
+    (compressionFlag ? deflate(textBytes).length : textBytes.length);
+
+  const output = new Uint8Array(totalSize);
+  let offset = 0;
+
+  output.set(keywordBytes, offset);
+  offset += keywordBytes.length;
+  output[offset++] = 0; // null separator
+
+  output[offset++] = compressionFlag ? 1 : 0;
+
+  output[offset++] = compressionMethod;
+
+  output.set(languageTagBytes, offset);
+  offset += languageTagBytes.length;
+  output[offset++] = 0; // null separator
+
+  output.set(translatedKeywordBytes, offset);
+  offset += translatedKeywordBytes.length;
+  output[offset++] = 0; // null separator
+
+  const finalTextBytes = compressionFlag ? deflate(textBytes) : textBytes;
+  output.set(finalTextBytes, offset);
+
+  return output;
+};
+
+export const decodeITXtChunk = (data: Uint8Array): {
+  keyword: string;
+  text: string;
+  compressed: boolean;
+  compressedMethod: number;
+  language: string;
+  translated: string;
+} => {
+  let offset = 0;
+
+  const keywordEnd = data.indexOf(0, offset);
+  if (keywordEnd === -1) throw new Error("Invalid iTXt chunk: missing keyword");
+  const keyword = new TextDecoder().decode(data.slice(offset, keywordEnd));
+  offset = keywordEnd + 1;
+
+  const compressionFlag = data[offset++] === 1;
+
+  const compressionMethod = data[offset++];
+
+  const languageEnd = data.indexOf(0, offset);
+  if (languageEnd === -1) throw new Error("Invalid iTXt chunk: missing language tag");
+  const language = new TextDecoder().decode(data.slice(offset, languageEnd));
+  offset = languageEnd + 1;
+
+  const translatedEnd = data.indexOf(0, offset);
+  if (translatedEnd === -1) throw new Error("Invalid iTXt chunk: missing translated keyword");
+  const translated = new TextDecoder().decode(data.slice(offset, translatedEnd));
+  offset = translatedEnd + 1;
+
+  const textBytes = data.slice(offset);
+  const text = compressionFlag
+    ? new TextDecoder().decode(inflate(textBytes))
+    : new TextDecoder().decode(textBytes);
+
+  return {
+    keyword,
+    text,
+    compressed: compressionFlag,
+    compressedMethod: compressionMethod,
+    language,
+    translated,
+  };
+};
+
 // -----------------------------------------------------------------------------
 // binary encoding
 // -----------------------------------------------------------------------------

packages/excalidraw/data/image.ts

@@ -5,67 +5,170 @@ import decodePng from "png-chunks-extract";
 import { EXPORT_DATA_TYPES, MIME_TYPES } from "@excalidraw/common";
 
 import { blobToArrayBuffer } from "./blob";
-import { encode, decode } from "./encode";
+import { encode, decode, encodeITXtChunk, decodeITXtChunk } from "./encode";
+
+type TEXtChunk = { name: "tEXt"; data: Uint8Array };
+type ITXtChunk = { name: "iTXt"; data: Uint8Array };
+type PngChunk = TEXtChunk | ITXtChunk;
 
 // -----------------------------------------------------------------------------
 // PNG
 // -----------------------------------------------------------------------------
 
-export const getTEXtChunk = async (
+export const getMetadataChunk = async (
   blob: Blob,
-): Promise<{ keyword: string; text: string } | null> => {
+): Promise<{ 
-  const chunks = decodePng(new Uint8Array(await blobToArrayBuffer(blob)));
+    keyword: string; 
-  const metadataChunk = chunks.find((chunk) => chunk.name === "tEXt");
+    text: string;
-  if (metadataChunk) {
+    compressionFlag?: boolean;
-    return tEXt.decode(metadataChunk.data);
+    compressionMethod?: number;
+    languageTag?: string;
+    translatedKeyword?: string;
+  } | null> => {
+  try {
+    const chunks = decodePng(new Uint8Array(await blobToArrayBuffer(blob))) as PngChunk[];
+    
+    // Try iTXt chunk first (preferred format)
+    const iTXtChunk = chunks.find((chunk) => chunk.name === "iTXt");
+    if (iTXtChunk) {
+      try {
+        const decoded = decodeITXtChunk(iTXtChunk.data);
+        console.debug("Decoded iTXt chunk:", decoded);
+        return { 
+          keyword: decoded.keyword, 
+          text: decoded.text,
+          compressionFlag: decoded.compressed,
+          compressionMethod: decoded.compressedMethod,
+          languageTag: decoded.language,
+          translatedKeyword: decoded.translated
+        };
+      } catch (error) {
+        console.warn("Failed to decode iTXt chunk:", error);
+      }
+    }
+    
+    // Fallback to tEXt chunk
+    const tEXtChunk = chunks.find((chunk) => chunk.name === "tEXt");
+    if (tEXtChunk) {
+      try {
+        return tEXt.decode(tEXtChunk.data);
+      } catch (error) {
+        console.warn("Failed to decode tEXt chunk:", error);
+      }
+    }
+    
+    return null;
+  } catch (error) {
+    console.error("Failed to get metadata chunk:", error);
+    return null;
   }
-  return null;
 };
 
 export const encodePngMetadata = async ({
   blob,
   metadata,
+  useITXt = true,
 }: {
   blob: Blob;
   metadata: string;
+  useITXt?: boolean;
 }) => {
-  const chunks = decodePng(new Uint8Array(await blobToArrayBuffer(blob)));
+  try {
+    const chunks = decodePng(new Uint8Array(await blobToArrayBuffer(blob))) as PngChunk[];
 
-  const metadataChunk = tEXt.encode(
+    const filteredChunks = chunks.filter((chunk) => {
-    MIME_TYPES.excalidraw,
+      try {
-    JSON.stringify(
+        if (chunk.name === "tEXt") {
+          return tEXt.decode(chunk.data).keyword !== MIME_TYPES.excalidraw;
+        }
+        if (chunk.name === "iTXt") {
+          return decodeITXtChunk(chunk.data).keyword !== MIME_TYPES.excalidraw;
+        }
+        return true;
+      } catch (error) {
+        console.warn("Failed to decode chunk during filtering:", error);
+        return true;
+      }
+    });
+    
+    const encodedData = JSON.stringify(
       encode({
         text: metadata,
         compress: true,
       }),
-    ),
+    );
-  );
-  // insert metadata before last chunk (iEND)
-  chunks.splice(-1, 0, metadataChunk);
 
-  return new Blob([encodePng(chunks)], { type: MIME_TYPES.png });
+    let metadataChunk: PngChunk;
+    try {
+      if (useITXt) {
+        metadataChunk = {
+          name: "iTXt",
+          data: encodeITXtChunk({
+            keyword: MIME_TYPES.excalidraw,
+            text: encodedData,
+            compressionFlag: true,
+            compressionMethod: 0,
+            languageTag: "en",
+            translatedKeyword: ""
+          })
+        };
+      } else {
+        throw new Error("Fallback to tEXt");
+      }
+    } catch (error) {
+      console.warn("iTXt encoding failed, falling back to tEXt:", error);
+      const tEXtData = tEXt.encode(
+        MIME_TYPES.excalidraw,
+        encodedData,
+      ) as unknown as Uint8Array;
+      metadataChunk = {
+        name: "tEXt",
+        data: tEXtData
+      };
+    }
+    
+    // Insert metadata chunk before the IEND chunk (last chunk)
+    filteredChunks.splice(-1, 0, metadataChunk);
+
+    return new Blob(
+      [(encodePng as (chunks: PngChunk[]) => Uint8Array)(filteredChunks)], 
+      { type: MIME_TYPES.png }
+    );
+  } catch (error) {
+    console.error("Failed to encode PNG metadata:", error);
+    throw new Error("Failed to encode PNG metadata");
+  }
 };
 
 export const decodePngMetadata = async (blob: Blob) => {
-  const metadata = await getTEXtChunk(blob);
+  try {
-  if (metadata?.keyword === MIME_TYPES.excalidraw) {
+    const metadata = await getMetadataChunk(blob);
+    
+    if (!metadata?.keyword || metadata.keyword !== MIME_TYPES.excalidraw) {
+      throw new Error("Invalid or unsupported PNG metadata format");
+    }
+
     try {
       const encodedData = JSON.parse(metadata.text);
+      
+      // Handle legacy format
       if (!("encoded" in encodedData)) {
-        // legacy, un-encoded scene JSON
         if (
           "type" in encodedData &&
           encodedData.type === EXPORT_DATA_TYPES.excalidraw
         ) {
           return metadata.text;
         }
-        throw new Error("FAILED");
+        throw new Error("Malformed or unexpected metadata format");
       }
+
       return decode(encodedData);
-    } catch (error: any) {
+    } catch (error) {
-      console.error(error);
+      console.error("Failed to decode metadata:", error);
-      throw new Error("FAILED");
+      throw new Error("Malformed or unexpected metadata format");
     }
+  } catch (error) {
+    console.error("Failed to decode PNG metadata:", error);
+    throw new Error("Failed to decode PNG metadata");
   }
-  throw new Error("INVALID");
 };

packages/excalidraw/global.d.ts

@@ -33,6 +33,7 @@ interface Clipboard extends EventTarget {
 // PNG encoding/decoding
 // -----------------------------------------------------------------------------
 type TEXtChunk = { name: "tEXt"; data: Uint8Array };
+type ITXtChunk = { name: "iTXt"; data: Uint8Array };
 
 declare module "png-chunk-text" {
   function encode(
@@ -41,12 +42,31 @@ declare module "png-chunk-text" {
   ): { name: "tEXt"; data: Uint8Array };
   function decode(data: Uint8Array): { keyword: string; text: string };
 }
+declare module "png-chunk-itxt" {
+  function encodeSync(options: {
+    keyword: string;
+    text: string;
+    compressionFlag?: boolean;
+    compressionMethod?: number;
+    languageTag?: string;
+    translatedKeyword?: string;
+  }): Uint8Array;
+
+  function decodeSync(data: Uint8Array): {
+    keyword: string;
+    text: string;
+    compressed?: boolean;
+    compressedMethod?: number;
+    language?: string;
+    translated?: string;
+  };
+}
 declare module "png-chunks-encode" {
-  function encode(chunks: TEXtChunk[]): Uint8Array;
+  function encode(chunks: (TEXtChunk | ITXtChunk)[]): Uint8Array;
   export = encode;
 }
 declare module "png-chunks-extract" {
-  function extract(buffer: Uint8Array): TEXtChunk[];
+  function extract(buffer: Uint8Array): (TEXtChunk | ITXtChunk)[];
   export = extract;
 }
 // -----------------------------------------------------------------------------

packages/excalidraw/package.json

@@ -87,13 +87,14 @@
     "image-blob-reduce": "3.0.1",
     "jotai": "2.11.0",
     "jotai-scope": "0.7.2",
-    "lodash.throttle": "4.1.1",
     "lodash.debounce": "4.0.8",
+    "lodash.throttle": "4.1.1",
     "nanoid": "3.3.3",
     "open-color": "1.9.1",
     "pako": "2.0.3",
     "perfect-freehand": "1.2.0",
     "pica": "7.1.1",
+    "png-chunk-itxt": "1.0.0",
     "png-chunk-text": "1.0.0",
     "png-chunks-encode": "1.0.0",
     "png-chunks-extract": "1.0.0",

packages/utils/src/export.ts

@@ -19,6 +19,11 @@ import type {
   NonDeleted,
 } from "@excalidraw/element/types";
 import type { AppState, BinaryFiles } from "@excalidraw/excalidraw/types";
+import { Buffer } from "buffer";
+
+window.onload = () => {
+  window.Buffer = Buffer;
+}
 
 export { MIME_TYPES };
 
@@ -101,9 +106,10 @@ export const exportToBlob = async (
     mimeType?: string;
     quality?: number;
     exportPadding?: number;
+    useITXt?: boolean;
   },
 ): Promise<Blob> => {
-  let { mimeType = MIME_TYPES.png, quality } = opts;
+  let { mimeType = MIME_TYPES.png, quality, useITXt = true } = opts;
 
   if (mimeType === MIME_TYPES.png && typeof quality === "number") {
     console.warn(`"quality" will be ignored for "${MIME_TYPES.png}" mimeType`);
@@ -150,6 +156,7 @@ export const exportToBlob = async (
               opts.files || {},
               "local",
             ),
+            useITXt,
           });
         }
         resolve(blob);

yarn.lock

@@ -3801,6 +3801,11 @@ binary-extensions@^2.0.0:
   resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.3.0.tgz#f6e14a97858d327252200242d4ccfe522c445522"
   integrity sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==
 
+binary-parser@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/binary-parser/-/binary-parser-2.2.1.tgz#4edc6da2dc56db73fa5ba450dfe6382ede8294ce"
+  integrity sha512-5ATpz/uPDgq5GgEDxTB4ouXCde7q2lqAQlSdBRQVl/AJnxmQmhIfyxJx+0MGu//D5rHQifkfGbWWlaysG0o9NA==
+
 bl@^4.0.3:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/bl/-/bl-4.1.0.tgz#451535264182bec2fbbc83a62ab98cf11d9f7b3a"
@@ -7838,6 +7843,13 @@ pkg-dir@4.2.0:
   dependencies:
     find-up "^4.0.0"
 
+png-chunk-itxt@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/png-chunk-itxt/-/png-chunk-itxt-1.0.0.tgz#4652547b7c88d512337599e422b7431f2c234355"
+  integrity sha512-/1gTTBlIBUL47FS1wXI5oW5zidHge1Lwn+w4WNsnTc6wu1i82l63hwz0mgw1x2eYFH4iYkHkmKH0FHoHYMmjig==
+  dependencies:
+    binary-parser "^2.2.1"
+
 png-chunk-text@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/png-chunk-text/-/png-chunk-text-1.0.0.tgz#1c6006d8e34ba471d38e1c9c54b3f53e1085e18f"