itxt implementation finished and working

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

@@ -1,12 +1,15 @@
 import tEXt from "png-chunk-text";
-import * as iTXt from "png-chunk-itxt";
 import encodePng from "png-chunks-encode";
 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
@@ -22,33 +25,43 @@ export const getMetadataChunk = async (
     languageTag?: string;
     translatedKeyword?: string;
   } | null> => {
-  const chunks = decodePng(new Uint8Array(await blobToArrayBuffer(blob)));
+  try {
-  
+    const chunks = decodePng(new Uint8Array(await blobToArrayBuffer(blob))) as PngChunk[];
-  const iTXtChunk = chunks.find((chunk) => chunk.name === "iTXt");
+    
-
+    // Try iTXt chunk first (preferred format)
-  if (iTXtChunk) {
+    const iTXtChunk = chunks.find((chunk) => chunk.name === "iTXt");
-    try {
+    if (iTXtChunk) {
-      const decoded = iTXt.decodeSync(iTXtChunk.data);
+      try {
-      console.log("Decoded iTXt chunk:", decoded);
+        const decoded = decodeITXtChunk(iTXtChunk.data);
-      return { 
+        console.debug("Decoded iTXt chunk:", decoded);
-        keyword: decoded.keyword, 
+        return { 
-        text: decoded.text,
+          keyword: decoded.keyword, 
-        compressionFlag: decoded.compressed,
+          text: decoded.text,
-        compressionMethod: decoded.compressedMethod,
+          compressionFlag: decoded.compressed,
-        languageTag: decoded.language || "",
+          compressionMethod: decoded.compressedMethod,
-        translatedKeyword: decoded.translated || ""
+          languageTag: decoded.language,
-      };
+          translatedKeyword: decoded.translated
-    } catch (error) {
+        };
-      console.error("Failed to decode iTXt chunk:", error);
+      } 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;
   }
-  
-  const tEXtChunk = chunks.find((chunk) => chunk.name === "tEXt");
-  if (tEXtChunk) {
-    return tEXt.decode(tEXtChunk.data);
-  }
-  
-  return null;
 };
 
 export const encodePngMetadata = async ({
@@ -60,58 +73,85 @@ export const encodePngMetadata = async ({
   metadata: string;
   useITXt?: boolean;
 }) => {
-  const chunks = decodePng(new Uint8Array(await blobToArrayBuffer(blob)));
-
-  const filteredChunks = chunks.filter(
-    (chunk) => 
-      !(chunk.name === "tEXt" && 
-        tEXt.decode(chunk.data).keyword === MIME_TYPES.excalidraw) &&
-      !(chunk.name === "iTXt" && 
-        iTXt.decodeSync(chunk.data).keyword === MIME_TYPES.excalidraw)
-  );
-  
-  const encodedData = JSON.stringify(
-    encode({
-      text: metadata,
-      compress: true,
-    }),
-  );
-
-  let metadataChunk: TEXtChunk | ITXtChunk;
   try {
-    if (useITXt) {
+    const chunks = decodePng(new Uint8Array(await blobToArrayBuffer(blob))) as PngChunk[];
-      metadataChunk = {
-        name: "iTXt",
-        data: iTXt.encodeSync({
-          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);
-    metadataChunk = tEXt.encode(
-      MIME_TYPES.excalidraw,
-      encodedData,
-    );
-  }
-  
-  filteredChunks.splice(-1, 0, metadataChunk);
 
-  return new Blob([encodePng(filteredChunks)], { type: MIME_TYPES.png });
+    const filteredChunks = chunks.filter((chunk) => {
+      try {
+        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,
+      }),
+    );
+
+    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 getMetadataChunk(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)) {
         if (
           "type" in encodedData &&
@@ -121,11 +161,14 @@ export const decodePngMetadata = async (blob: Blob) => {
         }
         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("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 or unsupported PNG metadata format");
 };