0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-03-11 02:12:21 -05:00

🎨 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
This commit is contained in:
Kevin Ansfield 2023-06-14 17:56:03 +01:00 committed by Daniel Lockyer
parent 49f936b098
commit 3ee857a0de
No known key found for this signature in database
4 changed files with 15 additions and 8 deletions

View file

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

View file

@ -82,7 +82,7 @@ const fetchKoenig = function () {
} else { } else {
await import(`https://${url.host}${url.pathname}`); await import(`https://${url.host}${url.pathname}`);
} }
return window['@tryghost/koenig-lexical']; return window['@tryghost/koenig-lexical'];
}; };
@ -123,6 +123,11 @@ const KoenigEditor = (props) => {
return <_KoenigEditor {...props} />; return <_KoenigEditor {...props} />;
}; };
const WordCountPlugin = (props) => {
const {WordCountPlugin: _WordCountPlugin} = editorResource.read();
return <_WordCountPlugin {...props} />;
};
export default class KoenigLexicalEditor extends Component { export default class KoenigLexicalEditor extends Component {
@service ajax; @service ajax;
@service feature; @service feature;
@ -502,6 +507,7 @@ export default class KoenigLexicalEditor extends Component {
onChange={this.args.onChange} onChange={this.args.onChange}
registerAPI={this.args.registerAPI} registerAPI={this.args.registerAPI}
/> />
<WordCountPlugin onChange={this.args.updateWordCount} />
</KoenigComposer> </KoenigComposer>
</Suspense> </Suspense>
</ErrorHandler> </ErrorHandler>

View file

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

View file

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