suneditor 3.2.6 → 3.3.1

package/src/core/logic/panel/menu.js

@@ -1,4 +1,4 @@
-import { dom, converter, env } from '../../../helper';
+import { dom, converter, env, keyCodeMap } from '../../../helper';
 
 const { isMobile, _w } = env;
 
@@ -19,6 +19,7 @@ class Menu {
 	#dropdownCommands = [];
 	#bindClose_dropdown_mouse = null;
 	#bindClose_dropdown_key = null;
+	#bindClose_dropdown_esc = null;
 	#bindClose_cons_mouse = null;
 	#bindMenu_mousemove = null;
 	#bindMenu_mouseout = null;
@@ -27,6 +28,8 @@ class Menu {
 	#deferredShowTimer = null;
 	#viewportListener = null;
 	#visualViewport = null;
+	/** @type {Set<() => void>} */
+	#dropdownOffSubs = new Set();
 
 	/**
 	 * @constructor
@@ -64,11 +67,13 @@ class Menu {
 			mousedown: this.#OnMouseDown_dropdown.bind(this),
 			containerDown: this.containerOff.bind(this),
 			keydown: this.#OnKeyDown_dropdown.bind(this),
+			esc: this.#OnKeyDown_dropdown_esc.bind(this),
 			mousemove: this.#OnMousemove_dropdown.bind(this),
 			mouseout: this.#OnMouseout_dropdown.bind(this),
 		};
 		this.#bindClose_dropdown_mouse = null;
 		this.#bindClose_dropdown_key = null;
+		this.#bindClose_dropdown_esc = null;
 		this.#bindClose_cons_mouse = null;
 
 		// eventManager member (viewport)
@@ -150,6 +155,9 @@ class Menu {
 			this.#globalEventHandler.mousedown,
 			false,
 		);
+
+		this.#bindClose_dropdown_esc = this.#eventManager.addGlobalEvent('keydown', this.#globalEventHandler.esc, true);
+
 		if (this.#dropdownCommands.includes(dropdownName)) {
 			this.menus = converter.nodeListToArray(menu.querySelectorAll('[data-command]'));
 			if (this.menus.length > 0) {
@@ -208,6 +216,20 @@ class Menu {
 
 		this.#store.set('_preventBlur', false);
 		this.currentDropdownPlugin = null;
+
+		for (const cb of [...this.#dropdownOffSubs]) cb();
+	}
+
+	/**
+	 * @description Subscribe to be notified after a dropdown is turned off — i.e. a dropdown-free
+	 * plugin committed and closed itself via {@link dropdownOff}. Mirrors {@link Store#subscribe}:
+	 * returns an unsubscribe function.
+	 * @param {() => void} callback
+	 * @returns {() => void} Unsubscribe function
+	 */
+	subscribeDropdownOff(callback) {
+		this.#dropdownOffSubs.add(callback);
+		return () => this.#dropdownOffSubs.delete(callback);
 	}
 
 	/**
@@ -424,6 +446,7 @@ class Menu {
 	 */
 	#removeGlobalEvent() {
 		this.#bindClose_dropdown_mouse &&= this.#eventManager.removeGlobalEvent(this.#bindClose_dropdown_mouse);
+		this.#bindClose_dropdown_esc &&= this.#eventManager.removeGlobalEvent(this.#bindClose_dropdown_esc);
 		this.#bindClose_cons_mouse &&= this.#eventManager.removeGlobalEvent(this.#bindClose_cons_mouse);
 		if (this.#bindClose_dropdown_key) {
 			this.#bindClose_dropdown_key = this.#eventManager.removeGlobalEvent(this.#bindClose_dropdown_key);
@@ -491,6 +514,20 @@ class Menu {
 		}
 	}
 
+	/**
+	 * @description Closes the open dropdown on ESC. Bound as a capture-phase global listener for every dropdown.
+	 * @param {KeyboardEvent} e - Event object
+	 */
+	#OnKeyDown_dropdown_esc(e) {
+		if (!keyCodeMap.isEsc(e.code)) return;
+		if (this.#$.ui.opendControllers?.some(({ form }) => form && dom.utils.hasClass(form, 'se-dropdown'))) return;
+
+		e.preventDefault();
+		e.stopPropagation();
+
+		this.dropdownOff();
+	}
+
 	/**
 	 * @param {MouseEvent} e - Event object
 	 */

package/src/core/logic/panel/toolbar.js

@@ -95,6 +95,7 @@ class Toolbar {
 			isStickyPosible &&
 			stickyTop >= 0 &&
 			!this.#options.get('toolbar_container') &&
+			!this.#options.get('_toolbar_sticky_fixed') &&
 			typeof CSS !== 'undefined' &&
 			CSS.supports('position', 'sticky');
 

package/src/core/logic/shell/_commandExecutor.js

@@ -93,7 +93,8 @@ export default class CommandExecutor {
 				}
 				break;
 			case 'finder':
-				this.#$.finder.open(true);
+				if (this.#$.finder.isOpen) this.#$.finder.close();
+				else this.#$.finder.open(true);
 				break;
 			case 'codeView':
 				this.#$.viewer.codeView(!this.#frameContext.get('isCodeView'));

package/src/core/logic/shell/pluginManager.js

@@ -151,9 +151,22 @@ class PluginManager {
 		let retainFilter;
 		if ((retainFilter = this.#options.get('__pluginRetainFilter'))) {
 			this.#retainFormatCheckers.forEach((plugin, query) => {
-				const infoLst = domParser.querySelectorAll(query);
+				let infoLst;
+				try {
+					infoLst = domParser.querySelectorAll(query);
+				} catch (error) {
+					console.warn(`[SUNEDITOR.retainFormat.fail]-[${plugin.key}]`, error.message);
+					return;
+				}
+
 				for (let i = 0, len = infoLst.length; i < len; i++) {
-					if (retainFilter === true || retainFilter[plugin.key] !== false) plugin.method(infoLst[i]);
+					if (retainFilter !== true && retainFilter[plugin.key] === false) continue;
+
+					try {
+						plugin.method(infoLst[i]);
+					} catch (error) {
+						console.warn(`[SUNEDITOR.retainFormat.fail]-[${plugin.key}]`, error.message);
+					}
 				}
 			});
 		}

package/src/core/logic/shell/ui.js

@@ -72,6 +72,16 @@ class UIManager {
 	 */
 	#blockHandle = null;
 
+	/**
+	 * @description Currently open `SelectMenu` instances.
+	 * - There is one editor-wide "a select menu is open" flag but many `SelectMenu` instances, so it
+	 * cannot be a plain boolean: the last writer would win. A field plugin that closes its own menu on
+	 * every keystroke (`autocomplete`) used to flip the flag off while another menu (`slashCommand`) was
+	 * still open, which let the wysiwyg keydown handler run against the open menu.
+	 * @type {Set<*>}
+	 */
+	#openSelectMenus = new Set();
+
 	/**
 	 * @constructor
 	 * @param {SunEditor.Kernel} kernel
@@ -110,12 +120,6 @@ class UIManager {
 		this.#closeSignal = false;
 		this.#backWrapper = /** @type {HTMLElement} */ (this.#carrierWrapper.querySelector('.se-back-wrapper'));
 
-		/**
-		 * @description Whether `SelectMenu` is open
-		 * @type {boolean}
-		 */
-		this.selectMenuOn = false;
-
 		/**
 		 * @description Currently open `Controller` info array
 		 * @type {Array<SunEditor.Module.Controller.Info>}
@@ -136,6 +140,27 @@ class UIManager {
 		this._figureContainer = null;
 	}
 
+	/**
+	 * @description Whether any `SelectMenu` is currently open.
+	 * - Read-only: a menu announces itself through {@link setSelectMenuOpen}. Derived from the set of
+	 * open instances so an unrelated menu closing cannot clear the flag for a menu that is still open.
+	 * @returns {boolean}
+	 */
+	get selectMenuOn() {
+		return this.#openSelectMenus.size > 0;
+	}
+
+	/**
+	 * @internal
+	 * @description `SelectMenu` open-state notification. Called by `SelectMenu.open()` / `.close()`.
+	 * @param {*} instance The `SelectMenu` instance changing state
+	 * @param {boolean} open `true` on open, `false` on close
+	 */
+	setSelectMenuOpen(instance, open) {
+		if (open) this.#openSelectMenus.add(instance);
+		else this.#openSelectMenus.delete(instance);
+	}
+
 	/**
 	 * @description Set editor frame styles.
 	 * - Define the style of the edit area
@@ -291,12 +316,6 @@ class UIManager {
 
 			this.#activeDirBtn(rtl);
 
-			// reverse toolbar buttons
-			this.#reverseToolbarButtons(this.#context.get('toolbar_buttonTray'));
-			if (this.#context.has('toolbar_sub_buttonTray')) {
-				this.#reverseToolbarButtons(this.#context.get('toolbar_sub_buttonTray'));
-			}
-
 			if (this.#store.mode.isBalloon) this.#$.toolbar._showBalloon();
 			else if (this.#store.mode.isSubBalloon) this.#$.subToolbar._showBalloon();
 		} catch (e) {
@@ -614,7 +633,7 @@ class UIManager {
 				rt.get('blockHandle'),
 				rt.get('blockHandlePlus'),
 				rt.get('blockHandleDrag'),
-				blockHandleOpt.menu,
+				blockHandleOpt,
 			);
 		}
 	}
@@ -783,20 +802,6 @@ class UIManager {
 		}
 	}
 
-	/**
-	 * @description Reverse the order of toolbar button groups (excluding the more-layer).
-	 * @param {HTMLElement} buttonTray - The `.se-btn-tray` element.
-	 */
-	#reverseToolbarButtons(buttonTray) {
-		if (!buttonTray) return;
-		const moreLayer = buttonTray.querySelector('.se-toolbar-more-layer');
-		const children = Array.from(buttonTray.children).filter((c) => c !== moreLayer);
-		for (let i = children.length - 1; i >= 0; i--) {
-			buttonTray.appendChild(children[i]);
-		}
-		if (moreLayer) buttonTray.appendChild(moreLayer);
-	}
-
 	/**
 	 * @internal
 	 * @description Set the disabled button list
@@ -873,22 +878,58 @@ class UIManager {
 		}
 	}
 
+	/**
+	 * @description Resolves the per-line placeholder text for an empty line from the `placeholder_line` option.
+	 * - String option: one hint for every empty line — except list cells and table cells (backward compatible).
+	 * - Object option: keyed by tag name or a category sentinel matching the editor's format classification
+	 *   ({@link Format#isNormalLine}, `isBrLine`, `isClosureBrLine`, `isBlock`, `isClosureBlock`, list cells).
+	 * @param {?Node} line - The (empty) line element.
+	 * @param {string|Object<string, string>} opt - The `placeholder_line` option value.
+	 * @returns {string} The resolved placeholder text (`''` = none).
+	 */
+	resolveLinePlaceholder(line, opt) {
+		if (!line || !opt) return '';
+
+		if (typeof opt !== 'object') {
+			return dom.check.isListCell(line) || dom.query.getParentElement(line, dom.check.isTableCell) ? '' : opt;
+		}
+
+		const format = this.#$.format;
+		const tag = line.nodeName.toLowerCase();
+
+		if (typeof opt[tag] === 'string') return opt[tag];
+		if (dom.check.isListCell(line) && typeof opt['@list'] === 'string') return opt['@list'];
+		if (format.isClosureBrLine(line) && typeof opt['@closureBrLine'] === 'string') return opt['@closureBrLine'];
+		if (format.isBrLine(line) && typeof opt['@brLine'] === 'string') return opt['@brLine'];
+
+		const block = format.getBlock(line);
+		if (block && block !== line) {
+			const blockTag = block.nodeName.toLowerCase();
+			if (typeof opt[blockTag] === 'string') return opt[blockTag];
+			if (format.isClosureBlock(block) && typeof opt['@closureBlock'] === 'string') return opt['@closureBlock'];
+			if (typeof opt['@block'] === 'string') return opt['@block'];
+		}
+
+		if (format.isNormalLine(line) && typeof opt['@normalLine'] === 'string') return opt['@normalLine'];
+		return typeof opt['@line'] === 'string' ? opt['@line'] : '';
+	}
+
 	/**
 	 * @internal
 	 * @description Notion-style per-line placeholder. Marks the focused empty line so a CSS `::before`
-	 * renders the hint text on it.
+	 * renders the hint text resolved for that line's type (see {@link resolveLinePlaceholder}).
 	 * @param {SunEditor.FrameContext} fc - Frame context
 	 * @returns {boolean} Whether the line placeholder is currently shown.
 	 */
 	#updateLinePlaceholder(fc) {
-		const text = fc.get('placeholder_line');
-		if (!text) return false;
+		const opt = fc.get('placeholder_line');
+		if (!opt) return false;
 
 		const wysiwyg = fc.get('wysiwyg');
 
 		const line = this.#store.get('hasFocus') ? this.#$.format.getLine(this.#$.selection.selectionNode) : null;
-		const inTableCell = !!line && !!dom.query.getParentElement(line, dom.check.isTableCell);
-		const target = dom.check.isEmptyLine(line) && !dom.check.isListCell(line) && !inTableCell ? line : null;
+		const text = dom.check.isEmptyLine(line) ? this.resolveLinePlaceholder(line, opt) : '';
+		const target = text ? line : null;
 
 		const prevMarkers = wysiwyg.querySelectorAll('.se-placeholder-line');
 		for (let i = 0; i < prevMarkers.length; i++) {

package/src/core/schema/frameContext.js

@@ -34,7 +34,7 @@ import { get as getNumber } from '../../helper/numbers';
  * @property {HTMLTextAreaElement} markdown - Markdown view editing element (a <textarea>).
  * @property {HTMLTextAreaElement} markdownNumbers - Element displaying line numbers in markdown view mode.
  * @property {HTMLElement} placeholder - Placeholder element shown when the editor is empty.
- * @property {string} placeholder_line - Per-line placeholder text, rendered via a `::before` on the focused empty line.
+ * @property {string|Object<string, string>} placeholder_line - Per-line placeholder text, rendered via a `::before` on the focused empty line.
  * @property {HTMLElement} statusbar - Editor status bar element (for resizing, info, etc.).
  * @property {HTMLElement} navigation - Navigation element (e.g., for outline or bookmarks).
  * @property {HTMLElement} charWrapper - Wrapper for the character counter element.

package/src/core/schema/options.js

@@ -104,8 +104,22 @@ export const DEFAULTS = {
  * === Content & Editing ===
  * @property {string} [value=""] - Initial value for the editor.
  * @property {string} [placeholder=""] - Placeholder text shown when the whole editor is empty.
- * @property {string} [placeholder_line=""] - per-line placeholder shown on the focused
+ * @property {string|Object<string, string>} [placeholder_line=""] - per-line placeholder shown on the focused
  * line when that line is empty. Takes priority over `placeholder` while a line is focused.
+ * - **string**: one hint for every empty line (list cells and table cells excluded).
+ * - **object**: per-type hints keyed by tag name (`p`, `pre`, `blockquote`, ...) or a category sentinel
+ * matching the editor's format classification: `@line`, `@normalLine`, `@list`, `@brLine`, `@closureBrLine`,
+ * `@block`, `@closureBlock`. Resolved most-specific → least, like `tagStyles`:
+ * `<tag>` → `@list` → `@closureBrLine` → `@brLine` → block container (`<blockTag>` → `@closureBlock` → `@block`)
+ * → `@normalLine` → `@line`. A missing key = no placeholder for that type; an explicit `''` suppresses it.
+ * ```js
+ * // one hint everywhere
+ * placeholder_line: 'Type something…'
+ * // per-type
+ * placeholder_line: {
+ *   '@normalLine': 'Type…', '@list': 'List item', '@block': 'Quote…', '@closureBlock': 'Cell', pre: '// code'
+ * }
+ * ```
  * @property {Object<string, string>} [editableFrameAttributes={spellcheck: "false"}] - Attributes for the editable frame[.sun-editor-editable].
  * ```js
  * { editableFrameAttributes: { spellcheck: 'true', autocomplete: 'on' } }
@@ -313,9 +327,25 @@ export const DEFAULTS = {
  *   menu: [
  *     'p', 'heading', 'blockStyle',
  *     { title: 'Duplicate', icon: 'copy', action: ($, { block }) => block.after(block.cloneNode(true)) },
+ *     // `'table'` as a string opens the size picker; a custom item inserts a default table directly
+ *     { title: 'Table', icon: 'table', action: ($) => $.plugins.table.insert(3, 3) },
  *   ],
  * }
  * ```
+ * @property {string} [blockHandle.maxHeight=""] - Max height of the menu list. Any CSS length; the list scrolls past it.
+ * - Unset by default: the menu grows with its items and is only clamped when it would overflow the viewport.
+ * @property {string} [blockHandle.minWidth="200px"] - Min width of the menu.
+ * @property {function(SunEditor.Deps, { block: HTMLElement, openMenu: function(): void }): void} [blockHandle.onPlusClick] - Runs after the plus button inserted a new line.
+ * - Adding the line is fixed behavior; this hook decides what happens next. Nothing does by default.
+ * - `block` is the new line, already focused. `openMenu()` opens the block handle's own `menu`.
+ * ```js
+ * blockHandle: {
+ *   // open the block handle menu
+ *   onPlusClick: ($, { openMenu }) => openMenu(),
+ *   // ...or the slash command menu
+ *   onPlusClick: ($, { block }) => $.plugins.slashCommand.open(block),
+ * }
+ * ```
  * @property {string} [type=""] - Editor type. Use `"document"` for a document-style layout, with optional sub-types after `:`.
  * ```js
  * // type
@@ -460,6 +490,13 @@ export const DEFAULTS = {
  * - Formats that include `line`, such as "Quote", still operate on a `line` basis.
  * - suneditor processes work in `line` units.
  * - When set to `br`, performance may decrease when editing a lot of data.
+ * @property {boolean} [lineBreakClearStyle=false] - When `true`, pressing Enter at the **end** of a line
+ * starts a fresh line that does not carry the caret's inline style nodes (e.g. bold/italic/color spans, links);
+ * the line-level element and its attributes are preserved.
+ * Only affects the end-of-line case — mid-line splits, start-of-line breaks, and Shift+Enter are unchanged.
+ * ```js
+ * { lineBreakClearStyle: true }
+ * ```
  * @property {string} [lineAttrReset=""] - Line properties that should be reset when changing lines. Delimiter: `"|"`.
  * ```js
  * { lineAttrReset: 'id|name' }
@@ -510,12 +547,16 @@ export const DEFAULTS = {
  * { toolbar_innerWidth: 'auto' }
  * ```
  * @property {?HTMLElement} [toolbar_container] - Container element for the toolbar.
- * @property {number|{top: number, offset: number}} [toolbar_sticky=0] - Enables sticky toolbar.
+ * @property {number|{top: number, offset?: number, position?: "sticky"|"fixed"}} [toolbar_sticky=0] - Enables sticky toolbar.
  * - `number`: Sets the sticky top position (px). Use `-1` to disable sticky.
  * - `{top, offset}`: `top` is the sticky position when the page header is visible.
  * - `offset` is the sticky position when a virtual keyboard shifts the viewport (e.g., on tablets, touch devices).
  * - When the virtual keyboard is active, `offset` replaces `top` so the toolbar doesn't leave a gap
  * - for a page header that has scrolled out of view. Default `offset` is `0`.
+ * - `position` (default `"sticky"`): the positioning engine.
+ * - `"sticky"` uses native CSS `position: sticky` (with a JS `position: fixed` fallback where unsupported).
+ * `"fixed"` forces the JS `position: fixed` engine
+ * - even when CSS sticky is supported — for environments where CSS sticky silently misbehaves and can't be
  * ```js
  * // Basic usage — sticky at top with 0px offset
  * toolbar_sticky: 0
@@ -525,6 +566,9 @@ export const DEFAULTS = {
  *
  * // 92px header on desktop, but 0px when virtual keyboard pushes the viewport
  * toolbar_sticky: { top: 92, offset: 0 }
+ *
+ * // Force the JS position:fixed engine (CSS sticky unreliable in this environment)
+ * toolbar_sticky: { top: 0, position: 'fixed' }
  * ```
  * @property {boolean} [toolbar_hide=false] - Hides toolbar initially.
  * @property {Object} [subToolbar={}] - Sub-toolbar configuration. A secondary toolbar that appears on text selection.
@@ -776,6 +820,7 @@ export const OPTION_FIXED_FLAG = {
 	printClass: true,
 	defaultLine: 'fixed',
 	defaultLineBreakFormat: true,
+	lineBreakClearStyle: true,
 	scopeSelectionTags: true,
 	__defaultElementWhitelist: 'fixed',
 	elementWhitelist: 'fixed',
@@ -822,7 +867,7 @@ export const OPTION_FIXED_FLAG = {
 };
 
 /**
- * @typedef {'formatClosureBrLine' | 'formatBrLine' | 'formatLine' | 'formatClosureBlock' | 'formatBlock' | 'toolbar_width' | 'toolbar_container' | '_toolbar_sticky' | '_toolbar_sticky_offset' | 'strictMode' | 'lineAttrReset'} TransformedOptionKeys
+ * @typedef {'formatClosureBrLine' | 'formatBrLine' | 'formatLine' | 'formatClosureBlock' | 'formatBlock' | 'toolbar_width' | 'toolbar_container' | '_toolbar_sticky' | '_toolbar_sticky_offset' | '_toolbar_sticky_fixed' | 'strictMode' | 'lineAttrReset'} TransformedOptionKeys
  */
 
 /**
@@ -846,6 +891,7 @@ export const OPTION_FIXED_FLAG = {
  * @property {HTMLElement|null} toolbar_container
  * @property {number} _toolbar_sticky
  * @property {number} _toolbar_sticky_offset
+ * @property {boolean} _toolbar_sticky_fixed
  * @property {StrictModeOptions} strictMode
  * @property {string[]} lineAttrReset
  */

package/src/core/section/constructor.js

@@ -44,12 +44,16 @@ function Constructor(editorTargets, options) {
 	if (options.plugins) {
 		const excludedPlugins = options.excludedPlugins || [];
 		const originPlugins = options.plugins;
-		const pluginsValues = (Array.isArray(originPlugins) ? originPlugins : Object.keys(originPlugins))
-			.filter((name) => !excludedPlugins.includes(name))
-			.map((name) => originPlugins[name]);
-
-		for (let i = 0, len = pluginsValues.length, p; i < len; i++) {
-			p = pluginsValues[i].default || pluginsValues[i];
+		const pluginsEntries = Array.isArray(originPlugins)
+			? originPlugins.map((plugin) => [null, plugin])
+			: Object.keys(originPlugins).map((name) => [name, originPlugins[name]]);
+
+		for (let i = 0, len = pluginsEntries.length, name, p; i < len; i++) {
+			name = pluginsEntries[i][0];
+			p = pluginsEntries[i][1];
+			p = p?.default || p;
+			if (!p?.key) continue;
+			if (excludedPlugins.includes(p.key) || (name !== null && excludedPlugins.includes(name))) continue;
 			plugins[p.key] = p;
 		}
 	}
@@ -89,7 +93,7 @@ function Constructor(editorTargets, options) {
 			style: 'position: fixed !important; top: -10000px !important; left: -10000px !important; display: block !important; width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important;',
 		})
 	);
-	focusTemp.tabIndex = 0;
+	focusTemp.tabIndex = -1;
 	editor_carrier_wrapper.appendChild(focusTemp);
 
 	// modal
@@ -749,6 +753,7 @@ export function InitOptions(options, editorTargets, plugins) {
 		typeof options.defaultLine === 'string' && options.defaultLine.length > 0 ? options.defaultLine : 'p',
 	);
 	o.set('defaultLineBreakFormat', options.defaultLineBreakFormat || 'line');
+	o.set('lineBreakClearStyle', !!options.lineBreakClearStyle);
 	o.set('scopeSelectionTags', options.scopeSelectionTags || DEFAULTS.SCOPE_SELECTION_TAGS);
 	// element
 	const elw = (typeof options.elementWhitelist === 'string' ? options.elementWhitelist : '').toLowerCase();
@@ -893,12 +898,15 @@ export function InitOptions(options, editorTargets, plugins) {
 	if (_isBalloon) {
 		o.set('_toolbar_sticky', -1);
 		o.set('_toolbar_sticky_offset', 0);
+		o.set('_toolbar_sticky_fixed', false);
 	} else if (_stickyOpt !== null && typeof _stickyOpt === 'object') {
 		o.set('_toolbar_sticky', numbers.get(_stickyOpt.top, 0));
 		o.set('_toolbar_sticky_offset', numbers.get(_stickyOpt.offset, 0));
+		o.set('_toolbar_sticky_fixed', _stickyOpt.position === 'fixed');
 	} else {
 		o.set('_toolbar_sticky', _stickyOpt === undefined ? 0 : numbers.is(_stickyOpt) ? _stickyOpt : -1);
 		o.set('_toolbar_sticky_offset', 0);
+		o.set('_toolbar_sticky_fixed', false);
 	}
 
 	o.set('toolbar_hide', !!options.toolbar_hide);
@@ -917,7 +925,7 @@ export function InitOptions(options, editorTargets, plugins) {
 				'toolbar_sub_width',
 				subbar.width ? (numbers.is(subbar.width) ? subbar.width + 'px' : subbar.width) : 'auto',
 			);
-			subButtons = o.get('_rtl') ? subbar.buttonList.reverse() : subbar.buttonList;
+			subButtons = subbar.buttonList;
 			o.set('buttons_sub', new Set(subButtons.toString().split(',')));
 		}
 	}
@@ -1050,7 +1058,7 @@ export function InitOptions(options, editorTargets, plugins) {
 		i: icons,
 		l: /** @type {Object<string, string>} */ (options.lang || _defaultLang),
 		v: (options.value = typeof options.value === 'string' ? options.value : null),
-		buttons: o.get('_rtl') ? buttonList.reverse() : buttonList,
+		buttons: buttonList,
 		subButtons: subButtons,
 		statusbarContainer:
 			typeof options.statusbar_container === 'string'

package/src/modules/contract/Controller.js

@@ -8,6 +8,11 @@ const INDEX_S_1 = '2147483642';
 const INDEX_1 = '2147483641';
 const ADD_OFFSET_VALUE = { left: 0, right: 0, top: 0 };
 
+/**
+ * @type {?Controller}
+ */
+let _topHoverController = null;
+
 /**
  * Controller information object
  * @typedef {Object} ControllerInfo
@@ -414,6 +419,7 @@ class Controller {
 	 * @description Hide controller at editor area (link button, image resize button..)
 	 */
 	#controllerOff() {
+		if (_topHoverController === this) _topHoverController = null;
 		this.form.hidePopover?.();
 		this.form.style.display = 'none';
 		this.#$.ui.opendControllers = this.#$.ui.opendControllers.filter((v) => v.form !== this.form);
@@ -586,6 +592,14 @@ class Controller {
 
 		const eventTarget = dom.query.getEventTarget(e);
 		eventTarget.style.zIndex = this.toTop ? INDEX_00 : INDEX_0;
+
+		// The z-index above governs only the no-popover fallback. In the popover top layer, stacking follows
+		// show order — so to lift the hovered controller (and its tooltips) above an overlapping sibling, re-show it.
+		if (this.sibling && _topHoverController !== this && this.form.matches?.(':popover-open')) {
+			_topHoverController = this;
+			this.form.hidePopover();
+			this.form.showPopover();
+		}
 	}
 
 	/**

package/src/modules/contract/Figure.js

@@ -1,7 +1,7 @@
 import Controller from './Controller';
 import SelectMenu from '../ui/SelectMenu';
 import { _DragHandle } from '../ui/_DragHandle';
-import { dom, numbers, env, converter, keyCodeMap } from '../../helper';
+import { dom, numbers, env, converter, keyCodeMap, unicode } from '../../helper';
 
 const { _w, ON_OVER_COMPONENT } = env;
 const DIRECTION_CURSOR_MAP = {
@@ -975,10 +975,13 @@ class Figure {
 	retainFigureFormat(container, originEl, anchorCover, fileManagerInst) {
 		const isInline = this.#$.component.isInline(container);
 		const originParent = originEl.parentNode;
+		const isBareWrapper =
+			originParent.children?.length === 1 &&
+			!originParent.textContent.replace(unicode.zeroWidthRegExp, '').trim();
 		let existElement =
 			this.#$.format.isBlock(originParent) || dom.check.isWysiwygFrame(originParent) || originParent.nodeType >= 9
 				? originEl
-				: Figure.GetContainer(originEl)?.container || originParent || originEl;
+				: Figure.GetContainer(originEl)?.container || (isBareWrapper ? originParent : originEl);
 
 		if (dom.query.getParentElement(originEl, dom.check.isExcludeFormat)) {
 			existElement = anchorCover && anchorCover !== originEl ? anchorCover : originEl;