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

package/src/modules/{Figure.js → contract/Figure.js}

@@ -1,8 +1,9 @@
-import EditorInjector from '../editorInjector';
-import { Controller, SelectMenu, _DragHandle } from '../modules';
-import { dom, numbers, env, converter, keyCodeMap } from '../helper';
+import Controller from './Controller';
+import SelectMenu from '../ui/SelectMenu';
+import { _DragHandle } from '../ui/_DragHandle';
+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';
@@ -12,100 +13,171 @@ let __resizing_cw = 0;
 let __resizing_sw = 0;
 
 /**
- * @typedef {Object} FigureParams
- * @property {string} [sizeUnit="px"] Size unit
- * @property {{ current: string, default: string }} [autoRatio=null] Auto ratio { current: '00%', default: '00%' }
- */
-
-/**
+ * Figure information object
  * @typedef {Object} FigureInfo
- * @property {HTMLElement} target Target element (img, iframe, video, audio, table, etc.)
- * @property {HTMLElement} container Container element (div.se-component|span.se-component.se-inline-component)
- * @property {?HTMLElement} cover Cover element (FIGURE|null)
- * @property {?HTMLElement} inlineCover Inline cover element (span.se-inline-component)
- * @property {?HTMLElement} caption Caption element (FIGCAPTION)
+ * @property {HTMLElement} target - Target element (`img`, `iframe`, `video`, `audio`, `table`, etc.)
+ * @property {HTMLElement} container - Container element (`div.se-component`|`span.se-component.se-inline-component`)
+ * @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
  */
 
 /**
+ * Figure target information object (for resize/align operations)
  * @typedef {Object} FigureTargetInfo
- * @property {HTMLElement} container Container element (div.se-component|span.se-component.se-inline-component)
- * @property {?HTMLElement=} cover Cover element (FIGURE|null)
- * @property {?HTMLElement=} caption Caption element (FIGCAPTION)
+ * @property {HTMLElement} container - Container element (`div.se-component`|`span.se-component.se-inline-component`)
+ * @property {?HTMLElement} [cover] - Cover element (`FIGURE`|`null`)
+ * @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.
  * @property {number} [l] - Left position.
- * @property {string|number} width - Width, can be a number or 'auto'.
- * @property {string|number} height - Height, can be a number or 'auto'.
+ * @property {string|number} width - Width, can be a number or `auto`.
+ * @property {string|number} height - Height, can be a number or `auto`.
  * @property {number} [originWidth] - Original width from `naturalWidth` or `offsetWidth`.
  * @property {number} [originHeight] - Original height from `naturalHeight` or `offsetHeight`.
  */
 
 /**
- * @typedef {Array<Array<
- *   string |
- *   {
- *     action: (element: Node, value: string, target: Node) => void,
- *     command: string,
- *     value: string,
- *     title: string,
- *     icon: string
- *   }
- * >>} FigureControls
- * "mirror". "rotate", "caption", "revert", "edit", "copy", "remove", "as", "resize_auto,[number]"
+ * Figure control button type
+ * @typedef {"mirror_h" | "mirror_v" | "rotate_l" | "rotate_r" | "caption" | "revert" | "edit" | "copy" | "remove" | "as" | "align" | "onalign" | "onresize"} FigureControlButton
+ */
+
+/**
+ * Figure control resize value type (auto, or percentage numbers)
+ * @typedef {`resize_auto,${number}` | `resize_auto,${number},${number}` | `resize_auto,${number},${number},${number}` | `resize_auto,${number},${number},${number},${number}`} FigureControlResize
+ */
+
+/**
+ * Figure control custom action object
+ * @typedef {{
+ *   action: (element: Node, value: string, target: Node) => void,
+ *   command: string,
+ *   value: string,
+ *   title: string,
+ *   icon: string
+ * }} ControlCustomAction
+ */
+
+/**
+ * Figure controls configuration
+ * 2D array of control buttons for the figure component toolbar
+ *
+ * **Available control buttons**:
+ * - `"mirror_h"`: Mirror horizontally
+ * - `"mirror_v"`: Mirror vertically
+ * - `"rotate_l"`: Rotate left (-90°)
+ * - `"rotate_r"`: Rotate right (90°)
+ * - `"caption"`: Toggle caption (`FIGCAPTION`)
+ * - `"revert"`: Revert to original size
+ * - `"edit"`: Open edit modal
+ * - `"copy"`: Copy component
+ * - `"remove"`: Remove component
+ * - `"as"`: Format type (`block`/`inline`) - requires `useFormatType` option
+ * - `"align"`: Alignment (`none`/`left`/`center`/`right`)
+ * - `"onalign"`: Alignment button (opens alignment menu)
+ * - `"onresize"`: Resize button (opens resize menu)
+ * - `"resize_auto,50,75,100"`: Auto-resize with percentage values (e.g., `"resize_auto,100,75,50"`)
+ * - Custom action object with action, command, value, title, icon
+ *
+ * @example
+ * // Basic controls
+ * [['mirror_h', 'mirror_v', 'align', 'caption', 'edit', 'copy', 'remove']]
+ *
+ * @example
+ * // Multi-row controls with resize options
+ * [
+ *   ['as', 'resize_auto,100,75,50', 'rotate_l', 'rotate_r', 'mirror_h', 'mirror_v'],
+ *   ['edit', 'align', 'caption', 'revert', 'copy', 'remove']
+ * ]
+ *
+ * @typedef {Array<Array<FigureControlButton | FigureControlResize | ControlCustomAction | string>>} FigureControls
+ */
+
+// -------------------------------------------------------------------------------------------------------------------------
+
+/**
+ * @typedef {Object} FigureParams
+ * @property {string} [sizeUnit="px"] Size unit
+ * @property {{ current: string, default: string }} [autoRatio=null] Auto ratio `{ current: '00%', default: '00%' }`
  */
 
 /**
  * @class
- * @description Controller module class
+ * @description Figure module class for handling resizable/alignable components (images, videos, iframes, etc.)
+ * @see EditorComponent for `inst._element` requirement
  */
-class Figure extends EditorInjector {
+class Figure {
+	#$;
+
+	#offContainer;
+	#containerResizingESC;
+
+	#width = '';
+	#height = '';
+	#resize_w = 0;
+	#resize_h = 0;
+	#element_w = 0;
+	#element_h = 0;
+	#floatClassStr = '__se__float-none|__se__float-left|__se__float-center|__se__float-right';
+	#preventSizechange = false;
+	#revertSize = { w: '', h: '' };
+	#onResizeESCEvent = null;
+
 	/**
 	 * @constructor
 	 * @param {*} inst The instance object that called the constructor.
+	 * @param {SunEditor.Deps} $ Kernel dependencies
 	 * @param {FigureControls} controls Controller button array
 	 * @param {FigureParams} params Figure options
 	 */
-	constructor(inst, controls, params) {
-		super(inst.editor);
+	constructor(inst, $, controls, params) {
+		this.#$ = $;
+
 		this.kind = inst.constructor.key || inst.constructor.name;
 		this._alignIcons = {
-			none: this.icons.format_float_none,
-			left: this.icons.format_float_left,
-			right: this.icons.format_float_right,
-			center: this.icons.format_float_center
+			none: this.#$.icons.format_float_none,
+			left: this.#$.icons.format_float_left,
+			right: this.#$.icons.format_float_right,
+			center: this.#$.icons.format_float_center,
 		};
 
 		// modules
 		/** @type {Object<string, *>} */
 		this._action = {};
-		const controllerEl = CreateHTML_controller(this, controls || []);
-		this.controller = new Controller(this, controllerEl, { position: 'bottom', disabled: true }, this.kind);
-		// align selectmenu
-		this.alignButton = controllerEl.querySelector('[data-command="onalign"]');
-		const alignMenus = CreateAlign(this, this.alignButton);
-		if (alignMenus) {
-			this.selectMenu_align = new SelectMenu(this, { checkList: false, position: 'bottom-center' });
-			this.selectMenu_align.on(this.alignButton, this.#SetMenuAlign.bind(this), { class: 'se-figure-select-list' });
-			this.selectMenu_align.create(alignMenus.items, alignMenus.html);
-		}
-		// as [block, inline] selectmenu
-		this.asButton = controllerEl.querySelector('[data-command="onas"]');
-		const asMenus = CreateAs(this, this.asButton);
-		if (asMenus) {
-			this.selectMenu_as = new SelectMenu(this, { checkList: false, position: 'bottom-center' });
-			this.selectMenu_as.on(this.asButton, this.#SetMenuAs.bind(this), { class: 'se-figure-select-list' });
-			this.selectMenu_as.create(asMenus.items, asMenus.html);
-		}
-		// resize selectmenu
-		this.resizeButton = controllerEl.querySelector('[data-command="onresize"]');
-		const resizeMenus = CreateResize(this, this.resizeButton);
-		if (resizeMenus) {
-			this.selectMenu_resize = new SelectMenu(this, { checkList: false, position: 'bottom-left', dir: 'ltr' });
-			this.selectMenu_resize.on(this.resizeButton, this.#SetResize.bind(this));
-			this.selectMenu_resize.create(resizeMenus.items, resizeMenus.html);
+
+		const controllerEl = CreateHTML_controller(this, $, controls || []);
+		this.controller = controllerEl ? new Controller(this, $, controllerEl, { position: 'bottom', disabled: true }, this.kind) : null;
+
+		if (controllerEl) {
+			// align selectmenu
+			this.alignButton = controllerEl.querySelector('[data-command="onalign"]');
+			const alignMenus = CreateAlign(this, $, this.alignButton);
+			if (alignMenus) {
+				this.selectMenu_align = new SelectMenu($, { checkList: false, position: 'bottom-center' });
+				this.selectMenu_align.on(this.alignButton, this.#SetMenuAlign.bind(this), { class: 'se-figure-select-list' });
+				this.selectMenu_align.create(alignMenus.items, alignMenus.html);
+			}
+			// as [block, inline] selectmenu
+			this.asButton = controllerEl.querySelector('[data-command="onas"]');
+			const asMenus = CreateAs($, this.asButton);
+			if (asMenus) {
+				this.selectMenu_as = new SelectMenu($, { checkList: false, position: 'bottom-center' });
+				this.selectMenu_as.on(this.asButton, this.#SetMenuAs.bind(this), { class: 'se-figure-select-list' });
+				this.selectMenu_as.create(asMenus.items, asMenus.html);
+			}
+			// resize selectmenu
+			this.resizeButton = controllerEl.querySelector('[data-command="onresize"]');
+			const resizeMenus = CreateResize($, this.resizeButton);
+			if (resizeMenus) {
+				this.selectMenu_resize = new SelectMenu($, { checkList: false, position: 'bottom-left', dir: 'ltr' });
+				this.selectMenu_resize.on(this.resizeButton, this.#SetResize.bind(this));
+				this.selectMenu_resize.create(resizeMenus.items, resizeMenus.html);
+			}
 		}
 
 		// members
@@ -113,57 +185,45 @@ class Figure extends EditorInjector {
 		this.sizeUnit = params.sizeUnit || 'px';
 		this.autoRatio = params.autoRatio;
 		this.isVertical = false;
-		this.percentageButtons = controllerEl.querySelectorAll('[data-command="resize_percent"]');
-		this.captionButton = controllerEl.querySelector('[data-command="caption"]');
+		this.percentageButtons = controllerEl?.querySelectorAll('[data-command="resize_percent"]') || [];
+		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.#offContainer = this.#OffFigureContainer.bind(this);
+		this.#containerResizingESC = this.#ContainerResizingESC.bind(this);
 
 		// init
-		this.eventManager.addEvent(this.alignButton, 'click', this.#OnClick_alignButton.bind(this));
-		this.eventManager.addEvent(this.asButton, 'click', this.#OnClick_asButton.bind(this));
-		this.eventManager.addEvent(this.resizeButton, 'click', this.#OnClick_resizeButton.bind(this));
-		this.editor.applyFrameRoots((e) => {
+		this.#$.eventManager.addEvent(this.alignButton, 'click', this.#OnClick_alignButton.bind(this));
+		this.#$.eventManager.addEvent(this.asButton, 'click', this.#OnClick_asButton.bind(this));
+		this.#$.eventManager.addEvent(this.resizeButton, 'click', this.#OnClick_resizeButton.bind(this));
+		this.#$.contextProvider.applyToRoots((e) => {
 			if (!e.get('wrapper').querySelector('.se-controller.se-resizing-container')) {
 				// resizing
 				const main = CreateHTML_resizeDot();
 				const handles = main.querySelectorAll('.se-resize-dot > span');
 				e.set('_figure', {
 					main: main,
-					border: main.querySelector('.se-resize-dot'),
-					display: main.querySelector('.se-resize-display'),
-					handles: handles
+					border: /** @type {HTMLElement} */ (main.querySelector('.se-resize-dot')),
+					display: /** @type {HTMLElement} */ (main.querySelector('.se-resize-display')),
+					handles: /** @type {*} */ (handles),
 				});
 				e.get('wrapper').appendChild(main);
-				this.eventManager.addEvent(handles, 'mousedown', this.#OnResizeContainer.bind(this));
+				this.#$.eventManager.addEvent(handles, 'mousedown', this.#OnResizeContainer.bind(this));
 			}
 		});
 	}
@@ -171,7 +231,7 @@ class Figure extends EditorInjector {
 	/**
 	 * @description Create a container for the resizing component and insert the element.
 	 * @param {Node} element Target element
-	 * @param {string=} className Class name of container (fixed: se-component)
+	 * @param {string} [className] Class name of container (fixed: `se-component`)
 	 * @returns {FigureInfo} {target, container, cover, inlineCover, caption}
 	 */
 	static CreateContainer(element, className) {
@@ -182,7 +242,7 @@ class Figure extends EditorInjector {
 	/**
 	 * @description Create a container for the inline resizing component and insert the element.
 	 * @param {Node} element Target element
-	 * @param {string} [className] Class name of container (fixed: se-component se-inline-component)
+	 * @param {string} [className] Class name of container (fixed: `se-component` `se-inline-component`)
 	 * @returns {FigureInfo} {target, container, cover, inlineCover, caption}
 	 */
 	static CreateInlineContainer(element, className) {
@@ -191,8 +251,8 @@ class Figure extends EditorInjector {
 	}
 
 	/**
-	 * @description Return HTML string of caption(FIGCAPTION) element
-	 * @param {Node} cover Cover element(FIGURE). "CreateContainer().cover"
+	 * @description Return HTML string of caption(`FIGCAPTION`) element
+	 * @param {Node} cover Cover element(`FIGURE`). `CreateContainer().cover`
 	 * @returns {HTMLElement} caption element
 	 */
 	static CreateCaption(cover, text) {
@@ -202,19 +262,23 @@ class Figure extends EditorInjector {
 	}
 
 	/**
-	 * @description Get the element's container(.se-component) info.
+	 * @description Get the element's container(`.se-component`) info.
 	 * @param {Node} element Target element
 	 * @returns {FigureInfo} {target, container, cover, inlineCover, caption}
 	 */
 	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),
 		};
 	}
 
@@ -222,12 +286,12 @@ class Figure extends EditorInjector {
 	 * @description Ratio calculation
 	 * @param {string|number} w Width size
 	 * @param {string|number} h Height size
-	 * @param {?string=} [defaultSizeUnit="px"] Default size unit (default: "px")
+	 * @param {?string} [defaultSizeUnit="px"] Default size unit (default: `"px"`)
 	 * @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';
@@ -241,7 +305,7 @@ class Figure extends EditorInjector {
 
 		return {
 			w: numbers.get(rw, 4),
-			h: numbers.get(rh, 4)
+			h: numbers.get(rh, 4),
 		};
 	}
 
@@ -249,12 +313,12 @@ class Figure extends EditorInjector {
 	 * @description Ratio calculation
 	 * @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 {string} defaultSizeUnit Default size unit (default: `"px"`)
+	 * @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) {
@@ -268,27 +332,28 @@ class Figure extends EditorInjector {
 
 		return {
 			w: w,
-			h: h
+			h: h,
 		};
 	}
 
 	/**
-	 * @description It is judged whether it is the component[img, iframe, video, audio, table] cover(class="se-component") and table, hr
+	 * @description It is judged whether it is the component[`img`, `iframe`, `video`, `audio`, `table`] cover(class=`"se-component"`) and `table`, `hr`
 	 * @param {Node} element Target element
 	 * @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);
 	}
 
 	/**
 	 * @description Close the figure's controller
 	 */
 	close() {
-		this.editor._preventBlur = false;
+		this.#$.store.set('_preventBlur', false);
 		dom.utils.removeClass(this._cover, 'se-figure-selected');
-		this.controller.close();
-		this.component._removeDragEvent();
+		this.#$.component.__removeDragEvent();
+		this.#removeGlobalEvents();
+		this.controller?.close();
 	}
 
 	/**
@@ -298,19 +363,17 @@ class Figure extends EditorInjector {
 	 * @param {boolean} [params.nonResizing=false] Do not display the resizing button
 	 * @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.figureTarget=false] If `true`, the target is a figure element
+	 * @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;
 		}
 
@@ -318,7 +381,7 @@ class Figure extends EditorInjector {
 		const target = figureInfo.target;
 		let exceptionFormat = false;
 		if (!figureInfo.container) {
-			if (!this.options.get('strictMode').formatFilter) {
+			if (!this.#$.options.get('strictMode').formatFilter) {
 				figureInfo.container = target;
 				figureInfo.cover = target;
 				exceptionFormat = true;
@@ -327,28 +390,35 @@ class Figure extends EditorInjector {
 					container: null,
 					cover: null,
 					width: target.style.width || /** @type {HTMLImageElement} */ (target).width || '',
-					height: target.style.height || /** @type {HTMLImageElement} */ (target).height || ''
+					height: target.style.height || /** @type {HTMLImageElement} */ (target).height || '',
+					isVertical: this.isVertical,
 				};
 			}
 		}
 
 		_DragHandle.set('__figureInst', this);
 
-		this._setFigureInfo(figureInfo);
+		this.#setFigureInfo(figureInfo);
 
 		const sizeTarget = /** @type {HTMLElement} */ (figureTarget ? this._cover || this._container || target : target);
 		const w = sizeTarget.offsetWidth || null;
 		const h = sizeTarget.offsetHeight || null;
-		const { top, left, scrollX, scrollY } = this.offset.getLocal(sizeTarget);
+		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,
@@ -356,15 +426,17 @@ class Figure extends EditorInjector {
 			width: dataSize[0] || 'auto',
 			height: dataSize[1] || 'auto',
 			originWidth: /** @type {HTMLImageElement} */ (target).naturalWidth || target.offsetWidth,
-			originHeight: /** @type {HTMLImageElement} */ (target).naturalHeight || target.offsetHeight
+			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.#$.frameContext.get('_figure');
+		this.#$.ui.setFigureContainer(_figure.main);
+		this.#$.ui.opendControllers = this.#$.ui.opendControllers.filter((c) => c.form !== _figure.main);
 
-		const _figure = this.editor.frameContext.get('_figure');
-		this.editor._figureContainer = _figure.main;
 		_figure.main.style.top = top + 'px';
 		_figure.main.style.left = left + 'px';
 		_figure.main.style.width = (this.isVertical ? h : w) + 'px';
@@ -375,12 +447,13 @@ class Figure extends EditorInjector {
 		_figure.border.style.height = (this.isVertical ? w : h) + 'px';
 
 		this.__offset = { left: left + scrollX, top: top + scrollY };
-		this.editor.opendControllers.push({
+
+		this.#$.ui.opendControllers.push({
 			position: 'none',
 			form: _figure.main,
 			target: sizeTarget,
 			inst: this,
-			notInCarrier: true
+			notInCarrier: true,
 		});
 
 		// percentage active
@@ -407,46 +480,55 @@ class Figure extends EditorInjector {
 		_figure.main.style.display = 'block';
 
 		if (_DragHandle.get('__overInfo') !== ON_OVER_COMPONENT) {
-			// align button
-			this._setAlignIcon();
-			// as button
-			this._setAsIcon();
-			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 + ')');
-			this._displayResizeHandles(!nonResizing);
-			// rotate, aption, align, onresize - display;
-			const transformButtons = this.controller.form.querySelectorAll(
-				'[data-command="rotate"][data-value="90"], [data-command="rotate"][data-value="-90"], [data-command="caption"], [data-command="onalign"], [data-command="onresize"]'
-			);
-			const display = this._inlineCover || exceptionFormat ? 'none' : '';
-			transformButtons.forEach((button) => {
-				/** @type {HTMLButtonElement} */ (button).style.display = display;
-			});
-			// onas
-			const onas = this.controller.form.querySelector('[data-command="onas"]');
-			if (onas) {
-				/** @type {HTMLButtonElement} */ (onas).style.display = exceptionFormat ? 'none' : '';
+			// resize handles
+			const displayType = nonResizing ? 'none' : 'flex';
+			const resizeHandles = _figure.handles;
+			for (let i = 0, len = resizeHandles.length; i < len; i++) {
+				resizeHandles[i].style.display = displayType;
 			}
+
+			if (this.controller) {
+				// size display
+				const size = this.getSize(target);
+				dom.utils.changeTxt(_figure.display, this.#$.lang[this.align === 'none' ? 'basic' : this.align] + ' (' + size.dw + ', ' + size.dh + ')');
+
+				// align button
+				this.#setAlignIcon();
+				// as button
+				this.#setAsIcon();
+				this.#$.ui._visibleControllers(true, true);
+
+				// rotate, aption, align, onresize - display;
+				const transformButtons = this.controller.form.querySelectorAll(
+					'[data-command="rotate"][data-value="90"], [data-command="rotate"][data-value="-90"], [data-command="caption"], [data-command="onalign"], [data-command="onresize"]',
+				);
+				const display = this._inlineCover || exceptionFormat ? 'none' : '';
+				transformButtons?.forEach((button) => {
+					/** @type {HTMLButtonElement} */ (button).style.display = display;
+				});
+				// onas
+				const onas = this.controller.form.querySelector('[data-command="onas"]');
+				if (onas) {
+					/** @type {HTMLButtonElement} */ (onas).style.display = exceptionFormat ? 'none' : '';
+				}
+			}
+
 			// 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'))) {
-			this._setDragEvent(_figure.main);
+			this.#setDragEvent(_figure.main);
 		}
 
 		return targetInfo;
@@ -456,28 +538,28 @@ class Figure extends EditorInjector {
 	 * @description Hide the controller
 	 */
 	controllerHide() {
-		this.controller.hide();
+		this.controller?.hide();
 	}
 
 	/**
 	 * @description Hide the controller
 	 */
 	controllerShow() {
-		this.controller.show();
+		this.controller?.show();
 	}
 
 	/**
 	 * @description Open the figure's controller
 	 * @param {Node} target Target element
 	 * @param {Object} [params={}] params
-	 * @param {boolean=} params.isWWTarget If the controller is in the WYSIWYG area, set it to true.
-	 * @param {() => void=} params.initMethod Method to be called when the controller is closed.
-	 * @param {boolean=} params.disabled If true, the controller is disabled.
-	 * @param {{left: number, top: number}=} params.addOffset Additional offset values
+	 * @param {boolean} [params.isWWTarget] If the controller is in the WYSIWYG area, set it to `true`.
+	 * @param {() => void} [params.initMethod] Method to be called when the controller is closed.
+	 * @param {boolean} [params.disabled] If `true`, the controller is disabled.
+	 * @param {{left: number, top: number}} [params.addOffset] Additional offset values
 	 */
 	controllerOpen(target, params) {
 		this._element = /** @type {HTMLElement}  */ (target);
-		this.controller.open(target, null, params);
+		this.controller?.open(target, null, params);
 	}
 
 	/**
@@ -485,7 +567,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,53 +578,78 @@ 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}}
+	 * @param {?Node} [targetNode] Target element, default is the current element
+	 * @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'
-				};
+			if (!this.#$.options.get('strictMode').formatFilter) {
+				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,
 		};
 	}
 
 	/**
 	 * @description Align the container.
 	 * @param {?Node} targetNode Target element
-	 * @param {string} align "none"|"left"|"center"|"right"
+	 * @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;
@@ -550,7 +657,7 @@ class Figure extends EditorInjector {
 		const target = figure.target;
 		const container = figure.container;
 		const cover = figure.cover;
-		if (/%$/.test(target.style.width) && align === 'center' && !this.component.isInline(container)) {
+		if (/%$/.test(target.style.width) && align === 'center' && !this.#$.component.isInline(container)) {
 			container.style.minWidth = '100%';
 			cover.style.width = container.style.width;
 		} else {
@@ -559,7 +666,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);
 		}
 
@@ -568,44 +675,47 @@ class Figure extends EditorInjector {
 			this.__setCoverPaddingBottom(w, h);
 		}
 
-		this._setAlignIcon();
+		this.#setAlignIcon();
 	}
 
 	/**
 	 * @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': {
 				if (inlineCover) break;
-				this.component.deselect();
+				this.#$.component.deselect();
 
 				const next = container.nextElementSibling;
 				const parent = container.parentElement;
 
-				newTarget.style.width = '';
-				newTarget.style.height = '';
 				const figure = Figure.CreateInlineContainer(newTarget);
 				dom.utils.addClass(
 					figure.container,
 					container.className
 						.split(' ')
 						.filter((v) => v !== 'se-figure-selected' && v !== 'se-component-selected')
-						.join('|')
+						.join('|'),
 				);
 
-				this._asFormatChange(figure, w, h);
+				this.#asFormatChange(figure, w, h);
 
-				const line = dom.utils.createElement(this.options.get('defaultLine'), null, figure.container);
+				const line = dom.utils.createElement(this.#$.options.get('defaultLine'), null, figure.container);
 				parent.insertBefore(line, next);
 				dom.utils.removeItem(container);
 
@@ -613,61 +723,39 @@ class Figure extends EditorInjector {
 			}
 			case 'block': {
 				if (!inlineCover) break;
-				this.component.deselect();
+				this.#$.component.deselect();
 
-				this.selection.setRange(container, 0, container, 1);
-				const r = this.html.remove();
-				const s = this.nodeTransform.split(r.container, r.offset, 0);
+				this.#$.selection.setRange(container, 0, container, 1);
+				const r = this.#$.html.remove();
+				const s = this.#$.nodeTransform.split(r.container, r.offset, 0);
 
 				if (s?.previousElementSibling && dom.check.isZeroWidth(s.previousElementSibling)) {
 					dom.utils.removeItem(s.previousElementSibling);
 				}
 
-				newTarget.style.width = '';
-				newTarget.style.height = '';
 				const figure = Figure.CreateContainer(newTarget);
 				dom.utils.addClass(
 					figure.container,
 					container.className
 						.split(' ')
 						.filter((v) => v !== 'se-inline-component' && v !== 'se-figure-selected' && v !== 'se-component-selected')
-						.join('|')
+						.join('|'),
 				);
 
-				this._asFormatChange(figure, w, h);
+				this.#asFormatChange(figure, w, h);
 
 				(s || r.container).parentElement.insertBefore(figure.container, s);
 
 				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;
 	}
 
 	/**
-	 * @description Controller button action
-	 * @param {HTMLButtonElement} target Target button element
-	 * @returns
+	 * @hook Module.Controller
+	 * @type {SunEditor.Hook.Controller.Action}
 	 */
 	controllerAction(target) {
 		const command = target.getAttribute('data-command');
@@ -678,7 +766,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,27 +779,29 @@ 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 caption = Figure.CreateCaption(this._cover, this.#$.lang.caption);
 					const captionText = dom.query.getEdgeChild(caption, (current) => current.nodeType === 3, false);
 
 					if (!captionText) {
 						caption.focus();
 					} else {
-						this.selection.setRange(captionText, 0, captionText, captionText.textContent.length);
+						this.#$.selection.setRange(captionText, 0, captionText, captionText.textContent.length);
 					}
 
+					this._caption = caption;
 					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 = null;
 				}
 
-				this._caption = !this._caption;
 				if (/\d+/.test(element.style.height) || (this.isVertical && this._caption)) {
 					if (/%$/.test(element.style.width) || /auto/.test(element.style.height)) {
 						this.deleteTransform();
@@ -720,20 +810,24 @@ class Figure extends EditorInjector {
 					}
 				}
 				break;
-			case 'revert':
+			}
+			case 'revert': {
 				this._setRevert();
 				break;
-			case 'edit':
-				this.inst.edit(element);
+			}
+			case 'edit': {
+				this.inst.componentEdit(element);
 				break;
+			}
 			case 'copy': {
-				this.component.copy(this._container);
+				this.#$.component.copy(this._container);
 				break;
 			}
-			case 'remove':
-				this.inst.destroy(element);
+			case 'remove': {
+				this.inst.componentDestroy(element);
 				this.controller.close();
 				break;
+			}
 		}
 
 		if (/^__c__/.test(command)) {
@@ -741,11 +835,11 @@ class Figure extends EditorInjector {
 			return;
 		}
 
-		if (/^edit$/.test(command)) return;
+		if (command === 'edit') return;
 
-		this.history.push(false);
+		this.#$.history.push(false);
 		if (!/^remove|caption$/.test(command)) {
-			this.component.select(element, this.kind);
+			this.#$.component.select(element, this.kind);
 		}
 	}
 
@@ -754,31 +848,32 @@ class Figure extends EditorInjector {
 	 * @param {Node} container - The container element of the figure component.
 	 * @param {Node} originEl - The original element of the figure component.
 	 * @param {Node} anchorCover - The anchor cover element of the figure component.
-	 * @param {import('./FileManager').default} [fileManagerInst=null] - FileManager module instance, if used.
+	 * @param {import('../manager/FileManager').default} [fileManagerInst=null] - FileManager module instance, if used.
 	 */
 	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 isInline = this.#$.component.isInline(container);
+		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;
 			existElement.parentNode.replaceChild(container, existElement);
-		} else if (isInline && this.format.isLine(existElement)) {
+		} else if (isInline && this.#$.format.isLine(existElement)) {
 			const refer = isInline && /^SPAN$/i.test(originEl.parentElement.nodeName) ? originEl.parentElement : originEl;
 			refer.parentElement.replaceChild(container, refer);
 		} else if (dom.check.isListCell(existElement)) {
 			const refer = dom.query.getParentElement(originEl, (current) => current.parentNode === existElement);
 			existElement.insertBefore(container, refer);
 			dom.utils.removeItem(originEl);
-			this.nodeTransform.removeEmptyNode(refer, null, true);
-		} else if (this.format.isLine(existElement)) {
+			this.#$.nodeTransform.removeEmptyNode(refer, null, true);
+		} else if (this.#$.format.isLine(existElement)) {
 			const refer = dom.query.getParentElement(originEl, (current) => current.parentNode === existElement);
-			existElement = this.nodeTransform.split(existElement, refer);
+			existElement = this.#$.nodeTransform.split(existElement, refer);
 			existElement.parentNode.insertBefore(container, existElement);
 			dom.utils.removeItem(originEl);
-			this.nodeTransform.removeEmptyNode(existElement, null, true);
+			this.#$.nodeTransform.removeEmptyNode(existElement, null, true);
 		} else {
-			if (this.format.isLine(existElement.parentNode)) {
+			if (this.#$.format.isLine(existElement.parentNode)) {
 				const formats = existElement.parentNode;
 				formats.parentNode.insertBefore(container, existElement.previousSibling ? formats.nextElementSibling : formats);
 				if (fileManagerInst?.__updateTags.map((current) => existElement.contains(current)).length === 0) dom.utils.removeItem(existElement);
@@ -792,10 +887,10 @@ class Figure extends EditorInjector {
 
 	/**
 	 * @description Initialize the transform style (rotation) of the element.
-	 * @param {?Node=} node Target element, default is the current element
+	 * @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(',');
@@ -805,7 +900,7 @@ class Figure extends EditorInjector {
 		element.style.transform = '';
 		element.style.transformOrigin = '';
 
-		this._deleteCaptionPosition(element);
+		this.#deleteCaptionPosition(element);
 		this._applySize(size[0] || 'auto', size[1] || '', '');
 	}
 
@@ -814,20 +909,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') {
@@ -843,11 +941,13 @@ class Figure extends EditorInjector {
 				const w = (isVertical ? offsetH : offsetW) + 'px';
 				const h = (isVertical ? offsetW : offsetH) + 'px';
 
-				this._deletePercentSize();
+				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,23 +957,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);
+			this.#setCaptionPosition(element);
 		} finally {
-			this.__preventSizechange = false;
+			this.#preventSizechange = false;
+		}
+	}
+
+	/**
+	 * @internal
+	 * @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';
+		if (this.controller) 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');
+		}
+	}
+
+	/**
+	 * @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) {
+	#setFigureInfo(figureInfo) {
 		this._inlineCover = figureInfo.inlineCover;
 		this._cover = figureInfo.cover || this._inlineCover;
 		this._container = figureInfo.container;
@@ -881,11 +1023,11 @@ 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);
 	}
 
 	/**
-	 * @private
+	 * @internal
 	 * @description Applies rotation transformation to the target element.
 	 * @param {HTMLElement} element Target element.
 	 * @param {number} r Rotation degree.
@@ -927,7 +1069,7 @@ class Figure extends EditorInjector {
 	}
 
 	/**
-	 * @private
+	 * @internal
 	 * @description Applies size adjustments to the figure element.
 	 * @param {string|number} w Width value.
 	 * @param {string|number} h Height value.
@@ -939,18 +1081,18 @@ class Figure extends EditorInjector {
 		h = /** @type {string} */ (h || (this.autoRatio ? this.autoRatio.current || this.autoRatio.default : h));
 		w = /** @type {string} */ (numbers.is(w) ? w + this.sizeUnit : w);
 
-		if (!/%$/.test(w) && !/%$/.test(h) && !onlyW && !onlyH) this._deletePercentSize();
+		if (!/%$/.test(w) && !/%$/.test(h) && !onlyW && !onlyH) this.#deletePercentSize();
 
 		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);
 			}
@@ -959,11 +1101,11 @@ class Figure extends EditorInjector {
 		if (this.align === 'center') this.setAlign(this._element, this.align);
 
 		// save current size
-		this._saveCurrentSize();
+		this.#saveCurrentSize();
 	}
 
 	/**
-	 * @private
+	 * @internal
 	 * @description Sets padding-bottom for cover elements based on width and height.
 	 * @param {string} w Width value.
 	 * @param {string} h Height value.
@@ -971,6 +1113,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) + '%';
@@ -980,13 +1126,13 @@ class Figure extends EditorInjector {
 	}
 
 	/**
-	 * @private
+	 * @internal
 	 * @description Sets the figure element to its auto size.
 	 */
 	_setAutoSize() {
 		if (this._caption) this._caption.style.marginTop = '';
 		this.deleteTransform();
-		this._deletePercentSize();
+		this.#deletePercentSize();
 
 		if (this.autoRatio) {
 			this._setPercentSize('100%', this.autoRatio.current || this.autoRatio.default);
@@ -994,24 +1140,26 @@ 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);
 
 		// save current size
-		this._saveCurrentSize();
+		this.#saveCurrentSize();
 	}
 
 	/**
-	 * @private
+	 * @internal
 	 * @description Sets the figure element's size in percentage.
 	 * @param {string|number} w Width percentage.
 	 * @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 + '');
@@ -1019,15 +1167,16 @@ class Figure extends EditorInjector {
 		this._container.style.height = '';
 
 		// exceptionFormat
-		if (this._element === this._cover && !this.options.get('strictMode').formatFilter) {
-			this._saveCurrentSize();
+		if (this._element === this._cover && !this.#$.options.get('strictMode').formatFilter) {
+			this.#saveCurrentSize();
 			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);
@@ -1037,64 +1186,63 @@ class Figure extends EditorInjector {
 			this.__setCoverPaddingBottom(String(w), String(h));
 		}
 
-		this._setCaptionPosition(this._element);
+		this.#setCaptionPosition(this._element);
 
 		// save current size
-		this._saveCurrentSize();
+		this.#saveCurrentSize();
 	}
 
 	/**
-	 * @private
 	 * @description Deletes percentage-based sizing from the figure element.
 	 */
-	_deletePercentSize() {
-		this._cover.style.width = '';
-		this._cover.style.height = '';
+	#deletePercentSize() {
+		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);
 	}
 
 	/**
-	 * @private
+	 * @internal
 	 * @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);
 	}
 
 	/**
-	 * @private
 	 * @description Updates the figure's alignment icon.
 	 */
-	_setAlignIcon() {
+	#setAlignIcon() {
 		if (!this.alignButton) return;
 		dom.utils.changeElement(this.alignButton.firstElementChild, this._alignIcons[this.align]);
 	}
 
 	/**
-	 * @private
 	 * @description Updates the figure's block/inline format icon.
 	 */
-	_setAsIcon() {
+	#setAsIcon() {
 		if (!this.asButton) return;
-		dom.utils.changeElement(this.asButton.firstElementChild, this.icons[`as_${this.as}`]);
+		dom.utils.changeElement(this.asButton.firstElementChild, this.#$.icons[`as_${this.as}`]);
 	}
 
 	/**
-	 * @private
 	 * @description Saves the current size of the figure component.
 	 */
-	_saveCurrentSize() {
-		if (this.__preventSizechange) return;
+	#saveCurrentSize() {
+		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
@@ -1107,23 +1255,26 @@ class Figure extends EditorInjector {
 	}
 
 	/**
-	 * @private
 	 * @description Adjusts the position of the caption within the figure.
 	 * @param {HTMLElement} element Target element.
 	 */
-	_setCaptionPosition(element) {
+	#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 = '';
+			}
 		}
 	}
 
 	/**
-	 * @private
 	 * @description Removes the margin top property from the figure caption.
 	 * @param {HTMLElement} element Target element.
 	 */
-	_deleteCaptionPosition(element) {
+	#deleteCaptionPosition(element) {
 		const figcaption = /** @type {HTMLElement} */ (dom.query.getEdgeChild(dom.query.getParentElement(element, 'FIGURE'), 'FIGCAPTION', false));
 		if (figcaption) {
 			figcaption.style.marginTop = '';
@@ -1131,50 +1282,32 @@ class Figure extends EditorInjector {
 	}
 
 	/**
-	 * @private
-	 * @description Displays or hides the resize handles of the figure component.
-	 * @param {boolean} display Whether to display resize handles.
+	 * @description Removes the resize event listeners.
 	 */
-	_displayResizeHandles(display) {
-		const type = !display ? 'none' : 'flex';
-		this.controller.form.style.display = type;
+	#offResizeEvent() {
+		this.#$.component.__removeDragEvent();
+		this.#removeGlobalEvents();
 
-		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');
-		}
+		this._displayResizeHandles(true);
+		this.#$.ui.offCurrentController();
+		this.#$.ui.disableBackWrapper();
 	}
 
 	/**
-	 * @private
-	 * @description Removes the resize event listeners.
+	 * @description Removes global event listeners related to resizing.
 	 */
-	_offResizeEvent() {
-		this.component._removeDragEvent();
-		this.eventManager.removeGlobalEvent(this.__onContainerEvent);
-		this.eventManager.removeGlobalEvent(this.__offContainerEvent);
-		this.eventManager.removeGlobalEvent(this.__onResizeESCEvent);
-
-		this._displayResizeHandles(true);
-		this.ui._offCurrentController();
-		this.ui.disableBackWrapper();
+	#removeGlobalEvents() {
+		this.#$.eventManager.removeGlobalEvent(this.__onContainerEvent);
+		this.#$.eventManager.removeGlobalEvent(this.__offContainerEvent);
+		this.#$.eventManager.removeGlobalEvent(this.#onResizeESCEvent);
 	}
 
 	/**
-	 * @private
 	 * @description Sets up drag event handling for the figure component.
 	 * @param {Node} figureMain The main figure container element.
 	 */
-	_setDragEvent(figureMain) {
-		const dragHandle = this.editor.frameContext.get('wrapper').querySelector('.se-drag-handle');
+	#setDragEvent(figureMain) {
+		const dragHandle = /** @type {HTMLElement} */ (this.#$.frameContext.get('wrapper').querySelector('.se-drag-handle'));
 		dom.utils.removeClass(dragHandle, 'se-drag-handle-full');
 
 		dragHandle.style.opacity = '';
@@ -1197,8 +1330,8 @@ class Figure extends EditorInjector {
 	 */
 	#OnScrollDragHandler(dragHandle, figureMain) {
 		dragHandle.style.display = 'block';
-		dragHandle.style.left = figureMain.offsetLeft + (this.options.get('_rtl') ? dragHandle.offsetWidth : figureMain.offsetWidth - dragHandle.offsetWidth * 1.5) + 'px';
-		dragHandle.style.top = figureMain.offsetTop - dragHandle.offsetHeight + 'px';
+		dragHandle.style.left = figureMain.offsetLeft + (this.#$.options.get('_rtl') ? dragHandle.offsetWidth : figureMain.offsetWidth - dragHandle.offsetWidth * 1.5) + 'px';
+		dragHandle.style.top = figureMain.offsetTop - dragHandle.offsetHeight + 0.5 + 'px';
 	}
 
 	/**
@@ -1208,15 +1341,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';
-		this.ui.enableBackWrapper(DIRECTION_CURSOR_MAP[direction]);
+		this.#$.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,17 +1366,17 @@ 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;
 			}
 		}
 
-		inst.__onContainerEvent = inst.eventManager.addGlobalEvent('mousemove', inst.__containerResizing);
-		inst.__offContainerEvent = inst.eventManager.addGlobalEvent('mouseup', inst.__containerResizingOff);
+		inst.__onContainerEvent = this.#$.eventManager.addGlobalEvent('mousemove', inst.__containerResizing);
+		inst.__offContainerEvent = this.#$.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 +1387,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,29 +1413,32 @@ 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;
 	}
 
 	/**
 	 * @description Finalizes the resizing process of the figure container.
 	 */
 	#ContainerResizingOff() {
-		this._offResizeEvent();
+		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);
@@ -1317,8 +1456,8 @@ class Figure extends EditorInjector {
 			if (this.isVertical) this.setTransform(this._element, w, h, 0);
 		}
 
-		this.history.push(false);
-		this.component.select(this._element, this.kind);
+		this.#$.history.push(false);
+		this.#$.component.select(this._element, this.kind);
 	}
 
 	/**
@@ -1327,8 +1466,8 @@ class Figure extends EditorInjector {
 	 */
 	#ContainerResizingESC(e) {
 		if (!keyCodeMap.isEsc(e.code)) return;
-		this._offResizeEvent();
-		this.component.select(this._element, this.kind);
+		this.#offResizeEvent();
+		this.#$.component.select(this._element, this.kind);
 	}
 
 	/**
@@ -1337,7 +1476,7 @@ class Figure extends EditorInjector {
 	#SetMenuAlign(value) {
 		this.setAlign(this._element, value);
 		this.selectMenu_align.close();
-		this.component.select(this._element, this.kind);
+		this.#$.component.select(this._element, this.kind);
 	}
 
 	/**
@@ -1367,12 +1506,14 @@ class Figure extends EditorInjector {
 		}
 
 		this.selectMenu_resize.close();
-		this.component.select(this._element, this.kind);
+		this.#$.component.select(this._element, this.kind);
 	}
 
 	#OffFigureContainer() {
-		this.editor.frameContext.get('_figure').main.style.display = 'none';
-		this.editor._figureContainer = null;
+		const _figure = this.#$.frameContext.get('_figure');
+		_figure.main.style.display = 'none';
+		this.#$.ui.setFigureContainer(null);
+		this.#$.ui.opendControllers = this.#$.ui.opendControllers.filter((c) => c.form !== _figure.main);
 	}
 
 	#OnClick_alignButton() {
@@ -1404,27 +1545,41 @@ 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] || '',
+	};
 }
 
-function CreateAlign(inst, button) {
+/**
+ * @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());
+}
+
+/**
+ * @param {Figure} inst - Figure instance
+ * @param {SunEditor.Deps} $ - Kernel dependencies
+ * @param {Element} button - Align button element
+ * @returns {{html: string[], items: string[]}|null}
+ */
+function CreateAlign(inst, $, button) {
 	if (!button) return null;
 
 	const icons = [inst._alignIcons.none, inst._alignIcons.left, inst._alignIcons.center, inst._alignIcons.right];
-	const langs = [inst.lang.basic, inst.lang.left, inst.lang.center, inst.lang.right];
+	const langs = [$.lang.basic, $.lang.left, $.lang.center, $.lang.right];
 	const commands = ['none', 'left', 'center', 'right'];
 	const html = [];
 	const items = [];
@@ -1442,11 +1597,16 @@ function CreateAlign(inst, button) {
 	return { html: html, items: items };
 }
 
-function CreateAs(inst, button) {
+/**
+ * @param {SunEditor.Deps} $ - Kernel dependencies
+ * @param {Element} button - As button element
+ * @returns {{html: string[], items: string[]}|null}
+ */
+function CreateAs($, button) {
 	if (!button) return null;
 
-	const icons = [inst.icons.as_block, inst.icons.as_inline];
-	const langs = [inst.lang.asBlock, inst.lang.asInline];
+	const icons = [$.icons.as_block, $.icons.as_inline];
+	const langs = [$.lang.asBlock, $.lang.asInline];
 	const commands = ['block', 'inline'];
 	const html = [];
 	const items = [];
@@ -1464,7 +1624,12 @@ function CreateAs(inst, button) {
 	return { html: html, items: items };
 }
 
-function CreateResize(editor, button) {
+/**
+ * @param {SunEditor.Deps} $ - Kernel dependencies
+ * @param {Element} button - Resize button element
+ * @returns {{html: string[], items: string[]}|null}
+ */
+function CreateResize($, button) {
 	if (!button) return null;
 
 	const items = button.getAttribute('data-value').split(',');
@@ -1473,13 +1638,16 @@ function CreateResize(editor, button) {
 		v = items[i];
 		n = numbers.is(v);
 		c = n ? 'resize_percent' + v : 'auto';
-		l = n ? v + '%' : editor.lang.autoSize;
+		l = n ? v + '%' : $.lang.autoSize;
 		html.push('<button type="button" class="se-btn-list" data-command="' + c + '" data-value="' + v + '"><span>' + l + '</span></button>');
 	}
 
 	return { html: html, items: items };
 }
 
+/**
+ * @returns {HTMLElement}
+ */
 function CreateHTML_resizeDot() {
 	const html = /*html*/ `
 		<div class="se-resize-dot">
@@ -1497,6 +1665,10 @@ function CreateHTML_resizeDot() {
 	return dom.utils.createElement('DIV', { class: 'se-controller se-resizing-container', style: 'display: none;' }, html);
 }
 
+/**
+ * @param {string} group - Button group string (e.g. `"resize_100"`, `"rotate_l"`)
+ * @returns {{c: string, v: *, l: string, t: *, i: string}|null}
+ */
 function GET_CONTROLLER_BUTTONS(group) {
 	const g = group.split('_');
 	const command = g[0];
@@ -1571,15 +1743,21 @@ function GET_CONTROLLER_BUTTONS(group) {
 		v: v,
 		l: l,
 		t: t,
-		i: i
+		i: i,
 	};
 }
 
-function CreateHTML_controller(inst, controls) {
+/**
+ * @param {Figure} inst - Figure instance
+ * @param {SunEditor.Deps} $ - Kernel dependencies
+ * @param {FigureControls} controls - Controller button array
+ * @returns {HTMLElement|null}
+ */
+function CreateHTML_controller(inst, $, controls) {
 	let html = null;
 
 	if (controls?.length > 0) {
-		const { lang, icons } = inst;
+		const { lang, icons } = $;
 		html = '<div class="se-arrow se-arrow-up"></div>';
 		for (let i = 0, group; i < controls.length; i++) {
 			group = controls[i];
@@ -1587,17 +1765,17 @@ function CreateHTML_controller(inst, controls) {
 			for (let j = 0, len = group.length, m; j < len; j++) {
 				m = group[j];
 
-				if (typeof m?.action === 'function') {
-					const g = m;
+				if (typeof (/** @type {ControlCustomAction} */ (m)?.action) === 'function') {
+					const g = /** @type {ControlCustomAction} */ (m);
 					m = {
 						c: `__c__${g.command}`,
 						v: g.value || '',
 						l: g.title,
-						i: g.icon
+						i: g.icon,
 					};
 					inst._action[m.c] = g.action;
 				} else {
-					m = GET_CONTROLLER_BUTTONS(m);
+					m = GET_CONTROLLER_BUTTONS(/** @type {string} */ (m));
 					if (!m) continue;
 				}
 
@@ -1611,7 +1789,9 @@ function CreateHTML_controller(inst, controls) {
 		}
 	}
 
-	return dom.utils.createElement('DIV', { class: 'se-controller se-controller-resizing' + (!html ? ' se-empty-controller' : '') }, html);
+	if (!html) return null;
+
+	return dom.utils.createElement('DIV', { class: 'se-controller se-controller-resizing' }, html);
 }
 
 export default Figure;