Added editorEmojiPicker labs flag (#18739)

closes https://github.com/TryGhost/Product/issues/4056

- adds new flag with UI and passes it through to the editor so it can conditionally enable the relevant plugins

apps/admin-x-settings/src/components/settings/advanced/labs/AlphaFeatures.tsx

@@ -17,7 +17,7 @@ const features = [{
     flag: 'webmentions'
 },{
     title: 'Websockets',
-    description: 'Test out Websockets functionality at <code>/ghost/#/websockets</code>.',
+    description: <>Test out Websockets functionality at <code>/ghost/#/websockets</code>.</>,
     flag: 'websockets'
 },{
     title: 'Stripe Automatic Tax',
@@ -55,6 +55,10 @@ const features = [{
     title: 'List-Unsubscribe header',
     description: 'Set the List-Unsubscribe header in emails',
     flag: 'listUnsubscribeHeader'
+},{
+    title: 'Editor emoji picker',
+    description: <>Trigger an emoji picker when typing <code>{':{search}'}</code> in the editor</>,
+    flag: 'editorEmojiPicker'
 }];
 
 const AlphaFeatures: React.FC = () => {

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

@@ -292,7 +292,8 @@ export default class KoenigLexicalEditor extends Component {
             fetchLabels,
             feature: {
                 collectionsCard: this.feature.get('collectionsCard'),
-                collections: this.feature.get('collections')
+                collections: this.feature.get('collections'),
+                emojiPicker: this.feature.get('editorEmojiPicker')
             },
             depreciated: {
                 headerV1: true // if false, shows header v1 in the menu

ghost/admin/app/services/feature.js

@@ -77,6 +77,7 @@ export default class FeatureService extends Service {
     @feature('tipsAndDonations') tipsAndDonations;
     @feature('recommendations') recommendations;
     @feature('lexicalIndicators') lexicalIndicators;
+    @feature('editorEmojiPicker') lexicalEmojiPicker;
 
     _user = null;
 

ghost/core/core/shared/labs.js

@@ -42,7 +42,8 @@ const ALPHA_FEATURES = [
     'importMemberTier',
     'recommendations',
     'lexicalIndicators',
-    'listUnsubscribeHeader'
+    'listUnsubscribeHeader',
+    'editorEmojiPicker'
 ];
 
 module.exports.GA_KEYS = [...GA_FEATURES];