suneditor 3.0.0-alpha.2 → 3.0.0-alpha.20

package/src/modules/Figure.js

@@ -1,9 +1,9 @@
 import EditorInjector from '../editorInjector';
 import { Controller, SelectMenu, _DragHandle } from '../modules';
-import { domUtils, numbers, env, converter } from '../helper';
+import { dom, numbers, env, converter, keyCodeMap } from '../helper';
 
 const { ON_OVER_COMPONENT } = env;
-const DIRECTION_CURSOR_MAP = { tl: 'nw-resize', tr: 'ne-resize', bl: 'sw-resize', br: 'se-resize', lw: 'w-resize', th: 'n-resize', rw: 'e-resize', bh: 's-resize' };
+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';
 let __resizing_p_wh = false;
@@ -11,233 +11,325 @@ let __resizing_p_ow = false;
 let __resizing_cw = 0;
 let __resizing_sw = 0;
 
-const Figure = function (inst, controls, params) {
-	EditorInjector.call(this, inst.editor);
-	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
-	};
-
-	// modules
-	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, SetMenuAlign.bind(this), { class: 'se-resizing-align-list' });
-		this.selectMenu_align.create(alignMenus.items, alignMenus.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, SetResize.bind(this));
-		this.selectMenu_resize.create(resizeMenus.items, resizeMenus.html);
-	}
-
-	// members
-	this.inst = inst;
-	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.align = 'none';
-	this._element = null;
-	this._cover = null;
-	this._container = null;
-	this._caption = null;
-	this._width = 0;
-	this._height = 0;
-	this._element_w = 0;
-	this._element_h = 0;
-	this._element_l = 0;
-	this._element_t = 0;
-	this._resize_w = 0;
-	this._resize_h = 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: '' };
-	this.__offset = {};
-	this.__offContainer = OffFigureContainer.bind(this);
-	this.__containerResizing = ContainerResizing.bind(this);
-	this.__containerResizingOff = ContainerResizingOff.bind(this);
-	this.__containerResizingESC = ContainerResizingESC.bind(this);
-	this.__onContainerEvent = null;
-	this.__offContainerEvent = null;
-	this.__onResizeESCEvent = null;
-	this.__fileManagerInfo = false;
-
-	// init
-	this.eventManager.addEvent(this.alignButton, 'click', OnClick_alignButton.bind(this));
-	this.eventManager.addEvent(this.resizeButton, 'click', OnClick_resizeButton.bind(this));
-	this.editor.applyFrameRoots((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
-			});
-			e.get('wrapper').appendChild(main);
-			this.eventManager.addEvent(handles, 'mousedown', OnResizeContainer.bind(this));
-		}
-	});
-};
+/**
+ * @typedef {Object} FigureParams
+ * @property {string} [sizeUnit="px"] Size unit
+ * @property {{ current: string, default: string }} [autoRatio=null] Auto ratio { current: '00%', default: '00%' }
+ */
 
 /**
- * @description Create a container for the resizing component and insert the element.
- * @param {Element} element Target element
- * @param {string} className Class name of container (fixed: se-component)
- * @returns {object} {container, cover, caption}
+ * @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)
  */
-Figure.CreateContainer = function (element, className) {
-	domUtils.createElement('DIV', { class: 'se-component' + (className ? ' ' + className : '') }, domUtils.createElement('FIGURE', null, element));
-	return Figure.GetContainer(element);
-};
 
 /**
- * @description Return HTML string of caption(FIGCAPTION) element
- * @param {Element} cover Cover element(FIGURE). "CreateContainer().cover"
- * @returns {Element} caption element
+ * @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 {string} [align] - Alignment of the element.
+ * @property {{w:number, h:number}} [ratio] - The aspect ratio of the element.
+ * @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 {number} [originWidth] - Original width from `naturalWidth` or `offsetWidth`.
+ * @property {number} [originHeight] - Original height from `naturalHeight` or `offsetHeight`.
  */
-Figure.CreateCaption = function (cover, text) {
-	const caption = domUtils.createElement('FIGCAPTION', null, '<div>' + text + '</div>');
-	cover.appendChild(caption);
-	return caption;
-};
 
 /**
- * @description Get the element's container(.se-component) info.
- * @param {Element} element Target element
- * @returns {object} {container, cover, caption}
+ * @typedef {Array<Array<string|{action: (element: Node, value: string, target: Node) => void, command: string, value: string, title: string, icon: string}>>} FigureControls
  */
-Figure.GetContainer = function (element) {
-	const cover = domUtils.getParentElement(element, 'FIGURE');
-	return {
-		target: element,
-		container: domUtils.getParentElement(element, Figure.__is) || cover,
-		cover: cover,
-		caption: domUtils.getEdgeChild(element.parentElement, 'FIGCAPTION')
-	};
-};
 
 /**
- * @description Ratio calculation
- * @param {string|number} w Width size
- * @param {string|number} h Height size
- * @param {defaultSizeUnit|undefined|null} defaultSizeUnit Default size unit (default: "px")
- * @return {{w: number, h: number}}
+ * @class
+ * @description Controller module class
  */
-Figure.GetRatio = function (w, h, defaultSizeUnit) {
-	let rw = 1,
-		rh = 1;
-	if (/\d+/.test(w) && /\d+/.test(h)) {
-		const xUnit = (!numbers.is(w) && w.replace(/\d+|\./g, '')) || defaultSizeUnit || 'px';
-		const yUnit = (!numbers.is(h) && h.replace(/\d+|\./g, '')) || defaultSizeUnit || 'px';
-		if (xUnit === yUnit) {
-			const w_number = numbers.get(w, 4);
-			const h_number = numbers.get(h, 4);
-			rw = w_number / h_number;
-			rh = h_number / w_number;
+class Figure extends EditorInjector {
+	/**
+	 * @constructor
+	 * @param {*} inst The instance object that called the constructor.
+	 * @param {FigureControls} controls Controller button array
+	 * @param {FigureParams} params Figure options
+	 */
+	constructor(inst, controls, params) {
+		super(inst.editor);
+		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
+		};
+
+		// 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);
+		}
+
+		// members
+		this.inst = inst;
+		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.align = 'none';
+		this.as = 'block';
+		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.__onContainerEvent = null;
+		this.__offContainerEvent = null;
+		this.__onResizeESCEvent = null;
+		this.__fileManagerInfo = false;
+
+		// 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) => {
+			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
+				});
+				e.get('wrapper').appendChild(main);
+				this.eventManager.addEvent(handles, 'mousedown', this.#OnResizeContainer.bind(this));
+			}
+		});
 	}
 
-	return {
-		w: numbers.get(rw, 4),
-		h: numbers.get(rh, 4)
-	};
-};
+	/**
+	 * @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)
+	 * @returns {FigureInfo} {target, container, cover, inlineCover, caption}
+	 */
+	static CreateContainer(element, className) {
+		dom.utils.createElement('DIV', { class: 'se-component' + (className ? ' ' + className : '') }, dom.utils.createElement('FIGURE', null, element));
+		return Figure.GetContainer(element);
+	}
 
-/**
- * @description Ratio calculation
- * @param {string|number} w Width size
- * @param {string|number} h Height size
- * @param {defaultSizeUnit|undefined|null} defaultSizeUnit Default size unit (default: "px")
- * @param {{w: number, h: number}} ratio Ratio size (Figure.GetRatio)
- * @return {{w: string|number, h: string|number}}
- */
-Figure.CalcRatio = function (w, h, defaultSizeUnit, ratio) {
-	if (/\d+/.test(w) && /\d+/.test(h)) {
-		const xUnit = (!numbers.is(w) && w.replace(/\d+|\./g, '')) || defaultSizeUnit || 'px';
-		const yUnit = (!numbers.is(h) && h.replace(/\d+|\./g, '')) || defaultSizeUnit || 'px';
-		if (xUnit === yUnit) {
-			const dec = xUnit === '%' ? 2 : 0;
-			const ow = w;
-			const oh = h;
-			h = numbers.get(ratio.h * numbers.get(ow, dec), dec) + yUnit;
-			w = numbers.get(ratio.w * numbers.get(oh, dec), dec) + xUnit;
+	/**
+	 * @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)
+	 * @returns {FigureInfo} {target, container, cover, inlineCover, caption}
+	 */
+	static CreateInlineContainer(element, className) {
+		dom.utils.createElement('SPAN', { class: 'se-component se-inline-component' + (className ? ' ' + className : '') }, element);
+		return Figure.GetContainer(element);
+	}
+
+	/**
+	 * @description Return HTML string of caption(FIGCAPTION) element
+	 * @param {Node} cover Cover element(FIGURE). "CreateContainer().cover"
+	 * @returns {HTMLElement} caption element
+	 */
+	static CreateCaption(cover, text) {
+		const caption = dom.utils.createElement('FIGCAPTION', null, '<div>' + text + '</div>');
+		cover.appendChild(caption);
+		return caption;
+	}
+
+	/**
+	 * @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);
+		return {
+			target: /** @type {HTMLElement} */ (element),
+			container: /** @type {HTMLElement} */ (dom.query.getParentElement(element, Figure.is, 2) || cover),
+			cover: /** @type {HTMLElement} */ (cover),
+			inlineCover: dom.utils.hasClass(inlineCover, 'se-inline-component') ? /** @type {HTMLElement} */ (inlineCover) : null,
+			caption: /** @type {HTMLElement} */ (dom.query.getEdgeChild(element.parentElement, 'FIGCAPTION', false))
+		};
+	}
+
+	/**
+	 * @description Ratio calculation
+	 * @param {string|number} w Width size
+	 * @param {string|number} h Height size
+	 * @param {?string=} [defaultSizeUnit="px"] Default size unit (default: "px")
+	 * @return {{w: number, h: number}}
+	 */
+	static GetRatio(w, h, defaultSizeUnit) {
+		let rw = 1,
+			rh = 1;
+		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';
+			if (xUnit === yUnit) {
+				const w_number = numbers.get(w, 4);
+				const h_number = numbers.get(h, 4);
+				rw = w_number / h_number;
+				rh = h_number / w_number;
+			}
 		}
+
+		return {
+			w: numbers.get(rw, 4),
+			h: numbers.get(rh, 4)
+		};
 	}
 
-	return {
-		w: w,
-		h: h
-	};
-};
+	/**
+	 * @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)
+	 * @return {{w: string|number, h: string|number}}
+	 */
+	static CalcRatio(w, h, defaultSizeUnit, ratio) {
+		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';
+			if (xUnit === yUnit) {
+				const dec = xUnit === '%' ? 2 : 0;
+				const ow = w;
+				const oh = h;
+				h = numbers.get(ratio.h * numbers.get(ow, dec), dec) + yUnit;
+				w = numbers.get(ratio.w * numbers.get(oh, dec), dec) + xUnit;
+			}
+		}
 
-/**
- * @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}
- * @private
- */
-Figure.__is = function (element) {
-	return domUtils.hasClass(element, 'se-component') || /^(HR)$/.test(element?.nodeName);
-};
+		return {
+			w: w,
+			h: h
+		};
+	}
+
+	/**
+	 * @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);
+	}
 
-Figure.prototype = {
 	/**
-	 * @override controller
+	 * @description Close the figure's controller
 	 */
 	close() {
-		this.editor._antiBlur = false;
-		domUtils.removeClass(this._cover, 'se-figure-selected');
+		this.editor._preventBlur = false;
+		dom.utils.removeClass(this._cover, 'se-figure-selected');
 		this.controller.close();
-
-		if (domUtils.hasClass(this._w.event?.target, 'se-drag-handle|sun-editor-editable')) return;
 		this.component._removeDragEvent();
-	},
+	}
 
-	open(target, { nonResizing, nonSizeInfo, nonBorder, figureTarget, __fileManagerInfo }) {
-		if (!target) {
-			console.warn('[SUNEDITOR.modules.Figure.open] The target element is null.');
+	/**
+	 * @description Open the figure's controller
+	 * @param {Node} targetNode Target element
+	 * @param {Object} params params
+	 * @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
+	 * @returns {FigureTargetInfo|undefined} figure target info
+	 */
+	open(targetNode, { nonResizing, nonSizeInfo, nonBorder, figureTarget, __fileManagerInfo }) {
+		if (!targetNode) {
+			console.warn('[SUNEDITOR.modules.Figure.open] The "targetNode" is null.');
 			return;
 		}
 
 		if (_DragHandle.get('__overInfo') !== ON_OVER_COMPONENT) {
-			this.editor._offCurrentController();
+			this.ui._offCurrentController();
 		} else {
 			nonBorder = true;
 		}
 
-		const figureInfo = Figure.GetContainer(target);
-		if (!figureInfo.container) return { container: null, cover: null };
+		const figureInfo = Figure.GetContainer(targetNode);
+		const target = figureInfo.target;
+		let exceptionFormat = false;
+		if (!figureInfo.container) {
+			if (!this.options.get('strictMode').formatFilter) {
+				figureInfo.container = target;
+				figureInfo.cover = target;
+				exceptionFormat = true;
+			} else {
+				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 : '') || ''
+				};
+			}
+		}
 
 		_DragHandle.set('__figureInst', this);
 
-		this._cover = figureInfo.cover;
-		this._container = figureInfo.container;
-		this._caption = figureInfo.caption;
-		this._element = target;
-		this.align = (this._container.className.match(/(?:^|\s)__se__float-(none|left|center|right)(?:$|\s)/) || [])[1] || target.style.float || 'none';
-		this.isVertical = /^(90|270)$/.test(Math.abs(GetRotateValue(target).r).toString());
+		this._setFigureInfo(figureInfo);
 
-		const sizeTarget = figureTarget ? this._cover || this._container || target : target;
-		const { w, h, t, l, scrollX, scrollY } = this.offset.getSize(sizeTarget);
+		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 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);
@@ -247,14 +339,14 @@ Figure.prototype = {
 			caption: figureInfo.caption,
 			align: this.align,
 			ratio: ratio,
-			w: w,
-			h: h,
-			t: t,
-			l: l,
+			w: w || '',
+			h: h || '',
+			t: top,
+			l: left,
 			width: dataSize[0] || 'auto',
 			height: dataSize[1] || 'auto',
-			originWidth: target.naturalWidth || target.offsetWidth,
-			originHeight: target.naturalHeight || target.offsetHeight
+			originWidth: /** @type {HTMLImageElement} */ (target).naturalWidth || target.offsetWidth,
+			originHeight: /** @type {HTMLImageElement} */ (target).naturalHeight || target.offsetHeight
 		};
 
 		this._width = targetInfo.width;
@@ -263,8 +355,8 @@ Figure.prototype = {
 
 		const _figure = this.editor.frameContext.get('_figure');
 		this.editor._figureContainer = _figure.main;
-		_figure.main.style.top = t + 'px';
-		_figure.main.style.left = l + 'px';
+		_figure.main.style.top = top + 'px';
+		_figure.main.style.left = left + 'px';
 		_figure.main.style.width = (this.isVertical ? h : w) + 'px';
 		_figure.main.style.height = (this.isVertical ? w : h) + 'px';
 		_figure.border.style.top = '0px';
@@ -272,7 +364,7 @@ Figure.prototype = {
 		_figure.border.style.width = (this.isVertical ? h : w) + 'px';
 		_figure.border.style.height = (this.isVertical ? w : h) + 'px';
 
-		this.__offset = { left: l + scrollX, top: t + scrollY };
+		this.__offset = { left: left + scrollX, top: top + scrollY };
 		this.editor.opendControllers.push({
 			position: 'none',
 			form: _figure.main,
@@ -285,71 +377,106 @@ Figure.prototype = {
 		const value = /%$/.test(target.style.width) && /%$/.test(figureInfo.container.style.width) ? numbers.get(figureInfo.container.style.width, 0) / 100 + '' : '';
 		for (let i = 0, len = this.percentageButtons.length; i < len; i++) {
 			if (this.percentageButtons[i].getAttribute('data-value') === value) {
-				domUtils.addClass(this.percentageButtons[i], 'active');
+				dom.utils.addClass(this.percentageButtons[i], 'active');
 			} else {
-				domUtils.removeClass(this.percentageButtons[i], 'active');
+				dom.utils.removeClass(this.percentageButtons[i], 'active');
 			}
 		}
 
 		// caption active
 		if (this.captionButton) {
 			if (figureInfo.caption) {
-				domUtils.addClass(this.captionButton, 'active');
+				dom.utils.addClass(this.captionButton, 'active');
 			} else {
-				domUtils.removeClass(this.captionButton, 'active');
+				dom.utils.removeClass(this.captionButton, 'active');
 			}
 		}
 
-		_figure.display.style.display = nonSizeInfo ? 'none' : '';
+		_figure.display.style.display = nonSizeInfo || this._inlineCover ? 'none' : '';
 		_figure.border.style.display = nonBorder ? 'none' : '';
 		_figure.main.style.display = 'block';
 
 		if (_DragHandle.get('__overInfo') !== ON_OVER_COMPONENT) {
 			// align button
 			this._setAlignIcon();
-			this.editor._visibleControllers(true, true);
+			// as button
+			this._setAsIcon();
+			this.ui._visibleControllers(true, true);
 			// size
 			const size = this.getSize(target);
-			domUtils.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.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' : '';
+			}
 			// selecte
-			domUtils.removeClass(this._cover, 'se-figure-over-selected');
+			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);
 		} else {
-			domUtils.addClass(this._cover, 'se-figure-over-selected');
+			dom.utils.addClass(this._cover, 'se-figure-over-selected');
 		}
 
 		// set members
-		domUtils.addClass(this._cover, 'se-figure-selected');
+		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 = l;
-		this._element_t = t;
+		this._element_l = left;
+		this._element_t = top;
 
 		// drag
-		if (_DragHandle.get('__overInfo') !== ON_OVER_COMPONENT || domUtils.hasClass(figureInfo.container, 'se-input-component')) {
+		if (!this._inlineCover && (_DragHandle.get('__overInfo') !== ON_OVER_COMPONENT || dom.utils.hasClass(figureInfo.container, 'se-input-component'))) {
 			this._setDragEvent(_figure.main);
 		}
 
 		return targetInfo;
-	},
+	}
 
+	/**
+	 * @description Hide the controller
+	 */
 	controllerHide() {
 		this.controller.hide();
-	},
+	}
 
+	/**
+	 * @description Hide the controller
+	 */
 	controllerShow() {
 		this.controller.show();
-	},
+	}
 
-	controllerOpen(target, args) {
-		this._element = target;
-		this.controller.open(target, null, args);
-	},
+	/**
+	 * @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
+	 */
+	controllerOpen(target, params) {
+		this._element = /** @type {HTMLElement}  */ (target);
+		this.controller.open(target, null, params);
+	}
 
+	/**
+	 * @description Set the element's container size
+	 * @param {string|number} w Width size
+	 * @param {string|number} h Height size
+	 */
 	setSize(w, h) {
-		if (/%$/.test(w)) {
+		if (/%$/.test(w + '')) {
 			this._setPercentSize(w, h);
 		} else if ((!w || w === 'auto') && (!h || h === 'auto')) {
 			if (this.autoRatio) this._setPercentSize(100, this.autoRatio.default || this.autoRatio.current);
@@ -357,19 +484,27 @@ Figure.prototype = {
 		} else {
 			this._applySize(w, h, '');
 		}
-	},
+	}
 
 	/**
 	 * @description Gets the Figure size
-	 * @param {Element|null} target
+	 * @param {?Node=} targetNode Target element, default is the current element
 	 * @returns {{w: string, h: string}}
 	 */
-	getSize(target) {
-		if (!target) target = this._element;
-		if (!target) return { w: '', h: '' };
+	getSize(targetNode) {
+		if (!targetNode) targetNode = this._element;
+		if (!targetNode) return { w: '', h: '' };
 
-		const figure = Figure.GetContainer(target);
+		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'
+				};
+			}
 			return {
 				w: '',
 				h: target.style.height
@@ -377,42 +512,45 @@ Figure.prototype = {
 		}
 
 		const w = !/%$/.test(target.style.width) ? target.style.width : ((figure.container && numbers.get(figure.container.style.width, 2)) || 100) + '%';
-		const h =
-			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) + '%';
+		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) + '%';
 		return {
 			w: w || 'auto',
 			h: h || 'auto'
 		};
-	},
+	}
 
 	/**
 	 * @description Align the container.
-	 * @param {Element|null} target Target element
-	 * @param {"none"|"left"|"center"|"right"} align
+	 * @param {?Node} targetNode Target element
+	 * @param {string} align "none"|"left"|"center"|"right"
 	 */
-	setAlign(target, align) {
-		if (!target) target = this._element;
+	setAlign(targetNode, align) {
+		if (!targetNode) targetNode = this._element;
 		this.align = align = align || 'none';
 
-		const figure = Figure.GetContainer(target);
-		const container = figure.container;
+		const figure = Figure.GetContainer(targetNode);
+		if (!figure.cover) return;
 
+		const target = figure.target;
+		const container = figure.container;
 		const cover = figure.cover;
 		if (/%$/.test(target.style.width) && align === 'center' && !this.component.isInline(container)) {
 			container.style.minWidth = '100%';
 			cover.style.width = container.style.width;
 		} else {
 			container.style.minWidth = '';
-			cover.style.width = this.isVertical ? target.style.height || target.offsetHeight : !target.style.width || target.style.width === 'auto' ? '' : target.style.width || '100%';
+			cover.style.width = this.isVertical ? target.style.height || target.offsetHeight + 'px' : !target.style.width || target.style.width === 'auto' ? '' : target.style.width || '100%';
 		}
 
-		if (!domUtils.hasClass(container, '__se__float-' + align)) {
-			domUtils.removeClass(container, this._floatClassStr);
-			domUtils.addClass(container, '__se__float-' + align);
+		if (!dom.utils.hasClass(container, '__se__float-' + align)) {
+			dom.utils.removeClass(container, this._floatClassStr);
+			dom.utils.addClass(container, '__se__float-' + align);
 		}
 
 		if (this.autoRatio) {
@@ -421,22 +559,116 @@ Figure.prototype = {
 		}
 
 		this._setAlignIcon();
-	},
+	}
+
+	/**
+	 * @description As style[block, inline] the component
+	 * @param {?Node} targetNode Target element
+	 * @param {"block"|"inline"} formatStyle Format style
+	 */
+	convertAsFormat(targetNode, formatStyle) {
+		if (!targetNode) 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));
+
+		switch (formatStyle) {
+			case 'inline': {
+				if (inlineCover) break;
+				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('|')
+				);
+
+				this._asFormatChange(figure, w, h);
+
+				const line = dom.utils.createElement(this.options.get('defaultLine'), null, figure.container);
+				parent.insertBefore(line, next);
+				dom.utils.removeItem(container);
+
+				break;
+			}
+			case 'block': {
+				if (!inlineCover) break;
+				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);
+
+				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('|')
+				);
+
+				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, false);
+
+		this._setFigureInfo(figureinfo);
+
+		if (figureinfo.inlineCover) {
+			this.setAlign(figureinfo.target, 'none');
+			this.deleteTransform();
+		}
+
+		this.setSize(w, h);
+	}
 
 	/**
-	 * @override controller
-	 * @param {Element} target Target button element
+	 * @description Controller button action
+	 * @param {HTMLButtonElement} target Target button element
 	 * @returns
 	 */
 	controllerAction(target) {
 		const command = target.getAttribute('data-command');
 		const value = target.getAttribute('data-value');
+		const type = target.getAttribute('data-type');
 		const element = this._element;
-		if (/^(onalign|onresize)$/.test(command)) return;
+		if (/^on.+/.test(command) || type === 'selectMenu') return;
 
 		switch (command) {
 			case 'mirror': {
-				const info = GetRotateValue(element);
+				const info = this.#GetRotateValue(element);
 				let x = info.x;
 				let y = info.y;
 
@@ -455,7 +687,7 @@ Figure.prototype = {
 			case 'caption':
 				if (!this._caption) {
 					const caption = Figure.CreateCaption(this._cover, this.lang.caption);
-					const captionText = domUtils.getEdgeChild(caption, (current) => current.nodeType === 3);
+					const captionText = dom.query.getEdgeChild(caption, (current) => current.nodeType === 3, false);
 
 					if (!captionText) {
 						caption.focus();
@@ -465,7 +697,7 @@ Figure.prototype = {
 
 					this.controller.close();
 				} else {
-					domUtils.removeItem(this._caption);
+					dom.utils.removeItem(this._caption);
 					this._w.setTimeout(this.component.select.bind(this.component, element, this.kind), 0);
 				}
 
@@ -501,15 +733,57 @@ Figure.prototype = {
 		if (!/^remove|caption$/.test(command)) {
 			this.component.select(element, this.kind, false);
 		}
-	},
+	}
+
+	/**
+	 * @description Inspect the figure component format and change it to the correct format.
+	 * @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.
+	 */
+	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;
+
+		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)) {
+			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)) {
+			const refer = dom.query.getParentElement(originEl, (current) => current.parentNode === existElement);
+			existElement = this.nodeTransform.split(existElement, refer);
+			existElement.parentNode.insertBefore(container, existElement);
+			dom.utils.removeItem(originEl);
+			this.nodeTransform.removeEmptyNode(existElement, null, true);
+		} else {
+			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);
+				else if (dom.check.isZeroWidth(existElement)) dom.utils.removeItem(existElement);
+			} else {
+				existElement = dom.check.isFigure(existElement.parentNode) ? dom.query.getParentElement(existElement.parentNode, Figure.is) : existElement;
+				existElement.parentNode.replaceChild(container, existElement);
+			}
+		}
+	}
 
 	/**
 	 * @description Initialize the transform style (rotation) of the element.
-	 * @param {Element|null} element Target element
+	 * @param {?Node=} node Target element, default is the current element
 	 */
-	deleteTransform(element) {
-		if (!element) element = this._element;
+	deleteTransform(node) {
+		if (!node) node = this._element;
 
+		const element = /** @type {HTMLElement} */ (node);
 		const size = (element.getAttribute('data-se-size') || '').split(',');
 		this.isVertical = false;
 
@@ -519,18 +793,18 @@ Figure.prototype = {
 
 		this._deleteCaptionPosition(element);
 		this._applySize(size[0] || 'auto', size[1] || '', '');
-	},
+	}
 
 	/**
 	 * @description Set the transform style (rotation) of the element.
-	 * @param {Element} element Target element
-	 * @param {Number|null} width Element's width size
-	 * @param {Number|null} height Element's height size
+	 * @param {Node} node Target element
+	 * @param {?string|number} width Element's width size
+	 * @param {?string|number} height Element's height size
 	 */
-	setTransform(element, width, height, deg) {
+	setTransform(node, width, height, deg) {
 		try {
 			this.__preventSizechange = true;
-			const info = GetRotateValue(element);
+			const info = this.#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()));
@@ -538,6 +812,7 @@ Figure.prototype = {
 			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(',');
 			let transOrigin = '';
 			if (/auto|%$/.test(dataSize[0]) && !isVertical) {
@@ -548,6 +823,7 @@ Figure.prototype = {
 				}
 			} else {
 				const figureInfo = Figure.GetContainer(element);
+				const cover = figureInfo.cover || figureInfo.inlineCover;
 				const offsetW = width || element.offsetWidth;
 				const offsetH = height || element.offsetHeight;
 				const w = (isVertical ? offsetH : offsetW) + 'px';
@@ -556,8 +832,8 @@ Figure.prototype = {
 				this._deletePercentSize();
 				this._applySize(offsetW + 'px', offsetH + 'px', '');
 
-				figureInfo.cover.style.width = w;
-				figureInfo.cover.style.height = figureInfo.caption ? '' : h;
+				cover.style.width = w;
+				cover.style.height = figureInfo.caption || figureInfo.inlineCover ? '' : h;
 
 				if (isVertical) {
 					const transW = offsetW / 2 + 'px ' + offsetW / 2 + 'px 0';
@@ -576,13 +852,37 @@ Figure.prototype = {
 		} finally {
 			this.__preventSizechange = false;
 		}
-	},
+	}
 
+	/**
+	 * @private
+	 * @description Sets figure component properties such as cover, container, caption, and alignment.
+	 * @param {FigureInfo} figureInfo - {target, container, cover, inlineCover, caption}
+	 */
+	_setFigureInfo(figureInfo) {
+		this._inlineCover = figureInfo.inlineCover;
+		this._cover = figureInfo.cover || this._inlineCover;
+		this._container = figureInfo.container;
+		this._caption = figureInfo.caption;
+		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());
+	}
+
+	/**
+	 * @private
+	 * @description Applies rotation transformation to the target element.
+	 * @param {HTMLElement} element Target element.
+	 * @param {number} r Rotation degree.
+	 * @param {number} x X-axis rotation value.
+	 * @param {number} y Y-axis rotation value.
+	 */
 	_setRotate(element, r, x, y) {
-		let width = (element.offsetWidth - element.offsetHeight) * (/^-/.test(r) ? 1 : -1);
+		let width = (element.offsetWidth - element.offsetHeight) * (/^-/.test(r + '') ? 1 : -1);
 		let translate = '';
 
-		if (/[1-9]/.test(r) && (x || y)) {
+		if (/[1-9]/.test(r + '') && (x || y)) {
 			translate = x ? 'Y' : 'X';
 
 			switch (r + '') {
@@ -610,13 +910,20 @@ Figure.prototype = {
 		}
 
 		element.style.transform = 'rotate(' + r + 'deg)' + (x ? ' rotateX(' + x + 'deg)' : '') + (y ? ' rotateY(' + y + 'deg)' : '') + (translate ? ' translate' + translate + '(' + width + 'px)' : '');
-	},
+	}
 
+	/**
+	 * @private
+	 * @description Applies size adjustments to the figure element.
+	 * @param {string|number} w Width value.
+	 * @param {string|number} h Height value.
+	 * @param {string} direction Resize direction.
+	 */
 	_applySize(w, h, direction) {
 		const onlyW = /^(rw|lw)$/.test(direction) && /\d+/.test(this._element.style.height);
 		const onlyH = /^(th|bh)$/.test(direction) && /\d+/.test(this._element.style.width);
-		h = h || (this.autoRatio ? this.autoRatio.current || this.autoRatio.default : h);
-		w = numbers.is(w) ? w + this.sizeUnit : w;
+		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();
 
@@ -639,17 +946,29 @@ Figure.prototype = {
 
 		// save current size
 		this._saveCurrentSize();
-	},
+	}
 
+	/**
+	 * @private
+	 * @description Sets padding-bottom for cover elements based on width and height.
+	 * @param {string} w Width value.
+	 * @param {string} h Height value.
+	 */
 	__setCoverPaddingBottom(w, h) {
+		if (this._inlineCover === this._cover) return;
+
 		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) + '%';
 		} else {
 			this._cover.style.paddingBottom = h;
 		}
-	},
+	}
 
+	/**
+	 * @private
+	 * @description Sets the figure element to its auto size.
+	 */
 	_setAutoSize() {
 		if (this._caption) this._caption.style.marginTop = '';
 		this.deleteTransform();
@@ -669,53 +988,93 @@ Figure.prototype = {
 
 		// save current size
 		this._saveCurrentSize();
-	},
+	}
 
+	/**
+	 * @private
+	 * @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 = h && !/%$/.test(h) && !numbers.get(h, 0) ? (numbers.is(h) ? h + '%' : h) : numbers.is(h) ? h + this.sizeUnit : h || (this.autoRatio ? this.autoRatio.default : '');
+		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);
-		this._container.style.width = numbers.is(w) ? w + '%' : w;
+		const heightPercentage = /%$/.test(h + '');
+		this._container.style.width = String(numbers.is(w) ? w + '%' : w);
 		this._container.style.height = '';
-		this._cover.style.width = '100%';
-		this._cover.style.height = h;
+
+		// exceptionFormat
+		if (this._element === this._cover && !this.options.get('strictMode').formatFilter) {
+			this._saveCurrentSize();
+			return;
+		}
+
+		if (this._inlineCover !== 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 = this.autoRatio ? '100%' : heightPercentage ? '' : h;
+		this._element.style.height = String(this.autoRatio ? '100%' : heightPercentage ? '' : h);
 
 		if (this.align === 'center') this.setAlign(this._element, this.align);
 		if (this.autoRatio) {
-			this.__setCoverPaddingBottom(w, h);
+			this.__setCoverPaddingBottom(String(w), String(h));
 		}
 
 		this._setCaptionPosition(this._element);
 
 		// save current size
 		this._saveCurrentSize();
-	},
+	}
 
+	/**
+	 * @private
+	 * @description Deletes percentage-based sizing from the figure element.
+	 */
 	_deletePercentSize() {
 		this._cover.style.width = '';
 		this._cover.style.height = '';
 		this._container.style.width = '';
 		this._container.style.height = '';
 
-		domUtils.removeClass(this._container, this._floatClassStr);
-		domUtils.addClass(this._container, '__se__float-' + this.align);
+		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
+	 * @description Reverts the figure element to its previously saved size.
+	 */
 	_setRevert() {
 		this.setSize(this.__revertSize.w, this.__revertSize.h);
-	},
+	}
 
+	/**
+	 * @private
+	 * @description Updates the figure's alignment icon.
+	 */
 	_setAlignIcon() {
 		if (!this.alignButton) return;
-		domUtils.changeElement(this.alignButton.firstElementChild, this._alignIcons[this.align]);
-	},
+		dom.utils.changeElement(this.alignButton.firstElementChild, this._alignIcons[this.align]);
+	}
 
+	/**
+	 * @private
+	 * @description Updates the figure's block/inline format icon.
+	 */
+	_setAsIcon() {
+		if (!this.asButton) return;
+		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;
 
@@ -731,40 +1090,59 @@ Figure.prototype = {
 		if (this.autoRatio) {
 			this.autoRatio.current = /%$/.test(size.h) ? size.h : '';
 		}
-	},
+	}
 
+	/**
+	 * @private
+	 * @description Adjusts the position of the caption within the figure.
+	 * @param {HTMLElement} element Target element.
+	 */
 	_setCaptionPosition(element) {
-		const figcaption = domUtils.getEdgeChild(domUtils.getParentElement(element, 'FIGURE'), 'FIGCAPTION');
+		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';
 		}
-	},
+	}
 
+	/**
+	 * @private
+	 * @description Removes the margin top property from the figure caption.
+	 * @param {HTMLElement} element Target element.
+	 */
 	_deleteCaptionPosition(element) {
-		const figcaption = domUtils.getEdgeChild(domUtils.getParentElement(element, 'FIGURE'), 'FIGCAPTION');
+		const figcaption = /** @type {HTMLElement} */ (dom.query.getEdgeChild(dom.query.getParentElement(element, 'FIGURE'), 'FIGCAPTION', false));
 		if (figcaption) {
 			figcaption.style.marginTop = '';
 		}
-	},
+	}
 
+	/**
+	 * @private
+	 * @description Displays or hides the resize handles of the figure component.
+	 * @param {boolean} display Whether to display resize handles.
+	 */
 	_displayResizeHandles(display) {
-		display = !display ? 'none' : 'flex';
-		this.controller.form.style.display = 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 = display;
+			resizeHandles[i].style.display = type;
 		}
 
-		if (display === 'none') {
-			domUtils.addClass(_figure.main, 'se-resize-ing');
+		if (type === 'none') {
+			dom.utils.addClass(_figure.main, 'se-resize-ing');
 			this.__onResizeESCEvent = this.eventManager.addGlobalEvent('keydown', this.__containerResizingESC);
 		} else {
-			domUtils.removeClass(_figure.main, 'se-resize-ing');
+			dom.utils.removeClass(_figure.main, 'se-resize-ing');
 		}
-	},
+	}
 
+	/**
+	 * @private
+	 * @description Removes the resize event listeners.
+	 */
 	_offResizeEvent() {
 		this.component._removeDragEvent();
 		this.eventManager.removeGlobalEvent(this.__onContainerEvent);
@@ -772,13 +1150,18 @@ Figure.prototype = {
 		this.eventManager.removeGlobalEvent(this.__onResizeESCEvent);
 
 		this._displayResizeHandles(true);
-		this.editor._offCurrentController();
-		this.editor.disableBackWrapper();
-	},
+		this.ui._offCurrentController();
+		this.ui.disableBackWrapper();
+	}
 
+	/**
+	 * @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');
-		domUtils.removeClass(dragHandle, 'se-drag-handle-full');
+		dom.utils.removeClass(dragHandle, 'se-drag-handle-full');
 
 		dragHandle.style.opacity = '';
 		dragHandle.style.width = '';
@@ -787,195 +1170,240 @@ Figure.prototype = {
 		_DragHandle.set('__dragHandler', dragHandle);
 		_DragHandle.set('__dragContainer', this._container);
 		_DragHandle.set('__dragCover', this._cover);
-		_DragHandle.set('__dragMove', OnScrollDragHandler.bind(this, dragHandle, figureMain));
+		_DragHandle.set('__dragMove', this.#OnScrollDragHandler.bind(this, dragHandle, figureMain));
 
 		_DragHandle.get('__dragMove')();
 
 		dragHandle.style.display = 'block';
-	},
+	}
 
-	_retainFigureFormat(container, originEl, anchorCover) {
-		let existElement = this.format.isBlock(originEl.parentNode) || domUtils.isWysiwygFrame(originEl.parentNode) ? originEl : domUtils.isAnchor(originEl.parentNode) ? originEl.parentNode : this.format.getLine(originEl) || originEl;
+	/**
+	 * @param {HTMLElement} dragHandle Drag handle element
+	 * @param {HTMLElement} figureMain Figure container element
+	 */
+	#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';
+	}
 
-		if (domUtils.getParentElement(originEl, domUtils.isExcludeFormat)) {
-			existElement = anchorCover && anchorCover !== originEl ? anchorCover : originEl;
-			existElement.parentNode.replaceChild(container, existElement);
-		} else if (domUtils.isListCell(existElement)) {
-			const refer = domUtils.getParentElement(originEl, (current) => current.parentNode === existElement);
-			existElement.insertBefore(container, refer);
-			domUtils.removeItem(originEl);
-			this.nodeTransform.removeEmptyNode(refer, null, true);
-		} else if (this.format.isLine(existElement)) {
-			const refer = domUtils.getParentElement(originEl, (current) => current.parentNode === existElement);
-			existElement = this.nodeTransform.split(existElement, refer);
-			existElement.parentNode.insertBefore(container, existElement);
-			domUtils.removeItem(originEl);
-			this.nodeTransform.removeEmptyNode(existElement, null, true);
-		} else {
-			if (this.format.isLineOnly(existElement.parentNode)) {
-				const formats = existElement.parentNode;
-				formats.parentNode.insertBefore(container, existElement.previousSibling ? formats.nextElementSibling : formats);
-				if (this.fileManager.__updateTags.map((current) => existElement.contains(current)).length === 0) domUtils.removeItem(existElement);
-			} else {
-				existElement = domUtils.isFigure(existElement.parentNode) ? domUtils.getParentElement(existElement.parentNode, Figure.__is) : existElement;
-				existElement.parentNode.replaceChild(container, existElement);
+	/**
+	 * @param {MouseEvent} e Event object
+	 */
+	#OnResizeContainer(e) {
+		e.stopPropagation();
+		e.preventDefault();
+
+		const eventTarget = dom.query.getEventTarget(e);
+		const inst = _DragHandle.get('__figureInst');
+		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]);
+
+		const { w, h } = this.getSize(inst._element);
+		__resizing_p_wh = __resizing_p_ow = false;
+		__resizing_cw = __resizing_sw = 0;
+		if (!this.isVertical) {
+			const pw = !w || /auto|%$/.test(w);
+			const ph = !h || /auto|%$/.test(h);
+			if (DIR_DIAGONAL.includes(direction) && pw && ph) {
+				__resizing_p_wh = true;
+			} else if (DIR_W.includes(direction) && pw) {
+				__resizing_p_ow = true;
+			}
+
+			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;
 			}
 		}
-	},
 
-	constructor: Figure
-};
+		inst.__onContainerEvent = inst.eventManager.addGlobalEvent('mousemove', inst.__containerResizing);
+		inst.__offContainerEvent = inst.eventManager.addGlobalEvent('mouseup', inst.__containerResizingOff);
+		inst._displayResizeHandles(false);
 
-function 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';
-}
+		const _display = this.editor.frameContext.get('_figure').display;
+		_display.style.display = 'block';
+		dom.utils.changeTxt(_display, w + ' x ' + h);
+	}
 
-function GetRotateValue(element) {
-	const transform = element.style.transform;
-	if (!transform) return { r: 0, x: '', y: '' };
-	return {
-		r: ((transform.match(/rotate\(([-0-9]+)deg\)/) || [])[1] || 0) * 1,
-		x: (transform.match(/rotateX\(([-0-9]+)deg\)/) || [])[1] || '',
-		y: (transform.match(/rotateY\(([-0-9]+)deg\)/) || [])[1] || ''
-	};
-}
+	/**
+	 * @description Handles the resizing of the figure container.
+	 * @param {MouseEvent} e Mouse event.
+	 */
+	#ContainerResizing(e) {
+		const direction = this._resize_direction;
+		const clientX = e.clientX;
+		const clientY = e.clientY;
+
+		let resultW = this._element_w;
+		let resultH = 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;
 
-function OnResizeContainer(e) {
-	e.stopPropagation();
-	e.preventDefault();
-
-	const inst = _DragHandle.get('__figureInst');
-	const direction = (inst._resize_direction = e.target.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.editor.enableBackWrapper(DIRECTION_CURSOR_MAP[direction]);
-
-	const { w, h } = this.getSize(inst._element);
-	__resizing_p_wh = __resizing_p_ow = false;
-	__resizing_cw = __resizing_sw = 0;
-	if (!this.isVertical) {
-		const pw = !w || /auto|%$/.test(w);
-		const ph = !h || /auto|%$/.test(h);
-		if (DIR_DIAGONAL.includes(direction) && pw && ph) {
-			__resizing_p_wh = true;
-		} else if (DIR_W.includes(direction) && pw) {
-			__resizing_p_ow = true;
+		if (/t/.test(direction)) resizeBorder.style.top = resultH - (/h/.test(direction) ? h : wh) + 'px';
+		if (/l/.test(direction)) resizeBorder.style.left = resultW - w + 'px';
+
+		if (/r|l/.test(direction)) {
+			resizeBorder.style.width = w + 'px';
+			resultW = w;
 		}
 
-		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;
+		if (/^(t|b)[^h]$/.test(direction)) {
+			resizeBorder.style.height = wh + 'px';
+			resultH = wh;
+		} else if (/^(t|b)h$/.test(direction)) {
+			resizeBorder.style.height = h + 'px';
+			resultH = h;
 		}
-	}
 
-	inst.__onContainerEvent = inst.eventManager.addGlobalEvent('mousemove', inst.__containerResizing);
-	inst.__offContainerEvent = inst.eventManager.addGlobalEvent('mouseup', inst.__containerResizingOff);
-	inst._displayResizeHandles(false);
-}
+		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);
+	}
 
-function ContainerResizing(e) {
-	const direction = this._resize_direction;
-	const clientX = e.clientX;
-	const clientY = e.clientY;
+	/**
+	 * @description Finalizes the resizing process of the figure container.
+	 */
+	#ContainerResizingOff() {
+		this._offResizeEvent();
+
+		// set size
+		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')) -
+				2;
+			if (numbers.get(w, 0) > limit) {
+				h = Math.round((h / w) * limit);
+				w = limit;
+			}
+		}
 
-	let resultW = this._element_w;
-	let resultH = this._element_h;
+		if (__resizing_p_wh || __resizing_p_ow) {
+			const sizeTarget = this._cover || this._element;
+			w = (w / sizeTarget.offsetWidth) * __resizing_cw * 100;
+			const wp = numbers.get(w > 100 ? 100 : w, 2) + '%';
+			this._setPercentSize(wp, __resizing_p_ow ? this.getSize(this._element).h : '');
+		} else {
+			this._applySize(w, h, this._resize_direction);
+			if (this.isVertical) this.setTransform(this._element, w, h, 0);
+		}
 
-	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;
+		this.history.push(false);
+		this.component.select(this._element, this.kind, false);
+	}
 
-	if (/t/.test(direction)) resizeBorder.style.top = resultH - (/h/.test(direction) ? h : wh) + 'px';
-	if (/l/.test(direction)) resizeBorder.style.left = resultW - w + 'px';
+	/**
+	 * @description Cancels the resizing process when the escape key is pressed.
+	 * @param {KeyboardEvent} e Keyboard event.
+	 */
+	#ContainerResizingESC(e) {
+		if (!keyCodeMap.isEsc(e.code)) return;
+		this._offResizeEvent();
+		this.component.select(this._element, this.kind, false);
+	}
 
-	if (/r|l/.test(direction)) {
-		resizeBorder.style.width = w + 'px';
-		resultW = w;
+	/**
+	 * @param { "none"|"left"|"center"|"right"} value align value
+	 */
+	#SetMenuAlign(value) {
+		this.setAlign(this._element, value);
+		this.selectMenu_align.close();
+		this.component.select(this._element, this.kind, false);
 	}
 
-	if (/^(t|b)[^h]$/.test(direction)) {
-		resizeBorder.style.height = wh + 'px';
-		resultH = wh;
-	} else if (/^(t|b)h$/.test(direction)) {
-		resizeBorder.style.height = h + 'px';
-		resultH = h;
+	/**
+	 * @param {"block"|"inline"} value Format style
+	 */
+	#SetMenuAs(value) {
+		this.convertAsFormat(this._element, value);
+		this.selectMenu_as.close();
 	}
 
-	this._resize_w = /h$/.test(direction) ? this._width : Math.round(resultW);
-	this._resize_h = /w$/.test(direction) ? this._height : Math.round(resultH);
-	const rw = __resizing_cw ? (this._resize_w / __resizing_sw) * __resizing_cw * 100 : this._resize_w;
-	domUtils.changeTxt(this.editor.frameContext.get('_figure').display, __resizing_cw ? numbers.get(rw > 100 ? 100 : rw, 2).toFixed(2) + '%' : rw + ' x ' + this._resize_h);
-}
+	/**
+	 * @param {"auto"|number} value Resize value
+	 */
+	#SetResize(value) {
+		if (value === 'auto') {
+			this.deleteTransform();
+			this._setAutoSize();
+		} else {
+			let dataY = this.getSize(this._element).h;
+			if (this.isVertical) {
+				const dataSize = (this._element.getAttribute('data-se-size') || ',').split(',');
+				if (dataSize[1]) dataY = dataSize[1];
+			}
 
-function ContainerResizingOff() {
-	this._offResizeEvent();
-
-	// set size
-	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')) -
-			2;
-		if (numbers.get(w, 0) > limit) {
-			h = Math.round((h / w) * limit);
-			w = limit;
+			this.deleteTransform();
+			this._setPercentSize(value * 1, numbers.get(dataY, 0) === null || !/%$/.test(dataY) ? '' : dataY);
 		}
-	}
 
-	if (__resizing_p_wh || __resizing_p_ow) {
-		const sizeTarget = this._cover || this._element;
-		w = (w / sizeTarget.offsetWidth) * __resizing_cw * 100;
-		w = numbers.get(w > 100 ? 100 : w, 2) + '%';
-		this._setPercentSize(w, __resizing_p_ow ? this.getSize(this._element).h : '');
-	} else {
-		this._applySize(w, h, this._resize_direction);
-		if (this.isVertical) this.setTransform(this._element, w, h, 0);
+		this.selectMenu_resize.close();
+		this.component.select(this._element, this.kind, false);
 	}
 
-	this.history.push(false);
-	this.component.select(this._element, this.kind, false);
-}
+	#OffFigureContainer() {
+		this.editor.frameContext.get('_figure').main.style.display = 'none';
+		this.editor._figureContainer = null;
+	}
 
-function ContainerResizingESC(e) {
-	if (!/^27$/.test(e.keyCode)) return;
-	this._offResizeEvent();
-	this.component.select(this._element, this.kind, false);
-}
+	#OnClick_alignButton() {
+		this.selectMenu_align.open('', '[data-command="' + this.align + '"]');
+	}
 
-function SetMenuAlign(value) {
-	this.setAlign(this._element, value);
-	this.selectMenu_align.close();
-	this.component.select(this._element, this.kind, false);
-}
+	#OnClick_asButton() {
+		this.selectMenu_as.open('', '[data-command="' + this.as + '"]');
+	}
 
-function SetResize(value) {
-	if (value === 'auto') {
-		this.deleteTransform();
-		this._setAutoSize();
-	} else {
-		let dataY = this.getSize(this._element).h;
-		if (this.isVertical) {
-			const dataSize = (this._element.getAttribute('data-se-size') || ',').split(',');
-			if (dataSize[1]) dataY = dataSize[1];
+	#OnClick_resizeButton() {
+		const size = this.getSize(this._element);
+		const w = size.w;
+		const h = size.h;
+		let command = '';
+		if (this.autoRatio) {
+			if (h === this.autoRatio.default && /%$/.test(w)) {
+				const nw = numbers.get(w);
+				if (nw === 100) command = 'auto';
+				else command = 'resize_percent' + nw;
+			}
+		} else if (h === 'auto') {
+			if (w === 'auto') {
+				command = 'auto';
+			} else if (/%$/.test(w)) {
+				command = 'resize_percent' + numbers.get(w);
+			}
 		}
 
-		this.deleteTransform();
-		this._setPercentSize(value * 1, numbers.get(dataY, 0) === null || !/%$/.test(dataY) ? '' : dataY);
+		this.selectMenu_resize.open('', '[data-command="' + command + '"]');
 	}
 
-	this.selectMenu_resize.close();
-	this.component.select(this._element, this.kind, false);
+	/**
+	 * @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] || ''
+		};
+	}
 }
 
 function CreateAlign(inst, button) {
@@ -988,7 +1416,29 @@ function CreateAlign(inst, button) {
 	const items = [];
 	for (let i = 0; i < commands.length; i++) {
 		html.push(/*html*/ `
-		<button type="button" class="se-btn-list se-tooltip" data-command="${commands[i]}">
+		<button type="button" class="se-btn-list se-tooltip" data-command="${commands[i]}" data-type="selectMenu" >
+			${icons[i]}
+			<span class="se-tooltip-inner">
+				<span class="se-tooltip-text">${langs[i]}</span>
+			</span>
+		</button>`);
+		items.push(commands[i]);
+	}
+
+	return { html: html, items: items };
+}
+
+function CreateAs(inst, button) {
+	if (!button) return null;
+
+	const icons = [inst.icons.as_block, inst.icons.as_inline];
+	const langs = [inst.lang.asBlock, inst.lang.asInline];
+	const commands = ['block', 'inline'];
+	const html = [];
+	const items = [];
+	for (let i = 0; i < commands.length; i++) {
+		html.push(/*html*/ `
+		<button type="button" class="se-btn-list se-tooltip" data-command="${commands[i]}" data-type="selectMenu" >
 			${icons[i]}
 			<span class="se-tooltip-inner">
 				<span class="se-tooltip-text">${langs[i]}</span>
@@ -1016,37 +1466,6 @@ function CreateResize(editor, button) {
 	return { html: html, items: items };
 }
 
-function OffFigureContainer() {
-	this.editor.frameContext.get('_figure').main.style.display = 'none';
-	this.editor._figureContainer = null;
-}
-
-function OnClick_alignButton() {
-	this.selectMenu_align.open('', '[data-command="' + this.align + '"]');
-}
-
-function OnClick_resizeButton() {
-	const size = this.getSize(this._element);
-	const w = size.w;
-	const h = size.h;
-	let command = '';
-	if (this.autoRatio) {
-		if (h === this.autoRatio.default && /%$/.test(w)) {
-			const nw = numbers.get(w);
-			if (nw === 100) command = 'auto';
-			else command = 'resize_percent' + nw;
-		}
-	} else if (h === 'auto') {
-		if (w === 'auto') {
-			command = 'auto';
-		} else if (/%$/.test(w)) {
-			command = 'resize_percent' + numbers.get(w);
-		}
-	}
-
-	this.selectMenu_resize.open('', '[data-command="' + command + '"]');
-}
-
 function CreateHTML_resizeDot() {
 	const html = /*html*/ `
 		<div class="se-resize-dot">
@@ -1061,7 +1480,7 @@ function CreateHTML_resizeDot() {
 			<div class="se-resize-display"></div>
 		</div>`;
 
-	return domUtils.createElement('DIV', { class: 'se-controller se-resizing-container', style: 'display: none;' }, html);
+	return dom.utils.createElement('DIV', { class: 'se-controller se-resizing-container', style: 'display: none;' }, html);
 }
 
 function GET_CONTROLLER_BUTTONS(group) {
@@ -1114,6 +1533,11 @@ function GET_CONTROLLER_BUTTONS(group) {
 			l = 'edit';
 			i = 'edit';
 			break;
+		case 'as':
+			c = 'onas';
+			l = 'blockStyle';
+			i = 'as_block';
+			break;
 		case 'remove':
 			c = 'remove';
 			l = 'remove';
@@ -1159,8 +1583,8 @@ function CreateHTML_controller(inst, controls) {
 				}
 
 				html += /*html*/ `
-					<button type="button" data-command="${m.c}" data-value="${m.v}" class="${m.t ? 'se-btn-w-auto ' : ''}se-btn se-tooltip">
-						${icons[m.i] || m.t || m.i}
+					<button type="button" data-command="${m.c}" data-value="${m.v}" class="se-btn se-tooltip">
+						${icons[m.i] || m.i}
 						<span class="se-tooltip-inner"><span class="se-tooltip-text">${lang[m.l] || m.l}</span></span>
 					</button>`;
 			}
@@ -1168,7 +1592,7 @@ function CreateHTML_controller(inst, controls) {
 		}
 	}
 
-	return domUtils.createElement('DIV', { class: 'se-controller se-controller-resizing' + (!html ? ' se-empty-controller' : '') }, html);
+	return dom.utils.createElement('DIV', { class: 'se-controller se-controller-resizing' + (!html ? ' se-empty-controller' : '') }, html);
 }
 
 export default Figure;