Wired up title->editor keyboard handling in Lexical editor

closes https://github.com/TryGhost/Team/issues/2286

- use the `registerAPI` prop to get access to a basic API for focusing and inserting paragraphs
- replaced commented mobiledoc based title key handling with lexical handling

ghost/admin/app/components/gh-koenig-editor-lexical.hbs

@@ -39,6 +39,7 @@
         <KoenigLexicalEditor
             @lexical={{@body}}
             @onChange={{@onBodyChange}}
+            @registerAPI={{this.registerEditorAPI}}
         />
 
         {{!-- <KoenigEditor

ghost/admin/app/components/gh-koenig-editor-lexical.js

@@ -9,10 +9,11 @@ export default class GhKoenigEditorReactComponent extends Component {
 
     containerElement = null;
     titleElement = null;
-    // koenigEditor = null;
     mousedownY = 0;
     uploadUrl = `${ghostPaths().apiRoot}/images/upload/`;
 
+    editorAPI = null;
+
     @tracked titleIsHovered = false;
     @tracked titleIsFocused = false;
 
@@ -75,32 +76,42 @@ export default class GhKoenigEditorReactComponent extends Component {
         this.titleElement.focus();
     }
 
-    // @action
-    // onTitleKeydown(event) {
-    //     let value = event.target.value;
-    //     let selectionStart = event.target.selectionStart;
+    // move cursor to the editor on
+    // - Tab
+    // - Arrow Down/Right when input is empty or caret at end of input
+    // - Enter, creating an empty paragraph when editor is not empty
+    @action
+    onTitleKeydown(event) {
+        const {editorAPI} = this;
 
-    //     // enter will always focus the editor
-    //     // down arrow will only focus the editor when the cursor is at the
-    //     // end of the input to preserve the default OS behaviour
-    //     if (
-    //         event.key === 'Enter' ||
-    //         event.key === 'Tab' ||
-    //         ((event.key === 'ArrowDown' || event.key === 'ArrowRight') && (!value || selectionStart === value.length))
-    //     ) {
-    //         event.preventDefault();
+        if (!editorAPI) {
+            return;
+        }
 
-    //         // on Enter we also want to create a blank para if necessary
-    //         if (event.key === 'Enter') {
-    //             this._addParaAtTop();
-    //         }
+        const {key} = event;
+        const {value, selectionStart} = event.target;
 
-    //         this.koenigEditor.focus();
-    //     }
-    // }
+        const couldLeaveTitle = !value || selectionStart === value.length;
+        const arrowLeavingTitle = ['ArrowDown', 'ArrowRight'].includes(key) && couldLeaveTitle;
+
+        if (key === 'Enter' || key === 'Tab' || arrowLeavingTitle) {
+            event.preventDefault();
+
+            if (key === 'Enter' && !editorAPI.editorIsEmpty()) {
+                editorAPI.insertParagraphAtTop({focus: true});
+            } else {
+                editorAPI.focusEditor({position: 'top'});
+            }
+        }
+    }
 
     // Body actions ------------------------------------------------------------
 
+    @action
+    registerEditorAPI(API) {
+        this.editorAPI = API;
+    }
+
     // @action
     // onEditorCreated(koenig) {
     //     this._setupEditor(koenig);

ghost/admin/app/components/koenig-lexical-editor.js

@@ -150,7 +150,7 @@ export default class KoenigLexicalEditor extends Component {
                             initialEditorState={this.args.lexical}
                             onError={this.onError}
                             imageUploadFunction={{imageUploader, uploadProgress}} >
-                            <KoenigEditor onChange={this.args.onChange} />
+                            <KoenigEditor onChange={this.args.onChange} registerAPI={this.args.registerAPI} />
                         </KoenigComposer>
                     </Suspense>
                 </ErrorHandler>