refactor: update ComposeCanvas and Editor data handling types

frontend/src/components/ui/ComposeCanvas.tsx

@@ -27,7 +27,6 @@ export interface FabricImageJSON extends FabricObjectJSON {
 }
 
 export interface CanvasJSON {
-  version: string;
   objects: (FabricObjectJSON | FabricImageJSON)[];
   canvasWidth?: number;
   canvasHeight?: number;
@@ -266,7 +265,7 @@ export const ComposeCanvas = forwardRef<
       });
     },
     getData: () => {
-      if (!fabricRef.current) return { version: "", objects: [] };
+      if (!fabricRef.current) return { objects: [] };
       const json = fabricRef.current.toJSON() as CanvasJSON;
       json.canvasWidth = BASE_WIDTH;
       json.canvasHeight =

frontend/src/pages/Editor.tsx

@@ -109,7 +109,7 @@ export default function Editor() {
     await cryptoUtils.initialize();
 
     try {
-      const canvasData = canvasRef.current?.getData();
+      const canvasData = canvasRef.current?.getData() || { objects: [] };
       const canvasImages = canvasRef.current?.getImages() || [];
 
       const encImageFilesMap = await encryptCanvasImages(

frontend/src/utils/crypto.ts

@@ -213,7 +213,7 @@ export class CryptoUtils {
   }
 
   public async encryptMetadata(
-    metadata: Record<string, unknown>,
+    metadata: Record<string, any>,
     masterKey: CryptoKey,
   ): Promise<EncryptedLetter> {
     const { encryptedContent, encrypted_dek, sharingKey } =
@@ -227,7 +227,7 @@ export class CryptoUtils {
   public async decryptMetadata(
     encrypted_metadata: EncryptedLetter,
     masterKey: CryptoKey,
-  ): Promise<Record<string, unknown>> {
+  ): Promise<Record<string, any>> {
     const bytes = await this.openEnvelope(
       encrypted_metadata.encrypted_content,
       encrypted_metadata.encrypted_dek,
@@ -239,7 +239,7 @@ export class CryptoUtils {
   public async decryptMetadataWithSharingKey(
     encrypted_content: string,
     sharingKey: string,
-  ): Promise<Record<string, unknown>> {
+  ): Promise<Record<string, any>> {
     const bytes = await this.openEnvelopeWithSharingKey(
       encrypted_content,
       sharingKey,

frontend/src/utils/letterLogic.test.ts

@@ -36,8 +36,22 @@ describe("letterLogic image helpers", () => {
     it("should not encrypt images whose src already ends with .bin", async () => {
       const canvasData = {
         objects: [
-          { type: "Image", src: "already-encrypted.png.bin" },
+          {
-          { type: "Textbox", text: "hello" },
+            type: "Image",
+            src: "already-encrypted.png.bin",
+            top: 0,
+            left: 0,
+            width: 100,
+            height: 100,
+          },
+          {
+            type: "Textbox",
+            text: "hello",
+            top: 0,
+            left: 0,
+            width: 100,
+            height: 100,
+          },
         ],
       };
 
@@ -58,7 +72,16 @@ describe("letterLogic image helpers", () => {
     it("should encrypt new blob-backed images and return encrypted uploads", async () => {
       const file = new File(["img"], "photo.png", { type: "image/png" });
       const canvasData = {
-        objects: [{ type: "Image", src: "blob:http://localhost/test-image" }],
+        objects: [
+          {
+            type: "Image",
+            src: "blob:http://localhost/test-image",
+            top: 0,
+            left: 0,
+            width: 100,
+            height: 100,
+          },
+        ],
       };
       const canvasImages = [
         {
@@ -92,7 +115,6 @@ describe("letterLogic image helpers", () => {
   describe("decryptCanvasImages", () => {
     it("should decrypt images and replace src with blob URL", async () => {
       const canvasData = {
-        version: "5.3.0",
         objects: [
           {
             type: "Image",
@@ -143,7 +165,6 @@ describe("letterLogic image helpers", () => {
 
     it("should include raw file when includeRawFile is true", async () => {
       const canvasData = {
-        version: "5.3.0",
         objects: [
           {
             type: "Image",
@@ -188,7 +209,16 @@ describe("letterLogic image helpers", () => {
   describe("decryptCanvasImagesWithSharingKey", () => {
     it("should decrypt images using sharing key", async () => {
       const canvasData = {
-        objects: [{ type: "Image", src: "photo.png.bin" }],
+        objects: [
+          {
+            type: "Image",
+            src: "photo.png.bin",
+            top: 0,
+            left: 0,
+            width: 100,
+            height: 100,
+          },
+        ],
       };
       const remoteImages = [
         { file_name: "photo.png.bin", file: "https://remote/photo.png.bin" },