diff --git a/resources/js/components/markdown-editor.js b/resources/js/components/markdown-editor.js index 4dc240d48..cc9a7b859 100644 --- a/resources/js/components/markdown-editor.js +++ b/resources/js/components/markdown-editor.js @@ -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(); + }); } } diff --git a/resources/js/components/wysiwyg-editor.js b/resources/js/components/wysiwyg-editor.js index 9ed00c078..1c8c71099 100644 --- a/resources/js/components/wysiwyg-editor.js +++ b/resources/js/components/wysiwyg-editor.js @@ -402,6 +402,10 @@ function listenForBookStackEditorEvents(editor) { editor.setContent(content); }); + // Focus on the editor + window.$events.listen('editor::focus', () => { + editor.focus(); + }); } class WysiwygEditor { diff --git a/resources/js/vues/page-editor.js b/resources/js/vues/page-editor.js index fbf2857a4..a79ad2049 100644 --- a/resources/js/vues/page-editor.js +++ b/resources/js/vues/page-editor.js @@ -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); diff --git a/resources/views/pages/form.blade.php b/resources/views/pages/form.blade.php index 3c2b4f0b0..4294ff56b 100644 --- a/resources/views/pages/form.blade.php +++ b/resources/views/pages/form.blade.php @@ -63,8 +63,8 @@ {{--Title input--}}