From dda1293ec02728476f754bdaac715c549048a0f7 Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@lookingsideways.co.uk>
Date: Wed, 22 Feb 2023 15:01:25 +0000
Subject: [PATCH] Wired up lexical editor focus when clicking below editor
 canvas

no issue

- we added support for and a demo of clicking below the editor moving focus to it in the Koenig repo but the implementation in Admin was missing
- replaced the commented-out mobiledoc handling in `<GhKoenigEditorLexical>` with the new Koenig-lexical equivalent
---
 .../components/gh-koenig-editor-lexical.hbs   |  2 +-
 .../components/gh-koenig-editor-lexical.js    | 47 +++++--------------
 2 files changed, 14 insertions(+), 35 deletions(-)

diff --git a/ghost/admin/app/components/gh-koenig-editor-lexical.hbs b/ghost/admin/app/components/gh-koenig-editor-lexical.hbs
index 62beecfad7..d0a5a39afe 100644
--- a/ghost/admin/app/components/gh-koenig-editor-lexical.hbs
+++ b/ghost/admin/app/components/gh-koenig-editor-lexical.hbs
@@ -4,7 +4,7 @@
     <div
         class="gh-koenig-editor-pane flex flex-column mih-100"
         {{on "mousedown" this.trackMousedown}}
-        {{!-- {{on "mouseup" this.focusEditor}} --}}
+        {{on "mouseup" this.focusEditor}}
     >
         <GhEditorFeatureImage
             @image={{@featureImage}}
diff --git a/ghost/admin/app/components/gh-koenig-editor-lexical.js b/ghost/admin/app/components/gh-koenig-editor-lexical.js
index 776cd69147..6ff1a26eba 100644
--- a/ghost/admin/app/components/gh-koenig-editor-lexical.js
+++ b/ghost/admin/app/components/gh-koenig-editor-lexical.js
@@ -118,41 +118,20 @@ export default class GhKoenigEditorReactComponent extends Component {
     //     this.args.onEditorCreated?.(koenig);
     // }
 
-    // @action
-    // focusEditor(event) {
-    //     if (event.target.classList.contains('gh-koenig-editor-pane')) {
-    //         let editorCanvas = this.koenigEditor.element;
-    //         let {bottom} = editorCanvas.getBoundingClientRect();
+    @action
+    focusEditor(event) {
+        if (event.target.classList.contains('gh-koenig-editor-pane')) {
+            let editorCanvas = this.editorAPI.editorInstance.getRootElement();
+            let {bottom} = editorCanvas.getBoundingClientRect();
 
-    //         // if a mousedown and subsequent mouseup occurs below the editor
-    //         // canvas, focus the editor and put the cursor at the end of the
-    //         // document
-    //         if (this.mousedownY > bottom && event.clientY > bottom) {
-    //             let {post} = this.koenigEditor;
-    //             let range = post.toRange();
-    //             let {tailSection} = range;
-
-    //             event.preventDefault();
-    //             this.koenigEditor.focus();
-
-    //             // we should always have a visible cursor when focusing
-    //             // at the bottom so create an empty paragraph if last
-    //             // section is a card
-    //             if (tailSection.isCardSection) {
-    //                 this.koenigEditor.run((postEditor) => {
-    //                     let newSection = postEditor.builder.createMarkupSection('p');
-    //                     postEditor.insertSectionAtEnd(newSection);
-    //                     tailSection = newSection;
-    //                 });
-    //             }
-
-    //             this.koenigEditor.selectRange(tailSection.tailPosition());
-
-    //             // ensure we're scrolled to the bottom
-    //             this.containerElement.scrollTop = this.containerElement.scrollHeight;
-    //         }
-    //     }
-    // }
+            // if a mousedown and subsequent mouseup occurs below the editor
+            // canvas, focus the editor and put the cursor at the end of the
+            // document
+            if (this.mousedownY > bottom && event.clientY > bottom) {
+                this.editorAPI.focusEditor();
+            }
+        }
+    }
 
     // _setupEditor(koenig) {
     //     let component = this;