suneditor 3.3.0 → 3.3.1

package/src/core/config/eventManager.js

@@ -20,6 +20,9 @@ class EventManager {
 	/** @type {Array<*>} */
 	#events = [];
 
+	/** @type {?Array<SunEditor.Event.GlobalInfo>} */
+	#globalEvents = [];
+
 	/**
 	 * @constructor
 	 * @param {import('./contextProvider').default} contextProvider
@@ -165,11 +168,16 @@ class EventManager {
 			this.#frameContext.get('_ww').addEventListener(type, listener, useCapture);
 		}
 		_w.addEventListener(type, listener, useCapture);
-		return {
+
+		const info = {
 			type,
 			listener,
 			useCapture,
 		};
+
+		this.#globalEvents?.push(info);
+
+		return info;
 	}
 
 	/**
@@ -193,6 +201,12 @@ class EventManager {
 		}
 		_w.removeEventListener(type, listener, useCapture);
 
+		const i =
+			this.#globalEvents?.findIndex(
+				(e) => e.type === type && e.listener === listener && e.useCapture === useCapture,
+			) ?? -1;
+		if (i > -1) this.#globalEvents.splice(i, 1);
+
 		return null;
 	}
 
@@ -218,6 +232,15 @@ class EventManager {
 		this.#events = null;
 
 		this.#geckoActiveEvent &&= this.removeGlobalEvent(this.#geckoActiveEvent);
+
+		const frameWindow = this.#frameOptions.get('iframe') ? this.#frameContext.get('_ww') : null;
+		for (let i = 0, len = this.#globalEvents.length, e; i < len; i++) {
+			e = this.#globalEvents[i];
+			frameWindow?.removeEventListener(e.type, e.listener, e.useCapture);
+			_w.removeEventListener(e.type, e.listener, e.useCapture);
+		}
+
+		this.#globalEvents = null;
 	}
 }
 

package/src/core/logic/dom/format.js

@@ -290,7 +290,7 @@ class Format {
 		const lineAttrReset = this.#options.get('lineAttrReset');
 		let newEl;
 
-		if (/^H[1-6]$|^HR$/i.test(tag)) {
+		if (/^H[1-6]$/i.test(tag) || this.#$.component.is(element)) {
 			newEl = dom.utils.createElement(this.#options.get('defaultLine'), null, '<br>');
 		} else if (this.isBrLine(element)) {
 			newEl = dom.utils.createElement(this.#options.get('defaultLine'), null, '<br>');

package/src/core/logic/dom/html.js

@@ -33,6 +33,7 @@ class HTML {
 	#disallowedTagsRegExp;
 	#disallowedTagNameRegExp;
 	#allowedTagNameRegExp;
+	#emptyLineRegExp;
 
 	/** @type {Object<string, RegExp>} */
 	#attributeWhitelist;
@@ -97,6 +98,12 @@ class HTML {
 		this.#disallowedTagNameRegExp = new RegExp(`^(${disallowedExtraTags})$`, 'i');
 		this.#allowedTagNameRegExp = new RegExp(`^(${allowedExtraTags})$`, 'i');
 
+		// empty default line probe
+		this.#emptyLineRegExp = new RegExp(
+			`<${options.get('defaultLine')}(?:\\s[^>]*)?></${options.get('defaultLine')}>`,
+			'i',
+		);
+
 		// set disallow text nodes
 		const disallowStyleNodes = Object.keys(options.get('_defaultStyleTagMap'));
 		const allowStyleNodes = !options.get('elementWhitelist')
@@ -374,6 +381,8 @@ class HTML {
 			});
 		}
 
+		if (formatFilter && !_freeCodeViewMode) cleanData = this.#dropEmptyLines(cleanData);
+
 		return cleanData;
 	}
 
@@ -1699,6 +1708,28 @@ class HTML {
 		return '';
 	}
 
+	/**
+	 * @description Drops empty default lines (`<p></p>`) from a cleaned HTML string.
+	 * Wrapping block-level content in a default line is invalid HTML, so the parser tears the line
+	 * apart and leaves caret-less debris behind. An intentionally blank line always carries `<br>`.
+	 * @param {string} html Cleaned HTML string
+	 * @returns {string} The string without empty default lines
+	 */
+	#dropEmptyLines(html) {
+		if (!this.#emptyLineRegExp.test(html)) return html;
+
+		const holder = dom.utils.createElement('DIV', null, html);
+		const lines = holder.querySelectorAll(this.#options.get('defaultLine'));
+		let removed = false;
+		for (let i = lines.length - 1; i >= 0; i--) {
+			if (lines[i].firstChild) continue;
+			dom.utils.removeItem(lines[i]);
+			removed = true;
+		}
+
+		return removed ? holder.innerHTML : html;
+	}
+
 	/**
 	 * @description Checks whether a node is a block-level container in which whitespace-only text
 	 * children are insignificant formatting whitespace (safe to drop), as opposed to an inline/line

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

@@ -37,6 +37,10 @@ class BlockHandle {
 	#plusBtn;
 	#dragBtn;
 	#menuConfig;
+	#menuMaxHeight;
+	#menuMinWidth;
+	/** @type {?function(SunEditor.Deps, { block: HTMLElement, openMenu: function(): void }): void} */
+	#onPlusClickHook;
 
 	/** @type {CommandMenu|null} */
 	#actionMenu = null;
@@ -74,17 +78,21 @@ class BlockHandle {
 	 * @param {HTMLElement} blockHandle - Handle group (.se-block-handle)
 	 * @param {HTMLElement} blockHandlePlus - Plus button
 	 * @param {HTMLElement} blockHandleDrag - Drag button
-	 * @param {Array<string | { title: string, icon?: string, action: function(SunEditor.Deps, { block: HTMLElement }): void }>|null} menuConfig
-	 *   Menu entries. Strings resolve via `ResolveButton` (plugin names, built-in commands). Objects
-	 *   define a custom row whose `action` is invoked with the Deps bag and the current block element.
+	 * @param {Object|Array<*>|null} blockHandleOptions - The `blockHandle` option object (`{ menu, onPlusClick, maxHeight, minWidth }`).
+	 * - An array is accepted as a shorthand for `{ menu: [...] }`.
 	 */
-	constructor($, blockHandleArea, blockHandle, blockHandlePlus, blockHandleDrag, menuConfig) {
+	constructor($, blockHandleArea, blockHandle, blockHandlePlus, blockHandleDrag, blockHandleOptions) {
 		this.#$ = $;
 		this.#area = blockHandleArea;
 		this.#handle = blockHandle;
 		this.#plusBtn = blockHandlePlus;
 		this.#dragBtn = blockHandleDrag;
-		this.#menuConfig = menuConfig || null;
+
+		const opts = Array.isArray(blockHandleOptions) ? { menu: blockHandleOptions } : blockHandleOptions || {};
+		this.#menuConfig = opts.menu || null;
+		this.#menuMaxHeight = typeof opts.maxHeight === 'string' ? opts.maxHeight : '';
+		this.#menuMinWidth = typeof opts.minWidth === 'string' ? opts.minWidth : '200px';
+		this.#onPlusClickHook = typeof opts.onPlusClick === 'function' ? opts.onPlusClick : null;
 
 		this.#$.contextProvider.carrierWrapper.appendChild(this.#handle);
 
@@ -579,6 +587,7 @@ class BlockHandle {
 	/**
 	 * @description Plus button click — insert new line after current block.
 	 * Mirrors Enter-at-end-of-line behavior from keydown.rule.enter.
+	 * Adding the line is the fixed behavior; `onPlusClick` decides what happens next (nothing by default).
 	 * @param {MouseEvent} e
 	 */
 	#onPlusClick(e) {
@@ -588,10 +597,20 @@ class BlockHandle {
 		if (!this.#currentBlock) return;
 
 		const newLine = this.#$.format.addLineAfter(this.#currentBlock);
-		if (newLine) {
-			this.#$.selection.setRange(newLine, 1, newLine, 1);
-			this.#$.history.push(false);
-		}
+		if (!newLine) return;
+
+		this.#$.selection.setRange(newLine, 1, newLine, 1);
+		this.#$.history.push(false);
+
+		if (!this.#onPlusClickHook) return;
+
+		this.#setCurrentBlock(newLine);
+		this.#updatePosition(newLine);
+
+		this.#onPlusClickHook(this.#$, {
+			block: newLine,
+			openMenu: () => this.#toggleActionMenu(),
+		});
 	}
 
 	/**
@@ -777,6 +796,22 @@ class BlockHandle {
 		// Skip if this click was actually a drag
 		if (this.#isDragging) return;
 
+		const componentInfo = this.#$.component.get(this.#currentBlock);
+		if (componentInfo) {
+			this.#actionMenu?.close();
+			this.#clearHoverLines();
+			this.#$.component.select(componentInfo.target, componentInfo.pluginName);
+			return;
+		}
+
+		this.#toggleActionMenu();
+	}
+
+	/**
+	 * @description Open the block action menu (or close it when already open). Shared by the drag button
+	 * and by the `openMenu` helper handed to the `onPlusClick` hook.
+	 */
+	#toggleActionMenu() {
 		if (!this.#menuConfig) return;
 
 		// Lazy build — plugins are not yet instantiated when BlockHandle is constructed
@@ -786,23 +821,24 @@ class BlockHandle {
 
 		if (this.#actionMenu.isOpen) {
 			this.#actionMenu.close();
-		} else {
-			this.#expandRangeToFullLines();
+			return;
+		}
 
-			// Highlight selected range lines
-			const lines = this.#$.format.getLines(null);
-			if (lines.length > 0) {
-				this.#setHoverLines(lines);
-			}
+		this.#expandRangeToFullLines();
 
-			// Choose open direction based on available space.
-			const btnGlobal = this.#$.offset.getGlobal(this.#dragBtn);
-			const spaceBelow = dom.utils.getClientSize().h - (btnGlobal.top - _w.scrollY + btnGlobal.height);
-			const spaceAbove = btnGlobal.top - _w.scrollY;
-			const horiz = this.#$.options.get('_rtl') ? 'left' : 'right';
-			const dir = `${horiz}-${spaceBelow >= spaceAbove ? 'bottom' : 'top'}`;
-			this.#actionMenu.open(dir);
+		// Highlight selected range lines
+		const lines = this.#$.format.getLines(null);
+		if (lines.length > 0) {
+			this.#setHoverLines(lines);
 		}
+
+		// Choose open direction based on available space.
+		const btnGlobal = this.#$.offset.getGlobal(this.#dragBtn);
+		const spaceBelow = dom.utils.getClientSize().h - (btnGlobal.top - _w.scrollY + btnGlobal.height);
+		const spaceAbove = btnGlobal.top - _w.scrollY;
+		const horiz = this.#$.options.get('_rtl') ? 'left' : 'right';
+		const dir = `${horiz}-${spaceBelow >= spaceAbove ? 'bottom' : 'top'}`;
+		this.#actionMenu.open(dir);
 	}
 
 	/**
@@ -816,7 +852,8 @@ class BlockHandle {
 			selectMenuParams: {
 				position: 'right-top',
 				dir: this.#$.options.get('_rtl') ? 'rtl' : 'ltr',
-				minWidth: '200px',
+				minWidth: this.#menuMinWidth,
+				maxHeight: this.#menuMaxHeight,
 				keydownTarget: _w,
 				closeMethod: () => {
 					dom.utils.removeClass(this.#dragBtn, 'on');

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

@@ -35,6 +35,7 @@ const TABLE_INNER_RE = /^(THEAD|TBODY|TR|TD|TH)$/;
  */
 function classifyType(el) {
 	const tag = el.nodeName;
+	if (isComponentContainer(el)) return 'component';
 	if (tag === 'P' || tag === 'DIV') return 'p';
 	if (HEADING_RE.test(tag)) return 'heading';
 	if (tag === 'LI') return 'list-item';
@@ -74,6 +75,24 @@ function isInsideComponent(node) {
 	return false;
 }
 
+/**
+ * @description Resolve a node to its outermost component container, but only when that container sits directly on the wysiwyg root.
+ * @param {Node} node
+ * @returns {HTMLElement|null} The top-level component container, or `null` if there is none
+ */
+function resolveTopLevelComponent(node) {
+	let el = node;
+	let outermost = null;
+
+	while (el && !isWysiwygFrame(el)) {
+		if (el.nodeType === 1 && isComponentContainer(/** @type {Element} */ (el)))
+			outermost = /** @type {HTMLElement} */ (el);
+		el = el.parentNode;
+	}
+
+	return outermost && outermost.parentNode && isWysiwygFrame(outermost.parentNode) ? outermost : null;
+}
+
 /**
  * @description Count block-level ancestors between element and wysiwyg root.
  * @param {HTMLElement} element
@@ -193,8 +212,10 @@ export function resolveBlock(node, format, wysiwygFrame, mouseY) {
 	// Already at wysiwyg root
 	if (isWysiwygFrame(node)) return null;
 
-	// Skip components (images, videos, etc.) — they have their own interaction
-	if (isInsideComponent(node)) return null;
+	if (isInsideComponent(node)) {
+		const component = resolveTopLevelComponent(node);
+		return component ? describeBlock(component, format, mouseY) : null;
+	}
 
 	let resolved = null;
 
@@ -248,8 +269,24 @@ export function resolveBlock(node, format, wysiwygFrame, mouseY) {
 
 	if (!resolved) return null;
 
-	// Final component check on resolved element
-	if (isInsideComponent(resolved)) return null;
+	// Final component check on the resolved element (e.g. getLine walked into a component)
+	if (isInsideComponent(resolved)) {
+		const component = resolveTopLevelComponent(resolved);
+		return component ? describeBlock(component, format, mouseY) : null;
+	}
+
+	return describeBlock(resolved, format, mouseY);
+}
+
+/**
+ * @description Build the `BlockInfo` for an already-resolved block element.
+ * @param {HTMLElement} element - Resolved block-level element
+ * @param {FormatAPI} format - Injected format methods
+ * @param {number} [mouseY] - Mouse clientY for nested list resolution
+ * @returns {BlockInfo}
+ */
+function describeBlock(element, format, mouseY) {
+	let resolved = element;
 
 	// For UL/OL, resolve to the closest child LI by mouse Y.
 	// For LI with nested sub-lists, find the deepest child LI.

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

package/src/core/schema/options.js

@@ -327,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

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;
 		}
 	}
@@ -921,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(',')));
 		}
 	}
@@ -1054,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/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;

package/src/modules/ui/CommandMenu.js

@@ -69,6 +69,10 @@ export function buildRowHTML(label, iconHTML) {
  * @property {Object} selectMenuParams - Base SelectMenu params (`position`, `minWidth`, `keydownTarget`, etc.).
  * @property {function(CommandMenuItem, { icons: Object }): string} [renderCustomItem] - Optional renderer
  *   applied to custom (object) items only. Plugin-string items always render with `buildRowHTML`.
+ * @property {function(): void} [prepareCommit] - Optional owner hook run once,
+ * - immediately before the user commits inside a dropdown-free flyout (SlashCommand uses it to delete the typed `/query`).
+ * - A native submenu gets this for free — its commit routes back through `SelectMenu`'s select callback —
+ * - but a flyout is the plugin's own DOM, so the moment has to be intercepted.
  */
 
 /**
@@ -97,8 +101,9 @@ class CommandMenu {
 
 	/** @type {Map<number, { name: string, plugin: any, li: HTMLElement }>} */
 	#freeMap = new Map();
-	/** @type {?{ dropdown: HTMLElement, plugin: any, originalParent: ?Node, anchorLi: HTMLElement, unsub: () => void }} */
+	/** @type {?{ dropdown: HTMLElement, plugin: any, originalParent: ?Node, anchorLi: HTMLElement, unsub: () => void, offCommit: () => void }} */
 	#flyoutState = null;
+	#prepareCommit = null;
 
 	/**
 	 * @type {Array<{ name: string, idx: number }>}
@@ -124,6 +129,7 @@ class CommandMenu {
 		this.#resolveButton = params.resolveButton;
 		this.#rawItems = Array.isArray(params.items) ? params.items : [];
 		this.#renderCustomItem = typeof params.renderCustomItem === 'function' ? params.renderCustomItem : null;
+		this.#prepareCommit = typeof params.prepareCommit === 'function' ? params.prepareCommit : null;
 
 		// Wrap the host's closeMethod so the flyout is always torn down with the menu.
 		const userClose = params.selectMenuParams?.closeMethod;
@@ -134,6 +140,7 @@ class CommandMenu {
 				this.#unregisterAll();
 				userClose?.();
 			},
+			subCheckMethod: (index) => this.#freeMap.has(index),
 			subEscMethod: () => {
 				if (!this.#flyoutState) return false;
 				const anchorLi = this.#flyoutState.anchorLi;
@@ -156,11 +163,12 @@ class CommandMenu {
 		this.selectMenu.on(referElement, /** @type {*} */ (onSelect), attr);
 
 		this.#$.eventManager.addEvent(this.selectMenu.form, 'mousedown', (e) => {
-			if (env.isMobile) {
+			if (env.isMobile || dom.check.isInputElement(dom.query.getEventTarget(e))) {
 				this.#$.store.set('_preventBlur', true);
-			} else {
-				e.preventDefault();
+				return;
 			}
+
+			e.preventDefault();
 		});
 
 		this.#$.eventManager.addEvent(this.selectMenu.form, 'mousemove', this.#onMenuMouseMove.bind(this));
@@ -499,13 +507,46 @@ class CommandMenu {
 		dom.utils.addClass(anchorLi, 'se-submenu-open');
 		plugin.on?.(anchorLi);
 
+		const offCommit = this.#bindFlyoutCommit(dropdown);
+
 		// dropdown-off event and unsubscribe on close (see `#closeFlyout`) rather than patching core.
 		const unsub = this.#$.menu.subscribeDropdownOff(() => {
 			this.#closeFlyout();
 			this.selectMenu.close();
 		});
 
-		this.#flyoutState = { dropdown, plugin, originalParent, anchorLi, unsub };
+		this.#flyoutState = { dropdown, plugin, originalParent, anchorLi, unsub, offCommit };
+	}
+
+	/**
+	 * @description Run the owner's `prepareCommit` on the first commit gesture inside `dropdown`.
+	 * - Text inputs are skipped: `prepareCommit` moves the caret back into the wysiwyg, which would pull
+	 * focus out of a field the user is still typing in (e.g. the color picker's hex box). Those commit
+	 * through their own submit, and the hook runs on that instead.
+	 * @param {HTMLElement} dropdown
+	 * @returns {() => void} Unbind function
+	 */
+	#bindFlyoutCommit(dropdown) {
+		if (!this.#prepareCommit) return () => {};
+
+		let done = false;
+		const onCommit = (e) => {
+			if (done) return;
+			const target = /** @type {HTMLElement} */ (dom.query.getEventTarget(e));
+			if (dom.check.isInputElement(target)) return;
+			done = true;
+			this.#prepareCommit();
+		};
+
+		dropdown.addEventListener('mousedown', onCommit, true);
+		dropdown.addEventListener('keydown', onCommit, true);
+		dropdown.addEventListener('submit', onCommit, true);
+
+		return () => {
+			dropdown.removeEventListener('mousedown', onCommit, true);
+			dropdown.removeEventListener('keydown', onCommit, true);
+			dropdown.removeEventListener('submit', onCommit, true);
+		};
 	}
 
 	/**
@@ -518,6 +559,7 @@ class CommandMenu {
 		this.#flyoutState = null;
 
 		s.unsub?.();
+		s.offCommit?.();
 		s.dropdown.style.cssText = '';
 		s.dropdown.style.display = 'none';