Wired up TK reminder step in publish flow (#19104)

refs https://github.com/TryGhost/Product/issues/4184

- set up property on the editor controller for tracking number of TKs, action for updating it, and reset mechanism to ensure we go back to 0 when switching post
- uses random number for now pending `<TkPlugin>` being updated to expose the TK count
- passed TK count data to the publish flow modal so it can show a reminder step before the publish options step when there are still TKs in the post content
- added `onCountChange` prop to `<TkPlugin>` ready for the count feature to be implemented

ghost/admin/app/components/editor/modals/publish-flow.hbs

@@ -51,6 +51,12 @@
                 @postCount={{this.postCount}}
                 @close={{@close}}
             />
+        {{else if this.isConfirmingTks}}
+            <Editor::Modals::PublishFlow::TkReminder
+                @tkCount={{@data.tkCount}}
+                @close={{@close}}
+                @confirm={{this.confirmTks}}
+            />
         {{else}}
             <Editor::Modals::PublishFlow::Options
                 @publishOptions={{@data.publishOptions}}

ghost/admin/app/components/editor/modals/publish-flow.js

@@ -18,6 +18,12 @@ export default class PublishModalComponent extends Component {
     @tracked isComplete = false;
     @tracked postCount = null;
 
+    @tracked hasConfirmedTks = false;
+
+    get isConfirmingTks() {
+        return this.args.data.tkCount > 0 && !this.hasConfirmedTks;
+    }
+
     get recipientType() {
         const filter = this.args.data.publishOptions.recipientFilter;
 
@@ -40,6 +46,11 @@ export default class PublishModalComponent extends Component {
         return 'specific';
     }
 
+    @action
+    confirmTks() {
+        this.hasConfirmedTks = true;
+    }
+
     @action
     toggleConfirm() {
         this.isConfirming = !this.isConfirming;

ghost/admin/app/components/editor/modals/publish-flow/tk-reminder.hbs

@@ -2,13 +2,22 @@
     <div>Forget something?</div>
 </div>
 <p class="gh-publish-confirmation">
-    Looks like you've got some unfinished business. There are <strong>5 TK reminders</strong> left in your post.
+    Looks like you've got some unfinished business. There are <strong>{{@tkCount}} TK reminders</strong> left in your post.
 </p>
 
 <div class="gh-publish-cta">
-    <GhTaskButton
-        @buttonText="&larr; Back to editor"
-        @class="gh-btn gh-btn-black gh-btn-large"
-    />
-    <button type="button" class="gh-btn gh-btn-link gh-btn-large gh-publish-cta-secondary">Continue to publish</button>
+    <button
+        type="button"
+        class="gh-btn gh-btn-black gh-btn-large"
+        {{on "click" @close}}
+    >
+        <span>&larr; Back to editor</span>
+    </button>
+    <button
+        type="button"
+        class="gh-btn gh-btn-link gh-btn-large gh-publish-cta-secondary"
+        {{on "click" @confirm}}
+    >
+        Continue to publish
+    </button>
 </div>

ghost/admin/app/components/editor/publish-management.js

@@ -52,7 +52,8 @@ export default class PublishManagement extends Component {
                 publishOptions: this.publishOptions,
                 saveTask: this.publishTask,
                 togglePreviewPublish: this.togglePreviewPublish,
-                skipAnimation
+                skipAnimation,
+                tkCount: this.args.tkCount
             });
 
             const result = await this.publishFlowModal;

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

@@ -56,6 +56,7 @@
             @registerAPI={{this.registerEditorAPI}}
             @cursorDidExitAtTop={{this.focusTitle}}
             @updateWordCount={{@updateWordCount}}
+            @updateTkCount={{@updateTkCount}}
         />
     </div>
 </div>

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

@@ -536,7 +536,7 @@ export default class KoenigLexicalEditor extends Component {
                                 registerAPI={this.args.registerAPI}
                             />
                             <WordCountPlugin editorResource={this.editorResource} onChange={this.args.updateWordCount} />
-                            {this.feature.tkReminders && <TKPlugin editorResource={this.editorResource} />}
+                            {this.feature.tkReminders && <TKPlugin editorResource={this.editorResource} onCountChange={this.args.updateTkCount} />}
                         </KoenigComposer>
                     </Suspense>
                 </ErrorHandler>

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

@@ -127,6 +127,7 @@ export default class LexicalEditorController extends Controller {
 
     // koenig related properties
     wordCount = 0;
+    tkCount = this.getRandomTkCount(); // TODO: set to 0 once onCountChange is wired up
 
     /* private properties ----------------------------------------------------*/
 
@@ -134,6 +135,14 @@ export default class LexicalEditorController extends Controller {
     _saveOnLeavePerformed = false;
     _previousTagNames = null; // set by setPost and _postSaved, used in hasDirtyAttributes
 
+    // TODO: remove once onCountChange is wired up
+    getRandomTkCount() {
+        if (!this.feature.tkReminders) {
+            return 0;
+        }
+        return Math.ceil(Math.random() * 10);
+    }
+
     /* computed properties ---------------------------------------------------*/
 
     @alias('model')
@@ -310,6 +319,11 @@ export default class LexicalEditorController extends Controller {
         this.set('wordCount', count);
     }
 
+    @action
+    updateTkCount(count) {
+        this.set('tkCount', count);
+    }
+
     @action
     setFeatureImage(url) {
         this.post.set('featureImage', url);
@@ -1075,7 +1089,8 @@ export default class LexicalEditorController extends Controller {
         this.set('hasDirtyAttributes', false);
         this.set('shouldFocusTitle', false);
         this.set('showSettingsMenu', false);
-        this.set('wordCount', null);
+        this.set('wordCount', 0);
+        this.set('tkCount', this.getRandomTkCount()); // TODO: set to 0 once onCountChange is wired up
 
         // remove the onbeforeunload handler as it's only relevant whilst on
         // the editor route

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

@@ -9,6 +9,7 @@
                 <Editor::PublishManagement
                     @post={{this.post}}
                     @hasUnsavedChanges={{this.hasDirtyAttributes}}
+                    @tkCount={{this.tkCount}}
                     @beforePublish={{perform this.beforeSaveTask}}
                     @afterPublish={{this.afterSave}}
                     @saveTask={{this.saveTask}}
@@ -72,6 +73,7 @@
                 @scrollOffsetBottomSelector=".gh-mobile-nav-bar"
                 @onEditorCreated={{this.setKoenigEditor}}
                 @updateWordCount={{this.updateWordCount}}
+                @updateTkCount={{this.updateTkCount}}
                 @featureImage={{this.post.featureImage}}
                 @featureImageAlt={{this.post.featureImageAlt}}
                 @featureImageCaption={{this.post.featureImageCaption}}