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;
|
const prependLineCount = markdown.split('\n').length;
|
||||||
this.cm.setCursor(cursorPos.line + prependLineCount, cursorPos.ch);
|
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);
|
editor.setContent(content);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Focus on the editor
|
||||||
|
window.$events.listen('editor::focus', () => {
|
||||||
|
editor.focus();
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
class WysiwygEditor {
|
class WysiwygEditor {
|
||||||
|
@ -19,6 +19,8 @@ function mounted() {
|
|||||||
this.pageId= Number(elem.getAttribute('page-id'));
|
this.pageId= Number(elem.getAttribute('page-id'));
|
||||||
this.isNewDraft = Number(elem.getAttribute('page-new-draft')) === 1;
|
this.isNewDraft = Number(elem.getAttribute('page-new-draft')) === 1;
|
||||||
this.isUpdateDraft = Number(elem.getAttribute('page-update-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) {
|
if (this.pageId !== 0 && this.draftsEnabled) {
|
||||||
window.setTimeout(() => {
|
window.setTimeout(() => {
|
||||||
@ -43,6 +45,8 @@ function mounted() {
|
|||||||
window.$events.listen('editor-markdown-change', markdown => {
|
window.$events.listen('editor-markdown-change', markdown => {
|
||||||
this.editorMarkdown = markdown;
|
this.editorMarkdown = markdown;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
this.setInitialFocus();
|
||||||
}
|
}
|
||||||
|
|
||||||
let data = {
|
let data = {
|
||||||
@ -58,18 +62,31 @@ let data = {
|
|||||||
|
|
||||||
editorHTML: '',
|
editorHTML: '',
|
||||||
editorMarkdown: '',
|
editorMarkdown: '',
|
||||||
|
|
||||||
|
hasDefaultTitle: false,
|
||||||
|
titleElem: null,
|
||||||
};
|
};
|
||||||
|
|
||||||
let methods = {
|
let methods = {
|
||||||
|
|
||||||
|
setInitialFocus() {
|
||||||
|
if (this.hasDefaultTitle) {
|
||||||
|
this.titleElem.select();
|
||||||
|
} else {
|
||||||
|
window.setTimeout(() => {
|
||||||
|
this.$events.emit('editor::focus', '');
|
||||||
|
}, 500);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
startAutoSave() {
|
startAutoSave() {
|
||||||
currentContent.title = document.getElementById('name').value.trim();
|
currentContent.title = this.titleElem.value.trim();
|
||||||
currentContent.html = this.editorHTML;
|
currentContent.html = this.editorHTML;
|
||||||
|
|
||||||
autoSave = window.setInterval(() => {
|
autoSave = window.setInterval(() => {
|
||||||
// Return if manually saved recently to prevent bombarding the server
|
// Return if manually saved recently to prevent bombarding the server
|
||||||
if (Date.now() - lastSave < (1000 * autoSaveFrequency)/2) return;
|
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;
|
const newHtml = this.editorHTML;
|
||||||
|
|
||||||
if (newTitle !== currentContent.title || newHtml !== currentContent.html) {
|
if (newTitle !== currentContent.title || newHtml !== currentContent.html) {
|
||||||
@ -85,7 +102,7 @@ let methods = {
|
|||||||
if (!this.draftsEnabled) return;
|
if (!this.draftsEnabled) return;
|
||||||
|
|
||||||
const data = {
|
const data = {
|
||||||
name: document.getElementById('name').value.trim(),
|
name: this.titleElem.value.trim(),
|
||||||
html: this.editorHTML
|
html: this.editorHTML
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -126,7 +143,7 @@ let methods = {
|
|||||||
window.$events.emit('editor-html-update', response.data.html);
|
window.$events.emit('editor-html-update', response.data.html);
|
||||||
window.$events.emit('editor-markdown-update', response.data.markdown || 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(() => {
|
window.setTimeout(() => {
|
||||||
this.startAutoSave();
|
this.startAutoSave();
|
||||||
}, 1000);
|
}, 1000);
|
||||||
|
@ -63,8 +63,8 @@
|
|||||||
|
|
||||||
{{--Title input--}}
|
{{--Title input--}}
|
||||||
<div class="title-input page-title clearfix" v-pre>
|
<div class="title-input page-title clearfix" v-pre>
|
||||||
<div class="input">
|
<div class="input" @if($model->name === trans('entities.pages_initial_name')) is-default-value @endif>
|
||||||
@include('form.text', ['name' => 'name', 'placeholder' => trans('entities.pages_title')])
|
@include('form.text', ['name' => 'name', 'model' => $model, 'placeholder' => trans('entities.pages_title')])
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user