feat(mermaid): display an error when PNG export could not occur

src/public/app/services/utils.ts

@@ -650,9 +650,10 @@ function triggerDownload(fileName: string, dataUrl: string) {
  *
  * @param nameWithoutExtension the name of the file. The .png suffix is automatically added to it.
  * @param svgContent the content of the SVG file download.
- * @returns `true` if the operation succeeded (width/height present), or `false` if the download was not triggered.
+ * @returns a promise which resolves if the operation was successful, or rejects if it failed (permissions issue or some other issue).
  */
 function downloadSvgAsPng(nameWithoutExtension: string, svgContent: string) {
+    return new Promise<void>((resolve, reject) => {
         const mime = "image/svg+xml";
 
         // First, we need to determine the width and the height from the input SVG.
@@ -661,7 +662,8 @@ function downloadSvgAsPng(nameWithoutExtension: string, svgContent: string) {
         const height = svgDocument.documentElement?.getAttribute("height");
 
         if (!width || !height) {
-        return false;
+            reject();
+            return;
         }
 
         // Convert the image to a blob.
@@ -673,8 +675,8 @@ function downloadSvgAsPng(nameWithoutExtension: string, svgContent: string) {
         const imageEl = new Image();
         imageEl.width = parseFloat(width);
         imageEl.height = parseFloat(height);
-    imageEl.src = URL.createObjectURL(svgBlob);
         imageEl.onload = () => {
+            try {
                 // Draw the image with a canvas.
                 const canvasEl = document.createElement("canvas");
                 canvasEl.width = imageEl.width;
@@ -682,15 +684,24 @@ function downloadSvgAsPng(nameWithoutExtension: string, svgContent: string) {
                 document.body.appendChild(canvasEl);
 
                 const ctx = canvasEl.getContext("2d");
+                if (!ctx) {
+                    reject();
+                }
+
                 ctx?.drawImage(imageEl, 0, 0);
                 URL.revokeObjectURL(imageEl.src);
 
                 const imgUri = canvasEl.toDataURL("image/png")
                 triggerDownload(`${nameWithoutExtension}.png`, imgUri);
                 document.body.removeChild(canvasEl);
+                resolve();
+            } catch (e) {
+                console.warn(e);
+                reject();
+            }
         };
-
+        imageEl.src = URL.createObjectURL(svgBlob);
-    return true;
+    });
 }
 
 /**

src/public/app/widgets/type_widgets/abstract_svg_split_type_widget.ts

@@ -2,7 +2,9 @@ import type { EventData } from "../../components/app_context.js";
 import type FNote from "../../entities/fnote.js";
 import { t } from "../../services/i18n.js";
 import server from "../../services/server.js";
+import toast from "../../services/toast.js";
 import utils from "../../services/utils.js";
+import ws from "../../services/ws.js";
 import OnClickButtonWidget from "../buttons/onclick_button.js";
 import AbstractSplitTypeWidget from "./abstract_split_type_widget.js";
 
@@ -218,11 +220,18 @@ export default abstract class AbstractSvgSplitTypeWidget extends AbstractSplitTy
     }
 
     async exportPngEvent({ ntxId }: EventData<"exportPng">) {
+        console.log("Export to PNG", this.noteContext?.noteId, ntxId, this.svg);
         if (!this.isNoteContext(ntxId) || this.note?.type !== "mermaid" || !this.svg) {
+            console.log("Return");
             return;
         }
 
-        utils.downloadSvgAsPng(this.note.title, this.svg);
+        try {
+            await utils.downloadSvgAsPng(this.note.title, this.svg);
+        } catch (e) {
+            console.warn(e);
+            toast.showError(t("svg.export_to_png"));
+        }
     }
 
 }

src/public/translations/en/translation.json

@@ -1746,5 +1746,8 @@
   },
   "png_export_button": {
     "button_title": "Export diagram as PNG"
+  },
+  "svg": {
+    "export_to_png": "The diagram could not be exported to PNG."
   }
 }