From 0fcf8bb096220eb9ff43ffbe8d87ba225e36701d Mon Sep 17 00:00:00 2001
From: Almoizs-1310 <almoiz@mermaidchart.com>
Date: Fri, 5 Dec 2025 19:27:24 +0530
Subject: [PATCH 1/7] MC-3915 Update the UI and added Edit and delete
 functionality for the google docs plugin

---
 src/client/components/button.module.css   |   7 +-
 src/client/sidebar/components/Sidebar.tsx | 307 +++++++++++++++-------
 src/client/sidebar/index.html             |   2 +
 src/client/sidebar/index.jsx              |   2 +-
 src/server/index.ts                       |   3 +
 src/server/ui.js                          |  24 ++
 6 files changed, 250 insertions(+), 95 deletions(-)

diff --git a/src/client/components/button.module.css b/src/client/components/button.module.css
index 3557db1..4143a3b 100644
--- a/src/client/components/button.module.css
+++ b/src/client/components/button.module.css
@@ -5,13 +5,14 @@
   padding: 0.5rem;
   outline: none;
   border-radius: 0.375rem;
-  border: 1px solid rgb(207, 207, 211);
-  background-color: white;
+  border: none;
+  background-color: #E80962;
   cursor: pointer;
+   color: white;
 }
 
 .button:hover {
-  background-color: rgb(0, 66, 235);
+  background-color: #B20E45;
   color: white;
   transition: all 0.2s;
 }
diff --git a/src/client/sidebar/components/Sidebar.tsx b/src/client/sidebar/components/Sidebar.tsx
index 6a54a52..2bd6cc9 100644
--- a/src/client/sidebar/components/Sidebar.tsx
+++ b/src/client/sidebar/components/Sidebar.tsx
@@ -196,6 +196,32 @@ const Sidebar = () => {
     }
   };
 
+  const handleEditDiagram = async (altDescription: string) => {
+    try {
+      await serverFunctions.selectChartImage(altDescription);
+
+      await serverFunctions.openEditDiagramDialog();
+    } catch (error) {
+      console.error('Error editing diagram', error);
+      showAlertDialog('Error editing diagram, please try again');
+    }
+  };
+
+  const handleRemoveDiagram = async (altDescription: string) => {
+    try {
+      const result = await serverFunctions.removeDiagramByAltDescription(altDescription);
+      if (result.success) {
+        // Refresh the diagrams list after successful removal
+        getImages();
+      } else {
+        showAlertDialog(result.message || 'Failed to remove diagram');
+      }
+    } catch (error) {
+      console.error('Error removing diagram', error);
+      showAlertDialog('Error removing diagram, please try again');
+    }
+  };
+
   if (authStatus === 'idle' || authStatus === 'loading') {
     return (
       <Container
@@ -244,35 +270,135 @@ const Sidebar = () => {
           padding: '15px 20px',
         }}
       >
-        <img
-          src="https://jiratest.mermaidchart.com/icon_80x80.png"
-          alt="mc"
-          width={30}
-          height={30}
-        />
-        <>
-          {authState?.authorized ? (
-            <Button onClick={signOut}>Logout</Button>
-          ) : (
-            <Button onClick={handleLoginClick}>Login</Button>
-          )}
-        </>
+
       </Container>
+
       <Divider />
+
       <Container
         sx={{
           display: 'flex',
           flexDirection: 'column',
           justifyContent: 'space-between',
           alignItems: 'center',
-          padding: '20px',
           height: 'calc(100vh - 69px)',
         }}
       >
         <div>
-          {authState?.authorized ? (
+
+{!authState?.authorized ? (
+  <Box
+    sx={{
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center',
+      height: 'calc(100vh - 80px)',
+      textAlign: 'center',
+    }}
+  >
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        textAlign: 'center',
+        gap: 20,
+      }}
+    >
+      <img
+        src="https://jiratest.mermaidchart.com/icon_80x80.png"
+        alt="logo"
+        width={80}
+        height={80}
+      />
+    </Box>
+    <Typography
+      sx={{
+        maxWidth: '344px',
+        fontFamily: 'Recursive',
+        fontSize: '20px',
+        marginTop: '12px',
+        fontWeight: 420,
+        color: '#1E1A2E',
+        marginBottom: '14px',
+        lineHeight: '28px',
+        letterSpacing: 'normal',
+      }}
+    >
+      Welcome to  <br />
+      the Mermaid 
+    </Typography>
+
+    <Typography
+      sx={{
+        fontFamily: 'Recursive',
+        fontWeight: 400,
+        fontSize: '16px',
+        color: '#1E1A2E',
+        lineHeight: '24px',
+        marginBottom: '28px',
+      }}
+    >
+      Create and edit diagrams in Mermaid Chart and easily synchronize
+      documents with Google Docs.
+    </Typography>
+
+    <MuiButton
+      onClick={handleLoginClick}
+      sx={{
+      fontFamily: 'Recursive',
+        width: '100%',
+        maxWidth: '240px',
+        backgroundColor: '#E80962',
+        color: '#fff',
+        fontSize: '16px',
+        fontWeight: 600,
+        height: '46px',
+        borderRadius: '10px',
+        textTransform: 'none',
+        '&:hover': {
+          backgroundColor: '#B20E45',
+        },
+      }}
+    >
+      Login
+    </MuiButton>
+
+    <Typography
+      sx={{
+      fontFamily: 'Recursive',
+        marginTop: '22px',
+        fontSize: '14px',
+        color: '#343434',
+      }}
+    >
+      Don’t have an account?
+    </Typography>
+
+    <MuiButton
+      onClick={() => window.open('https://mermaidchart.com/app/sign-up', '_blank')}
+      sx={{
+        textTransform: 'none',
+        color: '#0071e3',
+        padding: 0,
+        minWidth: 'auto',
+        fontSize: '14px',
+        marginTop: '4px',
+        fontFamily: 'Recursive, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+        '&:hover': {
+          textDecoration: 'underline',
+          background: 'none',
+        },
+      }}
+    >
+      Sign up
+    </MuiButton>
+  </Box>
+) : (
             <>
-              <Typography title="h3" color={'#883a79'} mb={1}>
+
+              <Typography title="h3" color={'#1E1A2E'} mb={1} sx={{ fontFamily: 'Recursive, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif' }}>
                 Create a new diagram
               </Typography>
               <Button
@@ -282,7 +408,7 @@ const Sidebar = () => {
               >
                 New diagram
               </Button>
-              <Typography title="h3" color={'#883a79'} mb={1}>
+              <Typography title="h3" color={'#1E1A2E'} mb={1}>
                 Insert a diagram from Mermaid Chart
               </Typography>
               <Button
@@ -292,7 +418,7 @@ const Sidebar = () => {
               >
                 Browse diagrams
               </Button>
-              <Typography title="h3" color={'#883a79'} mb={1}>
+              <Typography title="h3" color={'#1E1A2E'} mb={1}>
                 Update all diagrams in document to most recent version
               </Typography>
               <Button
@@ -306,22 +432,9 @@ const Sidebar = () => {
                   <Tabs
                     value={tab}
                     onChange={(_, newValue) => handleTabSwitch(newValue)}
-                    aria-label="basic tabs example"
                   >
-                    <Tab
-                      label="Recent diagrams"
-                      sx={{
-                        textTransform: 'initial',
-                        padding: '12px 6px',
-                      }}
-                    />
-                    <Tab
-                      label="In this document"
-                      sx={{
-                        textTransform: 'initial',
-                        padding: '12px',
-                      }}
-                    />
+                    <Tab label="Recent diagrams" sx={{ textTransform: 'initial' }} />
+                    <Tab label="In this document" sx={{ textTransform: 'initial' }} />
                   </Tabs>
                 </Box>
                 <iframe
@@ -335,6 +448,7 @@ const Sidebar = () => {
                     display: tab === 0 ? 'block' : 'none',
                   }}
                 />
+
                 <Container
                   sx={{
                     display: tab === 1 ? 'grid' : 'none',
@@ -342,90 +456,101 @@ const Sidebar = () => {
                     alignItems: 'center',
                     gap: '20px',
                     marginTop: '20px',
-                    height: 'calc(100vh - 520px)',
+                    height: 'calc(100vh - 440px)',
                     overflowY: 'auto',
                   }}
                 >
-                  {chartImagesState === 'loading' &&
-                    chartImages.length === 0 && (
-                      <CircularProgress sx={{ justifySelf: 'center' }} />
-                    )}
+                  {chartImagesState === 'loading' && chartImages.length === 0 && (
+                    <CircularProgress sx={{ justifySelf: 'center' }} />
+                  )}
+
                   {chartImages.length > 0 &&
                     chartImages.map((image) => (
-                      <div
+                      <Box
                         key={image.altDescription}
-                        onClick={() =>
-                          handleSelectedImage(image.altDescription)
-                        }
+                        sx={{
+                          display: 'flex',
+                          flexDirection: 'column',
+                          alignItems: 'center',
+                          gap: '8px',
+                          padding: '10px',
+                          border: '1px solid #e0e0e0',
+                          borderRadius: '8px',
+                          backgroundColor: '#fafafa',
+                        }}
                       >
                         <img
                           src={image.image}
                           alt={image.altDescription}
                           style={{
                             width: '200px',
-                            height: 'auto',
-                            marginBottom: '10px',
+                            borderRadius: '4px',
                             cursor: 'pointer',
                           }}
+                          onClick={() => handleSelectedImage(image.altDescription)}
                         />
-                      </div>
+
+                        <Box sx={{ display: 'flex', gap: '8px' }}>
+                          <Button
+                            style={{
+                              fontSize: '12px',
+                              padding: '4px 12px',
+                            }}
+                            onClick={() => handleEditDiagram(image.altDescription)}
+                          >
+                            Edit
+                          </Button>
+
+                          <Button
+                            style={{
+                              fontSize: '12px',
+                              padding: '4px 12px',
+                              backgroundColor: '#d32f2f',
+                              color: 'white',
+                            }}
+                            onClick={() => handleRemoveDiagram(image.altDescription)}
+                          >
+                            Remove
+                          </Button>
+                        </Box>
+                      </Box>
                     ))}
+
                   {chartImagesState === 'success' &&
                     chartImages.length === 0 && (
-                      <Typography title="h4" textAlign="center">
+                      <Typography title="h4" textAlign="center" sx={{ fontFamily: 'Recursive, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif' }}>
                         No selected diagrams
                       </Typography>
                     )}
                 </Container>
               </Box>
-            </>
-          ) : (
-            <>
-              <Typography title="h3" textAlign="center" color={'#883a79'}>
-                Create and edit diagrams in Mermaid Chart and easily synchronize
-                documents with Google Docs.
-              </Typography>
-              <Typography paragraph textAlign="center" mt={4} color={'#883a79'}>
-                Don't have an account?{' '}
-                <MuiButton
-                  onClick={() => {}}
-                  sx={{
-                    textTransform: 'initial',
-                    color: 'inherit',
-                    padding: 0,
-                    minWidth: 'auto',
-                    fontSize: 'inherit',
-                    '&:hover': {
-                      textDecoration: 'underline',
-                      backgroundColor: 'white',
-                    },
-                  }}
-                >
-                  Sign up
-                </MuiButton>{' '}
-              </Typography>
+
+              {authState?.authorized && (
+                <Box sx={{ marginTop: '20px', textAlign: 'left' }}>
+                  <Button onClick={signOut}>Logout</Button>
+                </Box>
+              )}
             </>
           )}
         </div>
-        <Container
-          sx={{
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            padding: '0',
-          }}
-        >
-          <Typography paragraph textAlign="center" mb={0}>
-            <a
-              href="https://mermaidchart.com"
-              target="_blank"
-              rel="noreferrer"
-              style={{ color: '#883a79' }}
-            >
-              Copyright © 2024 Mermaid Chart
-            </a>
-          </Typography>
-        </Container>
+        {!authState?.authorized && (
+          <Container
+            sx={{
+              textAlign: 'center',
+            }}
+          >
+            <Typography paragraph textAlign="center" mb={0} sx={{ fontFamily: 'Recursive, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif' }}>
+              <a
+                href="https://mermaidchart.com"
+                target="_blank"
+                rel="noreferrer"
+                style={{ color: '#1E1A2E' }}
+              >
+                Copyright © 2024 Mermaid Chart
+              </a>
+            </Typography>
+          </Container>
+        )}
       </Container>
     </>
   );
diff --git a/src/client/sidebar/index.html b/src/client/sidebar/index.html
index 1667f41..c1fa837 100644
--- a/src/client/sidebar/index.html
+++ b/src/client/sidebar/index.html
@@ -2,6 +2,8 @@
 <html>
   <head>
     <base target="_top" />
+    <!-- Google Fonts -->
+    <link href="https://fonts.googleapis.com/css2?family=Recursive:wght@300..1000&display=swap" rel="stylesheet">
     <!-- Add any external scripts and stylesheets here -->
     <script
       crossorigin
diff --git a/src/client/sidebar/index.jsx b/src/client/sidebar/index.jsx
index 11d6e2e..78ceb14 100644
--- a/src/client/sidebar/index.jsx
+++ b/src/client/sidebar/index.jsx
@@ -1,5 +1,5 @@
 import { createRoot } from 'react-dom/client';
-import Sidebar from './components/sidebar';
+import Sidebar from './components/Sidebar';
 import './styles.css';
 
 const container = document.getElementById('index');
diff --git a/src/server/index.ts b/src/server/index.ts
index d4b83ea..77704e7 100644
--- a/src/server/index.ts
+++ b/src/server/index.ts
@@ -20,6 +20,7 @@ import {
   selectChartImage,
   getChartImages,
   showAlertDialog,
+  removeDiagramByAltDescription,
 } from './ui';
 
 // Public functions must be exported as named exports
@@ -45,4 +46,6 @@ export {
   selectChartImage,
   getChartImages,
   showAlertDialog,
+  removeDiagramByAltDescription,
+
 };
diff --git a/src/server/ui.js b/src/server/ui.js
index 9c138c8..569165e 100644
--- a/src/server/ui.js
+++ b/src/server/ui.js
@@ -497,6 +497,30 @@ export function selectChartImage(altDescription) {
   DocumentApp.getActiveDocument().setSelection(range);
 }
 
+export function removeDiagramByAltDescription(altDescription) {
+  if (!altDescription) {
+    return { success: false, message: 'No diagram identifier provided.' };
+  }
+  
+  const body = DocumentApp.getActiveDocument().getBody();
+  const images = body.getImages();
+  const imageToRemove = images.find(
+    (image) => image.getAltDescription() === altDescription
+  );
+
+  if (!imageToRemove) {
+    return { success: false, message: 'Diagram not found in document.' };
+  }
+
+  try {
+    imageToRemove.removeFromParent();
+    return { success: true, message: 'Diagram removed successfully.' };
+  } catch (error) {
+    Logger.log('Error removing image: ' + error.message);
+    return { success: false, message: 'Failed to remove diagram.' };
+  }
+}
+
 export function showAlertDialog(errorText) {
   DocumentApp.getUi().alert(errorText);
 }

From 97cd824c406b0b0d670ee3f23286b364d547ee61 Mon Sep 17 00:00:00 2001
From: Almoizs-1310 <almoiz@mermaidchart.com>
Date: Fri, 5 Dec 2025 19:34:23 +0530
Subject: [PATCH 2/7] Fix lint issue

---
 src/client/sidebar/components/Sidebar.tsx | 289 ++++++++++++----------
 src/server/index.ts                       |   1 -
 src/server/ui.js                          |   2 +-
 3 files changed, 164 insertions(+), 128 deletions(-)

diff --git a/src/client/sidebar/components/Sidebar.tsx b/src/client/sidebar/components/Sidebar.tsx
index 2bd6cc9..9b73999 100644
--- a/src/client/sidebar/components/Sidebar.tsx
+++ b/src/client/sidebar/components/Sidebar.tsx
@@ -209,7 +209,9 @@ const Sidebar = () => {
 
   const handleRemoveDiagram = async (altDescription: string) => {
     try {
-      const result = await serverFunctions.removeDiagramByAltDescription(altDescription);
+      const result = await serverFunctions.removeDiagramByAltDescription(
+        altDescription
+      );
       if (result.success) {
         // Refresh the diagrams list after successful removal
         getImages();
@@ -269,9 +271,7 @@ const Sidebar = () => {
           alignItems: 'center',
           padding: '15px 20px',
         }}
-      >
-
-      </Container>
+      ></Container>
 
       <Divider />
 
@@ -285,120 +285,129 @@ const Sidebar = () => {
         }}
       >
         <div>
+          {!authState?.authorized ? (
+            <Box
+              sx={{
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                justifyContent: 'center',
+                height: 'calc(100vh - 80px)',
+                textAlign: 'center',
+              }}
+            >
+              <Box
+                sx={{
+                  display: 'flex',
+                  flexDirection: 'column',
+                  alignItems: 'center',
+                  textAlign: 'center',
+                  gap: 20,
+                }}
+              >
+                <img
+                  src="https://jiratest.mermaidchart.com/icon_80x80.png"
+                  alt="logo"
+                  width={80}
+                  height={80}
+                />
+              </Box>
+              <Typography
+                sx={{
+                  maxWidth: '344px',
+                  fontFamily: 'Recursive',
+                  fontSize: '20px',
+                  marginTop: '12px',
+                  fontWeight: 420,
+                  color: '#1E1A2E',
+                  marginBottom: '14px',
+                  lineHeight: '28px',
+                  letterSpacing: 'normal',
+                }}
+              >
+                Welcome to <br />
+                the Mermaid
+              </Typography>
 
-{!authState?.authorized ? (
-  <Box
-    sx={{
-      display: 'flex',
-      flexDirection: 'column',
-      alignItems: 'center',
-      justifyContent: 'center',
-      height: 'calc(100vh - 80px)',
-      textAlign: 'center',
-    }}
-  >
-    <Box
-      sx={{
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        textAlign: 'center',
-        gap: 20,
-      }}
-    >
-      <img
-        src="https://jiratest.mermaidchart.com/icon_80x80.png"
-        alt="logo"
-        width={80}
-        height={80}
-      />
-    </Box>
-    <Typography
-      sx={{
-        maxWidth: '344px',
-        fontFamily: 'Recursive',
-        fontSize: '20px',
-        marginTop: '12px',
-        fontWeight: 420,
-        color: '#1E1A2E',
-        marginBottom: '14px',
-        lineHeight: '28px',
-        letterSpacing: 'normal',
-      }}
-    >
-      Welcome to  <br />
-      the Mermaid 
-    </Typography>
-
-    <Typography
-      sx={{
-        fontFamily: 'Recursive',
-        fontWeight: 400,
-        fontSize: '16px',
-        color: '#1E1A2E',
-        lineHeight: '24px',
-        marginBottom: '28px',
-      }}
-    >
-      Create and edit diagrams in Mermaid Chart and easily synchronize
-      documents with Google Docs.
-    </Typography>
-
-    <MuiButton
-      onClick={handleLoginClick}
-      sx={{
-      fontFamily: 'Recursive',
-        width: '100%',
-        maxWidth: '240px',
-        backgroundColor: '#E80962',
-        color: '#fff',
-        fontSize: '16px',
-        fontWeight: 600,
-        height: '46px',
-        borderRadius: '10px',
-        textTransform: 'none',
-        '&:hover': {
-          backgroundColor: '#B20E45',
-        },
-      }}
-    >
-      Login
-    </MuiButton>
-
-    <Typography
-      sx={{
-      fontFamily: 'Recursive',
-        marginTop: '22px',
-        fontSize: '14px',
-        color: '#343434',
-      }}
-    >
-      Don’t have an account?
-    </Typography>
-
-    <MuiButton
-      onClick={() => window.open('https://mermaidchart.com/app/sign-up', '_blank')}
-      sx={{
-        textTransform: 'none',
-        color: '#0071e3',
-        padding: 0,
-        minWidth: 'auto',
-        fontSize: '14px',
-        marginTop: '4px',
-        fontFamily: 'Recursive, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-        '&:hover': {
-          textDecoration: 'underline',
-          background: 'none',
-        },
-      }}
-    >
-      Sign up
-    </MuiButton>
-  </Box>
-) : (
-            <>
+              <Typography
+                sx={{
+                  fontFamily: 'Recursive',
+                  fontWeight: 400,
+                  fontSize: '16px',
+                  color: '#1E1A2E',
+                  lineHeight: '24px',
+                  marginBottom: '28px',
+                }}
+              >
+                Create and edit diagrams in Mermaid Chart and easily synchronize
+                documents with Google Docs.
+              </Typography>
 
-              <Typography title="h3" color={'#1E1A2E'} mb={1} sx={{ fontFamily: 'Recursive, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif' }}>
+              <MuiButton
+                onClick={handleLoginClick}
+                sx={{
+                  fontFamily: 'Recursive',
+                  width: '100%',
+                  maxWidth: '240px',
+                  backgroundColor: '#E80962',
+                  color: '#fff',
+                  fontSize: '16px',
+                  fontWeight: 600,
+                  height: '46px',
+                  borderRadius: '10px',
+                  textTransform: 'none',
+                  '&:hover': {
+                    backgroundColor: '#B20E45',
+                  },
+                }}
+              >
+                Login
+              </MuiButton>
+
+              <Typography
+                sx={{
+                  fontFamily: 'Recursive',
+                  marginTop: '22px',
+                  fontSize: '14px',
+                  color: '#343434',
+                }}
+              >
+                Don’t have an account?
+              </Typography>
+
+              <MuiButton
+                onClick={() =>
+                  window.open('https://mermaidchart.com/app/sign-up', '_blank')
+                }
+                sx={{
+                  textTransform: 'none',
+                  color: '#0071e3',
+                  padding: 0,
+                  minWidth: 'auto',
+                  fontSize: '14px',
+                  marginTop: '4px',
+                  fontFamily:
+                    'Recursive, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+                  '&:hover': {
+                    textDecoration: 'underline',
+                    background: 'none',
+                  },
+                }}
+              >
+                Sign up
+              </MuiButton>
+            </Box>
+          ) : (
+            <>
+              <Typography
+                title="h3"
+                color={'#1E1A2E'}
+                mb={1}
+                sx={{
+                  fontFamily:
+                    'Recursive, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+                }}
+              >
                 Create a new diagram
               </Typography>
               <Button
@@ -433,8 +442,14 @@ const Sidebar = () => {
                     value={tab}
                     onChange={(_, newValue) => handleTabSwitch(newValue)}
                   >
-                    <Tab label="Recent diagrams" sx={{ textTransform: 'initial' }} />
-                    <Tab label="In this document" sx={{ textTransform: 'initial' }} />
+                    <Tab
+                      label="Recent diagrams"
+                      sx={{ textTransform: 'initial' }}
+                    />
+                    <Tab
+                      label="In this document"
+                      sx={{ textTransform: 'initial' }}
+                    />
                   </Tabs>
                 </Box>
                 <iframe
@@ -460,9 +475,10 @@ const Sidebar = () => {
                     overflowY: 'auto',
                   }}
                 >
-                  {chartImagesState === 'loading' && chartImages.length === 0 && (
-                    <CircularProgress sx={{ justifySelf: 'center' }} />
-                  )}
+                  {chartImagesState === 'loading' &&
+                    chartImages.length === 0 && (
+                      <CircularProgress sx={{ justifySelf: 'center' }} />
+                    )}
 
                   {chartImages.length > 0 &&
                     chartImages.map((image) => (
@@ -487,7 +503,9 @@ const Sidebar = () => {
                             borderRadius: '4px',
                             cursor: 'pointer',
                           }}
-                          onClick={() => handleSelectedImage(image.altDescription)}
+                          onClick={() =>
+                            handleSelectedImage(image.altDescription)
+                          }
                         />
 
                         <Box sx={{ display: 'flex', gap: '8px' }}>
@@ -496,7 +514,9 @@ const Sidebar = () => {
                               fontSize: '12px',
                               padding: '4px 12px',
                             }}
-                            onClick={() => handleEditDiagram(image.altDescription)}
+                            onClick={() =>
+                              handleEditDiagram(image.altDescription)
+                            }
                           >
                             Edit
                           </Button>
@@ -508,7 +528,9 @@ const Sidebar = () => {
                               backgroundColor: '#d32f2f',
                               color: 'white',
                             }}
-                            onClick={() => handleRemoveDiagram(image.altDescription)}
+                            onClick={() =>
+                              handleRemoveDiagram(image.altDescription)
+                            }
                           >
                             Remove
                           </Button>
@@ -518,7 +540,14 @@ const Sidebar = () => {
 
                   {chartImagesState === 'success' &&
                     chartImages.length === 0 && (
-                      <Typography title="h4" textAlign="center" sx={{ fontFamily: 'Recursive, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif' }}>
+                      <Typography
+                        title="h4"
+                        textAlign="center"
+                        sx={{
+                          fontFamily:
+                            'Recursive, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+                        }}
+                      >
                         No selected diagrams
                       </Typography>
                     )}
@@ -539,7 +568,15 @@ const Sidebar = () => {
               textAlign: 'center',
             }}
           >
-            <Typography paragraph textAlign="center" mb={0} sx={{ fontFamily: 'Recursive, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif' }}>
+            <Typography
+              paragraph
+              textAlign="center"
+              mb={0}
+              sx={{
+                fontFamily:
+                  'Recursive, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+              }}
+            >
               <a
                 href="https://mermaidchart.com"
                 target="_blank"
diff --git a/src/server/index.ts b/src/server/index.ts
index 77704e7..69503ca 100644
--- a/src/server/index.ts
+++ b/src/server/index.ts
@@ -47,5 +47,4 @@ export {
   getChartImages,
   showAlertDialog,
   removeDiagramByAltDescription,
-
 };
diff --git a/src/server/ui.js b/src/server/ui.js
index 569165e..79c7b09 100644
--- a/src/server/ui.js
+++ b/src/server/ui.js
@@ -501,7 +501,7 @@ export function removeDiagramByAltDescription(altDescription) {
   if (!altDescription) {
     return { success: false, message: 'No diagram identifier provided.' };
   }
-  
+
   const body = DocumentApp.getActiveDocument().getBody();
   const images = body.getImages();
   const imageToRemove = images.find(

From f50c691f76d420f5b3a0a2020639a365b45195cb Mon Sep 17 00:00:00 2001
From: Almoizs-1310 <almoiz@mermaidchart.com>
Date: Tue, 9 Dec 2025 18:44:34 +0530
Subject: [PATCH 3/7] increased dialog size and updated the loading state for
 the diagrams

---
 .../components/create-diagram-dialog.tsx      | 39 +++++++++++++------
 .../components/edit-diagram-dialog.tsx        | 38 ++++++++++++------
 .../components/select-diagram-dialog.tsx      | 39 +++++++++++++------
 src/client/sidebar/components/Sidebar.tsx     |  5 +--
 src/server/ui.js                              | 20 +++++-----
 5 files changed, 92 insertions(+), 49 deletions(-)

diff --git a/src/client/create-diagram-dialog/components/create-diagram-dialog.tsx b/src/client/create-diagram-dialog/components/create-diagram-dialog.tsx
index 9e42d87..6e0e49c 100644
--- a/src/client/create-diagram-dialog/components/create-diagram-dialog.tsx
+++ b/src/client/create-diagram-dialog/components/create-diagram-dialog.tsx
@@ -4,10 +4,12 @@ import { serverFunctions } from '../../utils/serverFunctions';
 import useAuth from '../../hooks/useAuth';
 import { CircularProgress, Container, Typography } from '@mui/material';
 import { showAlertDialog } from '../../utils/alert';
+import LoadingOverlay from '../../components/loading-overlay';
 
 const CreateDiagramDialog = () => {
   const { authState, authStatus } = useAuth();
   const [diagramsUrl, setDiagramsUrl] = useState('');
+  const [isInserting, setIsInserting] = useState(false);
 
   useEffect(() => {
     if (!authState?.authorized) return;
@@ -22,6 +24,13 @@ const CreateDiagramDialog = () => {
     const handleMessage = async (e: MessageEvent) => {
       const action = e.data.action;
       if (action === 'save') {
+        if (isInserting) {
+          console.log('Already inserting diagram, ignoring duplicate click');
+          return;
+        }
+        
+        setIsInserting(true);
+        
         const data = e.data.data;
         const metadata = new URLSearchParams({
           projectID: data.projectID,
@@ -39,6 +48,7 @@ const CreateDiagramDialog = () => {
         } catch (error) {
           console.error('Error inserting image with metadata', error);
           showAlertDialog('Error inserting image, please try again');
+          setIsInserting(false); 
         }
       }
     };
@@ -48,7 +58,7 @@ const CreateDiagramDialog = () => {
     return () => {
       window.removeEventListener('message', handleMessage);
     };
-  }, []);
+  }, [isInserting]);
 
   if (authStatus === 'idle' || authStatus === 'loading') {
     return (
@@ -88,17 +98,22 @@ const CreateDiagramDialog = () => {
   }
 
   return (
-    <div style={{ padding: '3px', overflowX: 'hidden', height: '100%' }}>
-      <iframe
-        src={diagramsUrl}
-        title="diagrams"
-        style={{
-          border: 'none',
-          width: '100%',
-          height: '96.5vh',
-        }}
-      />
-    </div>
+    <>
+      {isInserting && <LoadingOverlay />}
+      <div style={{ padding: '3px', overflowX: 'hidden', height: '100%' }}>
+        <iframe
+          src={diagramsUrl}
+          title="diagrams"
+          style={{
+            border: 'none',
+            width: '100%',
+            height: '96.5vh',
+            opacity: isInserting ? 0.5 : 1,
+            pointerEvents: isInserting ? 'none' : 'auto',
+          }}
+        />
+      </div>
+    </>
   );
 };
 
diff --git a/src/client/edit-diagram-dialog/components/edit-diagram-dialog.tsx b/src/client/edit-diagram-dialog/components/edit-diagram-dialog.tsx
index 0dec079..adba161 100644
--- a/src/client/edit-diagram-dialog/components/edit-diagram-dialog.tsx
+++ b/src/client/edit-diagram-dialog/components/edit-diagram-dialog.tsx
@@ -3,10 +3,12 @@ import { serverFunctions } from '../../utils/serverFunctions';
 import { buildUrl, handleDialogClose } from '../../utils/helpers';
 import useAuth from '../../hooks/useAuth';
 import { showAlertDialog } from '../../utils/alert';
+import LoadingOverlay from '../../components/loading-overlay';
 
 const EditDiagramDialog = () => {
   const { authState, authStatus } = useAuth();
   const [diagramsUrl, setDiagramsUrl] = useState('');
+  const [isUpdating, setIsUpdating] = useState(false);
 
   useEffect(() => {
     if (!authState?.authorized) return;
@@ -41,6 +43,12 @@ const EditDiagramDialog = () => {
       const action = e.data.action;
       console.log('action', action);
       if (action === 'save') {
+        if (isUpdating) {
+          return;
+        }
+        
+        setIsUpdating(true);
+        
         const data = e.data.data;
         const metadata = new URLSearchParams({
           projectID: data.projectID,
@@ -57,6 +65,7 @@ const EditDiagramDialog = () => {
         } catch (error) {
           console.error('Error updating image with metadata', error);
           showAlertDialog('Error updating image, please try again');
+          setIsUpdating(false); 
         }
       }
     };
@@ -66,24 +75,29 @@ const EditDiagramDialog = () => {
     return () => {
       window.removeEventListener('message', handleMessage);
     };
-  }, []);
+  }, [isUpdating]);
 
   if (authStatus !== 'success' || !diagramsUrl) {
     return null;
   }
 
   return (
-    <div style={{ padding: '3px', overflowX: 'hidden', height: '100%' }}>
-      <iframe
-        src={diagramsUrl}
-        title="diagrams"
-        style={{
-          border: 'none',
-          width: '100%',
-          height: '96.5vh',
-        }}
-      />
-    </div>
+    <>
+      {isUpdating && <LoadingOverlay />}
+      <div style={{ padding: '3px', overflowX: 'hidden', height: '100%' }}>
+        <iframe
+          src={diagramsUrl}
+          title="diagrams"
+          style={{
+            border: 'none',
+            width: '100%',
+            height: '96.5vh',
+            opacity: isUpdating ? 0.5 : 1,
+            pointerEvents: isUpdating ? 'none' : 'auto',
+          }}
+        />
+      </div>
+    </>
   );
 };
 
diff --git a/src/client/select-diagram-dialog/components/select-diagram-dialog.tsx b/src/client/select-diagram-dialog/components/select-diagram-dialog.tsx
index dbe9f6c..1d25f17 100644
--- a/src/client/select-diagram-dialog/components/select-diagram-dialog.tsx
+++ b/src/client/select-diagram-dialog/components/select-diagram-dialog.tsx
@@ -4,12 +4,14 @@ import { serverFunctions } from '../../utils/serverFunctions';
 import useAuth from '../../hooks/useAuth';
 import { CircularProgress, Container, Typography } from '@mui/material';
 import { showAlertDialog } from '../../utils/alert';
+import LoadingOverlay from '../../components/loading-overlay';
 
 const editUrl = localStorage.getItem('editUrl');
 
 const SelectDiagramDialog = () => {
   const { authState, authStatus } = useAuth();
   const [diagramsUrl, setDiagramsUrl] = useState('');
+  const [isInserting, setIsInserting] = useState(false);
 
   useEffect(() => {
     if (!authState?.authorized) return;
@@ -31,6 +33,13 @@ const SelectDiagramDialog = () => {
     const handleMessage = async (e: MessageEvent) => {
       const action = e.data.action;
       if (action === 'save') {
+        if (isInserting) {
+          console.log('Already inserting diagram, ignoring duplicate click');
+          return;
+        }
+        
+        setIsInserting(true);
+        
         const data = e.data.data;
         const metadata = new URLSearchParams({
           projectID: data.projectID,
@@ -48,6 +57,7 @@ const SelectDiagramDialog = () => {
         } catch (error) {
           showAlertDialog('Error inserting image, please try again');
           console.error('Error inserting image with metadata', error);
+          setIsInserting(false); 
         }
       }
     };
@@ -57,7 +67,7 @@ const SelectDiagramDialog = () => {
     return () => {
       window.removeEventListener('message', handleMessage);
     };
-  }, []);
+  }, [isInserting]);
 
   if (authStatus === 'idle' || authStatus === 'loading') {
     return (
@@ -97,17 +107,22 @@ const SelectDiagramDialog = () => {
   }
 
   return (
-    <div style={{ padding: '3px', overflowX: 'hidden', height: '100%' }}>
-      <iframe
-        src={diagramsUrl}
-        title="diagrams"
-        style={{
-          border: 'none',
-          width: '100%',
-          height: '96.5vh',
-        }}
-      />
-    </div>
+    <>
+      {isInserting && <LoadingOverlay />}
+      <div style={{ padding: '3px', overflowX: 'hidden', height: '100%' }}>
+        <iframe
+          src={diagramsUrl}
+          title="diagrams"
+          style={{
+            border: 'none',
+            width: '100%',
+            height: '96.5vh',
+            opacity: isInserting ? 0.5 : 1,
+            pointerEvents: isInserting ? 'none' : 'auto',
+          }}
+        />
+      </div>
+    </>
   );
 };
 
diff --git a/src/client/sidebar/components/Sidebar.tsx b/src/client/sidebar/components/Sidebar.tsx
index 9b73999..567fe9d 100644
--- a/src/client/sidebar/components/Sidebar.tsx
+++ b/src/client/sidebar/components/Sidebar.tsx
@@ -199,7 +199,6 @@ const Sidebar = () => {
   const handleEditDiagram = async (altDescription: string) => {
     try {
       await serverFunctions.selectChartImage(altDescription);
-
       await serverFunctions.openEditDiagramDialog();
     } catch (error) {
       console.error('Error editing diagram', error);
@@ -459,7 +458,7 @@ const Sidebar = () => {
                     border: 'none',
                     marginTop: '20px',
                     width: '260px',
-                    height: 'calc(100vh - 520px)',
+                    height: 'calc(100vh - 440px)',
                     display: tab === 0 ? 'block' : 'none',
                   }}
                 />
@@ -583,7 +582,7 @@ const Sidebar = () => {
                 rel="noreferrer"
                 style={{ color: '#1E1A2E' }}
               >
-                Copyright © 2024 Mermaid Chart
+                Copyright © 2025 Mermaid Chart
               </a>
             </Typography>
           </Container>
diff --git a/src/server/ui.js b/src/server/ui.js
index 79c7b09..e5d9a02 100644
--- a/src/server/ui.js
+++ b/src/server/ui.js
@@ -44,8 +44,8 @@ export function openCreateDiagramDialog() {
       }, false);
     </script>`
     )
-    .setWidth(1366)
-    .setHeight(768);
+    .setWidth(1600)
+    .setHeight(900);
   DocumentApp.getUi().showModalDialog(html, 'Create new diagram');
 }
 
@@ -68,8 +68,8 @@ export function openEditDiagramDialog() {
       }, false);
     </script>`
     )
-    .setWidth(1366)
-    .setHeight(768);
+    .setWidth(1600)
+    .setHeight(900);
 
   DocumentApp.getUi().showModalDialog(html, 'Edit Diagram');
 }
@@ -85,8 +85,8 @@ export function openPreviewDiagramDialog() {
       }, false);
     </script>`
     )
-    .setWidth(1366)
-    .setHeight(768);
+    .setWidth(1600)
+    .setHeight(900);
 
   DocumentApp.getUi().showModalDialog(html, 'Preview Diagram');
 }
@@ -102,8 +102,8 @@ export function openEditDiagramDialogWithUrl() {
       }, false);
     </script>`
     )
-    .setWidth(1366)
-    .setHeight(768);
+    .setWidth(1600)
+    .setHeight(900);
 
   DocumentApp.getUi().showModalDialog(html, 'Edit Diagram');
 }
@@ -119,8 +119,8 @@ export function openSelectDiagramDialog() {
       }, false);
     </script>`
     )
-    .setWidth(1366)
-    .setHeight(768);
+    .setWidth(1600)
+    .setHeight(900);
   DocumentApp.getUi().showModalDialog(html, 'Select Diagram');
 }
 

From a1d1b837f160683230c2378eba7331aee1881271 Mon Sep 17 00:00:00 2001
From: Almoizs-1310 <almoiz@mermaidchart.com>
Date: Tue, 9 Dec 2025 19:04:14 +0530
Subject: [PATCH 4/7] Fix lint issue

---
 .../components/create-diagram-dialog.tsx                    | 6 +++---
 .../edit-diagram-dialog/components/edit-diagram-dialog.tsx  | 6 +++---
 .../components/select-diagram-dialog.tsx                    | 6 +++---
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/client/create-diagram-dialog/components/create-diagram-dialog.tsx b/src/client/create-diagram-dialog/components/create-diagram-dialog.tsx
index 6e0e49c..a378e6c 100644
--- a/src/client/create-diagram-dialog/components/create-diagram-dialog.tsx
+++ b/src/client/create-diagram-dialog/components/create-diagram-dialog.tsx
@@ -28,9 +28,9 @@ const CreateDiagramDialog = () => {
           console.log('Already inserting diagram, ignoring duplicate click');
           return;
         }
-        
+
         setIsInserting(true);
-        
+
         const data = e.data.data;
         const metadata = new URLSearchParams({
           projectID: data.projectID,
@@ -48,7 +48,7 @@ const CreateDiagramDialog = () => {
         } catch (error) {
           console.error('Error inserting image with metadata', error);
           showAlertDialog('Error inserting image, please try again');
-          setIsInserting(false); 
+          setIsInserting(false);
         }
       }
     };
diff --git a/src/client/edit-diagram-dialog/components/edit-diagram-dialog.tsx b/src/client/edit-diagram-dialog/components/edit-diagram-dialog.tsx
index adba161..6f1c989 100644
--- a/src/client/edit-diagram-dialog/components/edit-diagram-dialog.tsx
+++ b/src/client/edit-diagram-dialog/components/edit-diagram-dialog.tsx
@@ -46,9 +46,9 @@ const EditDiagramDialog = () => {
         if (isUpdating) {
           return;
         }
-        
+
         setIsUpdating(true);
-        
+
         const data = e.data.data;
         const metadata = new URLSearchParams({
           projectID: data.projectID,
@@ -65,7 +65,7 @@ const EditDiagramDialog = () => {
         } catch (error) {
           console.error('Error updating image with metadata', error);
           showAlertDialog('Error updating image, please try again');
-          setIsUpdating(false); 
+          setIsUpdating(false);
         }
       }
     };
diff --git a/src/client/select-diagram-dialog/components/select-diagram-dialog.tsx b/src/client/select-diagram-dialog/components/select-diagram-dialog.tsx
index 1d25f17..bac275f 100644
--- a/src/client/select-diagram-dialog/components/select-diagram-dialog.tsx
+++ b/src/client/select-diagram-dialog/components/select-diagram-dialog.tsx
@@ -37,9 +37,9 @@ const SelectDiagramDialog = () => {
           console.log('Already inserting diagram, ignoring duplicate click');
           return;
         }
-        
+
         setIsInserting(true);
-        
+
         const data = e.data.data;
         const metadata = new URLSearchParams({
           projectID: data.projectID,
@@ -57,7 +57,7 @@ const SelectDiagramDialog = () => {
         } catch (error) {
           showAlertDialog('Error inserting image, please try again');
           console.error('Error inserting image with metadata', error);
-          setIsInserting(false); 
+          setIsInserting(false);
         }
       }
     };

From e08dc679f4f938e07905d73391c02f48b36d17b3 Mon Sep 17 00:00:00 2001
From: Almoizs-1310 <almoiz@mermaidchart.com>
Date: Thu, 11 Dec 2025 18:35:40 +0530
Subject: [PATCH 5/7] Added loader for better visuability

---
 .../components/create-diagram-dialog.tsx      | 48 ++++++++++--
 .../components/edit-diagram-dialog.tsx        | 76 ++++++++++++++++++-
 .../components/select-diagram-dialog.tsx      | 48 ++++++++++--
 src/client/sidebar/components/Sidebar.tsx     | 39 ++++++++--
 4 files changed, 192 insertions(+), 19 deletions(-)

diff --git a/src/client/create-diagram-dialog/components/create-diagram-dialog.tsx b/src/client/create-diagram-dialog/components/create-diagram-dialog.tsx
index a378e6c..350d5ae 100644
--- a/src/client/create-diagram-dialog/components/create-diagram-dialog.tsx
+++ b/src/client/create-diagram-dialog/components/create-diagram-dialog.tsx
@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 import { buildUrl, handleDialogClose } from '../../utils/helpers';
 import { serverFunctions } from '../../utils/serverFunctions';
 import useAuth from '../../hooks/useAuth';
-import { CircularProgress, Container, Typography } from '@mui/material';
+import { CircularProgress, Container, Typography, Box } from '@mui/material';
 import { showAlertDialog } from '../../utils/alert';
 import LoadingOverlay from '../../components/loading-overlay';
 
@@ -10,6 +10,7 @@ const CreateDiagramDialog = () => {
   const { authState, authStatus } = useAuth();
   const [diagramsUrl, setDiagramsUrl] = useState('');
   const [isInserting, setIsInserting] = useState(false);
+  const [iframeLoading, setIframeLoading] = useState(true);
 
   useEffect(() => {
     if (!authState?.authorized) return;
@@ -60,18 +61,21 @@ const CreateDiagramDialog = () => {
     };
   }, [isInserting]);
 
+  const handleIframeLoad = () => {
+    setIframeLoading(false);
+  };
+
   if (authStatus === 'idle' || authStatus === 'loading') {
     return (
       <Container
         sx={{
           display: 'flex',
-          flexDirection: 'column',
           alignItems: 'center',
           justifyContent: 'center',
           height: '96.5vh',
         }}
       >
-        <CircularProgress />
+        <CircularProgress size={40} />
       </Container>
     );
   }
@@ -87,19 +91,52 @@ const CreateDiagramDialog = () => {
           height: '96.5vh',
         }}
       >
-        <Typography variant="h5" gutterBottom my={2} textAlign="center">
+        <Typography variant="h6" gutterBottom textAlign="center">
           Error
         </Typography>
-        <Typography paragraph textAlign="center">
+        <Typography variant="body2" textAlign="center">
           Something went wrong. Please try again later.
         </Typography>
       </Container>
     );
   }
 
+  if (!diagramsUrl) {
+    return (
+      <Container
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          height: '96.5vh',
+        }}
+      >
+        <CircularProgress size={40} />
+      </Container>
+    );
+  }
+
   return (
     <>
       {isInserting && <LoadingOverlay />}
+      {iframeLoading && (
+        <Box
+          sx={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: 'rgba(255, 255, 255, 0.9)',
+            zIndex: 1000,
+          }}
+        >
+          <CircularProgress size={40} />
+        </Box>
+      )}
       <div style={{ padding: '3px', overflowX: 'hidden', height: '100%' }}>
         <iframe
           src={diagramsUrl}
@@ -111,6 +148,7 @@ const CreateDiagramDialog = () => {
             opacity: isInserting ? 0.5 : 1,
             pointerEvents: isInserting ? 'none' : 'auto',
           }}
+          onLoad={handleIframeLoad}
         />
       </div>
     </>
diff --git a/src/client/edit-diagram-dialog/components/edit-diagram-dialog.tsx b/src/client/edit-diagram-dialog/components/edit-diagram-dialog.tsx
index 6f1c989..decc23a 100644
--- a/src/client/edit-diagram-dialog/components/edit-diagram-dialog.tsx
+++ b/src/client/edit-diagram-dialog/components/edit-diagram-dialog.tsx
@@ -4,11 +4,13 @@ import { buildUrl, handleDialogClose } from '../../utils/helpers';
 import useAuth from '../../hooks/useAuth';
 import { showAlertDialog } from '../../utils/alert';
 import LoadingOverlay from '../../components/loading-overlay';
+import { CircularProgress, Container, Typography, Box } from '@mui/material';
 
 const EditDiagramDialog = () => {
   const { authState, authStatus } = useAuth();
   const [diagramsUrl, setDiagramsUrl] = useState('');
   const [isUpdating, setIsUpdating] = useState(false);
+  const [iframeLoading, setIframeLoading] = useState(true);
 
   useEffect(() => {
     if (!authState?.authorized) return;
@@ -77,13 +79,82 @@ const EditDiagramDialog = () => {
     };
   }, [isUpdating]);
 
-  if (authStatus !== 'success' || !diagramsUrl) {
-    return null;
+  const handleIframeLoad = () => {
+    setIframeLoading(false);
+  };
+
+  if (authStatus === 'idle' || authStatus === 'loading') {
+    return (
+      <Container
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          height: '96.5vh',
+        }}
+      >
+        <CircularProgress size={40} />
+      </Container>
+    );
+  }
+
+  if (authStatus === 'error') {
+    return (
+      <Container
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          height: '96.5vh',
+        }}
+      >
+        <Typography variant="h6" gutterBottom textAlign="center">
+          Error
+        </Typography>
+        <Typography variant="body2" textAlign="center">
+          Something went wrong. Please try again later.
+        </Typography>
+      </Container>
+    );
+  }
+
+  if (!diagramsUrl) {
+    return (
+      <Container
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          height: '96.5vh',
+        }}
+      >
+        <CircularProgress size={40} />
+      </Container>
+    );
   }
 
   return (
     <>
       {isUpdating && <LoadingOverlay />}
+      {iframeLoading && (
+        <Box
+          sx={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: 'rgba(255, 255, 255, 0.9)',
+            zIndex: 1000,
+          }}
+        >
+          <CircularProgress size={40} />
+        </Box>
+      )}
       <div style={{ padding: '3px', overflowX: 'hidden', height: '100%' }}>
         <iframe
           src={diagramsUrl}
@@ -95,6 +166,7 @@ const EditDiagramDialog = () => {
             opacity: isUpdating ? 0.5 : 1,
             pointerEvents: isUpdating ? 'none' : 'auto',
           }}
+          onLoad={handleIframeLoad}
         />
       </div>
     </>
diff --git a/src/client/select-diagram-dialog/components/select-diagram-dialog.tsx b/src/client/select-diagram-dialog/components/select-diagram-dialog.tsx
index bac275f..6d83b07 100644
--- a/src/client/select-diagram-dialog/components/select-diagram-dialog.tsx
+++ b/src/client/select-diagram-dialog/components/select-diagram-dialog.tsx
@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 import { buildUrl, handleDialogClose } from '../../utils/helpers';
 import { serverFunctions } from '../../utils/serverFunctions';
 import useAuth from '../../hooks/useAuth';
-import { CircularProgress, Container, Typography } from '@mui/material';
+import { CircularProgress, Container, Typography, Box } from '@mui/material';
 import { showAlertDialog } from '../../utils/alert';
 import LoadingOverlay from '../../components/loading-overlay';
 
@@ -12,6 +12,7 @@ const SelectDiagramDialog = () => {
   const { authState, authStatus } = useAuth();
   const [diagramsUrl, setDiagramsUrl] = useState('');
   const [isInserting, setIsInserting] = useState(false);
+  const [iframeLoading, setIframeLoading] = useState(true);
 
   useEffect(() => {
     if (!authState?.authorized) return;
@@ -69,18 +70,21 @@ const SelectDiagramDialog = () => {
     };
   }, [isInserting]);
 
+  const handleIframeLoad = () => {
+    setIframeLoading(false);
+  };
+
   if (authStatus === 'idle' || authStatus === 'loading') {
     return (
       <Container
         sx={{
           display: 'flex',
-          flexDirection: 'column',
           alignItems: 'center',
           justifyContent: 'center',
           height: '96.5vh',
         }}
       >
-        <CircularProgress />
+        <CircularProgress size={40} />
       </Container>
     );
   }
@@ -96,19 +100,52 @@ const SelectDiagramDialog = () => {
           height: '96.5vh',
         }}
       >
-        <Typography variant="h5" gutterBottom my={2} textAlign="center">
+        <Typography variant="h6" gutterBottom textAlign="center">
           Error
         </Typography>
-        <Typography paragraph textAlign="center">
+        <Typography variant="body2" textAlign="center">
           Something went wrong. Please try again later.
         </Typography>
       </Container>
     );
   }
 
+  if (!diagramsUrl) {
+    return (
+      <Container
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          height: '96.5vh',
+        }}
+      >
+        <CircularProgress size={40} />
+      </Container>
+    );
+  }
+
   return (
     <>
       {isInserting && <LoadingOverlay />}
+      {iframeLoading && (
+        <Box
+          sx={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: 'rgba(255, 255, 255, 0.9)',
+            zIndex: 1000,
+          }}
+        >
+          <CircularProgress size={40} />
+        </Box>
+      )}
       <div style={{ padding: '3px', overflowX: 'hidden', height: '100%' }}>
         <iframe
           src={diagramsUrl}
@@ -120,6 +157,7 @@ const SelectDiagramDialog = () => {
             opacity: isInserting ? 0.5 : 1,
             pointerEvents: isInserting ? 'none' : 'auto',
           }}
+          onLoad={handleIframeLoad}
         />
       </div>
     </>
diff --git a/src/client/sidebar/components/Sidebar.tsx b/src/client/sidebar/components/Sidebar.tsx
index 567fe9d..131f564 100644
--- a/src/client/sidebar/components/Sidebar.tsx
+++ b/src/client/sidebar/components/Sidebar.tsx
@@ -10,7 +10,6 @@ import {
   Tab,
 } from '@mui/material';
 import { serverFunctions } from '../../utils/serverFunctions';
-import LoadingOverlay from '../../components/loading-overlay';
 import { buildUrl } from '../../utils/helpers';
 import useAuth from '../../hooks/useAuth';
 import Button from '../../components/button';
@@ -228,13 +227,12 @@ const Sidebar = () => {
       <Container
         sx={{
           display: 'flex',
-          flexDirection: 'column',
           alignItems: 'center',
           justifyContent: 'center',
           height: 'calc(100vh - 114px)',
         }}
       >
-        <CircularProgress />
+        <CircularProgress size={40} />
       </Container>
     );
   }
@@ -250,10 +248,10 @@ const Sidebar = () => {
           height: 'calc(100vh - 114px)',
         }}
       >
-        <Typography variant="h5" gutterBottom my={2} textAlign="center">
+        <Typography variant="h6" gutterBottom textAlign="center">
           Error
         </Typography>
-        <Typography paragraph textAlign="center">
+        <Typography variant="body2" textAlign="center">
           Something went wrong. Please try again later.
         </Typography>
       </Container>
@@ -262,7 +260,24 @@ const Sidebar = () => {
 
   return (
     <>
-      {overlayEnabled && <LoadingOverlay />}
+      {overlayEnabled && (
+        <Box
+          sx={{
+            position: 'fixed',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+            backgroundColor: 'rgba(255, 255, 255, 0.8)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            zIndex: 9999,
+          }}
+        >
+          <CircularProgress size={40} />
+        </Box>
+      )}
       <Container
         sx={{
           display: 'flex',
@@ -476,7 +491,16 @@ const Sidebar = () => {
                 >
                   {chartImagesState === 'loading' &&
                     chartImages.length === 0 && (
-                      <CircularProgress sx={{ justifySelf: 'center' }} />
+                      <Box
+                        sx={{
+                          display: 'flex',
+                          justifyContent: 'center',
+                          alignItems: 'center',
+                          height: '100px',
+                        }}
+                      >
+                        <CircularProgress size={40} />
+                      </Box>
                     )}
 
                   {chartImages.length > 0 &&
@@ -574,6 +598,7 @@ const Sidebar = () => {
               sx={{
                 fontFamily:
                   'Recursive, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+                fontSize: '14px',
               }}
             >
               <a

From 34510db3844d1632c8c246c918dde091bb3f70ba Mon Sep 17 00:00:00 2001
From: Almoizs-1310 <almoiz@mermaidchart.com>
Date: Thu, 11 Dec 2025 20:05:10 +0530
Subject: [PATCH 6/7] Fix the issue where large diagrams were not able to get
 inserted into google docs

---
 .../components/create-diagram-dialog.tsx      | 10 +++-
 .../components/edit-diagram-dialog.tsx        | 10 +++-
 .../components/select-diagram-dialog.tsx      | 10 +++-
 src/client/utils/helpers.ts                   | 59 +++++++++++++++++++
 4 files changed, 83 insertions(+), 6 deletions(-)

diff --git a/src/client/create-diagram-dialog/components/create-diagram-dialog.tsx b/src/client/create-diagram-dialog/components/create-diagram-dialog.tsx
index 350d5ae..7a02c6e 100644
--- a/src/client/create-diagram-dialog/components/create-diagram-dialog.tsx
+++ b/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();
diff --git a/src/client/edit-diagram-dialog/components/edit-diagram-dialog.tsx b/src/client/edit-diagram-dialog/components/edit-diagram-dialog.tsx
index decc23a..5961ac5 100644
--- a/src/client/edit-diagram-dialog/components/edit-diagram-dialog.tsx
+++ b/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();
diff --git a/src/client/select-diagram-dialog/components/select-diagram-dialog.tsx b/src/client/select-diagram-dialog/components/select-diagram-dialog.tsx
index 6d83b07..d54eda5 100644
--- a/src/client/select-diagram-dialog/components/select-diagram-dialog.tsx
+++ b/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();
diff --git a/src/client/utils/helpers.ts b/src/client/utils/helpers.ts
index a2025ff..d2e004c 100644
--- a/src/client/utils/helpers.ts
+++ b/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;
+  }
+};

From 59304c50d0b2138ca5ef0325455be837c94cb271 Mon Sep 17 00:00:00 2001
From: Almoizs-1310 <almoiz@mermaidchart.com>
Date: Wed, 17 Dec 2025 16:08:43 +0530
Subject: [PATCH 7/7] updated the project with new scriptId and new version

---
 .clasp.json                               |  6 +++---
 package.json                              | 10 +++++-----
 src/client/sidebar/components/Sidebar.tsx |  2 +-
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/.clasp.json b/.clasp.json
index 93e6d50..304a7d0 100644
--- a/.clasp.json
+++ b/.clasp.json
@@ -1,7 +1,7 @@
 {
+  "scriptId": "1IzIEW1uGP4WWdowrlYyNEwhasdXObby_Lik-xwRXn3uWFUitm19SHAhU",
   "rootDir": "dist",
-  "scriptId": "1EBKJNiPs_XxntcBHxMKJgfBr7089AHhT3boz7_Lkc6AD0hjsQavkIjxz",
   "parentId": [
-    "1UAVn7sP1pTutyOM2i95jxQz6sjVr2ZrxhG82uLIdd70"
+    "1NVNWs4Wdj2ib6hhPgq1kzA-BMtydvk_SnxoK1K2yX5o"
   ]
-}
\ No newline at end of file
+}
diff --git a/package.json b/package.json
index 37b4a80..8f34e1f 100644
--- a/package.json
+++ b/package.json
@@ -1,14 +1,14 @@
 {
   "name": "google-plugin",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
     "lint": "eslint .",
-    "login": "clasp login",
-    "setup": "rimraf .clasp.json && mkdirp dist && clasp create --type sheets --title \"My React Project\" --rootDir ./dist && mv ./dist/.clasp.json ./.clasp.json && rimraf dist",
-    "open": "clasp open --addon",
-    "push": "clasp push",
+    "login": "npx clasp login",
+    "setup": "rimraf .clasp.json && mkdirp dist && npx clasp create --type sheets --title \"My React Project\" --rootDir ./dist && mv ./dist/.clasp.json ./.clasp.json && rimraf dist",
+    "open": "npx clasp open --addon",
+    "push": "npx clasp push",
     "setup:https": "mkdirp certs && mkcert -key-file ./certs/key.pem -cert-file ./certs/cert.pem localhost 127.0.0.1",
     "build:dev": "tsc && vite build --mode development",
     "build:test": "tsc && NODE_ENV=test vite build --mode test",
diff --git a/src/client/sidebar/components/Sidebar.tsx b/src/client/sidebar/components/Sidebar.tsx
index 131f564..528bf70 100644
--- a/src/client/sidebar/components/Sidebar.tsx
+++ b/src/client/sidebar/components/Sidebar.tsx
@@ -571,7 +571,7 @@ const Sidebar = () => {
                             'Recursive, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
                         }}
                       >
-                        No selected diagrams
+                        No diagrams found in this document
                       </Typography>
                     )}
                 </Container>