suneditor 3.0.0-beta.13 → 3.0.0-beta.15

package/src/core/section/options.js

@@ -66,7 +66,7 @@ export const DEFAULTS = {
 		col: 'width',
 		'ol|ul': 'list-style-type'
 	},
-	TEXT_STYLES: 'font-family|font-size|color|background-color',
+	SPAN_STYLES: 'font-family|font-size|color|background-color|width|height',
 	LINE_STYLES: 'text-align|margin-left|margin-right|line-height',
 
 	RETAIN_STYLE_MODE: ['repeat', 'always', 'none']
@@ -145,8 +145,8 @@ export const DEFAULTS = {
  * @property {Object<string, string>} [__tagStyles=CONSTANTS.TAG_STYLES] - The basic tags that serves as the base for "tagStyles"
  * - The default follows {@link DEFAULTS.TAG_STYLES}
  * @property {Object<string, string>} [tagStyles={}] - Specifies allowed styles for HTML tags.
- * @property {string} [spanStyles=CONSTANTS.TEXT_STYLES] - Specifies allowed styles for the "span" tag.
- * - The default follows {@link DEFAULTS.TEXT_STYLES}
+ * @property {string} [spanStyles=CONSTANTS.SPAN_STYLES] - Specifies allowed styles for the "span" tag.
+ * - The default follows {@link DEFAULTS.SPAN_STYLES}
  * @property {string} [lineStyles=CONSTANTS.LINE_STYLES] - Specifies allowed styles for the "line" element (p..).
  * - The default follows {@link DEFAULTS.LINE_STYLES}
  * @property {string} [textDirection="ltr"] - Text direction: "ltr" or "rtl".
@@ -256,3 +256,116 @@ export const DEFAULTS = {
 /**
  * @typedef {EditorBaseOptions & EditorFrameOptions} EditorInitOptions
  */
+
+/** ------------- [OPTIONS FRAG] ------------- */
+/**
+ * @description For all EditorInitOptions keys, only boolean | null values are allowed.
+ * - 'fixed' → Immutable / null → Resettable.
+ * @type {Partial<Record<keyof EditorInitOptions, "fixed" | true>>}
+ */
+export const OPTION_FRAME_FIXED_FLAG = {
+	value: 'fixed',
+	placeholder: true,
+	editableFrameAttributes: true,
+	width: true,
+	minWidth: true,
+	maxWidth: true,
+	height: true,
+	minHeight: true,
+	maxHeight: true,
+	editorStyle: true,
+	iframe: 'fixed',
+	iframe_fullPage: 'fixed',
+	iframe_attributes: true,
+	iframe_cssFileName: true,
+	statusbar: true,
+	statusbar_showPathLabel: true,
+	statusbar_resizeEnable: 'fixed',
+	charCounter: true,
+	charCounter_max: true,
+	charCounter_label: true,
+	charCounter_type: true
+};
+/**
+ * @description For all EditorInitOptions keys, only boolean | null values are allowed.
+ * - 'fixed' → Immutable / null → Resettable.
+ * @type {Partial<Record<keyof EditorInitOptions, "fixed" | true>>}
+ */
+export const OPTION_FIXED_FLAG = {
+	plugins: 'fixed',
+	excludedPlugins: 'fixed',
+	buttonList: 'fixed',
+	v2Migration: 'fixed',
+	strictMode: 'fixed',
+	mode: 'fixed',
+	type: 'fixed',
+	theme: true,
+	lang: 'fixed',
+	fontSizeUnits: 'fixed',
+	allowedClassName: 'fixed',
+	closeModalOutsideClick: 'fixed',
+	copyFormatKeepOn: true,
+	syncTabIndent: true,
+	tabDisable: true,
+	autoLinkify: true,
+	autoStyleify: true,
+	scrollToOptions: true,
+	componentScrollToOptions: true,
+	retainStyleMode: true,
+	allowedExtraTags: 'fixed',
+	events: true,
+	__textStyleTags: 'fixed',
+	textStyleTags: 'fixed',
+	convertTextTags: 'fixed',
+	__tagStyles: 'fixed',
+	tagStyles: 'fixed',
+	spanStyles: 'fixed',
+	lineStyles: 'fixed',
+	textDirection: true,
+	reverseButtons: 'fixed',
+	historyStackDelayTime: true,
+	lineAttrReset: true,
+	printClass: true,
+	defaultLine: 'fixed',
+	defaultLineBreakFormat: true,
+	scopeSelectionTags: true,
+	__defaultElementWhitelist: 'fixed',
+	elementWhitelist: 'fixed',
+	elementBlacklist: 'fixed',
+	__defaultAttributeWhitelist: 'fixed',
+	attributeWhitelist: 'fixed',
+	attributeBlacklist: 'fixed',
+	__defaultFormatLine: 'fixed',
+	formatLine: 'fixed',
+	__defaultFormatBrLine: 'fixed',
+	formatBrLine: 'fixed',
+	__defaultFormatClosureBrLine: 'fixed',
+	formatClosureBrLine: 'fixed',
+	__defaultFormatBlock: 'fixed',
+	formatBlock: 'fixed',
+	__defaultFormatClosureBlock: 'fixed',
+	formatClosureBlock: 'fixed',
+	allowedEmptyTags: true,
+	toolbar_width: true,
+	toolbar_container: 'fixed',
+	toolbar_sticky: true,
+	toolbar_hide: true,
+	subToolbar: 'fixed',
+	statusbar_container: 'fixed',
+	shortcutsHint: true,
+	shortcutsDisable: 'fixed',
+	shortcuts: 'fixed',
+	fullScreenOffset: true,
+	previewTemplate: true,
+	printTemplate: true,
+	componentAutoSelect: true,
+	defaultUrlProtocol: true,
+	allUsedStyles: 'fixed',
+	toastMessageTime: true,
+	icons: 'fixed',
+	freeCodeViewMode: true,
+	__lineFormatFilter: true,
+	__pluginRetainFilter: true,
+	__listCommonStyle: 'fixed',
+	externalLibs: 'fixed'
+};

package/src/modules/Controller.js

@@ -28,7 +28,9 @@ const INDEX_1 = '2147483640';
  * @property {Array<HTMLElement>=} [parents=[]] The parent "controller" array when "controller" is opened nested.
  * @property {boolean=} [parentsHide=false] If true, the parent element is hidden when the controller is opened.
  * @property {HTMLElement=} [sibling=null] The related sibling controller element that this controller is positioned relative to.
- * @property {"top"|"side"} [siblingPosition="top"] The relative position of this controller to the sibling element (e.g., display above or beside the sibling).
+ * - e.g.) table plugin :: 118
+ * @property {boolean=} [siblingMain=false] If true, This sibling controller is the main controller.
+ * - You must specify this option, if use "sibling"
  * @property {boolean=} [isInsideForm=false] If the controller is inside a form, set it to true.
  * @property {boolean=} [isOutsideForm=false] If the controller is outside a form, set it to true.
  */
@@ -61,7 +63,7 @@ class Controller extends EditorInjector {
 		this.parents = /** @type {Array<HTMLElement>} */ (params.parents || []);
 		this.parentsHide = !!params.parentsHide;
 		this.sibling = /** @type {HTMLElement} */ (params.sibling || null);
-		this.siblingPosition = ['top', 'side'].includes(params.siblingPosition) ? params.siblingPosition : 'top';
+		this.siblingMain = !!params.siblingMain;
 		this.isInsideForm = !!params.isInsideForm;
 		this.isOutsideForm = !!params.isOutsideForm;
 		this.toTop = false;
@@ -137,14 +139,6 @@ class Controller extends EditorInjector {
 
 		this.__addGlobalEvent();
 
-		// add sibling offset
-		if (this.sibling) {
-			if (this.siblingPosition === 'top') {
-				this.__addOffset.top += -this.sibling.offsetHeight + 1;
-			} else {
-				this.__addOffset.left += this.form.offsetWidth + this.sibling.offsetWidth - 1;
-			}
-		}
 		// display controller
 		this._setControllerPosition(this.form, this.currentPositionTarget, false);
 
@@ -290,6 +284,11 @@ class Controller extends EditorInjector {
 		controller.style.visibility = 'hidden';
 		controller.style.display = 'block';
 
+		if (this.sibling && this.sibling.style.display !== 'block') {
+			this.sibling.style.visibility = 'hidden';
+			this.sibling.style.display = 'block';
+		}
+
 		if (this.selection.isRange(refer)) {
 			if (!this.offset.setRangePosition(this.form, /** @type {Range} */ (refer), { position: 'bottom' })) {
 				this.hide();
@@ -297,18 +296,19 @@ class Controller extends EditorInjector {
 			}
 		} else {
 			if (refer) {
-				const positionResult = this.offset.setAbsPosition(controller, /** @type {HTMLElement} */ (refer), { addOffset: this.__addOffset, position: this.position, isWWTarget: this.isWWTarget, inst: this });
+				const positionResult = this.offset.setAbsPosition(controller, /** @type {HTMLElement} */ (refer), { addOffset: this.__addOffset, position: this.position, isWWTarget: this.isWWTarget, inst: this, sibling: this.sibling });
 				if (!positionResult) {
 					this.hide();
 					return;
 				}
 
-				if (!skipAutoReposition && this.sibling && this.siblingPosition === 'top' && positionResult.position !== this.position) {
+				if (!skipAutoReposition && this.sibling && !this.siblingMain) {
 					const resetPosition = controller.offsetTop - this.__addOffset.top;
 					if (positionResult.position === 'bottom') {
 						this._reserveIndex = true;
-						controller.style.top = resetPosition + this.sibling.offsetHeight - 2 + 'px';
+						controller.style.top = resetPosition + this.sibling.offsetHeight - 1 + 'px';
 					} else {
+						this._reserveIndex = false;
 						controller.style.top = resetPosition - this.sibling.offsetHeight + 2 + 'px';
 					}
 				} else {

package/src/modules/Figure.js

@@ -308,9 +308,7 @@ class Figure extends EditorInjector {
 			return;
 		}
 
-		if (_DragHandle.get('__overInfo') !== ON_OVER_COMPONENT) {
-			this.ui._offCurrentController();
-		} else {
+		if (_DragHandle.get('__overInfo') === ON_OVER_COMPONENT) {
 			nonBorder = true;
 		}
 
@@ -523,7 +521,7 @@ class Figure extends EditorInjector {
 
 		const w = !/%$/.test(target.style.width) ? target.style.width : ((figure.container && numbers.get(figure.container.style.width, 2)) || 100) + '%';
 		const h = figure.inlineCover
-			? figure.inlineCover.style.height
+			? figure.inlineCover.style.height || /** @type {HTMLElement} */ (targetNode).style.height || String(/** @type {HTMLImageElement} */ (targetNode).height || '')
 			: numbers.get(figure.cover.style.paddingBottom, 0) > 0 && !this.isVertical
 			? figure.cover.style.height
 			: !/%$/.test(target.style.height) || !/%$/.test(target.style.width)
@@ -575,6 +573,7 @@ class Figure extends EditorInjector {
 	 * @description As style[block, inline] the component
 	 * @param {?Node} targetNode Target element
 	 * @param {"block"|"inline"} formatStyle Format style
+	 * @returns {HTMLElement} New target element after conversion
 	 */
 	convertAsFormat(targetNode, formatStyle) {
 		if (!targetNode) targetNode = this._element;
@@ -583,6 +582,10 @@ class Figure extends EditorInjector {
 		const { w, h } = this.getSize(target);
 
 		const newTarget = /** @type {HTMLElement} */ (target.cloneNode(false));
+		newTarget.style.width = '';
+		newTarget.style.height = '';
+		newTarget.removeAttribute('width');
+		newTarget.removeAttribute('height');
 
 		switch (formatStyle) {
 			case 'inline': {
@@ -592,8 +595,6 @@ class Figure extends EditorInjector {
 				const next = container.nextElementSibling;
 				const parent = container.parentElement;
 
-				newTarget.style.width = '';
-				newTarget.style.height = '';
 				const figure = Figure.CreateInlineContainer(newTarget);
 				dom.utils.addClass(
 					figure.container,
@@ -623,8 +624,6 @@ class Figure extends EditorInjector {
 					dom.utils.removeItem(s.previousElementSibling);
 				}
 
-				newTarget.style.width = '';
-				newTarget.style.height = '';
 				const figure = Figure.CreateContainer(newTarget);
 				dom.utils.addClass(
 					figure.container,
@@ -641,6 +640,8 @@ class Figure extends EditorInjector {
 				break;
 			}
 		}
+
+		return newTarget;
 	}
 
 	/**
@@ -1208,8 +1209,10 @@ class Figure extends EditorInjector {
 		e.stopPropagation();
 		e.preventDefault();
 
-		const eventTarget = dom.query.getEventTarget(e);
 		const inst = _DragHandle.get('__figureInst');
+		if (!inst) return;
+
+		const eventTarget = dom.query.getEventTarget(e);
 		const direction = (inst._resize_direction = eventTarget.classList[0]);
 		inst._resizeClientX = e.clientX;
 		inst._resizeClientY = e.clientY;

package/src/modules/SelectMenu.js

@@ -98,7 +98,7 @@ class SelectMenu extends CoreInjector {
 	on(referElement, selectMethod, attr) {
 		if (!attr) attr = {};
 		this._refer = /** @type {HTMLElement} */ (referElement);
-		this._keydownTarget = dom.check.isInputElement(referElement) ? referElement : this._w;
+		this._keydownTarget = dom.check.isInputElement(referElement) ? referElement : this.editor.frameContext.get('_ww');
 		this._selectMethod = selectMethod;
 		this.form = dom.utils.createElement(
 			'DIV',

package/src/plugins/dropdown/table.js

@@ -4,8 +4,8 @@ import { Controller, SelectMenu, ColorPicker, Figure, _DragHandle } from '../../
 
 const { _w, ON_OVER_COMPONENT } = env;
 
-const ROW_SELECT_MARGIN = 5;
-const CELL_SELECT_MARGIN = 2;
+const ROW_SELECT_MARGIN = 6;
+const CELL_SELECT_MARGIN = 6;
 const CELL_DECIMAL_END = 0;
 
 const RESIZE_CELL_CLASS = '.se-table-resize-line';
@@ -115,12 +115,17 @@ class Table extends EditorInjector {
 		});
 
 		// members - Controller
-		this.controller_cell = new Controller(this, controller_cell.html, { position: this.cellControllerTop ? 'top' : 'bottom' });
-		this.controller_table = new Controller(this, controller_table, { position: 'top' });
 		if (this.cellControllerTop) {
+			this.controller_cell = new Controller(this, controller_cell.html, { position: 'top' });
+			this.controller_table = new Controller(this, controller_table, { position: 'top' });
 			this.controller_cell.sibling = this.controller_table.form;
-			this.controller_cell.siblingPosition = 'top';
+			this.controller_table.sibling = this.controller_cell.form;
+			this.controller_table.siblingMain = true;
+		} else {
+			this.controller_table = new Controller(this, controller_table, { position: 'top' });
+			this.controller_cell = new Controller(this, controller_cell.html, { position: 'bottom' });
 		}
+
 		// props
 		const propsTargetForms = [this.controller_table.form, this.controller_cell.form];
 		this.controller_props = new Controller(this, controller_props.html, { position: 'bottom', parents: propsTargetForms, isInsideForm: true });
@@ -428,24 +433,69 @@ class Table extends EditorInjector {
 				// create colgroup
 				if (!ColgroupEl) {
 					const rows = element.rows;
-					const firstRow = rows[0];
-					const maxCount = GetMaxColumns(element);
-					const colHTML = [];
+					const maxColumnCount = GetMaxColumns(element);
+					const colWidths = new Array(maxColumnCount).fill(null);
+
+					for (let r = 0, rLen = rows.length, cellsCount; r < rLen; r++) {
+						const cellsInRow = rows[r].cells;
+						cellsCount = cellsInRow.length;
+						let currentLogicalCol = 0;
+						const rowColOccupancy = new Array(maxColumnCount).fill(false);
+
+						for (let c = 0; c < cellsCount; c++) {
+							const cell = cellsInRow[c];
+							const cellWidth = cell.style.width;
+							const colSpan = cell.colSpan || 1;
+
+							while (currentLogicalCol < maxColumnCount && rowColOccupancy[currentLogicalCol]) {
+								currentLogicalCol++;
+							}
+
+							if (currentLogicalCol >= maxColumnCount) break;
+							if (cellWidth && !colWidths[currentLogicalCol]) colWidths[currentLogicalCol] = cellWidth;
 
-					for (let i = 0; i < maxCount; i++) {
-						let colStyle = '';
-						if (firstRow && firstRow.cells[i]) {
-							const styleWidth = firstRow.cells[i].style.width;
-							if (styleWidth) {
-								colStyle = ` style="width: ${styleWidth};"`;
-								dom.utils.setStyle(firstRow.cells[i], 'width', '');
+							for (let i = 0; i < colSpan; i++) {
+								if (currentLogicalCol + i >= maxColumnCount || !cellWidth) continue;
+
+								rowColOccupancy[currentLogicalCol + i] = true;
+								const currentPxWidth = parseFloat(cellWidth);
+
+								for (let j = 0; j < colSpan; j++) {
+									const targetColIndex = currentLogicalCol + j;
+									if (targetColIndex >= maxColumnCount) continue;
+
+									const existingWidth = colWidths[targetColIndex];
+									if (existingWidth === null) {
+										colWidths[targetColIndex] = `width: ${cellWidth};`;
+									} else {
+										const existingPxWidth = parseFloat(existingWidth.replace('width: ', '').replace(';', ''));
+										if (colSpan === 1 && currentPxWidth !== existingPxWidth) {
+											colWidths[targetColIndex] = `width: ${cellWidth};`;
+										}
+									}
+								}
 							}
+							currentLogicalCol += colSpan;
 						}
+
+						if (cellsCount === maxColumnCount) break;
+					}
+
+					const colHTML = [];
+					for (let i = 0; i < maxColumnCount; i++) {
+						const colStyle = colWidths[i] ? ` style="${colWidths[i]}"` : '';
 						colHTML.push(`<col${colStyle}>`);
 					}
 
 					const colGroup = dom.utils.createElement('colgroup', null, colHTML.join(''));
 					element.insertBefore(colGroup, element.firstElementChild);
+
+					for (let r = 0; r < rows.length; r++) {
+						const cellsInRow = rows[r].cells;
+						for (let c = 0; c < cellsInRow.length; c++) {
+							dom.utils.setStyle(cellsInRow[c], 'width', '');
+						}
+					}
 				}
 
 				// figure
@@ -860,13 +910,17 @@ class Table extends EditorInjector {
 				this._maxWidth = !this._maxWidth;
 				this._setTableStyle('width', false);
 				this._historyPush();
-				this.component.select(this._element, Table.key, { isInput: true });
+				_w.setTimeout(() => {
+					this.component.select(this._element, Table.key, { isInput: true });
+				}, 0);
 				break;
 			case 'layout':
 				this._fixedColumn = !this._fixedColumn;
 				this._setTableStyle('column', false);
 				this._historyPush();
-				this.component.select(this._element, Table.key, { isInput: true });
+				_w.setTimeout(() => {
+					this.component.select(this._element, Table.key, { isInput: true });
+				}, 0);
 				break;
 			case 'copy':
 				this.component.copy(this._figure);
@@ -2141,16 +2195,17 @@ class Table extends EditorInjector {
 	/**
 	 * @private
 	 * @description Converts the width of <col> elements to percentages.
+	 * @param {HTMLTableElement} target - The target table element.
 	 */
-	_resizePercentCol() {
-		const cols = this._element.querySelector('colgroup').querySelectorAll('col');
-		const tableTotalWidth = this._element.offsetWidth;
+	_resizePercentCol(target) {
+		const cols = target.querySelector('colgroup').querySelectorAll('col');
+		const tableTotalWidth = target.offsetWidth;
 
 		cols.forEach((col) => {
-			const colWidthString = _w.getComputedStyle(col).getPropertyValue('width');
+			const colWidthString = col.style.width;
 
 			if (!colWidthString.endsWith('%')) {
-				const pixelWidth = numbers.get(colWidthString, 1);
+				const pixelWidth = col.offsetWidth || numbers.get(colWidthString, CELL_DECIMAL_END);
 				const percentage = (pixelWidth / tableTotalWidth) * 100;
 				col.style.width = percentage + '%';
 			}
@@ -2166,7 +2221,7 @@ class Table extends EditorInjector {
 	 * @param {boolean} isLeftEdge Whether the resizing is on the left edge.
 	 */
 	_startCellResizing(col, startX, startWidth, isLeftEdge) {
-		this._resizePercentCol();
+		this._resizePercentCol(this._element);
 		this._setResizeLinePosition(this._figure, this._tdElement, this._resizeLinePrev, isLeftEdge);
 		this._resizeLinePrev.style.display = 'block';
 		const prevValue = col.style.width;
@@ -2192,7 +2247,7 @@ class Table extends EditorInjector {
 			),
 			() => {
 				this.__removeGlobalEvents();
-				this._resizePercentCol();
+				this._resizePercentCol(this._element);
 				this.history.push(true);
 				this.component.select(this._element, Table.key, { isInput: true });
 			},

package/src/plugins/modal/image.js

@@ -91,7 +91,7 @@ class Image_ extends EditorInjector {
 				? [[ctrlAs, 'mirror_h', 'mirror_v', 'align', 'caption', 'edit', 'revert', 'copy', 'remove']]
 				: [
 						[ctrlAs, 'resize_auto,100,75,50', 'rotate_l', 'rotate_r', 'mirror_h', 'mirror_v'],
-						['align', 'caption', 'edit', 'revert', 'copy', 'remove']
+						['edit', 'align', 'caption', 'revert', 'copy', 'remove']
 				  ];
 
 		// show align
@@ -276,7 +276,7 @@ class Image_ extends EditorInjector {
 			query: 'img',
 			method: (element) => {
 				const figureInfo = Figure.GetContainer(element);
-				if (figureInfo && figureInfo.container && figureInfo.cover) return;
+				if (figureInfo && figureInfo.container && (figureInfo.cover || figureInfo.inlineCover)) return;
 
 				this._ready(element);
 				this._fileCheck(this._origin_w, this._origin_h);
@@ -585,6 +585,13 @@ class Image_ extends EditorInjector {
 		if (!height) height = this.inputY?.value || 'auto';
 
 		let imageEl = this._element;
+
+		// as (block | inline)
+		if ((this.as === 'block' && !this._cover) || (this.as === 'inline' && this._cover)) {
+			imageEl = this.figure.convertAsFormat(imageEl, this.as);
+		}
+
+		// --- update image ---
 		const cover = this._cover;
 		const container = this._container === this._cover ? null : this._container;
 
@@ -661,6 +668,8 @@ class Image_ extends EditorInjector {
 		imageEl.onload = () => {
 			this.select(imageEl);
 		};
+
+		this._ready(imageEl);
 	}
 
 	/**
@@ -692,16 +701,6 @@ class Image_ extends EditorInjector {
 			this.figure.open(imageEl, { nonResizing: true, nonSizeInfo: false, nonBorder: false, figureTarget: false, __fileManagerInfo: true });
 		}
 
-		// check size
-		let changeSize;
-		const x = numbers.is(width) ? width + this.sizeUnit : width;
-		const y = numbers.is(height) ? height + this.sizeUnit : height;
-		if (/%$/.test(imageEl.style.width)) {
-			changeSize = x !== container.style.width || y !== container.style.height;
-		} else {
-			changeSize = x !== imageEl.style.width || y !== imageEl.style.height;
-		}
-
 		// alt
 		imageEl.alt = this.altText.value;
 
@@ -749,9 +748,11 @@ class Image_ extends EditorInjector {
 		}
 
 		// size
-		if (this._resizing && changeSize) {
-			this._applySize(width, height);
-		}
+		imageEl.style.width = '';
+		imageEl.style.height = '';
+		imageEl.removeAttribute('width');
+		imageEl.removeAttribute('height');
+		this._applySize(width, height);
 
 		if (isNewAnchor) {
 			if (!isNewContainer) {
@@ -765,7 +766,7 @@ class Image_ extends EditorInjector {
 		}
 
 		// transform
-		if (modifiedCaption || (!this._onlyPercentage && changeSize)) {
+		if (modifiedCaption || !this._onlyPercentage) {
 			if (/\d+/.test(imageEl.style.height) || (this.figure.isVertical && this.captionCheckEl.checked)) {
 				if (/auto|%$/.test(width) || /auto|%$/.test(height)) {
 					this.figure.deleteTransform(imageEl);

package/src/suneditor.js

@@ -1,10 +1,10 @@
 import Editor from './core/editor';
 
-import EditorInjector from './editorInjector';
-import Plugins from './plugins';
-import Langs from './langs';
-import Modules from './modules';
-import Helper from './helper';
+import editorInjector from './editorInjector';
+import plugins from './plugins';
+import langs from './langs';
+import modules from './modules';
+import helper from './helper';
 
 /**
  * @module SunEditorExports
@@ -21,27 +21,27 @@ import Helper from './helper';
 /**
  * Editor Injector module, Inject "editor" and basic frequently used objects by calling it with "call(this, editor)".
  */
-export { EditorInjector };
+export { editorInjector };
 
 /**
  * Available editor plugins
  */
-export { Plugins };
+export { plugins };
 
 /**
  * Editor modules
  */
-export { Modules };
+export { modules };
 
 /**
  * Language packs for the editor
  */
-export { Langs };
+export { langs };
 
 /**
  * Helper functions for the editor
  */
-export { Helper };
+export { helper };
 
 /**
  * SunEditor Factory Object
@@ -62,7 +62,10 @@ export default {
 
 	/**
 	 * Creates a new instance of the SunEditor
-	 * @param {Element|Object<string, {target: Element, options: EditorFrameOptions_suneditor}>} target - Target element or multi-root object
+	 * @param {Element|string|Object<string, {target: Element, options: EditorFrameOptions_suneditor}>} target
+	 * - Element: The direct DOM element to initialize the editor on.
+	 * - string: A CSS selector string. The corresponding element is selected using `document.querySelector`.
+	 * - Object: For multi-root setup. Each key maps to a config with `{target, options}`.
 	 * @param {EditorInitOptions_suneditor} options - Initialization options
 	 * @param {EditorInitOptions_suneditor} [_init_options] - Optional preset initialization options
 	 * @returns {Editor} - Instance of the SunEditor
@@ -90,7 +93,11 @@ export default {
 		if (!target) throw Error("[SUNEDITOR.create.fail] suneditor requires textarea's element");
 
 		const multiTargets = [];
-		if (target.nodeType === 1) {
+		if (typeof target === 'string') {
+			const t = document.querySelector(target);
+			if (!t) throw Error(`[SUNEDITOR.create.fail]-[document.querySelector(${target})] Cannot find target element. Make sure "${target}" is a valid selector and exists in the document.`);
+			multiTargets.push({ key: null, target: t });
+		} else if (target.nodeType === 1) {
 			multiTargets.push({ key: null, target: target });
 		} else {
 			let props;

package/types/assets/icons/defaultIcons.d.ts

@@ -134,6 +134,8 @@ declare namespace _default {
 	export let side_menu_item: string;
 	export let side_menu_folder_plus: string;
 	export let alert_outline: string;
+	export let more_media: string;
+	export let more_view: string;
 	export let more_text: string;
 	export let more_paragraph: string;
 	export let more_plus: string;

package/types/core/base/eventManager.d.ts

@@ -283,9 +283,9 @@ declare class EventManager {
 	 * @this {EventManagerThis}
 	 * @description Adjusts the position of the editor's toolbar, controllers, and other floating elements based on scroll position.
 	 * - Ensures UI elements maintain their intended relative positions when scrolling.
-	 * @param {Element} eventWysiwyg The wysiwyg event object containing scroll data
+	 * @param {*} eventWysiwyg The wysiwyg event object containing scroll data (Window or element)
 	 */
-	_moveContainer(this: Omit<EventManager & Partial<import('../../editorInjector').default>, 'eventManager'>, eventWysiwyg: Element): void;
+	_moveContainer(this: Omit<EventManager & Partial<import('../../editorInjector').default>, 'eventManager'>, eventWysiwyg: any): void;
 	/**
 	 * @private
 	 * @this {EventManagerThis}

package/types/core/class/offset.d.ts

@@ -370,6 +370,7 @@ declare class Offset {
 	 * @param {{left:number, top:number}} [params.addOffset={left:0, top:0}] Additional offset
 	 * @param {"bottom"|"top"} [params.position="bottom"] Position ('bottom'|'top')
 	 * @param {*} params.inst Instance object of caller
+	 * @param {HTMLElement} [params.sibling] The sibling controller element
 	 * @returns {{position: "top" | "bottom"} | undefined} Success -> {position: current position}
 	 */
 	setAbsPosition(
@@ -384,6 +385,7 @@ declare class Offset {
 			};
 			position?: 'bottom' | 'top';
 			inst: any;
+			sibling?: HTMLElement;
 		}
 	):
 		| {
@@ -459,7 +461,12 @@ declare class Offset {
 	 * @param {RectsInfo} targetRect Target rect object
 	 * @param {boolean} isTargetAbs Is target absolute position
 	 * @param {OffsetWWScrollInfo} wwScroll WYSIWYG scroll info
-	 * @returns {{rmt:number, rmb:number, rt:number}} Margin values (rmt: top margin, rmb: bottom margin, rt: Toolbar height offset adjustment)
+	 * @returns {{rmt:number, rmb:number, rt:number, tMargin:number, bMargin:number}} Margin values
+	 * - rmt: top margin to frame
+	 * - rmb: bottom margin to frame
+	 * - rt: Toolbar height offset adjustment
+	 * - tMargin: top margin
+	 * - bMargin: bottom margin
 	 */
 	_getVMargin(
 		this: Omit<Offset & Partial<import('../../editorInjector').default>, 'offset'>,
@@ -477,6 +484,8 @@ declare class Offset {
 		rmt: number;
 		rmb: number;
 		rt: number;
+		tMargin: number;
+		bMargin: number;
 	};
 	/**
 	 * @private