suneditor 3.0.2 → 3.0.4

package/package.json

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

package/src/assets/suneditor.css

@@ -916,13 +916,13 @@
 .sun-editor .se-toolbar.se-toolbar-bottom {
 	top: auto;
 	bottom: 0;
-	outline-offset: -1px;
 }
 
 /* Bottom toolbar: more layer opens above buttons */
 .sun-editor .se-toolbar.se-toolbar-bottom .se-btn-tray {
 	display: flex;
 	flex-wrap: wrap;
+	padding: 4px 3px;
 }
 
 .sun-editor .se-toolbar.se-toolbar-bottom .se-btn-tray > .se-toolbar-more-layer {
@@ -934,6 +934,7 @@
 .sun-editor .se-toolbar.se-toolbar-bottom .se-toolbar-more-layer .se-more-layer {
 	border-top: none;
 	border-bottom: 1px solid var(--se-main-divider-color);
+	margin-bottom: 4px;
 }
 
 /* JS fallback sticky for bottom */
@@ -1065,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 {
@@ -1879,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;
@@ -1889,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;
 }
 
@@ -3883,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

@@ -138,6 +138,21 @@ class EventOrchestrator extends KernelInjector {
 		}, 250);
 	}
 
+	/**
+	 * @description Toggle toolbar-balloon with delay (debounced for selectionchange).
+	 */
+	#toggleToolbarBalloonDelay() {
+		if (this.#balloonDelay) {
+			_w.clearTimeout(this.#balloonDelay);
+		}
+
+		this.#balloonDelay = _w.setTimeout(() => {
+			_w.clearTimeout(this.#balloonDelay);
+			this.#balloonDelay = null;
+			this._toggleToolbarBalloon();
+		}, 250);
+	}
+
 	/**
 	 * @internal
 	 * @description Show or hide the toolbar-balloon.
@@ -654,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
@@ -909,17 +927,23 @@ class EventOrchestrator extends KernelInjector {
 	}
 
 	#OnResize_viewport() {
-		if (isMobile && this.#options.get('toolbar_sticky') > -1) {
+		if (isMobile && this.#options.get('_toolbar_sticky') > -1) {
 			this.#toolbar._resetSticky();
 			this.#menu.__restoreMenuPosition();
 		}
 
 		this.#scrollContainer();
+
+		const prevHeight = this.#store.get('currentViewportHeight');
 		this.__setViewportSize();
+
+		if (isMobile && prevHeight > 0 && prevHeight - _w.visualViewport.height > 100 && this.#store.get('hasFocus')) {
+			this.$.selection.scrollTo(this.$.selection.getRange(), { behavior: 'auto', block: 'nearest', inline: 'nearest' });
+		}
 	}
 
 	#OnScroll_window() {
-		if (this.#options.get('toolbar_sticky') > -1) {
+		if (this.#options.get('_toolbar_sticky') > -1) {
 			this.#toolbar._resetSticky();
 		}
 
@@ -938,7 +962,7 @@ class EventOrchestrator extends KernelInjector {
 	}
 
 	#OnMobileScroll_viewport() {
-		if (this.#options.get('toolbar_sticky') > -1) {
+		if (this.#options.get('_toolbar_sticky') > -1) {
 			this.#toolbar._resetSticky();
 			this.#menu.__restoreMenuPosition();
 		}
@@ -959,6 +983,11 @@ class EventOrchestrator extends KernelInjector {
 				this.$.selection.init();
 				this.applyTagEffect();
 
+				// balloon toolbar - touch devices
+				if (isTouchDevice && (this.#store.mode.isBalloon || this.#store.mode.isSubBalloon)) {
+					this.#toggleToolbarBalloonDelay();
+				}
+
 				// document type
 				if (root.has('documentType_use_header')) {
 					const el = dom.query.getParentElement(this.$.selection.selectionNode, this.$.format.isLine.bind(this.$.format));

package/src/core/event/ports.js

@@ -158,14 +158,14 @@ export function makePorts(inst, { _styleNodes }) {
 
 		// === enter event specific ===
 		/**
-		 * @description Scrolls the editor view to the caret position after pressing `Enter`. (Ignored on mobile devices)
+		 * @description Scrolls the editor view to the caret position after pressing `Enter`.
 		 * @param {Range} range Range object
 		 */
 		enterScrollTo(range) {
 			ui._iframeAutoHeight(frameContext);
 
 			// scroll to
-			if (isMobile && inst.scrollparents.length > 0) return;
+			// if (isMobile && inst.scrollparents.length > 0) return;
 			selection.scrollTo(range, { behavior: 'auto', block: 'nearest', inline: 'nearest' });
 		},
 		/**

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/dom/html.js

@@ -2134,6 +2134,14 @@ function _isSafeURL(url) {
 	return _SAFE_URL_PROTOCOL.test(normalized) || !_RE_COLON.test(normalized);
 }
 
+/**
+ * @description Checks whether an HTML attribute string is safe from XSS injection.
+ * - Non-URL attributes (anything other than `href` or `src`) are always safe.
+ * - For URL attributes, extracts the URL value and delegates to {@link _isSafeURL}
+ *   to verify the protocol against the allowed whitelist.
+ * @param {string} attr A single attribute string (e.g. `href="https://example.com"`, `class="foo"`)
+ * @returns {boolean} `true` if the attribute is safe, `false` if it contains a dangerous URL protocol.
+ */
 function _isSafeAttribute(attr) {
 	if (!_URL_ATTR_PATTERN.test(attr)) return true;
 

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

@@ -503,7 +503,7 @@ class Offset {
 		const th = this.#context.get('toolbar_main').offsetHeight;
 		const containerToolbar = this.#options.get('toolbar_container');
 		const headLess = this.#store.mode.isBalloon || this.#store.mode.isInline || containerToolbar;
-		const toolbarH = (containerToolbar && globalTop - wScrollY - th > 0) || (!this.#$.toolbar.isSticky && headLess) ? 0 : th + (this.#$.toolbar.isSticky ? this.#options.get('toolbar_sticky') : 0);
+		const toolbarH = (containerToolbar && globalTop - wScrollY - th > 0) || (!this.#$.toolbar.isSticky && headLess) ? 0 : th + (this.#$.toolbar.isSticky ? this.#options.get('_toolbar_sticky') : 0);
 		const statusBarH = this.#frameContext.get('statusbar')?.offsetHeight || 0;
 
 		// check margin

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

@@ -425,7 +425,7 @@ class Selection_ {
 		const isBottom = this.#store.mode.isBottom;
 		const realToolbarHeight = this.#context.get('toolbar_main').offsetHeight;
 		const toolbarHeight = this.#$.toolbar.isSticky ? realToolbarHeight : 0;
-		const positionToolbarHeight = this.#$.toolbar.isSticky ? toolbarHeight + this.#options.get('toolbar_sticky') : toolbarHeight;
+		const positionToolbarHeight = this.#$.toolbar.isSticky ? toolbarHeight + this.#options.get('_toolbar_sticky') : toolbarHeight;
 		const statusbarHeight = this.#frameContext.get('statusbar')?.offsetHeight || 0;
 
 		if (this.#hasScrollParents) {

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

@@ -154,7 +154,7 @@ class Finder {
 	 */
 	#updateStickyTop() {
 		if (!this.#isOpen || !this.#panel) return;
-		const stickyTop = this.#$.options.get('toolbar_sticky');
+		const stickyTop = this.#$.options.get('_toolbar_sticky');
 		if (this.#store.mode.isBottom) {
 			this.#panel.style.top = 'auto';
 			this.#panel.style.bottom = stickyTop >= 0 ? stickyTop + this.#$.context.get('toolbar_main').offsetHeight + 'px' : '0px';

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

@@ -28,6 +28,7 @@ class Toolbar {
 
 	#useCSSSticky = false;
 	#_isStickyFlag = false;
+	#_cssStickyShifted = false;
 
 	/**
 	 * @constructor
@@ -88,7 +89,7 @@ class Toolbar {
 
 		// CSS sticky: non-balloon, non-inline, non-container, sticky enabled
 		const isStickyPosible = !this.isSub && !balloon && !inline;
-		const stickyTop = this.#options.get('toolbar_sticky');
+		const stickyTop = this.#options.get('_toolbar_sticky');
 
 		this.#useCSSSticky = isStickyPosible && stickyTop >= 0 && !this.#options.get('toolbar_container') && typeof CSS !== 'undefined' && CSS.supports('position', 'sticky');
 
@@ -119,14 +120,15 @@ class Toolbar {
 	 */
 	get isSticky() {
 		if (this.isSub) return false;
-		const stickyTop = this.#options.get('toolbar_sticky');
+		const stickyTop = this.#options.get('_toolbar_sticky');
 		if (stickyTop < 0) return false;
 
 		if (this.#useCSSSticky) {
 			const toolbar = this.#context.get(this.keyName.main);
 			if (!toolbar || toolbar.offsetWidth === 0 || toolbar.style.display === 'none') return false;
 			if (this.isBottomMode) {
-				return toolbar.getBoundingClientRect().bottom >= _w.innerHeight - stickyTop - 1;
+				const viewportHeight = this.#isViewPortSize ? _w.visualViewport.height : _w.innerHeight;
+				return toolbar.getBoundingClientRect().bottom >= viewportHeight - stickyTop - 1;
 			}
 			return toolbar.getBoundingClientRect().top <= stickyTop + 1;
 		}
@@ -254,13 +256,16 @@ class Toolbar {
 	 * @description Reset the sticky toolbar position based on the editor state.
 	 */
 	_resetSticky() {
-		if (this.#useCSSSticky) return;
+		if (this.#useCSSSticky) {
+			this.#resetCSSStickyOffset();
+			return;
+		}
 
 		const wrapper = this.#frameContext.get('wrapper');
 		if (!wrapper) return;
 
 		const toolbar = this.#context.get(this.keyName.main);
-		const stickyTop = this.#options.get('toolbar_sticky');
+		const stickyTop = this.#options.get('_toolbar_sticky');
 		if (this.#frameContext.get('isFullScreen') || toolbar.offsetWidth === 0 || stickyTop < 0) return;
 
 		const currentScrollY = this.#isViewPortSize ? _w.visualViewport.pageTop : _w.scrollY;
@@ -485,11 +490,11 @@ class Toolbar {
 		}
 
 		if (this.isBottomMode) {
-			const toolbarBottomPosition = this.#options.get('toolbar_sticky') + this.#getViewportTop();
+			const toolbarBottomPosition = this.#options.get('_toolbar_sticky') + this.#getViewportTop();
 			toolbar.style.bottom = `${toolbarBottomPosition}px`;
 			toolbar.style.top = 'auto';
 		} else {
-			const toolbarTopPosition = this.#options.get('toolbar_sticky') + inlineOffset + this.#getViewportTop();
+			const toolbarTopPosition = this.#options.get('_toolbar_sticky') + inlineOffset + this.#getViewportTop();
 			toolbar.style.top = `${toolbarTopPosition}px`;
 		}
 		toolbar.style.width = this.isInlineMode ? this.inlineToolbarAttr.width : toolbar.offsetWidth + 'px';
@@ -508,6 +513,43 @@ class Toolbar {
 		return 0;
 	}
 
+	/**
+	 * @description Adjust CSS sticky toolbar position when the mobile virtual keyboard changes the visual viewport.
+	 */
+	#resetCSSStickyOffset() {
+		if (!this.#isViewPortSize) return;
+		// When the editor is inside a scrollable container (e.g., modal),
+		// position:sticky is relative to that container, not the viewport.
+		if (this.#kernel._eventOrchestrator.scrollparents.length > 0) return;
+
+		const viewportOffset = Math.round(_w.visualViewport.offsetTop);
+		if (viewportOffset === 0 && !this.#_cssStickyShifted) return;
+
+		const toolbar = this.#context.get(this.keyName.main);
+		const stickyOffset = this.#options.get('_toolbar_sticky_offset');
+
+		if (viewportOffset > 0) {
+			this.#_cssStickyShifted = true;
+			if (this.isBottomMode) {
+				const viewportBottom = Math.round(_w.innerHeight - _w.visualViewport.height - viewportOffset);
+				toolbar.style.bottom = stickyOffset + viewportBottom + 'px';
+				toolbar.style.top = 'auto';
+			} else {
+				toolbar.style.top = stickyOffset + viewportOffset + 'px';
+			}
+		} else {
+			// restore original CSS sticky value
+			this.#_cssStickyShifted = false;
+			const stickyTop = this.#options.get('_toolbar_sticky');
+			if (this.isBottomMode) {
+				toolbar.style.bottom = stickyTop + 'px';
+				toolbar.style.top = 'auto';
+			} else {
+				toolbar.style.top = stickyTop > 0 ? stickyTop + 'px' : '';
+			}
+		}
+	}
+
 	/**
 	 * @description Disable `sticky` toolbar mode.
 	 */

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

@@ -411,7 +411,7 @@ class Viewer {
 				this.#toolbarParent = null;
 			}
 
-			if (this.#options.get('toolbar_sticky') > -1) {
+			if (this.#options.get('_toolbar_sticky') > -1) {
 				dom.utils.removeClass(toolbar, 'se-toolbar-sticky');
 			}
 

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 :' }
+ * ```
  */
 
 /** ================================================================================================================================ */
@@ -460,7 +467,22 @@ export const DEFAULTS = {
  * @property {boolean} [tabDisable=false] - Disables tab key input.
  * @property {string} [toolbar_width="auto"] - Toolbar width.
  * @property {?HTMLElement} [toolbar_container] - Container element for the toolbar.
- * @property {number} [toolbar_sticky=0] - Enables sticky toolbar with optional offset.
+ * @property {number|{top: number, offset: number}} [toolbar_sticky=0] - Enables sticky toolbar.
+ * - `number`: Sets the sticky top position (px). Use `-1` to disable sticky.
+ * - `{top, offset}`: `top` is the sticky position when the page header is visible.
+ * - `offset` is the sticky position when a virtual keyboard shifts the viewport (e.g., on tablets, touch devices).
+ * - When the virtual keyboard is active, `offset` replaces `top` so the toolbar doesn't leave a gap
+ * - for a page header that has scrolled out of view. Default `offset` is `0`.
+ * ```js
+ * // Basic usage — sticky at top with 0px offset
+ * toolbar_sticky: 0
+ *
+ * // Account for a 92px fixed/sticky site header
+ * toolbar_sticky: 92
+ *
+ * // 92px header on desktop, but 0px when virtual keyboard pushes the viewport
+ * toolbar_sticky: { top: 92, offset: 0 }
+ * ```
  * @property {boolean} [toolbar_hide=false] - Hides toolbar initially.
  * @property {Object} [subToolbar={}] - Sub-toolbar configuration. A secondary toolbar that appears on text selection.
  * @property {SunEditor.UI.ButtonList} [subToolbar.buttonList] - List of Sub-toolbar buttons, grouped by sub-arrays.
@@ -666,6 +688,8 @@ export const OPTION_FRAME_FIXED_FLAG = {
 	charCounter_max: true,
 	charCounter_label: true,
 	charCounter_type: true,
+	wordCounter: true,
+	wordCounter_label: true,
 };
 
 /**
@@ -754,7 +778,7 @@ export const OPTION_FIXED_FLAG = {
 };
 
 /**
- * @typedef {'formatClosureBrLine' | 'formatBrLine' | 'formatLine' | 'formatClosureBlock' | 'formatBlock' | 'toolbar_width' | 'toolbar_container' | 'toolbar_sticky' | 'strictMode' | 'lineAttrReset'} TransformedOptionKeys
+ * @typedef {'formatClosureBrLine' | 'formatBrLine' | 'formatLine' | 'formatClosureBlock' | 'formatBlock' | 'toolbar_width' | 'toolbar_container' | '_toolbar_sticky' | '_toolbar_sticky_offset' | 'strictMode' | 'lineAttrReset'} TransformedOptionKeys
  */
 
 /**
@@ -776,7 +800,8 @@ export const OPTION_FIXED_FLAG = {
  * @property {{ reg: RegExp, str: string }} formatBlock
  * @property {string} toolbar_width
  * @property {HTMLElement|null} toolbar_container
- * @property {number} toolbar_sticky
+ * @property {number} _toolbar_sticky
+ * @property {number} _toolbar_sticky_offset
  * @property {StrictModeOptions} strictMode
  * @property {string[]} lineAttrReset
  */

package/src/core/section/constructor.js

@@ -616,7 +616,20 @@ export function InitOptions(options, editorTargets, plugins) {
 	/** Toolbar */
 	o.set('toolbar_width', options.toolbar_width ? (numbers.is(options.toolbar_width) ? options.toolbar_width + 'px' : options.toolbar_width) : 'auto');
 	o.set('toolbar_container', options.toolbar_container && !/inline/i.test(o.get('mode')) ? (typeof options.toolbar_container === 'string' ? _d.querySelector(options.toolbar_container) : options.toolbar_container) : null);
-	o.set('toolbar_sticky', /balloon/i.test(o.get('mode')) ? -1 : options.toolbar_sticky === undefined ? 0 : numbers.is(options.toolbar_sticky) ? numbers.get(options.toolbar_sticky, 0) : -1);
+
+	const _stickyOpt = options.toolbar_sticky;
+	const _isBalloon = /balloon/i.test(o.get('mode'));
+	if (_isBalloon) {
+		o.set('_toolbar_sticky', -1);
+		o.set('_toolbar_sticky_offset', 0);
+	} else if (_stickyOpt !== null && typeof _stickyOpt === 'object') {
+		o.set('_toolbar_sticky', numbers.get(_stickyOpt.top, 0));
+		o.set('_toolbar_sticky_offset', numbers.get(_stickyOpt.offset, 0));
+	} else {
+		o.set('_toolbar_sticky', _stickyOpt === undefined ? 0 : numbers.is(_stickyOpt) ? _stickyOpt : -1);
+		o.set('_toolbar_sticky_offset', 0);
+	}
+
 	o.set('toolbar_hide', !!options.toolbar_hide);
 
 	/** subToolbar */
@@ -759,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' });
@@ -773,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');
@@ -802,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),
 	};
 }
 
@@ -839,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);
@@ -868,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/modules/manager/ApiManager.js

@@ -180,6 +180,7 @@ class ApiManager {
 	 * @returns
 	 */
 	#normalizeUrl(url) {
+		if (!url) return '';
 		return url.replace(/([^:])\/+/g, '$1/').replace(/\/(\?|#|$)/, '$1');
 	}
 

package/types/core/event/ports.d.ts

@@ -166,7 +166,7 @@ export function makePorts(
 	formatAttrsTempCache: (attrs: any) => any;
 	setOnShortcutKey: (v: any) => any;
 	/**
-	 * @description Scrolls the editor view to the caret position after pressing `Enter`. (Ignored on mobile devices)
+	 * @description Scrolls the editor view to the caret position after pressing `Enter`.
 	 * @param {Range} range Range object
 	 */
 	enterScrollTo(range: Range): void;

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;