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

package/src/core/logic/shell/focusManager.js

@@ -0,0 +1,110 @@
+import { dom } from '../../../helper';
+
+/**
+ * @description Manages editor focus and blur behavior across frames and controllers.
+ */
+export default class FocusManager {
+	#kernel;
+	#$;
+	#store;
+
+	#options;
+	#frameContext;
+	#frameOptions;
+
+	/**
+	 * @constructor
+	 * @param {SunEditor.Kernel} kernel
+	 */
+	constructor(kernel) {
+		this.#kernel = kernel;
+		this.#$ = kernel.$;
+		this.#store = kernel.store;
+
+		this.#options = this.#$.options;
+		this.#frameContext = this.#$.frameContext;
+		this.#frameOptions = this.#$.frameOptions;
+	}
+
+	/**
+	 * @description Focus to wysiwyg area
+	 * @param {*} [rootKey] Root frame key.
+	 */
+	focus(rootKey) {
+		if (rootKey) this.#$.facade.changeFrameContext(rootKey);
+		if (this.#frameContext.get('wysiwygFrame').style.display === 'none') return;
+		this.#store.set('_preventBlur', false);
+
+		if (this.#frameOptions.get('iframe') || !this.#frameContext.get('wysiwyg').contains(this.#$.selection.getNode())) {
+			this.nativeFocus();
+		} else {
+			try {
+				const range = this.#$.selection.getRange();
+				if (range.startContainer === range.endContainer && dom.check.isWysiwygFrame(range.startContainer)) {
+					const currentNode = /** @type {HTMLElement} */ (range.commonAncestorContainer).children[range.startOffset];
+					if (!this.#$.format.isLine(currentNode) && !this.#$.component.is(currentNode)) {
+						const br = dom.utils.createElement('BR');
+						const format = dom.utils.createElement(this.#options.get('defaultLine'), null, br);
+						this.#frameContext.get('wysiwyg').insertBefore(format, currentNode);
+						this.#$.selection.setRange(br, 0, br, 0);
+						return;
+					}
+				}
+				this.#$.selection.setRange(range.startContainer, range.startOffset, range.endContainer, range.endOffset);
+			} catch (e) {
+				console.warn('[SUNEDITOR.focus.warn] ', e);
+				this.nativeFocus();
+			}
+		}
+
+		if (this.#store.mode.isBalloon) this.#kernel._eventOrchestrator._toggleToolbarBalloon();
+	}
+
+	/**
+	 * @description If `focusEl` is a component, then that component is selected; if it is a format element, the last text is selected
+	 * - If `focusEl` is `null`, then selected last element
+	 * @param {?Node} [focusEl] Focus element
+	 */
+	focusEdge(focusEl) {
+		this.#store.set('_preventBlur', false);
+		focusEl ||= this.#frameContext.get('wysiwyg').lastElementChild;
+
+		const fileComponentInfo = this.#$.component.get(focusEl);
+		if (fileComponentInfo) {
+			this.#$.component.select(fileComponentInfo.target, fileComponentInfo.pluginName);
+		} else if (focusEl) {
+			if (focusEl.nodeType !== 3) {
+				focusEl = dom.query.getEdgeChild(
+					focusEl,
+					function (current) {
+						return current.childNodes.length === 0 || current.nodeType === 3;
+					},
+					true,
+				);
+			}
+			if (!focusEl) this.nativeFocus();
+			else this.#$.selection.setRange(focusEl, focusEl.textContent.length, focusEl, focusEl.textContent.length);
+		} else {
+			this.focus();
+		}
+	}
+
+	/**
+	 * @description Focus to wysiwyg area using native focus function
+	 */
+	nativeFocus() {
+		this.#$.selection.__focus();
+		this.#$.selection.init();
+	}
+
+	/**
+	 * @description Focusout to wysiwyg area (.blur())
+	 */
+	blur() {
+		if (this.#frameOptions.get('iframe')) {
+			this.#frameContext.get('wysiwygFrame').blur();
+		} else {
+			this.#frameContext.get('wysiwyg').blur();
+		}
+	}
+}

package/src/core/{base → logic/shell}/history.js

@@ -1,37 +1,50 @@
-/**
- * @fileoverview history stack closure
- */
-
-import { _w } from '../../helper/env';
-import { getNodeFromPath, getNodePath } from '../../helper/dom/domQuery';
-import { numbers } from '../../helper';
+import { _w } from '../../../helper/env';
+import { getNodeFromPath, getNodePath } from '../../../helper/dom/domQuery';
+import { numbers } from '../../../helper';
 
 /**
  * @description History stack closure
- * @param {__se__EditorCore} editor - The root editor instance
+ * @param {SunEditor.Kernel} kernel
  */
-export default function History(editor) {
-	const frameRoots = editor.frameRoots;
-	let delayTime = editor.options.get('historyStackDelayTime');
+export default function History(kernel) {
+	const $ = kernel.$;
+	const store = kernel.store;
+
+	const contextProvider = $.contextProvider;
+	const eventManager = $.eventManager;
+	const frameRoots = contextProvider.frameRoots;
+	const context = contextProvider.context;
+	const frameContext = contextProvider.frameContext;
+
+	let delayTime = $.options.get('historyStackDelayTime');
 	let pushDelay = null;
 	let stackIndex, stack, rootStack, rootInitContents;
 	let waiting = false;
 	let waitingTime = null;
 
+	/**
+	 * @description Triggers onChange event and updates UI after history state changes.
+	 * @param {SunEditor.FrameContext} fc The frame context.
+	 * @param {number} index The current history index.
+	 * @param {boolean} isSetFocus Whether to apply tag effects if editor has focus.
+	 */
 	function change(fc, index, isSetFocus) {
-		if (isSetFocus && editor.status.hasFocus) editor.eventManager.applyTagEffect();
-		editor.history.resetButtons(fc.get('key'), index);
+		if (isSetFocus && store.get('hasFocus')) kernel._eventOrchestrator.applyTagEffect();
+		$.history.resetButtons(fc.get('key'), index);
 
 		// user event
-		editor.triggerEvent('onChange', { frameContext: fc, data: fc.get('wysiwyg').innerHTML });
-		if (editor.context.get('toolbar.main').style.display === 'block') editor.toolbar._showBalloon();
-		else if (editor.isSubBalloon && editor.context.get('toolbar.sub.main').style.display === 'block') editor.subToolbar._showBalloon();
+		eventManager.triggerEvent('onChange', { frameContext: fc, data: fc.get('wysiwyg').innerHTML });
+		if (context.get('toolbar_main').style.display === 'block') $.toolbar._showBalloon();
+		else if (store.mode.isSubBalloon && context.get('toolbar_sub_main').style.display === 'block') $.subToolbar._showBalloon();
 	}
 
+	/**
+	 * @description Restores content from the history stack and updates the editor state.
+	 * @param {number} increase Direction to move in the stack: -1 for undo, +1 for redo.
+	 */
 	function setContentFromStack(increase) {
 		const prevKey = stack[stackIndex];
 		const prevRoot = rootStack[prevKey];
-		const fc = editor.frameContext;
 
 		stackIndex += increase;
 		const rootKey = increase < 0 && prevKey !== stack[stackIndex] && prevRoot.index > 0 ? prevKey : stack[stackIndex];
@@ -39,6 +52,15 @@ export default function History(editor) {
 		root.index += increase;
 
 		const item = root.value[root.index];
+
+		if (!item) {
+			console.warn('[SunEditor.history.setContent.fail] History state desynchronized. Aborting undo/redo operation.');
+			// Rollback to prevent stuck state
+			root.index -= increase;
+			stackIndex -= increase;
+			return;
+		}
+
 		frameRoots.get(rootKey).get('wysiwyg').innerHTML = item.content;
 
 		if (prevKey !== rootKey && increase < 0 && stackIndex === 1) {
@@ -60,27 +82,34 @@ export default function History(editor) {
 			}
 		}
 
-		editor.changeFrameContext(focusKey);
-		editor.selection.setRange(getNodeFromPath(focusItem.s.path, focusItem.frame), focusItem.s.offset, getNodeFromPath(focusItem.e.path, focusItem.frame), focusItem.e.offset);
-		editor.focus();
+		$.facade.changeFrameContext(focusKey);
+		$.selection.setRange(getNodeFromPath(focusItem.s.path, focusItem.frame), focusItem.s.offset, getNodeFromPath(focusItem.e.path, focusItem.frame), focusItem.e.offset);
+		$.focusManager.focus();
 
 		if (stackIndex < 0) stackIndex = 0;
 		else if (stackIndex >= stack.length) stackIndex = stack.length - 1;
 
-		editor.ui._offCurrentController();
-		editor._checkComponents(false);
-		editor.char.display();
-		editor._resourcesStateChange(fc);
+		$.ui.offCurrentController();
+		$.pluginManager.checkFileInfo(false);
+		$.char.display();
+		$.ui._syncFrameState(frameContext);
 
 		// document type
-		if (fc.has('documentType-use-header')) {
-			fc.get('documentType').reHeader();
+		if (frameContext.has('documentType_use_header')) {
+			frameContext.get('documentType').reHeader();
 		}
 
 		// onChange
-		change(fc, root.index, true);
+		change(frameContext, root.index, true);
 	}
 
+	/**
+	 * @description Saves content and selection to the history stack.
+	 * @param {string} content HTML content to save.
+	 * @param {Range} range Selection range.
+	 * @param {*} rootKey Root frame key.
+	 * @param {number} increase Stack index increment.
+	 */
 	function setStack(content, range, rootKey, increase) {
 		let s, e;
 		if (!range) {
@@ -89,11 +118,11 @@ export default function History(editor) {
 		} else {
 			s = {
 				path: getNodePath(range.startContainer, null, null),
-				offset: range.startOffset
+				offset: range.startOffset,
 			};
 			e = {
 				path: getNodePath(range.endContainer, null, null),
-				offset: range.endOffset
+				offset: range.endOffset,
 			};
 		}
 
@@ -106,10 +135,14 @@ export default function History(editor) {
 			content: content,
 			s: s,
 			e: e,
-			frame: frameRoots.get(rootKey).get('wysiwyg')
+			frame: frameRoots.get(rootKey).get('wysiwyg'),
 		};
 	}
 
+	/**
+	 * @description Resets a root frame's history stack.
+	 * @param {*} rootKey Root frame key.
+	 */
 	function resetRoot(rootKey) {
 		stackIndex++;
 		stack[stackIndex] = rootKey;
@@ -119,15 +152,23 @@ export default function History(editor) {
 			content: rootInitContents[rootKey],
 			s: { path: [0, 0], offset: [0, 0] },
 			e: { path: 0, offset: 0 },
-			frame: frameRoots.get(rootKey).get('wysiwyg')
+			frame: frameRoots.get(rootKey).get('wysiwyg'),
 		};
 	}
 
+	/**
+	 * @description Initializes a root frame's history stack.
+	 * @param {*} rootKey Root frame key.
+	 */
 	function initRoot(rootKey) {
 		rootStack[rootKey] = { value: [], index: -1 };
 		rootInitContents[rootKey] = frameRoots.get(rootKey).get('wysiwyg').innerHTML;
 	}
 
+	/**
+	 * @description Clears future history and reinitializes deleted roots.
+	 * @param {Object} root Root stack object.
+	 */
 	function refreshRoots(root) {
 		const deleteRoot = [];
 		for (let i = stackIndex + 1, len = stack.length; i < len; i++) {
@@ -136,8 +177,8 @@ export default function History(editor) {
 		}
 
 		stack = stack.slice(0, stackIndex + 1);
-		root.value.splice(stackIndex + 1);
-		editor.applyCommandTargets('redo', (e) => {
+		root.value.splice(root.index + 1);
+		$.commandDispatcher.applyTargets('redo', (e) => {
 			e.disabled = true;
 		});
 
@@ -146,8 +187,13 @@ export default function History(editor) {
 		}
 	}
 
+	/**
+	 * @description Pushes current content to the history stack.
+	 * @param {*} rootKey Root frame key.
+	 * @param {Range} range Selection range.
+	 */
 	function pushStack(rootKey, range) {
-		editor._checkComponents(false);
+		$.pluginManager.checkFileInfo(false);
 
 		const fc = frameRoots.get(rootKey);
 		const current = fc.get('wysiwyg').innerHTML;
@@ -159,31 +205,32 @@ export default function History(editor) {
 		setStack(current, range, rootKey, 1);
 
 		if (stackIndex === 1) {
-			editor.applyCommandTargets('undo', (e) => {
+			$.commandDispatcher.applyTargets('undo', (e) => {
 				e.disabled = false;
 			});
 		}
 
-		editor.char.display();
+		$.char.display();
 		change(fc, root.index, false);
 	}
 
 	return {
 		/**
 		 * @description Saving the current status to the history object stack
-		 * - If "delay" is true, it will be saved after (options.get('historyStackDelayTime') || 400) milliseconds.
-		 * - If the function is called again with the "delay" argument true before it is saved, the delay time is renewed.
+		 * - If `delay` is `true`, it will be saved after (`options.get('historyStackDelayTime')` || 400) milliseconds.
+		 * - If the function is called again with the `delay` argument `true` before it is saved, the delay time is renewed.
 		 * - You can specify the delay time by sending a number.
-		 * @param {boolean|number} delay If true, add stack without delay time.
-		 * @param {*=} [rootKey] The key of the root frame to save history for.
+		 * @param {boolean|number} delay If `true`, add stack without delay time.
+		 * @param {*} [rootKey] The key of the root frame to save history for.
 		 */
 		push(delay, rootKey) {
 			if (waiting) return;
 
-			rootKey = rootKey || editor.status.rootKey;
-			const range = editor.status._range;
+			rootKey = rootKey || rootKey === null ? rootKey : store.get('rootKey');
+			const range = store.get('_range');
 
-			_w.setTimeout(editor._resourcesStateChange.bind(editor, frameRoots.get(rootKey)), 0);
+			// Defer frame sync (code view, page mirror) — DOM updates from the current action must complete first
+			_w.setTimeout($.ui._syncFrameState.bind($.ui, frameRoots.get(rootKey)), 0);
 			const time = typeof delay === 'number' ? (delay > 0 ? delay : 0) : !delay ? 0 : delayTime;
 
 			if (!time || pushDelay) {
@@ -194,6 +241,7 @@ export default function History(editor) {
 				}
 			}
 
+			// Debounced history save — coalesces rapid edits into a single snapshot (cleared on next push or immediate save)
 			pushDelay = _w.setTimeout(() => {
 				_w.clearTimeout(pushDelay);
 				pushDelay = null;
@@ -234,10 +282,10 @@ export default function History(editor) {
 
 		/**
 		 * @description Overwrites the current state in the history stack with the latest content.
-		 * @param {string=} [rootKey] The key of the root frame to overwrite.
+		 * @param {string} [rootKey] The key of the root frame to overwrite.
 		 */
 		overwrite(rootKey) {
-			setStack(frameRoots.get(rootKey || editor.status.rootKey).get('wysiwyg').innerHTML, null, editor.status.rootKey, 0);
+			setStack(frameRoots.get(rootKey || store.get('rootKey')).get('wysiwyg').innerHTML, null, store.get('rootKey'), 0);
 		},
 
 		/**
@@ -250,6 +298,7 @@ export default function History(editor) {
 				_w.clearTimeout(waitingTime);
 				waitingTime = null;
 			}
+			// Safety auto-resume — prevents permanent history freeze if resume() is never called (cleared on resume)
 			waitingTime = _w.setTimeout(() => {
 				waiting = false;
 			}, 5000);
@@ -270,12 +319,12 @@ export default function History(editor) {
 		 * @description Resets the history stack and disables related UI buttons.
 		 */
 		reset() {
-			editor.applyCommandTargets('undo', (e) => (e.disabled = true));
-			editor.applyCommandTargets('redo', (e) => (e.disabled = true));
-			editor.applyCommandTargets('save', (e) => (e.disabled = true));
+			$.commandDispatcher.applyTargets('undo', (e) => (e.disabled = true));
+			$.commandDispatcher.applyTargets('redo', (e) => (e.disabled = true));
+			$.commandDispatcher.applyTargets('save', (e) => (e.disabled = true));
 
-			editor.applyFrameRoots((e) => e.set('historyIndex', -1));
-			editor.applyFrameRoots((e) => e.set('isChanged', false));
+			contextProvider.applyToRoots((e) => e.set('historyIndex', -1));
+			contextProvider.applyToRoots((e) => e.set('isChanged', false));
 
 			stackIndex = -1;
 			stack = [];
@@ -283,7 +332,7 @@ export default function History(editor) {
 			rootInitContents = {};
 			waiting = false;
 
-			const rootKeys = editor.rootKeys;
+			const rootKeys = contextProvider.rootKeys;
 			for (let i = 0, len = rootKeys.length; i < len; i++) {
 				initRoot(rootKeys[i]);
 			}
@@ -298,14 +347,14 @@ export default function History(editor) {
 			const isReset = !numbers.is(index);
 			const root = rootStack[rootKey === undefined ? stack[stackIndex] : rootKey];
 			index = !isReset ? index : root.index;
-			const target = editor.frameRoots.get(rootKey);
+			const target = frameRoots.get(rootKey);
 			const rootLen = root.value.length - 1;
 
-			editor.applyCommandTargets('undo', (e) => {
+			$.commandDispatcher.applyTargets('undo', (e) => {
 				if (index > 0 && index <= rootLen) e.disabled = false;
 				else e.disabled = true;
 			});
-			editor.applyCommandTargets('redo', (e) => {
+			$.commandDispatcher.applyTargets('redo', (e) => {
 				if (index > -1 && index < rootLen) e.disabled = false;
 				else e.disabled = true;
 			});
@@ -316,20 +365,20 @@ export default function History(editor) {
 
 			target.set('historyIndex', index);
 			target.set('isChanged', isChanged);
-			editor.applyCommandTargets('save', (e) => {
+			$.commandDispatcher.applyTargets('save', (e) => {
 				if (isChanged) e.disabled = false;
 				else e.disabled = true;
 			});
 
-			editor.triggerEvent('onResetButtons', { rootKey });
+			eventManager.triggerEvent('onResetButtons', { rootKey });
 		},
 
 		/**
 		 * @description Returns the root stack containing the history of each frame.
 		 * @returns {{content: string, s: {path: number|number[], offset: number|number[]}, e: {path: number|number[], offset: number|number[]}, frame: HTMLElement}} The root stack object.
 		 * - content: content html string
-		 * - s: depth info of the "start" range
-		 * - e: depth info of the "end" range
+		 * - s: depth info of the `start` range
+		 * - e: depth info of the `end` range
 		 * - frame: wysiwyg editable element.
 		 */
 		getRootStack() {
@@ -347,9 +396,10 @@ export default function History(editor) {
 		/**
 		 * @description Clears the entire history stack and cancels any pending save operations.
 		 */
-		destroy() {
+		_destroy() {
 			if (pushDelay) _w.clearTimeout(pushDelay);
+			if (waitingTime) _w.clearTimeout(waitingTime);
 			stackIndex = stack = rootStack = rootInitContents = null;
-		}
+		},
 	};
 }