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

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();
+        });
     }
 }
 

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 {

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);

resources/views/pages/form.blade.php

@@ -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>