suneditor 3.0.0-alpha.9 → 3.0.0-beta.2

package/src/plugins/modal/link.js

@@ -1,55 +1,81 @@
 import EditorInjector from '../../editorInjector';
 import { Modal, Controller, ModalAnchorEditor } from '../../modules';
-import { domUtils, numbers } from '../../helper';
-
-const Link = function (editor, pluginOptions) {
-	// plugin bisic properties
-	EditorInjector.call(this, editor);
-	this.title = this.lang.link;
-	this.icon = 'link';
-
-	// define plugin options
-	pluginOptions.textToDisplay = true;
-	pluginOptions.title = true;
-
-	// create HTML
-	const modalEl = CreateHTML_modal(editor);
-	const controllerEl = CreateHTML_controller(editor);
-
-	// members
-	const uploadUrl = typeof pluginOptions.uploadUrl === 'string' ? pluginOptions.uploadUrl : null;
-	this.isUpdateState = false;
-	this.pluginOptions = {
-		...pluginOptions,
-		uploadUrl,
-		uploadHeaders: pluginOptions.uploadHeaders || null,
-		uploadSizeLimit: /\d+/.test(pluginOptions.uploadSizeLimit) ? numbers.get(pluginOptions.uploadSizeLimit, 0) : null,
-		uploadSingleSizeLimit: /\d+/.test(pluginOptions.uploadSingleSizeLimit) ? numbers.get(pluginOptions.uploadSingleSizeLimit, 0) : null,
-		acceptedFormats: typeof pluginOptions.acceptedFormats === 'string' ? pluginOptions.acceptedFormats.trim() : null,
-		enableFileUpload: !!uploadUrl
-	};
-
-	// modules
-	this.anchor = new ModalAnchorEditor(this, modalEl, this.pluginOptions);
-	this.modal = new Modal(this, modalEl);
-	this.controller = new Controller(this, controllerEl, { position: 'bottom', disabled: false });
-};
-
-Link.key = 'link';
-Link.type = 'modal';
-Link.className = 'se-icon-flip-rtl';
-Link.prototype = {
+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.
+ * @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.
+ * @property {number} [uploadSingleSizeLimit] - The single file upload size limit in bytes.
+ * @property {string} [acceptedFormats] - Accepted file formats for link uploads.
+ */
+
+/**
+ * @class
+ * @description Link plugin.
+ * - This plugin provides link insertion and editing functionality within the editor.
+ * - It also supports file uploads if an upload URL is provided.
+ */
+class Link extends EditorInjector {
+	static key = 'link';
+	static type = 'modal';
+	static className = 'se-icon-flip-rtl';
+
+	/**
+	 * @constructor
+	 * @param {__se__EditorCore} editor - The root editor instance
+	 * @param {LinkPluginOptions} pluginOptions
+	 */
+	constructor(editor, pluginOptions) {
+		// plugin bisic properties
+		super(editor);
+		this.title = this.lang.link;
+		this.icon = 'link';
+
+		// define plugin options
+		pluginOptions.textToDisplay = true;
+		pluginOptions.title = true;
+
+		// create HTML
+		const modalEl = CreateHTML_modal(editor);
+		const controllerEl = CreateHTML_controller(editor);
+
+		// members
+		const uploadUrl = typeof pluginOptions.uploadUrl === 'string' ? pluginOptions.uploadUrl : null;
+		this.isUpdateState = false;
+		this.pluginOptions = {
+			...pluginOptions,
+			uploadUrl,
+			uploadHeaders: pluginOptions.uploadHeaders || null,
+			uploadSizeLimit: numbers.get(pluginOptions.uploadSizeLimit, 0),
+			uploadSingleSizeLimit: numbers.get(pluginOptions.uploadSingleSizeLimit, 0),
+			acceptedFormats: typeof pluginOptions.acceptedFormats === 'string' ? pluginOptions.acceptedFormats.trim() : null,
+			enableFileUpload: !!uploadUrl
+		};
+
+		// modules
+		this.anchor = new ModalAnchorEditor(this, modalEl, this.pluginOptions);
+		this.modal = new Modal(this, modalEl);
+		this.controller = new Controller(this, controllerEl, { position: 'bottom', disabled: false });
+	}
+
 	/**
-	 * @override core
+	 * @editorMethod Editor.EventManager
+	 * @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
 	 */
 	active(element) {
-		if (domUtils.isAnchor(element) && !element.hasAttribute('data-se-non-link')) {
+		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;
 
-			domUtils.addClass(element, 'on');
+			dom.utils.addClass(element, 'on');
 
 			this.anchor.set(element);
 			this.controller.open(element, null, { isWWTarget: false, initMethod: null, addOffset: null });
@@ -60,27 +86,30 @@ Link.prototype = {
 		this.controller.close();
 
 		return false;
-	},
+	}
 
 	/**
-	 * @override type = "modal"
+	 * @editorMethod Modules.Modal
+	 * @description Executes the method that is called when a "Modal" module's is opened.
 	 */
 	open() {
 		this.modal.open();
-	},
+	}
 
 	/**
-	 * @override modal
-	 * @param {boolean} isUpdate open state is update
+	 * @editorMethod Modules.Modal
+	 * @description Executes the method that is called when a plugin's modal is opened.
+	 * @param {boolean} isUpdate "Indicates whether the modal is for editing an existing component (true) or registering a new one (false)."
 	 */
 	on(isUpdate) {
 		this.isUpdateState = isUpdate;
 		this.anchor.on(isUpdate);
-	},
+	}
 
 	/**
-	 * @override modal
-	 * @returns {boolean | undefined}
+	 * @editorMethod Modules.Modal
+	 * @description This function is called when a form within a modal window is "submit".
+	 * @returns {boolean} Success or failure
 	 */
 	modalAction() {
 		const oA = this.anchor.create(false);
@@ -89,9 +118,9 @@ Link.prototype = {
 		if (!this.isUpdateState) {
 			const selectedFormats = this.format.getLines();
 			if (selectedFormats.length > 1) {
-				if (!this.html.insertNode(domUtils.createElement(selectedFormats[0].nodeName, null, oA), null, false)) return true;
+				if (!this.html.insertNode(dom.utils.createElement(selectedFormats[0].nodeName, null, oA), { afterNode: null, skipCharCount: false })) return true;
 			} else {
-				if (!this.html.insertNode(oA, null, false)) return true;
+				if (!this.html.insertNode(oA, { afterNode: null, skipCharCount: false })) return true;
 			}
 
 			this.selection.setRange(oA.childNodes[0], 0, oA.childNodes[0], oA.textContent.length);
@@ -102,20 +131,21 @@ Link.prototype = {
 		}
 
 		return true;
-	},
+	}
 
 	/**
-	 * @override modal
+	 * @editorMethod Modules.Modal
+	 * @description This function is called before the modal window is opened, but before it is closed.
 	 */
 	init() {
 		this.controller.close();
 		this.anchor.init();
-	},
+	}
 
 	/**
-	 * @override controller
-	 * @param {Element} target Target button element
-	 * @returns
+	 * @editorMethod Modules.Controller
+	 * @description Executes the method that is called when a button is clicked in the "controller".
+	 * @param {HTMLButtonElement} target Target button element
 	 */
 	controllerAction(target) {
 		const command = target.getAttribute('data-command');
@@ -123,14 +153,14 @@ Link.prototype = {
 		if (/update/.test(command)) {
 			this.modal.open();
 		} else if (/unlink/.test(command)) {
-			const sc = domUtils.getEdgeChild(
+			const sc = dom.query.getEdgeChild(
 				this.controller.currentTarget,
 				function (current) {
 					return current.childNodes.length === 0 || current.nodeType === 3;
 				},
 				false
 			);
-			const ec = domUtils.getEdgeChild(
+			const ec = dom.query.getEdgeChild(
 				this.controller.currentTarget,
 				function (current) {
 					return current.childNodes.length === 0 || current.nodeType === 3;
@@ -138,25 +168,24 @@ Link.prototype = {
 				true
 			);
 			this.selection.setRange(sc, 0, ec, ec.textContent.length);
-			this.format.applyTextStyle(null, null, ['A'], false);
+			this.format.applyInlineElement(null, { stylesToModify: null, nodesToRemove: ['A'], strictRemove: false });
 		} else {
 			/** delete */
-			domUtils.removeItem(this.controller.currentTarget);
+			dom.utils.removeItem(this.controller.currentTarget);
 			this.controller.currentTarget = null;
 			this.editor.focus();
 			this.history.push(false);
 		}
-	},
+	}
 
 	/**
-	 * @override controller
+	 * @editorMethod Modules.Controller
+	 * @description This function is called before the "controller" before it is closed.
 	 */
 	close() {
-		domUtils.removeClass(this.controller.currentTarget, 'on');
-	},
-
-	constructor: Link
-};
+		dom.utils.removeClass(this.controller.currentTarget, 'on');
+	}
+}
 
 function CreateHTML_modal({ lang, icons }) {
 	const html = /*html*/ `
@@ -175,7 +204,7 @@ function CreateHTML_modal({ lang, icons }) {
 		</div>
 	</form>`;
 
-	return domUtils.createElement('DIV', { class: 'se-modal-content' }, html);
+	return dom.utils.createElement('DIV', { class: 'se-modal-content' }, html);
 }
 
 function CreateHTML_controller({ lang, icons }) {
@@ -205,7 +234,7 @@ function CreateHTML_controller({ lang, icons }) {
 		</div>
 	</div>`;
 
-	return domUtils.createElement('DIV', { class: 'se-controller se-controller-link' }, html);
+	return dom.utils.createElement('DIV', { class: 'se-controller se-controller-link' }, html);
 }
 
 export default Link;