Merge pull request #4457 from BookStackApp/drawing_backup_store

Browser-based drawing backup storage system

lang/en/entities.php

@@ -239,6 +239,8 @@ return [
     'pages_md_insert_drawing' => 'Insert Drawing',
     'pages_md_show_preview' => 'Show preview',
     'pages_md_sync_scroll' => 'Sync preview scroll',
+    'pages_drawing_unsaved' => 'Unsaved Drawing Found',
+    'pages_drawing_unsaved_confirm' => 'Unsaved drawing data was found from a previous failed drawing save attempt. Would you like to restore and continue editing this unsaved drawing?',
     'pages_not_in_chapter' => 'Page is not in a chapter',
     'pages_move' => 'Move Page',
     'pages_copy' => 'Copy Page',

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",

readme.md

@@ -140,9 +140,12 @@ Note: This is not an exhaustive list of all libraries and projects that would be
 * [OneLogin's SAML PHP Toolkit](https://github.com/onelogin/php-saml) - _[MIT](https://github.com/onelogin/php-saml/blob/master/LICENSE)_
 * [League/CommonMark](https://commonmark.thephpleague.com/) - _[BSD-3-Clause](https://github.com/thephpleague/commonmark/blob/2.2/LICENSE)_
 * [League/Flysystem](https://flysystem.thephpleague.com) - _[MIT](https://github.com/thephpleague/flysystem/blob/3.x/LICENSE)_
+* [League/html-to-markdown](https://github.com/thephpleague/html-to-markdown) - _[MIT](https://github.com/thephpleague/html-to-markdown/blob/master/LICENSE)_
+* [League/oauth2-client](https://oauth2-client.thephpleague.com/) - _[MIT](https://github.com/thephpleague/oauth2-client/blob/master/LICENSE)_
 * [pragmarx/google2fa](https://github.com/antonioribeiro/google2fa) - _[MIT](https://github.com/antonioribeiro/google2fa/blob/8.x/LICENSE.md)_
 * [Bacon/BaconQrCode](https://github.com/Bacon/BaconQrCode) - _[BSD-2-Clause](https://github.com/Bacon/BaconQrCode/blob/master/LICENSE)_
 * [phpseclib](https://github.com/phpseclib/phpseclib) - _[MIT](https://github.com/phpseclib/phpseclib/blob/master/LICENSE)_
 * [Clockwork](https://github.com/itsgoingd/clockwork) - _[MIT](https://github.com/itsgoingd/clockwork/blob/master/LICENSE)_
 * [PHPStan](https://phpstan.org/) & [Larastan](https://github.com/nunomaduro/larastan) - _[MIT](https://github.com/phpstan/phpstan/blob/master/LICENSE) and [MIT](https://github.com/nunomaduro/larastan/blob/master/LICENSE.md)_
 * [PHP_CodeSniffer](https://github.com/squizlabs/PHP_CodeSniffer) - _[BSD 3-Clause](https://github.com/squizlabs/PHP_CodeSniffer/blob/master/licence.txt)_
+* [JakeArchibald/IDB-Keyval](https://github.com/jakearchibald/idb-keyval) - _[Apache-2.0](https://github.com/jakearchibald/idb-keyval/blob/main/LICENCE)_

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);
+        });
     }
 }
 
@@ -63,15 +68,42 @@ function drawReceive(event) {
 }
 
 /**
- * Show the draw.io 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.
+ * Attempt to prompt and restore unsaved drawing content if existing.
+ * @returns {Promise<void>}
  */
-export function show(drawioUrl, onInitCallback, onSaveCallback) {
+async function attemptRestoreIfExists() {
+    const backupVal = await store.get(saveBackupKey);
+    const dialogEl = document.getElementById('unsaved-drawing-dialog');
+
+    if (!dialogEl) {
+        console.error('Missing expected unsaved-drawing dialog');
+    }
+
+    if (backupVal) {
+        /** @var {ConfirmDialog} */
+        const dialog = window.$components.firstOnElement(dialogEl, 'confirm-dialog');
+        const restore = await dialog.show();
+        if (restore) {
+            onInit = async () => backupVal;
+        }
+    }
+}
+
+/**
+ * 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.
+ * Will attempt to provide an option to restore unsaved changes if found to exist.
+ * @param {String} drawioUrl
+ * @param {Function<Promise<String>>} onInitCallback
+ * @param {Function<Promise>} onSaveCallback - Is called with the drawing data on save.
+ */
+export async function show(drawioUrl, onInitCallback, onSaveCallback) {
     onInit = onInitCallback;
     onSave = onSaveCallback;
 
+    await attemptRestoreIfExists();
+
     iFrame = document.createElement('iframe');
     iFrame.setAttribute('frameborder', '0');
     window.addEventListener('message', drawReceive);

resources/js/services/store.js

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

resources/js/services/util.js

@@ -5,11 +5,11 @@
  * leading edge, instead of the trailing.
  * @attribution https://davidwalsh.name/javascript-debounce-function
  * @param {Function} func
- * @param {Number} wait
+ * @param {Number} waitMs
  * @param {Boolean} immediate
  * @returns {Function}
  */
-export function debounce(func, wait, immediate) {
+export function debounce(func, waitMs, immediate) {
     let timeout;
     return function debouncedWrapper(...args) {
         const context = this;
@@ -19,7 +19,7 @@ export function debounce(func, wait, immediate) {
         };
         const callNow = immediate && !timeout;
         clearTimeout(timeout);
-        timeout = setTimeout(later, wait);
+        timeout = setTimeout(later, waitMs);
         if (callNow) func.apply(context, args);
     };
 }
@@ -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;
@@ -33,7 +34,6 @@ function showDrawingManager(mceEditor, selectedNode = null) {
 }
 
 async function updateContent(pngData) {
-    const id = `image-${Math.random().toString(16).slice(2)}`;
     const loadingImage = window.baseUrl('/loading.gif');
 
     const handleUploadError = error => {
@@ -57,24 +57,29 @@ 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>`);
+    await wait(5);
+
+    const id = `drawing-${Math.random().toString(16).slice(2)}`;
+    const wrapId = `drawing-wrap-${Math.random().toString(16).slice(2)}`;
+    pageEditor.insertContent(`<div drawio-diagram contenteditable="false" id="${wrapId}"><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);
+            pageEditor.dom.setAttrib(wrapId, 'drawio-diagram', img.id);
         });
     } catch (err) {
-            pageEditor.dom.remove(id);
+        pageEditor.dom.remove(wrapId);
         handleUploadError(err);
+        throw new Error(`Failed to save image with error: ${err}`);
     }
-    }, 5);
 }
 
 function drawingInit() {

resources/views/common/confirm-dialog.blade.php

@@ -1,5 +1,6 @@
 <div components="popup confirm-dialog"
-     refs="confirm-dialog@popup {{ $ref }}"
+     @if($id ?? false) id="{{ $id }}" @endif
+     refs="confirm-dialog@popup {{ $ref ?? false }}"
      class="popup-background">
     <div class="popup-body very-small" tabindex="-1">
 

resources/views/pages/parts/form.blade.php

@@ -69,4 +69,11 @@
             {{ trans('entities.pages_edit_delete_draft_confirm') }}
         </p>
     @endcomponent
+
+    {{--Saved Drawing--}}
+    @component('common.confirm-dialog', ['title' => trans('entities.pages_drawing_unsaved'), 'id' => 'unsaved-drawing-dialog'])
+        <p>
+            {{ trans('entities.pages_drawing_unsaved_confirm') }}
+        </p>
+    @endcomponent
 </div>