mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-10-30 15:42:41 +01:00
Merge pull request #4457 from BookStackApp/drawing_backup_store
Browser-based drawing backup storage system
This commit is contained in:
commit
32516f7b68
@ -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',
|
||||
|
7
package-lock.json
generated
7
package-lock.json
generated
@ -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",
|
||||
|
@ -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",
|
||||
|
@ -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)_
|
||||
|
@ -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 = `<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) {
|
||||
@ -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}`);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
@ -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<void>}
|
||||
*/
|
||||
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<Promise<String>>} onInitCallback
|
||||
* @param {Function<Promise>} 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);
|
||||
|
1
resources/js/services/store.js
Normal file
1
resources/js/services/store.js
Normal file
@ -0,0 +1 @@
|
||||
export {get, set, del} from 'idb-keyval';
|
@ -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);
|
||||
});
|
||||
}
|
||||
|
@ -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(`<div drawio-diagram contenteditable="false"><img src="${loadingImage}" id="${id}"></div>`);
|
||||
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.get(id).parentNode.setAttribute('drawio-diagram', img.id);
|
||||
pageEditor.dom.setAttrib(wrapId, 'drawio-diagram', img.id);
|
||||
});
|
||||
} catch (err) {
|
||||
pageEditor.dom.remove(id);
|
||||
pageEditor.dom.remove(wrapId);
|
||||
handleUploadError(err);
|
||||
throw new Error(`Failed to save image with error: ${err}`);
|
||||
}
|
||||
}, 5);
|
||||
}
|
||||
|
||||
function drawingInit() {
|
||||
|
@ -1,5 +1,6 @@
|
||||
<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">
|
||||
|
||||
|
@ -69,4 +69,11 @@
|
||||
{{ 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>
|
Loading…
Reference in New Issue
Block a user