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

package/src/plugins/modal/embed.js

@@ -1,15 +1,7 @@
-import EditorInjector from '../../editorInjector';
-import { Modal, Figure } from '../../modules';
+import { PluginModal } from '../../interfaces';
+import { Modal, Figure } from '../../modules/contract';
 import { dom, numbers, env, keyCodeMap } from '../../helper';
-const { NO_EVENT } = env;
-
-/**
- * @typedef {import('../../events').ProcessInfo} ProcessInfo_embed
- */
-
-/**
- * @typedef {import('../../modules/Figure').FigureControls} FigureControls_embed
- */
+const { _w, NO_EVENT } = env;
 
 /**
  * @typedef {Object} EmbedPluginOptions
@@ -22,7 +14,7 @@ const { NO_EVENT } = env;
  * @property {Object<string, string>} [uploadHeaders] - Headers to include in 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 {Object<string, string>} [iframeTagAttributes] - Additional attributes to set on the iframe tag.
+ * @property {Object<string, string>} [iframeTagAttributes] - Additional attributes to set on the `IFRAME` tag.
  * @property {string} [query_youtube] - YouTube query parameter.
  * @property {string} [query_vimeo] - Vimeo query parameter.
  * @property {Array<RegExp>} [urlPatterns] - Additional URL patterns for embed.
@@ -45,43 +37,104 @@ const { NO_EVENT } = env;
  *   },
  *   // Additional services...
  * }
- * @property {FigureControls_embed} [controls] - Figure controls.
+ * @property {SunEditor.Module.Figure.Controls} [controls] - Figure controls.
+ * @property {SunEditor.ComponentInsertType} [insertBehavior] - Component insertion behavior for selection and cursor placement. [default: `options.get('componentInsertBehavior')`]
+ * - `auto`: Move cursor to the next line if possible, otherwise select the component.
+ * - `select`: Always select the inserted component.
+ * - `line`: Move cursor to the next line if possible, or create a new line and move there.
+ * - `none`: Do nothing.
  */
 
 /**
  * @class
  * @description Embed modal plugin.
- * - This plugin provides a modal interface for embedding external content (e.g., videos, iframes) into the editor.
+ * - This plugin provides a modal interface for embedding external content (e.g., videos, `IFRAME` elements) into the editor.
  */
-class Embed extends EditorInjector {
+class Embed extends PluginModal {
 	static key = 'embed';
-	static type = 'modal';
 	static className = '';
+
 	/**
-	 * @this {Embed}
 	 * @param {HTMLElement} node - The node to check.
 	 * @returns {HTMLElement|null} Returns a node if the node is a valid component.
 	 */
 	static component(node) {
+		const children = node.children;
 		let src = '';
-		if (dom.check.isIFrame(node)) src = node.src;
-		if (/^DIV$/i.test(node?.nodeName) && dom.check.isIFrame(node.firstElementChild)) src = node.firstElementChild.src;
+		let target = null;
+
+		if (dom.check.isIFrame(node)) {
+			target = node;
+			src = node.src;
+		}
+		if (!src && /^DIV$/i.test(node?.nodeName) && dom.check.isIFrame(children[0])) {
+			target = children[0];
+			src = target.src;
+		}
+		if (!src && dom.utils.hasClass(node, 'se-embed-container')) {
+			/** @type {*} */
+			const srcNode = dom.query.getChildNode(node, (current) => current.src || current.href);
+			target = srcNode;
+			src = target?.src || target?.href;
+		}
+
+		if (/^BLOCKQUOTE$/i.test(node?.nodeName)) {
+			const link = node.querySelector('a');
+			if (link && link.href) {
+				target = node;
+				src = link.href;
+				return this.#checkContentType(src) ? target : null;
+			}
+		}
 
 		if (src) {
-			return this.checkContentType(src) ? node : null;
+			return this.#checkContentType(src) ? target : null;
 		}
-		return null;
+
+		return target;
 	}
 
+	/**
+	 * @description Checks if the given URL matches any of the defined URL patterns.
+	 * @param {string} url - The URL to check.
+	 * @returns {boolean} `true` if the URL matches a known pattern; otherwise, `false`.
+	 */
+	static #checkContentType(url) {
+		url = url?.toLowerCase() || '';
+		if (this.#urlPatterns.some((pattern) => pattern.test(url))) {
+			return true;
+		}
+
+		return false;
+	}
+
+	/** @type {Array<RegExp>} */
+	static #urlPatterns = null;
+
+	#defaultSizeX;
+	#defaultSizeY;
+	#origin_w;
+	#origin_h;
+	#resizing;
+	#onlyPercentage;
+	#nonResizing;
+
+	#linkValue = '';
+	#align = 'none';
+	#element = null;
+	#cover = null;
+	#container = null;
+	#ratio = { w: 0, h: 0 };
+
 	/**
 	 * @constructor
-	 * @param {__se__EditorCore} editor - The root editor instance
+	 * @param {SunEditor.Kernel} editor - The core kernel
 	 * @param {EmbedPluginOptions} pluginOptions
 	 */
 	constructor(editor, pluginOptions) {
-		// plugin bisic properties
+		// plugin basic properties
 		super(editor);
-		this.title = this.lang.embed;
+		this.title = this.$.lang.embed;
 		this.icon = 'embed';
 
 		// define plugin options
@@ -97,57 +150,54 @@ class Embed extends EditorInjector {
 			uploadSingleSizeLimit: numbers.get(pluginOptions.uploadSingleSizeLimit, 0),
 			iframeTagAttributes: pluginOptions.iframeTagAttributes || null,
 			query_youtube: pluginOptions.query_youtube || '',
-			query_vimeo: pluginOptions.query_vimeo || ''
+			query_vimeo: pluginOptions.query_vimeo || '',
+			insertBehavior: pluginOptions.insertBehavior,
 		};
 
 		// create HTML
 		const sizeUnit = this.pluginOptions.percentageOnlySize ? '%' : 'px';
-		const modalEl = CreateHTML_modal(editor, this.pluginOptions);
-		const figureControls = pluginOptions.controls || !this.pluginOptions.canResize ? [['align', 'edit', 'copy', 'remove']] : [['resize_auto,75,50', 'align', 'edit', 'revert', 'copy', 'remove']];
+		const modalEl = CreateHTML_modal(this.$, this.pluginOptions);
+		const figureControls = pluginOptions.controls || (!this.pluginOptions.canResize ? [['align', 'edit', 'copy', 'remove']] : [['resize_auto,75,50', 'align', 'edit', 'revert', 'copy', 'remove']]);
 
 		// show align
 		if (!figureControls.some((subArray) => subArray.includes('align'))) modalEl.figureAlignBtn.style.display = 'none';
 
 		// modules
-		this.modal = new Modal(this, modalEl.html);
-		this.figure = new Figure(this, figureControls, { sizeUnit: sizeUnit });
+		this.modal = new Modal(this, this.$, modalEl.html);
+		this.figure = new Figure(this, this.$, figureControls, { sizeUnit: sizeUnit });
 
 		// members
 		this.fileModalWrapper = modalEl.fileModalWrapper;
 		this.embedInput = modalEl.embedInput;
 		this.focusElement = this.embedInput;
 		this.previewSrc = modalEl.previewSrc;
-		this._linkValue = '';
-		this._align = 'none';
-		this._defaultSizeX = this.pluginOptions.defaultWidth;
-		this._defaultSizeY = this.pluginOptions.defaultHeight;
 		this.sizeUnit = sizeUnit;
 		this.proportion = null;
 		this.inputX = null;
 		this.inputY = null;
-		this._element = null;
-		this._cover = null;
-		this._container = null;
-		this._ratio = { w: 1, h: 1 };
-		this._origin_w = this.pluginOptions.defaultWidth === 'auto' ? '' : this.pluginOptions.defaultWidth;
-		this._origin_h = this.pluginOptions.defaultHeight === 'auto' ? '' : this.pluginOptions.defaultHeight;
-		this._resizing = this.pluginOptions.canResize;
-		this._onlyPercentage = this.pluginOptions.percentageOnlySize;
-		this._nonResizing = !this._resizing || !this.pluginOptions.showHeightInput || this._onlyPercentage;
+
+		this.#defaultSizeX = this.pluginOptions.defaultWidth;
+		this.#defaultSizeY = this.pluginOptions.defaultHeight;
+		this.#origin_w = this.pluginOptions.defaultWidth === 'auto' ? '' : this.pluginOptions.defaultWidth;
+		this.#origin_h = this.pluginOptions.defaultHeight === 'auto' ? '' : this.pluginOptions.defaultHeight;
+		this.#resizing = this.pluginOptions.canResize;
+		this.#onlyPercentage = this.pluginOptions.percentageOnlySize;
+		this.#nonResizing = !this.#resizing || !this.pluginOptions.showHeightInput || this.#onlyPercentage;
+
 		this.query = {
 			facebook: {
 				pattern: /(?:https?:\/\/)?(?:www\.)?(?:facebook\.com)\/(.+)/i,
 				action: (url) => {
 					return `https://www.facebook.com/plugins/post.php?href=${encodeURIComponent(url)}&show_text=true&width=500`;
 				},
-				tag: 'iframe'
+				tag: 'iframe',
 			},
 			twitter: {
-				pattern: /(?:https?:\/\/)?(?:www\.)?(?:twitter\.com)\/(status|embed)\/(.+)/i,
+				pattern: /^(?:https?:\/\/)?(?:(?:www\.)?(?:twitter\.com|x\.com)\/(?:[^/?#]+\/)?status\/\d+(?:[/?#]|$)|platform\.twitter\.com\/embed\/Tweet\.html(?:[?#].*)?$)/i,
 				action: (url) => {
 					return `https://platform.twitter.com/embed/Tweet.html?url=${encodeURIComponent(url)}`;
 				},
-				tag: 'iframe'
+				tag: 'iframe',
 			},
 			instagram: {
 				pattern: /(?:https?:\/\/)?(?:www\.)?(?:instagram\.com)\/p\/(.+)/i,
@@ -155,14 +205,14 @@ class Embed extends EditorInjector {
 					const postId = url.match(this.query.instagram.pattern)[1];
 					return `https://www.instagram.com/p/${postId}/embed`;
 				},
-				tag: 'iframe'
+				tag: 'iframe',
 			},
 			linkedin: {
 				pattern: /(?:https?:\/\/)?(?:www\.)?(?:linkedin\.com)\/(.+)\/(.+)/i,
 				action: (url) => {
 					return `https://www.linkedin.com/embed/feed/update/${encodeURIComponent(url.split('/').pop())}`;
 				},
-				tag: 'iframe'
+				tag: 'iframe',
 			},
 			pinterest: {
 				pattern: /(?:https?:\/\/)?(?:www\.)?(?:pinterest\.com)\/pin\/(.+)/i,
@@ -170,7 +220,7 @@ class Embed extends EditorInjector {
 					const pinId = url.match(this.query.pinterest.pattern)[1];
 					return `https://assets.pinterest.com/ext/embed.html?id=${pinId}`;
 				},
-				tag: 'iframe'
+				tag: 'iframe',
 			},
 			spotify: {
 				pattern: /(?:https?:\/\/)?(?:open\.)?(?:spotify\.com)\/(track|album|playlist|show|episode)\/(.+)/i,
@@ -180,7 +230,7 @@ class Embed extends EditorInjector {
 					const id = match[2];
 					return `https://open.spotify.com/embed/${type}/${id}`;
 				},
-				tag: 'iframe'
+				tag: 'iframe',
 			},
 			codepen: {
 				pattern: /(?:https?:\/\/)?(?:www\.)?(?:codepen\.io)\/(.+)\/pen\/(.+)/i,
@@ -188,244 +238,167 @@ class Embed extends EditorInjector {
 					const [, user, penId] = url.match(this.query.codepen.pattern);
 					return `https://codepen.io/${user}/embed/${penId}`;
 				},
-				tag: 'iframe'
+				tag: 'iframe',
 			},
-			...pluginOptions.embedQuery
+			...pluginOptions.embedQuery,
 		};
 
 		const urlPatterns = [];
 		for (const key in this.query) {
 			urlPatterns.push(this.query[key].pattern);
 		}
-		this.urlPatterns = urlPatterns.concat(pluginOptions.urlPatterns || []);
+		Embed.#urlPatterns = urlPatterns.concat(pluginOptions.urlPatterns || []);
 
 		// init
-		this.eventManager.addEvent(this.embedInput, 'input', this.#OnLinkPreview.bind(this));
+		this.$.eventManager.addEvent(this.embedInput, 'input', this.#OnLinkPreview.bind(this));
 
-		if (this._resizing) {
+		if (this.#resizing) {
 			this.proportion = modalEl.proportion;
 			this.inputX = modalEl.inputX;
 			this.inputY = modalEl.inputY;
 			this.inputX.value = this.pluginOptions.defaultWidth;
 			this.inputY.value = this.pluginOptions.defaultHeight;
 
-			this.eventManager.addEvent(this.inputX, 'keyup', this.#OnInputSize.bind(this, 'x'));
-			this.eventManager.addEvent(this.inputY, 'keyup', this.#OnInputSize.bind(this, 'y'));
-			this.eventManager.addEvent(modalEl.revertBtn, 'click', this.#OnClickRevert.bind(this));
+			this.$.eventManager.addEvent(this.inputX, 'keyup', this.#OnInputSize.bind(this, 'x'));
+			this.$.eventManager.addEvent(this.inputY, 'keyup', this.#OnInputSize.bind(this, 'y'));
+			this.$.eventManager.addEvent(modalEl.revertBtn, 'click', this.#OnClickRevert.bind(this));
 		}
 	}
 
 	/**
-	 * @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.Controller(Figure)
-	 * @description Executes the method that is called when a target component is edited.
+	 * @hook Editor.Core
+	 * @type {SunEditor.Hook.Core.RetainFormat}
 	 */
-	edit() {
-		this.modal.open();
+	retainFormat() {
+		return {
+			query: 'iframe',
+			/** @param {HTMLIFrameElement} element */
+			method: async (element) => {
+				if (!Embed.#checkContentType(element.src)) return;
+
+				const figureInfo = Figure.GetContainer(element);
+				if (figureInfo && figureInfo.container && figureInfo.cover) return;
+
+				this.#ready(element, true);
+				const line = this.$.format.getLine(element);
+				if (line) this.#align = line.style.textAlign || line.style.float;
+
+				this.#fixTagStructure(element);
+			},
+		};
 	}
 
 	/**
-	 * @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) {
-		if (!isUpdate && this._resizing) {
-			this.inputX.value = this._origin_w = this.pluginOptions.defaultWidth === 'auto' ? '' : this.pluginOptions.defaultWidth;
-			this.inputY.value = this._origin_h = this.pluginOptions.defaultHeight === 'auto' ? '' : this.pluginOptions.defaultHeight;
+	modalOn(isUpdate) {
+		if (!isUpdate && this.#resizing) {
+			this.inputX.value = this.#origin_w = this.pluginOptions.defaultWidth === 'auto' ? '' : this.pluginOptions.defaultWidth;
+			this.inputY.value = this.#origin_h = this.pluginOptions.defaultHeight === 'auto' ? '' : this.pluginOptions.defaultHeight;
 			this.proportion.disabled = true;
+		} else if (isUpdate) {
+			this.#linkValue = this.previewSrc.textContent = this.embedInput.value = this.#cover.getAttribute('data-se-origin') || '';
 		}
 	}
 
 	/**
-	 * @editorMethod Modules.Modal
-	 * @description This function is called when a form within a modal window is "submit".
-	 * @returns {Promise<boolean>} Success / failure
+	 * @hook Modules.Modal
+	 * @type {SunEditor.Hook.Modal.Action}
 	 */
 	async modalAction() {
-		this._align = /** @type {HTMLInputElement} */ (this.modal.form.querySelector('input[name="suneditor_embed_radio"]:checked')).value;
+		this.#align = /** @type {HTMLInputElement} */ (this.modal.form.querySelector('input[name="suneditor_embed_radio"]:checked')).value;
 
 		let result = false;
-		if (this._linkValue.length > 0) {
-			result = await this.submitSRC(this._linkValue);
+		if (this.#linkValue.length > 0) {
+			result = await this.submitSRC(this.#linkValue);
 		}
 
-		if (result) this._w.setTimeout(this.component.select.bind(this.component, this._element, Embed.key), 0);
+		if (result) _w.setTimeout(this.$.component.select.bind(this.$.component, this.#element, Embed.key), 0);
 
 		return result;
 	}
 
 	/**
-	 * @editorMethod Editor.core
-	 * @description This method is used to validate and preserve the format of the component within the editor.
-	 * - It ensures that the structure and attributes of the element are maintained and secure.
-	 * - The method checks if the element is already wrapped in a valid container and updates its attributes if necessary.
-	 * - If the element isn't properly contained, a new container is created to retain the format.
-	 * @returns {{query: string, method: (element: HTMLIFrameElement) => void}} The format retention object containing the query and method to process the element.
-	 * - query: The selector query to identify the relevant elements (in this case, 'audio').
-	 * - method:The function to execute on the element to validate and preserve its format.
-	 * - The function takes the element as an argument, checks if it is contained correctly, and applies necessary adjustments.
-	 */
-	retainFormat() {
-		return {
-			query: 'iframe',
-			method: async (element) => {
-				if (!this.checkContentType(element.src)) return;
-
-				const figureInfo = Figure.GetContainer(element);
-				if (figureInfo && figureInfo.container && figureInfo.cover) return;
-
-				this._ready(element);
-				const line = this.format.getLine(element);
-				if (line) this._align = line.style.textAlign || line.style.float;
-
-				this._update(element);
-			}
-		};
-	}
-
-	/**
-	 * @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() {
 		Modal.OnChangeFile(this.fileModalWrapper, []);
-		this._linkValue = this.previewSrc.textContent = this.embedInput.value = '';
+		this.#linkValue = this.previewSrc.textContent = this.embedInput.value = '';
 
 		/** @type {HTMLInputElement} */ (this.modal.form.querySelector('input[name="suneditor_embed_radio"][value="none"]')).checked = true;
-		this._ratio = { w: 1, h: 1 };
-		this._nonResizing = false;
+		this.#ratio = { w: 0, h: 0 };
+		this.#nonResizing = false;
 
-		if (this._resizing) {
-			this.inputX.value = this.pluginOptions.defaultWidth === this._defaultSizeX ? '' : this.pluginOptions.defaultWidth;
-			this.inputY.value = this.pluginOptions.defaultHeight === this._defaultSizeY ? '' : this.pluginOptions.defaultHeight;
+		if (this.#resizing) {
+			this.inputX.value = this.pluginOptions.defaultWidth === this.#defaultSizeX ? '' : this.pluginOptions.defaultWidth;
+			this.inputY.value = this.pluginOptions.defaultHeight === this.#defaultSizeY ? '' : this.pluginOptions.defaultHeight;
 			this.proportion.checked = false;
 			this.proportion.disabled = true;
 		}
 	}
 
 	/**
-	 * @editorMethod Editor.Component
-	 * @description Executes the method that is called when a component of a plugin is selected.
-	 * @param {HTMLElement} target Target component element
+	 * @hook Editor.Component
+	 * @type {SunEditor.Hook.Component.Select}
 	 */
-	select(target) {
-		this._ready(target);
+	componentSelect(target) {
+		this.#ready(target);
 	}
 
 	/**
-	 * @private
-	 * @description Prepares the component for selection.
-	 * - Ensures that the controller is properly positioned and initialized.
-	 * - Prevents duplicate event handling if the component is already selected.
-	 * @param {HTMLElement} target - The selected element.
+	 * @hook Editor.Component
+	 * @type {SunEditor.Hook.Component.Edit}
 	 */
-	_ready(target) {
-		if (!target) return;
-		const figureInfo = this.figure.open(target, { nonResizing: this._nonResizing, nonSizeInfo: false, nonBorder: false, figureTarget: false, __fileManagerInfo: false });
-
-		this._element = target;
-		this._cover = figureInfo.cover;
-		this._container = figureInfo.container;
-		this._caption = figureInfo.caption;
-		this._align = figureInfo.align;
-		target.style.float = '';
-
-		this._origin_w = String(figureInfo.originWidth || figureInfo.w || '');
-		this._origin_h = String(figureInfo.originHeight || figureInfo.h || '');
-
-		/** @type {HTMLInputElement} */
-		const activeAlign = this.modal.form.querySelector('input[name="suneditor_embed_radio"][value="' + this._align + '"]') || this.modal.form.querySelector('input[name="suneditor_embed_radio"][value="none"]');
-		activeAlign.checked = true;
-
-		if (!this._resizing) return;
-
-		const percentageRotation = this._onlyPercentage && this.figure.isVertical;
-		let w = percentageRotation ? '' : figureInfo.width;
-		if (this._onlyPercentage) {
-			w = numbers.get(w, 2);
-			if (w > 100) w = 100;
-		}
-
-		this.inputX.value = String(w === 'auto' ? '' : w);
-
-		if (!this._onlyPercentage) {
-			const h = percentageRotation ? '' : figureInfo.height;
-			this.inputY.value = String(h === 'auto' ? '' : h);
-		}
-
-		this.proportion.checked = true;
-		this.inputX.disabled = percentageRotation ? true : false;
-		this.inputY.disabled = percentageRotation ? true : false;
-		this.proportion.disabled = percentageRotation ? true : false;
-
-		this._ratio = this.proportion.checked
-			? figureInfo.ratio
-			: {
-					w: 1,
-					h: 1
-			  };
+	componentEdit() {
+		this.modal.open();
 	}
 
 	/**
-	 * @editorMethod Editor.Component
-	 * @description Method to delete a component of a plugin, called by the "FileManager", "Controller" module.
-	 * @param {HTMLElement} target Target element
-	 * @returns {Promise<void>}
+	 * @hook Editor.Component
+	 * @type {SunEditor.Hook.Component.Destroy}
 	 */
-	async destroy(target) {
-		const targetEl = target || this._element;
+	async componentDestroy(target) {
+		const targetEl = target || this.#element;
 		const container = dom.query.getParentElement(targetEl, Figure.is) || targetEl;
 		const focusEl = container.previousElementSibling || container.nextElementSibling;
 		const emptyDiv = container.parentNode;
 
-		const message = await this.triggerEvent('onEmbedDeleteBefore', { element: targetEl, container, align: this._align, url: this._linkValue });
+		const message = await this.$.eventManager.triggerEvent('onEmbedDeleteBefore', { element: targetEl, container, align: this.#align, url: this.#linkValue });
 		if (message === false) return;
 
 		dom.utils.removeItem(container);
-		this.init();
+		this.modalInit();
 
-		if (emptyDiv !== this.editor.frameContext.get('wysiwyg')) {
-			this.nodeTransform.removeAllParents(
+		if (emptyDiv !== this.$.frameContext.get('wysiwyg')) {
+			this.$.nodeTransform.removeAllParents(
 				emptyDiv,
 				function (current) {
 					return current.childNodes.length === 0;
 				},
-				null
+				null,
 			);
 		}
 
 		// focus
-		this.editor.focusEdge(focusEl);
-		this.history.push(false);
-	}
-
-	/**
-	 * @description Checks if the given URL matches any of the defined URL patterns.
-	 * @param {string} url - The URL to check.
-	 * @returns {boolean} True if the URL matches a known pattern; otherwise, false.
-	 */
-	checkContentType(url) {
-		url = url?.toLowerCase() || '';
-		if (this.urlPatterns.some((pattern) => pattern.test(url))) {
-			return true;
-		}
-
-		return false;
+		this.$.focusManager.focusEdge(focusEl);
+		this.$.history.push(false);
 	}
 
 	/**
 	 * @description Finds and processes the URL for embedding by matching it against known service patterns.
 	 * @param {string} url - The original URL.
-	 * @returns {{origin: string, url: string, tag: string}|null} An object containing the original URL, the processed URL, and the tag type (e.g., 'iframe'),
-	 * or null if no matching pattern is found.
+	 * @returns {{origin: string, url: string, tag: string}|null} An object containing the original URL, the processed URL, and the tag type (e.g., `iframe`),
+	 * or `null` if no matching pattern is found.
 	 */
 	findProcessUrl(url) {
 		const query = this.query;
@@ -435,7 +408,7 @@ class Embed extends EditorInjector {
 				return {
 					origin: url,
 					url: service.action(url),
-					tag: service.tag
+					tag: service.tag,
 				};
 			}
 		}
@@ -447,34 +420,36 @@ class Embed extends EditorInjector {
 	 * @description Processes the provided source (URL or embed code) and submits it for embedding.
 	 * - It parses the input, triggers any necessary events, and creates or updates the embed component.
 	 * @param {string} [src] - The embed source. If not provided, uses the internally stored link value.
-	 * @returns {Promise<boolean>} A promise that resolves to true on success or false on failure.
+	 * @returns {Promise<boolean>} A promise that resolves to `true` on success or `false` on failure.
 	 */
 	async submitSRC(src) {
-		if (!src) src = this._linkValue;
-		if (!src) return false;
+		if (!(src ||= this.#linkValue)) return false;
 
 		let embedInfo = null;
 		if (/^<iframe\s|^<blockquote\s/i.test(src)) {
 			const embedDOM = new DOMParser().parseFromString(src, 'text/html').body.children;
 			if (embedDOM.length === 0) return false;
-			embedInfo = { children: embedDOM, ...this._getInfo(), process: null };
+			embedInfo = { children: embedDOM, ...this.#getInfo(), process: null };
 		} else {
 			const processUrl = this.findProcessUrl(src);
 			if (!processUrl) return false;
 			src = processUrl.url;
-			embedInfo = { url: src, ...this._getInfo(), process: processUrl };
+
+			embedInfo = {
+				...this.#getInfo(),
+				url: src,
+				process: processUrl,
+			};
 		}
 
-		const handler = function (infos, newInfos) {
+		const handler = function (uploadCallback, infos, newInfos) {
 			infos = newInfos || infos;
-			this._create(infos.process, infos.url, infos.children, infos.inputWidth, infos.inputHeight, infos.align, infos.isUpdate);
-		}.bind(this, embedInfo);
-		// se-ts-ignore
-		void this._create;
+			uploadCallback(src, infos.process, infos.url, infos.children, infos.inputWidth, infos.inputHeight, infos.align, infos.isUpdate);
+		}.bind(this, this.#create.bind(this), embedInfo);
 
-		const result = await this.triggerEvent('onEmbedInputBefore', {
+		const result = await this.$.eventManager.triggerEvent('onEmbedInputBefore', {
 			...embedInfo,
-			handler
+			handler,
 		});
 
 		if (result === undefined) return true;
@@ -487,39 +462,90 @@ class Embed extends EditorInjector {
 	}
 
 	/**
-	 * @private
-	 * @description Creates an iframe element for embedding external content.
-	 * @returns {HTMLIFrameElement} The created iframe element.
+	 * @description Prepares the component for selection.
+	 * - Ensures that the controller is properly positioned and initialized.
+	 * - Prevents duplicate event handling if the component is already selected.
+	 * @param {HTMLElement} target - The selected element.
+	 * @param {boolean} [infoOnly=false] - If `true`, only retrieves information without opening the controller.
+	 */
+	#ready(target, infoOnly = false) {
+		if (!target) return;
+		const figureInfo = this.figure.open(target, { nonResizing: this.#nonResizing, nonSizeInfo: false, nonBorder: false, figureTarget: false, infoOnly });
+
+		this.#element = target;
+		this.#cover = figureInfo.cover;
+		this.#container = figureInfo.container;
+		this._caption = figureInfo.caption;
+		this.#align = figureInfo.align;
+
+		if (!this.#cover?.getAttribute?.('data-se-origin')) {
+			const src = target?.getAttribute?.('src') || target?.querySelector?.('a')?.href;
+			if (src && Embed.#checkContentType(src)) {
+				this.#cover.setAttribute('data-se-origin', src);
+			}
+		}
+
+		target.style.float = '';
+
+		this.#origin_w = String(figureInfo.originWidth || figureInfo.w || '');
+		this.#origin_h = String(figureInfo.originHeight || figureInfo.h || '');
+
+		/** @type {HTMLInputElement} */
+		const activeAlign = this.modal.form.querySelector('input[name="suneditor_embed_radio"][value="' + this.#align + '"]') || this.modal.form.querySelector('input[name="suneditor_embed_radio"][value="none"]');
+		activeAlign.checked = true;
+
+		if (!this.#resizing) return;
+
+		const percentageRotation = this.#onlyPercentage && this.figure.isVertical;
+		const { dw, dh } = this.figure.getSize(target);
+		this.inputX.value = dw === 'auto' ? '' : dw;
+		this.inputY.value = dh === 'auto' ? '' : dh;
+
+		this.proportion.checked = true;
+		this.inputX.disabled = percentageRotation ? true : false;
+		this.inputY.disabled = percentageRotation ? true : false;
+		this.proportion.disabled = percentageRotation ? true : false;
+
+		this.#ratio = this.proportion.checked
+			? figureInfo.ratio
+			: {
+					w: 0,
+					h: 0,
+				};
+	}
+
+	/**
+	 * @description Creates an `IFRAME` element for embedding external content.
+	 * @returns {HTMLIFrameElement} The created `IFRAME` element.
 	 */
-	_createIframeTag() {
+	#createIframeTag() {
 		/** @type {HTMLIFrameElement} */
 		const iframeTag = dom.utils.createElement('IFRAME');
-		this._setIframeAttrs(iframeTag);
+		this.#setIframeAttrs(iframeTag);
 		return iframeTag;
 	}
 
 	/**
-	 * @private
-	 * @description Creates an blockquote element for embedding external content.
-	 * @returns {HTMLElement} The created iframe element.
+	 * @description Creates a `BLOCKQUOTE` element for embedding external content.
+	 * @returns {HTMLElement} The created `BLOCKQUOTE` element.
 	 */
-	_createEmbedTag() {
+	#createEmbedTag() {
 		const quoteTag = dom.utils.createElement('BLOCKQUOTE');
 		return quoteTag;
 	}
 
 	/**
-	 * @private
-	 * @description Creates an embed component (iframe or blockquote) and inserts it into the editor.
-	 * @param {?ProcessInfo_embed} process - Processed embed information.
-	 * @param {?string} src - The source URL.
-	 * @param {?Node[]} children - The embed elements.
+	 * @description Creates an embed component (`IFRAME` or `BLOCKQUOTE`) and inserts it into the editor.
+	 * @param {string} originSrc - The origin input source.
+	 * @param {SunEditor.EventParams.ProcessInfo} process - Processed embed information.
+	 * @param {string} src - The source URL.
+	 * @param {Node[]} children - The embed elements.
 	 * @param {string} width - The width of the embed component.
 	 * @param {string} height - The height of the embed component.
 	 * @param {string} align - The alignment of the embed component.
 	 * @param {boolean} isUpdate - Whether this is an update to an existing embed component.
 	 */
-	_create(process, src, children, width, height, align, isUpdate) {
+	#create(originSrc, process, src, children, width, height, align, isUpdate) {
 		let oFrame = null;
 		let cover = null;
 		let container = null;
@@ -527,16 +553,16 @@ class Embed extends EditorInjector {
 
 		/** update */
 		if (isUpdate) {
-			oFrame = this._element;
+			oFrame = this.#element;
 			if (oFrame.src !== src) {
 				const processUrl = this.findProcessUrl(src);
 				if (/^iframe$/i.test(processUrl?.tag) && !/^iframe$/i.test(oFrame.nodeName)) {
-					const newTag = this._createIframeTag();
+					const newTag = this.#createIframeTag();
 					newTag.src = src;
 					oFrame.replaceWith(newTag);
 					oFrame = newTag;
 				} else if (/^blockquote$/i.test(processUrl?.tag) && !/^blockquote$/i.test(oFrame.nodeName)) {
-					const newTag = this._createEmbedTag();
+					const newTag = this.#createEmbedTag();
 					newTag.setAttribute('src', src);
 					oFrame.replaceWith(newTag);
 					oFrame = newTag;
@@ -544,12 +570,12 @@ class Embed extends EditorInjector {
 					oFrame.src = src;
 				}
 			}
-			container = this._container;
+			container = this.#container;
 			cover = dom.query.getParentElement(oFrame, 'FIGURE');
 		} else {
 			/** create */
 			if (process) {
-				oFrame = this._createIframeTag();
+				oFrame = this.#createIframeTag();
 				oFrame.src = src;
 				const figure = Figure.CreateContainer(oFrame, 'se-embed-container');
 				cover = figure.cover;
@@ -560,12 +586,10 @@ class Embed extends EditorInjector {
 				cover = figure.cover;
 				container = figure.container;
 
-				let chd = null;
-				let index = 0;
-				while ((chd = /** @type {Element} */ (children[index]))) {
+				const childNodes = Array.from(children);
+				for (const chd of childNodes) {
 					if (/^script$/i.test(chd.nodeName)) {
-						scriptTag = dom.utils.createElement('script', { src: chd.getAttribute('src'), async: 'true' }, null);
-						index++;
+						scriptTag = dom.utils.createElement('script', { src: /** @type {Element} */ (chd).getAttribute('src'), async: 'true' }, null);
 						continue;
 					}
 					cover.appendChild(chd);
@@ -574,31 +598,35 @@ class Embed extends EditorInjector {
 		}
 
 		/** rendering */
-		this._element = oFrame;
-		this._cover = cover;
-		this._container = container;
-		this.figure.open(oFrame, { nonResizing: this._nonResizing, nonSizeInfo: false, nonBorder: false, figureTarget: false, __fileManagerInfo: true });
+		this.#element = oFrame;
+		this.#cover = cover;
+		this.#container = container;
+		this.figure.open(oFrame, { nonResizing: this.#nonResizing, nonSizeInfo: false, nonBorder: false, figureTarget: false, infoOnly: true });
+
+		width ||= this.#defaultSizeX;
+		height ||= this.#defaultSizeY;
 
-		width = width || this._defaultSizeX;
-		height = height || this._defaultSizeY;
 		const size = this.figure.getSize(oFrame);
 		const inputUpdate = size.w !== width || size.h !== height;
 		const changeSize = !isUpdate || inputUpdate;
 
 		// set size
 		if (changeSize) {
-			this._applySize(width, height);
+			this.#applySize(width, height);
 		}
 
 		// align
 		this.figure.setAlign(oFrame, align);
 
+		// origin src
+		cover.setAttribute('data-se-origin', originSrc);
+
 		if (!isUpdate) {
-			this.component.insert(container, { skipCharCount: false, skipSelection: true, skipHistory: true });
+			this.$.component.insert(container, { skipHistory: true, scrollTo: false, insertBehavior: this.pluginOptions.insertBehavior });
 
 			if (scriptTag) {
 				try {
-					this.history.pause();
+					this.$.history.pause();
 
 					scriptTag.onload = () => {
 						dom.utils.removeItem(scriptTag);
@@ -610,8 +638,8 @@ class Embed extends EditorInjector {
 						for (const mutation of mutations) {
 							if (mutation.type === 'childList') {
 								if (!oFrame.parentElement) {
-									this.history.resume();
-									this.history.push(false);
+									this.$.history.resume();
+									this.$.history.push(false);
 									observer.disconnect();
 									break;
 								}
@@ -619,38 +647,35 @@ class Embed extends EditorInjector {
 						}
 					});
 
-					observer.observe(this.editor.frameContext.get('wysiwyg'), {
+					observer.observe(this.$.frameContext.get('wysiwyg'), {
 						subtree: true,
-						childList: true
+						childList: true,
 					});
 				} catch (e) {
-					this.history.resume();
+					this.$.history.resume();
 					console.warn('[SUNEDITOR] Embed tag script load error.', e);
 				}
 			}
 
-			if (!this.options.get('componentAutoSelect')) {
-				const line = this.format.addLine(container, null);
-				if (line) this.selection.setRange(line, 0, line, 0);
+			if (!this.$.options.get('componentInsertBehavior')) {
+				const line = this.$.format.addLine(container, null);
+				if (line) this.$.selection.setRange(line, 0, line, 0);
 			}
 			return;
 		}
 
-		if (this._resizing && changeSize && this.figure.isVertical) this.figure.setTransform(oFrame, width, height, 0);
-		if (!scriptTag) this.history.push(false);
+		if (!this.#resizing || !changeSize || !this.figure.isVertical) this.figure.setTransform(oFrame, width, height, 0);
+		if (!scriptTag) this.$.history.push(false);
 	}
 
 	/**
-	 * @private
 	 * @description Updates an existing embed component within the editor.
 	 * @param {HTMLIFrameElement} oFrame - The existing embed element to be updated.
 	 */
-	_update(oFrame) {
+	#fixTagStructure(oFrame) {
 		if (!oFrame) return;
 
-		this._setIframeAttrs(oFrame);
-
-		let existElement = this.format.isBlock(oFrame.parentNode) || dom.check.isWysiwygFrame(oFrame.parentNode) ? oFrame : this.format.getLine(oFrame) || oFrame;
+		this.#setIframeAttrs(oFrame);
 
 		const prevFrame = oFrame;
 		oFrame = /** @type {HTMLIFrameElement} */ (oFrame.cloneNode(true));
@@ -658,53 +683,40 @@ class Embed extends EditorInjector {
 		const container = figure.container;
 
 		// size
-		this.figure.open(oFrame, { nonResizing: this._nonResizing, nonSizeInfo: false, nonBorder: false, figureTarget: false, __fileManagerInfo: true });
+		this.figure.open(oFrame, { nonResizing: this.#nonResizing, nonSizeInfo: false, nonBorder: false, figureTarget: false, infoOnly: true });
 		const size = (oFrame.getAttribute('data-se-size') || ',').split(',');
-		this._applySize(size[0] || prevFrame.style.width || prevFrame.width || '', size[1] || prevFrame.style.height || prevFrame.height || '');
+
+		const width = size[0] || prevFrame.width || '';
+		const height = size[1] || prevFrame.height || '';
+		this.#applySize(width, height);
 
 		// align
-		const format = this.format.getLine(prevFrame);
-		if (format) this._align = format.style.textAlign || format.style.float;
-		this.figure.setAlign(oFrame, this._align);
-
-		if (dom.query.getParentElement(prevFrame, dom.check.isExcludeFormat)) {
-			prevFrame.replaceWith(container);
-		} else if (dom.check.isListCell(existElement)) {
-			const refer = dom.query.getParentElement(prevFrame, (current) => current.parentNode === existElement);
-			existElement.insertBefore(container, refer);
-			dom.utils.removeItem(prevFrame);
-			this.nodeTransform.removeEmptyNode(refer, null, true);
-		} else if (this.format.isLine(existElement)) {
-			const refer = dom.query.getParentElement(prevFrame, (current) => current.parentNode === existElement);
-			existElement = this.nodeTransform.split(existElement, refer);
-			existElement.parentNode.insertBefore(container, existElement);
-			dom.utils.removeItem(prevFrame);
-			this.nodeTransform.removeEmptyNode(existElement, null, true);
-		} else {
-			/** @type {Element} */ (existElement).replaceWith(container);
-		}
+		const format = this.$.format.getLine(prevFrame);
+		if (format) this.#align = format.style.textAlign || format.style.float;
+		this.figure.setAlign(oFrame, this.#align);
+
+		this.figure.retainFigureFormat(container, this.#element, null, null);
 
 		return oFrame;
 	}
 
 	/**
-	 * @private
 	 * @description Applies width and height to the embed component.
 	 * @param {string|number} w - The width to apply.
 	 * @param {string|number} h - The height to apply.
 	 */
-	_applySize(w, h) {
-		if (!w) w = this.inputX?.value || this.pluginOptions.defaultWidth;
-		if (!h) h = this.inputY?.value || this.pluginOptions.defaultHeight;
-		if (this._onlyPercentage) {
+	#applySize(w, h) {
+		w ||= this.inputX?.value || this.pluginOptions.defaultWidth;
+		h ||= this.inputY?.value || this.pluginOptions.defaultHeight;
+
+		if (this.#onlyPercentage) {
 			if (!w) w = '100%';
-			else if (/%$/.test(w + '')) w += '%';
+			else if (!/%$/.test(w + '')) w += '%';
 		}
 		this.figure.setSize(w, h);
 	}
 
 	/**
-	 * @private
 	 * @description Retrieves embed component size and alignment information.
 	 * @returns {{inputWidth: string, inputHeight: string, align: string, isUpdate: boolean, element: Element}} An object containing
 	 * - inputWidth : The width of the embed component.
@@ -713,22 +725,21 @@ class Embed extends EditorInjector {
 	 * - isUpdate : Whether the component is being updated.
 	 * - element : The target element.
 	 */
-	_getInfo() {
+	#getInfo() {
 		return {
 			inputWidth: this.inputX?.value || '',
 			inputHeight: this.inputY?.value || '',
-			align: this._align,
+			align: this.#align,
 			isUpdate: this.modal.isUpdate,
-			element: this._element
+			element: this.#element,
 		};
 	}
 
 	/**
-	 * @private
-	 * @description Sets default attributes for an iframe element.
-	 * @param {HTMLIFrameElement} element - The iframe element to modify.
+	 * @description Sets default attributes for an `IFRAME` element.
+	 * @param {HTMLIFrameElement} element - The `IFRAME` element to modify.
 	 */
-	_setIframeAttrs(element) {
+	#setIframeAttrs(element) {
 		element.frameBorder = '0';
 		element.allowFullscreen = true;
 
@@ -749,25 +760,25 @@ class Embed extends EditorInjector {
 		const eventTarget = dom.query.getEventTarget(e);
 		const value = eventTarget.value.trim();
 		if (/^<iframe.*\/iframe>$/.test(value)) {
-			this._linkValue = value;
+			this.#linkValue = value;
 			this.previewSrc.textContent = '<IFrame :src=".."></IFrame>';
 		} else {
-			this._linkValue = this.previewSrc.textContent = !value
+			this.#linkValue = this.previewSrc.textContent = !value
 				? ''
-				: this.options.get('defaultUrlProtocol') && !value.includes('://') && value.indexOf('#') !== 0
-				? this.options.get('defaultUrlProtocol') + value
-				: !value.includes('://')
-				? '/' + value
-				: value;
+				: this.$.options.get('defaultUrlProtocol') && !value.includes('://') && value.indexOf('#') !== 0
+					? this.$.options.get('defaultUrlProtocol') + value
+					: !value.includes('://')
+						? '/' + value
+						: value;
 		}
 	}
 
 	#OnClickRevert() {
-		if (this._onlyPercentage) {
-			this.inputX.value = Number(this._origin_w) > 100 ? '100' : this._origin_w;
+		if (this.#onlyPercentage) {
+			this.inputX.value = Number(this.#origin_w) > 100 ? '100' : this.#origin_w;
 		} else {
-			this.inputX.value = this._origin_w;
-			this.inputY.value = this._origin_h;
+			this.inputX.value = this.#origin_w;
+			this.inputY.value = this.#origin_h;
 		}
 	}
 
@@ -784,10 +795,10 @@ class Embed extends EditorInjector {
 		/** @type {HTMLInputElement} */
 		const eventTarget = dom.query.getEventTarget(e);
 
-		if (xy === 'x' && this._onlyPercentage && Number(eventTarget.value) > 100) {
+		if (xy === 'x' && this.#onlyPercentage && Number(eventTarget.value) > 100) {
 			eventTarget.value = '100';
 		} else if (this.proportion.checked) {
-			const ratioSize = Figure.CalcRatio(this.inputX.value, this.inputY.value, this.sizeUnit, this._ratio);
+			const ratioSize = Figure.CalcRatio(this.inputX.value, this.inputY.value, this.sizeUnit, this.#ratio);
 			if (xy === 'x') {
 				this.inputY.value = String(ratioSize.h);
 			} else {
@@ -798,7 +809,7 @@ class Embed extends EditorInjector {
 }
 
 /**
- * @param {__se__EditorCore} editor Editor instance
+ * @param {SunEditor.Deps} $ Kernel deps
  * @param {*} pluginOptions
  * @returns {{
  * html: HTMLElement,
@@ -879,7 +890,7 @@ function CreateHTML_modal({ lang, icons }, pluginOptions) {
 		proportion: content.querySelector('._se_check_proportion'),
 		inputX: content.querySelector('._se_size_x'),
 		inputY: content.querySelector('._se_size_y'),
-		revertBtn: content.querySelector('.se-modal-btn-revert')
+		revertBtn: content.querySelector('.se-modal-btn-revert'),
 	};
 }