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() {