Fix the issue where large diagrams were not able to get inserted into google docs

Author: Almoizs-1310

src/client/create-diagram-dialog/components/create-diagram-dialog.tsx

@@ -1,5 +1,9 @@
 import { useEffect, useState } from 'react';
-import { buildUrl, handleDialogClose } from '../../utils/helpers';
+import {
+  buildUrl,
+  handleDialogClose,
+  compressBase64Image,
+} from '../../utils/helpers';
 import { serverFunctions } from '../../utils/serverFunctions';
 import useAuth from '../../hooks/useAuth';
 import { CircularProgress, Container, Typography, Box } from '@mui/material';
@@ -41,8 +45,10 @@ const CreateDiagramDialog = () => {
         });
 
         try {
+          const compressedImage = await compressBase64Image(data.diagramImage);
+
           await serverFunctions.insertBase64ImageWithMetadata(
-            data.diagramImage,
+            compressedImage,
             metadata.toString()
           );
           handleDialogClose();

src/client/edit-diagram-dialog/components/edit-diagram-dialog.tsx

@@ -1,6 +1,10 @@
 import { useEffect, useState } from 'react';
 import { serverFunctions } from '../../utils/serverFunctions';
-import { buildUrl, handleDialogClose } from '../../utils/helpers';
+import {
+  buildUrl,
+  handleDialogClose,
+  compressBase64Image,
+} from '../../utils/helpers';
 import useAuth from '../../hooks/useAuth';
 import { showAlertDialog } from '../../utils/alert';
 import LoadingOverlay from '../../components/loading-overlay';
@@ -59,8 +63,10 @@ const EditDiagramDialog = () => {
           minor: data.minor,
         });
         try {
+          const compressedImage = await compressBase64Image(data.diagramImage);
+
           await serverFunctions.replaceSelectedImageWithBase64AndSize(
-            data.diagramImage,
+            compressedImage,
             metadata.toString()
           );
           handleDialogClose();

src/client/select-diagram-dialog/components/select-diagram-dialog.tsx

@@ -1,5 +1,9 @@
 import { useEffect, useState } from 'react';
-import { buildUrl, handleDialogClose } from '../../utils/helpers';
+import {
+  buildUrl,
+  handleDialogClose,
+  compressBase64Image,
+} from '../../utils/helpers';
 import { serverFunctions } from '../../utils/serverFunctions';
 import useAuth from '../../hooks/useAuth';
 import { CircularProgress, Container, Typography, Box } from '@mui/material';
@@ -50,8 +54,10 @@ const SelectDiagramDialog = () => {
         });
 
         try {
+          const compressedImage = await compressBase64Image(data.diagramImage);
+
           await serverFunctions.insertBase64ImageWithMetadata(
-            data.diagramImage,
+            compressedImage,
             metadata.toString()
           );
           handleDialogClose();

src/client/utils/helpers.ts

@@ -11,3 +11,62 @@ export const handleDialogClose = () => {
     window.parent?.postMessage('closeDialog', '*');
   }
 };
+
+/**
+ * Resizes a base64 image if it exceeds the maximum dimension limit.
+ * Enforces a maximum dimension of 4000px to prevent canvas issues.
+ * @param base64Image - The base64 encoded image string (with or without data URI prefix)
+ * @returns Promise<string> - The processed base64 image string (without data URI prefix)
+ */
+export const compressBase64Image = async (
+  base64Image: string
+): Promise<string> => {
+  try {
+    const base64Data = base64Image.replace(/^data:image\/\w+;base64,/, '');
+
+    const img = new Image();
+    const loadPromise = new Promise<HTMLImageElement>((resolve, reject) => {
+      img.onload = () => resolve(img);
+      img.onerror = reject;
+    });
+
+    img.src = `data:image/png;base64,${base64Data}`;
+    await loadPromise;
+
+    const maxDimension = 4000;
+
+    if (img.width <= maxDimension && img.height <= maxDimension) {
+      return base64Data;
+    }
+
+    const scale = maxDimension / Math.max(img.width, img.height);
+    const newWidth = Math.floor(img.width * scale);
+    const newHeight = Math.floor(img.height * scale);
+    const canvas = document.createElement('canvas');
+    canvas.width = newWidth;
+    canvas.height = newHeight;
+
+    const ctx = canvas.getContext('2d');
+    if (!ctx) {
+      throw new Error('Could not get canvas context');
+    }
+
+    ctx.drawImage(img, 0, 0, newWidth, newHeight);
+
+    const resizedDataUrl = canvas.toDataURL('image/png');
+    let resizedBase64 = resizedDataUrl.replace(/^data:image\/\w+;base64,/, '');
+
+    while (resizedBase64.length % 4 !== 0) {
+      resizedBase64 += '=';
+    }
+
+    return resizedBase64;
+  } catch (error) {
+    console.error('Error processing image:', error);
+    let original = base64Image.replace(/^data:image\/\w+;base64,/, '');
+    while (original.length % 4 !== 0) {
+      original += '=';
+    }
+    return original;
+  }
+};