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

package/src/plugins/modal/link.js

@@ -1,11 +1,10 @@
-import EditorInjector from '../../editorInjector';
-import { Modal, Controller, ModalAnchorEditor } from '../../modules';
+import { PluginModal } from '../../interfaces';
+import { Modal, Controller } from '../../modules/contract';
+import { ModalAnchorEditor } from '../../modules/ui';
 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 {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,26 +12,31 @@ import { dom, numbers } from '../../helper';
  * @property {string} [acceptedFormats] - Accepted file formats for link uploads.
  */
 
+/**
+ * @typedef {Omit<LinkOptions & import('../../modules/ui/ModalAnchorEditor').ModalAnchorEditorParams, ''>} LinkPluginOptions
+ */
+
 /**
  * @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 {
+class Link extends PluginModal {
 	static key = 'link';
-	static type = 'modal';
 	static className = 'se-icon-flip-rtl';
 
+	#controllerATarget;
+
 	/**
 	 * @constructor
-	 * @param {__se__EditorCore} editor - The root editor instance
+	 * @param {SunEditor.Kernel} editor - The core kernel
 	 * @param {LinkPluginOptions} pluginOptions
 	 */
 	constructor(editor, pluginOptions) {
 		// plugin bisic properties
 		super(editor);
-		this.title = this.lang.link;
+		this.title = this.$.lang.link;
 		this.icon = 'link';
 
 		// define plugin options
@@ -40,11 +44,12 @@ class Link extends EditorInjector {
 		pluginOptions.title = true;
 
 		// create HTML
-		const modalEl = CreateHTML_modal(editor);
-		const controllerEl = CreateHTML_controller(editor);
+		const modalEl = CreateHTML_modal(this.$);
+		const controllerEl = CreateHTML_controller(this.$);
 
 		// members
 		const uploadUrl = typeof pluginOptions.uploadUrl === 'string' ? pluginOptions.uploadUrl : null;
+		this.target = null;
 		this.isUpdateState = false;
 		this.pluginOptions = {
 			...pluginOptions,
@@ -53,33 +58,34 @@ class Link extends EditorInjector {
 			uploadSizeLimit: numbers.get(pluginOptions.uploadSizeLimit, 0),
 			uploadSingleSizeLimit: numbers.get(pluginOptions.uploadSingleSizeLimit, 0),
 			acceptedFormats: typeof pluginOptions.acceptedFormats === 'string' ? pluginOptions.acceptedFormats.trim() : null,
-			enableFileUpload: !!uploadUrl
+			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 });
+		this.anchor = new ModalAnchorEditor(this.$, modalEl, this.pluginOptions);
+		this.modal = new Modal(this, this.$, modalEl);
+		this.controller = new Controller(this, this.$, controllerEl, { position: 'bottom', disabled: false });
+
+		this.#controllerATarget = this.controller.form.querySelector('a');
 	}
 
 	/**
-	 * @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
-	 * - If it returns "undefined", it will no longer be called in this scope.
+	 * @hook Editor.EventManager
+	 * @type {SunEditor.Hook.Event.Active}
 	 */
 	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;
 		}
@@ -90,104 +96,108 @@ class Link extends EditorInjector {
 	}
 
 	/**
-	 * @editorMethod Modules.Modal
-	 * @description Executes the method that is called when a "Modal" module's is opened.
+	 * @override
+	 * @type {PluginModal['open']}
 	 */
 	open() {
 		this.modal.open();
 	}
 
 	/**
-	 * @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)."
+	 * @hook Modules.Modal
+	 * @type {SunEditor.Hook.Modal.On}
 	 */
-	on(isUpdate) {
+	modalOn(isUpdate) {
 		this.isUpdateState = isUpdate;
 		this.anchor.on(isUpdate);
 	}
 
 	/**
-	 * @editorMethod Modules.Modal
-	 * @description This function is called when a form within a modal window is "submit".
-	 * @returns {boolean} Success or failure
+	 * @hook Modules.Modal
+	 * @type {SunEditor.Hook.Modal.Action}
 	 */
-	modalAction() {
+	async modalAction() {
 		const oA = this.anchor.create(false);
 		if (oA === null) return false;
 
 		if (!this.isUpdateState) {
-			const selectedFormats = this.format.getLines();
+			const selectedFormats = this.$.format.getLines();
 			if (selectedFormats.length > 1) {
-				if (!this.html.insertNode(dom.utils.createElement(selectedFormats[0].nodeName, null, oA), { afterNode: null, skipCharCount: 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, { afterNode: null, skipCharCount: 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);
+			this.$.selection.setRange(oA.childNodes[0], 0, oA.childNodes[0], oA.textContent.length);
 		} else {
 			// set range
 			const textNode = this.controller.currentTarget.childNodes[0];
-			this.selection.setRange(textNode, 0, textNode, textNode.textContent.length);
+			this.$.selection.setRange(textNode, 0, textNode, textNode.textContent.length);
 		}
 
+		this.$.history.push(false);
 		return true;
 	}
 
 	/**
-	 * @editorMethod Modules.Modal
-	 * @description This function is called before the modal window is opened, but before it is closed.
+	 * @hook Modules.Modal
+	 * @type {SunEditor.Hook.Modal.Init}
 	 */
-	init() {
+	modalInit() {
 		this.controller.close();
 		this.anchor.init();
 	}
 
 	/**
-	 * @editorMethod Modules.Controller
-	 * @description Executes the method that is called when a button is clicked in the "controller".
-	 * @param {HTMLButtonElement} target Target button element
+	 * @hook Modules.Controller
+	 * @type {SunEditor.Hook.Controller.Action}
 	 */
 	controllerAction(target) {
 		const command = target.getAttribute('data-command');
 
 		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,
 				function (current) {
 					return current.childNodes.length === 0 || current.nodeType === 3;
 				},
-				false
+				false,
 			);
 			const ec = dom.query.getEdgeChild(
 				this.controller.currentTarget,
 				function (current) {
 					return current.childNodes.length === 0 || current.nodeType === 3;
 				},
-				true
+				true,
 			);
-			this.selection.setRange(sc, 0, ec, ec.textContent.length);
-			this.format.applyInlineElement(null, { stylesToModify: null, nodesToRemove: ['A'], strictRemove: false });
+			this.$.selection.setRange(sc, 0, ec, ec.textContent.length);
+			this.$.inline.apply(null, { stylesToModify: null, nodesToRemove: ['A'], strictRemove: false });
 		} else {
 			/** delete */
 			dom.utils.removeItem(this.controller.currentTarget);
 			this.controller.currentTarget = null;
-			this.editor.focus();
-			this.history.push(false);
+			this.$.focusManager.focus();
+			this.$.history.push(false);
 		}
 	}
 
 	/**
-	 * @editorMethod Modules.Controller
-	 * @description This function is called before the "controller" before it is closed.
+	 * @hook Modules.Controller
+	 * @type {SunEditor.Hook.Controller.Close}
 	 */
-	close() {
+	controllerClose() {
 		dom.utils.removeClass(this.controller.currentTarget, 'on');
 	}
 }
 
+/**
+ * @param {SunEditor.Deps} $ - Kernel dependencies
+ * @returns {HTMLElement}
+ */
 function CreateHTML_modal({ lang, icons }) {
 	const html = /*html*/ `
 	<form>
@@ -208,6 +218,10 @@ function CreateHTML_modal({ lang, icons }) {
 	return dom.utils.createElement('DIV', { class: 'se-modal-content' }, html);
 }
 
+/**
+ * @param {SunEditor.Deps} $ - Kernel dependencies
+ * @returns {HTMLElement}
+ */
 function CreateHTML_controller({ lang, icons }) {
 	const html = /*html*/ `
 	<div class="se-arrow se-arrow-up"></div>
@@ -220,6 +234,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">