From 3f368d05d90819e071d7016898d43592f4fc6133 Mon Sep 17 00:00:00 2001
From: Steve Larson <9larsons@gmail.com>
Date: Wed, 1 Nov 2023 17:44:55 -0500
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fixed=20post=20feature=20image?=
 =?UTF-8?q?=20caption=20updates=20saving=20with=20every=20keystroke=20(#18?=
 =?UTF-8?q?833)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

closes TryGhost/Product#4093
- added proper on blur handling to trigger autosave instead of each update to the caption text
---
 ghost/admin/app/components/gh-editor-feature-image.hbs  | 2 +-
 ghost/admin/app/components/gh-editor-feature-image.js   | 6 ++++++
 ghost/admin/app/components/gh-koenig-editor-lexical.hbs | 1 +
 ghost/admin/app/controllers/lexical-editor.js           | 3 +++
 ghost/admin/app/templates/lexical-editor.hbs            | 1 +
 5 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/ghost/admin/app/components/gh-editor-feature-image.hbs b/ghost/admin/app/components/gh-editor-feature-image.hbs
index 411e3eae87..4d718a18b4 100644
--- a/ghost/admin/app/components/gh-editor-feature-image.hbs
+++ b/ghost/admin/app/components/gh-editor-feature-image.hbs
@@ -75,7 +75,7 @@
                         @onChangeHtml={{this.setCaption}}
                         @placeholderText={{if this.captionInputFocused "" "Add a caption to the feature image"}}
                         @onFocus={{fn (mut this.captionInputFocused) true}}
-                        @onBlur={{fn (mut this.captionInputFocused) false}}
+                        @onBlur={{this.handleCaptionBlur}}
                     />
                 {{/if}}
                 <button
diff --git a/ghost/admin/app/components/gh-editor-feature-image.js b/ghost/admin/app/components/gh-editor-feature-image.js
index d6b6b6a288..b29eb98e32 100644
--- a/ghost/admin/app/components/gh-editor-feature-image.js
+++ b/ghost/admin/app/components/gh-editor-feature-image.js
@@ -39,6 +39,12 @@ export default class GhEditorFeatureImageComponent extends Component {
         this.args.updateCaption(cleanedHtml);
     }
 
+    @action
+    handleCaptionBlur() {
+        this.captionInputFocused = false;
+        this.args.handleCaptionBlur();
+    }
+
     @action
     setUploadedImage(results) {
         if (results[0]) {
diff --git a/ghost/admin/app/components/gh-koenig-editor-lexical.hbs b/ghost/admin/app/components/gh-koenig-editor-lexical.hbs
index f75af6deba..5697bdfbf4 100644
--- a/ghost/admin/app/components/gh-koenig-editor-lexical.hbs
+++ b/ghost/admin/app/components/gh-koenig-editor-lexical.hbs
@@ -16,6 +16,7 @@
             @updateAlt={{@setFeatureImageAlt}}
             @caption={{@featureImageCaption}}
             @updateCaption={{@setFeatureImageCaption}}
+            @handleCaptionBlur={{@handleFeatureImageCaptionBlur}}
             @forceButtonDisplay={{or (not @title) (eq @title "(Untitled)") this.titleIsHovered this.titleIsFocused}}
             @isHidden={{or (not @cardOptions.post.showTitleAndFeatureImage) false}}
         />
diff --git a/ghost/admin/app/controllers/lexical-editor.js b/ghost/admin/app/controllers/lexical-editor.js
index ac7470cbc3..caa38a1c78 100644
--- a/ghost/admin/app/controllers/lexical-editor.js
+++ b/ghost/admin/app/controllers/lexical-editor.js
@@ -347,7 +347,10 @@ export default class LexicalEditorController extends Controller {
     @action
     setFeatureImageCaption(html) {
         this.post.set('featureImageCaption', html);
+    }
 
+    @action
+    handleFeatureImageCaptionBlur() {
         if (this.post.isDraft) {
             this.autosaveTask.perform();
         }
diff --git a/ghost/admin/app/templates/lexical-editor.hbs b/ghost/admin/app/templates/lexical-editor.hbs
index 2a4fde9ceb..f5679a7fe3 100644
--- a/ghost/admin/app/templates/lexical-editor.hbs
+++ b/ghost/admin/app/templates/lexical-editor.hbs
@@ -82,6 +82,7 @@
                 @setFeatureImage={{this.setFeatureImage}}
                 @setFeatureImageAlt={{this.setFeatureImageAlt}}
                 @setFeatureImageCaption={{this.setFeatureImageCaption}}
+                @handleFeatureImageCaptionBlur={{this.handleFeatureImageCaptionBlur}}
                 @clearFeatureImage={{this.clearFeatureImage}}
                 @cardOptions={{hash
                     post=this.post