From a1ee04b08f4531b880a516d97c40fb5c789414a6 Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@lookingsideways.co.uk>
Date: Wed, 30 Nov 2022 22:04:02 +0000
Subject: [PATCH] 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
---
 .../components/gh-koenig-editor-lexical.hbs   |  1 +
 .../components/gh-koenig-editor-lexical.js    | 53 +++++++++++--------
 .../app/components/koenig-lexical-editor.js   |  2 +-
 3 files changed, 34 insertions(+), 22 deletions(-)

diff --git a/ghost/admin/app/components/gh-koenig-editor-lexical.hbs b/ghost/admin/app/components/gh-koenig-editor-lexical.hbs
index 2919f96159..7fce60dbfd 100644
--- a/ghost/admin/app/components/gh-koenig-editor-lexical.hbs
+++ b/ghost/admin/app/components/gh-koenig-editor-lexical.hbs
@@ -39,6 +39,7 @@
         <KoenigLexicalEditor
             @lexical={{@body}}
             @onChange={{@onBodyChange}}
+            @registerAPI={{this.registerEditorAPI}}
         />
 
         {{!-- <KoenigEditor
diff --git a/ghost/admin/app/components/gh-koenig-editor-lexical.js b/ghost/admin/app/components/gh-koenig-editor-lexical.js
index 879f1d1092..776cd69147 100644
--- a/ghost/admin/app/components/gh-koenig-editor-lexical.js
+++ b/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);
diff --git a/ghost/admin/app/components/koenig-lexical-editor.js b/ghost/admin/app/components/koenig-lexical-editor.js
index 781eb8e0f6..eb37f13957 100644
--- a/ghost/admin/app/components/koenig-lexical-editor.js
+++ b/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>