'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',
"requires": true,
"packages": {
"": {
- "name": "bookstack",
"dependencies": {
"@codemirror/commands": "^6.2.4",
"@codemirror/lang-css": "^6.2.1",
"@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",
"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",
"@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",
* [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)_
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}`);
+ }
});
}
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) {
}).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}`);
+ }
});
}
// 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);
+ });
}
}
}
}
+/**
+ * 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} 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) {
+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);
--- /dev/null
+export {get, set, del} from 'idb-keyval';
* 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;
};
const callNow = immediate && !timeout;
clearTimeout(timeout);
- timeout = setTimeout(later, wait);
+ timeout = setTimeout(later, waitMs);
if (callNow) func.apply(context, args);
};
}
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);
+ });
+}
import * as DrawIO from '../services/drawio';
+import {wait} from '../services/util';
let pageEditor = null;
let currentNode = null;
}
async function updateContent(pngData) {
- const id = `image-${Math.random().toString(16).slice(2)}`;
const loadingImage = window.baseUrl('/loading.gif');
const handleUploadError = error => {
});
} 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);
+
+ 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.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() {
<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">
{{ 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
projects / bookstack / commitdiff