Skip to content

Commit 32516f7

Browse files
ssddanbrownssddanbrown
authored
Merge pull request #4457 from BookStackApp/drawing_backup_store
Browser-based drawing backup storage system
2 parents cbcec18 + 69ac425 commit 32516f7

File tree

11 files changed

+106
-34
lines changed

11 files changed

+106
-34
lines changed

‎lang/en/entities.php‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -239,6 +239,8 @@
239239
'pages_md_insert_drawing' => 'Insert Drawing',
240240
'pages_md_show_preview' => 'Show preview',
241241
'pages_md_sync_scroll' => 'Sync preview scroll',
242+
'pages_drawing_unsaved' => 'Unsaved Drawing Found',
243+
'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?',
242244
'pages_not_in_chapter' => 'Page is not in a chapter',
243245
'pages_move' => 'Move Page',
244246
'pages_copy' => 'Copy Page',

‎package-lock.json‎

Lines changed: 6 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@
4646
"@ssddanbrown/codemirror-lang-smarty": "^1.0.0",
4747
"@ssddanbrown/codemirror-lang-twig": "^1.0.0",
4848
"codemirror": "^6.0.1",
49+
"idb-keyval": "^6.2.1",
4950
"markdown-it": "^13.0.1",
5051
"markdown-it-task-lists": "^2.1.1",
5152
"snabbdom": "^3.5.1",

‎readme.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -140,9 +140,12 @@ Note: This is not an exhaustive list of all libraries and projects that would be
140140
* [OneLogin's SAML PHP Toolkit](https://github.com/onelogin/php-saml) - _[MIT](https://github.com/onelogin/php-saml/blob/master/LICENSE)_
141141
* [League/CommonMark](https://commonmark.thephpleague.com/) - _[BSD-3-Clause](https://github.com/thephpleague/commonmark/blob/2.2/LICENSE)_
142142
* [League/Flysystem](https://flysystem.thephpleague.com) - _[MIT](https://github.com/thephpleague/flysystem/blob/3.x/LICENSE)_
143+
* [League/html-to-markdown](https://github.com/thephpleague/html-to-markdown) - _[MIT](https://github.com/thephpleague/html-to-markdown/blob/master/LICENSE)_
144+
* [League/oauth2-client](https://oauth2-client.thephpleague.com/) - _[MIT](https://github.com/thephpleague/oauth2-client/blob/master/LICENSE)_
143145
* [pragmarx/google2fa](https://github.com/antonioribeiro/google2fa) - _[MIT](https://github.com/antonioribeiro/google2fa/blob/8.x/LICENSE.md)_
144146
* [Bacon/BaconQrCode](https://github.com/Bacon/BaconQrCode) - _[BSD-2-Clause](https://github.com/Bacon/BaconQrCode/blob/master/LICENSE)_
145147
* [phpseclib](https://github.com/phpseclib/phpseclib) - _[MIT](https://github.com/phpseclib/phpseclib/blob/master/LICENSE)_
146148
* [Clockwork](https://github.com/itsgoingd/clockwork) - _[MIT](https://github.com/itsgoingd/clockwork/blob/master/LICENSE)_
147149
* [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)_
148150
* [PHP_CodeSniffer](https://github.com/squizlabs/PHP_CodeSniffer) - _[BSD 3-Clause](https://github.com/squizlabs/PHP_CodeSniffer/blob/master/licence.txt)_
151+
* [JakeArchibald/IDB-Keyval](https://github.com/jakearchibald/idb-keyval) - _[Apache-2.0](https://github.com/jakearchibald/idb-keyval/blob/main/LICENCE)_

‎resources/js/markdown/actions.js‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -82,18 +82,20 @@ export class Actions {
8282

8383
const selectionRange = this.#getSelectionRange();
8484

85-
DrawIO.show(url, () => Promise.resolve(''), pngData => {
85+
DrawIO.show(url, () => Promise.resolve(''), async pngData => {
8686
const data = {
8787
image: pngData,
8888
uploaded_to: Number(this.editor.config.pageId),
8989
};
9090

91-
window.$http.post('/images/drawio', data).then(resp => {
91+
try {
92+
const resp = await window.$http.post('/images/drawio', data);
9293
this.#insertDrawing(resp.data, selectionRange);
9394
DrawIO.close();
94-
}).catch(err => {
95+
} catch (err) {
9596
this.handleDrawingUploadError(err);
96-
});
97+
throw new Error(`Failed to save image with error: ${err}`);
98+
}
9799
});
98100
}
99101

@@ -112,13 +114,14 @@ export class Actions {
112114
const selectionRange = this.#getSelectionRange();
113115
const drawingId = imgContainer.getAttribute('drawio-diagram');
114116

115-
DrawIO.show(drawioUrl, () => DrawIO.load(drawingId), pngData => {
117+
DrawIO.show(drawioUrl, () => DrawIO.load(drawingId), async pngData => {
116118
const data = {
117119
image: pngData,
118120
uploaded_to: Number(this.editor.config.pageId),
119121
};
120122

121-
window.$http.post('/images/drawio', data).then(resp => {
123+
try {
124+
const resp = await window.$http.post('/images/drawio', data);
122125
const newText = `<div drawio-diagram="${resp.data.id}"><img src="${resp.data.url}"></div>`;
123126
const newContent = this.#getText().split('\n').map(line => {
124127
if (line.indexOf(`drawio-diagram="${drawingId}"`) !== -1) {
@@ -128,9 +131,10 @@ export class Actions {
128131
}).join('\n');
129132
this.#setText(newContent, selectionRange);
130133
DrawIO.close();
131-
}).catch(err => {
134+
} catch (err) {
132135
this.handleDrawingUploadError(err);
133-
});
136+
throw new Error(`Failed to save image with error: ${err}`);
137+
}
134138
});
135139
}
136140

‎resources/js/services/drawio.js‎

Lines changed: 38 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,22 @@
11
// Docs: https://www.diagrams.net/doc/faq/embed-mode
2+
import * as store from './store';
23

34
let iFrame = null;
45
let lastApprovedOrigin;
5-
let onInit; let
6-
onSave;
6+
let onInit;
7+
let onSave;
8+
const saveBackupKey = 'last-drawing-save';
79

810
function drawPostMessage(data) {
911
iFrame.contentWindow.postMessage(JSON.stringify(data), lastApprovedOrigin);
1012
}
1113

1214
function drawEventExport(message) {
15+
store.set(saveBackupKey, message.data);
1316
if (onSave) {
14-
onSave(message.data);
17+
onSave(message.data).then(() => {
18+
store.del(saveBackupKey);
19+
});
1520
}
1621
}
1722

@@ -62,16 +67,43 @@ function drawReceive(event) {
6267
}
6368
}
6469

70+
/**
71+
* Attempt to prompt and restore unsaved drawing content if existing.
72+
* @returns {Promise<void>}
73+
*/
74+
async function attemptRestoreIfExists() {
75+
const backupVal = await store.get(saveBackupKey);
76+
const dialogEl = document.getElementById('unsaved-drawing-dialog');
77+
78+
if (!dialogEl) {
79+
console.error('Missing expected unsaved-drawing dialog');
80+
}
81+
82+
if (backupVal) {
83+
/** @var {ConfirmDialog} */
84+
const dialog = window.$components.firstOnElement(dialogEl, 'confirm-dialog');
85+
const restore = await dialog.show();
86+
if (restore) {
87+
onInit = async () => backupVal;
88+
}
89+
}
90+
}
91+
6592
/**
6693
* Show the draw.io editor.
94+
* onSaveCallback must return a promise that resolves on successful save and errors on failure.
95+
* onInitCallback must return a promise with the xml to load for the editor.
96+
* Will attempt to provide an option to restore unsaved changes if found to exist.
6797
* @param {String} drawioUrl
68-
* @param {Function} onInitCallback - Must return a promise with the xml to load for the editor.
69-
* @param {Function} onSaveCallback - Is called with the drawing data on save.
98+
* @param {Function<Promise<String>>} onInitCallback
99+
* @param {Function<Promise>} onSaveCallback - Is called with the drawing data on save.
70100
*/
71-
export function show(drawioUrl, onInitCallback, onSaveCallback) {
101+
export async function show(drawioUrl, onInitCallback, onSaveCallback) {
72102
onInit = onInitCallback;
73103
onSave = onSaveCallback;
74104

105+
await attemptRestoreIfExists();
106+
75107
iFrame = document.createElement('iframe');
76108
iFrame.setAttribute('frameborder', '0');
77109
window.addEventListener('message', drawReceive);

‎resources/js/services/store.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export {get, set, del} from 'idb-keyval';

‎resources/js/services/util.js‎

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,11 @@
55
* leading edge, instead of the trailing.
66
* @attribution https://davidwalsh.name/javascript-debounce-function
77
* @param {Function} func
8-
* @param {Number} wait
8+
* @param {Number} waitMs
99
* @param {Boolean} immediate
1010
* @returns {Function}
1111
*/
12-
export function debounce(func, wait, immediate) {
12+
export function debounce(func, waitMs, immediate) {
1313
let timeout;
1414
return function debouncedWrapper(...args) {
1515
const context = this;
@@ -19,7 +19,7 @@ export function debounce(func, wait, immediate) {
1919
};
2020
const callNow = immediate && !timeout;
2121
clearTimeout(timeout);
22-
timeout = setTimeout(later, wait);
22+
timeout = setTimeout(later, waitMs);
2323
if (callNow) func.apply(context, args);
2424
};
2525
}
@@ -70,3 +70,14 @@ export function uniqueId() {
7070
const S4 = () => (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
7171
return (`${S4() + S4()}-${S4()}-${S4()}-${S4()}-${S4()}${S4()}${S4()}`);
7272
}
73+
74+
/**
75+
* Create a promise that resolves after the given time.
76+
* @param {int} timeMs
77+
* @returns {Promise}
78+
*/
79+
export function wait(timeMs) {
80+
return new Promise(res => {
81+
setTimeout(res, timeMs);
82+
});
83+
}

‎resources/js/wysiwyg/plugin-drawio.js‎

Lines changed: 20 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import * as DrawIO from '../services/drawio';
2+
import {wait} from '../services/util';
23

34
let pageEditor = null;
45
let currentNode = null;
@@ -33,7 +34,6 @@ function showDrawingManager(mceEditor, selectedNode = null) {
3334
}
3435

3536
async function updateContent(pngData) {
36-
const id = `image-${Math.random().toString(16).slice(2)}`;
3737
const loadingImage = window.baseUrl('/loading.gif');
3838

3939
const handleUploadError = error => {
@@ -57,24 +57,29 @@ async function updateContent(pngData) {
5757
});
5858
} catch (err) {
5959
handleUploadError(err);
60+
throw new Error(`Failed to save image with error: ${err}`);
6061
}
6162
return;
6263
}
6364

64-
setTimeout(async () => {
65-
pageEditor.insertContent(`<div drawio-diagram contenteditable="false"><img src="${loadingImage}" id="${id}"></div>`);
66-
DrawIO.close();
67-
try {
68-
const img = await DrawIO.upload(pngData, options.pageId);
69-
pageEditor.undoManager.transact(() => {
70-
pageEditor.dom.setAttrib(id, 'src', img.url);
71-
pageEditor.dom.get(id).parentNode.setAttribute('drawio-diagram', img.id);
72-
});
73-
} catch (err) {
74-
pageEditor.dom.remove(id);
75-
handleUploadError(err);
76-
}
77-
}, 5);
65+
await wait(5);
66+
67+
const id = `drawing-${Math.random().toString(16).slice(2)}`;
68+
const wrapId = `drawing-wrap-${Math.random().toString(16).slice(2)}`;
69+
pageEditor.insertContent(`<div drawio-diagram contenteditable="false" id="${wrapId}"><img src="${loadingImage}" id="${id}"></div>`);
70+
DrawIO.close();
71+
72+
try {
73+
const img = await DrawIO.upload(pngData, options.pageId);
74+
pageEditor.undoManager.transact(() => {
75+
pageEditor.dom.setAttrib(id, 'src', img.url);
76+
pageEditor.dom.setAttrib(wrapId, 'drawio-diagram', img.id);
77+
});
78+
} catch (err) {
79+
pageEditor.dom.remove(wrapId);
80+
handleUploadError(err);
81+
throw new Error(`Failed to save image with error: ${err}`);
82+
}
7883
}
7984

8085
function drawingInit() {

‎resources/views/common/confirm-dialog.blade.php‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<div components="popup confirm-dialog"
2-
refs="confirm-dialog@popup {{ $ref }}"
2+
@if($id ?? false) id="{{ $id }}" @endif
3+
refs="confirm-dialog@popup {{ $ref ?? false }}"
34
class="popup-background">
45
<div class="popup-body very-small" tabindex="-1">
56

0 commit comments

Comments
 (0)