suneditor 3.0.0-beta.21 → 3.0.0-beta.23

package/src/core/class/offset.js

@@ -159,7 +159,7 @@ Offset.prototype = {
 		const topArea = this.frameContext.get('topArea');
 		const wFrame = this.frameContext.get('wysiwygFrame');
 
-		node = node || topArea;
+		node ||= topArea;
 
 		if (!isElement(node)) {
 			return { top: 0, left: 0, fixedTop: 0, fixedLeft: 0, width: 0, height: 0 };
@@ -206,7 +206,7 @@ Offset.prototype = {
 		const topArea = this.frameContext.get('topArea');
 		let isTop = false;
 		let targetAbs = false;
-		if (!node) node = topArea;
+		node ||= topArea;
 		if (node === topArea) isTop = true;
 		if (!isTop && isElement(node)) {
 			targetAbs = _w.getComputedStyle(node).position === 'absolute';
@@ -607,7 +607,7 @@ Offset.prototype = {
 		element.style.display = 'block';
 
 		let positionTop = position === 'top';
-		range = range || this.selection.getRange();
+		range ||= this.selection.getRange();
 		const rectsObj = this.selection.getRects(range, positionTop ? 'start' : 'end');
 		positionTop = rectsObj.position === 'start';
 

package/src/core/class/selection.js

@@ -150,6 +150,8 @@ Selection_.prototype = {
 		const range = this.frameContext.get('_wd').createRange();
 
 		try {
+			so = Math.min(so, sc.textContent?.length || 0);
+			eo = Math.min(eo, ec.textContent?.length || 0);
 			range.setStart(sc, so);
 			range.setEnd(ec, eo);
 			this.status.hasFocus = true;
@@ -640,7 +642,7 @@ Selection_.prototype = {
 
 				let format = this.format.getLine(tempCon, null);
 				if (format === this.format.getBlock(format, null)) {
-					tempCon = tempCon || tempConCache;
+					tempCon ||= tempConCache;
 					format = dom.utils.createElement(dom.query.getParentElement(tempCon, dom.check.isTableCell) ? 'DIV' : this.options.get('defaultLine'));
 					tempCon.parentNode.insertBefore(format, tempCon);
 					if (tempCon !== tempConCache) format.appendChild(tempCon);

package/src/core/class/ui.js

@@ -55,7 +55,7 @@ UI.prototype = {
 	 * @param {__se__FrameContext|null} fc Frame context
 	 */
 	setEditorStyle(style, fc) {
-		fc = fc || this.frameContext;
+		fc ||= this.frameContext;
 
 		const fo = fc.get('options');
 		fo.set('editorStyle', style);
@@ -270,7 +270,7 @@ UI.prototype = {
 		if (type) dom.utils.addClass(this.alertModal, `se-alert-${type}`);
 
 		if (this._closeSignal) this._alertInner.addEventListener('click', this._closeListener[1]);
-		if (this._bindClose) this._bindClose = this.eventManager.removeGlobalEvent(this._bindClose);
+		this._bindClose &&= this.eventManager.removeGlobalEvent(this._bindClose);
 		this._bindClose = this.eventManager.addGlobalEvent('keydown', this._closeListener[0]);
 
 		this._alertArea.style.display = 'block';
@@ -286,7 +286,7 @@ UI.prototype = {
 		dom.utils.removeClass(this.alertModal, 'se-alert-*');
 		this._alertArea.style.display = 'none';
 		if (this._closeSignal) this._alertInner.removeEventListener('click', this._closeListener[1]);
-		if (this._bindClose) this._bindClose = this.eventManager.removeGlobalEvent(this._bindClose);
+		this._bindClose &&= this.eventManager.removeGlobalEvent(this._bindClose);
 	},
 
 	/**

package/src/core/config/options.js

@@ -334,7 +334,13 @@ export const DEFAULTS = {
  * @property {number} [fullScreenOffset=0] - Offset applied when entering fullscreen mode.
  * @property {string} [previewTemplate=null] - Custom template for preview mode.
  * @property {string} [printTemplate=null] - Custom template for print mode.
- * @property {boolean} [componentAutoSelect=false] - Enables automatic selection of inserted components.
+ * @property {__se__ComponentInsertBehaviorType} [componentInsertBehavior="auto"] - Enables automatic selection of inserted components.
+ * - For inline components: places the cursor near the inserted component or selects it if no nearby range is available.
+ * - For block components: executes behavior based on `selectMode`:
+ *    - `auto`: Move cursor to the next line if possible, otherwise select the component.
+ *    - `select`: Always select the inserted component.
+ *    - `line`: Move cursor to the next line if possible, or create a new line and move there.
+ *    - `none`: Do nothing.
  * @property {string} [defaultUrlProtocol=null] - Default URL protocol for links.
  * @property {Object<"copy", number>} [toastMessageTime={copy: 1500}] - {"copy": 1500} - Duration for displaying toast messages.
  * @property {string} [freeCodeViewMode=false] - Enables free code view mode.
@@ -497,7 +503,7 @@ export const OPTION_FIXED_FLAG = {
 	fullScreenOffset: true,
 	previewTemplate: true,
 	printTemplate: true,
-	componentAutoSelect: true,
+	componentInsertBehavior: true,
 	defaultUrlProtocol: true,
 	allUsedStyles: 'fixed',
 	toastMessageTime: true,

package/src/core/editor.js

@@ -1050,7 +1050,7 @@ Editor.prototype = {
 	 */
 	focusEdge(focusEl) {
 		this._preventBlur = false;
-		if (!focusEl) focusEl = this.frameContext.get('wysiwyg').lastElementChild;
+		focusEl ||= this.frameContext.get('wysiwyg').lastElementChild;
 
 		const fileComponentInfo = this.component.get(focusEl);
 		if (fileComponentInfo) {
@@ -1290,7 +1290,7 @@ Editor.prototype = {
 	 * @param {?__se__FrameContext=} fc - Frame context object, If null fc is this.frameContext
 	 */
 	_checkPlaceholder(fc) {
-		fc = /** @type {__se__FrameContext} */ (fc || this.frameContext);
+		fc ||= /** @type {__se__FrameContext} */ (this.frameContext);
 		const placeholder = fc.get('placeholder');
 
 		if (placeholder) {

package/src/core/section/actives.js

@@ -122,7 +122,7 @@ export function SELECT_ALL(editor) {
 
 	let info = null;
 	if (dom.check.isMedia(first) || (info = editor.component.get(first.parentElement)) || dom.check.isTableElements(first)) {
-		if (!info) info = editor.component.get(first);
+		info ||= editor.component.get(first);
 		const br = dom.utils.createElement('BR');
 		const format = dom.utils.createElement(editor.options.get('defaultLine'), null, br);
 		first = info ? info.container || info.cover : first;
@@ -131,7 +131,7 @@ export function SELECT_ALL(editor) {
 	}
 
 	if (dom.check.isMedia(last) || (info = editor.component.get(last.parentElement)) || dom.check.isTableElements(last)) {
-		if (!info) info = editor.component.get(first);
+		info ||= editor.component.get(first);
 		const br = dom.utils.createElement('BR');
 		const format = dom.utils.createElement(editor.options.get('defaultLine'), null, br);
 		last = info ? info.container || info.cover : last;
@@ -259,7 +259,7 @@ export function FONT_STYLE(editor, command) {
  */
 export function PAGE_BREAK(editor) {
 	const pageBreak = dom.utils.createElement('DIV', { class: 'se-component se-component-line-break se-page-break' });
-	editor.component.insert(pageBreak, { skipCharCount: true, skipSelection: true, skipHistory: false });
+	editor.component.insert(pageBreak, { skipCharCount: true, insertBehavior: 'line' });
 	const line = pageBreak.nextElementSibling || editor.format.addLine(pageBreak);
 	editor.selection.setRange(line, 1, line, 1);
 	editor.history.push(false);

package/src/core/section/constructor.js

@@ -258,7 +258,7 @@ export function CreateShortcuts(command, button, values, keyMap, rc, reverseKeys
 		a = values[i].split('+');
 
 		plugin = null;
-		method = a[a.length - 1].trim?.();
+		method = a.at(-1).trim?.();
 		if (method.startsWith('~')) {
 			// plugin key, method
 			plugin = command;
@@ -633,7 +633,7 @@ export function InitOptions(options, editorTargets, plugins) {
 	o.set('printTemplate', typeof options.printTemplate === 'string' ? options.printTemplate : null);
 
 	/** --- Media select */
-	o.set('componentAutoSelect', options.componentAutoSelect === undefined ? false : !!options.componentAutoSelect);
+	o.set('componentInsertBehavior', ['auto', 'select', 'line', 'none'].includes(options.componentInsertBehavior) ? options.componentInsertBehavior : 'auto');
 
 	/** --- Url input protocol */
 	o.set('defaultUrlProtocol', typeof options.defaultUrlProtocol === 'string' ? options.defaultUrlProtocol : null);
@@ -719,7 +719,7 @@ export function CreateStatusbar(targetOptions, statusbar) {
 	let charCounter = null;
 
 	if (targetOptions.get('statusbar')) {
-		statusbar = statusbar || dom.utils.createElement('DIV', { class: 'se-status-bar sun-editor-common' });
+		statusbar ||= dom.utils.createElement('DIV', { class: 'se-status-bar sun-editor-common' });
 
 		/** navigation */
 		navigation = statusbar.querySelector('.se-navigation') || dom.utils.createElement('DIV', { class: 'se-navigation sun-editor-common' });
@@ -1067,7 +1067,7 @@ function _createModuleGroup() {
  * @returns {{li: HTMLElement, button: HTMLElement}}
  */
 function _createButton(className, title, dataCommand, dataType, innerHTML, _disabled, icons) {
-	if (!innerHTML) innerHTML = '';
+	innerHTML ||= '';
 
 	const oLi = dom.utils.createElement('LI');
 	const label = title || '';

package/src/helper/clipboard.js

@@ -44,14 +44,29 @@ export async function write(content) {
 		plainText = content.textContent;
 	}
 
-	/* eslint-disable-next-line compat/compat */
-	await navigator.clipboard.write([
+	try {
 		/* eslint-disable-next-line compat/compat */
-		new ClipboardItem({
-			'text/html': new Blob([htmlString], { type: 'text/html' }),
-			'text/plain': new Blob([plainText], { type: 'text/plain' })
-		})
-	]);
+		await navigator.clipboard.write([
+			/* eslint-disable-next-line compat/compat */
+			new ClipboardItem({
+				'text/html': new Blob([htmlString], { type: 'text/html' }),
+				'text/plain': new Blob([plainText], { type: 'text/plain' })
+			})
+		]);
+	} catch {
+		console.warn('[SUNEDITOR.copy.warn] This browser is not supported Clipboard API');
+		try {
+			await navigator.clipboard.writeText(plainText || stripHtml(htmlString));
+		} catch (err) {
+			console.error('[SUNEDITOR.copy.fail] ' + err);
+		}
+	}
+}
+
+function stripHtml(html) {
+	const div = document.createElement('div');
+	div.innerHTML = html;
+	return div.textContent || div.innerText || '';
 }
 
 export default {

package/src/helper/dom/domQuery.js

@@ -112,11 +112,7 @@ export function getListChildren(element, validation) {
 	const el = /** @type {Element} */ (element);
 	if (!el.children || el.children.length === 0) return children;
 
-	validation =
-		validation ||
-		function () {
-			return true;
-		};
+	validation ||= () => true;
 
 	(function recursionFunc(current) {
 		if (el !== current && validation(current)) {
@@ -144,11 +140,7 @@ export function getListChildNodes(element, validation) {
 	const children = [];
 	if (!element || element.childNodes.length === 0) return children;
 
-	validation =
-		validation ||
-		function () {
-			return true;
-		};
+	validation ||= () => true;
 
 	(function recursionFunc(current) {
 		if (element !== current && validation(current)) {
@@ -275,7 +267,7 @@ export function getParentElement(element, query, depth) {
 		valid = (el) => regExp.test(el[attr]);
 	}
 
-	if (!depth) depth = Infinity;
+	depth ||= Infinity;
 	let index = 0;
 	while (element && !valid(element)) {
 		if (index >= depth || domCheck.isWysiwygFrame(element)) {
@@ -329,7 +321,7 @@ export function getParentElements(element, query, depth) {
 	}
 
 	const elementList = [];
-	if (!depth) depth = Infinity;
+	depth ||= Infinity;
 	let index = 0;
 	while (index <= depth && element && !domCheck.isWysiwygFrame(element)) {
 		if (valid(element)) {
@@ -426,7 +418,7 @@ export function getEdgeChild(node, query, last) {
  */
 export function getEdgeChildNodes(first, last) {
 	if (!first) return;
-	if (!last) last = first;
+	last ||= first;
 
 	while (first && first.nodeType === 1 && first.childNodes.length > 0 && !domCheck.isBreak(first)) first = first.firstChild;
 	while (last && last.nodeType === 1 && last.childNodes.length > 0 && !domCheck.isBreak(last)) last = last.lastChild;
@@ -501,7 +493,7 @@ export function getNextDeepestNode(node, ceiling) {
  */
 export function findTextIndexOnLine(line, offsetContainer, offset, validate) {
 	if (!line) return 0;
-	if (!validate) validate = () => true;
+	validate ||= () => true;
 
 	let index = 0;
 	let found = false;
@@ -584,7 +576,7 @@ export function findVisualLastCell(cells) {
 		const colSpan = cell.colSpan || 1;
 
 		// 현재 행에서 visual column index 찾기
-		if (!occupied[rowIndex]) occupied[rowIndex] = [];
+		occupied[rowIndex] ||= [];
 
 		let colIndex = 0;
 		const rowOcc = occupied[rowIndex];
@@ -596,7 +588,7 @@ export function findVisualLastCell(cells) {
 
 		for (let r = 1; r < rowSpan; r++) {
 			const nextRow = rowIndex + r;
-			if (!occupied[nextRow]) occupied[nextRow] = [];
+			occupied[nextRow] ||= [];
 			for (let i = 0; i < colSpan; i++) {
 				occupied[nextRow][colIndex + i] = true;
 			}

package/src/helper/dom/domUtils.js

@@ -123,11 +123,8 @@ export function getAttributesToString(element, exceptAttrs) {
 export function arrayFilter(array, validation) {
 	if (!array || array.length === 0) return null;
 
-	validation =
-		validation ||
-		function () {
-			return true;
-		};
+	validation ||= () => true;
+
 	const arr = [];
 
 	for (let i = 0, len = array.length, a; i < len; i++) {
@@ -149,11 +146,7 @@ export function arrayFilter(array, validation) {
 export function arrayFind(array, validation) {
 	if (!array || array.length === 0) return null;
 
-	validation =
-		validation ||
-		function () {
-			return true;
-		};
+	validation ||= () => true;
 
 	for (let i = 0, len = array.length, a; i < len; i++) {
 		a = array[i];

package/src/modules/ApiManager.js

@@ -59,13 +59,13 @@ class ApiManager {
 	call({ method, url, headers, data, callBack, errorCallBack, responseType }) {
 		this.cancel();
 
-		method = method || this.method;
+		method ||= this.method;
 		url = this._normalizeUrl(url || this.url);
-		headers = headers || this.headers;
-		data = data || this.data;
-		callBack = callBack || this.callBack;
-		errorCallBack = errorCallBack || this.errorCallBack;
-		responseType = responseType || this.responseType;
+		headers ||= this.headers;
+		data ||= this.data;
+		callBack ||= this.callBack;
+		errorCallBack ||= this.errorCallBack;
+		responseType ||= this.responseType;
 
 		const xhr = this._xhr;
 		if (responseType) xhr.responseType = responseType;
@@ -93,11 +93,11 @@ class ApiManager {
 	asyncCall({ method, url, headers, data, responseType }) {
 		this.cancel();
 
-		method = method || this.method;
+		method ||= this.method;
 		url = this._normalizeUrl(url || this.url);
-		headers = headers || this.headers;
-		data = data || this.data;
-		responseType = responseType || this.responseType;
+		headers ||= this.headers;
+		data ||= this.data;
+		responseType ||= this.responseType;
 
 		const xhr = this._xhr;
 		if (responseType) xhr.responseType = responseType;

package/src/modules/Browser.js

@@ -135,8 +135,7 @@ class Browser extends CoreInjector {
 	 * @param {string=} params.url - File server url. If not, use "this.url".
 	 * @param {Object<string, string>=} params.urlHeader - File server http header. If not, use "this.urlHeader".
 	 */
-	open(params) {
-		if (!params) params = {};
+	open(params = {}) {
 		this.__addGlobalEvent();
 
 		const listClassName = params.listClass || this.listClass;
@@ -297,7 +296,7 @@ class Browser extends CoreInjector {
 	 * @description Removes the global event listener for closing the browser.
 	 */
 	__removeGlobalEvent() {
-		if (this._bindClose) this._bindClose = this.eventManager.removeGlobalEvent(this._bindClose);
+		this._bindClose &&= this.eventManager.removeGlobalEvent(this._bindClose);
 	}
 
 	/**
@@ -354,9 +353,7 @@ class Browser extends CoreInjector {
 			const parts = path.split('/');
 			const len = parts.length - 1;
 			parts.forEach((part, index) => {
-				if (!current[part]) {
-					current[part] = { children: {} };
-				}
+				current[part] ||= { children: {} };
 
 				if (index === len) {
 					current[part].key = path;

package/src/modules/ColorPicker.js

@@ -305,7 +305,7 @@ class ColorPicker extends CoreInjector {
  * @returns
  */
 function CreateHTML({ lang, icons }, { colorList, disableHEXInput, disableRemove, splitNum }) {
-	colorList = colorList || DEFAULT_COLOR_LIST;
+	colorList ||= DEFAULT_COLOR_LIST;
 	splitNum = colorList === DEFAULT_COLOR_LIST ? DEFAULLT_COLOR_SPLITNUM : splitNum;
 
 	let list = '';

package/src/modules/Controller.js

@@ -339,8 +339,8 @@ class Controller extends EditorInjector {
 	 */
 	__removeGlobalEvent() {
 		this.component.__removeGlobalEvent();
-		if (this._bindClose_key) this._bindClose_key = this.eventManager.removeGlobalEvent(this._bindClose_key);
-		if (this._bindClose_mouse) this._bindClose_mouse = this.eventManager.removeGlobalEvent(this._bindClose_mouse);
+		this._bindClose_key &&= this.eventManager.removeGlobalEvent(this._bindClose_key);
+		this._bindClose_mouse &&= this.eventManager.removeGlobalEvent(this._bindClose_mouse);
 	}
 
 	/**

package/src/modules/Figure.js

@@ -147,7 +147,6 @@ class Figure extends EditorInjector {
 		this.__onContainerEvent = null;
 		this.__offContainerEvent = null;
 		this.__onResizeESCEvent = null;
-		this.__fileManagerInfo = false;
 
 		// init
 		this.eventManager.addEvent(this.alignButton, 'click', this.#OnClick_alignButton.bind(this));
@@ -213,10 +212,10 @@ class Figure extends EditorInjector {
 		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),
+			container: dom.query.getParentElement(element, Figure.is, 2) || 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(element.parentElement, 'FIGCAPTION', false),
 			isVertical: IsVertical(element)
 		};
 	}
@@ -302,10 +301,10 @@ class Figure extends EditorInjector {
 	 * @param {boolean} [params.nonSizeInfo=false] Do not display the size information
 	 * @param {boolean} [params.nonBorder=false] Do not display the selected style line
 	 * @param {boolean} [params.figureTarget=false] If true, the target is a figure element
-	 * @param {boolean} [params.__fileManagerInfo=false] If true, the file manager is called
+	 * @param {boolean} [params.infoOnly=false] If true, returns only the figure target info without opening the controller
 	 * @returns {FigureTargetInfo|undefined} figure target info
 	 */
-	open(targetNode, { nonResizing, nonSizeInfo, nonBorder, figureTarget, __fileManagerInfo }) {
+	open(targetNode, { nonResizing, nonSizeInfo, nonBorder, figureTarget, infoOnly }) {
 		if (!targetNode) {
 			console.warn('[SUNEDITOR.modules.Figure.open] The "targetNode" is null.');
 			return;
@@ -369,7 +368,7 @@ class Figure extends EditorInjector {
 
 		this._width = targetInfo.width;
 		this._height = targetInfo.height;
-		if (__fileManagerInfo || this.__fileManagerInfo) return targetInfo;
+		if (infoOnly) return targetInfo;
 
 		const _figure = this.frameContext.get('_figure');
 		this.editor._figureContainer = _figure.main;
@@ -522,7 +521,7 @@ class Figure extends EditorInjector {
 	 * @returns {{w: string, h: string, dw: string, dh: string}}
 	 */
 	getSize(targetNode) {
-		if (!targetNode) targetNode = this._element;
+		targetNode ||= this._element;
 
 		const v = IsVertical(targetNode);
 		let w = '';
@@ -547,13 +546,14 @@ class Figure extends EditorInjector {
 			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
+				: 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 = w || 'auto';
-			h = h || 'auto';
+
+			w ||= 'auto';
+			h ||= 'auto';
 		}
 
 		dw = v ? h : w;
@@ -573,8 +573,8 @@ class Figure extends EditorInjector {
 	 * @param {string} align "none"|"left"|"center"|"right"
 	 */
 	setAlign(targetNode, align) {
-		if (!targetNode) targetNode = this._element;
-		this.align = align = align || 'none';
+		targetNode ||= this._element;
+		this.align = align ||= 'none';
 
 		const figure = Figure.GetContainer(targetNode);
 		if (!figure.cover) return;
@@ -610,7 +610,7 @@ class Figure extends EditorInjector {
 	 * @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);
@@ -798,7 +798,12 @@ class Figure extends EditorInjector {
 	 */
 	retainFigureFormat(container, originEl, anchorCover, fileManagerInst) {
 		const isInline = this.component.isInline(container);
-		let existElement = this.format.isBlock(originEl.parentNode) || dom.check.isWysiwygFrame(originEl.parentNode) ? originEl : dom.check.isAnchor(originEl.parentNode) ? originEl.parentNode : this.format.getLine(originEl) || originEl;
+		let existElement =
+			this.format.isBlock(originEl.parentNode) || dom.check.isWysiwygFrame(originEl.parentNode)
+				? originEl
+				: dom.check.isAnchor(originEl.parentNode)
+				? originEl.parentNode
+				: Figure.GetContainer(originEl)?.container || this.format.getLine(originEl) || originEl;
 
 		if (dom.query.getParentElement(originEl, dom.check.isExcludeFormat)) {
 			existElement = anchorCover && anchorCover !== originEl ? anchorCover : originEl;
@@ -835,7 +840,7 @@ class Figure extends EditorInjector {
 	 * @param {?Node=} node Target element, default is the current element
 	 */
 	deleteTransform(node) {
-		if (!node) node = this._element;
+		node ||= this._element;
 
 		const element = /** @type {HTMLElement} */ (node);
 		const size = (element.getAttribute('data-se-size') || '').split(',');
@@ -889,8 +894,10 @@ class Figure extends EditorInjector {
 				this._deletePercentSize();
 				this._applySize(offsetW + 'px', offsetH + 'px', '');
 
-				cover.style.width = w;
-				cover.style.height = figureInfo.caption || figureInfo.inlineCover ? '' : h;
+				if (cover) {
+					cover.style.width = w;
+					cover.style.height = figureInfo.caption || figureInfo.inlineCover ? '' : h;
+				}
 
 				if (isVertical) {
 					const transW = offsetW / 2 + 'px ' + offsetW / 2 + 'px 0';
@@ -986,14 +993,14 @@ class Figure extends EditorInjector {
 
 		const sizeTarget = this._cover || this._element;
 
-		if (this.autoRatio) this._cover.style.width = w;
+		if (this.autoRatio && this._cover) this._cover.style.width = w;
 		if (!onlyH) {
 			sizeTarget.style.width = this._element.style.width = w;
 		}
 		if (!onlyW) {
 			h = numbers.is(h) ? h + this.sizeUnit : h;
 			sizeTarget.style.height = this._element.style.height = this.autoRatio && !this.isVertical ? '100%' : h;
-			if (this.autoRatio) {
+			if (this.autoRatio && this._cover) {
 				this._cover.style.height = h;
 				this.__setCoverPaddingBottom(w, h);
 			}
@@ -1041,8 +1048,10 @@ class Figure extends EditorInjector {
 			this._element.style.maxWidth = '';
 			this._element.style.width = '';
 			this._element.style.height = '';
-			this._cover.style.width = '';
-			this._cover.style.height = '';
+			if (this._cover) {
+				this._cover.style.width = '';
+				this._cover.style.height = '';
+			}
 		}
 
 		this.setAlign(this._element, this.align);
@@ -1058,7 +1067,7 @@ class Figure extends EditorInjector {
 	 * @param {string|number} h Height percentage.
 	 */
 	_setPercentSize(w, h) {
-		if (!h) h = this.autoRatio ? (/%$/.test(this.autoRatio.current) ? this.autoRatio.current : this.autoRatio.default) : h;
+		h ||= this.autoRatio ? (/%$/.test(this.autoRatio.current) ? this.autoRatio.current : this.autoRatio.default) : h;
 		h = h && !/%$/.test(h + '') && !numbers.get(h, 0) ? (numbers.is(h) ? h + '%' : h) : numbers.is(h) ? h + this.sizeUnit : h || (this.autoRatio ? this.autoRatio.default : '');
 
 		const heightPercentage = /%$/.test(h + '');
@@ -1071,10 +1080,11 @@ class Figure extends EditorInjector {
 			return;
 		}
 
-		if (this._inlineCover !== this._cover) {
+		if (this._inlineCover !== this._cover && this._cover) {
 			this._cover.style.width = '100%';
 			this._cover.style.height = String(h);
 		}
+
 		this._element.style.width = '100%';
 		this._element.style.maxWidth = '';
 		this._element.style.height = String(this.autoRatio ? '100%' : heightPercentage ? '' : h);
@@ -1095,8 +1105,11 @@ class Figure extends EditorInjector {
 	 * @description Deletes percentage-based sizing from the figure element.
 	 */
 	_deletePercentSize() {
-		this._cover.style.width = '';
-		this._cover.style.height = '';
+		if (this._cover) {
+			this._cover.style.width = '';
+			this._cover.style.height = '';
+		}
+
 		this._container.style.width = '';
 		this._container.style.height = '';
 
@@ -1161,7 +1174,12 @@ class Figure extends EditorInjector {
 	_setCaptionPosition(element) {
 		const figcaption = /** @type {HTMLElement} */ (dom.query.getEdgeChild(dom.query.getParentElement(element, 'FIGURE'), 'FIGCAPTION', false));
 		if (figcaption) {
-			figcaption.style.marginTop = (this.isVertical ? element.offsetWidth - element.offsetHeight : 0) + 'px';
+			figcaption.style.marginTop = (this.isVertical && !this.autoRatio ? element.offsetWidth - element.offsetHeight : 0) + 'px';
+			if (this.isVertical && this.autoRatio) {
+				element.style.marginTop = figcaption.offsetHeight + 'px';
+			} else {
+				element.style.marginTop = '';
+			}
 		}
 	}
 

package/src/modules/FileManager.js

@@ -139,12 +139,10 @@ class FileManager extends CoreInjector {
 		let info = null;
 		let state = '';
 
-		if (!file) {
-			file = {
-				name: GetAttr(element, 'file-name') || (typeof element.src === 'string' ? element.src.split('/').pop() : ''),
-				size: Number(GetAttr(element, 'file-size')) || 0
-			};
-		}
+		file ||= {
+			name: GetAttr(element, 'file-name') || (typeof element.src === 'string' ? element.src.split('/').pop() : ''),
+			size: Number(GetAttr(element, 'file-size')) || 0
+		};
 
 		// create
 		if (!dataIndex || this.editor._componentsInfoInit) {