diff --git a/lang/en/entities.php b/lang/en/entities.php index b1b0e5236..4468cd68f 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 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', 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/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/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..46e10327a 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); + }); } } @@ -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} */ -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>} onInitCallback + * @param {Function} 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); diff --git a/resources/js/services/store.js b/resources/js/services/store.js new file mode 100644 index 000000000..a803be284 --- /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..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); }; } @@ -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..3b343a958 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; @@ -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(`
`); - 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); + + const id = `drawing-${Math.random().toString(16).slice(2)}`; + const wrapId = `drawing-wrap-${Math.random().toString(16).slice(2)}`; + 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.setAttrib(wrapId, 'drawio-diagram', img.id); + }); + } catch (err) { + pageEditor.dom.remove(wrapId); + handleUploadError(err); + throw new Error(`Failed to save image with error: ${err}`); + } } function drawingInit() { 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 @@