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

package/src/plugins/modal/video.js

@@ -1,7 +1,7 @@
 import EditorInjector from '../../editorInjector';
 import { Modal, Figure, FileManager } from '../../modules';
 import { dom, numbers, env, converter, keyCodeMap } from '../../helper';
-const { NO_EVENT } = env;
+const { _w, NO_EVENT } = env;
 
 /**
  * @typedef {import('../../events').VideoInfo} VideoInfo_video
@@ -37,6 +37,11 @@ const { NO_EVENT } = env;
  * @property {Array<RegExp>} [urlPatterns] - Additional URL patterns for video embedding.
  * @property {Array<string>} [extensions] - Additional file extensions to be recognized for video uploads.
  * @property {FigureControls_video} [controls] - Figure controls.
+ * @property {__se__ComponentInsertBehaviorType} [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.
  */
 
 /**
@@ -63,6 +68,22 @@ class Video extends EditorInjector {
 		return null;
 	}
 
+	#linkValue;
+	#align;
+	#frameRatio;
+	#defaultRatio;
+	#defaultSizeX;
+	#defaultSizeY;
+	#element;
+	#container;
+	#ratio;
+	#origin_w;
+	#origin_h;
+	#resizing;
+	#onlyPercentage;
+	#nonResizing;
+	#initRatioValue;
+
 	/**
 	 * @constructor
 	 * @param {__se__EditorCore} editor - The root editor instance
@@ -95,13 +116,14 @@ class Video extends EditorInjector {
 			videoTagAttributes: pluginOptions.videoTagAttributes || null,
 			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 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.alignForm.style.display = 'none';
@@ -122,26 +144,27 @@ class Video extends EditorInjector {
 		this.videoUrlFile = modalEl.videoUrlFile;
 		this.focusElement = this.videoUrlFile || this.videoInputFile;
 		this.previewSrc = modalEl.previewSrc;
-		this._linkValue = '';
-		this._align = 'none';
-		this._frameRatio = defaultRatio;
-		this._defaultRatio = defaultRatio;
-		this._defaultSizeX = '100%';
-		this._defaultSizeY = this.pluginOptions.defaultRatio * 100 + '%';
 		this.sizeUnit = sizeUnit;
 		this.proportion = null;
 		this.frameRatioOption = 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 === '100%' ? '' : this.pluginOptions.defaultWidth;
-		this._origin_h = this.pluginOptions.defaultHeight === defaultRatio ? '' : this.pluginOptions.defaultHeight;
-		this._resizing = this.pluginOptions.canResize;
-		this._onlyPercentage = this.pluginOptions.percentageOnlySize;
-		this._nonResizing = !this._resizing || !this.pluginOptions.showHeightInput || this._onlyPercentage;
+
+		this.#linkValue = '';
+		this.#align = 'none';
+		this.#frameRatio = defaultRatio;
+		this.#defaultRatio = defaultRatio;
+		this.#defaultSizeX = '100%';
+		this.#defaultSizeY = this.pluginOptions.defaultRatio * 100 + '%';
+		this.#element = null;
+		this.#container = null;
+		this.#ratio = { w: 0, h: 0 };
+		this.#origin_w = this.pluginOptions.defaultWidth === '100%' ? '' : this.pluginOptions.defaultWidth;
+		this.#origin_h = this.pluginOptions.defaultHeight === defaultRatio ? '' : this.pluginOptions.defaultHeight;
+		this.#resizing = this.pluginOptions.canResize;
+		this.#onlyPercentage = this.pluginOptions.percentageOnlySize;
+		this.#nonResizing = !this.#resizing || !this.pluginOptions.showHeightInput || this.#onlyPercentage;
+
 		this.query = {
 			youtube: {
 				pattern: /youtu\.?be/i,
@@ -195,7 +218,8 @@ class Video extends EditorInjector {
 		if (this.videoUrlFile) this.eventManager.addEvent(this.videoUrlFile, 'input', this.#OnLinkPreview.bind(this));
 		if (this.videoInputFile && this.videoUrlFile) this.eventManager.addEvent(this.videoInputFile, 'change', this.#OnfileInputChange.bind(this));
 
-		if (this._resizing) {
+		if (this.#resizing) {
+			this.#initRatioValue = null;
 			this.proportion = modalEl.proportion;
 			this.frameRatioOption = modalEl.frameRatioOption;
 			this.inputX = modalEl.inputX;
@@ -237,9 +261,9 @@ class Video extends EditorInjector {
 	 */
 	on(isUpdate) {
 		if (!isUpdate) {
-			if (this._resizing) {
-				this.inputX.value = this._origin_w = this.pluginOptions.defaultWidth === this._defaultSizeX ? '' : this.pluginOptions.defaultWidth;
-				this.inputY.value = this._origin_h = this.pluginOptions.defaultHeight === this._defaultSizeY ? '' : this.pluginOptions.defaultHeight;
+			if (this.#resizing) {
+				this.inputX.value = this.#origin_w = this.pluginOptions.defaultWidth === this.#defaultSizeX ? '' : this.pluginOptions.defaultWidth;
+				this.inputY.value = this.#origin_h = this.pluginOptions.defaultHeight === this.#defaultSizeY ? '' : this.pluginOptions.defaultHeight;
 				this.proportion.disabled = true;
 			}
 			if (this.videoInputFile && this.pluginOptions.allowMultiple) this.videoInputFile.setAttribute('multiple', 'multiple');
@@ -247,8 +271,9 @@ class Video extends EditorInjector {
 			if (this.videoInputFile && this.pluginOptions.allowMultiple) this.videoInputFile.removeAttribute('multiple');
 		}
 
-		if (this._resizing) {
-			this._setRatioSelect(this._origin_h || this._defaultRatio);
+		if (this.#resizing) {
+			this.#setRatioSelect(this.figure.isVertical ? '' : this.#origin_h || this.#defaultRatio);
+			this.#initRatioValue = this.frameRatioOption?.value;
 		}
 	}
 
@@ -276,16 +301,16 @@ class Video extends EditorInjector {
 	 * @returns {Promise<boolean>} Success / failure
 	 */
 	async modalAction() {
-		this._align = /** @type {HTMLInputElement} */ (this.modal.form.querySelector('input[name="suneditor_video_radio"]:checked')).value;
+		this.#align = /** @type {HTMLInputElement} */ (this.modal.form.querySelector('input[name="suneditor_video_radio"]:checked')).value;
 
 		let result = false;
 		if (this.videoInputFile && this.videoInputFile.files.length > 0) {
 			result = await this.submitFile(this.videoInputFile.files);
-		} else if (this.videoUrlFile && this._linkValue.length > 0) {
-			result = await this.submitURL(this._linkValue);
+		} else if (this.videoUrlFile && this.#linkValue.length > 0) {
+			result = await this.submitURL(this.#linkValue);
 		}
 
-		if (result) this._w.setTimeout(this.component.select.bind(this.component, this._element, Video.key), 0);
+		if (result) _w.setTimeout(this.component.select.bind(this.component, this.#element, Video.key), 0);
 
 		return result;
 	}
@@ -312,11 +337,11 @@ class Video extends EditorInjector {
 				const figureInfo = Figure.GetContainer(element);
 				if (figureInfo && figureInfo.container && figureInfo.cover) return;
 
-				this._ready(element);
+				this.#ready(element, true);
 				const line = this.format.getLine(element);
-				if (line) this._align = line.style.textAlign || line.style.float;
+				if (line) this.#align = line.style.textAlign || line.style.float;
 
-				this._update(element);
+				this.#fixTagStructure(element);
 			}
 		};
 	}
@@ -328,22 +353,22 @@ class Video extends EditorInjector {
 	init() {
 		Modal.OnChangeFile(this.fileModalWrapper, []);
 		if (this.videoInputFile) this.videoInputFile.value = '';
-		if (this.videoUrlFile) this._linkValue = this.previewSrc.textContent = this.videoUrlFile.value = '';
+		if (this.videoUrlFile) this.#linkValue = this.previewSrc.textContent = this.videoUrlFile.value = '';
 		if (this.videoInputFile && this.videoUrlFile) {
 			this.videoUrlFile.disabled = false;
 			this.previewSrc.style.textDecoration = '';
 		}
 
 		/** @type {HTMLInputElement} */ (this.modal.form.querySelector('input[name="suneditor_video_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;
-			this._setRatioSelect(this._defaultRatio);
+			this.#setRatioSelect(this.#defaultRatio);
 		}
 	}
 
@@ -353,60 +378,7 @@ class Video extends EditorInjector {
 	 * @param {HTMLIFrameElement|HTMLVideoElement} 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 {HTMLIFrameElement|HTMLVideoElement} 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._element = target;
-		this._cover = figureInfo.cover;
-		this._container = figureInfo.container;
-		this._align = figureInfo.align;
-		target.style.float = '';
-
-		this._origin_w = String(figureInfo.width || figureInfo.originWidth || figureInfo.w || '');
-		this._origin_h = String(figureInfo.height || figureInfo.originHeight || figureInfo.h || '');
-
-		let w = figureInfo.width || figureInfo.w || this._origin_w || '';
-		const h = figureInfo.height || figureInfo.h || this._origin_h || '';
-
-		if (this.videoUrlFile) this._linkValue = this.previewSrc.textContent = this.videoUrlFile.value = this._element.src || this._element.querySelector('source')?.src || '';
-
-		/** @type {HTMLInputElement} */
-		const activeAlgin = this.modal.form.querySelector('input[name="suneditor_video_radio"][value="' + this._align + '"]') || this.modal.form.querySelector('input[name="suneditor_video_radio"][value="none"]');
-		activeAlgin.checked = true;
-
-		if (!this._resizing) return;
-
-		const percentageRotation = this._onlyPercentage && this.figure.isVertical;
-		if (this._onlyPercentage) {
-			w = numbers.get(w, 2);
-			if (w > 100) w = 100;
-		}
-		this.inputX.value = String(w === 'auto' ? '' : w);
-
-		if (!this._onlyPercentage) {
-			const infoH = percentageRotation ? '' : figureInfo.height;
-			this.inputY.value = String(infoH === 'auto' ? '' : infoH);
-		}
-
-		if (!this._setRatioSelect(h)) this.inputY.value = String(this._onlyPercentage ? numbers.get(h, 2) : 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 };
+		this.#ready(target);
 	}
 
 	/**
@@ -416,18 +388,18 @@ class Video 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('onVideoDeleteBefore', { element: targetEl, container, align: this._align, url: this._linkValue });
+		const message = await this.triggerEvent('onVideoDeleteBefore', { element: targetEl, container, align: this.#align, 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) {
@@ -537,56 +509,55 @@ class Video extends EditorInjector {
 	 * @param {string} align - The alignment to apply to the video element (e.g., 'left', 'center', 'right').
 	 * @param {boolean} isUpdate - Indicates whether this is an update to an existing component (true) or a new creation (false).
 	 * @param {{name: string, size: number}} file - File metadata associated with the video
+	 * @param {boolean} isLast - Indicates whether this is the last file in the batch (used for scroll and insert actions).
 	 */
-	create(oFrame, src, width, height, align, isUpdate, file) {
-		let cover = null;
+	create(oFrame, src, width, height, align, isUpdate, file, isLast) {
 		let container = null;
 
 		/** 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();
 					newTag.src = src;
 					oFrame.replaceWith(newTag);
-					this._element = oFrame = newTag;
+					this.#element = oFrame = newTag;
 				} else if (/^video$/i.test(processUrl?.tag) && !/^video$/i.test(oFrame.nodeName)) {
 					const newTag = this.createVideoTag();
 					newTag.src = src;
 					oFrame.replaceWith(newTag);
-					this._element = oFrame = newTag;
+					this.#element = oFrame = newTag;
 				} else {
 					oFrame.src = src;
 				}
 			}
-			container = this._container;
-			cover = dom.query.getParentElement(oFrame, 'FIGURE');
+			container = this.#container;
 		} else {
 			/** create */
 			oFrame.src = src;
-			this._element = oFrame;
+			this.#element = oFrame;
 			const figure = Figure.CreateContainer(oFrame, 'se-video-container');
-			cover = figure.cover;
 			container = figure.container;
 		}
 
 		/** 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.#container = container;
+		this.figure.open(oFrame, { nonResizing: this.#nonResizing, nonSizeInfo: false, nonBorder: false, figureTarget: false, infoOnly: true });
+
+		width ||= this.#defaultSizeX;
+		height ||= this.#frameRatio;
 
-		width = width || this._defaultSizeX;
-		height = height || this._frameRatio;
 		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);
+			if (this.#initRatioValue !== this.frameRatioOption?.value) this.figure.deleteTransform();
+			this.#applySize(width, height);
 		}
 
 		// align
@@ -597,15 +568,11 @@ class Video extends EditorInjector {
 		this.fileManager.setFileData(oFrame, file);
 
 		if (!isUpdate) {
-			this.component.insert(container, { skipCharCount: false, skipSelection: true, skipHistory: false });
-			if (!this.options.get('componentAutoSelect')) {
-				const line = this.format.addLine(container, null);
-				if (line) this.selection.setRange(line, 0, line, 0);
-			}
+			this.component.insert(container, { scrollTo: isLast ? true : false, insertBehavior: isLast ? this.pluginOptions.insertBehavior : 'line' });
 			return;
 		}
 
-		if (this._resizing && changeSize && this.figure.isVertical) this.figure.setTransform(oFrame, width, height, 0);
+		if (!this.#resizing || !changeSize || !this.figure.isVertical) this.figure.setTransform(oFrame, width, height, 0);
 		this.history.push(false);
 	}
 
@@ -623,7 +590,7 @@ class Video extends EditorInjector {
 				iframeTag[key] = props[key];
 			}
 		}
-		this._setIframeAttrs(iframeTag);
+		this.#setIframeAttrs(iframeTag);
 		return iframeTag;
 	}
 
@@ -641,41 +608,10 @@ class Video extends EditorInjector {
 				videoTag[key] = props[key];
 			}
 		}
-		this._setTagAttrs(videoTag);
+		this.#setTagAttrs(videoTag);
 		return videoTag;
 	}
 
-	/**
-	 * @private
-	 * @description Sets the size of the video element.
-	 * @param {string|number} w - The width of the video.
-	 * @param {string|number} h - The height of the video.
-	 */
-	_applySize(w, h) {
-		if (!w) w = this.inputX?.value || this.pluginOptions.defaultWidth;
-		if (!h) h = this.inputY?.value || this.pluginOptions.defaultHeight;
-		if (this._onlyPercentage) {
-			if (!w) w = '100%';
-			else if (/%$/.test(w + '')) w += '%';
-		}
-		this.figure.setSize(w, h);
-	}
-
-	/**
-	 * @private
-	 * @description Retrieves video information including size and alignment.
-	 * @returns {*} Video information object.
-	 */
-	_getInfo() {
-		return {
-			inputWidth: this.inputX?.value || '',
-			inputHeight: this.inputY?.value || '',
-			align: this._align,
-			isUpdate: this.modal.isUpdate,
-			element: this._element
-		};
-	}
-
 	/**
 	 * @description Create an "video" component using the provided files.
 	 * @param {FileList|File[]} fileList File object list
@@ -692,7 +628,7 @@ class Video extends EditorInjector {
 			if (!/video/i.test(f.type)) continue;
 
 			s = f.size;
-			if (slngleSizeLimit && slngleSizeLimit > s) {
+			if (slngleSizeLimit > 0 && s > slngleSizeLimit) {
 				const err = '[SUNEDITOR.videoUpload.fail] Size of uploadable single file: ' + slngleSizeLimit / 1000 + 'KB';
 				const message = await this.triggerEvent('onVideoUploadError', {
 					error: err,
@@ -724,15 +660,13 @@ class Video extends EditorInjector {
 		const videoInfo = {
 			url: null,
 			files,
-			...this._getInfo()
+			...this.#getInfo()
 		};
 
-		const handler = function (infos, newInfos) {
+		const handler = function (uploadCallback, infos, newInfos) {
 			infos = newInfos || infos;
-			this._serverUpload(infos, infos.files);
-		}.bind(this, videoInfo);
-		// se-ts-ignore
-		this._serverUpload;
+			uploadCallback(infos, infos.files);
+		}.bind(this, this.#serverUpload.bind(this), videoInfo);
 
 		const result = await this.triggerEvent('onVideoUploadBefore', {
 			info: videoInfo,
@@ -752,8 +686,7 @@ class Video 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;
 
 		/** iframe source */
 		if (/^<iframe.*\/iframe>$/.test(url)) {
@@ -768,11 +701,11 @@ class Video extends EditorInjector {
 		}
 
 		const file = { name: url.split('/').pop(), size: 0 };
-		const videoInfo = { url, files: file, ...this._getInfo(), process: processUrl };
+		const videoInfo = { url, files: file, ...this.#getInfo(), process: processUrl };
 
 		const handler = function (infos, newInfos) {
 			infos = newInfos || infos;
-			this.create(this[/^iframe$/i.test(infos.process?.tag) ? 'createIframeTag' : 'createVideoTag'](), infos.url, infos.inputWidth, infos.inputHeight, infos.align, infos.isUpdate, infos.files);
+			this.create(this[/^iframe$/i.test(infos.process?.tag) ? 'createIframeTag' : 'createVideoTag'](), infos.url, infos.inputWidth, infos.inputHeight, infos.align, infos.isUpdate, infos.files, true);
 		}.bind(this, videoInfo);
 
 		const result = await this.triggerEvent('onVideoUploadBefore', {
@@ -790,106 +723,175 @@ class Video extends EditorInjector {
 	}
 
 	/**
-	 * @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 {HTMLIFrameElement|HTMLVideoElement} 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.#container = figureInfo.container;
+		this.#align = figureInfo.align;
+		target.style.float = '';
+
+		this.#origin_w = String(figureInfo.width || figureInfo.originWidth || figureInfo.w || '');
+		this.#origin_h = String(figureInfo.height || figureInfo.originHeight || figureInfo.h || '');
+
+		const h = figureInfo.height || figureInfo.h || this.#origin_h || '';
+
+		if (this.videoUrlFile) this.#linkValue = this.previewSrc.textContent = this.videoUrlFile.value = this.#element.src || this.#element.querySelector('source')?.src || '';
+
+		/** @type {HTMLInputElement} */
+		const activeAlgin = this.modal.form.querySelector('input[name="suneditor_video_radio"][value="' + this.#align + '"]') || this.modal.form.querySelector('input[name="suneditor_video_radio"][value="none"]');
+		activeAlgin.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;
+
+		if (!this.#setRatioSelect(h)) this.inputY.value = String(this.#onlyPercentage ? numbers.get(h, 2) : h);
+
+		this.proportion.checked = true;
+		this.inputX.disabled = percentageRotation ? true : false;
+		this.inputY.disabled = percentageRotation ? true : false;
+		this.proportion.disabled = percentageRotation ? true : false;
+
+		if (figureInfo.isVertical) {
+			this.proportion.checked = false;
+		}
+
+		this.#ratio = this.proportion.checked ? figureInfo.ratio : { w: 0, h: 0 };
+	}
+
+	/**
+	 * @description Sets the size of the video element.
+	 * @param {string|number} w - The width of the video.
+	 * @param {string|number} h - The height of the video.
+	 */
+	#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 += '%';
+		}
+		this.figure.setSize(w, h);
+	}
+
+	/**
+	 * @description Retrieves video information including size and alignment.
+	 * @returns {*} Video information object.
+	 */
+	#getInfo() {
+		return {
+			inputWidth: this.inputX?.value || '',
+			inputHeight: this.inputY?.value || '',
+			align: this.#align,
+			isUpdate: this.modal.isUpdate,
+			element: this.#element
+		};
+	}
+
+	/**
 	 * @description Updates the video component within the editor.
 	 * @param {HTMLIFrameElement|HTMLVideoElement} oFrame - The video element to update.
 	 */
-	_update(oFrame) {
+	#fixTagStructure(oFrame) {
 		if (!oFrame) return;
 
-		if (/^video$/i.test(oFrame.nodeName)) {
-			this._setTagAttrs(/** @type {HTMLVideoElement} */ (oFrame));
+		const isVideoTag = /^video$/i.test(oFrame.nodeName);
+		if (isVideoTag) {
+			this.#setTagAttrs(/** @type {HTMLVideoElement} */ (oFrame));
 		} else if (/^iframe$/i.test(oFrame.nodeName)) {
-			this._setIframeAttrs(/** @type {HTMLIFrameElement} */ (oFrame));
+			this.#setIframeAttrs(/** @type {HTMLIFrameElement} */ (oFrame));
 		}
 
-		let existElement = this.format.isBlock(oFrame.parentNode) || dom.check.isWysiwygFrame(oFrame.parentNode) ? oFrame : this.format.getLine(oFrame) || oFrame;
-
 		const prevFrame = oFrame;
 		const cloneFrame = /** @type {HTMLIFrameElement|HTMLVideoElement} */ (oFrame.cloneNode(true));
 		const figure = Figure.CreateContainer(cloneFrame, 'se-video-container');
 		const container = figure.container;
 
-		const figcaption = existElement.querySelector('figcaption');
+		const figcaption = Figure.GetContainer(prevFrame)?.container?.querySelector('figcaption');
 		let caption = null;
 		if (figcaption) {
-			caption = dom.utils.createElement('DIV');
+			caption = dom.utils.createElement('figcaption');
 			caption.innerHTML = figcaption.innerHTML;
 			dom.utils.removeItem(figcaption);
+			figure.cover.appendChild(caption);
 		}
 
 		// size
-		this.figure.open(cloneFrame, { nonResizing: this._nonResizing, nonSizeInfo: false, nonBorder: false, figureTarget: false, __fileManagerInfo: true });
+		this.figure.open(cloneFrame, { nonResizing: this.#nonResizing, nonSizeInfo: false, nonBorder: false, figureTarget: false, infoOnly: true });
 		const size = (cloneFrame.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.#defaultRatio || '';
+		this.#applySize(width, height);
 
 		// align
 		const format = this.format.getLine(prevFrame);
-		if (format) this._align = format.style.textAlign || format.style.float;
-		this.figure.setAlign(cloneFrame, 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);
-		}
+		if (format) this.#align = format.style.textAlign || format.style.float;
+		this.figure.setAlign(cloneFrame, this.#align);
 
-		if (caption) existElement.parentNode.insertBefore(caption, container.nextElementSibling);
+		this.figure.retainFigureFormat(container, this.#element, null, this.fileManager);
 
 		return cloneFrame;
 	}
 
 	/**
-	 * @private
 	 * @description Registers the uploaded video in the editor.
 	 * @param {VideoInfo_video} info - Video information object.
 	 * @param {Object<string, *>} response - Server response containing video data.
 	 */
-	_register(info, response) {
+	#register(info, response) {
 		const fileList = response.result;
 		const videoTag = this.createVideoTag();
 
 		for (let i = 0, len = fileList.length; i < len; i++) {
 			const ctag = info.isUpdate ? info.element : /** @type {HTMLIFrameElement|HTMLVideoElement} */ (videoTag.cloneNode(false));
-			this.create(ctag, fileList[i].url, info.inputWidth, info.inputHeight, info.align, info.isUpdate, {
-				name: fileList[i].name,
-				size: fileList[i].size
-			});
+			this.create(
+				ctag,
+				fileList[i].url,
+				info.inputWidth,
+				info.inputHeight,
+				info.align,
+				info.isUpdate,
+				{
+					name: fileList[i].name,
+					size: fileList[i].size
+				},
+				i === len - 1
+			);
 		}
 	}
 
 	/**
-	 * @private
 	 * @description Uploads a video to the server using an external upload handler.
 	 * @param {VideoInfo_video} info - Video information object.
 	 * @param {FileList} files - The video files to upload.
 	 */
-	_serverUpload(info, files) {
+	#serverUpload(info, files) {
 		if (!files) return;
 
 		const videoUploadUrl = this.pluginOptions.uploadUrl;
 		if (typeof videoUploadUrl === 'string' && videoUploadUrl.length > 0) {
-			this.fileManager.upload(videoUploadUrl, this.pluginOptions.uploadHeaders, files, this.#UploadCallBack.bind(this, info), this._error.bind(this));
+			this.fileManager.upload(videoUploadUrl, this.pluginOptions.uploadHeaders, files, this.#UploadCallBack.bind(this, info), this.#error.bind(this));
 		}
 	}
 
 	/**
-	 * @private
 	 * @description Sets attributes for the video tag.
 	 * @param {HTMLVideoElement} element - The video element.
 	 */
-	_setTagAttrs(element) {
+	#setTagAttrs(element) {
 		element.setAttribute('controls', 'true');
 
 		const attrs = this.pluginOptions.videoTagAttributes;
@@ -901,11 +903,10 @@ class Video extends EditorInjector {
 	}
 
 	/**
-	 * @private
 	 * @description Sets attributes for the iframe tag.
 	 * @param {HTMLIFrameElement} element - The iframe element.
 	 */
-	_setIframeAttrs(element) {
+	#setIframeAttrs(element) {
 		element.frameBorder = '0';
 		element.allowFullscreen = true;
 
@@ -918,16 +919,17 @@ class Video extends EditorInjector {
 	}
 
 	/**
-	 * @private
 	 * @description Selects a ratio option in the ratio dropdown.
 	 * @param {string|number} value - The selected ratio value.
 	 * @returns {boolean} Returns true if a ratio was selected.
 	 */
-	_setRatioSelect(value) {
+	#setRatioSelect(value) {
+		if (!this.frameRatioOption) return;
+
 		let ratioSelected = false;
 		const ratioOption = this.frameRatioOption.options;
 
-		if (/%$/.test(value + '') || this._onlyPercentage) value = numbers.get(value, 2) / 100 + '';
+		if (/%$/.test(value + '') || this.#onlyPercentage) value = numbers.get(value, 2) / 100 + '';
 		else if (!numbers.is(value) || Number(value) >= 1) value = '';
 
 		this.inputY.placeholder = '';
@@ -935,19 +937,20 @@ class Video extends EditorInjector {
 			if (ratioOption[i].value === value) {
 				ratioSelected = ratioOption[i].selected = true;
 				this.inputY.placeholder = !value ? '' : Number(value) * 100 + '%';
-			} else ratioOption[i].selected = false;
+			} else {
+				ratioOption[i].selected = false;
+			}
 		}
 
 		return ratioSelected;
 	}
 
 	/**
-	 * @private
 	 * @description Handles video upload errors.
 	 * @param {Object<string, *>} response - The error response object.
 	 * @returns {Promise<void>}
 	 */
-	async _error(response) {
+	async #error(response) {
 		const message = await this.triggerEvent('onVideoUploadError', { error: response });
 		const err = message === NO_EVENT ? response.errorMessage : message || response.errorMessage;
 		this.ui.alertOpen(err, 'error');
@@ -963,9 +966,9 @@ class Video extends EditorInjector {
 		if ((await this.triggerEvent('videoUploadHandler', { 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);
 			}
 		}
 	}
@@ -993,16 +996,16 @@ class Video 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
+					: !value.includes('://')
+						? '/' + value
+						: value;
 		}
 	}
 
@@ -1018,7 +1021,7 @@ class Video extends EditorInjector {
 	 * @param {HTMLInputElement} target - The selected video element.
 	 */
 	#SetUrlInput(target) {
-		this._linkValue = this.previewSrc.textContent = this.videoUrlFile.value = target.getAttribute('data-command') || target.src;
+		this.#linkValue = this.previewSrc.textContent = this.videoUrlFile.value = target.getAttribute('data-command') || target.src;
 		this.videoUrlFile.focus();
 	}
 
@@ -1041,11 +1044,11 @@ class Video extends EditorInjector {
 	}
 
 	#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;
 		}
 	}
 
@@ -1056,13 +1059,13 @@ class Video extends EditorInjector {
 		/** @type {HTMLSelectElement} */
 		const eventTarget = dom.query.getEventTarget(e);
 		const value = eventTarget.options[eventTarget.selectedIndex].value;
-		this._defaultSizeY = this.figure.autoRatio.current = this._frameRatio = !value ? this._defaultSizeY : Number(value) * 100 + '%';
+		this.#defaultSizeY = this.figure.autoRatio.current = this.#frameRatio = !value ? this.#defaultSizeY : Number(value) * 100 + '%';
 		this.inputY.placeholder = !value ? '' : Number(value) * 100 + '%';
 		this.inputY.value = '';
 	}
 
 	#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 };
 	}
 
 	/**
@@ -1077,10 +1080,10 @@ class Video 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);
+		} else if (this.proportion.checked && !this.frameRatioOption?.value) {
+			const ratioSize = Figure.CalcRatio(this.inputX.value, this.inputY.value, this.sizeUnit, this.#ratio);
 			if (xy === 'x') {
 				this.inputY.value = String(ratioSize.h);
 			} else {
@@ -1089,7 +1092,7 @@ class Video extends EditorInjector {
 		}
 
 		if (xy === 'y') {
-			this._setRatioSelect(eventTarget.value || this._defaultRatio);
+			this.#setRatioSelect(eventTarget.value || this.#defaultRatio);
 		}
 	}
 }