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

package/src/plugins/modal/image.js

@@ -31,6 +31,13 @@ const { NO_EVENT } = env;
  * @property {boolean} [keepFormatType=false] - Whether to retain the chosen format type after image insertion.
  * @property {boolean} [linkEnableFileUpload] - Whether to enable file uploads for linked images.
  * @property {FigureControls_image} [controls] - Figure controls.
+ * @property {__se__ComponentInsertBehaviorType} [insertBehavior] - Component insertion behavior for selection and cursor placement. [default: options.get('componentInsertBehavior')]
+ * - For inline components: places the cursor near the inserted component or selects it if no nearby range is available.
+ * - For block components: executes behavior based on `selectMode`:
+ * - `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.
  */
 
 /**
@@ -48,10 +55,26 @@ class Image_ extends EditorInjector {
 	 * @returns {Element|null} Returns a node if the node is a valid component.
 	 */
 	static component(node) {
-		const compNode = dom.check.isFigure(node) || (/^span$/i.test(node.nodeName) && dom.utils.hasClass(node, 'se-component')) ? node.firstElementChild : node;
+		const compNode = dom.check.isFigure(node) || (/^span$/i.test(node.nodeName) && dom.check.isComponentContainer(node)) ? node.firstElementChild : node;
 		return /^IMG$/i.test(compNode?.nodeName) ? compNode : dom.check.isAnchor(compNode) && /^IMG$/i.test(compNode?.firstElementChild?.nodeName) ? compNode?.firstElementChild : null;
 	}
 
+	#produceIndex;
+	#linkElement;
+	#linkValue;
+	#align;
+	#svgDefaultSize;
+	#element;
+	#cover;
+	#container;
+	#caption;
+	#ratio;
+	#origin_w;
+	#origin_h;
+	#resizing;
+	#onlyPercentage;
+	#nonResizing;
+
 	/**
 	 * @constructor
 	 * @param {__se__EditorCore} editor - The root editor instance
@@ -79,7 +102,8 @@ class Image_ extends EditorInjector {
 			acceptedFormats: typeof pluginOptions.acceptedFormats !== 'string' || pluginOptions.acceptedFormats.trim() === '*' ? 'image/*' : pluginOptions.acceptedFormats.trim() || 'image/*',
 			useFormatType: pluginOptions.useFormatType ?? true,
 			defaultFormatType: ['block', 'inline'].includes(pluginOptions.defaultFormatType) ? pluginOptions.defaultFormatType : 'block',
-			keepFormatType: pluginOptions.keepFormatType ?? false
+			keepFormatType: pluginOptions.keepFormatType ?? false,
+			insertBehavior: pluginOptions.insertBehavior
 		};
 
 		// create HTML
@@ -87,12 +111,13 @@ class Image_ extends EditorInjector {
 		const modalEl = CreateHTML_modal(editor, this.pluginOptions);
 		const ctrlAs = this.pluginOptions.useFormatType ? 'as' : '';
 		const figureControls =
-			pluginOptions.controls || !this.pluginOptions.canResize
+			pluginOptions.controls ||
+			(!this.pluginOptions.canResize
 				? [[ctrlAs, 'mirror_h', 'mirror_v', 'align', 'caption', 'edit', 'revert', 'copy', 'remove']]
 				: [
 						[ctrlAs, 'resize_auto,100,75,50', 'rotate_l', 'rotate_r', 'mirror_h', 'mirror_v'],
-						['align', 'caption', 'edit', 'revert', 'copy', 'remove']
-				  ];
+						['edit', 'align', 'caption', 'revert', 'copy', 'remove']
+					]);
 
 		// show align
 		this.alignForm = modalEl.alignForm;
@@ -101,13 +126,9 @@ class Image_ extends EditorInjector {
 		// modules
 		const Link = this.plugins.link ? this.plugins.link.pluginOptions : {};
 		this.anchor = new ModalAnchorEditor(this, modalEl.html, {
+			...Link,
 			textToDisplay: false,
-			title: true,
-			openNewWindow: Link.openNewWindow,
-			relList: Link.relList,
-			defaultRel: Link.defaultRel,
-			noAutoPrefix: Link.noAutoPrefix,
-			enableFileUpload: pluginOptions.linkEnableFileUpload
+			title: true
 		});
 		this.modal = new Modal(this, modalEl.html);
 		this.figure = new Figure(this, figureControls, {
@@ -133,24 +154,23 @@ class Image_ extends EditorInjector {
 		this.proportion = null;
 		this.inputX = null;
 		this.inputY = null;
-		this._linkElement = null;
-		this._linkValue = '';
-		this._align = 'none';
-		this._svgDefaultSize = '30%';
 		this._base64RenderIndex = 0;
-		this._element = null;
-		this._cover = null;
-		this._container = null;
-		this._caption = 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.#produceIndex = 0;
+		this.#linkElement = null;
+		this.#linkValue = '';
+		this.#align = 'none';
+		this.#svgDefaultSize = '30%';
+		this.#element = null;
+		this.#cover = null;
+		this.#container = null;
+		this.#caption = null;
+		this.#ratio = { w: 0, h: 0 };
+		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;
 
 		// init
 		this.eventManager.addEvent(modalEl.tabs, 'click', this.#OpenTab.bind(this));
@@ -161,7 +181,7 @@ class Image_ extends EditorInjector {
 		const galleryButton = modalEl.galleryButton;
 		if (galleryButton) this.eventManager.addEvent(galleryButton, 'click', this.#OpenGallery.bind(this));
 
-		if (this._resizing) {
+		if (this.#resizing) {
 			this.proportion = modalEl.proportion;
 			this.inputX = modalEl.inputX;
 			this.inputY = modalEl.inputY;
@@ -190,6 +210,7 @@ class Image_ extends EditorInjector {
 	 * @description Executes the method that is called when a "Modal" module's is opened.
 	 */
 	open() {
+		this.#produceIndex = 0;
 		this.modal.open();
 	}
 
@@ -208,9 +229,9 @@ class Image_ extends EditorInjector {
 	 */
 	on(isUpdate) {
 		if (!isUpdate) {
-			if (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;
+			if (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;
 			}
 			if (this.imgInputFile && this.pluginOptions.allowMultiple) this.imgInputFile.setAttribute('multiple', 'multiple');
 		} else {
@@ -244,17 +265,17 @@ class Image_ extends EditorInjector {
 	 * @returns {Promise<boolean>} Success or failure
 	 */
 	async modalAction() {
-		this._align = /** @type {HTMLInputElement} */ (this.modal.form.querySelector('input[name="suneditor_image_radio"]:checked')).value;
+		this.#align = /** @type {HTMLInputElement} */ (this.modal.form.querySelector('input[name="suneditor_image_radio"]:checked')).value;
 
 		if (this.modal.isUpdate) {
-			this._update(this.inputX?.value, this.inputY?.value);
+			this.#fixTagStructure(this.inputX?.value, this.inputY?.value);
 			this.history.push(false);
 		}
 
 		if (this.imgInputFile && this.imgInputFile.files.length > 0) {
 			return await this.submitFile(this.imgInputFile.files);
-		} else if (this.imgUrlFile && this._linkValue.length > 0) {
-			return await this.submitURL(this._linkValue);
+		} else if (this.imgUrlFile && this.#linkValue.length > 0) {
+			return await this.submitURL(this.#linkValue);
 		}
 
 		return false;
@@ -276,10 +297,10 @@ class Image_ extends EditorInjector {
 			query: 'img',
 			method: (element) => {
 				const figureInfo = Figure.GetContainer(element);
-				if (figureInfo && figureInfo.container && figureInfo.cover) return;
+				if (figureInfo && figureInfo.container && (figureInfo.cover || figureInfo.inlineCover)) return;
 
-				this._ready(element);
-				this._fileCheck(this._origin_w, this._origin_h);
+				const { w, h } = this.#ready(element, true);
+				this.#fileCheck(w, h);
 			}
 		};
 	}
@@ -291,7 +312,7 @@ class Image_ extends EditorInjector {
 	init() {
 		Modal.OnChangeFile(this.fileModalWrapper, []);
 		if (this.imgInputFile) this.imgInputFile.value = '';
-		if (this.imgUrlFile) this._linkValue = this.previewSrc.textContent = this.imgUrlFile.value = '';
+		if (this.imgUrlFile) this.#linkValue = this.previewSrc.textContent = this.imgUrlFile.value = '';
 		if (this.imgInputFile && this.imgUrlFile) {
 			this.imgUrlFile.disabled = false;
 			this.previewSrc.style.textDecoration = '';
@@ -300,21 +321,21 @@ class Image_ extends EditorInjector {
 		this.altText.value = '';
 		/** @type {HTMLInputElement} */ (this.modal.form.querySelector('input[name="suneditor_image_radio"][value="none"]')).checked = true;
 		this.captionCheckEl.checked = false;
-		this._element = null;
-		this._ratio = {
-			w: 1,
-			h: 1
+		this.#element = null;
+		this.#ratio = {
+			w: 0,
+			h: 0
 		};
 		this.#OpenTab('init');
 
-		if (this._resizing) {
+		if (this.#resizing) {
 			this.inputX.value = this.pluginOptions.defaultWidth === 'auto' ? '' : this.pluginOptions.defaultWidth;
 			this.inputY.value = this.pluginOptions.defaultHeight === 'auto' ? '' : this.pluginOptions.defaultHeight;
 			this.proportion.checked = true;
 		}
 
 		if (this.pluginOptions.useFormatType) {
-			this._activeAsInline((this.pluginOptions.keepFormatType ? this.as : this.pluginOptions.defaultFormatType) === 'inline');
+			this.#activeAsInline((this.pluginOptions.keepFormatType ? this.as : this.pluginOptions.defaultFormatType) === 'inline');
 		}
 
 		this.anchor.init();
@@ -326,70 +347,7 @@ class Image_ extends EditorInjector {
 	 * @param {HTMLElement} target Target component element
 	 */
 	select(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.
-	 */
-	_ready(target) {
-		if (!target) return;
-		const figureInfo = this.figure.open(target, { nonResizing: this._nonResizing, nonSizeInfo: false, nonBorder: false, figureTarget: false, __fileManagerInfo: false });
-		this.anchor.set(dom.check.isAnchor(target.parentNode) ? target.parentNode : null);
-
-		this._linkElement = this.anchor.currentTarget;
-		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 || '');
-		this.altText.value = this._element.alt;
-
-		if (this.imgUrlFile) this._linkValue = this.previewSrc.textContent = this.imgUrlFile.value = this._element.src;
-
-		/** @type {HTMLInputElement} */
-		const activeAlign = this.modal.form.querySelector('input[name="suneditor_image_radio"][value="' + this._align + '"]') || this.modal.form.querySelector('input[name="suneditor_image_radio"][value="none"]');
-		activeAlign.checked = true;
-		this.captionCheckEl.checked = !!this._caption;
-
-		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
-			  };
-
-		if (this.pluginOptions.useFormatType) {
-			this._activeAsInline(this.component.isInline(figureInfo.container));
-		}
+		this.#ready(target);
 	}
 
 	/**
@@ -399,18 +357,18 @@ class Image_ extends EditorInjector {
 	 * @returns {Promise<void>}
 	 */
 	async destroy(target) {
-		const targetEl = target || this._element;
+		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('onImageDeleteBefore', { element: targetEl, container, align: this._align, alt: this.altText.value, url: this._linkValue });
+		const message = await this.triggerEvent('onImageDeleteBefore', { element: targetEl, container, align: this.#align, alt: this.altText.value, url: this.#linkValue });
 		if (message === false) return;
 
 		dom.utils.removeItem(container);
 		this.init();
 
-		if (emptyDiv !== this.editor.frameContext.get('wysiwyg')) {
+		if (emptyDiv !== this.frameContext.get('wysiwyg')) {
 			this.nodeTransform.removeAllParents(
 				emptyDiv,
 				function (current) {
@@ -425,48 +383,6 @@ class Image_ extends EditorInjector {
 		this.history.push(false);
 	}
 
-	/**
-	 * @private
-	 * @description Retrieves the current image information.
-	 * @returns {*} - The image data.
-	 */
-	_getInfo() {
-		return {
-			element: this._element,
-			anchor: this.anchor.create(true),
-			inputWidth: this.inputX?.value || '',
-			inputHeight: this.inputY?.value || '',
-			align: this._align,
-			isUpdate: this.modal.isUpdate,
-			alt: this.altText.value
-		};
-	}
-
-	/**
-	 * @private
-	 * @description Toggles between block and inline image format.
-	 * @param {boolean} isInline - Whether the image should be inline.
-	 */
-	_activeAsInline(isInline) {
-		if (isInline) {
-			dom.utils.addClass(this.asInline, 'on');
-			dom.utils.removeClass(this.asBlock, 'on');
-			this.as = 'inline';
-			// buttns
-			if (this.alignForm) this.alignForm.style.display = 'none';
-			// caption
-			if (this.captionEl) this.captionEl.style.display = 'none';
-		} else {
-			dom.utils.addClass(this.asBlock, 'on');
-			dom.utils.removeClass(this.asInline, 'on');
-			this.as = 'block';
-			// buttns
-			if (this.alignForm) this.alignForm.style.display = '';
-			// caption
-			if (this.captionEl) this.captionEl.style.display = '';
-		}
-	}
-
 	/**
 	 * @description Create an "image" component using the provided files.
 	 * @param {FileList|File[]} fileList File object list
@@ -483,7 +399,7 @@ class Image_ extends EditorInjector {
 			if (!/image/i.test(f.type)) continue;
 
 			s = f.size;
-			if (slngleSizeLimit && slngleSizeLimit > s) {
+			if (slngleSizeLimit > 0 && s > slngleSizeLimit) {
 				const err = '[SUNEDITOR.imageUpload.fail] Size of uploadable single file: ' + slngleSizeLimit / 1000 + 'KB';
 				const message = await this.triggerEvent('onImageUploadError', {
 					error: err,
@@ -517,13 +433,11 @@ class Image_ extends EditorInjector {
 			return false;
 		}
 
-		const imgInfo = { files, ...this._getInfo() };
-		const handler = function (infos, newInfos) {
+		const imgInfo = { files, ...this.#getInfo() };
+		const handler = function (uploadCallback, infos, newInfos) {
 			infos = newInfos || infos;
-			this._serverUpload(infos, infos.files);
-		}.bind(this, imgInfo);
-		// se-ts-ignore
-		this._serverUpload;
+			uploadCallback(infos, infos.files);
+		}.bind(this, this.#serverUpload.bind(this), imgInfo);
 
 		const result = await this.triggerEvent('onImageUploadBefore', {
 			info: imgInfo,
@@ -543,22 +457,19 @@ class Image_ extends EditorInjector {
 	 * @returns {Promise<boolean>} If return false, the file upload will be canceled
 	 */
 	async submitURL(url) {
-		if (!url) url = this._linkValue;
-		if (!url) return false;
+		if (!(url ||= this.#linkValue)) return false;
 
 		const file = { name: url.split('/').pop(), size: 0 };
 		const imgInfo = {
 			url,
 			files: file,
-			...this._getInfo()
+			...this.#getInfo()
 		};
 
-		const handler = function (infos, newInfos) {
+		const handler = function (uploadCallback, infos, newInfos) {
 			infos = newInfos || infos;
-			const infoUrl = infos.url;
-			if (this.modal.isUpdate) this._updateSrc(infoUrl, infos.element, infos.files);
-			else this._produce(infoUrl, infos.anchor, infos.inputWidth, infos.inputHeight, infos.align, infos.files, infos.alt);
-		}.bind(this, imgInfo);
+			uploadCallback(infos);
+		}.bind(this, this.#urlUpload.bind(this), imgInfo);
 
 		const result = await this.triggerEvent('onImageUploadBefore', {
 			info: imgInfo,
@@ -575,18 +486,204 @@ class Image_ extends EditorInjector {
 	}
 
 	/**
-	 * @private
+	 * @description Creates a new image component, wraps it in a figure container with an optional anchor,
+	 * - applies size and alignment settings, and inserts it into the editor.
+	 * @param {string} src - The URL of the image to be inserted.
+	 * @param {?Node} anchor - An optional anchor element to wrap the image. If provided, a clone is used.
+	 * @param {string} width - The width value to be applied to the image.
+	 * @param {string} height - The height value to be applied to the image.
+	 * @param {string} align - The alignment setting for the image (e.g., 'left', 'center', 'right').
+	 * @param {{name: string, size: number}} file - File metadata associated with the image
+	 * @param {string} alt - The alternative text for the image.
+	 * @param {boolean} isLast - Indicates whether this is the last file in the batch (used for scroll and insert actions).
+	 */
+	create(src, anchor, width, height, align, file, alt, isLast) {
+		/** @type {HTMLImageElement} */
+		const oImg = dom.utils.createElement('IMG');
+		oImg.src = src;
+		oImg.alt = alt;
+		anchor = this.#setAnchor(oImg, anchor ? anchor.cloneNode(false) : null);
+
+		const figureInfo = Figure.CreateContainer(anchor, 'se-image-container');
+		const cover = figureInfo.cover;
+		const container = figureInfo.container;
+
+		// caption
+		if (this.captionCheckEl.checked) {
+			this.#caption = Figure.CreateCaption(cover, this.lang.caption);
+		}
+
+		this.#element = oImg;
+		this.#cover = cover;
+		this.#container = container;
+		this.figure.open(oImg, { nonResizing: this.#nonResizing, nonSizeInfo: false, nonBorder: false, figureTarget: false, infoOnly: true });
+
+		// set size
+		this.#applySize(width, height);
+
+		// align
+		this.figure.setAlign(oImg, align);
+
+		this.fileManager.setFileData(oImg, file);
+
+		this.#produceIndex++;
+		oImg.onload = this.#OnloadImg.bind(this, oImg, this.#svgDefaultSize, container);
+		this.component.insert(container, { scrollTo: isLast ? true : false, insertBehavior: isLast ? null : 'line' });
+	}
+
+	/**
+	 * @description Creates a new inline image component, wraps it in an inline figure container with an optional anchor,
+	 * - applies size settings, and inserts it into the editor.
+	 * @param {string} src - The URL of the image to be inserted.
+	 * @param {?Node} anchor - An optional anchor element to wrap the image. If provided, a clone is used.
+	 * @param {string} width - The width value to be applied to the image.
+	 * @param {string} height - The height value to be applied to the image.
+	 * @param {{name: string, size: number}} file - File metadata associated with the image
+	 * @param {string} alt - The alternative text for the image.
+	 * @param {boolean} isLast - Indicates whether this is the last file in the batch (used for scroll and insert actions).
+	 */
+	createInline(src, anchor, width, height, file, alt, isLast) {
+		/** @type {HTMLImageElement} */
+		const oImg = dom.utils.createElement('IMG');
+		oImg.src = src;
+		oImg.alt = alt;
+		anchor = this.#setAnchor(oImg, anchor ? anchor.cloneNode(false) : null);
+
+		const figureInfo = Figure.CreateInlineContainer(anchor, 'se-image-container');
+		const container = figureInfo.container;
+
+		this.#element = oImg;
+		this.#container = container;
+		this.figure.open(oImg, { nonResizing: this.#nonResizing, nonSizeInfo: false, nonBorder: false, figureTarget: false, infoOnly: true });
+
+		// set size
+		this.#applySize(width, height);
+
+		this.fileManager.setFileData(oImg, file);
+
+		this.#produceIndex++;
+		oImg.onload = this.#OnloadImg.bind(this, oImg, this.#svgDefaultSize, container);
+		this.component.insert(container, { scrollTo: isLast ? true : false, insertBehavior: isLast ? null : 'line' });
+	}
+
+	/**
+	 * @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.
+	 * @returns {{w: string, h: string}} - The width and height of the component.
+	 */
+	#ready(target, infoOnly = false) {
+		if (!target) return;
+		const figureInfo = this.figure.open(target, { nonResizing: this.#nonResizing, nonSizeInfo: false, nonBorder: false, figureTarget: false, infoOnly });
+		this.anchor.set(dom.check.isAnchor(target.parentNode) ? target.parentNode : null);
+
+		this.#linkElement = this.anchor.currentTarget;
+		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 || '');
+		this.altText.value = this.#element.alt;
+
+		if (this.imgUrlFile) this.#linkValue = this.previewSrc.textContent = this.imgUrlFile.value = this.#element.src;
+
+		/** @type {HTMLInputElement} */
+		const activeAlign = this.modal.form.querySelector('input[name="suneditor_image_radio"][value="' + this.#align + '"]') || this.modal.form.querySelector('input[name="suneditor_image_radio"][value="none"]');
+		activeAlign.checked = true;
+		this.captionCheckEl.checked = !!this.#caption;
+
+		const { dw, dh } = this.figure.getSize(target);
+
+		if (!this.#resizing) return { w: dw, h: dh };
+
+		this.inputX.value = dw === 'auto' ? '' : dw;
+		this.inputY.value = dh === 'auto' ? '' : dh;
+
+		const percentageRotation = this.#onlyPercentage && this.figure.isVertical;
+		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
+				};
+
+		if (this.pluginOptions.useFormatType) {
+			this.#activeAsInline(this.component.isInline(figureInfo.container));
+		}
+
+		return { w: dw, h: dh };
+	}
+
+	/**
+	 * @description Retrieves the current image information.
+	 * @returns {*} - The image data.
+	 */
+	#getInfo() {
+		return {
+			element: this.#element,
+			anchor: this.anchor.create(true),
+			inputWidth: this.inputX?.value || '',
+			inputHeight: this.inputY?.value || '',
+			align: this.#align,
+			isUpdate: this.modal.isUpdate,
+			alt: this.altText.value
+		};
+	}
+
+	/**
+	 * @description Toggles between block and inline image format.
+	 * @param {boolean} isInline - Whether the image should be inline.
+	 */
+	#activeAsInline(isInline) {
+		if (isInline) {
+			dom.utils.addClass(this.asInline, 'on');
+			dom.utils.removeClass(this.asBlock, 'on');
+			this.as = 'inline';
+			// buttns
+			if (this.alignForm) this.alignForm.style.display = 'none';
+			// caption
+			if (this.captionEl) this.captionEl.style.display = 'none';
+		} else {
+			dom.utils.addClass(this.asBlock, 'on');
+			dom.utils.removeClass(this.asInline, 'on');
+			this.as = 'block';
+			// buttns
+			if (this.alignForm) this.alignForm.style.display = '';
+			// caption
+			if (this.captionEl) this.captionEl.style.display = '';
+		}
+	}
+
+	/**
 	 * @description Updates the selected image size, alt text, and caption.
 	 * @param {string} width - New image width.
 	 * @param {string} height - New image height.
 	 */
-	_update(width, height) {
-		if (!width) width = this.inputX?.value || 'auto';
-		if (!height) height = this.inputY?.value || 'auto';
+	#fixTagStructure(width, height) {
+		width ||= this.inputX?.value || 'auto';
+		height ||= this.inputY?.value || 'auto';
+
+		let imageEl = this.#element;
+
+		// as (block | inline)
+		if ((this.as === 'block' && !this.#cover) || (this.as === 'inline' && this.#cover)) {
+			imageEl = this.figure.convertAsFormat(imageEl, this.as);
+		}
 
-		let imageEl = this._element;
-		const cover = this._cover;
-		const container = this._container === this._cover ? null : this._container;
+		// --- update image ---
+		const cover = this.#cover;
+		const container = this.#container === this.#cover ? null : this.#container;
 
 		// check size
 		let changeSize;
@@ -604,14 +701,14 @@ class Image_ extends EditorInjector {
 		// caption
 		let modifiedCaption = false;
 		if (this.captionCheckEl.checked) {
-			if (!this._caption) {
-				this._caption = Figure.CreateCaption(cover, this.lang.caption);
+			if (!this.#caption) {
+				this.#caption = Figure.CreateCaption(cover, this.lang.caption);
 				modifiedCaption = true;
 			}
 		} else {
-			if (this._caption) {
-				dom.utils.removeItem(this._caption);
-				this._caption = null;
+			if (this.#caption) {
+				dom.utils.removeItem(this.#caption);
+				this.#caption = null;
 				modifiedCaption = true;
 			}
 		}
@@ -620,42 +717,42 @@ class Image_ extends EditorInjector {
 		let isNewAnchor = false;
 		const anchor = this.anchor.create(true);
 		if (anchor) {
-			if (this._linkElement !== anchor || !container.contains(anchor)) {
-				this._linkElement = anchor.cloneNode(false);
-				cover.insertBefore(this._setAnchor(imageEl, this._linkElement), this._caption);
+			if (this.#linkElement !== anchor || !container.contains(anchor)) {
+				this.#linkElement = anchor.cloneNode(false);
+				cover.insertBefore(this.#setAnchor(imageEl, this.#linkElement), this.#caption);
 				isNewAnchor = true;
 			}
-		} else if (this._linkElement !== null) {
-			if (cover.contains(this._linkElement)) {
+		} else if (this.#linkElement !== null) {
+			if (cover.contains(this.#linkElement)) {
 				const newEl = imageEl.cloneNode(true);
-				cover.removeChild(this._linkElement);
-				cover.insertBefore(newEl, this._caption);
+				cover.removeChild(this.#linkElement);
+				cover.insertBefore(newEl, this.#caption);
 				imageEl = newEl;
 			}
 		}
 
-		// size
-		if (this._resizing && changeSize) {
-			this._applySize(width, height);
-		}
-
 		if (isNewAnchor) {
 			dom.utils.removeItem(anchor);
 		}
 
+		// size
+		if (this.#resizing && changeSize) {
+			this.#applySize(width, height);
+		}
+
 		// transform
-		if (modifiedCaption || (!this._onlyPercentage && changeSize)) {
+		if (modifiedCaption || (!this.#onlyPercentage && changeSize)) {
 			if (/\d+/.test(imageEl.style.height) || (this.figure.isVertical && this.captionCheckEl.checked)) {
 				if (/auto|%$/.test(width) || /auto|%$/.test(height)) {
 					this.figure.deleteTransform(imageEl);
-				} else {
+				} else if (!this.#resizing || !changeSize || !this.figure.isVertical) {
 					this.figure.setTransform(imageEl, width, height, 0);
 				}
 			}
 		}
 
 		// align
-		this.figure.setAlign(imageEl, this._align);
+		this.figure.setAlign(imageEl, this.#align);
 
 		// select
 		imageEl.onload = () => {
@@ -664,42 +761,31 @@ class Image_ extends EditorInjector {
 	}
 
 	/**
-	 * @private
 	 * @description Validates the image size and applies necessary transformations.
 	 * @param {string} width - The width of the image.
 	 * @param {string} height - The height of the image.
 	 */
-	_fileCheck(width, height) {
-		if (!width) width = this.inputX?.value || 'auto';
-		if (!height) height = this.inputY?.value || 'auto';
+	#fileCheck(width, height) {
+		width ||= this.inputX?.value || 'auto';
+		height ||= this.inputY?.value || 'auto';
 
-		let imageEl = this._element;
-		let cover = this._cover;
+		let imageEl = this.#element;
+		let cover = this.#cover;
 		let inlineCover = null;
-		let container = this._container === this._cover ? null : this._container;
+		let container = this.#container === this.#cover ? null : this.#container;
 		let isNewContainer = false;
 
 		if (!cover || !container) {
 			isNewContainer = true;
-			imageEl = this._element.cloneNode(true);
+			imageEl = this.#element.cloneNode(true);
 			const figureInfo =
-				this.pluginOptions.useFormatType && width !== 'auto' && (/^span$/i.test(this._element.parentElement?.nodeName) || this.format.isLine(this._element.parentElement))
+				this.pluginOptions.useFormatType && width !== 'auto' && (/^span$/i.test(this.#element.parentElement?.nodeName) || this.format.isLine(this.#element.parentElement))
 					? Figure.CreateInlineContainer(imageEl, 'se-image-container')
 					: Figure.CreateContainer(imageEl, 'se-image-container');
 			cover = figureInfo.cover;
 			container = figureInfo.container;
 			inlineCover = figureInfo.inlineCover;
-			this.figure.open(imageEl, { nonResizing: true, nonSizeInfo: false, nonBorder: false, figureTarget: false, __fileManagerInfo: true });
-		}
-
-		// check size
-		let changeSize;
-		const x = numbers.is(width) ? width + this.sizeUnit : width;
-		const y = numbers.is(height) ? height + this.sizeUnit : height;
-		if (/%$/.test(imageEl.style.width)) {
-			changeSize = x !== container.style.width || y !== container.style.height;
-		} else {
-			changeSize = x !== imageEl.style.width || y !== imageEl.style.height;
+			this.figure.open(imageEl, { nonResizing: true, nonSizeInfo: false, nonBorder: false, figureTarget: false, infoOnly: true });
 		}
 
 		// alt
@@ -709,14 +795,14 @@ class Image_ extends EditorInjector {
 		let modifiedCaption = false;
 		if (!inlineCover) {
 			if (this.captionCheckEl.checked) {
-				if (!this._caption || isNewContainer) {
-					this._caption = Figure.CreateCaption(cover, this.lang.caption);
+				if (!this.#caption || isNewContainer) {
+					this.#caption = Figure.CreateCaption(cover, this.lang.caption);
 					modifiedCaption = true;
 				}
 			} else {
-				if (this._caption) {
-					dom.utils.removeItem(this._caption);
-					this._caption = null;
+				if (this.#caption) {
+					dom.utils.removeItem(this.#caption);
+					this.#caption = null;
 					modifiedCaption = true;
 				}
 			}
@@ -726,46 +812,48 @@ class Image_ extends EditorInjector {
 		let isNewAnchor = null;
 		const anchor = this.anchor.create(true);
 		if (anchor) {
-			if (this._linkElement !== anchor || (isNewContainer && !container.contains(anchor))) {
-				this._linkElement = anchor.cloneNode(false);
-				cover.insertBefore(this._setAnchor(imageEl, this._linkElement), this._caption);
-				isNewAnchor = this._element;
+			if (this.#linkElement !== anchor || (isNewContainer && !container.contains(anchor))) {
+				this.#linkElement = anchor.cloneNode(false);
+				cover.insertBefore(this.#setAnchor(imageEl, this.#linkElement), this.#caption);
+				isNewAnchor = this.#element;
 			}
-		} else if (this._linkElement !== null) {
-			if (cover.contains(this._linkElement)) {
+		} else if (this.#linkElement !== null) {
+			if (cover.contains(this.#linkElement)) {
 				const newEl = imageEl.cloneNode(true);
-				cover.removeChild(this._linkElement);
-				cover.insertBefore(newEl, this._caption);
+				cover.removeChild(this.#linkElement);
+				cover.insertBefore(newEl, this.#caption);
 				imageEl = newEl;
 			}
 		}
 
 		if (isNewContainer) {
-			imageEl = this._element;
-			this.figure.retainFigureFormat(container, this._element, isNewAnchor ? anchor : null, this.fileManager);
-			this._element = imageEl = container.querySelector('img');
-			this._cover = cover;
-			this._container = container;
+			imageEl = this.#element;
+			this.figure.retainFigureFormat(container, this.#element, isNewAnchor ? anchor : null, this.fileManager);
+			this.#element = imageEl = container.querySelector('img');
+			this.#cover = cover;
+			this.#container = container;
 		}
 
 		// size
-		if (this._resizing && changeSize) {
-			this._applySize(width, height);
-		}
+		imageEl.style.width = '';
+		imageEl.style.height = '';
+		imageEl.removeAttribute('width');
+		imageEl.removeAttribute('height');
+		this.#applySize(width, height);
 
 		if (isNewAnchor) {
 			if (!isNewContainer) {
 				dom.utils.removeItem(anchor);
 			} else {
 				dom.utils.removeItem(isNewAnchor);
-				if (dom.query.getListChildren(anchor, (current) => /IMG/i.test(current.tagName)).length === 0) {
+				if (dom.query.getListChildren(anchor, (current) => /IMG/i.test(current.tagName), null).length === 0) {
 					dom.utils.removeItem(anchor);
 				}
 			}
 		}
 
 		// transform
-		if (modifiedCaption || (!this._onlyPercentage && changeSize)) {
+		if (modifiedCaption || !this.#onlyPercentage) {
 			if (/\d+/.test(imageEl.style.height) || (this.figure.isVertical && this.captionCheckEl.checked)) {
 				if (/auto|%$/.test(width) || /auto|%$/.test(height)) {
 					this.figure.deleteTransform(imageEl);
@@ -776,56 +864,10 @@ class Image_ extends EditorInjector {
 		}
 
 		// align
-		this.figure.setAlign(imageEl, this._align);
+		this.figure.setAlign(imageEl, this.#align);
 	}
 
 	/**
-	 * @description Opens a specific tab inside the modal.
-	 * @param {MouseEvent|string} e - The event object or tab name.
-	 * @returns {boolean} - Whether the tab was successfully opened.
-	 */
-	#OpenTab(e) {
-		const modalForm = this.modal.form;
-		const targetElement = typeof e === 'string' ? modalForm.querySelector('._se_tab_link') : dom.query.getEventTarget(e);
-
-		if (!/^BUTTON$/i.test(targetElement.tagName)) {
-			return false;
-		}
-
-		// Declare all variables
-		const tabName = targetElement.getAttribute('data-tab-link');
-		let i;
-
-		// Get all elements with class="tabcontent" and hide them
-		const tabContent = /** @type {HTMLCollectionOf<HTMLElement>}*/ (modalForm.getElementsByClassName('_se_tab_content'));
-		for (i = 0; i < tabContent.length; i++) {
-			tabContent[i].style.display = 'none';
-		}
-
-		// Get all elements with class="tablinks" and remove the class "active"
-		const tabLinks = modalForm.getElementsByClassName('_se_tab_link');
-		for (i = 0; i < tabLinks.length; i++) {
-			dom.utils.removeClass(tabLinks[i], 'active');
-		}
-
-		// Show the current tab, and add an "active" class to the button that opened the tab
-		/** @type {HTMLElement}*/ (modalForm.querySelector('._se_tab_content_' + tabName)).style.display = 'block';
-		dom.utils.addClass(targetElement, 'active');
-
-		// focus
-		if (e !== 'init') {
-			if (tabName === 'image') {
-				this.focusElement.focus();
-			} else if (tabName === 'url') {
-				this.anchor.urlInput.focus();
-			}
-		}
-
-		return false;
-	}
-
-	/**
-	 * @private
 	 * @description Creates a new image component based on provided parameters.
 	 * @param {string} src - The image source URL.
 	 * @param {?Node} anchor - Optional anchor wrapping the image.
@@ -834,25 +876,26 @@ class Image_ extends EditorInjector {
 	 * @param {string} align - Image alignment.
 	 * @param {{name: string, size: number}} file - File metadata.
 	 * @param {string} alt - Alternative text.
+	 * @param {boolean} isLast - Indicates if this is the last image in a batch (for scroll and insert behavior).
 	 */
-	_produce(src, anchor, width, height, align, file, alt) {
+	#produce(src, anchor, width, height, align, file, alt, isLast) {
 		if (this.as !== 'inline') {
-			this.create(src, anchor, width, height, align, file, alt);
+			this.create(src, anchor, width, height, align, file, alt, isLast);
 		} else {
-			this.createInline(src, anchor, width, height, file, alt);
+			this.createInline(src, anchor, width, height, file, alt, isLast);
 		}
 	}
 
 	/**
-	 * @private
 	 * @description Applies the specified width and height to the image.
 	 * @param {string} w - Image width.
 	 * @param {string} h - Image height.
 	 */
-	_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 += '%';
 		}
@@ -860,102 +903,24 @@ class Image_ extends EditorInjector {
 	}
 
 	/**
-	 * @description Creates a new image component, wraps it in a figure container with an optional anchor,
-	 * - applies size and alignment settings, and inserts it into the editor.
-	 * @param {string} src - The URL of the image to be inserted.
-	 * @param {?Node} anchor - An optional anchor element to wrap the image. If provided, a clone is used.
-	 * @param {string} width - The width value to be applied to the image.
-	 * @param {string} height - The height value to be applied to the image.
-	 * @param {string} align - The alignment setting for the image (e.g., 'left', 'center', 'right').
-	 * @param {{name: string, size: number}} file - File metadata associated with the image
-	 * @param {string} alt - The alternative text for the image.
-	 */
-	create(src, anchor, width, height, align, file, alt) {
-		/** @type {HTMLImageElement} */
-		const oImg = dom.utils.createElement('IMG');
-		oImg.src = src;
-		oImg.alt = alt;
-		anchor = this._setAnchor(oImg, anchor ? anchor.cloneNode(false) : null);
-
-		const figureInfo = Figure.CreateContainer(anchor, 'se-image-container');
-		const cover = figureInfo.cover;
-		const container = figureInfo.container;
-
-		// caption
-		if (this.captionCheckEl.checked) {
-			this._caption = Figure.CreateCaption(cover, this.lang.caption);
-		}
-
-		this._element = oImg;
-		this._cover = cover;
-		this._container = container;
-		this.figure.open(oImg, { nonResizing: this._nonResizing, nonSizeInfo: false, nonBorder: false, figureTarget: false, __fileManagerInfo: true });
-
-		// set size
-		this._applySize(width, height);
-
-		// align
-		this.figure.setAlign(oImg, align);
-
-		this.fileManager.setFileData(oImg, file);
-
-		oImg.onload = this.#OnloadImg.bind(this, oImg, this._svgDefaultSize, container);
-		this.component.insert(container, { skipCharCount: false, skipSelection: !this.options.get('componentAutoSelect'), skipHistory: false });
-	}
-
-	/**
-	 * @description Creates a new inline image component, wraps it in an inline figure container with an optional anchor,
-	 * - applies size settings, and inserts it into the editor.
-	 * @param {string} src - The URL of the image to be inserted.
-	 * @param {?Node} anchor - An optional anchor element to wrap the image. If provided, a clone is used.
-	 * @param {string} width - The width value to be applied to the image.
-	 * @param {string} height - The height value to be applied to the image.
-	 * @param {{name: string, size: number}} file - File metadata associated with the image
-	 * @param {string} alt - The alternative text for the image.
-	 */
-	createInline(src, anchor, width, height, file, alt) {
-		/** @type {HTMLImageElement} */
-		const oImg = dom.utils.createElement('IMG');
-		oImg.src = src;
-		oImg.alt = alt;
-		anchor = this._setAnchor(oImg, anchor ? anchor.cloneNode(false) : null);
-
-		const figureInfo = Figure.CreateInlineContainer(anchor, 'se-image-container');
-		const container = figureInfo.container;
-
-		this._element = oImg;
-		this._container = container;
-		this.figure.open(oImg, { nonResizing: this._nonResizing, nonSizeInfo: false, nonBorder: false, figureTarget: false, __fileManagerInfo: true });
-
-		// set size
-		this._applySize(width, height);
-
-		this.fileManager.setFileData(oImg, file);
-
-		oImg.onload = this.#OnloadImg.bind(this, oImg, this._svgDefaultSize, container);
-		this.component.insert(container, { skipCharCount: false, skipSelection: true, skipHistory: false });
-	}
-
-	/**
-	 * @private
 	 * @description Updates the image source URL.
 	 * @param {string} src - The new image source.
 	 * @param {HTMLImageElement} element - The image element.
 	 * @param {{ name: string, size: number }} file - File metadata.
 	 */
-	_updateSrc(src, element, file) {
+	#updateSrc(src, element, file) {
 		element.src = src;
 		this.fileManager.setFileData(element, file);
 		this.component.select(element, Image_.key);
 	}
 
 	/**
-	 * @private
 	 * @description Registers the uploaded image and inserts it into the editor.
 	 * @param {ImageInfo_image} info - Image info.
 	 * @param {Object<string, *>} response - Server response data.
 	 */
-	_register(info, response) {
+	#register(info, response) {
+		this.#produceIndex = 0;
 		const fileList = response.result;
 
 		for (let i = 0, len = fileList.length, file; i < len; i++) {
@@ -964,34 +929,44 @@ class Image_ extends EditorInjector {
 				size: fileList[i].size
 			};
 			if (info.isUpdate) {
-				this._updateSrc(fileList[i].url, info.element, file);
+				this.#updateSrc(fileList[i].url, info.element, file);
 				break;
 			} else {
-				this._produce(fileList[i].url, info.anchor, info.inputWidth, info.inputHeight, info.align, file, info.alt);
+				this.#produce(fileList[i].url, info.anchor, info.inputWidth, info.inputHeight, info.align, file, info.alt, i === len - 1);
 			}
 		}
 	}
 
 	/**
-	 * @private
 	 * @description Uploads the image to the server.
 	 * @param {ImageInfo_image} info - Image upload info.
 	 * @param {FileList} files - List of image files.
 	 */
-	_serverUpload(info, files) {
+	#serverUpload(info, files) {
 		if (!files) return;
 
 		// server upload
 		const imageUploadUrl = this.pluginOptions.uploadUrl;
 		if (typeof imageUploadUrl === 'string' && imageUploadUrl.length > 0) {
-			this.fileManager.upload(imageUploadUrl, this.pluginOptions.uploadHeaders, files, this.#UploadCallBack.bind(this, info), this._error.bind(this));
+			this.fileManager.upload(imageUploadUrl, this.pluginOptions.uploadHeaders, files, this.#UploadCallBack.bind(this, info), this.#error.bind(this));
 		} else {
-			this._setBase64(files, info.anchor, info.inputWidth, info.inputHeight, info.align, info.alt, info.isUpdate);
+			this.#setBase64(files, info.anchor, info.inputWidth, info.inputHeight, info.align, info.alt, info.isUpdate);
 		}
 	}
 
 	/**
-	 * @private
+	 * @description Handles image upload via URL.
+	 * @param {*} info - Image information.
+	 */
+	#urlUpload(info) {
+		this.#produceIndex = 0;
+		const infoUrl = info.url;
+
+		if (this.modal.isUpdate) this.#updateSrc(infoUrl, info.element, info.files);
+		else this.#produce(infoUrl, info.anchor, info.inputWidth, info.inputHeight, info.align, info.files, info.alt, true);
+	}
+
+	/**
 	 * @description Converts an image file to Base64 and inserts it into the editor.
 	 * @param {FileList|File[]} files - List of image files.
 	 * @param {?Node} anchor - Optional anchor wrapping the image.
@@ -1001,7 +976,7 @@ class Image_ extends EditorInjector {
 	 * @param {string} alt - Alternative text.
 	 * @param {boolean} isUpdate - Whether the image is being updated.
 	 */
-	_setBase64(files, anchor, width, height, align, alt, isUpdate) {
+	#setBase64(files, anchor, width, height, align, alt, isUpdate) {
 		try {
 			const filesLen = this.modal.isUpdate ? 1 : files.length;
 
@@ -1014,28 +989,26 @@ class Image_ extends EditorInjector {
 			this._base64RenderIndex = filesLen;
 			const filesStack = new Array(filesLen);
 
-			if (this._resizing) {
+			if (this.#resizing) {
 				this.inputX.value = width;
 				this.inputY.value = height;
 			}
 
-			for (let i = 0, reader, file; i < filesLen; i++) {
+			for (let i = 0, renderFunc = this.#onRenderBase64.bind(this), reader, file; i < filesLen; i++) {
 				reader = new FileReader();
 				file = files[i];
 
-				reader.onload = function (on_reader, update, updateElement, on_file, index) {
+				reader.onload = function (loadCallback, on_reader, update, updateElement, on_file, index) {
 					filesStack[index] = {
 						result: on_reader.result,
 						file: on_file
 					};
 
 					if (--this._base64RenderIndex === 0) {
-						this._onRenderBase64(update, filesStack, updateElement, anchor, width, height, align, alt);
+						loadCallback(update, filesStack, updateElement, anchor, width, height, align, alt);
 						this.ui.hideLoading();
 					}
-				}.bind(this, reader, isUpdate, this._element, file, i);
-				// se-ts-ignore
-				this._onRenderBase64;
+				}.bind(this, renderFunc, reader, isUpdate, this.#element, file, i);
 
 				reader.readAsDataURL(file);
 			}
@@ -1046,7 +1019,6 @@ class Image_ extends EditorInjector {
 	}
 
 	/**
-	 * @private
 	 * @description Inserts an image using a Base64-encoded string.
 	 * @param {boolean} update - Whether the image is being updated.
 	 * @param {Array<{result: string, file: { name: string, size: number }}>} filesStack - Stack of Base64-encoded files.
@@ -1059,24 +1031,25 @@ class Image_ extends EditorInjector {
 	 * @param {string} align - Image alignment.
 	 * @param {string} alt - Alternative text.
 	 */
-	_onRenderBase64(update, filesStack, updateElement, anchor, width, height, align, alt) {
+	#onRenderBase64(update, filesStack, updateElement, anchor, width, height, align, alt) {
+		this.#produceIndex = 0;
+
 		for (let i = 0, len = filesStack.length; i < len; i++) {
 			if (update) {
-				this._updateSrc(filesStack[i].result, updateElement, filesStack[i].file);
+				this.#updateSrc(filesStack[i].result, updateElement, filesStack[i].file);
 			} else {
-				this._produce(filesStack[i].result, anchor, width, height, align, filesStack[i].file, alt);
+				this.#produce(filesStack[i].result, anchor, width, height, align, filesStack[i].file, alt, i === len - 1);
 			}
 		}
 	}
 
 	/**
-	 * @private
 	 * @description Wraps an image element with an anchor if provided.
 	 * @param {Node} imgTag - The image element to be wrapped.
 	 * @param {?Node} anchor - The anchor element to wrap around the image. If null, returns the image itself.
 	 * @returns {Node} - The wrapped image inside the anchor or the original image element.
 	 */
-	_setAnchor(imgTag, anchor) {
+	#setAnchor(imgTag, anchor) {
 		if (anchor) {
 			anchor.appendChild(imgTag);
 			return anchor;
@@ -1086,12 +1059,11 @@ class Image_ extends EditorInjector {
 	}
 
 	/**
-	 * @private
 	 * @description Handles errors during image upload and displays appropriate messages.
 	 * @param {Object<string, *>} response - The error response from the server.
 	 * @returns {Promise<void>}
 	 */
-	async _error(response) {
+	async #error(response) {
 		const message = await this.triggerEvent('onImageUploadError', { error: response });
 		const err = message === NO_EVENT ? response.errorMessage : message || response.errorMessage;
 		this.ui.alertOpen(err, 'error');
@@ -1107,13 +1079,58 @@ class Image_ extends EditorInjector {
 		if ((await this.triggerEvent('imageUploadHandler', { xmlHttp, info })) === NO_EVENT) {
 			const response = JSON.parse(xmlHttp.responseText);
 			if (response.errorMessage) {
-				this._error(response);
+				this.#error(response);
 			} else {
-				this._register(info, response);
+				this.#register(info, response);
 			}
 		}
 	}
 
+	/**
+	 * @description Opens a specific tab inside the modal.
+	 * @param {MouseEvent|string} e - The event object or tab name.
+	 * @returns {boolean} - Whether the tab was successfully opened.
+	 */
+	#OpenTab(e) {
+		const modalForm = this.modal.form;
+		const targetElement = typeof e === 'string' ? modalForm.querySelector('._se_tab_link') : dom.query.getEventTarget(e);
+
+		if (!/^BUTTON$/i.test(targetElement.tagName)) {
+			return false;
+		}
+
+		// Declare all variables
+		const tabName = targetElement.getAttribute('data-tab-link');
+		let i;
+
+		// Get all elements with class="tabcontent" and hide them
+		const tabContent = /** @type {HTMLCollectionOf<HTMLElement>}*/ (modalForm.getElementsByClassName('_se_tab_content'));
+		for (i = 0; i < tabContent.length; i++) {
+			tabContent[i].style.display = 'none';
+		}
+
+		// Get all elements with class="tablinks" and remove the class "active"
+		const tabLinks = modalForm.getElementsByClassName('_se_tab_link');
+		for (i = 0; i < tabLinks.length; i++) {
+			dom.utils.removeClass(tabLinks[i], 'active');
+		}
+
+		// Show the current tab, and add an "active" class to the button that opened the tab
+		/** @type {HTMLElement}*/ (modalForm.querySelector('._se_tab_content_' + tabName)).style.display = 'block';
+		dom.utils.addClass(targetElement, 'active');
+
+		// focus
+		if (e !== 'init') {
+			if (tabName === 'image') {
+				this.focusElement.focus();
+			} else if (tabName === 'url') {
+				this.anchor.urlInput.focus();
+			}
+		}
+
+		return false;
+	}
+
 	#RemoveSelectedFiles() {
 		this.imgInputFile.value = '';
 		if (this.imgUrlFile) {
@@ -1131,10 +1148,10 @@ class Image_ extends EditorInjector {
 			return;
 		}
 
-		if (xy === 'x' && this._onlyPercentage && e.target.value > 100) {
+		if (xy === 'x' && this.#onlyPercentage && e.target.value > 100) {
 			e.target.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 {
@@ -1144,36 +1161,31 @@ class Image_ extends EditorInjector {
 	}
 
 	#OnChangeRatio() {
-		this._ratio = this.proportion.checked
-			? Figure.GetRatio(this.inputX.value, this.inputY.value, this.sizeUnit)
-			: {
-					w: 1,
-					h: 1
-			  };
+		this.#ratio = this.proportion.checked ? Figure.GetRatio(this.inputX.value, this.inputY.value, this.sizeUnit) : { w: 0, h: 0 };
 	}
 
 	#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;
 		}
 	}
 
 	#OnClickAsButton({ target }) {
-		this._activeAsInline(target.getAttribute('data-command') === 'asInline');
+		this.#activeAsInline(target.getAttribute('data-command') === 'asInline');
 	}
 
 	#OnLinkPreview(e) {
 		const value = e.target.value.trim();
-		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
+				: !value.includes('://')
+					? '/' + value
+					: value;
 	}
 
 	#OnfileInputChange({ target }) {
@@ -1195,33 +1207,23 @@ class Image_ extends EditorInjector {
 
 	#SetUrlInput(target) {
 		this.altText.value = target.getAttribute('data-value') || target.alt;
-		this._linkValue = this.previewSrc.textContent = this.imgUrlFile.value = target.getAttribute('data-command') || target.src;
+		this.#linkValue = this.previewSrc.textContent = this.imgUrlFile.value = target.getAttribute('data-command') || target.src;
 		this.imgUrlFile.focus();
 	}
 
 	#OnloadImg(oImg, _svgDefaultSize, container) {
+		this.#produceIndex--;
+		delete oImg.onload;
+
 		// svg exception handling
-		if (oImg.offsetWidth === 0) this._applySize(_svgDefaultSize, '');
-		if (this.options.get('componentAutoSelect')) {
-			this.component.select(oImg, Image_.key);
-		} else {
-			if (!this.component.isInline(container)) {
-				const line = this.format.addLine(container, null);
-				if (line) this.selection.setRange(line, 0, line, 0);
-			} else {
-				const r = this.selection.getNearRange(container);
-				if (r) {
-					this.selection.setRange(r.container, r.offset, r.container, r.offset);
-				} else {
-					this.component.select(oImg, Image_.key);
-				}
-			}
-		}
+		if (oImg.offsetWidth === 0) this.#applySize(_svgDefaultSize, '');
 
-		this.editor._iframeAutoHeight(this.editor.frameContext);
-		this.history.push(false);
+		if (this.#produceIndex === 0) {
+			this.component.applyInsertBehavior(container, null, this.pluginOptions.insertBehavior || this.options.get('componentInsertBehavior'));
 
-		delete oImg.onload;
+			this.editor._iframeAutoHeight(this.frameContext);
+			this.history.push(false);
+		}
 	}
 }