suneditor 3.0.0-beta.9 → 3.0.0-rc.2

package/src/core/kernel/store.js

@@ -0,0 +1,173 @@
+import { numbers } from '../../helper';
+
+/**
+ * @typedef {Object} StoreState
+ * @property {*} rootKey - Current root frame key.
+ * @property {boolean} hasFocus - Whether the editor has focus.
+ * @property {number} tabSize - Tab character space count.
+ * @property {number} indentSize - `block` indent margin size (px).
+ * @property {number} codeIndentSize - Code view indent space count.
+ * @property {Array<string>} currentNodes - Selection path tag names (for navigation bar).
+ * @property {Array<string>} currentNodesMap - Active command/style names from selection path.
+ * @property {number} initViewportHeight - Viewport height at initialization.
+ * @property {number} currentViewportHeight - Current visual viewport height.
+ * @property {boolean} controlActive - Whether a controller or component is currently active, used to manage `blur`/`focus` behavior.
+ * @property {(fc: SunEditor.FrameContext) => boolean} isScrollable - Whether the frame content is scrollable (derived from `height`/`maxHeight` options).
+ * @property {?Node} _lastSelectionNode - Last selection node processed by `selectionState.update()` (cache for dedup).
+ * @property {?Range} _range - Cached selection range.
+ * @property {boolean} _mousedown - Whether `mousedown` is pressed.
+ * @property {boolean} _preventBlur - Suppress `blur` event handling.
+ * @property {boolean} _preventFocus - Suppress `focus` event handling.
+ */
+
+/**
+ * @typedef {Object} StoreMode - Toolbar display mode flags (immutable after init).
+ * @property {boolean} isClassic - Whether the toolbar is in classic (top-fixed) mode.
+ * @property {boolean} isInline - Whether the toolbar is in `inline` mode (appears above the editor on focus).
+ * @property {boolean} isBalloon - Whether the toolbar is in `balloon` mode (appears on text selection).
+ * @property {boolean} isBalloonAlways - Whether the toolbar is in `balloon-always` mode (always visible as floating).
+ * @property {boolean} isSubBalloon - Whether the sub-toolbar is in `balloon` mode.
+ * @property {boolean} isSubBalloonAlways - Whether the sub-toolbar is in `balloon-always` mode.
+ */
+
+/**
+ * @description Central runtime state management for the editor.
+ * - Does not store DOM references (kept in `frameContext`).
+ * - Does not store configuration values (kept in `options`).
+ * - Only manages runtime state.
+ */
+class Store {
+	/** @type {StoreState} */
+	#state;
+	#subscribers = new Map();
+
+	/**
+	 * @param {import('../section/constructor').ConstructorReturnType} product - Constructor product
+	 */
+	constructor(product) {
+		const options = product.options;
+		const mode = options.get('mode');
+		const subMode = options.get('_subMode');
+
+		/**
+		 * @internal
+		 * @description If `true`, initialize all indexes of image, video information
+		 * @type {boolean}
+		 */
+		this._editorInitFinished = false;
+
+		/** @type {StoreMode} */
+		this.mode = {
+			isClassic: /classic/i.test(mode),
+			isInline: /inline/i.test(mode),
+			isBalloon: /balloon/i.test(mode),
+			isBalloonAlways: /balloon-always/i.test(mode),
+			isSubBalloon: /balloon/i.test(subMode),
+			isSubBalloonAlways: /balloon-always/i.test(subMode),
+		};
+
+		this.#state = {
+			rootKey: product.rootId,
+			hasFocus: false,
+			tabSize: 4,
+			indentSize: 25,
+			codeIndentSize: 2,
+			currentNodes: [],
+			currentNodesMap: [],
+			initViewportHeight: 0,
+			currentViewportHeight: 0,
+			controlActive: false,
+			_lastSelectionNode: null,
+			isScrollable: (fc) => {
+				const fo = fc.get('options');
+				const height = fo.get('height');
+				const maxHeight = fo.get('maxHeight');
+
+				if (height !== 'auto') {
+					return true;
+				}
+
+				if (!maxHeight) {
+					return false;
+				}
+
+				// height === 'auto' && maxHeight
+				return fc.get('wysiwyg').offsetHeight >= numbers.get(maxHeight);
+			},
+			_range: null,
+			_mousedown: false,
+			_preventBlur: false,
+			_preventFocus: false,
+		};
+	}
+
+	/**
+	 * @description Get state value (supports underscore notation)
+	 * @template {keyof StoreState} K
+	 * @param {K} key
+	 * @returns {StoreState[K]}
+	 */
+	get(key) {
+		return this.#state[key];
+	}
+
+	/**
+	 * @description Set state value and notify subscribers
+	 * @template {keyof StoreState} K
+	 * @param {K} key
+	 * @param {StoreState[K]} value - Value to set
+	 */
+	set(key, value) {
+		const oldValue = this.#state[key];
+		this.#state[key] = value;
+
+		// Notify subscribers
+		this.#notify(key, value, oldValue);
+	}
+
+	/**
+	 * @description Subscribe to state changes
+	 * @template {keyof StoreState} K
+	 * @param {K} path - Path to subscribe
+	 * @param {(newValue: StoreState[K], oldValue: StoreState[K]) => void} callback
+	 * @returns {() => void} Unsubscribe function
+	 */
+	subscribe(path, callback) {
+		if (!this.#subscribers.has(path)) {
+			this.#subscribers.set(path, new Set());
+		}
+		this.#subscribers.get(path).add(callback);
+
+		return () => this.#subscribers.get(path).delete(callback);
+	}
+
+	/**
+	 * @param {keyof StoreState} path
+	 * @param {*} newValue
+	 * @param {*} oldValue
+	 */
+	#notify(path, newValue, oldValue) {
+		const subscribers = this.#subscribers.get(path);
+		if (!subscribers) return;
+
+		for (const cb of subscribers) {
+			try {
+				cb(newValue, oldValue);
+			} catch (e) {
+				console.error(`[Store] Subscriber error for "${path}":`, e);
+			}
+		}
+	}
+
+	// Internal API
+	_reset() {
+		// Reset to initial state
+	}
+
+	_destroy() {
+		this.#subscribers.clear();
+		this.#state = null;
+	}
+}
+
+export default Store;

package/src/core/{class → logic/dom}/char.js

@@ -2,59 +2,58 @@
  * @fileoverview Char class
  */
 
-import CoreInjector from '../../editorInjector/_core';
-import { _w, isEdge } from '../../helper/env';
-import { addClass, removeClass, hasClass } from '../../helper/dom/domUtils';
+import { _w, isEdge } from '../../../helper/env';
+import { addClass, removeClass, hasClass } from '../../../helper/dom/domUtils';
 
 /**
- * @typedef {Omit<Char & Partial<__se__EditorInjector>, 'char'>} CharThis
- */
-
-/**
- * @constructor
- * @this {CharThis}
  * @description character count, character limit, etc. management class
- * @param {__se__EditorCore} editor - The root editor instance
  */
-function Char(editor) {
-	CoreInjector.call(this, editor);
-}
+class Char {
+	#$;
+	#frameContext;
+	#frameOptions;
+
+	/**
+	 * @constructor
+	 * @param {SunEditor.Kernel} kernel
+	 */
+	constructor(kernel) {
+		this.#$ = kernel.$;
+		this.#frameContext = this.#$.frameContext;
+		this.#frameOptions = this.#$.frameOptions;
+	}
 
-Char.prototype = {
 	/**
-	 * @this {CharThis}
 	 * @description Returns false if char count is greater than "frameOptions.get('charCounter_max')" when "html" is added to the current editor.
 	 * @param {Node|string} html Element node or String.
 	 * @returns {boolean}
 	 */
 	check(html) {
-		const maxCharCount = this.editor.frameOptions.get('charCounter_max');
+		const maxCharCount = this.#frameOptions.get('charCounter_max');
 		if (maxCharCount) {
-			const length = this.getLength(typeof html === 'string' ? html : this.editor.frameOptions.get('charCounter_type') === 'byte-html' && html.nodeType === 1 ? /** @type {HTMLElement} */ (html).outerHTML : html.textContent);
+			const length = this.getLength(typeof html === 'string' ? html : this.#frameOptions.get('charCounter_type') === 'byte-html' && html.nodeType === 1 ? /** @type {HTMLElement} */ (html).outerHTML : html.textContent);
 			if (length > 0 && length + this.getLength() > maxCharCount) {
-				CounterBlink(this.editor.frameContext.get('charWrapper'));
+				CounterBlink(this.#frameContext.get('charWrapper'));
 				return false;
 			}
 		}
 		return true;
-	},
+	}
 
 	/**
-	 * @this {CharThis}
 	 * @description Get the [content]'s number of characters or binary data size. (frameOptions.get('charCounter_type'))
 	 * - If [content] is undefined, get the current editor's number of characters or binary data size.
-	 * @param {string=} content Content to count. (defalut: this.editor.frameContext.get('wysiwyg'))
+	 * @param {string} [content] Content to count. (defalut: this.#frameContext.get('wysiwyg'))
 	 * @returns {number}
 	 */
 	getLength(content) {
 		if (typeof content !== 'string') {
-			content = this.editor.frameOptions.get('charCounter_type') === 'byte-html' ? this.editor.frameContext.get('wysiwyg').innerHTML : this.editor.frameContext.get('wysiwyg').textContent;
+			content = this.#frameOptions.get('charCounter_type') === 'byte-html' ? this.#frameContext.get('wysiwyg').innerHTML : this.#frameContext.get('wysiwyg').textContent;
 		}
-		return /byte/.test(this.editor.frameOptions.get('charCounter_type')) ? this.getByteLength(content) : content.length;
-	},
+		return /byte/.test(this.#frameOptions.get('charCounter_type')) ? this.getByteLength(content) : content.length;
+	}
 
 	/**
-	 * @this {CharThis}
 	 * @descriptionGets Get the length in bytes of a string.
 	 * @param {string} text String text
 	 * @returns {number}
@@ -83,28 +82,28 @@ Char.prototype = {
 
 			return cl + cr;
 		}
-	},
+	}
 
 	/**
-	 * @this {CharThis}
 	 * @description Set the char count to charCounter element textContent.
-	 * @param {?__se__FrameContext=} fc Frame context
+	 * @param {?SunEditor.FrameContext} [fc] Frame context
 	 */
 	display(fc) {
-		const charCounter = (fc || this.editor.frameContext).get('charCounter');
+		const charCounter = (fc || this.#frameContext).get('charCounter');
 		if (charCounter) {
+			// Defer count update — DOM content may still be mutating from the current input/paste action
 			_w.setTimeout(() => {
-				charCounter.textContent = this.getLength();
+				charCounter.textContent = String(this.getLength());
 			}, 0);
 		}
-	},
+	}
 
 	/**
-	 * @this {CharThis}
 	 * @description Returns false if char count is greater than "frameOptions.get('charCounter_max')" when "inputText" is added to the current editor.
 	 * - If the current number of characters is greater than "charCounter_max", the excess characters are removed.
 	 * And call the char.display()
 	 * @param {string} inputText Text added.
+	 * @param {boolean} _fromInputEvent Whether the test is triggered from an input event.
 	 * @returns {boolean}
 	 */
 	test(inputText, _fromInputEvent) {
@@ -113,7 +112,7 @@ Char.prototype = {
 
 		this.display();
 
-		const maxCharCount = this.editor.frameOptions.get('charCounter_max');
+		const maxCharCount = this.#frameOptions.get('charCounter_max');
 		if (maxCharCount > 0) {
 			let over = false;
 			const count = this.getLength();
@@ -121,39 +120,37 @@ Char.prototype = {
 			if (count > maxCharCount) {
 				over = true;
 				if (nextCharCount > 0 && _fromInputEvent) {
-					this.selection._init();
-					const range = this.selection.getRange();
+					this.#$.selection.init();
+					const range = this.#$.selection.getRange();
 					const endOff = range.endOffset - 1;
-					const text = this.selection.getNode().textContent;
+					const text = this.#$.selection.getNode().textContent;
 					const slicePosition = range.endOffset - 1; // (count - maxCharCount);
 
-					this.selection.getNode().textContent = text.slice(0, slicePosition < 0 ? 0 : slicePosition) + text.slice(range.endOffset, text.length);
-					this.selection.setRange(range.endContainer, endOff, range.endContainer, endOff);
+					this.#$.selection.getNode().textContent = text.slice(0, slicePosition < 0 ? 0 : slicePosition) + text.slice(range.endOffset, text.length);
+					this.#$.selection.setRange(range.endContainer, endOff, range.endContainer, endOff);
 				}
 			} else if (count + nextCharCount > maxCharCount) {
 				over = true;
 			}
 
 			if (over) {
-				CounterBlink(this.editor.frameContext.get('charWrapper'));
+				CounterBlink(this.#frameContext.get('charWrapper'));
 				if (nextCharCount > 0) return false;
 			}
 		}
 
 		return true;
-	},
-
-	constructor: Char
-};
+	}
+}
 
 /**
- * @private
  * @description The character counter blinks.
- * @param {Element} charWrapper this.editor.frameContext.get('charWrapper')
+ * @param {Element} charWrapper this.#frameContext.get('charWrapper')
  */
 function CounterBlink(charWrapper) {
 	if (charWrapper && !hasClass(charWrapper, 'se-blink')) {
 		addClass(charWrapper, 'se-blink');
+		// Remove blink CSS class after animation completes (600ms matches the CSS animation duration)
 		_w.setTimeout(() => {
 			removeClass(charWrapper, 'se-blink');
 		}, 600);