github-mirror/BookStack
2
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-06-10 05:06:56 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Changed autosave handling for better editor performance

Browse Source 
This changes how the editors interact with the parent page-editor
compontent, which handles auto-saving.
Instead of blasting the full editor content upon any change to that
parent compontent, the editors just alert of a change, without the
content. The parent compontent then requests the editor content from the
editor component when it needs that data for an autosave.

For #3981
This commit is contained in:
Dan Brown
2023-02-23 12:30:27 +00:00
parent 31495758a9
commit 6545afacd6
5 changed files with 64 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
resources/js/components/page-editor.js
View File

@ -33,12 +33,11 @@ export class PageEditor extends Component {
this.setChangelogText = this.$opts.setChangelogText;
// State data
this.editorHTML = '';
this.editorMarkdown = '';
this.autoSave = {
interval: null,
frequency: 30000,
last: 0,
pendingChange: false,
};
this.shownWarningsCache = new Set();
@ -59,12 +58,12 @@ export class PageEditor extends Component {
window.$events.listen('editor-save-page', this.savePage.bind(this));
// Listen to content changes from the editor
window.$events.listen('editor-html-change', html => {
this.editorHTML = html;
});
window.$events.listen('editor-markdown-change', markdown => {
this.editorMarkdown = markdown;
});
const onContentChange = () => this.autoSave.pendingChange = true;
window.$events.listen('editor-html-change', onContentChange);
window.$events.listen('editor-markdown-change', onContentChange);
// Listen to changes on the title input
this.titleElem.addEventListener('input', onContentChange);
// Changelog controls
const updateChangelogDebounced = debounce(this.updateChangelogDisplay.bind(this), 300, false);
@ -89,18 +88,17 @@ export class PageEditor extends Component {
}
startAutoSave() {
let lastContent = this.titleElem.value.trim() + '::' + this.editorHTML;
this.autoSaveInterval = window.setInterval(() => {
// Stop if manually saved recently to prevent bombarding the server
let savedRecently = (Date.now() - this.autoSave.last < (this.autoSave.frequency)/2);
if (savedRecently) return;
const newContent = this.titleElem.value.trim() + '::' + this.editorHTML;
if (newContent !== lastContent) {
lastContent = newContent;
this.saveDraft();
}
this.autoSave.interval = window.setInterval(this.runAutoSave.bind(this), this.autoSave.frequency);
}
}, this.autoSave.frequency);
runAutoSave() {
// Stop if manually saved recently to prevent bombarding the server
const savedRecently = (Date.now() - this.autoSave.last < (this.autoSave.frequency)/2);
if (savedRecently || !this.autoSave.pendingChange) {
return;
}
this.saveDraft()
}
savePage() {
@ -108,14 +106,10 @@ export class PageEditor extends Component {
}
async saveDraft() {
const data = {
name: this.titleElem.value.trim(),
html: this.editorHTML,
};
const data = {name: this.titleElem.value.trim()};
if (this.editorType === 'markdown') {
data.markdown = this.editorMarkdown;
}
const editorContent = this.getEditorComponent().getContent();
Object.assign(data, editorContent);
let didSave = false;
try {
@ -132,6 +126,7 @@ export class PageEditor extends Component {
}
didSave = true;
this.autoSave.pendingChange = false;
} catch (err) {
// Save the editor content in LocalStorage as a last resort, just in case.
try {
@ -207,4 +202,11 @@ export class PageEditor extends Component {
}
}
/**
* @return MarkdownEditor|WysiwygEditor
*/
getEditorComponent() {
return window.$components.first('markdown-editor') || window.$components.first('wysiwyg-editor');
}
}