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 = `
`; 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