feat: html2canvas -> htmlToImage and fix derick's bugs

package.json

@@ -26,7 +26,6 @@
         "highcharts": "^11.3.0",
         "highcharts-react-official": "^3.2.1",
         "html-to-image": "^1.11.11",
-        "html2canvas": "^1.4.1",
         "react": "^18.2.0",
         "react-devtools-core": "^5.0.0",
         "react-dom": "^18.2.0",

pnpm-lock.yaml

@@ -40,9 +40,6 @@ dependencies:
   html-to-image:
     specifier: ^1.11.11
     version: 1.11.11
-  html2canvas:
-    specifier: ^1.4.1
-    version: 1.4.1
   react:
     specifier: ^18.2.0
     version: 18.2.0
@@ -5866,11 +5863,6 @@ packages:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
     dev: true
 
-  /base64-arraybuffer@1.0.2:
-    resolution: {integrity: sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==}
-    engines: {node: '>= 0.6.0'}
-    dev: false
-
   /base64-js@1.5.1:
     resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
     dev: true
@@ -6563,12 +6555,6 @@ packages:
       postcss: 8.4.35
     dev: true
 
-  /css-line-break@2.1.0:
-    resolution: {integrity: sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==}
-    dependencies:
-      utrie: 1.0.2
-    dev: false
-
   /css-select@5.1.0:
     resolution: {integrity: sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==}
     dependencies:
@@ -8677,14 +8663,6 @@ packages:
     resolution: {integrity: sha512-9gux8QhvjRO/erSnDPv28noDZcPZmYE7e1vFsBLKLlRlKDSqNJYebj6Qz1TGd5lsRV+X+xYyjCKjuZdABinWjA==}
     dev: false
 
-  /html2canvas@1.4.1:
-    resolution: {integrity: sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==}
-    engines: {node: '>=8.0.0'}
-    dependencies:
-      css-line-break: 2.1.0
-      text-segmentation: 1.0.3
-    dev: false
-
   /htmlparser2@8.0.2:
     resolution: {integrity: sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==}
     dependencies:
@@ -12444,12 +12422,6 @@ packages:
       minimatch: 3.1.2
     dev: true
 
-  /text-segmentation@1.0.3:
-    resolution: {integrity: sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==}
-    dependencies:
-      utrie: 1.0.2
-    dev: false
-
   /text-table@0.2.0:
     resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
     dev: true
@@ -12992,12 +12964,6 @@ packages:
     engines: {node: '>= 0.4.0'}
     dev: true
 
-  /utrie@1.0.2:
-    resolution: {integrity: sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==}
-    dependencies:
-      base64-arraybuffer: 1.0.2
-    dev: false
-
   /uuid@9.0.1:
     resolution: {integrity: sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==}
     hasBin: true

src/views/components/common/CalendarGrid/CalendarGrid.tsx

@@ -1,7 +1,5 @@
 import React, { useRef } from 'react';
-// import html2canvas from 'html2canvas';
 import * as htmlToImage from 'html-to-image';
-import { toPng, toJpeg, toBlob, toPixelData, toSvg } from 'html-to-image';
 import { DAY_MAP } from 'src/shared/types/CourseMeeting';
 import { CalendarGridCourse } from 'src/views/hooks/useFlattenedCourseSchedule';
 import calIcon from 'src/assets/icons/cal.svg';
@@ -40,42 +38,36 @@ function CalendarGrid({ courseCells, saturdayClass }: React.PropsWithChildren<Pr
     const calendarRef = useRef(null); // Create a ref for the calendar grid
 
     const saveAsPNG = () => {
-        // if (calendarRef.current) {
+        htmlToImage
-        //     html2canvas(calendarRef.current).then(canvas => {
+            .toPng(calendarRef.current, {
-        //         // Create an a element to trigger download
+                backgroundColor: 'white',
-        //         const a = document.createElement('a');
+                style: {
-        //         a.href = canvas.toDataURL('image/png');
+                    background: 'white',
-        //         a.download = 'calendar.png';
+                    marginTop: '20px',
-        //         a.click();
+                    marginBottom: '20px',
-        //     });
+                    marginRight: '20px',
-        // }
+                    marginLeft: '20px',
-        htmlToImage.toPng(calendarRef.current, {
+                },
-            backgroundColor: "white",
-            style: { 
-            background: "white",
-            marginTop: "20px",
-            marginBottom: "20px",
-            marginRight: "20px",
-            marginLeft: "20px",}})
-        .then(function (dataUrl) {
-            var img = new Image();
-            img.src = dataUrl;
-            fetch(dataUrl)
-            .then(response => response.blob())
-            .then(blob => {
-                const href = window.URL.createObjectURL(blob);
-                const link = document.createElement('a');
-                link.href = href;
-                link.download = 'my-schedule.png';
-                document.body.appendChild(link);
-                link.click();
-                document.body.removeChild(link);
             })
-            .catch(error => console.error('Error downloading file:', error));
+            .then(dataUrl => {
-        })
+                let img = new Image();
-        .catch(function (error) {
+                img.src = dataUrl;
-            console.error('oops, something went wrong!', error);
+                fetch(dataUrl)
-        });
+                    .then(response => response.blob())
+                    .then(blob => {
+                        const href = window.URL.createObjectURL(blob);
+                        const link = document.createElement('a');
+                        link.href = href;
+                        link.download = 'my-schedule.png';
+                        document.body.appendChild(link);
+                        link.click();
+                        document.body.removeChild(link);
+                    })
+                    .catch(error => console.error('Error downloading file:', error));
+            })
+            .catch(error => {
+                console.error('oops, something went wrong!', error);
+            });
     };
 
     return (