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

package/src/modules/Figure.js

@@ -2,7 +2,7 @@ import EditorInjector from '../editorInjector';
 import { Controller, SelectMenu, _DragHandle } from '../modules';
 import { dom, numbers, env, converter, keyCodeMap } from '../helper';
 
-const { ON_OVER_COMPONENT } = env;
+const { _w, ON_OVER_COMPONENT } = env;
 const DIRECTION_CURSOR_MAP = { tl: 'nwse-resize', tr: 'nesw-resize', bl: 'nesw-resize', br: 'nwse-resize', lw: 'ew-resize', th: 'ns-resize', rw: 'ew-resize', bh: 'ns-resize' };
 const DIR_DIAGONAL = 'tl|bl|tr|br';
 const DIR_W = 'lw|rw';
@@ -24,6 +24,7 @@ let __resizing_sw = 0;
  * @property {?HTMLElement} cover Cover element (FIGURE|null)
  * @property {?HTMLElement} inlineCover Inline cover element (span.se-inline-component)
  * @property {?HTMLElement} caption Caption element (FIGCAPTION)
+ * @property {boolean} isVertical Whether to rotate vertically
  */
 
 /**
@@ -33,6 +34,7 @@ let __resizing_sw = 0;
  * @property {?HTMLElement=} caption Caption element (FIGCAPTION)
  * @property {string} [align] - Alignment of the element.
  * @property {{w:number, h:number}} [ratio] - The aspect ratio of the element.
+ * @property {boolean} isVertical Whether to rotate vertically
  * @property {string|number} [w] - Width of the element.
  * @property {string|number} [h] - Height of the element.
  * @property {number} [t] - Top position.
@@ -62,6 +64,19 @@ let __resizing_sw = 0;
  * @description Controller module class
  */
 class Figure extends EditorInjector {
+	#width;
+	#height;
+	#resize_w;
+	#resize_h;
+	#element_w;
+	#element_h;
+	#floatClassStr;
+	#preventSizechange;
+	#revertSize;
+	#offContainer;
+	#containerResizingESC;
+	#onResizeESCEvent;
+
 	/**
 	 * @constructor
 	 * @param {*} inst The instance object that called the constructor.
@@ -117,35 +132,33 @@ class Figure extends EditorInjector {
 		this.captionButton = controllerEl.querySelector('[data-command="caption"]');
 		this.align = 'none';
 		this.as = 'block';
+		/** @type {{left?: number, top?: number}} */
+		this.__offset = {};
 		this._element = null;
 		this._cover = null;
 		this._inlineCover = null;
 		this._container = null;
 		this._caption = null;
-		this._width = '';
-		this._height = '';
-		this._resize_w = 0;
-		this._resize_h = 0;
-		this._element_w = 0;
-		this._element_h = 0;
-		this._element_l = 0;
-		this._element_t = 0;
 		this._resizeClientX = 0;
 		this._resizeClientY = 0;
 		this._resize_direction = '';
-		this._floatClassStr = '__se__float-none|__se__float-left|__se__float-center|__se__float-right';
-		this.__preventSizechange = false;
-		this.__revertSize = { w: '', h: '' };
-		/** @type {{left?: number, top?: number}} */
-		this.__offset = {};
-		this.__offContainer = this.#OffFigureContainer.bind(this);
-		this.__containerResizing = this.#ContainerResizing.bind(this);
 		this.__containerResizingOff = this.#ContainerResizingOff.bind(this);
-		this.__containerResizingESC = this.#ContainerResizingESC.bind(this);
+		this.__containerResizing = this.#ContainerResizing.bind(this);
 		this.__onContainerEvent = null;
 		this.__offContainerEvent = null;
-		this.__onResizeESCEvent = null;
-		this.__fileManagerInfo = false;
+
+		this.#width = '';
+		this.#height = '';
+		this.#resize_w = 0;
+		this.#resize_h = 0;
+		this.#element_w = 0;
+		this.#element_h = 0;
+		this.#floatClassStr = '__se__float-none|__se__float-left|__se__float-center|__se__float-right';
+		this.#preventSizechange = false;
+		this.#revertSize = { w: '', h: '' };
+		this.#offContainer = this.#OffFigureContainer.bind(this);
+		this.#containerResizingESC = this.#ContainerResizingESC.bind(this);
+		this.#onResizeESCEvent = null;
 
 		// init
 		this.eventManager.addEvent(this.alignButton, 'click', this.#OnClick_alignButton.bind(this));
@@ -209,12 +222,16 @@ class Figure extends EditorInjector {
 	static GetContainer(element) {
 		const cover = dom.query.getParentElement(element, 'FIGURE', 2);
 		const inlineCover = dom.query.getParentElement(element, 'SPAN', 2);
+		const anyCover = cover || inlineCover;
+		const target = dom.query.getParentElement(element, (current) => current.parentElement === anyCover, 0) || /** @type {HTMLElement} */ (element);
+
 		return {
-			target: /** @type {HTMLElement} */ (element),
-			container: /** @type {HTMLElement} */ (dom.query.getParentElement(element, Figure.is, 2) || cover),
-			cover: /** @type {HTMLElement} */ (cover),
+			target,
+			container: dom.query.getParentElement(target, Figure.is, 3) || cover,
+			cover: cover,
 			inlineCover: dom.utils.hasClass(inlineCover, 'se-inline-component') ? /** @type {HTMLElement} */ (inlineCover) : null,
-			caption: /** @type {HTMLElement} */ (dom.query.getEdgeChild(element.parentElement, 'FIGCAPTION', false))
+			caption: dom.query.getEdgeChild(target.parentElement, 'FIGCAPTION', false),
+			isVertical: IsVertical(target)
 		};
 	}
 
@@ -226,8 +243,8 @@ class Figure extends EditorInjector {
 	 * @return {{w: number, h: number}}
 	 */
 	static GetRatio(w, h, defaultSizeUnit) {
-		let rw = 1,
-			rh = 1;
+		let rw = 0,
+			rh = 0;
 		if (/\d+/.test(w + '') && /\d+/.test(h + '')) {
 			const xUnit = (!numbers.is(w) && String(w).replace(/\d+|\./g, '')) || defaultSizeUnit || 'px';
 			const yUnit = (!numbers.is(h) && String(h).replace(/\d+|\./g, '')) || defaultSizeUnit || 'px';
@@ -250,11 +267,11 @@ class Figure extends EditorInjector {
 	 * @param {string|number} w Width size
 	 * @param {string|number} h Height size
 	 * @param {string} defaultSizeUnit Default size unit (default: "px")
-	 * @param {{w: number, h: number}} ratio Ratio size (Figure.GetRatio)
+	 * @param {?{w: number, h: number}=} ratio Ratio size (Figure.GetRatio)
 	 * @return {{w: string|number, h: string|number}}
 	 */
 	static CalcRatio(w, h, defaultSizeUnit, ratio) {
-		if (/\d+/.test(w + '') && /\d+/.test(h + '')) {
+		if (ratio?.w && ratio?.h && /\d+/.test(w + '') && /\d+/.test(h + '')) {
 			const xUnit = (!numbers.is(w) && String(w).replace(/\d+|\./g, '')) || defaultSizeUnit || 'px';
 			const yUnit = (!numbers.is(h) && String(h).replace(/\d+|\./g, '')) || defaultSizeUnit || 'px';
 			if (xUnit === yUnit) {
@@ -278,7 +295,7 @@ class Figure extends EditorInjector {
 	 * @returns {boolean}
 	 */
 	static is(element) {
-		return dom.utils.hasClass(element, 'se-component') || /^(HR)$/.test(element?.nodeName);
+		return dom.check.isComponentContainer(element) || /^(HR)$/.test(element?.nodeName);
 	}
 
 	/**
@@ -299,18 +316,16 @@ class Figure extends EditorInjector {
 	 * @param {boolean} [params.nonSizeInfo=false] Do not display the size information
 	 * @param {boolean} [params.nonBorder=false] Do not display the selected style line
 	 * @param {boolean} [params.figureTarget=false] If true, the target is a figure element
-	 * @param {boolean} [params.__fileManagerInfo=false] If true, the file manager is called
+	 * @param {boolean} [params.infoOnly=false] If true, returns only the figure target info without opening the controller
 	 * @returns {FigureTargetInfo|undefined} figure target info
 	 */
-	open(targetNode, { nonResizing, nonSizeInfo, nonBorder, figureTarget, __fileManagerInfo }) {
+	open(targetNode, { nonResizing, nonSizeInfo, nonBorder, figureTarget, infoOnly }) {
 		if (!targetNode) {
 			console.warn('[SUNEDITOR.modules.Figure.open] The "targetNode" is null.');
 			return;
 		}
 
-		if (_DragHandle.get('__overInfo') !== ON_OVER_COMPONENT) {
-			this.ui._offCurrentController();
-		} else {
+		if (_DragHandle.get('__overInfo') === ON_OVER_COMPONENT) {
 			nonBorder = true;
 		}
 
@@ -326,8 +341,9 @@ class Figure extends EditorInjector {
 				return {
 					container: null,
 					cover: null,
-					width: target.style.width || (!numbers.is(/** @type {HTMLImageElement} */ (target).width) ? /** @type {HTMLImageElement} */ (target).width : '') || '',
-					height: target.style.height || (!numbers.is(/** @type {HTMLImageElement} */ (target).height) ? /** @type {HTMLImageElement} */ (target).height : '') || ''
+					width: target.style.width || /** @type {HTMLImageElement} */ (target).width || '',
+					height: target.style.height || /** @type {HTMLImageElement} */ (target).height || '',
+					isVertical: this.isVertical
 				};
 			}
 		}
@@ -342,13 +358,19 @@ class Figure extends EditorInjector {
 		const { top, left, scrollX, scrollY } = this.offset.getLocal(sizeTarget);
 
 		const dataSize = (target.getAttribute('data-se-size') || '').split(',');
-		const ratio = Figure.GetRatio(dataSize[0] || numbers.get(target.style.width, 2) || w, dataSize[1] || numbers.get(target.style.height, 2) || h, this.sizeUnit);
+
+		let rw = numbers.get(target.style.width, 2) || w;
+		let rh = numbers.get(target.style.height, 2) || h;
+		if (this.isVertical) [rw, rh] = [rh, rw];
+		const ratio = Figure.GetRatio(rw, rh, this.sizeUnit);
+
 		const targetInfo = {
 			container: figureInfo.container,
 			cover: figureInfo.cover,
 			caption: figureInfo.caption,
 			align: this.align,
 			ratio: ratio,
+			isVertical: this.isVertical,
 			w: w || '',
 			h: h || '',
 			t: top,
@@ -359,11 +381,11 @@ class Figure extends EditorInjector {
 			originHeight: /** @type {HTMLImageElement} */ (target).naturalHeight || target.offsetHeight
 		};
 
-		this._width = targetInfo.width;
-		this._height = targetInfo.height;
-		if (__fileManagerInfo || this.__fileManagerInfo) return targetInfo;
+		this.#width = targetInfo.width;
+		this.#height = targetInfo.height;
+		if (infoOnly) return targetInfo;
 
-		const _figure = this.editor.frameContext.get('_figure');
+		const _figure = this.frameContext.get('_figure');
 		this.editor._figureContainer = _figure.main;
 		_figure.main.style.top = top + 'px';
 		_figure.main.style.left = left + 'px';
@@ -414,7 +436,7 @@ class Figure extends EditorInjector {
 			this.ui._visibleControllers(true, true);
 			// size
 			const size = this.getSize(target);
-			dom.utils.changeTxt(_figure.display, this.lang[this.align === 'none' ? 'basic' : this.align] + ' (' + size.w + ', ' + size.h + ')');
+			dom.utils.changeTxt(_figure.display, this.lang[this.align === 'none' ? 'basic' : this.align] + ' (' + size.dw + ', ' + size.dh + ')');
 			this._displayResizeHandles(!nonResizing);
 			// rotate, aption, align, onresize - display;
 			const transformButtons = this.controller.form.querySelectorAll(
@@ -431,18 +453,16 @@ class Figure extends EditorInjector {
 			}
 			// selecte
 			dom.utils.removeClass(this._cover, 'se-figure-over-selected');
-			this.controller.open(_figure.main, null, { initMethod: this.__offContainer, isWWTarget: false, addOffset: null });
-			this._w.setTimeout(() => _DragHandle.set('__overInfo', false), 0);
+			this.controller.open(_figure.main, null, { initMethod: this.#offContainer, isWWTarget: false, addOffset: null });
+			_w.setTimeout(() => _DragHandle.set('__overInfo', false), 0);
 		} else {
 			dom.utils.addClass(this._cover, 'se-figure-over-selected');
 		}
 
 		// set members
 		dom.utils.addClass(this._cover, 'se-figure-selected');
-		this._element_w = this._resize_w = w;
-		this._element_h = this._resize_h = h;
-		this._element_l = left;
-		this._element_t = top;
+		this.#element_w = this.#resize_w = w;
+		this.#element_h = this.#resize_h = h;
 
 		// drag
 		if (!this._inlineCover && (_DragHandle.get('__overInfo') !== ON_OVER_COMPONENT || dom.utils.hasClass(figureInfo.container, 'se-input-component'))) {
@@ -485,7 +505,7 @@ class Figure extends EditorInjector {
 	 * @param {string|number} w Width size
 	 * @param {string|number} h Height size
 	 */
-	setSize(w, h) {
+	setFigureSize(w, h) {
 		if (/%$/.test(w + '')) {
 			this._setPercentSize(w, h);
 		} else if ((!w || w === 'auto') && (!h || h === 'auto')) {
@@ -496,42 +516,67 @@ class Figure extends EditorInjector {
 		}
 	}
 
+	/**
+	 * @description Set the element's container size from plugins input value
+	 * @param {string|number} w Width size
+	 * @param {string|number} h Height size
+	 */
+	setSize(w, h) {
+		const v = this.isVertical;
+		if (v) [w, h] = [h, w];
+		this.setFigureSize(w, h);
+		if (v) this.setTransform(this._element, w, h, 0);
+	}
+
 	/**
 	 * @description Gets the Figure size
 	 * @param {?Node=} targetNode Target element, default is the current element
-	 * @returns {{w: string, h: string}}
+	 * @returns {{w: string, h: string, dw: string, dh: string}}
 	 */
 	getSize(targetNode) {
-		if (!targetNode) targetNode = this._element;
-		if (!targetNode) return { w: '', h: '' };
+		targetNode ||= this._element;
+
+		const v = IsVertical(targetNode);
+		let w = '';
+		let h = '';
+		let dw = '';
+		let dh = '';
+
+		if (!targetNode) return { w, h, dw, dh };
 
 		const figure = Figure.GetContainer(targetNode);
 		const target = figure.target;
 		if (!figure.container) {
 			// exceptionFormat
 			if (!this.options.get('strictMode').formatFilter) {
-				return {
-					w: target.style.width || 'auto',
-					h: target.style.height || 'auto'
-				};
+				w = target.style.width || 'auto';
+				h = target.style.height || 'auto';
+			} else {
+				w = '';
+				h = target.style.height;
 			}
-			return {
-				w: '',
-				h: target.style.height
-			};
+		} else {
+			w = !/%$/.test(target.style.width) ? target.style.width : ((figure.container && numbers.get(figure.container.style.width, 2)) || 100) + '%';
+			h = figure.inlineCover
+				? figure.inlineCover.style.height || /** @type {HTMLElement} */ (targetNode).style.height || String(/** @type {HTMLImageElement} */ (targetNode).height || '')
+				: numbers.get(figure.cover?.style.paddingBottom, 0) > 0 && !v
+					? figure.cover?.style.height
+					: !/%$/.test(target.style.height) || !/%$/.test(target.style.width)
+						? target.style.height
+						: ((figure.container && numbers.get(figure.container.style.height, 2)) || 100) + '%';
+
+			w ||= 'auto';
+			h ||= 'auto';
 		}
 
-		const w = !/%$/.test(target.style.width) ? target.style.width : ((figure.container && numbers.get(figure.container.style.width, 2)) || 100) + '%';
-		const h = figure.inlineCover
-			? figure.inlineCover.style.height
-			: numbers.get(figure.cover.style.paddingBottom, 0) > 0 && !this.isVertical
-			? figure.cover.style.height
-			: !/%$/.test(target.style.height) || !/%$/.test(target.style.width)
-			? target.style.height
-			: ((figure.container && numbers.get(figure.container.style.height, 2)) || 100) + '%';
+		dw = v ? h : w;
+		dh = v ? w : h;
+
 		return {
-			w: w || 'auto',
-			h: h || 'auto'
+			w,
+			h,
+			dw,
+			dh
 		};
 	}
 
@@ -541,8 +586,8 @@ class Figure extends EditorInjector {
 	 * @param {string} align "none"|"left"|"center"|"right"
 	 */
 	setAlign(targetNode, align) {
-		if (!targetNode) targetNode = this._element;
-		this.align = align = align || 'none';
+		targetNode ||= this._element;
+		this.align = align ||= 'none';
 
 		const figure = Figure.GetContainer(targetNode);
 		if (!figure.cover) return;
@@ -559,7 +604,7 @@ class Figure extends EditorInjector {
 		}
 
 		if (!dom.utils.hasClass(container, '__se__float-' + align)) {
-			dom.utils.removeClass(container, this._floatClassStr);
+			dom.utils.removeClass(container, this.#floatClassStr);
 			dom.utils.addClass(container, '__se__float-' + align);
 		}
 
@@ -575,14 +620,19 @@ class Figure extends EditorInjector {
 	 * @description As style[block, inline] the component
 	 * @param {?Node} targetNode Target element
 	 * @param {"block"|"inline"} formatStyle Format style
+	 * @returns {HTMLElement} New target element after conversion
 	 */
 	convertAsFormat(targetNode, formatStyle) {
-		if (!targetNode) targetNode = this._element;
+		targetNode ||= this._element;
 		this.as = formatStyle || 'block';
 		const { container, inlineCover, target } = Figure.GetContainer(targetNode);
 		const { w, h } = this.getSize(target);
 
 		const newTarget = /** @type {HTMLElement} */ (target.cloneNode(false));
+		newTarget.style.width = '';
+		newTarget.style.height = '';
+		newTarget.removeAttribute('width');
+		newTarget.removeAttribute('height');
 
 		switch (formatStyle) {
 			case 'inline': {
@@ -592,8 +642,6 @@ class Figure extends EditorInjector {
 				const next = container.nextElementSibling;
 				const parent = container.parentElement;
 
-				newTarget.style.width = '';
-				newTarget.style.height = '';
 				const figure = Figure.CreateInlineContainer(newTarget);
 				dom.utils.addClass(
 					figure.container,
@@ -623,8 +671,6 @@ class Figure extends EditorInjector {
 					dom.utils.removeItem(s.previousElementSibling);
 				}
 
-				newTarget.style.width = '';
-				newTarget.style.height = '';
 				const figure = Figure.CreateContainer(newTarget);
 				dom.utils.addClass(
 					figure.container,
@@ -641,27 +687,8 @@ class Figure extends EditorInjector {
 				break;
 			}
 		}
-	}
-
-	/**
-	 * @private
-	 * @description Handles format conversion (block/inline) for the figure component and applies size changes.
-	 * @param {FigureInfo} figureinfo {target, container, cover, inlineCover, caption}
-	 * @param {string|number} w Width value.
-	 * @param {string|number} h Height value.
-	 */
-	_asFormatChange(figureinfo, w, h) {
-		const kind = this.kind;
-		figureinfo.target.onload = () => this.component.select(figureinfo.target, kind);
-
-		this._setFigureInfo(figureinfo);
-
-		if (figureinfo.inlineCover) {
-			this.setAlign(figureinfo.target, 'none');
-			this.deleteTransform();
-		}
 
-		this.setSize(w, h);
+		return newTarget;
 	}
 
 	/**
@@ -678,7 +705,7 @@ class Figure extends EditorInjector {
 
 		switch (command) {
 			case 'mirror': {
-				const info = this.#GetRotateValue(element);
+				const info = GetRotateValue(element);
 				let x = info.x;
 				let y = info.y;
 
@@ -691,10 +718,11 @@ class Figure extends EditorInjector {
 				this._setRotate(element, info.r, x, y);
 				break;
 			}
-			case 'rotate':
-				this.setTransform(element, null, null, value);
+			case 'rotate': {
+				this.setTransform(element, null, null, Number(value));
 				break;
-			case 'caption':
+			}
+			case 'caption': {
 				if (!this._caption) {
 					const caption = Figure.CreateCaption(this._cover, this.lang.caption);
 					const captionText = dom.query.getEdgeChild(caption, (current) => current.nodeType === 3, false);
@@ -708,7 +736,7 @@ class Figure extends EditorInjector {
 					this.controller.close();
 				} else {
 					dom.utils.removeItem(this._caption);
-					this._w.setTimeout(this.component.select.bind(this.component, element, this.kind), 0);
+					_w.setTimeout(this.component.select.bind(this.component, element, this.kind), 0);
 				}
 
 				this._caption = !this._caption;
@@ -720,20 +748,24 @@ class Figure extends EditorInjector {
 					}
 				}
 				break;
-			case 'revert':
+			}
+			case 'revert': {
 				this._setRevert();
 				break;
-			case 'edit':
+			}
+			case 'edit': {
 				this.inst.edit(element);
 				break;
+			}
 			case 'copy': {
 				this.component.copy(this._container);
 				break;
 			}
-			case 'remove':
+			case 'remove': {
 				this.inst.destroy(element);
 				this.controller.close();
 				break;
+			}
 		}
 
 		if (/^__c__/.test(command)) {
@@ -758,7 +790,8 @@ class Figure extends EditorInjector {
 	 */
 	retainFigureFormat(container, originEl, anchorCover, fileManagerInst) {
 		const isInline = this.component.isInline(container);
-		let existElement = this.format.isBlock(originEl.parentNode) || dom.check.isWysiwygFrame(originEl.parentNode) ? originEl : dom.check.isAnchor(originEl.parentNode) ? originEl.parentNode : this.format.getLine(originEl) || originEl;
+		const originParent = originEl.parentNode;
+		let existElement = this.format.isBlock(originParent) || dom.check.isWysiwygFrame(originParent) ? originEl : Figure.GetContainer(originEl)?.container || originParent || originEl;
 
 		if (dom.query.getParentElement(originEl, dom.check.isExcludeFormat)) {
 			existElement = anchorCover && anchorCover !== originEl ? anchorCover : originEl;
@@ -795,7 +828,7 @@ class Figure extends EditorInjector {
 	 * @param {?Node=} node Target element, default is the current element
 	 */
 	deleteTransform(node) {
-		if (!node) node = this._element;
+		node ||= this._element;
 
 		const element = /** @type {HTMLElement} */ (node);
 		const size = (element.getAttribute('data-se-size') || '').split(',');
@@ -814,20 +847,23 @@ class Figure extends EditorInjector {
 	 * @param {Node} node Target element
 	 * @param {?string|number} width Element's width size
 	 * @param {?string|number} height Element's height size
+	 * @param {?number} deg rotate value
 	 */
 	setTransform(node, width, height, deg) {
 		try {
-			this.__preventSizechange = true;
-			const info = this.#GetRotateValue(node);
+			this.#preventSizechange = true;
+			const info = GetRotateValue(node);
 			const slope = info.r + (deg || 0) * 1;
 			deg = Math.abs(slope) >= 360 ? 0 : slope;
-			const isVertical = (this.isVertical = /^(90|270)$/.test(Math.abs(deg).toString()));
+			const isVertical = (this.isVertical = IsVertical(deg));
 
 			width = numbers.get(width, 0);
 			height = numbers.get(height, 0);
 
 			const element = /** @type {HTMLElement} */ (node);
 			const dataSize = (element.getAttribute('data-se-size') || 'auto,auto').split(',');
+			if (isVertical) this._setRotate(element, deg, info.x, info.y);
+
 			let transOrigin = '';
 			if (/auto|%$/.test(dataSize[0]) && !isVertical) {
 				if (dataSize[0] === 'auto' && dataSize[1] === 'auto') {
@@ -846,8 +882,10 @@ class Figure extends EditorInjector {
 				this._deletePercentSize();
 				this._applySize(offsetW + 'px', offsetH + 'px', '');
 
-				cover.style.width = w;
-				cover.style.height = figureInfo.caption || figureInfo.inlineCover ? '' : h;
+				if (cover) {
+					cover.style.width = w;
+					cover.style.height = figureInfo.caption || figureInfo.inlineCover ? '' : h;
+				}
 
 				if (isVertical) {
 					const transW = offsetW / 2 + 'px ' + offsetW / 2 + 'px 0';
@@ -857,21 +895,65 @@ class Figure extends EditorInjector {
 			}
 
 			element.style.transformOrigin = transOrigin;
-			this._setRotate(element, deg, info.x, info.y);
+			if (!isVertical) this._setRotate(element, deg, info.x, info.y);
 
 			if (isVertical) element.style.maxWidth = 'none';
 			else element.style.maxWidth = '';
 
 			this._setCaptionPosition(element);
 		} finally {
-			this.__preventSizechange = false;
+			this.#preventSizechange = false;
+		}
+	}
+
+	/**
+	 * @private
+	 * @description Displays or hides the resize handles of the figure component.
+	 * @param {boolean} display Whether to display resize handles.
+	 */
+	_displayResizeHandles(display) {
+		const type = !display ? 'none' : 'flex';
+		this.controller.form.style.display = type;
+
+		const _figure = this.frameContext.get('_figure');
+		const resizeHandles = _figure.handles;
+		for (let i = 0, len = resizeHandles.length; i < len; i++) {
+			resizeHandles[i].style.display = type;
+		}
+
+		if (type === 'none') {
+			dom.utils.addClass(_figure.main, 'se-resize-ing');
+			this.#onResizeESCEvent = this.eventManager.addGlobalEvent('keydown', this.#containerResizingESC);
+		} else {
+			dom.utils.removeClass(_figure.main, 'se-resize-ing');
 		}
 	}
 
+	/**
+	 * @private
+	 * @description Handles format conversion (block/inline) for the figure component and applies size changes.
+	 * @param {FigureInfo} figureinfo {target, container, cover, inlineCover, caption}
+	 * @param {string|number} w Width value.
+	 * @param {string|number} h Height value.
+	 */
+	_asFormatChange(figureinfo, w, h) {
+		const kind = this.kind;
+		figureinfo.target.onload = () => this.component.select(figureinfo.target, kind);
+
+		this._setFigureInfo(figureinfo);
+
+		if (figureinfo.inlineCover) {
+			this.setAlign(figureinfo.target, 'none');
+			this.deleteTransform();
+		}
+
+		this.setFigureSize(w, h);
+	}
+
 	/**
 	 * @private
 	 * @description Sets figure component properties such as cover, container, caption, and alignment.
-	 * @param {FigureInfo} figureInfo - {target, container, cover, inlineCover, caption}
+	 * @param {FigureInfo} figureInfo - {target, container, cover, inlineCover, caption, isVertical}
 	 */
 	_setFigureInfo(figureInfo) {
 		this._inlineCover = figureInfo.inlineCover;
@@ -881,7 +963,7 @@ class Figure extends EditorInjector {
 		this._element = figureInfo.target;
 		this.align = (this._container.className.match(/(?:^|\s)__se__float-(none|left|center|right)(?:$|\s)/) || [])[1] || figureInfo.target.style.float || 'none';
 		this.as = this._inlineCover ? 'inline' : 'block';
-		this.isVertical = /^(90|270)$/.test(Math.abs(this.#GetRotateValue(figureInfo.target).r).toString());
+		this.isVertical = IsVertical(figureInfo.target);
 	}
 
 	/**
@@ -943,14 +1025,14 @@ class Figure extends EditorInjector {
 
 		const sizeTarget = this._cover || this._element;
 
-		if (this.autoRatio) this._cover.style.width = w;
+		if (this.autoRatio && this._cover) this._cover.style.width = w;
 		if (!onlyH) {
 			sizeTarget.style.width = this._element.style.width = w;
 		}
 		if (!onlyW) {
 			h = numbers.is(h) ? h + this.sizeUnit : h;
 			sizeTarget.style.height = this._element.style.height = this.autoRatio && !this.isVertical ? '100%' : h;
-			if (this.autoRatio) {
+			if (this.autoRatio && this._cover) {
 				this._cover.style.height = h;
 				this.__setCoverPaddingBottom(w, h);
 			}
@@ -971,6 +1053,10 @@ class Figure extends EditorInjector {
 	__setCoverPaddingBottom(w, h) {
 		if (this._inlineCover === this._cover) return;
 
+		if (this.isVertical) {
+			[w, h] = [h, w];
+		}
+
 		this._cover.style.height = h;
 		if (/%$/.test(w) && this.align === 'center') {
 			this._cover.style.paddingBottom = !/%$/.test(h) ? h : numbers.get((numbers.get(h, 2) / 100) * numbers.get(w, 2), 2) + '%';
@@ -994,8 +1080,10 @@ class Figure extends EditorInjector {
 			this._element.style.maxWidth = '';
 			this._element.style.width = '';
 			this._element.style.height = '';
-			this._cover.style.width = '';
-			this._cover.style.height = '';
+			if (this._cover) {
+				this._cover.style.width = '';
+				this._cover.style.height = '';
+			}
 		}
 
 		this.setAlign(this._element, this.align);
@@ -1011,7 +1099,7 @@ class Figure extends EditorInjector {
 	 * @param {string|number} h Height percentage.
 	 */
 	_setPercentSize(w, h) {
-		if (!h) h = this.autoRatio ? (/%$/.test(this.autoRatio.current) ? this.autoRatio.current : this.autoRatio.default) : h;
+		h ||= this.autoRatio ? (/%$/.test(this.autoRatio.current) ? this.autoRatio.current : this.autoRatio.default) : h;
 		h = h && !/%$/.test(h + '') && !numbers.get(h, 0) ? (numbers.is(h) ? h + '%' : h) : numbers.is(h) ? h + this.sizeUnit : h || (this.autoRatio ? this.autoRatio.default : '');
 
 		const heightPercentage = /%$/.test(h + '');
@@ -1024,10 +1112,11 @@ class Figure extends EditorInjector {
 			return;
 		}
 
-		if (this._inlineCover !== this._cover) {
+		if (this._inlineCover !== this._cover && this._cover) {
 			this._cover.style.width = '100%';
 			this._cover.style.height = String(h);
 		}
+
 		this._element.style.width = '100%';
 		this._element.style.maxWidth = '';
 		this._element.style.height = String(this.autoRatio ? '100%' : heightPercentage ? '' : h);
@@ -1048,12 +1137,15 @@ class Figure extends EditorInjector {
 	 * @description Deletes percentage-based sizing from the figure element.
 	 */
 	_deletePercentSize() {
-		this._cover.style.width = '';
-		this._cover.style.height = '';
+		if (this._cover) {
+			this._cover.style.width = '';
+			this._cover.style.height = '';
+		}
+
 		this._container.style.width = '';
 		this._container.style.height = '';
 
-		dom.utils.removeClass(this._container, this._floatClassStr);
+		dom.utils.removeClass(this._container, this.#floatClassStr);
 		dom.utils.addClass(this._container, '__se__float-' + this.align);
 
 		if (this.align === 'center') this.setAlign(this._element, this.align);
@@ -1064,7 +1156,7 @@ class Figure extends EditorInjector {
 	 * @description Reverts the figure element to its previously saved size.
 	 */
 	_setRevert() {
-		this.setSize(this.__revertSize.w, this.__revertSize.h);
+		this.setFigureSize(this.#revertSize.w, this.#revertSize.h);
 	}
 
 	/**
@@ -1090,11 +1182,11 @@ class Figure extends EditorInjector {
 	 * @description Saves the current size of the figure component.
 	 */
 	_saveCurrentSize() {
-		if (this.__preventSizechange) return;
+		if (this.#preventSizechange) return;
 
 		const dataSize = (this._element.getAttribute('data-se-size') || ',').split(',');
-		this.__revertSize.w = dataSize[0];
-		this.__revertSize.h = dataSize[1];
+		this.#revertSize.w = dataSize[0];
+		this.#revertSize.h = dataSize[1];
 
 		const size = this.getSize(this._element);
 		// add too width, height attribute
@@ -1114,7 +1206,12 @@ class Figure extends EditorInjector {
 	_setCaptionPosition(element) {
 		const figcaption = /** @type {HTMLElement} */ (dom.query.getEdgeChild(dom.query.getParentElement(element, 'FIGURE'), 'FIGCAPTION', false));
 		if (figcaption) {
-			figcaption.style.marginTop = (this.isVertical ? element.offsetWidth - element.offsetHeight : 0) + 'px';
+			figcaption.style.marginTop = (this.isVertical && !this.autoRatio ? element.offsetWidth - element.offsetHeight : 0) + 'px';
+			if (this.isVertical && this.autoRatio) {
+				element.style.marginTop = figcaption.offsetHeight + 'px';
+			} else {
+				element.style.marginTop = '';
+			}
 		}
 	}
 
@@ -1130,29 +1227,6 @@ class Figure extends EditorInjector {
 		}
 	}
 
-	/**
-	 * @private
-	 * @description Displays or hides the resize handles of the figure component.
-	 * @param {boolean} display Whether to display resize handles.
-	 */
-	_displayResizeHandles(display) {
-		const type = !display ? 'none' : 'flex';
-		this.controller.form.style.display = type;
-
-		const _figure = this.editor.frameContext.get('_figure');
-		const resizeHandles = _figure.handles;
-		for (let i = 0, len = resizeHandles.length; i < len; i++) {
-			resizeHandles[i].style.display = type;
-		}
-
-		if (type === 'none') {
-			dom.utils.addClass(_figure.main, 'se-resize-ing');
-			this.__onResizeESCEvent = this.eventManager.addGlobalEvent('keydown', this.__containerResizingESC);
-		} else {
-			dom.utils.removeClass(_figure.main, 'se-resize-ing');
-		}
-	}
-
 	/**
 	 * @private
 	 * @description Removes the resize event listeners.
@@ -1161,7 +1235,7 @@ class Figure extends EditorInjector {
 		this.component._removeDragEvent();
 		this.eventManager.removeGlobalEvent(this.__onContainerEvent);
 		this.eventManager.removeGlobalEvent(this.__offContainerEvent);
-		this.eventManager.removeGlobalEvent(this.__onResizeESCEvent);
+		this.eventManager.removeGlobalEvent(this.#onResizeESCEvent);
 
 		this._displayResizeHandles(true);
 		this.ui._offCurrentController();
@@ -1174,7 +1248,7 @@ class Figure extends EditorInjector {
 	 * @param {Node} figureMain The main figure container element.
 	 */
 	_setDragEvent(figureMain) {
-		const dragHandle = this.editor.frameContext.get('wrapper').querySelector('.se-drag-handle');
+		const dragHandle = this.frameContext.get('wrapper').querySelector('.se-drag-handle');
 		dom.utils.removeClass(dragHandle, 'se-drag-handle-full');
 
 		dragHandle.style.opacity = '';
@@ -1208,15 +1282,17 @@ class Figure extends EditorInjector {
 		e.stopPropagation();
 		e.preventDefault();
 
-		const eventTarget = dom.query.getEventTarget(e);
 		const inst = _DragHandle.get('__figureInst');
+		if (!inst) return;
+
+		const eventTarget = dom.query.getEventTarget(e);
 		const direction = (inst._resize_direction = eventTarget.classList[0]);
 		inst._resizeClientX = e.clientX;
 		inst._resizeClientY = e.clientY;
-		inst.editor.frameContext.get('_figure').main.style.float = /l/.test(direction) ? 'right' : /r/.test(direction) ? 'left' : 'none';
+		inst.frameContext.get('_figure').main.style.float = /l/.test(direction) ? 'right' : /r/.test(direction) ? 'left' : 'none';
 		this.ui.enableBackWrapper(DIRECTION_CURSOR_MAP[direction]);
 
-		const { w, h } = this.getSize(inst._element);
+		const { w, h, dw, dh } = this.getSize(inst._element);
 		__resizing_p_wh = __resizing_p_ow = false;
 		__resizing_cw = __resizing_sw = 0;
 		if (!this.isVertical) {
@@ -1231,7 +1307,7 @@ class Figure extends EditorInjector {
 			if (__resizing_p_wh || __resizing_p_ow) {
 				const sizeTarget = inst._cover || inst._element;
 				__resizing_sw = sizeTarget.offsetWidth;
-				__resizing_cw = converter.getWidthInPercentage(sizeTarget, this.editor.frameContext.get('wysiwygFrame')) / 100;
+				__resizing_cw = converter.getWidthInPercentage(sizeTarget, this.frameContext.get('wysiwygFrame')) / 100;
 			}
 		}
 
@@ -1239,9 +1315,9 @@ class Figure extends EditorInjector {
 		inst.__offContainerEvent = inst.eventManager.addGlobalEvent('mouseup', inst.__containerResizingOff);
 		inst._displayResizeHandles(false);
 
-		const _display = this.editor.frameContext.get('_figure').display;
+		const _display = this.frameContext.get('_figure').display;
 		_display.style.display = 'block';
-		dom.utils.changeTxt(_display, w + ' x ' + h);
+		dom.utils.changeTxt(_display, dw + ' * ' + dh);
 	}
 
 	/**
@@ -1252,14 +1328,15 @@ class Figure extends EditorInjector {
 		const direction = this._resize_direction;
 		const clientX = e.clientX;
 		const clientY = e.clientY;
+		const v = this.isVertical;
 
-		let resultW = this._element_w;
-		let resultH = this._element_h;
+		let resultW = v ? this.#element_h : this.#element_w;
+		let resultH = v ? this.#element_w : this.#element_h;
 
 		const w = resultW + (/r/.test(direction) ? clientX - this._resizeClientX : this._resizeClientX - clientX);
 		const h = resultH + (/b/.test(direction) ? clientY - this._resizeClientY : this._resizeClientY - clientY);
 		const wh = (resultH / resultW) * w;
-		const resizeBorder = this.editor.frameContext.get('_figure').border;
+		const resizeBorder = this.frameContext.get('_figure').border;
 
 		if (/t/.test(direction)) resizeBorder.style.top = resultH - (/h/.test(direction) ? h : wh) + 'px';
 		if (/l/.test(direction)) resizeBorder.style.left = resultW - w + 'px';
@@ -1277,10 +1354,13 @@ class Figure extends EditorInjector {
 			resultH = h;
 		}
 
-		this._resize_w = /** @type {number} */ (/h$/.test(direction) ? this._width : Math.round(resultW));
-		this._resize_h = /** @type {number} */ (/w$/.test(direction) ? this._height : Math.round(resultH));
-		const rw = __resizing_cw ? (this._resize_w / __resizing_sw) * __resizing_cw * 100 : this._resize_w;
-		dom.utils.changeTxt(this.editor.frameContext.get('_figure').display, __resizing_cw ? numbers.get(rw > 100 ? 100 : rw, 2).toFixed(2) + '%' : rw + ' x ' + this._resize_h);
+		const resize_w = /** @type {number} */ (!v && /h$/.test(direction) ? this.#width : Math.round(resultW));
+		const resize_h = /** @type {number} */ (!v && /w$/.test(direction) ? this.#height : Math.round(resultH));
+		const rw = __resizing_cw ? (resize_w / __resizing_sw) * __resizing_cw * 100 : resize_w;
+		dom.utils.changeTxt(this.frameContext.get('_figure').display, __resizing_cw ? numbers.get(rw > 100 ? 100 : rw, 2).toFixed(2) + '%' : rw + ' * ' + resize_h);
+
+		this.#resize_w = resize_w;
+		this.#resize_h = resize_h;
 	}
 
 	/**
@@ -1290,16 +1370,16 @@ class Figure extends EditorInjector {
 		this._offResizeEvent();
 
 		// set size
-		let w = this.isVertical ? this._resize_h : this._resize_w;
-		let h = this.isVertical ? this._resize_w : this._resize_h;
+		let w = this.isVertical ? this.#resize_h : this.#resize_w;
+		let h = this.isVertical ? this.#resize_w : this.#resize_h;
 		w = Math.round(w) || w;
 		h = Math.round(h) || h;
 
 		if (!this.isVertical && !/%$/.test(w + '')) {
 			const limit =
-				this.editor.frameContext.get('wysiwygFrame').clientWidth -
-				numbers.get(this.editor.frameContext.get('wwComputedStyle').getPropertyValue('padding-left')) +
-				numbers.get(this.editor.frameContext.get('wwComputedStyle').getPropertyValue('padding-right')) -
+				this.frameContext.get('wysiwygFrame').clientWidth -
+				numbers.get(this.frameContext.get('wwComputedStyle').getPropertyValue('padding-left')) +
+				numbers.get(this.frameContext.get('wwComputedStyle').getPropertyValue('padding-right')) -
 				2;
 			if (numbers.get(w, 0) > limit) {
 				h = Math.round((h / w) * limit);
@@ -1371,7 +1451,7 @@ class Figure extends EditorInjector {
 	}
 
 	#OffFigureContainer() {
-		this.editor.frameContext.get('_figure').main.style.display = 'none';
+		this.frameContext.get('_figure').main.style.display = 'none';
 		this.editor._figureContainer = null;
 	}
 
@@ -1404,20 +1484,28 @@ class Figure extends EditorInjector {
 
 		this.selectMenu_resize.open('', '[data-command="' + command + '"]');
 	}
+}
 
-	/**
-	 * @param {Node} element Target element
-	 * @returns {{ r: *, x: *, y: * }} Rotation value
-	 */
-	#GetRotateValue(element) {
-		const transform = /** @type {HTMLElement} */ (element).style.transform;
-		if (!transform) return { r: 0, x: '', y: '' };
-		return {
-			r: Number((transform.match(/rotate\(([-0-9]+)deg\)/) || [])[1] || 0),
-			x: (transform.match(/rotateX\(([-0-9]+)deg\)/) || [])[1] || '',
-			y: (transform.match(/rotateY\(([-0-9]+)deg\)/) || [])[1] || ''
-		};
-	}
+/**
+ * @param {Node} element Target element
+ * @returns {{ r: *, x: *, y: * }} Rotation value
+ */
+function GetRotateValue(element) {
+	const transform = /** @type {HTMLElement} */ (element).style.transform;
+	if (!transform) return { r: 0, x: '', y: '' };
+	return {
+		r: Number((transform.match(/rotate\(([-0-9]+)deg\)/) || [])[1] || 0),
+		x: (transform.match(/rotateX\(([-0-9]+)deg\)/) || [])[1] || '',
+		y: (transform.match(/rotateY\(([-0-9]+)deg\)/) || [])[1] || ''
+	};
+}
+
+/**
+ * @param {Node|number} elementOrDeg Target element
+ * @returns {boolean} Whether to rotate vertically
+ */
+function IsVertical(elementOrDeg) {
+	return /^(90|270)$/.test(Math.abs(numbers.is(elementOrDeg) ? elementOrDeg : GetRotateValue(/** @type{Node} */ (elementOrDeg)).r).toString());
 }
 
 function CreateAlign(inst, button) {