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

package/src/editorInjector/_core.js

@@ -1,28 +1,92 @@
 /**
- * @description Add default properties to the editor core;
- * @param {any} editor Editor's core
- * @private
+ * @description Add default properties to the editor core object.
+ * @param {__se__EditorCore} editor - The root editor instance
  */
-function CoreInjector(editor) {
-	// editor root
+export default function CoreInjector(editor) {
+	/**
+	 * @description The root editor instance.
+	 * @type {__se__EditorCore}
+	 */
 	this.editor = editor;
+
 	// base
+	/**
+	 * @description The event manager instance.
+	 * @type {import('../core/base/eventManager').default}
+	 */
 	this.eventManager = editor.eventManager;
+	/**
+	 * @description The history manager instance.
+	 * @type {__se__EditorCore['history']}
+	 */
 	this.history = editor.history;
+	/**
+	 * @description The events instance.
+	 * @type {__se__EditorCore['events']}
+	 */
 	this.events = editor.events;
+	/**
+	 * @description The function to trigger an event.
+	 * @type {__se__EditorCore['triggerEvent']}
+	 */
 	this.triggerEvent = editor.triggerEvent;
+	/**
+	 * @description The wrapper element for carrying elements.
+	 * @type {__se__EditorCore['carrierWrapper']}
+	 */
 	this.carrierWrapper = editor.carrierWrapper;
+
 	// environment variables
+	/**
+	 * @description The plugins used by the editor.
+	 * @type {__se__EditorCore['plugins']}
+	 */
 	this.plugins = editor.plugins;
+	/**
+	 * @description The status of the editor.
+	 * @type {__se__EditorStatus}
+	 */
 	this.status = editor.status;
+	/**
+	 * @description The editor's context map.
+	 * @type {__se__EditorCore['context']}
+	 */
 	this.context = editor.context;
+	/**
+	 * @description The editor's options map.
+	 * @type {__se__EditorCore['options']}
+	 */
 	this.options = editor.options;
+	/**
+	 * @description The editor's icons.
+	 * @type {__se__EditorCore['icons']}
+	 */
 	this.icons = editor.icons;
+	/**
+	 * @description The language settings.
+	 * @type {__se__EditorCore['lang']}
+	 */
 	this.lang = editor.lang;
+	/**
+	 * @description editor.frameRoots map.
+	 * @type {__se__EditorCore['frameRoots']}
+	 */
+	this.frameRoots = editor.frameRoots;
+
 	// window, document, shadowRoot
+	/**
+	 * @description The window object.
+	 * @type {Window}
+	 */
 	this._w = editor._w;
+	/**
+	 * @description The document object.
+	 * @type {Document}
+	 */
 	this._d = editor._d;
+	/**
+	 * @description The shadow root object (if any).
+	 * @type {__se__EditorCore['_shadowRoot']}
+	 */
 	this._shadowRoot = editor._shadowRoot;
 }
-
-export default CoreInjector;

package/src/editorInjector/index.js

@@ -3,9 +3,71 @@ import ClassInjector from './_classes';
 
 /**
  * @description Initializes and adds inner classes and default properties of the editor.
- * @param {any} editor Editor object
+ * @param {__se__EditorCore} editor - The root editor instance
  */
 function EditorInjector(editor) {
+	// CoreInjector props
+	/** @type {__se__EditorCore} */
+	this.editor;
+	/** @type {import('./_core').default['eventManager']} */
+	this.eventManager;
+	/** @type {import('./_core').default['history']} */
+	this.history;
+	/** @type {import('./_core').default['events']} */
+	this.events;
+	/** @type {import('./_core').default['triggerEvent']} */
+	this.triggerEvent;
+	/** @type {import('./_core').default['carrierWrapper']} */
+	this.carrierWrapper;
+	/** @type {import('./_core').default['plugins']} */
+	this.plugins;
+	/** @type {import('./_core').default['status']} */
+	this.status;
+	/** @type {import('./_core').default['context']} */
+	this.context;
+	/** @type {import('./_core').default['options']} */
+	this.options;
+	/** @type {import('./_core').default['icons']} */
+	this.icons;
+	/** @type {import('./_core').default['lang']} */
+	this.lang;
+	/** @type {import('./_core').default['frameRoots']} */
+	this.frameRoots;
+	/** @type {import('./_core').default['_w']} */
+	this._w;
+	/** @type {import('./_core').default['_d']} */
+	this._d;
+	/** @type {import('./_core').default['_shadowRoot']} */
+	this._shadowRoot;
+
+	// ClassInjector props
+	/** @type {import('./_classes').default['toolbar']} */
+	this.toolbar;
+	/** @type {import('./_classes').default['subToolbar']} */
+	this.subToolbar;
+	/** @type {import('./_classes').default['char']} */
+	this.char;
+	/** @type {import('./_classes').default['component']} */
+	this.component;
+	/** @type {import('./_classes').default['format']} */
+	this.format;
+	/** @type {import('./_classes').default['html']} */
+	this.html;
+	/** @type {import('./_classes').default['menu']} */
+	this.menu;
+	/** @type {import('./_classes').default['nodeTransform']} */
+	this.nodeTransform;
+	/** @type {import('./_classes').default['offset']} */
+	this.offset;
+	/** @type {import('./_classes').default['selection']} */
+	this.selection;
+	/** @type {import('./_classes').default['shortcuts']} */
+	this.shortcuts;
+	/** @type {import('./_classes').default['ui']} */
+	this.ui;
+	/** @type {import('./_classes').default['viewer']} */
+	this.viewer;
+
 	CoreInjector.call(this, editor);
 	ClassInjector.call(this, editor);
 }

package/src/helper/converter.js

@@ -1,5 +1,6 @@
 import { _d, _w } from './env';
 
+const URLPattern = /https?:\/\/[^\s]+/g;
 const FONT_VALUES_MAP = {
 	'xx-small': 1,
 	'x-small': 2,
@@ -52,9 +53,9 @@ export function entityToHTML(content) {
 
 /**
  * @description Debounce function
- * @param {Function} func function
+ * @param {(...args: *) => void} func function
  * @param {number} wait delay ms
- * @returns
+ * @returns {*} executedFunction
  */
 export function debounce(func, wait) {
 	let timeout;
@@ -70,6 +71,24 @@ export function debounce(func, wait) {
 	};
 }
 
+/**
+ * @description Synchronizes two Map objects by updating the first Map with the values from the second,
+ * - and deleting any keys in the first Map that are not present in the second.
+ * @param {Map<*, *>} targetMap The Map to update (target).
+ * @param {Map<*, *>} referenceMap The Map providing the reference values (source).
+ */
+export function syncMaps(targetMap, referenceMap) {
+	referenceMap.forEach((value, key) => {
+		targetMap.set(key, value);
+	});
+
+	targetMap.forEach((_value, key) => {
+		if (!referenceMap.has(key)) {
+			targetMap.delete(key);
+		}
+	});
+}
+
 /**
  *
  * @param {"em"|"rem"|"%"|"pt"|"px"} to Size units to be converted
@@ -78,7 +97,7 @@ export function debounce(func, wait) {
  */
 export function fontSize(to, size) {
 	const value = size.match(/(\d+(?:\.\d+)?)(.+)/);
-	const sizeNum = value ? value[1] * 1 : FONT_VALUES_MAP[size];
+	const sizeNum = value ? Number(value[1]) : FONT_VALUES_MAP[size];
 	const from = value ? value[2] : 'rem';
 	let pxSize = sizeNum;
 
@@ -95,7 +114,7 @@ export function fontSize(to, size) {
 		case 'rem':
 			return (pxSize * 0.0625).toFixed(2) + to;
 		case '%':
-			return (pxSize * 0.0625).toFixed(2) * 100 + to;
+			return Number((pxSize * 0.0625).toFixed(2)) * 100 + to;
 		case 'pt':
 			return Math.floor(pxSize / 1.333) + to;
 		default:
@@ -106,7 +125,7 @@ export function fontSize(to, size) {
 
 /**
  * @description Convert the node list to an array. If not, returns an empty array.
- * @param {NodeList|null} nodeList
+ * @param {?__se__NodeCollection} nodeList
  * @returns Array
  */
 export function nodeListToArray(nodeList) {
@@ -116,8 +135,8 @@ export function nodeListToArray(nodeList) {
 
 /**
  * @description Returns a new object with keys and values swapped.
- * @param {Object} obj object
- * @returns {Object}
+ * @param {Object<*, *>} obj object
+ * @returns {Object<*, *>}
  */
 export function swapKeyValue(obj) {
 	const swappedObj = {};
@@ -133,9 +152,8 @@ export function swapKeyValue(obj) {
 
 /**
  * @description Create whitelist RegExp object.
- * Return RegExp format: new RegExp("<\\/?\\b(?!" + list + ")\\b[^>^<]*+>", "gi")
  * @param {string} list Tags list ("br|p|div|pre...")
- * @returns {RegExp}
+ * @returns {RegExp} Return RegExp format: new RegExp("<\\/?\\b(?!" + list + ")\\b[^>^<]*+>", "gi")
  */
 export function createElementWhitelist(list) {
 	return new RegExp(`<\\/?\\b(?!\\b${(list || '').replace(/\|/g, '\\b|\\b')}\\b)[^>]*>`, 'gi');
@@ -143,9 +161,8 @@ export function createElementWhitelist(list) {
 
 /**
  * @description Create blacklist RegExp object.
- * Return RegExp format: new RegExp("<\\/?\\b(?:" + list + ")\\b[^>^<]*+>", "gi")
  * @param {string} list Tags list ("br|p|div|pre...")
- * @returns {RegExp}
+ * @returns {RegExp} Return RegExp format: new RegExp("<\\/?\\b(?:" + list + ")\\b[^>^<]*+>", "gi")
  */
 export function createElementBlacklist(list) {
 	return new RegExp(`<\\/?\\b(?:\\b${(list || '^').replace(/\|/g, '\\b|\\b')}\\b)[^>]*>`, 'gi');
@@ -161,7 +178,7 @@ export function isHexColor(str) {
 
 /**
  * @description Function to convert hex format to a rgb color
- * @param {string} rgb RGB color format
+ * @param {string} rgba RGBA color format
  * @returns {string}
  */
 export function rgb2hex(rgba) {
@@ -190,24 +207,121 @@ export function rgb2hex(rgba) {
 
 /**
  * @description Computes the width as a percentage of the parent's width, and returns this value rounded to two decimal places.
- * @param {Element} target
- * @param {Element|null} parentTarget
+ * @param {HTMLElement} target The target element for which to calculate the width percentage.
+ * @param {?HTMLElement=} parentTarget The parent element to use as the reference for the width calculation. If not provided, the target's parent element is used.
  * @returns {number}
  */
 export function getWidthInPercentage(target, parentTarget) {
-	const parent = parentTarget || target.parentElement;
+	const parent = /** @type {HTMLElement} */ (parentTarget || target.parentElement);
 	const parentStyle = _w.getComputedStyle(parent);
-	const parentPaddingLeft = _w.parseFloat(parentStyle.paddingLeft);
-	const parentPaddingRight = _w.parseFloat(parentStyle.paddingRight);
+	const parentPaddingLeft = parseFloat(parentStyle.paddingLeft);
+	const parentPaddingRight = parseFloat(parentStyle.paddingRight);
 	const scrollbarWidth = parent.offsetWidth - parent.clientWidth;
 	const parentWidth = parent.offsetWidth - parentPaddingLeft - parentPaddingRight - scrollbarWidth;
 	const widthInPercentage = (target.offsetWidth / parentWidth) * 100;
 	return widthInPercentage;
 }
 
+/**
+ * @description Convert url pattern text node to anchor node
+ * @param {Node} node Text node
+ * @returns {boolean} Return true if the text node is converted to an anchor node
+ */
+export function textToAnchor(node) {
+	if (node.nodeType === 3 && URLPattern.test(node.textContent) && !/^A$/i.test(node.parentNode?.nodeName)) {
+		const textContent = node.textContent;
+		const fragment = _d.createDocumentFragment();
+
+		let lastIndex = 0;
+		textContent.replace(URLPattern, (match, offset) => {
+			if (offset > 0) {
+				fragment.appendChild(_d.createTextNode(textContent.slice(0, offset)));
+			}
+			const anchor = _d.createElement('a');
+			anchor.href = match;
+			anchor.target = '_blank';
+			anchor.textContent = match;
+			fragment.appendChild(anchor);
+			lastIndex = offset + match.length;
+			if (lastIndex < textContent.length) {
+				fragment.appendChild(_d.createTextNode(textContent.slice(lastIndex)));
+			}
+			return match;
+		});
+
+		node.parentNode.replaceChild(fragment, node);
+		return true;
+	}
+
+	return false;
+}
+
+/**
+ * Converts styles within a <span> tag to corresponding HTML tags (e.g., <strong>, <em>, <u>, <s>).
+ * Maintains the original <span> tag and wraps its content with the new tags.
+ * @param {{ regex: RegExp, tag: string }} styleToTag An object mapping style properties to HTML tags. ex) {bold: { regex: /font-weight\s*:\s*bold/i, tag: 'strong' },}
+ * @param {Node} node Node
+ */
+export function spanToStyleNode(styleToTag, node) {
+	if (node.nodeType === 1 && /^SPAN$/i.test(node.nodeName) && /** @type {HTMLElement} */ (node).hasAttribute('style')) {
+		const style = /** @type {HTMLElement} */ (node).getAttribute('style');
+		const tags = [];
+		Object.keys(styleToTag).forEach((key) => {
+			if (styleToTag[key].regex.test(style)) {
+				const tag = _d.createElement(styleToTag[key].tag);
+				tags.push(tag);
+			}
+		});
+
+		if (tags.length > 0) {
+			const temp = _d.createElement('span');
+			let currentNode = node.firstChild;
+
+			tags.forEach((tag, index) => {
+				if (index === 0) {
+					temp.appendChild(tag);
+				} else {
+					tags[index - 1].appendChild(tag);
+				}
+			});
+
+			const parent = tags[tags.length - 1];
+			while (currentNode) {
+				const nextNode = currentNode.nextSibling;
+				parent.appendChild(currentNode);
+				currentNode = nextNode;
+			}
+
+			while (node.firstChild) {
+				node.removeChild(node.firstChild);
+			}
+
+			node.appendChild(temp);
+		}
+	}
+}
+
+/**
+ * Adds a query string to a URL. If the URL already contains a query string, the new query is appended to the existing one.
+ * @param {string} url The original URL to which the query string will be added.
+ * @param {string} query The query string to be added to the URL.
+ * @returns {string} The updated URL with the query string appended.
+ */
+export function addUrlQuery(url, query) {
+	if (query.length > 0) {
+		if (/\?/.test(url)) {
+			const splitUrl = url.split('?');
+			url = splitUrl[0] + '?' + query + '&' + splitUrl[1];
+		} else {
+			url += '?' + query;
+		}
+	}
+	return url;
+}
+
 /**
  * @description Converts options-related styles and returns them for each frame.
- * @param {Object.<string, any>} fo frameOptions
+ * @param {Map<string, *>} fo editor.frameOptions
  * @param {string} cssText Style string
  * @returns {{top: string, frame: string, editor: string}}
  * @private
@@ -252,7 +366,7 @@ export function _setDefaultOptionStyle(fo, cssText) {
 
 /**
  * @description Set default style tag of the iframe
- * @param {Object.<string, any>} options Options
+ * @param {Array<string>} linkNames link names array of CSS files
  * @returns {string} "<link rel="stylesheet" href=".." />.."
  */
 export function _setIframeStyleLinks(linkNames) {
@@ -297,6 +411,7 @@ const converter = {
 	htmlToEntity,
 	entityToHTML,
 	debounce,
+	syncMaps,
 	fontSize,
 	nodeListToArray,
 	swapKeyValue,
@@ -305,6 +420,9 @@ const converter = {
 	isHexColor,
 	rgb2hex,
 	getWidthInPercentage,
+	textToAnchor,
+	spanToStyleNode,
+	addUrlQuery,
 	_setDefaultOptionStyle,
 	_setIframeStyleLinks,
 	_setAutoHeightStyle