mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-08-25 11:45:58 +00:00
Added auto-focus behaviour to page editor
- Will focus on title if the value of the field matches the default text for the current user's language. - Otherwise will focus on the editor body. - Added and tested on both editors. For #2036
This commit is contained in:
parent
8ce38d2158
commit
4ef362143b
@ -557,6 +557,11 @@ class MarkdownEditor {
|
||||
const prependLineCount = markdown.split('\n').length;
|
||||
this.cm.setCursor(cursorPos.line + prependLineCount, cursorPos.ch);
|
||||
});
|
||||
|
||||
// Focus on editor
|
||||
window.$events.listen('editor::focus', () => {
|
||||
this.cm.focus();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -402,6 +402,10 @@ function listenForBookStackEditorEvents(editor) {
|
||||
editor.setContent(content);
|
||||
});
|
||||
|
||||
// Focus on the editor
|
||||
window.$events.listen('editor::focus', () => {
|
||||
editor.focus();
|
||||
});
|
||||
}
|
||||
|
||||
class WysiwygEditor {
|
||||
|
@ -19,6 +19,8 @@ function mounted() {
|
||||
this.pageId= Number(elem.getAttribute('page-id'));
|
||||
this.isNewDraft = Number(elem.getAttribute('page-new-draft')) === 1;
|
||||
this.isUpdateDraft = Number(elem.getAttribute('page-update-draft')) === 1;
|
||||
this.titleElem = elem.querySelector('input[name=name]');
|
||||
this.hasDefaultTitle = this.titleElem.closest('[is-default-value]') !== null;
|
||||
|
||||
if (this.pageId !== 0 && this.draftsEnabled) {
|
||||
window.setTimeout(() => {
|
||||
@ -43,6 +45,8 @@ function mounted() {
|
||||
window.$events.listen('editor-markdown-change', markdown => {
|
||||
this.editorMarkdown = markdown;
|
||||
});
|
||||
|
||||
this.setInitialFocus();
|
||||
}
|
||||
|
||||
let data = {
|
||||
@ -58,18 +62,31 @@ let data = {
|
||||
|
||||
editorHTML: '',
|
||||
editorMarkdown: '',
|
||||
|
||||
hasDefaultTitle: false,
|
||||
titleElem: null,
|
||||
};
|
||||
|
||||
let methods = {
|
||||
|
||||
setInitialFocus() {
|
||||
if (this.hasDefaultTitle) {
|
||||
this.titleElem.select();
|
||||
} else {
|
||||
window.setTimeout(() => {
|
||||
this.$events.emit('editor::focus', '');
|
||||
}, 500);
|
||||
}
|
||||
},
|
||||
|
||||
startAutoSave() {
|
||||
currentContent.title = document.getElementById('name').value.trim();
|
||||
currentContent.title = this.titleElem.value.trim();
|
||||
currentContent.html = this.editorHTML;
|
||||
|
||||
autoSave = window.setInterval(() => {
|
||||
// Return if manually saved recently to prevent bombarding the server
|
||||
if (Date.now() - lastSave < (1000 * autoSaveFrequency)/2) return;
|
||||
const newTitle = document.getElementById('name').value.trim();
|
||||
const newTitle = this.titleElem.value.trim();
|
||||
const newHtml = this.editorHTML;
|
||||
|
||||
if (newTitle !== currentContent.title || newHtml !== currentContent.html) {
|
||||
@ -85,7 +102,7 @@ let methods = {
|
||||
if (!this.draftsEnabled) return;
|
||||
|
||||
const data = {
|
||||
name: document.getElementById('name').value.trim(),
|
||||
name: this.titleElem.value.trim(),
|
||||
html: this.editorHTML
|
||||
};
|
||||
|
||||
@ -126,7 +143,7 @@ let methods = {
|
||||
window.$events.emit('editor-html-update', response.data.html);
|
||||
window.$events.emit('editor-markdown-update', response.data.markdown || response.data.html);
|
||||
|
||||
document.getElementById('name').value = response.data.name;
|
||||
this.titleElem.value = response.data.name;
|
||||
window.setTimeout(() => {
|
||||
this.startAutoSave();
|
||||
}, 1000);
|
||||
|
@ -63,8 +63,8 @@
|
||||
|
||||
{{--Title input--}}
|
||||
<div class="title-input page-title clearfix" v-pre>
|
||||
<div class="input">
|
||||
@include('form.text', ['name' => 'name', 'placeholder' => trans('entities.pages_title')])
|
||||
<div class="input" @if($model->name === trans('entities.pages_initial_name')) is-default-value @endif>
|
||||
@include('form.text', ['name' => 'name', 'model' => $model, 'placeholder' => trans('entities.pages_title')])
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user