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>} onInitCallback + * @param {Function} 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(`
`); - 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(`
`); + 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() {