✨ Koenig - Added reading time and word count display

refs TryGhost/Ghost#9724
- add `registerComponent` hook to cards so that `{{koenig-editor}}` can fetch properties from card components directly
- add word count and reading time utilities
- add throttled word count update routine to `{{koenig-editor}}` that walks all sections and counts text words or fetches word/image counts from card components
- add `wordCountDidChange` hook to `{{koenig-editor}}` so that word count + reading time can be exposed
- modify editor controller to update it's own word count property when koenig triggers it's action
- modified the editor template to show reading time + word count next to the post status

Author: kevinansfield

app/components/gh-koenig-editor.js

@@ -20,6 +20,7 @@ export default Component.extend({
     onTitleBlur() {},
     onBodyChange() {},
     onEditorCreated() {},
+    onWordCountChange() {},
 
     actions: {
         focusTitle() {

app/controllers/editor.js

@@ -103,7 +103,7 @@ export default Controller.extend({
     useKoenig: false,
 
     // koenig related properties
-    wordcount: 0,
+    wordcount: null,
 
     /* private properties ----------------------------------------------------*/
 
@@ -270,11 +270,6 @@ export default Controller.extend({
             this.toggleProperty('showReAuthenticateModal');
         },
 
-        // TODO: this should be part of the koenig component
-        setWordcount(count) {
-            this.set('wordcount', count);
-        },
-
         setKoenigEditor(koenig) {
             this._koenig = koenig;
 
@@ -285,6 +280,10 @@ export default Controller.extend({
             if (this.post.isDraft) {
                 this._koenig.cleanup();
             }
+        },
+
+        updateWordCount(counts) {
+            this.set('wordCount', counts);
         }
     },
 
@@ -659,6 +658,7 @@ export default Controller.extend({
         this.set('shouldFocusEditor', false);
         this.set('leaveEditorTransition', null);
         this.set('infoMessage', null);
+        this.set('wordCount', null);
 
         // remove the onbeforeunload handler as it's only relevant whilst on
         // the editor route

app/templates/components/gh-koenig-editor.hbs

@@ -29,5 +29,6 @@
         scrollContainerSelector=scrollContainerSelector
         scrollOffsetTopSelector=scrollOffsetTopSelector
         scrollOffsetBottomSelector=scrollOffsetBottomSelector
+        wordCountDidChange=(action onWordCountChange)
     }}
 </div>

app/templates/editor.hbs

@@ -7,11 +7,18 @@
     }}
         <header class="gh-editor-header br2 pe-none {{editor.headerClass}} {{if infoMessage "bg-white-90"}}">
             <div class="flex items-center br2 h9 pa2 pl4 pr4 pe-auto {{unless infoMessage "bg-white-90"}}">
-                <div class="gh-editor-status">
-                    {{gh-editor-post-status
-                        post=post
-                        isSaving=(or autosave.isRunning saveTasks.isRunning)
-                    }}
+                <div class="flex items-baseline">
+                    <span class="fw4 darkgrey-l2 pl4">
+                        {{gh-editor-post-status
+                            post=post
+                            isSaving=(or autosave.isRunning saveTasks.isRunning)
+                        }}
+                    </span>
+                    {{#if wordCount}}
+                        <span class="pl3 f-small midgrey">
+                            {{wordCount.readingTime}} ({{pluralize wordCount.wordCount "word"}})
+                        </span>
+                    {{/if}}
                 </div>
                 {{#gh-scheduled-post-countdown post=post as |post countdown|}}
                     <time datetime="{{post.publishedAtUTC}}" class="green f8 nudge-bottom--1 ml3" data-test-schedule-countdown>
@@ -75,6 +82,7 @@
                 scrollOffsetTopSelector=".gh-editor-header-small"
                 scrollOffsetBottomSelector=".gh-mobile-nav-bar"
                 onEditorCreated=(action "setKoenigEditor")
+                onWordCountChange=(action "updateWordCount")
             }}
 
         {{else}}

lib/koenig-editor/addon/components/koenig-card-code.js

@@ -1,5 +1,6 @@
 import Component from '@ember/component';
 import Ember from 'ember';
+import countWords from '../utils/count-words';
 import layout from '../templates/components/koenig-card-code';
 import {computed} from '@ember/object';
 import {htmlSafe} from '@ember/string';
@@ -24,6 +25,11 @@ export default Component.extend({
     selectCard() {},
     deselectCard() {},
     deleteCard() {},
+    registerComponent() {},
+
+    counts: computed('payload.code', function () {
+        return {wordCount: countWords(this.payload.code)};
+    }),
 
     toolbar: computed('isEditing', function () {
         if (!this.isEditing) {
@@ -55,6 +61,8 @@ export default Component.extend({
         }
 
         this.set('payload', payload);
+
+        this.registerComponent(this);
     },
 
     actions: {

lib/koenig-editor/addon/components/koenig-card-embed.js

@@ -1,7 +1,9 @@
 import Component from '@ember/component';
+import countWords from '../utils/count-words';
 import layout from '../templates/components/koenig-card-embed';
 import noframe from 'noframe.js';
 import {NO_CURSOR_MOVEMENT} from './koenig-editor';
+import {computed} from '@ember/object';
 import {isBlank} from '@ember/utils';
 import {run} from '@ember/runloop';
 import {inject as service} from '@ember/service';
@@ -31,12 +33,22 @@ export default Component.extend({
     moveCursorToNextSection() {},
     moveCursorToPrevSection() {},
     addParagraphAfterCard() {},
+    registerComponent() {},
+
+    counts: computed('payload.{html,caption}', function () {
+        return {
+            imageCount: this.payload.html ? 1 : 0,
+            wordCount: countWords(this.payload.caption)
+        };
+    }),
 
     init() {
         this._super(...arguments);
         if (this.payload.url && !this.payload.html) {
             this.convertUrl.perform(this.payload.url);
         }
+
+        this.registerComponent(this);
     },
 
     didInsertElement() {

lib/koenig-editor/addon/components/koenig-card-hr.js

@@ -7,5 +7,11 @@ export default Component.extend({
 
     // closure actions
     selectCard() {},
-    deselectCard() {}
+    deselectCard() {},
+    registerComponent() {},
+
+    init() {
+        this._super(...arguments);
+        this.registerComponent(this);
+    }
 });

lib/koenig-editor/addon/components/koenig-card-html.js

@@ -1,4 +1,5 @@
 import Component from '@ember/component';
+import countWords, {countImages, stripTags} from '../utils/count-words';
 import layout from '../templates/components/koenig-card-html';
 import {computed} from '@ember/object';
 import {isBlank} from '@ember/utils';
@@ -20,6 +21,14 @@ export default Component.extend({
     editCard() {},
     saveCard() {},
     deleteCard() {},
+    registerComponent() {},
+
+    counts: computed('payload.html', function () {
+        return {
+            wordCount: countWords(stripTags(this.payload.html)),
+            imageCount: countImages(this.payload.html)
+        };
+    }),
 
     toolbar: computed('isEditing', function () {
         if (!this.isEditing) {
@@ -46,6 +55,8 @@ export default Component.extend({
         }
 
         this.set('payload', payload);
+
+        this.registerComponent(this);
     },
 
     actions: {

lib/koenig-editor/addon/components/koenig-card-image.js

@@ -1,5 +1,6 @@
 import $ from 'jquery';
 import Component from '@ember/component';
+import countWords from '../utils/count-words';
 import layout from '../templates/components/koenig-card-image';
 import {
     IMAGE_EXTENSIONS,
@@ -34,6 +35,22 @@ export default Component.extend({
     moveCursorToNextSection() {},
     moveCursorToPrevSection() {},
     addParagraphAfterCard() {},
+    registerComponent() {},
+
+    counts: computed('payload.{src,caption}', function () {
+        let wordCount = 0;
+        let imageCount = 0;
+
+        if (this.payload.src) {
+            imageCount += 1;
+        }
+
+        if (this.payload.caption) {
+            wordCount += countWords(this.payload.caption);
+        }
+
+        return {wordCount, imageCount};
+    }),
 
     kgImgStyle: computed('payload.imageStyle', function () {
         let imageStyle = this.payload.imageStyle;
@@ -96,6 +113,8 @@ export default Component.extend({
         if (!this.payload) {
             this.set('payload', {});
         }
+
+        this.registerComponent(this);
     },
 
     didReceiveAttrs() {

lib/koenig-editor/addon/components/koenig-card-markdown.js

@@ -1,4 +1,5 @@
 import Component from '@ember/component';
+import countWords, {countImages, stripTags} from '../utils/count-words';
 import formatMarkdown from 'ghost-admin/utils/format-markdown';
 import layout from '../templates/components/koenig-card-markdown';
 import {computed} from '@ember/object';
@@ -29,6 +30,14 @@ export default Component.extend({
     selectCard() {},
     deselectCard() {},
     deleteCard() {},
+    registerComponent() {},
+
+    counts: computed('renderedMarkdown', function () {
+        return {
+            wordCount: countWords(stripTags(this.renderedMarkdown)),
+            imageCount: countImages(this.renderedMarkdown)
+        };
+    }),
 
     renderedMarkdown: computed('payload.markdown', function () {
         return htmlSafe(formatMarkdown(this.payload.markdown));
@@ -59,6 +68,8 @@ export default Component.extend({
         // subtract toolbar height from MIN_HEIGHT so the trigger happens at
         // the expected position without forcing the min height to be too small
         this.set('bottomOffset', -MIN_HEIGHT - 49);
+
+        this.registerComponent(this);
     },
 
     willDestroyElement() {

lib/koenig-editor/addon/components/koenig-editor.js

@@ -8,6 +8,8 @@ import Editor from 'mobiledoc-kit/editor/editor';
 import EmberObject, {computed, get} from '@ember/object';
 import Key from 'mobiledoc-kit/utils/key';
 import MobiledocRange from 'mobiledoc-kit/utils/cursor/range';
+import calculateReadingTime from '../utils/reading-time';
+import countWords from '../utils/count-words';
 import defaultAtoms from '../options/atoms';
 import defaultCards from '../options/cards';
 import formatMarkdown from 'ghost-admin/utils/format-markdown';
@@ -197,6 +199,7 @@ export default Component.extend({
     didCreateEditor() {},
     onChange() {},
     cursorDidExitAtTop() {},
+    wordCountDidChange() {},
 
     /* computed properties -------------------------------------------------- */
 
@@ -405,6 +408,8 @@ export default Component.extend({
 
         this.set('editor', editor);
         this.didCreateEditor(this);
+
+        run.schedule('afterRender', this, this._calculateWordCount);
     },
 
     didInsertElement() {
@@ -634,6 +639,9 @@ export default Component.extend({
 
         // trigger closure action
         this.onChange(updatedMobiledoc);
+
+        // re-calculate word count
+        this._calculateWordCount();
     },
 
     cursorDidChange(editor) {
@@ -1133,6 +1141,39 @@ export default Component.extend({
         }
     },
 
+    // calculate the number of words in rich-text sections and query cards for
+    // their own word and image counts. Image counts are used for reading-time
+    _calculateWordCount() {
+        run.throttle(this, this._throttledWordCount, 100, false);
+    },
+
+    _throttledWordCount() {
+        let wordCount = 0;
+        let imageCount = 0;
+
+        this.editor.post.walkAllLeafSections((section) => {
+            if (section.isCardSection) {
+                // get counts from card components
+                let card = this.getCardFromSection(section);
+                let cardCounts = get(card, 'component.counts') || {};
+                wordCount += cardCounts.wordCount || 0;
+                imageCount += cardCounts.imageCount || 0;
+            } else {
+                wordCount += countWords(section.text);
+            }
+        });
+
+        if (wordCount !== this.wordCount || imageCount !== this.imageCount) {
+            let readingTime = calculateReadingTime({wordCount, imageCount});
+
+            this.wordCount = wordCount;
+            this.imageCount = imageCount;
+            this.readingTime = readingTime;
+
+            this.wordCountDidChange({wordCount, imageCount, readingTime});
+        }
+    },
+
     // store a reference to the editor for the acceptance test helpers
     _setExpandoProperty(editor) {
         let config = getOwner(this).resolveRegistration('config:environment');

lib/koenig-editor/addon/templates/components/koenig-editor.hbs

@@ -74,6 +74,7 @@
             moveCursorToPrevSection=(action "moveCursorToPrevSection" card)
             moveCursorToNextSection=(action "moveCursorToNextSection" card)
             addParagraphAfterCard=(action "addParagraphAfterCard" card)
+            registerComponent=(action (mut card.component))
         }}
     {{/-in-element}}
 {{/each}}

lib/koenig-editor/addon/utils/count-words.js

@@ -0,0 +1,51 @@
+/**
+ * Word count Utility
+ * @param {string} html
+ * @returns {integer} word count
+ * @description Takes a string and returns the number of words
+ * This code is taken from https://github.com/sparksuite/simplemde-markdown-editor/blob/6abda7ab68cc20f4aca870eb243747951b90ab04/src/js/simplemde.js#L1054-L1067
+ * with extra diacritics character matching. It's the same code as used in
+ * Ghost's {{reading_time}} helper
+ **/
+export default function countWords(text = '') {
+    // protect against Handlebars.SafeString
+    if (text.hasOwnProperty('string')) {
+        text = text.string;
+    }
+
+    let pattern = /[a-zA-ZÀ-ÿ0-9_\u0392-\u03c9\u0410-\u04F9]+|[\u4E00-\u9FFF\u3400-\u4dbf\uf900-\ufaff\u3040-\u309f\uac00-\ud7af]+/g;
+    let match = text.match(pattern);
+    let count = 0;
+
+    if (match === null) {
+        return count;
+    }
+
+    for (var i = 0; i < match.length; i += 1) {
+        if (match[i].charCodeAt(0) >= 0x4E00) {
+            count += match[i].length;
+        } else {
+            count += 1;
+        }
+    }
+
+    return count;
+}
+
+export function countImages(html = '') {
+    // protect against Handlebars.SafeString
+    if (html.hasOwnProperty('string')) {
+        html = html.string;
+    }
+
+    return (html.match(/<img(.|\n)*?>/g) || []).length;
+}
+
+export function stripTags(html = '') {
+    // protect against Handlebars.SafeString
+    if (html.hasOwnProperty('string')) {
+        html = html.string;
+    }
+
+    return html.replace(/<(.|\n)*?>/g, ' ');
+}