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

package/src/plugins/modal/link.js

@@ -3,9 +3,11 @@ import { Modal, Controller, ModalAnchorEditor } from '../../modules';
 import { dom, numbers } from '../../helper';
 
 /**
- * @typedef {Object} LinkPluginOptions
- * @property {boolean} [textToDisplay=true] - Whether to display the link text.
- * @property {boolean} [title=true] - Whether to display the link title.
+ * @typedef {import('../../modules/ModalAnchorEditor').ModalAnchorEditorParams} ModalAnchorEditorParams_link
+ */
+
+/**
+ * @typedef {Object} LinkOptions
  * @property {string} [uploadUrl] - The URL endpoint for file uploads.
  * @property {Object<string, string>} [uploadHeaders] - Additional headers for file upload requests.
  * @property {number} [uploadSizeLimit] - The total file upload size limit in bytes.
@@ -13,6 +15,10 @@ import { dom, numbers } from '../../helper';
  * @property {string} [acceptedFormats] - Accepted file formats for link uploads.
  */
 
+/**
+ * @typedef {Omit<LinkOptions & ModalAnchorEditorParams_link, ''>} LinkPluginOptions
+ */
+
 /**
  * @class
  * @description Link plugin.
@@ -24,6 +30,8 @@ class Link extends EditorInjector {
 	static type = 'modal';
 	static className = 'se-icon-flip-rtl';
 
+	#controllerATarget;
+
 	/**
 	 * @constructor
 	 * @param {__se__EditorCore} editor - The root editor instance
@@ -45,6 +53,7 @@ class Link extends EditorInjector {
 
 		// members
 		const uploadUrl = typeof pluginOptions.uploadUrl === 'string' ? pluginOptions.uploadUrl : null;
+		this.target = null;
 		this.isUpdateState = false;
 		this.pluginOptions = {
 			...pluginOptions,
@@ -60,6 +69,8 @@ class Link extends EditorInjector {
 		this.anchor = new ModalAnchorEditor(this, modalEl, this.pluginOptions);
 		this.modal = new Modal(this, modalEl);
 		this.controller = new Controller(this, controllerEl, { position: 'bottom', disabled: false });
+
+		this.#controllerATarget = this.controller.form.querySelector('a');
 	}
 
 	/**
@@ -67,18 +78,21 @@ class Link extends EditorInjector {
 	 * @description Executes the method that is called whenever the cursor position changes.
 	 * @param {?HTMLElement=} element - Node element where the cursor is currently located
 	 * @returns {boolean} - Whether the plugin is active
+	 * - If it returns "undefined", it will no longer be called in this scope.
 	 */
 	active(element) {
 		if (dom.check.isAnchor(element) && !element.hasAttribute('data-se-non-link')) {
-			const tempLink = this.controller.form.querySelector('a');
-			tempLink.href = element.href;
-			tempLink.title = element.textContent;
-			tempLink.textContent = element.textContent;
+			const a = this.#controllerATarget;
+			const href = element.getAttribute('href');
+			a.href = href;
+			a.textContent = a.title = element.textContent;
+			a.target = href?.startsWith('#') ? element.target : '_blank';
 
 			dom.utils.addClass(element, 'on');
 
 			this.anchor.set(element);
 			this.controller.open(element, null, { isWWTarget: false, initMethod: null, addOffset: null });
+			this.target = element;
 
 			return true;
 		}
@@ -130,6 +144,7 @@ class Link extends EditorInjector {
 			this.selection.setRange(textNode, 0, textNode, textNode.textContent.length);
 		}
 
+		this.history.push(false);
 		return true;
 	}
 
@@ -152,6 +167,8 @@ class Link extends EditorInjector {
 
 		if (/update/.test(command)) {
 			this.modal.open();
+		} else if (/copy/.test(command)) {
+			this.html.copy(this.target);
 		} else if (/unlink/.test(command)) {
 			const sc = dom.query.getEdgeChild(
 				this.controller.currentTarget,
@@ -168,7 +185,7 @@ class Link extends EditorInjector {
 				true
 			);
 			this.selection.setRange(sc, 0, ec, ec.textContent.length);
-			this.format.applyInlineElement(null, { stylesToModify: null, nodesToRemove: ['A'], strictRemove: false });
+			this.inline.apply(null, { stylesToModify: null, nodesToRemove: ['A'], strictRemove: false });
 		} else {
 			/** delete */
 			dom.utils.removeItem(this.controller.currentTarget);
@@ -219,6 +236,12 @@ function CreateHTML_controller({ lang, icons }) {
 					<span class="se-tooltip-text">${lang.edit}</span>
 				</span>
 			</button>
+			<button type="button" data-command="copy" tabindex="-1" class="se-btn se-tooltip">
+				${icons.copy}
+				<span class="se-tooltip-inner">
+					<span class="se-tooltip-text">${lang.copy}</span>
+				</span>
+			</button>
 			<button type="button" data-command="unlink" tabindex="-1" class="se-btn se-tooltip se-icon-flip-rtl">
 				${icons.unlink}
 				<span class="se-tooltip-inner">

package/src/plugins/modal/math.js

@@ -2,7 +2,7 @@ import EditorInjector from '../../editorInjector';
 import { Modal, Controller } from '../../modules';
 import { dom, env, converter } from '../../helper';
 
-const { _w } = env;
+const { _w, _d } = env;
 
 /**
  * @typedef {Object} MathPluginOptions
@@ -35,9 +35,11 @@ class Math_ extends EditorInjector {
 	 * @returns {HTMLElement|null} Returns a node if the node is a valid component.
 	 */
 	static component(node) {
-		return dom.utils.hasClass(node, 'se-math|katex') && dom.utils.hasClass(node, 'se-component') ? node : null;
+		return dom.utils.hasClass(node, 'se-math|katex') && dom.check.isComponentContainer(node) ? node : null;
 	}
 
+	#element;
+
 	/**
 	 * @constructor
 	 * @param {__se__EditorCore} editor - The root editor instance
@@ -54,7 +56,7 @@ class Math_ extends EditorInjector {
 		this.mathjax = null;
 
 		// exception
-		if (!(this.katex = this.#CheckKatex(editor.options.get('externalLibs').katex)) && !(this.mathjax = this.#CheckMathJax(editor.options.get('externalLibs').mathjax, editor))) {
+		if (!(this.katex = this.#CheckKatex(editor)) && !(this.mathjax = this.#CheckMathJax(editor))) {
 			console.warn('[SUNEDITOR.plugins.math.warn] The math plugin must need either "KaTeX" or "MathJax" library. Please add the katex or mathjax option.');
 		}
 
@@ -112,7 +114,7 @@ class Math_ extends EditorInjector {
 		this.fontSizeElement = modalEl.querySelector('.se-math-size');
 
 		this.isUpdateState = false;
-		this._element = null;
+		this.#element = null;
 
 		// init
 		this.previewElement.style.fontSize = this.defaultFontSize;
@@ -136,7 +138,7 @@ class Math_ extends EditorInjector {
 	 */
 	select(target) {
 		if (dom.utils.hasClass(target, 'se-math|katex') && getValue(target)) {
-			this._element = target;
+			this.#element = target;
 			this.controller.open(target, null, { isWWTarget: false, initMethod: null, addOffset: null });
 			return;
 		}
@@ -147,7 +149,7 @@ class Math_ extends EditorInjector {
 	 * @description This function is called before the "controller" before it is closed.
 	 */
 	close() {
-		this._element = null;
+		this.#element = null;
 	}
 
 	/**
@@ -170,7 +172,7 @@ class Math_ extends EditorInjector {
 				const value = getValue(element);
 				if (!value) return;
 
-				const domParser = this._d.createRange().createContextualFragment(this._renderer(converter.entityToHTML(this._escapeBackslashes(value, true))));
+				const domParser = _d.createRange().createContextualFragment(this.#renderer(converter.entityToHTML(this.#escapeBackslashes(value, true))));
 				element.innerHTML = domParser.querySelector('.se-math, .katex').innerHTML;
 				element.setAttribute('contenteditable', 'false');
 				dom.utils.addClass(element, 'se-component|se-inline-component|se-disable-pointer|se-math');
@@ -207,11 +209,11 @@ class Math_ extends EditorInjector {
 			this.init();
 		} else if (this.controller.currentTarget) {
 			const currentTarget = this.controller.currentTarget;
-			const exp = converter.entityToHTML(this._escapeBackslashes(getValue(currentTarget), true));
+			const exp = converter.entityToHTML(this.#escapeBackslashes(getValue(currentTarget), true));
 			const fontSize = getType(currentTarget) || '1em';
 			this.textArea.value = exp;
 			this.fontSizeElement.value = fontSize;
-			this.previewElement.innerHTML = this._renderer(exp);
+			this.previewElement.innerHTML = this.#renderer(exp);
 			this.previewElement.style.fontSize = fontSize;
 		}
 	}
@@ -235,7 +237,7 @@ class Math_ extends EditorInjector {
 		if (!mathEl) return false;
 		dom.utils.addClass(mathEl, 'se-component|se-inline-component|se-disable-pointer|se-math');
 		mathEl.setAttribute('contenteditable', 'false');
-		mathEl.setAttribute('data-se-value', converter.htmlToEntity(this._escapeBackslashes(mathExp, false)));
+		mathEl.setAttribute('data-se-value', converter.htmlToEntity(this.#escapeBackslashes(mathExp, false)));
 		mathEl.setAttribute('data-se-type', this.fontSizeElement.value);
 		mathEl.style.fontSize = this.fontSizeElement.value;
 
@@ -251,9 +253,9 @@ class Math_ extends EditorInjector {
 
 			if (selectedFormats.length > 1) {
 				const oFormat = dom.utils.createElement(selectedFormats[0].nodeName, null, mathEl);
-				this.component.insert(oFormat, { skipCharCount: false, skipSelection: true, skipHistory: false });
+				this.component.insert(oFormat, { insertBehavior: 'none', scrollTo: false });
 			} else {
-				this.component.insert(mathEl, { skipCharCount: false, skipSelection: true, skipHistory: false });
+				this.component.insert(mathEl, { insertBehavior: 'none', scrollTo: false });
 			}
 		} else {
 			const containerEl = dom.query.getParentElement(this.controller.currentTarget, '.se-component');
@@ -299,7 +301,7 @@ class Math_ extends EditorInjector {
 				this.modal.open();
 				break;
 			case 'copy':
-				this.#copyTextToClipboard(this._element);
+				this.#copyTextToClipboard(this.#element);
 				break;
 			case 'delete':
 				this.destroy(this.controller.currentTarget);
@@ -319,12 +321,11 @@ class Math_ extends EditorInjector {
 	}
 
 	/**
-	 * @private
 	 * @description Renders the given math expression using KaTeX or MathJax.
 	 * @param {string} exp - The math expression to render.
 	 * @returns {string} - The rendered math expression as HTML.
 	 */
-	_renderer(exp) {
+	#renderer(exp) {
 		let result = '';
 		try {
 			dom.utils.removeClass(this.textArea, 'se-error');
@@ -348,13 +349,12 @@ class Math_ extends EditorInjector {
 	}
 
 	/**
-	 * @private
 	 * @description Escapes or unescapes backslashes in a given string.
 	 * @param {string} str - The input string.
 	 * @param {boolean} decode - If true, decodes escaped backslashes; otherwise, encodes them.
 	 * @returns {string} - The processed string.
 	 */
-	_escapeBackslashes(str, decode) {
+	#escapeBackslashes(str, decode) {
 		return str.replace(/\\{2}/g, decode ? '\\' : '\\\\');
 	}
 
@@ -391,7 +391,7 @@ class Math_ extends EditorInjector {
 			eventTarget.style.height = eventTarget.scrollHeight + 5 + 'px';
 		}
 
-		this.previewElement.innerHTML = this._renderer(eventTarget.value);
+		this.previewElement.innerHTML = this.#renderer(eventTarget.value);
 		if (this.mathjax) this.#renderMathJax(this.mathjax);
 	}
 
@@ -404,10 +404,11 @@ class Math_ extends EditorInjector {
 	}
 
 	/**
-	 * @param {*} katex - The KaTeX instance.
+	 * @param {__se__EditorCore} editor - The root editor instance.
 	 * @returns {*} - The KaTeX instance or null if the instance is invalid.
 	 */
-	#CheckKatex(katex) {
+	#CheckKatex(editor) {
+		const katex = editor.options.get('externalLibs').katex;
 		if (!katex) return null;
 		if (!katex.src) {
 			console.warn('[SUNEDITOR.math.katex.fail] The katex option is set incorrectly.');
@@ -431,11 +432,11 @@ class Math_ extends EditorInjector {
 	}
 
 	/**
-	 * @param {*} mathjax - The MathJax instance.
 	 * @param {__se__EditorCore} editor - The root editor instance.
 	 * @returns {*}
 	 */
-	#CheckMathJax(mathjax, editor) {
+	#CheckMathJax(editor) {
+		const mathjax = editor.options.get('externalLibs').mathjax;
 		if (!mathjax) return null;
 		if (editor.frameOptions.get('iframe')) {
 			console.warn('[SUNEDITOR.math.mathjax.fail] The MathJax option is not supported in the iframe.');