This repository has been archived by the owner on Jun 26, 2020. It is now read-only.
Introduce word count plugin #2
There are no files selected for viewing
Empty file.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| /** | ||
| * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved. | ||
| * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license | ||
| */ | ||
|
|
||
| /* globals window */ | ||
|
|
||
| import ClassicEditor from '@ckeditor/ckeditor5-build-classic/src/ckeditor'; | ||
|
|
||
| import WordCount from '@ckeditor/ckeditor5-word-count/src/wordcount'; | ||
|
|
||
| ClassicEditor.builtinPlugins.push( WordCount ); | ||
|
|
||
| window.ClassicEditor = ClassicEditor; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
|
|
||
| <style> | ||
| .customized-counter__color-box { | ||
| --hue: 180; | ||
| width: 20px; | ||
| height: 20px; | ||
| background-color: hsl( var( --hue ), 100%, 50% ); | ||
| display: inline-block; | ||
| } | ||
|
|
||
| .customized-counter { | ||
| border: 3px solid #333; | ||
| padding-left: 5px; | ||
| margin-bottom: 15px; | ||
| } | ||
|
|
||
| .customized-counter > div { | ||
| display: inline-block; | ||
| width: 50%; | ||
| margin-left: 0; | ||
| margin-right: 0; | ||
| } | ||
| </style> | ||
|
|
||
| <div id="demo-editor-update"> | ||
| <p>A <strong>black hole</strong> is a region of <a href="https://en.wikipedia.org/wiki/Spacetime">spacetime</a> exhibiting <a href="https://en.wikipedia.org/wiki/Gravitation">gravitational</a> acceleration so strong that nothing—no <a href="https://en.wikipedia.org/wiki/Particle">particles</a> or even <a href="https://en.wikipedia.org/wiki/Electromagnetic_radiation">electromagnetic radiation</a> such as <a href="https://en.wikipedia.org/wiki/Light">light</a>—can escape from it.<a href="https://en.wikipedia.org/wiki/Black_hole#cite_note-6">[6]</a> The theory of <a href="https://en.wikipedia.org/wiki/General_relativity">general relativity</a> predicts that a sufficiently compact <a href="https://en.wikipedia.org/wiki/Mass">mass</a> can deform <a href="https://en.wikipedia.org/wiki/Spacetime">spacetime</a> to form a black hole.</p> | ||
| </div> | ||
| <div class="customized-counter"> | ||
| <div class="customized-counter__words"> | ||
| <label>Words: | ||
| <progress value="42" max="100"></progress> | ||
| </label> | ||
| </div> | ||
| <div class="customized-counter__characters"> | ||
| Characters: | ||
| <div class="customized-counter__color-box"></div> | ||
| </div> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| /** | ||
| * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved. | ||
| * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license | ||
| */ | ||
|
|
||
| /* global window, document, console, ClassicEditor */ | ||
|
|
||
| ClassicEditor | ||
| .create( document.querySelector( '#demo-editor-update' ), { | ||
| toolbar: { | ||
| items: [ | ||
| 'heading', | ||
| 'bold', | ||
| 'italic', | ||
| 'bulletedList', | ||
| 'numberedList', | ||
| 'blockQuote', | ||
| 'link', | ||
| '|', | ||
| 'mediaEmbed', | ||
| 'insertTable', | ||
| '|', | ||
| 'undo', | ||
| 'redo' | ||
| ], | ||
| viewportTopOffset: window.getViewportTopOffsetConfig() | ||
| }, | ||
| table: { | ||
| contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells' ] | ||
| } | ||
| } ) | ||
| .then( editor => { | ||
| const wordCountPlugin = editor.plugins.get( 'WordCount' ); | ||
|
|
||
| const progressBar = document.querySelector( '.customized-counter progress' ); | ||
| const colorBox = document.querySelector( '.customized-counter__color-box' ); | ||
|
|
||
| wordCountPlugin.on( 'update', updateHandler ); | ||
|
|
||
| function updateHandler( evt, payload ) { | ||
| progressBar.value = payload.words; | ||
| colorBox.style.setProperty( '--hue', payload.characters * 3 ); | ||
| } | ||
| } ) | ||
| .catch( err => { | ||
| console.error( err.stack ); | ||
| } ); | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| <style> | ||
| .word-counter { | ||
| border: 3px solid #333; | ||
| padding-left: 5px; | ||
| margin-bottom: 15px; | ||
| } | ||
| </style> | ||
| <div id="demo-editor"> | ||
| <p>The <strong>Battle of Westerplatte</strong> was one of the first battles in Germany's <a href="https://en.wikipedia.org/wiki/Invasion_of_Poland">invasion of Poland</a>, marking the start of <a href="https://en.wikipedia.org/wiki/World_War_II">World War II</a> in <a href="https://en.wikipedia.org/wiki/Europe">Europe</a>. Beginning on 1 September 1939, <a href="https://en.wikipedia.org/wiki/Nazi_Germany">German</a> <a href="https://en.wikipedia.org/wiki/German_Army_(Wehrmacht)">army</a>, <a href="https://en.wikipedia.org/wiki/Kriegsmarine">naval</a> and <a href="https://en.wikipedia.org/wiki/Luftwaffe">air forces</a> and <a href="https://en.wikipedia.org/wiki/Free_City_of_Danzig_Police">Danzig police</a> assaulted <a href="https://en.wikipedia.org/wiki/Poland">Poland</a>'s Military Transit Depot (<i>Wojskowa Składnica Tranzytowa</i>, or <i>WST</i>) on the <a href="https://en.wikipedia.org/wiki/Westerplatte">Westerplatte</a> peninsula in the harbor of the <a href="https://en.wikipedia.org/wiki/Free_City_of_Danzig">Free City of Danzig</a>. The Poles held out for seven days and repelled 13 assaults that included <a href="https://en.wikipedia.org/wiki/Dive_bomber">dive-bomber</a> attacks and naval shelling.</p> | ||
| <p>Westerplatte's defense served as an inspiration for the <a href="https://en.wikipedia.org/wiki/Polish_Army">Polish Army</a> and people in the face of German advances elsewhere, and is still regarded as a symbol of resistance in modern Poland.</p> | ||
| </div> | ||
| <div id="demo-word-counter" class="word-counter"> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| /** | ||
| * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved. | ||
| * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license | ||
| */ | ||
|
|
||
| /* global document, window, console, ClassicEditor */ | ||
|
|
||
| ClassicEditor | ||
| .create( document.querySelector( '#demo-editor' ), { | ||
| toolbar: { | ||
| items: [ | ||
| 'heading', | ||
| 'bold', | ||
| 'italic', | ||
| 'bulletedList', | ||
| 'numberedList', | ||
| 'blockQuote', | ||
| 'link', | ||
| '|', | ||
| 'mediaEmbed', | ||
| 'insertTable', | ||
| '|', | ||
| 'undo', | ||
| 'redo' | ||
| ], | ||
| viewportTopOffset: window.getViewportTopOffsetConfig() | ||
| }, | ||
| table: { | ||
| contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells' ] | ||
| } | ||
| } ) | ||
| .then( editor => { | ||
| window.editor = editor; | ||
|
|
||
| document.getElementById( 'demo-word-counter' ).appendChild( editor.plugins.get( 'WordCount' ).getWordCountContainer() ); | ||
| } ) | ||
| .catch( err => { | ||
| console.error( err.stack ); | ||
| } ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,104 @@ | ||
| --- | ||
| category: features | ||
| --- | ||
|
|
||
| {@snippet features/build-word-count-source} | ||
|
|
||
| # Word count | ||
|
|
||
| The {@link module:wordcount/wordcount~WordCount} feature provides a possibility to track the number of words and characters written in the editor. | ||
|
|
||
| ## Demo | ||
|
|
||
| {@snippet features/word-count} | ||
|
|
||
| ```html | ||
| <div id="editor"> | ||
| <p>Hello world.</p> | ||
| </div> | ||
| <div id="word-count"> | ||
| </div> | ||
| ``` | ||
|
|
||
| ```js | ||
| ClassicEditor | ||
| .create( document.querySelector( '#editor' ), { | ||
| // Configuration details. | ||
| } ) | ||
| .then( editor => { | ||
| const wordCountPlugin = editor.plugins.get( 'WordCount' ); | ||
| const wordCountWrapper = document.getElementById( 'word-count' ); | ||
|
|
||
| wordCountWrapper.appendChild( wordCountPlugin.wordCountContainer ); | ||
| } ) | ||
| .catch( ... ); | ||
| ``` | ||
|
|
||
| ## Configuration options | ||
|
|
||
| There are two options which change the output container. If the {@link module:wordcount/wordcount~WordCountConfig#displayWords} is set to to `false`, then the section with word counter is hidden. Similarly, when the {@link module:wordcount/wordcount~WordCountConfig#displayCharacters} is set to `false` it will hide the character counter. | ||
|
|
||
| ## Update event | ||
|
|
||
| Word count feature emits an {@link module:wordcount/wordcount~WordCount#event:update update event} whenever there is a change in the model. This allows implementing customized behavior that reacts to word count updates. | ||
|
|
||
| Below you can find an example, where the background color of a square is changed according to the number of characters in the editor. There is also a progress bar which indicates how many words is in it (the maximal value of the progress bar is set to 100, however, you can write further and progress bar remain in the maximal state). | ||
|
|
||
| {@snippet features/word-count-update} | ||
|
|
||
| ```js | ||
| ClassicEditor | ||
| .create( document.querySelector( '#editor' ), { | ||
| // configuration details | ||
| } ) | ||
| .then( editor => { | ||
| const wordCountPlugin = editor.plugins.get( 'WordCount' ); | ||
|
|
||
| wordCountPlugin.on( 'update', ( evt, data ) => { | ||
| // data is an object with "words" and "characters" field | ||
| doSthWithNewWordsNumber( data.words ); | ||
| doSthWithNewCharactersNumber( data.characters ); | ||
| } ); | ||
|
|
||
| } ) | ||
| .catch( ... ); | ||
| ``` | ||
|
|
||
| ## Installation | ||
|
|
||
| To add this feature to your rich-text editor, install the [`@ckeditor/ckeditor5-word-count`](https://www.npmjs.com/package/@ckeditor/ckeditor5-word-count) package: | ||
|
|
||
| ```bash | ||
| npm install --save @ckeditor/ckeditor5-word-count | ||
| ``` | ||
|
|
||
| And add it to your plugin list configuration: | ||
|
|
||
| ```js | ||
| import WordCount from '@ckeditor/ckeditor5-word-count/src/wordcount'; | ||
|
|
||
| ClassicEditor | ||
| .create( document.querySelector( '#editor' ), { | ||
| plugins: [ WordCount, ... ], | ||
| } ) | ||
| .then( ... ) | ||
| .catch( ... ); | ||
| ``` | ||
|
|
||
| <info-box info> | ||
| Read more about {@link builds/guides/integration/installing-plugins installing plugins}. | ||
| </info-box> | ||
|
|
||
| ## Common API | ||
|
|
||
| The {@link module:wordcount/wordcount~WordCount} plugin provides: | ||
| * {@link module:wordcount/wordcount~WordCount#wordCountContainer} method. It returns a self-updating HTML element which is updated with the current number of words and characters in the editor. There is a possibility to remove "Words" or "Characters" counters with proper configuration of {@link module:wordcount/wordcount~WordCountConfig#displayWords} and {@link module:wordcount/wordcount~WordCountConfig#displayCharacters}, | ||
| * {@link module:wordcount/wordcount~WordCount#event:update update event} which is fired whenever the plugins update the number of counted words and characters. There is a possibility to run own callback function with updated values. Please note that update event is throttled. | ||
|
|
||
| <info-box> | ||
| We recommend using the official {@link framework/guides/development-tools#ckeditor-5-inspector CKEditor 5 inspector} for development and debugging. It will give you tons of useful information about the state of the editor such as internal data structures, selection, commands, and many more. | ||
| </info-box> | ||
|
|
||
| ## Contribute | ||
|
|
||
| The source code of the feature is available on GitHub in https://github.com/ckeditor/ckeditor5-word-count. | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| { | ||
| "Words: %0": "Label showing the number of words in the editor content", | ||
Reinmar marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| "Characters: %0": "Label showing the number of characters in the editor content" | ||
Reinmar marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| /** | ||
| * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved. | ||
| * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license | ||
| */ | ||
|
|
||
| /** | ||
| * @module wordcount/utils | ||
| */ | ||
|
|
||
| /** | ||
| * Returns plain text representation of an element and it's children. The blocks are separated by a newline (\n ). | ||
Reinmar marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| * | ||
Reinmar marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| * **Note:** Function walks through the entire model, which might be very spread. There should be considered throttling it during usage. | ||
Reinmar marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| * | ||
| * @param {module:engine/model/element~Element} element | ||
| * @returns {String} Plain text representing model's data | ||
| */ | ||
| export function modelElementToPlainText( element ) { | ||
| if ( element.is( 'text' ) || element.is( 'textProxy' ) ) { | ||
|
There was a problem hiding this comment. According to the docs this isn't allowed. The element is an element. Please report a followup ticket to clean this up. There was a problem hiding this comment. My other problem with this is that we already have There was a problem hiding this comment. I'd go with There was a problem hiding this comment. However this method might soon be changed to follow requirements from #5. |
||
| return element.data; | ||
| } | ||
|
|
||
| let text = ''; | ||
| let prev = null; | ||
|
|
||
| for ( const child of element.getChildren() ) { | ||
| const childText = modelElementToPlainText( child ); | ||
|
|
||
| // If last block was finish, start from new line. | ||
| if ( prev && prev.is( 'element' ) ) { | ||
| text += '\n'; | ||
| } | ||
|
|
||
| text += childText; | ||
|
|
||
| prev = child; | ||
| } | ||
|
|
||
| return text; | ||
| } | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You may left typical
.catch( ... );(empty / not related block) here as the demo below have different contents then this snippet.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
OTOH maybe just one line that you need some HTML element to place the word counter somewhere, ie in a div. (so an example without the
<div id="editor">.Also, I'd use an
idnot a class here as we haveid="editor"here and I'm for using Ids then classes for placing such objects.