Browse Source

Merge branch 'stable'

Aleksander Nowodzinski 6 years ago
parent
commit
f9f9f61084

+ 3 - 3
packages/ckeditor5-word-count/README.md

@@ -1,4 +1,4 @@
-CKEditor 5 word count feature
+CKEditor 5 word count and character count feature
 ===========================
 
 [![Join the chat at https://gitter.im/ckeditor/ckeditor5](https://badges.gitter.im/ckeditor/ckeditor5.svg)](https://gitter.im/ckeditor/ckeditor5?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
@@ -10,11 +10,11 @@ CKEditor 5 word count feature
 [![Dependency Status](https://david-dm.org/ckeditor/ckeditor5-word-count/status.svg)](https://david-dm.org/ckeditor/ckeditor5-word-count)
 [![devDependency Status](https://david-dm.org/ckeditor/ckeditor5-word-count/dev-status.svg)](https://david-dm.org/ckeditor/ckeditor5-word-count?type=dev)
 
-This package implements word count support for CKEditor 5.
+This package implements word count and character count support for CKEditor 5.
 
 ## Demo
 
-Check out the demo in the [Word count feature](https://ckeditor.com/docs/ckeditor5/latest/features/word-count.html) guide.
+Check out the demo in the [Word count and character count feature](https://ckeditor.com/docs/ckeditor5/latest/features/word-count.html) guide.
 
 ## Documentation
 

File diff suppressed because it is too large
+ 3 - 3
packages/ckeditor5-word-count/docs/_snippets/features/word-count-update.html


+ 24 - 4
packages/ckeditor5-word-count/docs/_snippets/features/word-count-update.js

@@ -36,11 +36,31 @@ ClassicEditor
 		const progressBar = document.querySelector( '.customized-count progress' );
 		const colorBox = document.querySelector( '.customized-count__color-box' );
 
-		wordCountPlugin.on( 'update', updateHandler );
+		wordCountPlugin.on( 'update', ( evt, data ) => {
+			const charactersHue = calculateHue( {
+				characters: data.characters,
+				greenUntil: 70,
+				maxCharacters: 120
+			} );
 
-		function updateHandler( evt, payload ) {
-			progressBar.value = payload.words;
-			colorBox.style.setProperty( '--hue', payload.characters * 3 );
+			progressBar.value = data.words;
+			colorBox.style.setProperty( '--hue', charactersHue );
+		} );
+
+		// Calculates the hue based on the number of characters.
+		//
+		// For the character counter:
+		//
+		// * below greenUntil - Returns green.
+		// * between greenUntil and maxCharacters - Returns a hue between green and red.
+		// * above maxCharacters - Returns red.
+		function calculateHue( { characters, greenUntil, maxCharacters } ) {
+			const greenHue = 70;
+			const redHue = 0;
+			const progress = Math.max( 0, Math.min( 1, ( characters - greenUntil ) / ( maxCharacters - greenUntil ) ) ); // 0-1
+			const discreetProgress = Math.floor( progress * 10 ) / 10; // 0, 0.1, 0.2, ..., 1
+
+			return ( redHue - greenHue ) * discreetProgress + greenHue;
 		}
 	} )
 	.catch( err => {

File diff suppressed because it is too large
+ 2 - 2
packages/ckeditor5-word-count/docs/_snippets/features/word-count.html


+ 4 - 4
packages/ckeditor5-word-count/docs/api/word-count.md

@@ -2,19 +2,19 @@
 category: api-reference
 ---
 
-# Word count feature for CKEditor 5
+# Word count and character count feature for CKEditor 5
 
 [![npm version](https://badge.fury.io/js/%40ckeditor%2Fckeditor5-word-count.svg)](https://www.npmjs.com/package/@ckeditor/ckeditor5-word-count)
 
-This package implements the word count feature for CKEditor 5. You can use it to obtain amount of words and/or characters from the editor.
+This package implements the word count and character count features for CKEditor 5. You can use it to obtain the number of words or characters from the editor.
 
 ## Demo
 
-Check out the {@link features/word-count#demo demo in the Word count feature} guide.
+Check out the {@link features/word-count#demo demo in the Word count and character count feature} guide.
 
 ## Documentation
 
-See the {@link features/word-count Word count feature} guide and the {@link module:word-count/wordcount~WordCount} plugin documentation.
+See the {@link features/word-count Word count and character count feature} guide and the {@link module:word-count/wordcount~WordCount} plugin documentation.
 
 ## Installation
 

File diff suppressed because it is too large
+ 97 - 15
packages/ckeditor5-word-count/docs/features/word-count.md


+ 1 - 1
packages/ckeditor5-word-count/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ckeditor/ckeditor5-word-count",
   "version": "10.0.1",
-  "description": "Word count feature for CKEditor 5.",
+  "description": "Word count and character count features for CKEditor 5.",
   "keywords": [
     "ckeditor",
     "ckeditor5",

+ 1 - 1
packages/ckeditor5-word-count/src/utils.js

@@ -11,7 +11,7 @@
  * Returns a plain text representation of an element and its children.
  *
  * @param {module:engine/model/element~Element} element
- * @returns {String} Plain text representing model's data
+ * @returns {String} Plain text representing the model's data.
  */
 export function modelElementToPlainText( element ) {
 	if ( element.is( 'text' ) || element.is( 'textProxy' ) ) {

+ 27 - 27
packages/ckeditor5-word-count/src/wordcount.js

@@ -18,13 +18,13 @@ import env from '@ckeditor/ckeditor5-utils/src/env';
  * The word count plugin.
  *
  * This plugin calculates all words and characters in all {@link module:engine/model/text~Text text nodes} available in the model.
- * It also provides an HTML element, which updates its states whenever the editor's content is changed.
+ * It also provides an HTML element that updates its state whenever the editor content is changed.
  *
- * Firstly model's data are convert to plain text using {@link module:word-count/utils.modelElementToPlainText}.
- * Based on such created plain text there are determined amount of words and characters in your text. Please keep in mind
- * that every block in the editor is separate with a newline character, which is included in the calculation.
+ * The model's data is first converted to plain text using {@link module:word-count/utils.modelElementToPlainText}.
+ * The number of words and characters in your text are determined based on the created plain text. Please keep in mind
+ * that every block in the editor is separated with a newline character, which is included in the calculation.
  *
- * Few examples of how word and character calculation are made:
+ * Here are some examples of how the word and character calculations are made:
  *
  * 		<paragraph>foo</paragraph>
  * 		<paragraph>bar</paragraph>
@@ -70,7 +70,7 @@ export default class WordCount extends Plugin {
 		this.set( 'words', 0 );
 
 		/**
-		 * Label used to display words value in {@link #wordCountContainer output container}
+		 * The label used to display the words value in the {@link #wordCountContainer output container}.
 		 *
 		 * @observable
 		 * @private
@@ -80,7 +80,7 @@ export default class WordCount extends Plugin {
 		this.set( '_wordsLabel' );
 
 		/**
-		 * Label used to display characters value in {@link #wordCountContainer output container}
+		 * The label used to display the characters value in the {@link #wordCountContainer output container}.
 		 *
 		 * @observable
 		 * @private
@@ -90,7 +90,7 @@ export default class WordCount extends Plugin {
 		this.set( '_charactersLabel' );
 
 		/**
-		 * The configuration of this plugins.
+		 * The configuration of this plugin.
 		 *
 		 * @private
 		 * @type {Object}
@@ -98,7 +98,7 @@ export default class WordCount extends Plugin {
 		this._config = editor.config.get( 'wordCount' ) || {};
 
 		/**
-		 * A reference to a {@link module:ui/view~View view object} which contains self-updating HTML container.
+		 * The reference to a {@link module:ui/view~View view object} that contains the self-updating HTML container.
 		 *
 		 * @private
 		 * @readonly
@@ -164,8 +164,8 @@ export default class WordCount extends Plugin {
 	}
 
 	/**
-	 * Creates self-updated HTML element. Repeated executions return the same element.
-	 * Returned element has followed HTML structure:
+	 * Creates a self-updating HTML element. Repeated executions return the same element.
+	 * The returned element has the following HTML structure:
 	 *
 	 * 		<div class="ck ck-word-count">
 	 * 			<div class="ck-word-count__words">Words: 4</div>
@@ -260,12 +260,12 @@ export default class WordCount extends Plugin {
 }
 
 /**
- * Event fired after {@link #words} and {@link #characters} are updated.
+ * An event fired after {@link #words} and {@link #characters} are updated.
  *
  * @event update
  * @param {Object} data
- * @param {Number} data.words number of words in current model
- * @param {Number} data.characters number of characters in current model
+ * @param {Number} data.words The number of words in the current model.
+ * @param {Number} data.characters The number of characters in the current model.
  */
 
 /**
@@ -293,15 +293,15 @@ export default class WordCount extends Plugin {
  */
 
 /**
- * This option allows for hiding the word count. The element obtained through
+ * This option allows for hiding the word counter. The element obtained through
  * {@link module:word-count/wordcount~WordCount#wordCountContainer} will only preserve
- * the characters part. word count is displayed by default when this configuration option is not defined.
+ * the characters part. Word counter is displayed by default when this configuration option is not defined.
  *
  *		const wordCountConfig = {
  *			displayWords: false
- *		}
+ *		};
  *
- * The mentioned configuration will result with the followed container:
+ * The configuration above will result in the following container:
  *
  *		<div class="ck ck-word-count">
  *			<div class="ck-word-count__characters">Characters: 28</div>
@@ -317,9 +317,9 @@ export default class WordCount extends Plugin {
  *
  *		const wordCountConfig = {
  *			displayCharacters: false
- *		}
+ *		};
  *
- * The mentioned configuration will result in the following container
+ * The configuration above will result in the following container:
  *
  *		<div class="ck ck-word-count">
  *			<div class="ck-word-count__words">Words: 4</div>
@@ -329,27 +329,27 @@ export default class WordCount extends Plugin {
  */
 
 /**
- * This configuration takes a function, which is executed whenever the word-count plugin updates its values.
- * This function is called with one argument, which is an object with `words` and `characters` keys containing
- * a number of detected words and characters in the document.
+ * This configuration takes a function that is executed whenever the word count plugin updates its values.
+ * This function is called with one argument, which is an object with the `words` and `characters` keys containing
+ * the number of detected words and characters in the document.
  *
  *		const wordCountConfig = {
  *			onUpdate: function( stats ) {
  *				doSthWithWordNumber( stats.words );
  *				doSthWithCharacterNumber( stats.characters );
  *			}
- *		}
+ *		};
  *
  * @member {Function} module:word-count/wordcount~WordCountConfig#onUpdate
  */
 
 /**
- * This option allows on providing an HTML element where
- * {@link module:word-count/wordcount~WordCount#wordCountContainer word count container} will be appended automatically.
+ * Allows for providing the HTML element that the
+ * {@link module:word-count/wordcount~WordCount#wordCountContainer word count container} will be appended to automatically.
  *
  *		const wordCountConfig = {
  *			container: document.getElementById( 'container-for-word-count' );
- *		}
+ *		};
  *
  * @member {HTMLElement} module:word-count/wordcount~WordCountConfig#container
  */