suneditor 3.0.0-alpha.2 → 3.0.0-alpha.20

package/src/core/base/history.js

@@ -3,14 +3,20 @@
  */
 
 import { _w } from '../../helper/env';
-import { getNodeFromPath, getNodePath } from '../../helper/domUtils';
+import { getNodeFromPath, getNodePath } from '../../helper/dom/domQuery';
 import { numbers } from '../../helper';
 
-export default function (editor) {
+/**
+ * @description History stack closure
+ * @param {__se__EditorCore} editor - The root editor instance
+ */
+export default function History(editor) {
 	const frameRoots = editor.frameRoots;
 	let delayTime = editor.options.get('historyStackDelayTime');
 	let pushDelay = null;
 	let stackIndex, stack, rootStack, rootInitContents;
+	let waiting = false;
+	let waitingTime = null;
 
 	function change(fc, index) {
 		if (editor.status.hasFocus) editor.eventManager.applyTagEffect();
@@ -25,6 +31,7 @@ export default function (editor) {
 	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];
@@ -60,13 +67,18 @@ export default function (editor) {
 		if (stackIndex < 0) stackIndex = 0;
 		else if (stackIndex >= stack.length) stackIndex = stack.length - 1;
 
-		editor._offCurrentController();
-		editor._checkComponents();
+		editor.ui._offCurrentController();
+		editor._checkComponents(false);
 		editor.char.display();
-		editor._resourcesStateChange(editor.frameContext);
+		editor._resourcesStateChange(fc);
+
+		// document type
+		if (fc.has('documentType-use-header')) {
+			fc.get('documentType').reHeader();
+		}
 
 		// onChange
-		change(editor.frameContext, root.index);
+		change(fc, root.index);
 	}
 
 	function setStack(content, range, rootKey, increase) {
@@ -126,7 +138,7 @@ export default function (editor) {
 		stack = stack.slice(0, stackIndex + 1);
 		root.value.splice(stackIndex + 1);
 		editor.applyCommandTargets('redo', (e) => {
-			e.setAttribute('disabled', true);
+			e.disabled = true;
 		});
 
 		for (let i = 0, len = deleteRoot.length; i < len; i++) {
@@ -135,7 +147,7 @@ export default function (editor) {
 	}
 
 	function pushStack(rootKey, range) {
-		editor._checkComponents();
+		editor._checkComponents(false);
 
 		const fc = frameRoots.get(rootKey);
 		const current = fc.get('wysiwyg').innerHTML;
@@ -148,7 +160,7 @@ export default function (editor) {
 
 		if (stackIndex === 1) {
 			editor.applyCommandTargets('undo', (e) => {
-				e.removeAttribute('disabled');
+				e.disabled = false;
 			});
 		}
 
@@ -159,12 +171,15 @@ export default function (editor) {
 	return {
 		/**
 		 * @description Saving the current status to the history object stack
-		 * If "delay" is true, it will be saved after (options.get('historyStackDelayTime') || 400) miliseconds
-		 * If the function is called again with the "delay" argument true before it is saved, the delay time is renewal
-		 * You can specify the delay time by sending a number.
-		 * @param {Boolean|Number} delay If true, Add stack without delay time.
+		 * - 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.
 		 */
 		push(delay, rootKey) {
+			if (waiting) return;
+
 			rootKey = rootKey || editor.status.rootKey;
 			const range = editor.status._range;
 
@@ -186,6 +201,11 @@ export default function (editor) {
 			}, time);
 		},
 
+		/**
+		 * @description Immediately saves the current state to the history stack if a delayed save is pending.
+		 * @param {*} rootKey The key of the root frame.
+		 * @param {Range} range The selection range object.
+		 */
 		check(rootKey, range) {
 			if (pushDelay) {
 				_w.clearTimeout(pushDelay);
@@ -195,7 +215,7 @@ export default function (editor) {
 		},
 
 		/**
-		 * @description Undo function
+		 * @description Undo function that restores the previous state from the history stack.
 		 */
 		undo() {
 			if (stackIndex > 0) {
@@ -204,7 +224,7 @@ export default function (editor) {
 		},
 
 		/**
-		 * @description Redo function
+		 * @description Redo function that re-applies a previously undone state from the history stack.
 		 */
 		redo() {
 			if (stack.length - 1 > stackIndex) {
@@ -212,24 +232,47 @@ export default function (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.
+		 */
 		overwrite(rootKey) {
 			setStack(frameRoots.get(rootKey || editor.status.rootKey).get('wysiwyg').innerHTML, null, editor.status.rootKey, 0);
 		},
 
 		/**
-		 * @description Reset the history object
+		 * @description Pauses the history stack, preventing new entries from being added for up to 5 seconds.
 		 */
-		reset() {
-			editor.applyCommandTargets('undo', (e) => {
-				e.setAttribute('disabled', true);
-			});
-			editor.applyCommandTargets('redo', (e) => {
-				e.setAttribute('disabled', true);
-			});
+		pause() {
+			waiting = true;
 
-			editor.applyCommandTargets('save', (e) => {
-				e.setAttribute('disabled', true);
-			});
+			if (waitingTime) {
+				_w.clearTimeout(waitingTime);
+				waitingTime = null;
+			}
+			waitingTime = _w.setTimeout(() => {
+				waiting = false;
+			}, 5000);
+		},
+
+		/**
+		 * @description Resumes history tracking by allowing new entries to be added to the stack.
+		 */
+		resume() {
+			if (waitingTime) {
+				_w.clearTimeout(waitingTime);
+				waitingTime = null;
+			}
+			waiting = false;
+		},
+
+		/**
+		 * @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));
 
 			editor.applyFrameRoots((e) => e.set('historyIndex', -1));
 			editor.applyFrameRoots((e) => e.set('isChanged', false));
@@ -238,6 +281,7 @@ export default function (editor) {
 			stack = [];
 			rootStack = {};
 			rootInitContents = {};
+			waiting = false;
 
 			const rootKeys = editor.rootKeys;
 			for (let i = 0, len = rootKeys.length; i < len; i++) {
@@ -246,7 +290,9 @@ export default function (editor) {
 		},
 
 		/**
-		 * @description Reset the disabled state of the buttons to fit the current stack.
+		 * @description Updates the state of history-related buttons (undo, redo, save) based on the current history stack.
+		 * @param {*} rootKey The key of the root frame.
+		 * @param {number} [index] The index of the current history state.
 		 */
 		resetButtons(rootKey, index) {
 			const isReset = !numbers.is(index);
@@ -256,42 +302,50 @@ export default function (editor) {
 			const rootLen = root.value.length - 1;
 
 			editor.applyCommandTargets('undo', (e) => {
-				if (index > 0 && index <= rootLen) e.removeAttribute('disabled');
-				else e.setAttribute('disabled', true);
+				if (index > 0 && index <= rootLen) e.disabled = false;
+				else e.disabled = true;
 			});
 			editor.applyCommandTargets('redo', (e) => {
-				if (index > -1 && index < rootLen) e.removeAttribute('disabled');
-				else e.setAttribute('disabled', true);
+				if (index > -1 && index < rootLen) e.disabled = false;
+				else e.disabled = true;
 			});
 
 			const savedIndex = target.get('savedIndex');
 			const historyIndex = target.get('historyIndex');
-			const isChanged = savedIndex > -1 ? savedIndex !== index : isReset ? root.length > 0 : index > 0 && historyIndex !== index;
+			const isChanged = savedIndex > -1 ? savedIndex !== index : isReset ? root.index > 0 : index > 0 && historyIndex !== index;
 
 			target.set('historyIndex', index);
 			target.set('isChanged', isChanged);
 			editor.applyCommandTargets('save', (e) => {
-				if (isChanged) e.removeAttribute('disabled');
-				else e.setAttribute('disabled', true);
+				if (isChanged) e.disabled = false;
+				else e.disabled = true;
 			});
 
 			editor.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
+		 * - frame: wysiwyg editable element.
+		 */
 		getRootStack() {
 			return rootStack;
 		},
 
 		/**
-		 * @description Reset the delay time.
-		 * @param {number} time millisecond
+		 * @description Resets the delay time for saving history.
+		 * @param {number} ms The new delay time in milliseconds.
 		 */
-		resetDelayTime(time) {
-			delayTime = time;
+		resetDelayTime(ms) {
+			delayTime = ms;
 		},
 
 		/**
-		 * @description Remove all stacks and remove the timeout function.
+		 * @description Clears the entire history stack and cancels any pending save operations.
 		 */
 		destroy() {
 			if (pushDelay) _w.clearTimeout(pushDelay);

package/src/core/class/char.js

@@ -4,22 +4,33 @@
 
 import CoreInjector from '../../editorInjector/_core';
 import { _w, isEdge } from '../../helper/env';
-import { addClass, removeClass, hasClass } from '../../helper/domUtils';
+import { addClass, removeClass, hasClass } from '../../helper/dom/domUtils';
 
-const Char = function (editor) {
+/**
+ * @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);
-};
+}
 
 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.
+	 * @param {Node|string} html Element node or String.
 	 * @returns {boolean}
 	 */
 	check(html) {
 		const maxCharCount = this.editor.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 ? html.outerHTML : html.textContent);
+			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);
 			if (length > 0 && length + this.getLength() > maxCharCount) {
 				CounterBlink(this.editor.frameContext.get('charWrapper'));
 				return false;
@@ -29,9 +40,10 @@ Char.prototype = {
 	},
 
 	/**
+	 * @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|undefined} content Content to count. (defalut: this.editor.frameContext.get('wysiwyg'))
+	 * - 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'))
 	 * @returns {number}
 	 */
 	getLength(content) {
@@ -42,6 +54,7 @@ Char.prototype = {
 	},
 
 	/**
+	 * @this {CharThis}
 	 * @descriptionGets Get the length in bytes of a string.
 	 * @param {string} text String text
 	 * @returns {number}
@@ -61,7 +74,7 @@ Char.prototype = {
 
 			return cl + cr;
 		} else {
-			cl = new TextEncoder('utf-8').encode(text).length;
+			cl = new TextEncoder().encode(text).length;
 			cr = 0;
 
 			if (encodeURIComponent(text).match(/(%0A|%0D)/gi) !== null) {
@@ -73,19 +86,22 @@ Char.prototype = {
 	},
 
 	/**
+	 * @this {CharThis}
 	 * @description Set the char count to charCounter element textContent.
 	 */
 	display() {
-		if (this.editor.frameContext.has('charCounter')) {
+		const charCounter = this.editor.frameContext.get('charCounter');
+		if (charCounter) {
 			_w.setTimeout(() => {
-				this.editor.frameContext.get('charCounter').textContent = this.getLength();
+				charCounter.textContent = 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.
+	 * - 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.
 	 * @returns {boolean}
@@ -130,9 +146,9 @@ Char.prototype = {
 };
 
 /**
- * @description The character counter blinks.
- * @param charWrapper {Element} this.editor.frameContext.get('charWrapper')
  * @private
+ * @description The character counter blinks.
+ * @param {Element} charWrapper this.editor.frameContext.get('charWrapper')
  */
 function CounterBlink(charWrapper) {
 	if (charWrapper && !hasClass(charWrapper, 'se-blink')) {