✨ Added support for basic HTML newsletter footer (#1765)

no-issue

This allows users to use basic HTML to customise their newsletter
footer, meaning they can use links, and bold/italic text.

ghost/admin/app/components/modal-email-design-settings.hbs

@@ -51,14 +51,13 @@
                     <div class="modal-fullsettings-section">
                         <GhFormGroup @classNames="vertical">
                             <h4 class="modal-fullsettings-title">Footer content</h4>
-                            <GhTextarea
+                            <KoenigBasicHtmlInput
                                 @name="footer"
-                                @value={{readonly this.footerContent}}
-                                @input={{this.setFooterContent}}
-                                {{!-- The modal listens for key events to close, this stops the textarea from triggering them--}}
-                                {{on "keydown" this.stopPropagation}}
-                                {{on "keypress" this.stopPropagation}}
-                                {{on "keyup" this.stopPropagation}}
+                                @html={{this.footerContent}}
+                                @class="miw-100 form-text gh-members-emailsettings-footer-input"
+                                @onChange={{this.setFooterContent}}
+                                @onFocus={{this.handleInputFocus}}
+                                @onBlur={{this.handleInputBlur}}
                             />
                             <p>Extra content to show at the bottom of all emails</p>
                         </GhFormGroup>
@@ -143,7 +142,7 @@
                         </div>
                         <div class="gh-members-emailpreview-footer">
                             <div class="gh-members-emailpreview-footercontent">
-                                {{this.footerContent}}
+                                {{{this.footerContent}}}
                             </div>
                             <div class="gh-members-emailpreview-footersite">
                                 <span>Ghost Site &copy; – </span> <a href="javascript:">Unsubscribe</a>

ghost/admin/app/components/modal-email-design-settings.js

@@ -33,19 +33,24 @@ export default class ModalEmailDesignSettings extends ModalComponent {
         this.bodyFontCategory = value;
     }
 
-    @action
-    stopPropagation(event) {
-        event.stopPropagation();
-    }
-
     @action
     setShowBadge(event) {
         this.showBadge = event.target.checked;
     }
 
     @action
-    setFooterContent(event) {
-        this.footerContent = event.target.value;
+    setFooterContent(value) {
+        this.footerContent = value;
+    }
+
+    @action
+    handleInputFocus() {
+        this._removeShortcuts();
+    }
+
+    @action
+    handleInputBlur() {
+        this._setupShortcuts();
     }
 
     @action

ghost/admin/app/styles/layouts/members.css

@@ -795,6 +795,12 @@ p.gh-members-import-errordetail:first-of-type {
 
 /* Email newsletter design settings
 /* -------------------------------------------------------- */
+.gh-members-emailsettings-footer-input {
+    border: 1px solid var(--whitegrey);
+    padding: 0 6px 6px 6px;
+    height: 80px;
+}
+
 .gh-members-emailsettings-footer {
     border-top: 1px solid var(--whitegrey);
     padding-top: 20px;

ghost/admin/lib/koenig-editor/addon/components/koenig-toolbar.js

@@ -176,6 +176,10 @@ export default Component.extend({
         // we only care about the left mouse button
         if (event.which === 1) {
             this._isMouseDown = true;
+            // prevent mousedown on toolbar buttons losing editor focus before the following click event can trigger the buttons behaviour
+            if (this.element.contains(event.target)) {
+                event.preventDefault();
+            }
         }
     },