🎨 Added word count to beta editor

closes https://github.com/TryGhost/Team/issues/3242

- the beta editor now provides `<WordCountPlugin>` for tracking word count so we can add the UI for it back

ghost/admin/app/components/gh-koenig-editor-lexical.hbs

@@ -42,6 +42,7 @@
             @onChange={{@onBodyChange}}
             @registerAPI={{this.registerEditorAPI}}
             @cursorDidExitAtTop={{this.focusTitle}}
+            @updateWordCount={{@updateWordCount}}
         />
 
         {{!-- <KoenigEditor

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

@@ -123,6 +123,11 @@ const KoenigEditor = (props) => {
     return <_KoenigEditor {...props} />;
 };
 
+const WordCountPlugin = (props) => {
+    const {WordCountPlugin: _WordCountPlugin} = editorResource.read();
+    return <_WordCountPlugin {...props} />;
+};
+
 export default class KoenigLexicalEditor extends Component {
     @service ajax;
     @service feature;
@@ -502,6 +507,7 @@ export default class KoenigLexicalEditor extends Component {
                                 onChange={this.args.onChange}
                                 registerAPI={this.args.registerAPI}
                             />
+                            <WordCountPlugin onChange={this.args.updateWordCount} />
                         </KoenigComposer>
                     </Suspense>
                 </ErrorHandler>

ghost/admin/app/controllers/lexical-editor.js

@@ -127,7 +127,7 @@ export default class LexicalEditorController extends Controller {
     fromAnalytics = false;
 
     // koenig related properties
-    wordcount = null;
+    wordCount = 0;
 
     /* private properties ----------------------------------------------------*/
 
@@ -305,8 +305,8 @@ export default class LexicalEditorController extends Controller {
     }
 
     @action
-    updateWordCount(counts) {
-        this.set('wordCount', counts);
+    updateWordCount(count) {
+        this.set('wordCount', count);
     }
 
     @action

ghost/admin/app/templates/lexical-editor.hbs

@@ -75,7 +75,7 @@
                 @scrollContainerSelector=".gh-koenig-editor"
                 @scrollOffsetBottomSelector=".gh-mobile-nav-bar"
                 @onEditorCreated={{this.setKoenigEditor}}
-                @onWordCountChange={{this.updateWordCount}}
+                @updateWordCount={{this.updateWordCount}}
                 @featureImage={{this.post.featureImage}}
                 @featureImageAlt={{this.post.featureImageAlt}}
                 @featureImageCaption={{this.post.featureImageCaption}}
@@ -98,9 +98,9 @@
             {{/if}}
 
             <div class="gh-editor-wordcount-container">
-                {{!-- <div class="gh-editor-wordcount">
-                    {{gh-pluralize this.wordCount.wordCount "word"}}
-                </div> --}}
+                <div class="gh-editor-wordcount">
+                    {{gh-pluralize this.wordCount "word"}}
+                </div>
                 {{!-- <a href="https://github.com/TryGhost/Koenig/tree/main/packages/koenig-lexical" target="_blank" rel="noopener noreferrer" class="gh-lexical-indicator">Lexical</a> --}}
                 <a href="https://ghost.org/help/using-the-editor/" class="flex" target="_blank" rel="noopener noreferrer">{{svg-jar "help"}}</a>
             </div>