suneditor 3.0.3 → 3.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "suneditor",
-	"version": "3.0.3",
+	"version": "3.0.4",
 	"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/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/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