From a4fbde9185bf03db0b0d6e0ca278b235987c2035 Mon Sep 17 00:00:00 2001
From: Dan Brown <ssddanbrown@googlemail.com>
Date: Tue, 22 Aug 2023 19:30:39 +0100
Subject: [PATCH 1/4] 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 | 7 +++++-
package.json | 1 +
resources/js/markdown/actions.js | 20 ++++++++++-------
resources/js/services/drawio.js | 17 +++++++++-----
resources/js/services/store.js | 1 +
resources/js/services/util.js | 11 +++++++++
resources/js/wysiwyg/plugin-drawio.js | 32 +++++++++++++++------------
7 files changed, 61 insertions(+), 28 deletions(-)
create mode 100644 resources/js/services/store.js
diff --git a/package-lock.json b/package-lock.json
index c8645fa4c..8ad1f2323 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index f9446ab3b..21f2b1752 100644
--- 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",
+ "idb-keyval": "^6.2.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 f66b7921d..3f9df4778 100644
--- a/resources/js/markdown/actions.js
+++ b/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}`);
+ }
});
}
diff --git a/resources/js/services/drawio.js b/resources/js/services/drawio.js
index efc071d3e..10943ab57 100644
--- 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
+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;
diff --git a/resources/js/services/store.js b/resources/js/services/store.js
new file mode 100644
index 000000000..be41fc1fb
--- /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 dd97d81aa..0a8966f15 100644
--- 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()}`);
}
+
+/**
+ * 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 7b1750786..c98b1aa10 100644
--- 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 {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() {
From dd71658d7072d76501d882ffe4c349f3b55e5b33 Mon Sep 17 00:00:00 2001
From: Dan Brown <ssddanbrown@googlemail.com>
Date: Wed, 23 Aug 2023 14:16:20 +0100
Subject: [PATCH 2/4] Drawio: Added unsaved restore prompt and logic
---
lang/en/entities.php | 2 ++
resources/js/services/drawio.js | 27 ++++++++++++++++++-
.../views/common/confirm-dialog.blade.php | 3 ++-
resources/views/pages/parts/form.blade.php | 7 +++++
4 files changed, 37 insertions(+), 2 deletions(-)
diff --git a/lang/en/entities.php b/lang/en/entities.php
index b1b0e5236..453d45d56 100644
--- a/lang/en/entities.php
+++ b/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',
+ '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',
diff --git a/resources/js/services/drawio.js b/resources/js/services/drawio.js
index 10943ab57..46e10327a 100644
--- a/resources/js/services/drawio.js
+++ b/resources/js/services/drawio.js
@@ -67,18 +67,43 @@ function drawReceive(event) {
}
}
+/**
+ * Attempt to prompt and restore unsaved drawing content if existing.
+ * @returns {Promise<void>}
+ */
+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 function show(drawioUrl, onInitCallback, onSaveCallback) {
+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);
diff --git a/resources/views/common/confirm-dialog.blade.php b/resources/views/common/confirm-dialog.blade.php
index 8e4148b88..736a1c49b 100644
--- a/resources/views/common/confirm-dialog.blade.php
+++ b/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">
diff --git a/resources/views/pages/parts/form.blade.php b/resources/views/pages/parts/form.blade.php
index 4ed55044b..6d59afe33 100644
--- a/resources/views/pages/parts/form.blade.php
+++ b/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>
\ No newline at end of file
From 3917e50c903af674d08d8865d55342e10fc56238 Mon Sep 17 00:00:00 2001
From: Dan Brown <ssddanbrown@googlemail.com>
Date: Wed, 23 Aug 2023 18:50:37 +0100
Subject: [PATCH 3/4] Drawio: Tweaked fail backup handling during testing
- Tweaked wording of popup title.
- Updated WYSIWYG create handling to properly remove drawing container
on failure.
Tested across FF and chrome, in both editors for create & editing.
---
lang/en/entities.php | 2 +-
resources/js/wysiwyg/plugin-drawio.js | 9 +++++----
2 files changed, 6 insertions(+), 5 deletions(-)
diff --git a/lang/en/entities.php b/lang/en/entities.php
index 453d45d56..4468cd68f 100644
--- a/lang/en/entities.php
+++ b/lang/en/entities.php
@@ -239,7 +239,7 @@ 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',
+ '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',
diff --git a/resources/js/wysiwyg/plugin-drawio.js b/resources/js/wysiwyg/plugin-drawio.js
index c98b1aa10..3b343a958 100644
--- a/resources/js/wysiwyg/plugin-drawio.js
+++ b/resources/js/wysiwyg/plugin-drawio.js
@@ -34,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 => {
@@ -65,17 +64,19 @@ async function updateContent(pngData) {
await wait(5);
- pageEditor.insertContent(`<div drawio-diagram contenteditable="false"><img src="${loadingImage}" id="${id}"></div>`);
+ 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}`);
}
From 69ac425903d2a6ebf67762e43450817b846a45db Mon Sep 17 00:00:00 2001
From: Dan Brown <ssddanbrown@googlemail.com>
Date: Wed, 23 Aug 2023 19:02:23 +0100
Subject: [PATCH 4/4] Updated readme attribution and fixed eslint issues
---
readme.md | 3 +++
resources/js/services/store.js | 2 +-
resources/js/services/util.js | 6 +++---
3 files changed, 7 insertions(+), 4 deletions(-)
diff --git a/readme.md b/readme.md
index 6c4811b39..66bf93471 100644
--- a/readme.md
+++ b/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)_
diff --git a/resources/js/services/store.js b/resources/js/services/store.js
index be41fc1fb..a803be284 100644
--- a/resources/js/services/store.js
+++ b/resources/js/services/store.js
@@ -1 +1 @@
-export { get, set, del } from 'idb-keyval';
+export {get, set, del} from 'idb-keyval';
diff --git a/resources/js/services/util.js b/resources/js/services/util.js
index 0a8966f15..d9c3bd0e9 100644
--- a/resources/js/services/util.js
+++ b/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);
};
}