suneditor 3.0.3 → 3.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "suneditor",
-	"version": "3.0.3",
+	"version": "3.0.5",
 	"description": "Vanilla JavaScript based WYSIWYG web editor",
 	"author": "Yi JiHong",
 	"license": "MIT",

package/src/assets/suneditor.css

@@ -1066,11 +1066,11 @@
 }
 
 .sun-editor .se-btn-select.se-btn-tool-font {
-	width: 100px;
+	width: 128px;
 }
 
 .sun-editor .se-btn-select.se-btn-tool-format {
-	width: 86px;
+	width: 96px;
 }
 
 .sun-editor .se-btn-select.se-btn-tool-font-size .se-txt {
@@ -1880,7 +1880,27 @@
 	background: transparent;
 }
 
+/** status bar - wordCounter */
+.sun-editor .se-status-bar .se-word-counter-wrapper {
+	position: relative;
+	width: auto;
+	height: auto;
+	margin: 0;
+	padding: 0;
+	color: var(--se-statusbar-font-color);
+	font-size: var(--se-statusbar-font-size);
+	background: transparent;
+}
+
+.sun-editor .se-status-bar .se-word-counter-wrapper .se-word-label {
+	margin-right: 4px;
+}
+
 /** status bar - charCounter */
+.sun-editor .se-status-bar .se-char-counter-wrapper.se-with-word-counter {
+	margin-left: 0.6em;
+}
+
 .sun-editor .se-status-bar .se-char-counter-wrapper {
 	flex: none;
 	position: relative;
@@ -1890,7 +1910,7 @@
 	margin: 0;
 	padding: 0;
 	color: var(--se-statusbar-font-color);
-	font-size: var(--se-main-font-size);
+	font-size: var(--se-statusbar-font-size);
 	background: transparent;
 }
 
@@ -3884,10 +3904,20 @@
 }
 
 /* statusbar */
-.sun-editor.se-rtl .se-status-bar .se-navigation {
+.sun-editor.se-rtl .se-status-bar {
 	direction: rtl;
 }
 
+.sun-editor.se-rtl .se-status-bar .se-word-counter-wrapper .se-word-label {
+	margin-right: 0;
+	margin-left: 4px;
+}
+
+.sun-editor.se-rtl .se-status-bar .se-char-counter-wrapper.se-with-word-counter {
+	margin-left: 0;
+	margin-right: 0.6em;
+}
+
 /* button--- */
 /* button - select text */
 .sun-editor.se-rtl .se-btn-select .se-txt {

package/src/core/config/optionProvider.js

@@ -331,7 +331,7 @@ export default class OptionProvider {
 	}
 
 	#GetResetDiffKey(key) {
-		if (/^statusbar|^charCounter/.test(key)) return 'statusbar-changed';
+		if (/^statusbar|^charCounter|^wordCounter/.test(key)) return 'statusbar-changed';
 		return key;
 	}
 

package/src/core/editor.js

@@ -204,6 +204,8 @@ class Editor {
 
 		// char counter
 		if (e.has('charCounter')) e.get('charCounter').textContent = String(this.$.char.getLength());
+		// word counter
+		if (e.has('wordCounter')) e.get('wordCounter').textContent = String(this.$.char.getWordCount());
 
 		// document type init
 		if (this.$.options.get('type') === 'document') {

package/src/core/event/eventOrchestrator.js

@@ -669,6 +669,9 @@ class EventOrchestrator extends KernelInjector {
 		if (this.#store.mode.isInline || this.#store.mode.isBalloonAlways) this.#toolbar.show();
 		if (this.#store.mode.isSubBalloonAlways) this.$.subToolbar.show();
 
+		// sticky
+		this.#toolbar._resetSticky();
+
 		// user event
 		this.#eventManager.triggerEvent('onFocus', { frameContext, event });
 		// plugin event

package/src/core/logic/dom/char.js

@@ -92,15 +92,38 @@ class Char {
 	}
 
 	/**
-	 * @description Set the char count to charCounter element textContent.
+	 * @description Get the number of words in the content.
+	 * - If [content] is `undefined`, get the current editor's word count.
+	 * @param {string} [content] Content to count. (default: wysiwyg textContent)
+	 * @returns {number}
+	 * const currentWords = editor.$.char.getWordCount();
+	 * const textWords = editor.$.char.getWordCount('Hello World');
+	 */
+	getWordCount(content) {
+		if (typeof content !== 'string') {
+			content = this.#frameContext.get('wysiwyg').innerText;
+		}
+
+		const trimmed = content.trim();
+		if (!trimmed) return 0;
+
+		return trimmed.split(/\s+/).length;
+	}
+
+	/**
+	 * @description Set the char count and word count to counter element textContent.
 	 * @param {?SunEditor.FrameContext} [fc] Frame context
 	 */
 	display(fc) {
-		const charCounter = (fc || this.#frameContext).get('charCounter');
-		if (charCounter) {
+		const ctx = fc || this.#frameContext;
+		const charCounter = ctx.get('charCounter');
+		const wordCounter = ctx.get('wordCounter');
+
+		if (charCounter || wordCounter) {
 			// Defer count update — DOM content may still be mutating from the current input/paste action
 			_w.setTimeout(() => {
-				charCounter.textContent = String(this.getLength());
+				if (charCounter) charCounter.textContent = String(this.getLength());
+				if (wordCounter) wordCounter.textContent = String(this.getWordCount());
 			}, 0);
 		}
 	}

package/src/core/logic/panel/viewer.js

@@ -300,7 +300,7 @@ class Viewer {
 			this.#originCssText = topArea.style.cssText;
 			this.#editorAreaOriginCssText = editorArea.style.cssText;
 			this.#wysiwygOriginCssText = wysiwygFrame.style.cssText;
-			this.#codeWrapperOriginCssText = codeWrapper.style.cssText;
+			this.#codeWrapperOriginCssText = codeWrapper?.style.cssText;
 			this.#codeOriginCssText = code.style.cssText;
 			this.#codeNumberOriginCssText = codeNumbers?.style.cssText;
 			this.#markdownWrapperOriginCssText = markdownWrapper?.style.cssText;
@@ -344,9 +344,11 @@ class Viewer {
 			wysiwygFrame.style.cssText = (wysiwygFrame.style.cssText.match(/\s?display(\s+)?:(\s+)?[a-zA-Z]+;/) || [''])[0] + this.#frameOptions.get('_defaultStyles').editor + (isCodeView || isMarkdownView ? 'display: none;' : '');
 
 			// code wrapper
-			codeWrapper.style.cssText = (codeWrapper.style.cssText.match(/\s?display(\s+)?:(\s+)?[a-zA-Z]+;/) || [''])[0] + `display: ${!isCodeView ? 'none' : 'flex'} !important;`;
-			codeWrapper.style.overflow = 'auto';
-			codeWrapper.style.height = '100%';
+			if (codeWrapper) {
+				codeWrapper.style.cssText = (codeWrapper.style.cssText.match(/\s?display(\s+)?:(\s+)?[a-zA-Z]+;/) || [''])[0] + `display: ${!isCodeView ? 'none' : 'flex'} !important;`;
+				codeWrapper.style.overflow = 'auto';
+				codeWrapper.style.height = '100%';
+			}
 
 			// markdown wrapper
 			if (markdownWrapper) {
@@ -384,7 +386,9 @@ class Viewer {
 			wysiwygFrame.style.cssText = this.#wysiwygOriginCssText.replace(/\s?display(\s+)?:(\s+)?[a-zA-Z]+;/, '') + (isCodeView || isMarkdownView ? 'display: none;' : '');
 
 			// code wrapper
-			codeWrapper.style.cssText = this.#codeWrapperOriginCssText.replace(/\s?display(\s+)?:(\s+)?[a-zA-Z]+;/, '') + `display: ${!isCodeView ? 'none' : 'flex'} !important;`;
+			if (codeWrapper) {
+				codeWrapper.style.cssText = this.#codeWrapperOriginCssText.replace(/\s?display(\s+)?:(\s+)?[a-zA-Z]+;/, '') + `display: ${!isCodeView ? 'none' : 'flex'} !important;`;
+			}
 
 			// code
 			code.style.cssText = this.#codeOriginCssText;

package/src/core/schema/frameContext.js

@@ -38,6 +38,8 @@ import { get as getNumber } from '../../helper/numbers';
  * @property {HTMLElement} navigation - Navigation element (e.g., for outline or bookmarks).
  * @property {HTMLElement} charWrapper - Wrapper for the character counter element.
  * @property {HTMLElement} charCounter - Element showing the character counter.
+ * @property {HTMLElement} wordWrapper - Wrapper for the word counter element.
+ * @property {HTMLElement} wordCounter - Element showing the word counter.
  * @property {Window} [_ww] - The window object of the WYSIWYG frame (iframe window).
  * @property {Document} [_wd] - The document object of the WYSIWYG frame (iframe document).
  *
@@ -171,4 +173,8 @@ export function UpdateStatusbarContext(statusbar, mapper) {
 	navigation ? mapper.set('navigation', navigation) : mapper.delete('navigation');
 	charWrapper ? mapper.set('charWrapper', charWrapper) : mapper.delete('charWrapper');
 	charCounter ? mapper.set('charCounter', charCounter) : mapper.delete('charCounter');
+	const wordWrapper = statusbar ? statusbar.querySelector('.se-word-counter-wrapper') : null;
+	const wordCounter = statusbar ? statusbar.querySelector('.se-word-counter-wrapper .se-word-counter') : null;
+	wordWrapper ? mapper.set('wordWrapper', wordWrapper) : mapper.delete('wordWrapper');
+	wordCounter ? mapper.set('wordCounter', wordCounter) : mapper.delete('wordCounter');
 }

package/src/core/schema/options.js

@@ -150,6 +150,13 @@ export const DEFAULTS = {
  * - `char`: Characters length.
  * - `byte`: Binary data size of characters.
  * - `byte-html`: Binary data size of the full HTML string.
+ *
+ * === Word Counter ===
+ * @property {boolean} [wordCounter=false] - Shows the number of words in the editor.
+ * @property {?string} [wordCounter_label=null] - Text to be displayed in the `wordCounter` area of the bottom bar.
+ * ```js
+ * { wordCounter_label: 'Words :' }
+ * ```
  */
 
 /** ================================================================================================================================ */
@@ -681,6 +688,8 @@ export const OPTION_FRAME_FIXED_FLAG = {
 	charCounter_max: true,
 	charCounter_label: true,
 	charCounter_type: true,
+	wordCounter: true,
+	wordCounter_label: true,
 };
 
 /**

package/src/core/section/constructor.js

@@ -772,12 +772,14 @@ export function InitOptions(options, editorTargets, plugins) {
  * @description Create a context object for the editor frame.
  * @param {SunEditor.FrameOptions} targetOptions - `editor.frameOptions`
  * @param {HTMLElement} statusbar - statusbar element
- * @returns {{statusbar: HTMLElement, navigation: HTMLElement, charWrapper: HTMLElement, charCounter: HTMLElement}}
+ * @returns {{statusbar: HTMLElement, navigation: HTMLElement, charWrapper: HTMLElement, charCounter: HTMLElement, wordWrapper: HTMLElement, wordCounter: HTMLElement}}
  */
 export function CreateStatusbar(targetOptions, statusbar) {
 	let navigation = null;
 	let charWrapper = null;
 	let charCounter = null;
+	let wordWrapper = null;
+	let wordCounter = null;
 
 	if (targetOptions.get('statusbar')) {
 		statusbar ||= dom.utils.createElement('DIV', { class: 'se-status-bar sun-editor-common' });
@@ -786,10 +788,31 @@ export function CreateStatusbar(targetOptions, statusbar) {
 		navigation = statusbar.querySelector('.se-navigation') || dom.utils.createElement('DIV', { class: 'se-navigation sun-editor-common' });
 		statusbar.appendChild(navigation);
 
-		/** char counter */
+		/** word counter (left) */
+		if (targetOptions.get('wordCounter')) {
+			wordWrapper = statusbar.querySelector('.se-word-counter-wrapper') || dom.utils.createElement('DIV', { class: 'se-word-counter-wrapper' });
+
+			if (targetOptions.get('wordCounter_label')) {
+				const wordLabel = wordWrapper.querySelector('.se-word-label') || dom.utils.createElement('SPAN', { class: 'se-word-label' });
+				wordLabel.textContent = targetOptions.get('wordCounter_label');
+				wordWrapper.appendChild(wordLabel);
+			}
+
+			wordCounter = wordWrapper.querySelector('.se-word-counter') || dom.utils.createElement('SPAN', { class: 'se-word-counter' });
+			wordCounter.textContent = '0';
+			wordWrapper.appendChild(wordCounter);
+
+			statusbar.appendChild(wordWrapper);
+		}
+
+		/** char counter (right) */
 		if (targetOptions.get('charCounter')) {
 			charWrapper = statusbar.querySelector('.se-char-counter-wrapper') || dom.utils.createElement('DIV', { class: 'se-char-counter-wrapper' });
 
+			if (targetOptions.get('wordCounter') && charWrapper.className.indexOf('se-with-word-counter') === -1) {
+				charWrapper.className += ' se-with-word-counter';
+			}
+
 			if (targetOptions.get('charCounter_label')) {
 				const charLabel = charWrapper.querySelector('.se-char-label') || dom.utils.createElement('SPAN', { class: 'se-char-label' });
 				charLabel.textContent = targetOptions.get('charCounter_label');
@@ -815,6 +838,8 @@ export function CreateStatusbar(targetOptions, statusbar) {
 		navigation: /** @type {HTMLElement} */ (navigation),
 		charWrapper: /** @type {HTMLElement} */ (charWrapper),
 		charCounter: /** @type {HTMLElement} */ (charCounter),
+		wordWrapper: /** @type {HTMLElement} */ (wordWrapper),
+		wordCounter: /** @type {HTMLElement} */ (wordCounter),
 	};
 }
 
@@ -852,6 +877,8 @@ function InitFrameOptions(o, origin) {
 	const charCounter_max = barContainer || o.charCounter_max === undefined ? origin.charCounter_max : o.charCounter_max;
 	const charCounter_label = barContainer || o.charCounter_label === undefined ? origin.charCounter_label : o.charCounter_label;
 	const charCounter_type = barContainer || o.charCounter_type === undefined ? origin.charCounter_type : o.charCounter_type;
+	const wordCounter = barContainer || o.wordCounter === undefined ? origin.wordCounter : o.wordCounter;
+	const wordCounter_label = barContainer || o.wordCounter_label === undefined ? origin.wordCounter_label : o.wordCounter_label;
 
 	// value
 	fo.set('value', value);
@@ -881,6 +908,9 @@ function InitFrameOptions(o, origin) {
 	fo.set('charCounter_max', numbers.is(charCounter_max) && charCounter_max > -1 ? charCounter_max * 1 : null);
 	fo.set('charCounter_label', typeof charCounter_label === 'string' ? charCounter_label.trim() : null);
 	fo.set('charCounter_type', typeof charCounter_type === 'string' ? charCounter_type : 'char');
+	// status bar - word count
+	fo.set('wordCounter', typeof wordCounter === 'boolean' ? wordCounter : false);
+	fo.set('wordCounter_label', typeof wordCounter_label === 'string' ? wordCounter_label.trim() : null);
 
 	return fo;
 }

package/src/helper/markdown.js

@@ -1,6 +1,21 @@
 /**
  * @fileoverview Markdown converter module
  * - Supports GitHub Flavored Markdown (GFM) syntax
+ *
+ * @description Limitations — Style loss during roundtrip
+ *
+ * Markdown syntax cannot represent HTML inline styles, classes, or data attributes.
+ * When switching between WYSIWYG and Markdown view, the following behavior applies:
+ *
+ * | Content type                        | Behavior                                    | Example                                              |
+ * |-------------------------------------|---------------------------------------------|------------------------------------------------------|
+ * | Media components (`div.se-component`) | Converted to markdown — styles are lost     | Image alignment, data-se-* attrs                     |
+ * | Styled `<span>` elements            | Preserved as raw HTML in markdown           | Font color, background, custom classes               |
+ * | Tables, figures                      | Converted to markdown — styles are lost     | Table cell styles, figure width, colgroup widths      |
+ * | General elements (p, h1, blockquote) | Converted to markdown — styles are lost     | text-align, color, font-size on paragraphs/headings  |
+ *
+ * This is a fundamental limitation of the Markdown format.
+ * To preserve all HTML attributes without loss, use Code View instead.
  */
 
 const VOID_ELEMENTS = /^(area|base|br|col|embed|hr|img|input|link|meta|param|source|track|wbr)$/i;
@@ -439,16 +454,16 @@ function nodeToMarkdown(node, indent, isBlock) {
 
 	// Span - pass through as inline (may contain styles)
 	if (tag === 'span') {
-		// Check if it has meaningful attributes that need HTML fallback
 		if (attributes.style || attributes.class) {
 			return nodeToHtmlFallback(node);
 		}
 		return childrenToInline(children);
 	}
 
-	// Figure - process children (usually contains img or other media)
+	// Figure - process children (table, media)
 	if (tag === 'figure') {
-		return children.map((c) => nodeToMarkdown(c, indent, true)).join('');
+		const inner = children.map((c) => nodeToMarkdown(c, indent, true)).join('');
+		return /\n$/.test(inner) ? inner : inner + '\n\n';
 	}
 	if (tag === 'figcaption') {
 		const content = childrenToInline(children).trim();

package/src/modules/contract/Controller.js

@@ -377,14 +377,13 @@ class Controller {
 		if (!passive) {
 			this.#$.ui.onControllerContext();
 			this.#$.store.set('controlActive', true);
+			this.#$.store.set('_preventBlur', true);
 		}
 
 		if (!this.isOpen) {
 			this.#$.ui.opendControllers.push(info);
 		}
 
-		this.#$.store.set('_preventBlur', true);
-
 		this.isOpen = true;
 
 		this.host.controllerOn?.(form, target);

package/src/modules/contract/Figure.js

@@ -904,7 +904,7 @@ class Figure {
 	retainFigureFormat(container, originEl, anchorCover, fileManagerInst) {
 		const isInline = this.#$.component.isInline(container);
 		const originParent = originEl.parentNode;
-		let existElement = this.#$.format.isBlock(originParent) || dom.check.isWysiwygFrame(originParent) ? originEl : Figure.GetContainer(originEl)?.container || originParent || originEl;
+		let existElement = this.#$.format.isBlock(originParent) || dom.check.isWysiwygFrame(originParent) || originParent.nodeType >= 9 ? originEl : Figure.GetContainer(originEl)?.container || originParent || originEl;
 
 		if (dom.query.getParentElement(originEl, dom.check.isExcludeFormat)) {
 			existElement = anchorCover && anchorCover !== originEl ? anchorCover : originEl;

package/src/plugins/command/codeBlock.js

@@ -66,7 +66,7 @@ class CodeBlock extends PluginCommand {
 		// ───────────────── [[toolbar dropdown type]] ─────────────────
 		this.afterItem = dom.utils.createElement(
 			'button',
-			{ class: 'se-btn se-tooltip se-sub-arrow-btn', 'data-command': CodeBlock.key, 'data-type': 'dropdown' },
+			{ class: 'se-btn se-tooltip se-sub-arrow-btn', type: 'button', 'data-command': CodeBlock.key, 'data-type': 'dropdown' },
 			`${this.$.icons.arrow_down}<span class="se-tooltip-inner"><span class="se-tooltip-text">${this.$.lang.codeLanguage || 'Language'}</span></span>`,
 		);
 

package/src/plugins/command/list_bulleted.js

@@ -27,7 +27,7 @@ class List_bulleted extends PluginCommand {
 		this.icon = 'list_bulleted';
 		this.afterItem = dom.utils.createElement(
 			'button',
-			{ class: 'se-btn se-tooltip se-sub-arrow-btn', 'data-command': List_bulleted.key, 'data-type': 'dropdown' },
+			{ class: 'se-btn se-tooltip se-sub-arrow-btn', type: 'button', 'data-command': List_bulleted.key, 'data-type': 'dropdown' },
 			`${this.$.icons.arrow_down}<span class="se-tooltip-inner"><span class="se-tooltip-text">${this.$.lang.bulletedList}</span></span>`,
 		);
 

package/src/plugins/command/list_numbered.js

@@ -27,7 +27,7 @@ class List_numbered extends PluginCommand {
 		this.icon = 'list_numbered';
 		this.afterItem = dom.utils.createElement(
 			'button',
-			{ class: 'se-btn se-tooltip se-sub-arrow-btn', 'data-command': List_numbered.key, 'data-type': 'dropdown' },
+			{ class: 'se-btn se-tooltip se-sub-arrow-btn', type: 'button', 'data-command': List_numbered.key, 'data-type': 'dropdown' },
 			`${this.$.icons.arrow_down}<span class="se-tooltip-inner"><span class="se-tooltip-text">${this.$.lang.numberedList}</span></span>`,
 		);
 

package/src/plugins/input/fontSize.js

@@ -152,25 +152,25 @@ class FontSize extends PluginInput {
 		if (showIncDec) {
 			this.beforeItem = dom.utils.createElement(
 				'button',
-				{ class: 'se-btn se-tooltip se-sub-btn', 'data-command': FontSize.key, 'data-type': 'command', 'data-value': 'dec' },
+				{ class: 'se-btn se-tooltip se-sub-btn', type: 'button', 'data-command': FontSize.key, 'data-type': 'command', 'data-value': 'dec' },
 				`${this.$.icons.minus}<span class="se-tooltip-inner"><span class="se-tooltip-text">${this.$.lang.decrease}</span></span>`,
 			);
 			this.afterItem = dom.utils.createElement(
 				'button',
-				{ class: 'se-btn se-tooltip se-sub-btn', 'data-command': FontSize.key, 'data-type': 'command', 'data-value': 'inc' },
+				{ class: 'se-btn se-tooltip se-sub-btn', type: 'button', 'data-command': FontSize.key, 'data-type': 'command', 'data-value': 'inc' },
 				`${this.$.icons.plus}<span class="se-tooltip-inner"><span class="se-tooltip-text">${this.$.lang.increase}</span></span>`,
 			);
 		} else if (!disableInput) {
 			this.afterItem = dom.utils.createElement(
 				'button',
-				{ class: 'se-btn se-tooltip se-sub-arrow-btn', 'data-command': FontSize.key, 'data-type': 'dropdown' },
+				{ class: 'se-btn se-tooltip se-sub-arrow-btn', type: 'button', 'data-command': FontSize.key, 'data-type': 'dropdown' },
 				`${this.$.icons.arrow_down}<span class="se-tooltip-inner"><span class="se-tooltip-text">${this.$.lang.fontSize}</span></span>`,
 			);
 			this.$.menu.initDropdownTarget({ key: FontSize.key, type: 'dropdown' }, menu);
 		} else if (disableInput && !showIncDec) {
 			this.replaceButton = dom.utils.createElement(
 				'button',
-				{ class: 'se-btn se-tooltip se-btn-select se-btn-tool-font-size', 'data-command': FontSize.key, 'data-type': 'dropdown' },
+				{ class: 'se-btn se-tooltip se-btn-select se-btn-tool-font-size', type: 'button', 'data-command': FontSize.key, 'data-type': 'dropdown' },
 				`<span class="se-txt __se__font_size">${this.$.lang.fontSize}</span>${this.$.icons.arrow_down}<span class="se-tooltip-inner"><span class="se-tooltip-text">${this.$.lang.fontSize}</span></span>`,
 			);
 			this.$.menu.initDropdownTarget({ key: FontSize.key, type: 'dropdown' }, menu);

package/types/core/logic/dom/char.d.ts

@@ -36,7 +36,16 @@ declare class Char {
 	 */
 	getByteLength(text: string): number;
 	/**
-	 * @description Set the char count to charCounter element textContent.
+	 * @description Get the number of words in the content.
+	 * - If [content] is `undefined`, get the current editor's word count.
+	 * @param {string} [content] Content to count. (default: wysiwyg textContent)
+	 * @returns {number}
+	 * const currentWords = editor.$.char.getWordCount();
+	 * const textWords = editor.$.char.getWordCount('Hello World');
+	 */
+	getWordCount(content?: string): number;
+	/**
+	 * @description Set the char count and word count to counter element textContent.
 	 * @param {?SunEditor.FrameContext} [fc] Frame context
 	 */
 	display(fc?: SunEditor.FrameContext | null): void;

package/types/core/schema/frameContext.d.ts

@@ -37,6 +37,8 @@ import type {} from '../../typedef';
  * @property {HTMLElement} navigation - Navigation element (e.g., for outline or bookmarks).
  * @property {HTMLElement} charWrapper - Wrapper for the character counter element.
  * @property {HTMLElement} charCounter - Element showing the character counter.
+ * @property {HTMLElement} wordWrapper - Wrapper for the word counter element.
+ * @property {HTMLElement} wordCounter - Element showing the word counter.
  * @property {Window} [_ww] - The window object of the WYSIWYG frame (iframe window).
  * @property {Document} [_wd] - The document object of the WYSIWYG frame (iframe document).
  *
@@ -215,6 +217,14 @@ export type FrameContextStore = {
 	 * - Element showing the character counter.
 	 */
 	charCounter: HTMLElement;
+	/**
+	 * - Wrapper for the word counter element.
+	 */
+	wordWrapper: HTMLElement;
+	/**
+	 * - Element showing the word counter.
+	 */
+	wordCounter: HTMLElement;
 	/**
 	 * - The window object of the WYSIWYG frame (iframe window).
 	 */

package/types/core/schema/options.d.ts

@@ -105,6 +105,13 @@ export namespace DEFAULTS {
  * - `char`: Characters length.
  * - `byte`: Binary data size of characters.
  * - `byte-html`: Binary data size of the full HTML string.
+ *
+ * === Word Counter ===
+ * @property {boolean} [wordCounter=false] - Shows the number of words in the editor.
+ * @property {?string} [wordCounter_label=null] - Text to be displayed in the `wordCounter` area of the bottom bar.
+ * ```js
+ * { wordCounter_label: 'Words :' }
+ * ```
  */
 /** ================================================================================================================================ */
 /**
@@ -729,8 +736,21 @@ export type EditorFrameOptions = {
 	 * - `char`: Characters length.
 	 * - `byte`: Binary data size of characters.
 	 * - `byte-html`: Binary data size of the full HTML string.
+	 *
+	 * === Word Counter ===
 	 */
 	charCounter_type?: 'char' | 'byte' | 'byte-html';
+	/**
+	 * - Shows the number of words in the editor.
+	 */
+	wordCounter?: boolean;
+	/**
+	 * - Text to be displayed in the `wordCounter` area of the bottom bar.
+	 * ```js
+	 * { wordCounter_label: 'Words :' }
+	 * ```
+	 */
+	wordCounter_label?: string | null;
 };
 export type OptionStyleResult = {
 	/**

package/types/core/section/constructor.d.ts

@@ -42,7 +42,7 @@ export function InitOptions(
  * @description Create a context object for the editor frame.
  * @param {SunEditor.FrameOptions} targetOptions - `editor.frameOptions`
  * @param {HTMLElement} statusbar - statusbar element
- * @returns {{statusbar: HTMLElement, navigation: HTMLElement, charWrapper: HTMLElement, charCounter: HTMLElement}}
+ * @returns {{statusbar: HTMLElement, navigation: HTMLElement, charWrapper: HTMLElement, charCounter: HTMLElement, wordWrapper: HTMLElement, wordCounter: HTMLElement}}
  */
 export function CreateStatusbar(
 	targetOptions: SunEditor.FrameOptions,
@@ -52,6 +52,8 @@ export function CreateStatusbar(
 	navigation: HTMLElement;
 	charWrapper: HTMLElement;
 	charCounter: HTMLElement;
+	wordWrapper: HTMLElement;
+	wordCounter: HTMLElement;
 };
 /**
  * @description Update a button state, attributes, and icons