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

package/src/helper/dom/domUtils.js

@@ -0,0 +1,533 @@
+import { _d, _w } from '../env';
+import check from './domCheck';
+
+/**
+ * @template {Node} T
+ * @description Clones a node while preserving its type.
+ * @param {T} node - The node to clone.
+ * @param {boolean} [deep=false] - Whether to perform a deep clone.
+ * @returns {T} - The cloned node.
+ */
+function clone(node, deep = false) {
+	return /** @type {T} */ (node.cloneNode(deep));
+}
+
+/**
+ * @template {HTMLElement} T
+ * @description Create Element node
+ * @param {string} elementName Element name
+ * @param {?Object<string, string>=} attributes The attributes of the tag. {style: 'font-size:12px;..', class: 'el_class',..}
+ * @param {?string|Node=} inner A innerHTML string or inner node.
+ * @returns {T}
+ */
+export function createElement(elementName, attributes, inner) {
+	const el = _d.createElement(elementName);
+
+	if (attributes) {
+		for (const key in attributes) {
+			if (attributes[key] !== undefined && attributes[key] !== null) el.setAttribute(key, attributes[key]);
+		}
+	}
+
+	if (inner) {
+		if (typeof inner === 'string') {
+			el.innerHTML = inner;
+		} else if (typeof inner === 'object') {
+			el.appendChild(inner);
+		}
+	}
+
+	return /** @type {T} */ (el);
+}
+
+/**
+ * @description Create text node
+ * @param {string} text text content
+ * @returns {Text}
+ */
+export function createTextNode(text) {
+	return _d.createTextNode(text || '');
+}
+
+/**
+ * @description Get attributes of argument element to string ('class="---" name="---" ')
+ * @param {Node} element Element object
+ * @param {Array<string>|null} exceptAttrs Array of attribute names to exclude from the result
+ * @returns {string}
+ */
+export function getAttributesToString(element, exceptAttrs) {
+	const attrs = /** @type {HTMLElement} */ (element).attributes;
+	if (!attrs) return '';
+
+	let attrString = '';
+	for (let i = 0, len = attrs.length; i < len; i++) {
+		if (exceptAttrs?.includes(attrs[i].name)) continue;
+		attrString += attrs[i].name + '="' + attrs[i].value + '" ';
+	}
+
+	return attrString;
+}
+
+/**
+ * @description Get the items array from the array that matches the condition.
+ * @param {__se__NodeCollection} array Array to get item
+ * @param {?(current: *) => boolean} validation Conditional function
+ * @returns {Array<Node>|null}
+ */
+export function arrayFilter(array, validation) {
+	if (!array || array.length === 0) return null;
+
+	validation =
+		validation ||
+		function () {
+			return true;
+		};
+	const arr = [];
+
+	for (let i = 0, len = array.length, a; i < len; i++) {
+		a = array[i];
+		if (validation(a)) {
+			arr.push(a);
+		}
+	}
+
+	return arr;
+}
+
+/**
+ * @description Get the item from the array that matches the condition.
+ * @param {__se__NodeCollection} array Array to get item
+ * @param {?(current: *) => boolean} validation Conditional function
+ * @returns {Node|null}
+ */
+export function arrayFind(array, validation) {
+	if (!array || array.length === 0) return null;
+
+	validation =
+		validation ||
+		function () {
+			return true;
+		};
+
+	for (let i = 0, len = array.length, a; i < len; i++) {
+		a = array[i];
+		if (validation(a)) {
+			return a;
+		}
+	}
+
+	return null;
+}
+
+/**
+ * @description Check if an array contains an element
+ * @param {__se__NodeCollection} array element array
+ * @param {Node} node The node to check for
+ * @returns {boolean}
+ */
+export function arrayIncludes(array, node) {
+	for (let i = 0; i < array.length; i++) {
+		if (array[i] === node) {
+			return true;
+		}
+	}
+	return false;
+}
+
+/**
+ * @description Get the index of the argument value in the element array
+ * @param {__se__NodeCollection} array element array
+ * @param {Node} node The element to find index
+ * @returns {number}
+ */
+export function getArrayIndex(array, node) {
+	let idx = -1;
+	for (let i = 0, len = array.length; i < len; i++) {
+		if (array[i] === node) {
+			idx = i;
+			break;
+		}
+	}
+
+	return idx;
+}
+
+/**
+ * @description Get the next index of the argument value in the element array
+ * @param {__se__NodeCollection} array element array
+ * @param {Node} item The element to find index
+ * @returns {number}
+ */
+export function nextIndex(array, item) {
+	const idx = getArrayIndex(array, item);
+	if (idx === -1) return -1;
+	return idx + 1;
+}
+
+/**
+ * @description Get the previous index of the argument value in the element array
+ * @param {__se__NodeCollection} array Element array
+ * @param {Node} item The element to find index
+ * @returns {number}
+ */
+export function prevIndex(array, item) {
+	const idx = getArrayIndex(array, item);
+	if (idx === -1) return -1;
+	return idx - 1;
+}
+
+/**
+ * @description Add style and className of copyEl to originEl
+ * @param {Node} originEl Origin element
+ * @param {Node} copyEl Element to copy
+ * @param {?Array<string>=} blacklist Blacklist array(LowerCase)
+ */
+export function copyTagAttributes(originEl, copyEl, blacklist) {
+	const o = /** @type {HTMLElement} */ (originEl);
+	const c = /** @type {HTMLElement} */ (copyEl);
+	if (c.style.cssText) {
+		const copyStyles = c.style;
+		for (let i = 0, len = copyStyles.length; i < len; i++) {
+			o.style[copyStyles[i]] = copyStyles[copyStyles[i]];
+		}
+	}
+
+	const attrs = c.attributes;
+	for (let i = 0, len = attrs.length, name; i < len; i++) {
+		name = attrs[i].name.toLowerCase();
+		if (blacklist?.includes(name) || !attrs[i].value) o.removeAttribute(name);
+		else if (name !== 'style') o.setAttribute(attrs[i].name, attrs[i].value);
+	}
+}
+
+/**
+ * @description Copy and apply attributes of format tag that should be maintained. (style, class) Ignore "__se__format__" class
+ * @param {Node} originEl Origin element
+ * @param {Node} copyEl Element to copy
+ */
+export function copyFormatAttributes(originEl, copyEl) {
+	const c = /** @type {HTMLElement} */ (copyEl.cloneNode(false));
+	c.className = c.className.replace(/(\s|^)__se__format__[^\s]+/g, '');
+	copyTagAttributes(originEl, c);
+}
+
+/**
+ * @description Delete argumenu value element
+ * @param {Node} item Node to be remove
+ */
+export function removeItem(item) {
+	if (!item) return;
+	if ('remove' in item && typeof item.remove === 'function') item.remove();
+	else if (item.parentNode) item.parentNode.removeChild(item);
+}
+
+/**
+ * @description Replace element
+ * @param {Node} element Target element
+ * @param {string|Node} newElement String or element of the new element to apply
+ */
+export function changeElement(element, newElement) {
+	if (!element) return;
+
+	if (typeof newElement === 'string') {
+		if ('outerHTML' in element) {
+			element.outerHTML = newElement;
+		} else {
+			const doc = createElement('DIV');
+			doc.innerHTML = newElement;
+			element.parentNode.replaceChild(doc.firstChild, element);
+		}
+	} else if (newElement?.nodeType === 1) {
+		element.parentNode.replaceChild(newElement, element);
+	}
+}
+
+/**
+ * @description Set the text content value of the argument value element
+ * @param {Node} node Element to replace text content
+ * @param {string} txt Text to be applied
+ */
+export function changeTxt(node, txt) {
+	if (!node || !txt) return;
+	node.textContent = txt;
+}
+
+/**
+ * @description Set style, if all styles are deleted, the style properties are deleted.
+ * @param {Node|Node[]} elements Element to set style
+ * @param {string} styleName Style attribute name (marginLeft, textAlign...)
+ * @param {string|number} value Style value
+ */
+export function setStyle(elements, styleName, value) {
+	elements = Array.isArray(elements) ? elements : [elements];
+
+	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) {
+			e.removeAttribute('style');
+		}
+	}
+}
+
+/**
+ * @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 {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];
+		if (important || !check.isImportantDisabled(button)) button.disabled = disabled;
+		if (important) {
+			if (disabled) {
+				button.setAttribute('data-important-disabled', '');
+			} else {
+				button.removeAttribute('data-important-disabled');
+			}
+		}
+	}
+}
+
+/**
+ * @description Determine whether any of the matched elements are assigned the given class
+ * @param {?Node} element Elements to search class name
+ * @param {string} className Class name to search for
+ * @returns {boolean}
+ */
+export function hasClass(element, className) {
+	if (!element || element.nodeType !== 1) return;
+	const valid = new RegExp(`(\\s|^)${className}(\\s|$)`);
+	return valid.test(/** @type {HTMLElement} */ (element).className);
+}
+
+/**
+ * @description Append the className value of the argument value element
+ * @param {Node|__se__NodeCollection} element Elements to add class name
+ * @param {string} className Class name to be add
+ */
+export function addClass(element, className) {
+	if (!element) return;
+
+	const elements = element instanceof HTMLCollection || element instanceof NodeList || element instanceof Array ? element : [element];
+	const classNames = className.split('|');
+
+	for (let i = 0, len = elements.length; i < len; i++) {
+		const e = elements[i];
+		if (!e || e.nodeType !== 1) continue;
+		for (const c of classNames) {
+			if (c) /** @type {HTMLElement} */ (e).classList.add(c);
+		}
+	}
+}
+
+/**
+ * @description Delete the className value of the argument value element
+ * @param {Node|__se__NodeCollection} element Elements to remove class name
+ * @param {string} className Class name to be remove
+ */
+export function removeClass(element, className) {
+	if (!element) return;
+
+	const elements = element instanceof HTMLCollection || element instanceof NodeList || element instanceof Array ? element : [element];
+	const classNames = className.split('|');
+
+	for (let i = 0, len = elements.length; i < len; i++) {
+		const e = elements[i];
+		if (!e || e.nodeType !== 1) continue;
+		for (const c of classNames) {
+			if (c) /** @type {HTMLElement} */ (e).classList.remove(c);
+		}
+	}
+}
+
+/**
+ * @description Argument value If there is no class name, insert it and delete the class name if it exists
+ * @param {Node} element Element to replace class name
+ * @param {string} className Class name to be change
+ * @returns {boolean|undefined}
+ */
+export function toggleClass(element, className) {
+	if (!element || element.nodeType !== 1) return;
+
+	const el = /** @type {HTMLElement} */ (element);
+
+	let result = false;
+	const valid = new RegExp(`(\\s|^)${className}(\\s|$)`);
+	if (valid.test(el.className)) {
+		el.className = el.className.replace(valid, ' ').trim();
+	} else {
+		el.className += ' ' + className;
+		result = true;
+	}
+
+	if (!el.className.trim()) el.removeAttribute('class');
+
+	return result;
+}
+
+/**
+ * @description Gets the size of the documentElement client size.
+ * @param {Document} doc Document object
+ * @returns {{w: number, h: number}} documentElement.clientWidth, documentElement.clientHeight
+ */
+export function getClientSize(doc = _d) {
+	return {
+		w: doc.documentElement.clientWidth,
+		h: doc.documentElement.clientHeight
+	};
+}
+
+/**
+ * @description Gets the size of the window visualViewport size
+ * @returns {{top: number, left: number, scale: number}}
+ */
+export function getViewportSize() {
+	if ('visualViewport' in _w) {
+		return {
+			top: _w.visualViewport.pageTop,
+			left: _w.visualViewport.pageLeft,
+			scale: _w.visualViewport.scale
+		};
+	}
+
+	return {
+		top: 0,
+		left: 0,
+		scale: 1
+	};
+}
+
+/**
+ * @description Copies the "wwTarget" element and returns it with inline all styles applied.
+ * @param {Node} wwTarget Target element to copy(.sun-editor.sun-editor-editable)
+ * @param {boolean} includeWW Include the "wwTarget" element in the copy
+ * @param {Array<string>} styles Style list - kamel case
+ * @returns
+ */
+export function applyInlineStylesAll(wwTarget, includeWW, styles) {
+	if (!wwTarget) {
+		console.warn('"parentTarget" is not exist');
+		return null;
+	}
+
+	let ww = /** @type {HTMLElement} */ (wwTarget);
+	const tempTarget = _d.createElement('DIV');
+	tempTarget.style.display = 'none';
+
+	if (/body/i.test(ww.nodeName)) {
+		const wwDiv = _d.createElement('DIV');
+		const attrs = ww.attributes;
+		for (let i = 0, len = attrs.length; i < len; i++) {
+			wwDiv.setAttribute(attrs[i].name, attrs[i].value);
+		}
+		wwDiv.innerHTML = ww.innerHTML;
+		ww = wwDiv;
+	} else {
+		ww = /** @type {HTMLElement} */ (ww.cloneNode(true));
+	}
+
+	tempTarget.appendChild(ww);
+	_d.body.appendChild(tempTarget);
+
+	/** @type {HTMLElement[]} */
+	const allElements = Array.from(ww.querySelectorAll('*'));
+	const elements = includeWW ? [ww].concat(allElements) : allElements;
+	for (let i = 0, el; (el = elements[i]); i++) {
+		if (el.nodeType !== 1) continue;
+		const computedStyle = _w.getComputedStyle(el);
+		const els = el.style;
+		for (const props of styles) {
+			els.setProperty(props, computedStyle.getPropertyValue(props) || '');
+		}
+	}
+
+	_d.body.removeChild(tempTarget);
+
+	return ww;
+}
+
+/**
+ * @description Wait for media elements to load
+ * @param {Node} target Target element
+ * @param {number} timeout Timeout milliseconds
+ * @returns {Promise<void>}
+ */
+function waitForMediaLoad(target, timeout = 5000) {
+	const doc = /** @type {HTMLElement|Document} */ (target || _d);
+	return new Promise((resolveAll) => {
+		const selectors = ['img', 'video', 'audio', 'iframe'];
+		const mediaElements = selectors.flatMap((selector) => Array.from(doc.querySelectorAll(selector)));
+
+		if (mediaElements.length === 0) {
+			resolveAll();
+			return;
+		}
+
+		const mediaPromises = mediaElements.map((element) => {
+			// image
+			if (element instanceof HTMLImageElement) {
+				if (element.complete) {
+					return Promise.resolve();
+				}
+			}
+			// video, audio
+			else if (element instanceof HTMLMediaElement) {
+				if (element.readyState >= 2) {
+					return Promise.resolve();
+				}
+			}
+			// iframe
+			else if (element instanceof HTMLIFrameElement) {
+				try {
+					if (element.contentDocument?.readyState === 'complete') {
+						return Promise.resolve();
+					}
+				} catch (e) {
+					console.warn(['[SUNEDITOR] Iframe load error', e]);
+				}
+			}
+
+			// load event
+			return new Promise((resolve) => {
+				element.addEventListener('load', resolve, { once: true });
+				element.addEventListener('error', resolve, { once: true });
+			});
+		});
+
+		Promise.race([Promise.all(mediaPromises), new Promise((resolve) => setTimeout(resolve, timeout))]).then(() => {
+			resolveAll();
+		});
+	});
+}
+
+const utils = {
+	clone,
+	createElement,
+	createTextNode,
+	getAttributesToString,
+	arrayFilter,
+	arrayFind,
+	arrayIncludes,
+	getArrayIndex,
+	nextIndex,
+	prevIndex,
+	copyTagAttributes,
+	copyFormatAttributes,
+	removeItem,
+	changeElement,
+	changeTxt,
+	setStyle,
+	setDisabled,
+	hasClass,
+	addClass,
+	removeClass,
+	toggleClass,
+	getClientSize,
+	getViewportSize,
+	applyInlineStylesAll,
+	waitForMediaLoad
+};
+
+export default utils;

package/src/helper/dom/index.js

@@ -0,0 +1,12 @@
+// index.js
+import query from './domQuery';
+import check from './domCheck';
+import utils from './domUtils';
+
+const dom = {
+	query,
+	check,
+	utils
+};
+
+export default dom;

package/src/helper/env.js

@@ -1,15 +1,26 @@
+/** @type {Window} */
 export const _w = window;
+/** @type {Document} */
 export const _d = document;
 
+/**
+ * @description No event symbol
+ * @type {Symbol}
+ */
 export const NO_EVENT = Symbol('noEventHandler');
+
+/**
+ * @description On over component symbol
+ * @type {Symbol}
+ */
 export const ON_OVER_COMPONENT = Symbol('onOverComponent');
 
 const userAgent = _w.navigator.userAgent.toLowerCase();
 
 /**
  * @description Object.values
- * @param {Object.<any>} obj Object parameter.
- * @returns {Array.<any>}
+ * @param {Object<*, *>} obj Object parameter.
+ * @returns {Array<*>}
  */
 export function getValues(obj) {
 	return !obj
@@ -21,7 +32,7 @@ export function getValues(obj) {
 
 /**
  * @description Convert the CamelCase To the KebabCase.
- * @param {string|Array.<string>} param [Camel string]
+ * @param {string|Array<string>} param [Camel string]
  */
 export function camelToKebabCase(param) {
 	if (typeof param === 'string') {
@@ -34,9 +45,14 @@ export function camelToKebabCase(param) {
 }
 
 /**
- * @description Convert the KebabCase To the CamelCase.
- * @param {String|Array} param [KebabCase string]
- * @returns {String|Array}
+ * @overload
+ * @param {string} param - Kebab-case string.
+ * @returns {string} CamelCase string.
+ */
+/**
+ * @overload
+ * @param {Array<string>} param - Array of Kebab-case strings.
+ * @returns {Array<string>} Array of CamelCase strings.
  */
 export function kebabToCamelCase(param) {
 	if (typeof param === 'string') {
@@ -50,7 +66,7 @@ export function kebabToCamelCase(param) {
 
 /**
  * @description Gets XMLHttpRequest object
- * @returns {XMLHttpRequest|ActiveXObject}
+ * @returns {XMLHttpRequest}
  */
 export function getXMLHttpRequest() {
 	return new XMLHttpRequest();
@@ -86,10 +102,9 @@ export function getPageStyle(doc) {
 /**
  * @deprecated
  * @description Get the the tag path of the arguments value
- * If not found, return the first found value
- * @param {Array.<string>} nameArray File name array
+ * @param {Array<string>} nameArray File name array
  * @param {string} extension js, css
- * @returns {string}
+ * @returns {string} If not found, return the first found value
  */
 export function getIncludePath(nameArray, extension) {
 	let path = '';
@@ -122,7 +137,7 @@ export function getIncludePath(nameArray, extension) {
 	if (path === '') path = pathList.length > 0 ? pathList[0][src] : '';
 
 	if (!path.includes(':/') && '//' !== path.slice(0, 2)) {
-		path = 0 === path.includes('/') ? location.href.match(/^.*?:\/\/[^/]*/)[0] + path : location.href.match(/^[^?]*\/(?:)/)[0] + path;
+		path = false === path.includes('/') ? location.href.match(/^.*?:\/\/[^/]*/)[0] + path : location.href.match(/^[^?]*\/(?:)/)[0] + path;
 	}
 
 	if (!path) {
@@ -146,15 +161,15 @@ export const isResizeObserverSupported = (() => {
  * @returns {boolean} Whether User Agent is Edge or not.
  */
 export const isEdge = (() => {
-	return navigator.appVersion.includes('Edge');
+	return /Edg/.test(navigator.userAgent);
 })();
 
 /**
- * @description Check if platform is OSX or IOS
+ * @description Check if User Agent is OSX or IOS
  * @type {boolean}
  */
 export const isOSX_IOS = (() => {
-	return /(Mac|iPhone|iPod|iPad)/.test(navigator.platform);
+	return /(Mac|iPhone|iPod|iPad)/.test(navigator.userAgent);
 })();
 
 /**
@@ -178,7 +193,7 @@ export const isGecko = (() => {
  * @type {boolean}
  */
 export const isChromium = (() => {
-	return !!window.chrome;
+	return !!(/** @type {Window & { chrome: any }} */ (_w).chrome);
 })();
 
 /**
@@ -191,11 +206,11 @@ export const isSafari = (() => {
 
 /**
  * @description Check if User Agent is Mobile device.
- * when the device is touchable, it is judged as a mobile device.
+ * - when the device is touchable, it is judged as a mobile device.
  * @type {boolean}
  */
 export const isMobile = (() => {
-	return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent) || 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
+	return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent) || (navigator.maxTouchPoints > 0 && 'ontouchstart' in _w);
 })();
 
 /**
@@ -218,9 +233,15 @@ export const cmdIcon = isOSX_IOS ? '⌘' : 'CTRL';
  */
 export const shiftIcon = isOSX_IOS ? '⇧' : '+SHIFT';
 
+/**
+ * @description Device pixel ratio
+ * @type {number}
+ */
+export const DPI = _w.devicePixelRatio;
+
 /** --- editor env --- */
-export const _allowedEmptyNodeList = '.se-component, pre, blockquote, hr, li, table, img, iframe, video, audio, canvas, details';
 export const KATEX_WEBSITE = 'https://katex.org/docs/supported.html';
+export const MATHJAX_WEBSITE = 'https://www.mathjax.org/';
 
 const env = {
 	_w,
@@ -244,7 +265,9 @@ const env = {
 	isMobile,
 	cmdIcon,
 	shiftIcon,
-	_allowedEmptyNodeList
+	DPI,
+	KATEX_WEBSITE,
+	MATHJAX_WEBSITE
 };
 
 export default env;