From 2cf6dc4e4b7180b73f7765caaddffea9ea5e9655 Mon Sep 17 00:00:00 2001
From: Sanne de Vries <sannedv@protonmail.com>
Date: Wed, 3 Mar 2021 13:30:41 +0100
Subject: [PATCH] Improved social media inline editing

No ref

- Added placeholder attributes to focused input fields
- Fixed only text value being clickable vs. entire field
- Added placeholder attributes to PSM meta data inputs
---
 .../app/components/gh-post-settings-menu.hbs  |  6 ++--
 .../components/modal-post-preview/social.hbs  | 28 +++++++++----------
 2 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/ghost/admin/app/components/gh-post-settings-menu.hbs b/ghost/admin/app/components/gh-post-settings-menu.hbs
index 260ce23137..81120985bb 100644
--- a/ghost/admin/app/components/gh-post-settings-menu.hbs
+++ b/ghost/admin/app/components/gh-post-settings-menu.hbs
@@ -193,6 +193,7 @@
                                         @class="post-setting-meta-title"
                                         @id="meta-title"
                                         @name="post-setting-meta-title"
+                                        @placeholder={{this.seoTitle}}
                                         @value={{readonly this.metaTitleScratch}}
                                         @input={{action (mut this.metaTitleScratch) value="target.value"}}
                                         @focus-out={{action "setMetaTitle" this.metaTitleScratch}}
@@ -208,6 +209,7 @@
                                         @class="post-setting-meta-description"
                                         @id="meta-description"
                                         @name="post-setting-meta-description"
+                                        @placeholder={{truncate this.seoDescription 150}}
                                         @value={{readonly this.metaDescriptionScratch}}
                                         @input={{action (mut this.metaDescriptionScratch) value="target.value"}}
                                         @focus-out={{action "setMetaDescription" this.metaDescriptionScratch}}
@@ -286,7 +288,7 @@
                                         @class="post-setting-twitter-description"
                                         @id="twitter-description"
                                         @name="post-setting-twitter-description"
-                                        @placeholder={{truncate this.twitterDescription 155}}
+                                        @placeholder={{truncate this.twitterDescription 150}}
                                         @stopEnterKeyDownPropagation="true"
                                         @value={{readonly this.twitterDescriptionScratch}}
                                         @input={{action (mut this.twitterDescriptionScratch) value="target.value"}}
@@ -361,7 +363,7 @@
                                     <GhTextarea
                                         @class="post-setting-og-description"
                                         @id="og-description" @name="post-setting-og-description"
-                                        @placeholder={{truncate this.facebookDescription 160}}
+                                        @placeholder={{truncate this.facebookDescription 150}}
                                         @value={{readonly this.ogDescriptionScratch}}
                                         @input={{action (mut this.ogDescriptionScratch) value="target.value"}}
                                         @focus-out={{action "setOgDescription" this.ogDescriptionScratch}}
diff --git a/ghost/admin/app/components/modal-post-preview/social.hbs b/ghost/admin/app/components/modal-post-preview/social.hbs
index b014fc2b58..7d80c08b61 100644
--- a/ghost/admin/app/components/modal-post-preview/social.hbs
+++ b/ghost/admin/app/components/modal-post-preview/social.hbs
@@ -70,9 +70,9 @@
                                 <input
                                     type="text"
                                     class="gh-input"
+                                    placeholder={{this.facebookTitle}}
                                     value={{@post.ogTitle}}
                                     maxlength="300"
-                                    title="Facebook title"
                                     {{on "blur" this.setFacebookTitle}}
                                     {{on-key "Enter" this.blurElement}}
                                     {{on-key "Escape" (fn this.cancelEdit "ogTitle")}}
@@ -80,15 +80,15 @@
                                     data-prevent-escape-close-modal="true"
                                 />
                             {{else}}
-                                <div class="gh-social-og-preview-title editable">
-                                    <span class="pointer" {{on "click" this.editFacebookTitle}}>{{truncate this.facebookTitle}}</span>
+                                <div class="gh-social-og-preview-title editable pointer" {{on "click" this.editFacebookTitle}}>
+                                    {{truncate this.facebookTitle}}
                                 </div>
                             {{/if}}
                             {{#if this.editingFacebookDescription}}
                                 <textarea
                                     class="gh-input"
                                     maxlength="500"
-                                    title="Facebook description"
+                                    placeholder={{truncate this.facebookDescription 160}}
                                     {{on "blur" this.setFacebookDescription}}
                                     {{on-key "Enter" this.blurElement}}
                                     {{on-key "Escape" (fn this.cancelEdit "ogDescription")}}
@@ -96,8 +96,8 @@
                                     data-prevent-escape-close-modal="true"
                                 >{{@post.ogDescription}}</textarea>
                             {{else}}
-                                <div class="gh-social-og-preview-desc editable">
-                                    <span class="pointer" {{on "click" this.editFacebookDescription}}>{{truncate this.facebookDescription}}</span>
+                                <div class="gh-social-og-preview-desc editable pointer" {{on "click" this.editFacebookDescription}}>
+                                    {{truncate this.facebookDescription}}
                                 </div>
                             {{/if}}
                         </div>
@@ -169,9 +169,9 @@
                                     <input
                                         type="text"
                                         class="gh-input"
+                                        placeholder={{this.twitterTitle}}
                                         value={{@post.twitterTitle}}
                                         maxlength="300"
-                                        title="Twitter title"
                                         {{on "blur" this.setTwitterTitle}}
                                         {{on-key "Enter" this.blurElement}}
                                         {{on-key "Escape" (fn this.cancelEdit "twitterTitle")}}
@@ -185,7 +185,7 @@
                                     <textarea
                                         class="gh-input"
                                         maxlength="500"
-                                        title="Twitter description"
+                                        placeholder={{truncate this.twitterDescription 160}}
                                         {{on "blur" this.setTwitterDescription}}
                                         {{on-key "Enter" this.blurElement}}
                                         {{on-key "Escape" (fn this.cancelEdit "twitterDescription")}}
@@ -221,9 +221,9 @@
                     <input
                         type="text"
                         class="gh-input"
+                        placeholder={{this.serpTitle}}
                         value={{@post.metaTitle}}
                         maxlength="300"
-                        title="Meta title"
                         {{on "blur" this.setMetaTitle}}
                         {{on-key "Enter" this.blurElement}}
                         {{on-key "Escape" (fn this.cancelEdit "metaTitle")}}
@@ -231,15 +231,15 @@
                         data-prevent-escape-close-modal="true"
                     >
                 {{else}}
-                    <div class="gh-seo-preview-title editable">
-                        <span class="pointer" {{on "click" this.editMetaTitle}}>{{this.serpTitle}}</span>
+                    <div class="gh-seo-preview-title editable pointer" {{on "click" this.editMetaTitle}}>
+                        {{this.serpTitle}}
                     </div>
                 {{/if}}
                 {{#if this.editingMetaDescription}}
                     <textarea
                         class="gh-input"
+                        placeholder={{this.serpDescription}}
                         maxlength="500"
-                        title="Meta description"
                         {{on "blur" this.setMetaDescription}}
                         {{on-key "Enter" this.blurElement}}
                         {{on-key "Escape" (fn this.cancelEdit "metaDescription")}}
@@ -247,8 +247,8 @@
                         data-prevent-escape-close-modal="true"
                     >{{@post.metaDescription}}</textarea>
                 {{else}}
-                    <div class="gh-seo-preview-desc editable">
-                        <span class="pointer" {{on "click" this.editMetaDescription}}>{{moment-format (now) "DD MMM YYYY"}} — {{truncate this.serpDescription 170}}</span>
+                    <div class="gh-seo-preview-desc editable pointer" {{on "click" this.editMetaDescription}}>
+                        {{moment-format (now) "DD MMM YYYY"}} — {{truncate this.serpDescription 170}}
                     </div>
                 {{/if}}
             </div>