@ckeditor/ckeditor5-word-count 36.0.1 → 37.0.0-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-word-count",
-  "version": "36.0.1",
+  "version": "37.0.0-alpha.0",
   "description": "Word and character count feature for CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -13,23 +13,23 @@
   "main": "src/index.js",
   "dependencies": {
     "lodash-es": "^4.17.15",
-    "ckeditor5": "^36.0.1"
+    "ckeditor5": "^37.0.0-alpha.0"
   },
   "devDependencies": {
-    "@ckeditor/ckeditor5-basic-styles": "^36.0.1",
-    "@ckeditor/ckeditor5-block-quote": "^36.0.1",
-    "@ckeditor/ckeditor5-core": "^36.0.1",
-    "@ckeditor/ckeditor5-dev-utils": "^32.0.0",
-    "@ckeditor/ckeditor5-editor-classic": "^36.0.1",
-    "@ckeditor/ckeditor5-engine": "^36.0.1",
-    "@ckeditor/ckeditor5-enter": "^36.0.1",
-    "@ckeditor/ckeditor5-image": "^36.0.1",
-    "@ckeditor/ckeditor5-link": "^36.0.1",
-    "@ckeditor/ckeditor5-list": "^36.0.1",
-    "@ckeditor/ckeditor5-paragraph": "^36.0.1",
-    "@ckeditor/ckeditor5-table": "^36.0.1",
-    "@ckeditor/ckeditor5-theme-lark": "^36.0.1",
-    "@ckeditor/ckeditor5-utils": "^36.0.1",
+    "@ckeditor/ckeditor5-basic-styles": "^37.0.0-alpha.0",
+    "@ckeditor/ckeditor5-block-quote": "^37.0.0-alpha.0",
+    "@ckeditor/ckeditor5-core": "^37.0.0-alpha.0",
+    "@ckeditor/ckeditor5-dev-utils": "^34.0.0",
+    "@ckeditor/ckeditor5-editor-classic": "^37.0.0-alpha.0",
+    "@ckeditor/ckeditor5-engine": "^37.0.0-alpha.0",
+    "@ckeditor/ckeditor5-enter": "^37.0.0-alpha.0",
+    "@ckeditor/ckeditor5-image": "^37.0.0-alpha.0",
+    "@ckeditor/ckeditor5-link": "^37.0.0-alpha.0",
+    "@ckeditor/ckeditor5-list": "^37.0.0-alpha.0",
+    "@ckeditor/ckeditor5-paragraph": "^37.0.0-alpha.0",
+    "@ckeditor/ckeditor5-table": "^37.0.0-alpha.0",
+    "@ckeditor/ckeditor5-theme-lark": "^37.0.0-alpha.0",
+    "@ckeditor/ckeditor5-utils": "^37.0.0-alpha.0",
     "typescript": "^4.8.4",
     "webpack": "^5.58.1",
     "webpack-cli": "^4.9.0"
@@ -60,5 +60,6 @@
     "dll:build": "webpack",
     "build": "tsc -p ./tsconfig.release.json",
     "postversion": "npm run build"
-  }
+  },
+  "types": "src/index.d.ts"
 }

package/src/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module word-count
+ */
+export { default as WordCount, type WordCountUpdateEvent } from './wordcount';

package/src/utils.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module word-count/utils
+ */
+import type { Item } from 'ckeditor5/src/engine';
+/**
+ * Returns a plain text representation of an element and its children.
+ *
+ * @returns Plain text representing the model's data.
+ */
+export declare function modelElementToPlainText(item: Item): string;

package/src/wordcount.d.ts

@@ -0,0 +1,233 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+import { Plugin, type Editor } from 'ckeditor5/src/core';
+/**
+ * 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 that updates its state whenever the editor content is changed.
+ *
+ * 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.
+ *
+ * Here are some examples of how the word and character calculations are made:
+ *
+ * ```html
+ * <paragraph>foo</paragraph>
+ * <paragraph>bar</paragraph>
+ * // Words: 2, Characters: 7
+ *
+ * <paragraph><$text bold="true">foo</$text>bar</paragraph>
+ * // Words: 1, Characters: 6
+ *
+ * <paragraph>*&^%)</paragraph>
+ * // Words: 0, Characters: 5
+ *
+ * <paragraph>foo(bar)</paragraph>
+ * //Words: 1, Characters: 8
+ *
+ * <paragraph>12345</paragraph>
+ * // Words: 1, Characters: 5
+ * ```
+ */
+export default class WordCount extends Plugin {
+    /**
+     * The number of characters in the editor.
+     *
+     * @observable
+     * @readonly
+     */
+    characters: number;
+    /**
+     * The number of words in the editor.
+     *
+     * @observable
+     * @readonly
+     */
+    words: number;
+    /**
+     * The label used to display the words value in the {@link #wordCountContainer output container}.
+     *
+     * @observable
+     * @private
+     * @readonly
+     */
+    _wordsLabel: string | undefined;
+    /**
+     * The label used to display the characters value in the {@link #wordCountContainer output container}.
+     *
+     * @observable
+     * @private
+     * @readonly
+     */
+    _charactersLabel: string | undefined;
+    /**
+     * The configuration of this plugin.
+     */
+    private _config;
+    /**
+     * The reference to a {@link module:ui/view~View view object} that contains the self-updating HTML container.
+     */
+    private _outputView;
+    /**
+     * A regular expression used to recognize words in the editor's content.
+     */
+    private readonly _wordsMatchRegExp;
+    /**
+     * @inheritDoc
+     */
+    constructor(editor: Editor);
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): 'WordCount';
+    /**
+     * @inheritDoc
+     */
+    init(): void;
+    /**
+     * @inheritDoc
+     */
+    destroy(): void;
+    /**
+     * Creates a self-updating HTML element. Repeated executions return the same element.
+     * The returned element has the following HTML structure:
+     *
+     * ```html
+     * <div class="ck ck-word-count">
+     * 	<div class="ck-word-count__words">Words: 4</div>
+     * 	<div class="ck-word-count__characters">Characters: 28</div>
+     * </div>
+     * ```
+     */
+    get wordCountContainer(): HTMLElement;
+    /**
+     * Determines the number of characters in the current editor's model.
+     */
+    private _getCharacters;
+    /**
+     * Determines the number of words in the current editor's model.
+     */
+    private _getWords;
+    /**
+     * Determines the number of words and characters in the current editor's model and assigns it to {@link #characters} and {@link #words}.
+     * It also fires the {@link #event:update}.
+     *
+     * @fires update
+     */
+    private _refreshStats;
+}
+/**
+ * An event fired after {@link #words} and {@link #characters} are updated.
+ *
+ * @eventName update
+ */
+export type WordCountUpdateEvent = {
+    name: 'update';
+    args: [{
+        words: number;
+        characters: number;
+    }];
+};
+/**
+ * The configuration of the word count feature.
+ *
+ * ```ts
+ * ClassicEditor
+ * 	.create( {
+ * 		wordCount: ... // Word count feature configuration.
+ * 	} )
+ * 	.then( ... )
+ * 	.catch( ... );
+ * ```
+ *
+ * See {@link module:core/editor/editorconfig~EditorConfig all editor options}.
+ */
+export interface WordCountConfig {
+    /**
+     * 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 counter is displayed by default when this configuration option is not defined.
+     *
+     * ```ts
+     * const wordCountConfig = {
+     * 	displayWords: false
+     * };
+     * ```
+     *
+     * The configuration above will result in the following container:
+     *
+     * ```html
+     * <div class="ck ck-word-count">
+     * 	<div class="ck-word-count__characters">Characters: 28</div>
+     * </div>
+     * ```
+     */
+    displayWords?: boolean;
+    /**
+     * This option allows for hiding the character counter. The element obtained through
+     * {@link module:word-count/wordcount~WordCount#wordCountContainer} will only preserve
+     * the words part. Character counter is displayed by default when this configuration option is not defined.
+     *
+     * ```ts
+     * const wordCountConfig = {
+     * 	displayCharacters: false
+     * };
+     * ```
+     *
+     * The configuration above will result in the following container:
+     *
+     * ```html
+     * <div class="ck ck-word-count">
+     * 	<div class="ck-word-count__words">Words: 4</div>
+     * </div>
+     * ```
+     */
+    displayCharacters?: boolean;
+    /**
+     * 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.
+     *
+     * ```ts
+     * const wordCountConfig = {
+     * 	onUpdate: function( stats ) {
+     * 		doSthWithWordNumber( stats.words );
+     * 		doSthWithCharacterNumber( stats.characters );
+     * 	}
+     * };
+     * ```
+     */
+    onUpdate?: (data: {
+        words: number;
+        characters: number;
+    }) => void;
+    /**
+     * Allows for providing the HTML element that the
+     * {@link module:word-count/wordcount~WordCount#wordCountContainer word count container} will be appended to automatically.
+     *
+     * ```ts
+     * const wordCountConfig = {
+     * 	container: document.getElementById( 'container-for-word-count' );
+     * };
+     * ```
+     */
+    container?: HTMLElement;
+}
+declare module '@ckeditor/ckeditor5-core' {
+    interface PluginsMap {
+        [WordCount.pluginName]: WordCount;
+    }
+    interface EditorConfig {
+        /**
+         * The configuration of the word count feature.
+         * It is introduced by the {@link module:word-count/wordcount~WordCount} feature.
+         *
+         * Read more in {@link module:word-count/wordcount~WordCountConfig}.
+         */
+        wordCount?: WordCountConfig;
+    }
+}