Added announcementBar feature flag and announcement input demo (#16659)

refs TryGhost/Team#3008

---

<!-- Leave the line below if you'd like GitHub Copilot to generate a
summary from your commit -->
<!--
copilot:summary
-->
### <samp>🤖 Generated by Copilot at 2a60623</samp>

This pull request adds a new experimental feature for displaying an
announcement bar at the top of the site. It introduces a new component
template and class for the announcement bar, a new feature flag and its
UI controls, and some CSS adjustments for the editor input and the
announcement bar.

ghost/admin/app/components/custom-theme-settings/announcement.hbs

@@ -0,0 +1,9 @@
+<div class="gh-stack-item {{if (eq @index 0) "gh-setting-first" "gh-setting"}}">
+    <div class="gh-announcement-editor">
+        <KoenigLexicalEditorInput
+            @placeholderText="Enter text"
+            @html={{'<p><span>check</span> <a href="https://ghost.org/changelog/markdown/" dir="ltr"><span data-lexical-text="true">ghost.org/changelog/markdown/</span></a></p>'}}
+            @onChangeHtml={{this.onChangeHtml}}
+        />
+    </div>
+</div>

ghost/admin/app/components/custom-theme-settings/announcement.js

@@ -0,0 +1,10 @@
+import Component from '@glimmer/component';
+import {action} from '@ember/object';
+
+export default class CustomThemeSettingsAnnouncementComponent extends Component {
+    @action
+    // eslint-disable-next-line no-unused-vars
+    onChangeHtml(html) {
+        this.args.onChange?.();
+    }
+}

ghost/admin/app/components/koenig-lexical-editor-input.js

@@ -133,7 +133,7 @@ export default class KoenigLexicalEditorInput extends Component {
                                 singleParagraph={true}
                                 className="koenig-lexical-editor-input"
                                 placeholderText={props.placeholderText}
-                                placeholderClassName=""
+                                placeholderClassName="koenig-lexical-editor-input-placeholder"
                             >
                                 <HtmlOutputPlugin html={props.html} setHtml={props.onChangeHtml} />
                             </KoenigComposableEditor>

ghost/admin/app/components/settings/design/theme-settings-form.hbs

@@ -17,5 +17,8 @@
                 <CustomThemeSettings::Image @setting={{setting}} @index={{index}} @onChange={{@updatePreview}} />
             {{/if}}
         {{/each}}
+        {{#if (feature 'announcementBar')}}
+            <CustomThemeSettings::Announcement @onChange={{@updatePreview}} />
+        {{/if}}
     </form>
 </div>

ghost/admin/app/services/feature.js

@@ -74,6 +74,7 @@ export default class FeatureService extends Service {
     @feature('migrateApp') migrateApp;
     @feature('i18n') i18n;
     @feature('postHistory') postHistory;
+    @feature('announcementBar') announcementBar;
 
     _user = null;
 

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

@@ -1089,3 +1089,11 @@ figure {
     transform: translateX(0); /* used for dynamic positioning with js */
     padding-right: 8px; /* extra padding used for dynamic positioning with js */
 }
+
+.gh-announcement-editor {
+    width: 100%;
+}
+
+.gh-announcement-editor div {
+    width: 100%;
+}

ghost/admin/app/templates/settings/labs.hbs

@@ -318,6 +318,20 @@
                         </div>
                     </div>
                 </div>
+
+                <div class="gh-expandable-block">
+                    <div class="gh-expandable-header">
+                        <div>
+                            <h4 class="gh-expandable-title">Announcement bar</h4>
+                            <p class="gh-expandable-description">
+                                Allows publishers to set a banner at the top of their site
+                            </p>
+                        </div>
+                        <div class="for-switch">
+                            <GhFeatureFlag @flag="announcementBar" />
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
         {{/if}}

ghost/core/core/shared/labs.js

@@ -40,7 +40,8 @@ const ALPHA_FEATURES = [
     'websockets',
     'stripeAutomaticTax',
     'makingItRain',
-    'postHistory'
+    'postHistory',
+    'announcementBar'
 ];
 
 module.exports.GA_KEYS = [...GA_FEATURES];