Drawio: Started browser drawing backup store system

Adds just the part to store image data, and remove on successfull save.
Alters save events to properly throw upon error.
Adds IDB-Keyval library for local large-size store.
For #4421

package-lock.json

@@ -4,7 +4,6 @@
   "requires": true,
   "packages": {
     "": {
-      "name": "bookstack",
       "dependencies": {
         "@codemirror/commands": "^6.2.4",
         "@codemirror/lang-css": "^6.2.1",
@@ -23,6 +22,7 @@
         "@ssddanbrown/codemirror-lang-smarty": "^1.0.0",
         "@ssddanbrown/codemirror-lang-twig": "^1.0.0",
         "codemirror": "^6.0.1",
+        "idb-keyval": "^6.2.1",
         "markdown-it": "^13.0.1",
         "markdown-it-task-lists": "^2.1.1",
         "snabbdom": "^3.5.1",
@@ -2301,6 +2301,11 @@
       "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==",
       "dev": true
     },
+    "node_modules/idb-keyval": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/idb-keyval/-/idb-keyval-6.2.1.tgz",
+      "integrity": "sha512-8Sb3veuYCyrZL+VBt9LJfZjLUPWVvqn8tG28VqYNFCo43KHcKuq+b4EiXGeuaLAQWL2YmyDgMp2aSpH9JHsEQg=="
+    },
     "node_modules/ignore": {
       "version": "5.2.4",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz",

package.json

@@ -46,6 +46,7 @@
     "@ssddanbrown/codemirror-lang-smarty": "^1.0.0",
     "@ssddanbrown/codemirror-lang-twig": "^1.0.0",
     "codemirror": "^6.0.1",
+    "idb-keyval": "^6.2.1",
     "markdown-it": "^13.0.1",
     "markdown-it-task-lists": "^2.1.1",
     "snabbdom": "^3.5.1",

resources/js/markdown/actions.js

@@ -82,18 +82,20 @@ export class Actions {
 
         const selectionRange = this.#getSelectionRange();
 
-        DrawIO.show(url, () => Promise.resolve(''), pngData => {
+        DrawIO.show(url, () => Promise.resolve(''), async pngData => {
             const data = {
                 image: pngData,
                 uploaded_to: Number(this.editor.config.pageId),
             };
 
-            window.$http.post('/images/drawio', data).then(resp => {
+            try {
+                const resp = await window.$http.post('/images/drawio', data);
                 this.#insertDrawing(resp.data, selectionRange);
                 DrawIO.close();
-            }).catch(err => {
+            } catch (err) {
                 this.handleDrawingUploadError(err);
-            });
+                throw new Error(`Failed to save image with error: ${err}`);
+            }
         });
     }
 
@@ -112,13 +114,14 @@ export class Actions {
         const selectionRange = this.#getSelectionRange();
         const drawingId = imgContainer.getAttribute('drawio-diagram');
 
-        DrawIO.show(drawioUrl, () => DrawIO.load(drawingId), pngData => {
+        DrawIO.show(drawioUrl, () => DrawIO.load(drawingId), async pngData => {
             const data = {
                 image: pngData,
                 uploaded_to: Number(this.editor.config.pageId),
             };
 
-            window.$http.post('/images/drawio', data).then(resp => {
+            try {
+                const resp = await window.$http.post('/images/drawio', data);
                 const newText = `<div drawio-diagram="${resp.data.id}"><img src="${resp.data.url}"></div>`;
                 const newContent = this.#getText().split('\n').map(line => {
                     if (line.indexOf(`drawio-diagram="${drawingId}"`) !== -1) {
@@ -128,9 +131,10 @@ export class Actions {
                 }).join('\n');
                 this.#setText(newContent, selectionRange);
                 DrawIO.close();
-            }).catch(err => {
+            } catch (err) {
                 this.handleDrawingUploadError(err);
-            });
+                throw new Error(`Failed to save image with error: ${err}`);
+            }
         });
     }
 

resources/js/services/drawio.js

@@ -1,17 +1,22 @@
 // Docs: https://www.diagrams.net/doc/faq/embed-mode
+import * as store from './store';
 
 let iFrame = null;
 let lastApprovedOrigin;
-let onInit; let
-    onSave;
+let onInit;
+let onSave;
+const saveBackupKey = 'last-drawing-save';
 
 function drawPostMessage(data) {
     iFrame.contentWindow.postMessage(JSON.stringify(data), lastApprovedOrigin);
 }
 
 function drawEventExport(message) {
+    store.set(saveBackupKey, message.data);
     if (onSave) {
-        onSave(message.data);
+        onSave(message.data).then(() => {
+            store.del(saveBackupKey);
+        });
     }
 }
 
@@ -64,9 +69,11 @@ function drawReceive(event) {
 
 /**
  * Show the draw.io editor.
+ * onSaveCallback must return a promise that resolves on successful save and errors on failure.
+ * onInitCallback must return a promise with the xml to load for the editor.
  * @param {String} drawioUrl
- * @param {Function} onInitCallback - Must return a promise with the xml to load for the editor.
- * @param {Function} onSaveCallback - Is called with the drawing data on save.
+ * @param {Function<Promise<String>>} onInitCallback
+ * @param {Function<Promise>} onSaveCallback - Is called with the drawing data on save.
  */
 export function show(drawioUrl, onInitCallback, onSaveCallback) {
     onInit = onInitCallback;

resources/js/services/store.js

@@ -0,0 +1 @@
+export { get, set, del } from 'idb-keyval';

resources/js/services/util.js

@@ -70,3 +70,14 @@ export function uniqueId() {
     const S4 = () => (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
     return (`${S4() + S4()}-${S4()}-${S4()}-${S4()}-${S4()}${S4()}${S4()}`);
 }
+
+/**
+ * Create a promise that resolves after the given time.
+ * @param {int} timeMs
+ * @returns {Promise}
+ */
+export function wait(timeMs) {
+    return new Promise(res => {
+        setTimeout(res, timeMs);
+    });
+}

resources/js/wysiwyg/plugin-drawio.js

@@ -1,4 +1,5 @@
 import * as DrawIO from '../services/drawio';
+import {wait} from '../services/util';
 
 let pageEditor = null;
 let currentNode = null;
@@ -57,24 +58,27 @@ async function updateContent(pngData) {
             });
         } catch (err) {
             handleUploadError(err);
+            throw new Error(`Failed to save image with error: ${err}`);
         }
         return;
     }
 
-    setTimeout(async () => {
-        pageEditor.insertContent(`<div drawio-diagram contenteditable="false"><img src="${loadingImage}" id="${id}"></div>`);
-        DrawIO.close();
-        try {
-            const img = await DrawIO.upload(pngData, options.pageId);
-            pageEditor.undoManager.transact(() => {
-                pageEditor.dom.setAttrib(id, 'src', img.url);
-                pageEditor.dom.get(id).parentNode.setAttribute('drawio-diagram', img.id);
-            });
-        } catch (err) {
-            pageEditor.dom.remove(id);
-            handleUploadError(err);
-        }
-    }, 5);
+    await wait(5);
+
+    pageEditor.insertContent(`<div drawio-diagram contenteditable="false"><img src="${loadingImage}" id="${id}"></div>`);
+    DrawIO.close();
+
+    try {
+        const img = await DrawIO.upload(pngData, options.pageId);
+        pageEditor.undoManager.transact(() => {
+            pageEditor.dom.setAttrib(id, 'src', img.url);
+            pageEditor.dom.get(id).parentNode.setAttribute('drawio-diagram', img.id);
+        });
+    } catch (err) {
+        pageEditor.dom.remove(id);
+        handleUploadError(err);
+        throw new Error(`Failed to save image with error: ${err}`);
+    }
 }
 
 function drawingInit() {