suneditor 3.0.0-beta.3 → 3.0.0-beta.30

package/src/helper/dom/domQuery.js

@@ -2,6 +2,7 @@
  * @fileoverview Implements Helper for querying the DOM.
  */
 
+import { _w } from '../env';
 import { zeroWidthRegExp } from '../unicode';
 import domUtils from './domUtils';
 import domCheck from './domCheck';
@@ -96,38 +97,72 @@ export function getNodeFromPath(offsets, parentNode) {
 	return /** @type {T} */ (current);
 }
 
+/**
+ * @template {HTMLElement} T
+ * @description Get all "child node" of the argument value element
+ * @param {Node} element element to get child node
+ * @param {?(current: *) => boolean} validation Conditional function
+ * @returns {T|null}
+ */
+export function getChildNode(element, validation) {
+	let child = null;
+	if (!element) return child;
+
+	const el = /** @type {Element} */ (element);
+	if (!el.children || el.children.length === 0) return child;
+
+	validation ||= () => true;
+
+	(function recursionFunc(current) {
+		if (el !== current && validation(current)) {
+			child = current;
+			return true;
+		}
+
+		if (current.children) {
+			for (let i = 0, len = current.children.length; i < len; i++) {
+				recursionFunc(current.children[i]);
+			}
+		}
+	})(el);
+
+	return /** @type {T} */ (child);
+}
+
 /**
  * @template {HTMLElement} T
  * @description Get all "children" of the argument value element (Without text nodes)
  * @param {Node} element element to get child node
  * @param {?(current: *) => boolean} validation Conditional function
+ * @param {?number} depth Number of child levels to depth.
  * @returns {Array<T>}
  */
-export function getListChildren(element, validation) {
+export function getListChildren(element, validation, depth) {
 	/** @type {Array<T>} */
 	const children = [];
-	if (!element) return children;
+	depth ??= Infinity;
+	if (!element || depth <= 0) return /** @type {Array<T>} */ (children);
 
 	const el = /** @type {Element} */ (element);
 	if (!el.children || el.children.length === 0) return children;
 
-	validation =
-		validation ||
-		function () {
-			return true;
-		};
+	validation ||= () => true;
 
-	(function recursionFunc(current) {
-		if (el !== current && validation(current)) {
+	(function recursionFunc(current, level) {
+		if (level > depth) return;
+
+		if (level > 0 && el !== current && validation(current)) {
 			children.push(/** @type {T} */ (current));
 		}
 
+		if (level === depth) return;
+
 		if (current.children) {
 			for (let i = 0, len = current.children.length; i < len; i++) {
-				recursionFunc(current.children[i]);
+				recursionFunc(current.children[i], level + 1);
 			}
 		}
-	})(el);
+	})(el, 0);
 
 	return /** @type {Array<T>} */ (children);
 }
@@ -137,27 +172,30 @@ export function getListChildren(element, validation) {
  * @description Get all "childNodes" of the argument value element (Include text nodes)
  * @param {Node} element element to get child node
  * @param {?(current: *) => boolean} validation Conditional function
+ * @param {?number} depth Number of child levels to depth.
  * @returns {Array<T>}
  */
-export function getListChildNodes(element, validation) {
+export function getListChildNodes(element, validation, depth) {
 	const children = [];
-	if (!element || element.childNodes.length === 0) return children;
+	depth ??= Infinity;
+	if (!element || depth <= 0 || element.childNodes.length === 0) return /** @type {Array<T>} */ (children);
 
-	validation =
-		validation ||
-		function () {
-			return true;
-		};
+	validation ||= () => true;
 
-	(function recursionFunc(current) {
-		if (element !== current && validation(current)) {
+	(function recursionFunc(current, level) {
+		if (level > depth) return;
+
+		if (level > 0 && validation(current)) {
 			children.push(current);
 		}
 
-		for (let i = 0, len = current.childNodes.length; i < len; i++) {
-			recursionFunc(current.childNodes[i]);
+		if (level === depth) return;
+
+		const nodes = current.childNodes;
+		for (let i = 0, len = nodes.length; i < len; i++) {
+			recursionFunc(nodes[i], level + 1);
 		}
-	})(element);
+	})(element, 0);
 
 	return /** @type {Array<T>} */ (children);
 }
@@ -214,7 +252,7 @@ export function compareElements(a, b) {
 		bNode = bNode.parentElement;
 	}
 
-	if (!aNode || !bNode)
+	if (!aNode?.parentNode || !bNode?.parentNode)
 		return {
 			ancestor: null,
 			a: a,
@@ -274,7 +312,7 @@ export function getParentElement(element, query, depth) {
 		valid = (el) => regExp.test(el[attr]);
 	}
 
-	if (!depth) depth = Infinity;
+	depth ||= Infinity;
 	let index = 0;
 	while (element && !valid(element)) {
 		if (index >= depth || domCheck.isWysiwygFrame(element)) {
@@ -328,7 +366,7 @@ export function getParentElements(element, query, depth) {
 	}
 
 	const elementList = [];
-	if (!depth) depth = Infinity;
+	depth ||= Infinity;
 	let index = 0;
 	while (index <= depth && element && !domCheck.isWysiwygFrame(element)) {
 		if (valid(element)) {
@@ -409,7 +447,7 @@ export function getEdgeChild(node, query, last) {
 		};
 	}
 
-	const childList = getListChildNodes(node, (current) => valid(current));
+	const childList = getListChildNodes(node, (current) => valid(current), null);
 
 	return /** @type {T} */ (childList[last ? childList.length - 1 : 0]);
 }
@@ -425,7 +463,7 @@ export function getEdgeChild(node, query, last) {
  */
 export function getEdgeChildNodes(first, last) {
 	if (!first) return;
-	if (!last) last = first;
+	last ||= first;
 
 	while (first && first.nodeType === 1 && first.childNodes.length > 0 && !domCheck.isBreak(first)) first = first.firstChild;
 	while (last && last.nodeType === 1 && last.childNodes.length > 0 && !domCheck.isBreak(last)) last = last.lastChild;
@@ -500,7 +538,7 @@ export function getNextDeepestNode(node, ceiling) {
  */
 export function findTextIndexOnLine(line, offsetContainer, offset, validate) {
 	if (!line) return 0;
-	if (!validate) validate = () => true;
+	validate ||= () => true;
 
 	let index = 0;
 	let found = false;
@@ -583,7 +621,7 @@ export function findVisualLastCell(cells) {
 		const colSpan = cell.colSpan || 1;
 
 		// 현재 행에서 visual column index 찾기
-		if (!occupied[rowIndex]) occupied[rowIndex] = [];
+		occupied[rowIndex] ||= [];
 
 		let colIndex = 0;
 		const rowOcc = occupied[rowIndex];
@@ -595,7 +633,7 @@ export function findVisualLastCell(cells) {
 
 		for (let r = 1; r < rowSpan; r++) {
 			const nextRow = rowIndex + r;
-			if (!occupied[nextRow]) occupied[nextRow] = [];
+			occupied[nextRow] ||= [];
 			for (let i = 0; i < colSpan; i++) {
 				occupied[nextRow][colIndex + i] = true;
 			}
@@ -616,26 +654,33 @@ export function findVisualLastCell(cells) {
 }
 
 /**
- * @description Get nearest scrollable parent
- * @param {Node} element Element
- * @returns {HTMLElement|null}
+ * @description Finds and returns parent containers that are scrollable.
+ * @param {HTMLElement} element - Element to start with
+ * @returns {HTMLElement[]} - Array (in descending order)
  */
-export function getScrollParent(element) {
-	if (!element || /^(body|html)$/i.test(element.nodeName)) {
-		return null;
-	}
+export function getScrollParents(element) {
+	const scrollable = [];
+	let parent = element?.parentElement;
 
-	const el = /** @type {HTMLElement} */ (element);
-	if (el.scrollHeight > el.clientHeight) {
-		return el;
-	} else {
-		return getScrollParent(el.parentNode);
+	while (parent && !/^(body|html)$/i.test(parent.nodeName)) {
+		const style = _w.getComputedStyle(parent);
+		const { overflow, overflowX, overflowY } = style;
+
+		const canScroll = [overflow, overflowX, overflowY].some((prop) => ['auto', 'scroll', 'overlay'].includes(prop));
+
+		if (canScroll) {
+			scrollable.push(parent);
+		}
+
+		parent = parent.parentElement;
 	}
+
+	return scrollable;
 }
 
 /**
  * @description Get the argument iframe's document object if use the "iframe" or "fullPage" options
- * @param {HTMLIFrameElement} iframe Iframe element (this.editor.frameContext.get('wysiwygFrame'))
+ * @param {HTMLIFrameElement} iframe Iframe element (this.frameContext.get('wysiwygFrame'))
  * @returns {Document}
  */
 export function getIframeDocument(iframe) {
@@ -646,6 +691,7 @@ const query = {
 	getPositionIndex,
 	getNodePath,
 	getNodeFromPath,
+	getChildNode,
 	getListChildren,
 	getListChildNodes,
 	getNodeDepth,
@@ -662,7 +708,7 @@ const query = {
 	findTextIndexOnLine,
 	findTabEndIndex,
 	findVisualLastCell,
-	getScrollParent,
+	getScrollParents,
 	getIframeDocument
 };
 

package/src/helper/dom/domUtils.js

@@ -1,6 +1,52 @@
 import { _d, _w } from '../env';
 import check from './domCheck';
 
+// ----- iframe-safe type check [START] -----
+/**
+ * @private
+ * @description iframe-safe : Node type [HTMLCollection, NodeList, Array] check.
+ * @param {*} element
+ * @returns {element is HTMLCollection|NodeList|Array}
+ */
+function IsElementArray(element) {
+	const type = Object.prototype.toString.call(element);
+	return type === '[object HTMLCollection]' || type === '[object NodeList]' || type === '[object Array]';
+}
+
+/**
+ * @private
+ * @description iframe-safe: check if element is an HTMLImageElement
+ * @param {*} element
+ * @returns {element is HTMLImageElement}
+ */
+function IsHTMLImageElement(element) {
+	const type = Object.prototype.toString.call(element);
+	return type === '[object HTMLImageElement]';
+}
+
+/**
+ * @private
+ * @description iframe-safe: check if element is an HTMLMediaElement (video or audio)
+ * @param {*} element
+ * @returns {element is HTMLMediaElement}
+ */
+function IsHTMLMediaElement(element) {
+	const type = Object.prototype.toString.call(element);
+	return type === '[object HTMLVideoElement]' || type === '[object HTMLAudioElement]';
+}
+
+/**
+ * @private
+ * @description iframe-safe: check if element is an HTMLIFrameElement
+ * @param {*} element
+ * @returns {element is HTMLIFrameElement}
+ */
+function IsHTMLIFrameElement(element) {
+	const type = Object.prototype.toString.call(element);
+	return type === '[object HTMLIFrameElement]';
+}
+// ----- iframe-safe type check [END] -----
+
 /**
  * @template {Node} T
  * @description Clones a node while preserving its type.
@@ -77,11 +123,8 @@ export function getAttributesToString(element, exceptAttrs) {
 export function arrayFilter(array, validation) {
 	if (!array || array.length === 0) return null;
 
-	validation =
-		validation ||
-		function () {
-			return true;
-		};
+	validation ||= () => true;
+
 	const arr = [];
 
 	for (let i = 0, len = array.length, a; i < len; i++) {
@@ -103,11 +146,7 @@ export function arrayFilter(array, validation) {
 export function arrayFind(array, validation) {
 	if (!array || array.length === 0) return null;
 
-	validation =
-		validation ||
-		function () {
-			return true;
-		};
+	validation ||= () => true;
 
 	for (let i = 0, len = array.length, a; i < len; i++) {
 		a = array[i];
@@ -185,7 +224,7 @@ export function prevIndex(array, item) {
 export function copyTagAttributes(originEl, copyEl, blacklist) {
 	const o = /** @type {HTMLElement} */ (originEl);
 	const c = /** @type {HTMLElement} */ (copyEl);
-	if (c.style.cssText) {
+	if (c.style.length > 0) {
 		const copyStyles = c.style;
 		for (let i = 0, len = copyStyles.length; i < len; i++) {
 			o.style[copyStyles[i]] = copyStyles[copyStyles[i]];
@@ -264,21 +303,35 @@ export function setStyle(elements, styleName, value) {
 	for (let i = 0, len = elements.length, e; i < len; i++) {
 		e = /** @type {HTMLElement} */ (elements[i]);
 		e.style[styleName] = value;
-		if (!value && !e.style.cssText) {
+		if (e.style.length === 0) {
 			e.removeAttribute('style');
 		}
 	}
 }
 
+/**
+ * @description Gets the style value of the element. If the elements is an array, the style of the first element is returned.
+ * @param {Node} element Element to get style from.
+ * @param {string} styleName Style attribute name (e.g., 'marginLeft', 'textAlign').
+ * @returns {string | undefined} The value of the style attribute, or undefined if the element does not exist.
+ */
+export function getStyle(element, styleName) {
+	if (element?.nodeType !== 1) {
+		return undefined;
+	}
+
+	return /** @type {HTMLElement} */ (element).style[styleName];
+}
+
 /**
  * @description In the predefined code view mode, the buttons except the executable button are changed to the 'disabled' state.
- * @param {Array<HTMLButtonElement|HTMLInputElement>} buttonList (Button | Input) Element array
+ * @param {__se__NodeCollection} buttonList (Button | Input) Element array
  * @param {boolean} disabled Disabled value
  * @param {boolean} [important=false] If priveleged mode should be used (Necessary to switch importantDisabled buttons)
  */
 export function setDisabled(buttonList, disabled, important) {
 	for (let i = 0, len = buttonList.length; i < len; i++) {
-		const button = buttonList[i];
+		const button = /** @type {HTMLButtonElement|HTMLInputElement} */ (buttonList[i]);
 		if (important || !check.isImportantDisabled(button)) button.disabled = disabled;
 		if (important) {
 			if (disabled) {
@@ -310,7 +363,7 @@ export function hasClass(element, className) {
 export function addClass(element, className) {
 	if (!element) return;
 
-	const elements = element instanceof HTMLCollection || element instanceof NodeList || element instanceof Array ? element : [element];
+	const elements = IsElementArray(element) ? element : [element];
 	const classNames = className.split('|');
 
 	for (let i = 0, len = elements.length; i < len; i++) {
@@ -330,7 +383,7 @@ export function addClass(element, className) {
 export function removeClass(element, className) {
 	if (!element) return;
 
-	const elements = element instanceof HTMLCollection || element instanceof NodeList || element instanceof Array ? element : [element];
+	const elements = IsElementArray(element) ? element : [element];
 	const classNames = className.split('|');
 
 	for (let i = 0, len = elements.length; i < len; i++) {
@@ -480,19 +533,19 @@ export function waitForMediaLoad(target, timeout = 5000) {
 
 		const mediaPromises = mediaElements.map((element) => {
 			// image
-			if (element instanceof HTMLImageElement) {
+			if (IsHTMLImageElement(element)) {
 				if (element.complete) {
 					return Promise.resolve();
 				}
 			}
 			// video, audio
-			else if (element instanceof HTMLMediaElement) {
+			else if (IsHTMLMediaElement(element)) {
 				if (element.readyState >= 2) {
 					return Promise.resolve();
 				}
 			}
 			// iframe
-			else if (element instanceof HTMLIFrameElement) {
+			else if (IsHTMLIFrameElement(element)) {
 				try {
 					if (element.contentDocument?.readyState === 'complete') {
 						return Promise.resolve();
@@ -515,6 +568,24 @@ export function waitForMediaLoad(target, timeout = 5000) {
 	});
 }
 
+/**
+ * @description Gets a CSS variable on the root element of the editor.
+ * @param {string} name - The CSS variable name (e.g. `--se-color-primary`)
+ * @return {string} The value of the CSS variable
+ */
+export function getRootCssVar(name) {
+	return _d.documentElement.style.getPropertyValue(name);
+}
+
+/**
+ * @description Sets a CSS variable on the root element of the editor.
+ * @param {string} name - The CSS variable name (e.g. `--se-color-primary`)
+ * @param {string} value - The CSS variable value
+ */
+export function setRootCssVar(name, value) {
+	_d.documentElement.style.setProperty(name, value);
+}
+
 /**
  * @description Create tooltip HTML
  * @param {string} text Tooltip text
@@ -541,6 +612,7 @@ const utils = {
 	changeElement,
 	changeTxt,
 	setStyle,
+	getStyle,
 	setDisabled,
 	hasClass,
 	addClass,
@@ -551,6 +623,8 @@ const utils = {
 	getViewportSize,
 	applyInlineStylesAll,
 	waitForMediaLoad,
+	getRootCssVar,
+	setRootCssVar,
 	createTooltipInner
 };
 

package/src/helper/dom/index.js

@@ -9,4 +9,8 @@ const dom = {
 	utils
 };
 
+export const domQuery = query;
+export const domCheck = check;
+export const domUtils = utils;
+
 export default dom;

package/src/helper/env.js

@@ -40,13 +40,11 @@ export function getPageStyle(doc) {
 	const sheets = (doc || _d).styleSheets;
 
 	for (let i = 0, len = sheets.length, rules; i < len; i++) {
-		/* eslint-disable @typescript-eslint/no-unused-vars */
 		try {
 			rules = sheets[i].cssRules;
-		} catch (e) {
+		} catch {
 			continue;
 		}
-		/* eslint-disable @typescript-eslint/no-unused-vars */
 
 		if (rules) {
 			for (let c = 0, cLen = rules.length; c < cLen; c++) {
@@ -120,7 +118,6 @@ export const isResizeObserverSupported = (() => {
  * @returns {boolean} Whether support navigator.clipboard or not.
  */
 export const isClipboardSupported = (() => {
-	/* eslint-disable-next-line compat/compat */
 	return typeof navigator.clipboard?.write === 'function';
 })();
 
@@ -174,12 +171,18 @@ export const isSafari = (() => {
 
 /**
  * @description Check if User Agent is Mobile device.
- * - when the device is touchable, it is judged as a mobile device.
  * @type {boolean}
  */
 export const isMobile = (() => {
-	/* eslint-disable-next-line compat/compat */
-	return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent) || (navigator.maxTouchPoints > 0 && 'ontouchstart' in _w);
+	return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent);
+})();
+
+/**
+ * @description Check if the device is touchable.
+ * @type {boolean}
+ */
+export const isTouchDevice = (() => {
+	return navigator.maxTouchPoints > 0 && 'ontouchstart' in _w;
 })();
 
 /**
@@ -230,6 +233,7 @@ const env = {
 	isOSX_IOS,
 	isAndroid,
 	isMobile,
+	isTouchDevice,
 	cmdIcon,
 	shiftIcon,
 	DPI,

package/src/helper/keyCodeMap.js

@@ -48,12 +48,13 @@ export function isAlt(e) {
 }
 
 /**
- * @description event.isComposing check
- * @param {KeyboardEvent} e Event object
+ * @description Check if the event is related to IME composition (in-progress or commit).
+ * @param {KeyboardEvent|InputEvent} e Event object
  * @returns {boolean}
  */
 export function isComposing(e) {
-	return e.isComposing || e.keyCode === 229;
+	// @ts-ignore
+	return e.isComposing || e.key === 'Process' || e.keyCode === 229;
 }
 
 /**

package/src/langs/ckb.js

@@ -9,7 +9,7 @@
 						throw new Error('SUNEDITOR_LANG a window with a document');
 					}
 					return factory(w);
-			  };
+				};
 	} else {
 		factory(global);
 	}

package/src/langs/cs.js

@@ -9,7 +9,7 @@
 						throw new Error('SUNEDITOR_LANG a window with a document');
 					}
 					return factory(w);
-			  };
+				};
 	} else {
 		factory(global);
 	}

package/src/langs/da.js

@@ -9,7 +9,7 @@
 						throw new Error('SUNEDITOR_LANG a window with a document');
 					}
 					return factory(w);
-			  };
+				};
 	} else {
 		factory(global);
 	}

package/src/langs/de.js

@@ -9,7 +9,7 @@
 						throw new Error('SUNEDITOR_LANG a window with a document');
 					}
 					return factory(w);
-			  };
+				};
 	} else {
 		factory(global);
 	}

package/src/langs/en.js

@@ -8,7 +8,7 @@
 						throw new Error('SUNEDITOR_LANG a window with a document');
 					}
 					return factory(w);
-			  };
+				};
 	} else {
 		factory(global);
 	}

package/src/langs/es.js

@@ -9,7 +9,7 @@
 						throw new Error('SUNEDITOR_LANG a window with a document');
 					}
 					return factory(w);
-			  };
+				};
 	} else {
 		factory(global);
 	}

package/src/langs/fa.js

@@ -9,7 +9,7 @@
 						throw new Error('SUNEDITOR_LANG a window with a document');
 					}
 					return factory(w);
-			  };
+				};
 	} else {
 		factory(global);
 	}

package/src/langs/fr.js

@@ -9,7 +9,7 @@
 						throw new Error('SUNEDITOR_LANG a window with a document');
 					}
 					return factory(w);
-			  };
+				};
 	} else {
 		factory(global);
 	}

package/src/langs/he.js

@@ -9,7 +9,7 @@
 						throw new Error('SUNEDITOR_LANG a window with a document');
 					}
 					return factory(w);
-			  };
+				};
 	} else {
 		factory(global);
 	}

package/src/langs/hu.js

@@ -9,7 +9,7 @@
 						throw new Error('SUNEDITOR_LANG requires a window with a document');
 					}
 					return factory(w);
-			  };
+				};
 	} else {
 		factory(global);
 	}

package/src/langs/it.js

@@ -9,7 +9,7 @@
 						throw new Error('SUNEDITOR_LANG una finestra con un documento');
 					}
 					return factory(w);
-			  };
+				};
 	} else {
 		factory(global);
 	}

package/src/langs/ja.js

@@ -8,7 +8,7 @@
 						throw new Error('SUNEDITOR_LANG a window with a document');
 					}
 					return factory(w);
-			  };
+				};
 	} else {
 		factory(global);
 	}

package/src/langs/km.js

@@ -8,7 +8,7 @@
 						throw new Error('SUNEDITOR_LANG a window with a document');
 					}
 					return factory(w);
-			  };
+				};
 	} else {
 		factory(global);
 	}