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

diff --git a/package-lock.json b/package-lock.json
index c8645fa4cb8ed05369de0cf02929d9ef26c5c823..8ad1f2323756935dc257755ae9685cab345907b1 100644 (file)
--- a/package-lock.json
+++ b/package-lock.json
@@ -4,7 +4,6 @@
   "requires": true,
   "packages": {
     "": {
   "requires": true,
   "packages": {
     "": {

-      "name": "bookstack",

       "dependencies": {
         "@codemirror/commands": "^6.2.4",
         "@codemirror/lang-css": "^6.2.1",
       "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",
         "@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",
         "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
     },
       "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",
     "node_modules/ignore": {
       "version": "5.2.4",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz",

diff --git a/package.json b/package.json
index f9446ab3b0fccb281071735ce7d33d86ec592996..21f2b1752a75a9ec4154c1d7230a2012c0e177a5 100644 (file)
--- a/package.json
+++ b/package.json
@@ -46,6 +46,7 @@
     "@ssddanbrown/codemirror-lang-smarty": "^1.0.0",
     "@ssddanbrown/codemirror-lang-twig": "^1.0.0",
     "codemirror": "^6.0.1",
     "@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",
     "markdown-it": "^13.0.1",
     "markdown-it-task-lists": "^2.1.1",
     "snabbdom": "^3.5.1",

diff --git a/resources/js/markdown/actions.js b/resources/js/markdown/actions.js
index f66b7921dea70b6951857d5c259592d0a51220ef..3f9df47788f0c7b6cb70092310e740e4d4791cfa 100644 (file)
--- a/resources/js/markdown/actions.js
+++ b/resources/js/markdown/actions.js
@@ -82,18 +82,20 @@ export class Actions {
 
         const selectionRange = this.#getSelectionRange();
 
 
         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),
             };
 
             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();
                 this.#insertDrawing(resp.data, selectionRange);
                 DrawIO.close();

-            }).catch(err => {
+            } catch (err) {

                 this.handleDrawingUploadError(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');
 
         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),
             };
 
             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) {
                 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();
                 }).join('\n');
                 this.#setText(newContent, selectionRange);
                 DrawIO.close();

-            }).catch(err => {
+            } catch (err) {

                 this.handleDrawingUploadError(err);
                 this.handleDrawingUploadError(err);

-            });
+                throw new Error(`Failed to save image with error: ${err}`);
+            }

         });
     }
 
         });
     }
 

diff --git a/resources/js/services/drawio.js b/resources/js/services/drawio.js
index efc071d3ec4b51a94b4060329b633d340b72ad97..10943ab5711652613eef7a08628023db5c9379be 100644 (file)
--- a/resources/js/services/drawio.js
+++ b/resources/js/services/drawio.js
@@ -1,17 +1,22 @@
 // Docs: https://www.diagrams.net/doc/faq/embed-mode
 // Docs: https://www.diagrams.net/doc/faq/embed-mode

+import * as store from './store';

 
 let iFrame = null;
 let lastApprovedOrigin;
 
 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) {
 
 function drawPostMessage(data) {
     iFrame.contentWindow.postMessage(JSON.stringify(data), lastApprovedOrigin);
 }
 
 function drawEventExport(message) {

+    store.set(saveBackupKey, message.data);

     if (onSave) {
     if (onSave) {

-        onSave(message.data);
+        onSave(message.data).then(() => {
+            store.del(saveBackupKey);
+        });

     }
 }
 
     }
 }
 


@@ -64,9 +69,11 @@ function drawReceive(event) {
 
 /**
  * Show the draw.io editor.
 
 /**
  * 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 {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;
  */
 export function show(drawioUrl, onInitCallback, onSaveCallback) {
     onInit = onInitCallback;

diff --git a/resources/js/services/store.js b/resources/js/services/store.js
new file mode 100644 (file)
index 0000000..be41fc1
--- /dev/null
+++ b/resources/js/services/store.js
@@ -0,0 +1 @@
+export { get, set, del } from 'idb-keyval';

diff --git a/resources/js/services/util.js b/resources/js/services/util.js
index dd97d81aaf47113b301660794eda9b881d54e1e8..0a8966f15c638031e3a4c4685ebe8e6b2be93b47 100644 (file)
--- a/resources/js/services/util.js
+++ b/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()}`);
 }
     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);
+    });
+}

diff --git a/resources/js/wysiwyg/plugin-drawio.js b/resources/js/wysiwyg/plugin-drawio.js
index 7b1750786eafeb25bd51e9fa161ab1fe2f19c794..c98b1aa10c51fc697e55ca2dedfd2d7131065a31 100644 (file)
--- a/resources/js/wysiwyg/plugin-drawio.js
+++ b/resources/js/wysiwyg/plugin-drawio.js
@@ -1,4 +1,5 @@
 import * as DrawIO from '../services/drawio';
 import * as DrawIO from '../services/drawio';

+import {wait} from '../services/util';

 
 let pageEditor = null;
 let currentNode = null;
 
 let pageEditor = null;
 let currentNode = null;


@@ -57,24 +58,27 @@ async function updateContent(pngData) {
             });
         } catch (err) {
             handleUploadError(err);
             });
         } catch (err) {
             handleUploadError(err);

+            throw new Error(`Failed to save image with error: ${err}`);

         }
         return;
     }
 
         }
         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() {
 }
 
 function drawingInit() {