suneditor 3.3.0 → 3.3.1

package/src/modules/ui/SelectMenu.js

@@ -16,9 +16,10 @@ const MENU_MIN_HEIGHT = 38;
  * @property {number} [splitNum=0] Optional split number for horizontal positioning; defines how many items per row
  * @property {() => void} [openMethod] Optional method to call when the menu is opened
  * @property {() => void} [closeMethod] Optional method to call when the menu is closed
- * @property {() => boolean} [subEscMethod] Optional owner hook invoked on ESC before the menu closes.
- * Return `true` if it dismissed an owner-managed sub-panel (e.g. CommandMenu's flyout), so ESC only
- * closes that sub-panel and keeps the menu open.
+ * @property {() => boolean} [subEscMethod] Optional owner hook that dismisses an owner-managed sub-panel (e.g. CommandMenu's dropdown-free flyout) and puts the cursor back on its row.
+ * Return `true` when a sub-panel was actually dismissed.
+ * @property {(index: number) => boolean} [subCheckMethod] Optional owner hook answering "does the row at `index` own a sub-panel?".
+ * - A query only — it must not open anything.
  * @property {string} [maxHeight] Optional max-height CSS value (e.g. `"200px"`). Enables scrolling when items exceed this height.
  * @property {string} [minWidth] Optional min-width CSS value (e.g. `"130px"`).
  * @property {*} [keydownTarget]  Optional override for the keyboard navigation target. By default `on()` listens
@@ -41,6 +42,7 @@ class SelectMenu {
 	#eventHandlers;
 	#globalEventHandlers;
 
+	#listInner = null;
 	#refer = null;
 	#keydownTarget = null;
 	#keydownTargetOverride = null;
@@ -86,6 +88,7 @@ class SelectMenu {
 		this.openMethod = params.openMethod;
 		this.closeMethod = params.closeMethod;
 		this.subEscMethod = params.subEscMethod || null;
+		this.subCheckMethod = params.subCheckMethod || null;
 		this.maxHeight = params.maxHeight || '';
 		this.minWidth = params.minWidth || '';
 		this.#keydownTargetOverride = params.keydownTarget || null;
@@ -135,7 +138,7 @@ class SelectMenu {
 	 * );
 	 */
 	create(items, menus) {
-		this.form.firstElementChild.innerHTML = '';
+		this.#listInner.innerHTML = '';
 
 		// remove existing submenu elements from form
 		for (const [, data] of this.#submenuData) {
@@ -228,6 +231,8 @@ class SelectMenu {
 			'<div class="se-list-inner"' + (innerStyle ? ' style="' + innerStyle + '"' : '') + '></div>',
 		);
 
+		this.#listInner = /** @type {HTMLElement} */ (this.form.firstElementChild);
+
 		referElement.parentNode.insertBefore(this.form, referElement);
 	}
 
@@ -247,7 +252,7 @@ class SelectMenu {
 	 * selectMenu.open('', '[data-command="' + this.align + '"]');
 	 */
 	open(position, onItemQuerySelector) {
-		this.#$.ui.selectMenuOn = true;
+		this.#$.ui.setSelectMenuOpen(this, true);
 
 		this.openMethod?.();
 
@@ -298,10 +303,11 @@ class SelectMenu {
 	 * @description Select menu close
 	 */
 	close() {
-		this.#$.ui.selectMenuOn = false;
+		this.#$.ui.setSelectMenuOpen(this, false);
 		dom.utils.removeClass(this.#refer, 'on');
 		this.#init();
 		this.form?.removeAttribute('style');
+		if (this.#listInner) this.#resetClamp();
 		this.isOpen = false;
 
 		this.closeMethod?.();
@@ -521,7 +527,7 @@ class SelectMenu {
 	 * @param {string} html - The HTML string representing the menu items.
 	 */
 	#createFormat(html) {
-		this.form.firstElementChild.innerHTML += `<ul class="se-list-basic se-list-checked${this.horizontal ? ' se-list-horizontal' : ''}">${html}</ul>`;
+		this.#listInner.innerHTML += `<ul class="se-list-basic se-list-checked${this.horizontal ? ' se-list-horizontal' : ''}">${html}</ul>`;
 	}
 
 	/**
@@ -551,6 +557,44 @@ class SelectMenu {
 		this.#selectItem(selectIndex);
 	}
 
+	/**
+	 * @description Restores the list box to its `maxHeight` param, dropping any previous viewport clamp.
+	 * - `#setPosition` may run twice (the `_re` retry), so the clamp must not accumulate.
+	 */
+	#resetClamp() {
+		this.form.style.height = '';
+		this.#listInner.style.maxHeight = this.maxHeight;
+		this.#listInner.style.overflowY = this.maxHeight ? 'auto' : '';
+	}
+
+	/**
+	 * @description Clamps the menu to `h` when it doesn't fit the viewport.
+	 * @param {number} h - Target form height in px.
+	 */
+	#clampHeight(h) {
+		const chrome = this.form.offsetHeight - this.#listInner.offsetHeight; // padding + border
+		this.form.style.height = h + 'px';
+		this.#listInner.style.maxHeight = (h - chrome > 0 ? h - chrome : 0) + 'px';
+		this.#listInner.style.overflowY = 'auto';
+	}
+
+	/**
+	 * @description Scrolls the list so the given item is fully visible.
+	 * @param {Element} item - The item element to reveal.
+	 */
+	#scrollToItem(item) {
+		if (!item) return;
+
+		const list = this.#listInner;
+		if (!list.style.maxHeight) return;
+		const top = list.getBoundingClientRect().top + list.clientTop;
+		const bottom = top + list.clientHeight;
+		const { top: itemTop, bottom: itemBottom } = item.getBoundingClientRect();
+
+		if (itemTop < top) list.scrollTop -= top - itemTop;
+		else if (itemBottom > bottom) list.scrollTop += itemBottom - bottom;
+	}
+
 	/**
 	 * @description Highlights and selects an item by index.
 	 * @param {number} selectIndex - The index of the item to select.
@@ -569,6 +613,7 @@ class SelectMenu {
 
 		this.index = selectIndex;
 		this.item = this.items[selectIndex];
+		this.#scrollToItem(this.menus[selectIndex]);
 	}
 
 	/**
@@ -584,7 +629,8 @@ class SelectMenu {
 		const target = this.#refer;
 		form.style.visibility = 'hidden';
 		form.style.display = 'block';
-		dom.utils.removeClass(form, 'se-select-menu-scroll');
+
+		this.#resetClamp();
 		dom.utils.addClass(target, 'on');
 
 		const formW = form.offsetWidth;
@@ -635,7 +681,7 @@ class SelectMenu {
 					h += formT - 4;
 					t -= formT - 4;
 				}
-				form.style.height = h + 'px';
+				this.#clampHeight(h);
 				break;
 			}
 			case 'top':
@@ -645,7 +691,7 @@ class SelectMenu {
 						break;
 					}
 					overH = targetGlobalTop - 4 + sideAddH;
-					if (overH >= MENU_MIN_HEIGHT) form.style.height = overH + 'px';
+					if (overH >= MENU_MIN_HEIGHT) this.#clampHeight(overH);
 				}
 				t = targetOffsetTop - form.offsetHeight + sideAddH;
 				break;
@@ -656,7 +702,7 @@ class SelectMenu {
 						break;
 					}
 					overH = wbottom - 4 + sideAddH;
-					if (overH >= MENU_MIN_HEIGHT) form.style.height = overH + 'px';
+					if (overH >= MENU_MIN_HEIGHT) this.#clampHeight(overH);
 				}
 				t = targetOffsetTop + (side ? 0 : targetHeight);
 				break;
@@ -708,7 +754,7 @@ class SelectMenu {
 		}
 
 		if (onItemQuerySelector) {
-			const item = form.firstElementChild.querySelector(onItemQuerySelector);
+			const item = this.#listInner.querySelector(onItemQuerySelector);
 			if (item) {
 				this._onItem = item;
 				dom.utils.addClass(item, 'se-select-on');
@@ -794,22 +840,18 @@ class SelectMenu {
 					this.#moveSubmenuItem(1);
 					return;
 				case 'ArrowLeft':
+				case 'ArrowRight': {
 					e.preventDefault();
 					e.stopPropagation();
-					// exit submenu back to parent
-					this.#inSubmenu = false;
-					this.#submenuItemIndex = -1;
-					{
-						const subData = this.#submenuData.get(this.#activeSubmenuIndex);
-						if (subData?.element)
-							dom.utils.removeClass(
-								subData.element.querySelectorAll('.se-select-item'),
-								'se-select-cursor',
-							);
-					}
+					// Close the submenu and put the cursor back on its trigger row — the same thing ESC
+					// does. Either direction closes, so the gesture reads the same in LTR and RTL and
+					// there is no writing-direction branch to keep in sync.
+					const parentIndex = this.#activeSubmenuIndex;
+					this.#closeSubmenu();
+					if (parentIndex > -1) this.#selectItem(parentIndex);
 					return;
+				}
 				case 'Enter':
-				case 'Space':
 					if (this.#submenuItemIndex > -1) {
 						e.preventDefault();
 						e.stopPropagation();
@@ -841,24 +883,40 @@ class SelectMenu {
 					moveIndex = 1;
 				}
 				break;
-			case 'ArrowLeft': // left
-				e.preventDefault();
-				e.stopPropagation();
-				moveIndex = -1;
-				break;
-			case 'ArrowRight': // right — enter submenu if available
+			case 'ArrowLeft':
+			case 'ArrowRight':
 				e.preventDefault();
 				e.stopPropagation();
-				if (this.index > -1 && this.#submenuData.has(this.index)) {
-					this.#openSubmenu(this.index);
-					this.#inSubmenu = true;
-					this.#moveSubmenuItem(1);
+
+				if (this.#activeSubmenuIndex > -1) {
+					const parentIndex = this.#activeSubmenuIndex;
+					this.#closeSubmenu();
+					this.#selectItem(parentIndex);
 					return;
 				}
-				moveIndex = 1;
+
+				if (this.subEscMethod?.()) return;
+
+				if (this.index > -1) {
+					if (this.#submenuData.has(this.index)) {
+						this.#openSubmenu(this.index);
+						this.#inSubmenu = true;
+						this.#moveSubmenuItem(1);
+						return;
+					}
+
+					if (this.subCheckMethod?.(this.index)) {
+						this.#select(this.index);
+						return;
+					}
+				}
+
+				if (!this.horizontal) return;
+
+				moveIndex = e.code === 'ArrowLeft' ? -1 : 1;
+
 				break;
 			case 'Enter':
-			case 'Space': // enter, space
 				if (this.index > -1) {
 					e.preventDefault();
 					e.stopPropagation();
@@ -875,6 +933,9 @@ class SelectMenu {
 
 		if (moveIndex) {
 			this.#closeSubmenu();
+			// Moving off a row must take its sub-panel with it, otherwise the flyout stays open while the
+			// cursor is somewhere else entirely.
+			this.subEscMethod?.();
 			this.#moveItem(moveIndex);
 		}
 	}

package/src/plugins/dropdown/table/index.js

@@ -924,9 +924,24 @@ class Table extends PluginDropdownFree {
 	 * @description Executes the selected action when the table picker is clicked.
 	 */
 	#OnClickTablePicker() {
+		this.insert(this.#tableXY[0], this.#tableXY[1]);
+	}
+
+	/**
+	 * @description Insert a table of the given size at the caret and place the caret in its first cell.
+	 * @param {number} [cols=3] - Column count
+	 * @param {number} [rows=3] - Row count
+	 * @returns {boolean} `true` when the table was inserted
+	 * @example
+	 * // insert a 3x3 table without going through the size picker
+	 * editor.plugins.table.insert();
+	 * editor.plugins.table.insert(4, 2);
+	 */
+	insert(cols, rows) {
+		const x = cols > 0 ? cols : Constants.DEFAULT_SIZE[0];
+		const y = rows > 0 ? rows : Constants.DEFAULT_SIZE[1];
+
 		const oTable = dom.utils.createElement('TABLE');
-		const x = this.#tableXY[0];
-		const y = this.#tableXY[1];
 
 		const body = `<tbody>${`<tr>${CreateCellsString('td', x)}</tr>`.repeat(y)}</tbody>`;
 		const colGroup = `<colgroup>${`<col style="width: ${numbers.get(100 / x, Constants.CELL_DECIMAL_END)}%;">`.repeat(x)}</colgroup>`;
@@ -945,12 +960,14 @@ class Table extends PluginDropdownFree {
 		figure.appendChild(oTable);
 		this.#maxWidth = true;
 
-		if (this.$.component.insert(figure, { insertBehavior: 'none' })) {
-			this.#resetTablePicker();
-			this.$.menu.dropdownOff();
-			const target = oTable.querySelector('td div');
-			this.$.selection.setRange(target, 0, target, 0);
-		}
+		if (!this.$.component.insert(figure, { insertBehavior: 'none' })) return false;
+
+		this.#resetTablePicker();
+		this.$.menu.dropdownOff();
+		const target = oTable.querySelector('td div');
+		this.$.selection.setRange(target, 0, target, 0);
+
+		return true;
 	}
 
 	/**

package/src/plugins/dropdown/table/shared/table.constants.js

@@ -2,6 +2,8 @@ export const ROW_SELECT_MARGIN = 6;
 export const CELL_SELECT_MARGIN = 6;
 export const CELL_DECIMAL_END = 0;
 
+export const DEFAULT_SIZE = [3, 3];
+
 export const RESIZE_CELL_CLASS = '.se-table-resize-line';
 export const RESIZE_CELL_PREV_CLASS = '.se-table-resize-line-prev';
 export const RESIZE_ROW_CLASS = '.se-table-resize-row';

package/src/plugins/field/slashCommand.js

@@ -31,7 +31,10 @@ const { debounce } = converter;
  *   (plugin names, built-in commands like `'bold'`); objects are custom items with their own `action`.
  *   Required.
  * @property {number} [delayTime=120] - Debounce delay (ms) before the input is inspected for the trigger.
- * @property {number} [limitSize=10] - Maximum number of items shown in the dropdown.
+ * @property {number} [limitSize=0] - Maximum number of items kept after filtering. `0` (default) keeps every match
+ *   - the list scrolls within `maxHeight`, so a cap only hides matches the user can no longer reach.
+ * @property {string} [maxHeight='320px'] - Max height of the menu list. Any CSS length; the list scrolls past it.
+ * @property {string} [minWidth='200px'] - Min width of the menu.
  * @property {string} [emptyMessage] - Message shown when no items match the query. If unset, the menu closes on no match.
  * @property {function(SlashCommandItem, { icons: Object }): string} [renderItem] - Custom item HTML renderer.
  *   Applied only to custom item objects; plugin-name entries always render with the canonical BlockHandle row.
@@ -64,6 +67,15 @@ const { debounce } = converter;
  *         // A container block (BLOCKQUOTE, DIV…): `applyBlock` WRAPS the selected lines → `<blockquote>…</blockquote>`.
  *         action: ($) => $.format.applyBlock(document.createElement('BLOCKQUOTE')),
  *       },
+ *       {
+ *         key: 'table',
+ *         title: 'Table',
+ *         icon: 'table',
+ *         // A plugin-name entry (`'table'`) opens that plugin's own UI — for table, the size picker,
+ *         // which is driven by the pointer. A custom item skips it and inserts straight away, which
+ *         // keeps the whole gesture on the keyboard: type the trigger, press Enter, done.
+ *         action: ($) => $.plugins.table.insert(3, 3),
+ *       },
  *       'bold',
  *       'image',
  *       'blockStyle',
@@ -111,7 +123,9 @@ class SlashCommand extends PluginField {
 				? pluginOptions.triggerChar
 				: '/';
 		this.#limitSize =
-			typeof pluginOptions.limitSize === 'number' && pluginOptions.limitSize > 0 ? pluginOptions.limitSize : 10;
+			typeof pluginOptions.limitSize === 'number' && pluginOptions.limitSize > 0
+				? pluginOptions.limitSize
+				: Infinity;
 		this.#emptyMessage = typeof pluginOptions.emptyMessage === 'string' ? pluginOptions.emptyMessage : '';
 		const delayTime = typeof pluginOptions.delayTime === 'number' ? pluginOptions.delayTime : 120;
 
@@ -119,11 +133,12 @@ class SlashCommand extends PluginField {
 			items: Array.isArray(pluginOptions.items) ? pluginOptions.items : [],
 			resolveButton: ResolveButton,
 			renderCustomItem: typeof pluginOptions.renderItem === 'function' ? pluginOptions.renderItem : null,
+			prepareCommit: () => this.#removeTrigger(),
 			selectMenuParams: {
 				position: 'bottom-left',
 				dir: 'ltr',
-				minWidth: '200px',
-				maxHeight: '320px',
+				minWidth: typeof pluginOptions.minWidth === 'string' ? pluginOptions.minWidth : '200px',
+				maxHeight: typeof pluginOptions.maxHeight === 'string' ? pluginOptions.maxHeight : '320px',
 				closeMethod: () => this.#onMenuClose(),
 			},
 		});
@@ -219,6 +234,32 @@ class SlashCommand extends PluginField {
 		this.#cacheAnchor(anchorNode, lastPos, anchorOffset);
 	}
 
+	/**
+	 * @description Open the command menu programmatically, with no trigger character typed and the full tem list shown.
+	 * - Intended for host UI that wants the same menu without the `/` shortcut — e.g. the
+	 * - block handle's plus button:
+	 * ```js
+	 * blockHandle: { onPlusClick: ($, { block }) => $.plugins.slashCommand.open(block) }
+	 * ```
+	 * @param {Node} anchorNode - Node the menu anchors to (typically the line the caret sits on).
+	 * @returns {boolean} `true` if the menu was opened
+	 */
+	open(anchorNode) {
+		if (!anchorNode) return false;
+
+		const filtered = this.#menu.filter('', this.#limitSize);
+		if (filtered.length === 0) return false;
+
+		this.controller.open(anchorNode, null, { isWWTarget: true, initMethod: null, addOffset: null });
+		this.#menu.createRows(filtered);
+		this.#menu.open();
+		this.#menu.setItem(0);
+
+		this.#cacheAnchor(anchorNode, 0, 0);
+
+		return true;
+	}
+
 	/**
 	 * @description Close the menu from the plugin itself (invalid query, or after a selection). Flags
 	 * the close as internal so `#onMenuClose` does not treat it as a user dismiss.
@@ -289,17 +330,23 @@ class SlashCommand extends PluginField {
 		if (!anchorNode) return false;
 
 		const triggerChar = this.#triggerChar;
-		const query = anchorNode.textContent.substring(this.#lastTriggerPos + triggerChar.length, this.#anchorOffset);
-
-		// Remove the trigger + query, leaving the caret at the trigger position so the action
-		// (insert block, run command, etc.) operates from a clean cursor.
-		this.$.selection.setRange(anchorNode, this.#lastTriggerPos, anchorNode, this.#anchorOffset);
-		const range = this.$.selection.getRange();
-		if (range && !range.collapsed) this.$.html.remove();
+		const query = (anchorNode.textContent || '').substring(
+			this.#lastTriggerPos + triggerChar.length,
+			this.#anchorOffset,
+		);
 
-		this.#closeMenu();
+		if (item.kind !== 'dropdownFree') {
+			this.#removeTrigger();
+			this.#closeMenu();
+			this.#menu.dispatch(item, { triggerChar, query, item: item.raw });
+			return;
+		}
 
+		// `dispatch` toggles, so picking the row whose flyout is already up (hovered, then picked) closes
+		// it and keeps the menu — as BlockHandle does. Only a flyout that never opened leaves nothing to show.
+		const hadSubPanel = this.#menu.hasOpenSubPanel();
 		this.#menu.dispatch(item, { triggerChar, query, item: item.raw });
+		if (!hadSubPanel && !this.#menu.hasOpenSubPanel()) this.#closeMenu();
 	}
 }
 

package/types/core/logic/panel/blockHandle.d.ts

@@ -12,9 +12,8 @@ declare 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(
 		$: SunEditor.Deps,
@@ -22,19 +21,7 @@ declare class BlockHandle {
 		blockHandle: HTMLElement,
 		blockHandlePlus: HTMLElement,
 		blockHandleDrag: HTMLElement,
-		menuConfig: Array<
-			| string
-			| {
-					title: string;
-					icon?: string;
-					action: (
-						arg0: SunEditor.Deps,
-						arg1: {
-							block: HTMLElement;
-						},
-					) => void;
-			  }
-		> | null,
+		blockHandleOptions: any | Array<any> | null,
 	);
 	/**
 	 * @description Position the block handle for the given mouse target. Uses rAF throttle.

package/types/core/logic/shell/ui.d.ts

@@ -15,11 +15,6 @@ declare class UIManager {
 	toastPopup: HTMLElement;
 	toastContainer: Element;
 	toastMessage: HTMLSpanElement;
-	/**
-	 * @description Whether `SelectMenu` is open
-	 * @type {boolean}
-	 */
-	selectMenuOn: boolean;
 	/**
 	 * @description Currently open `Controller` info array
 	 * @type {Array<SunEditor.Module.Controller.Info>}
@@ -36,6 +31,20 @@ declare class UIManager {
 	 * @type {?HTMLElement}
 	 */
 	_figureContainer: HTMLElement | 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(): boolean;
+	/**
+	 * @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: any, open: boolean): void;
 	/**
 	 * @description Set editor frame styles.
 	 * - Define the style of the edit area

package/types/core/schema/options.d.ts

@@ -270,9 +270,25 @@ export namespace 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
@@ -1056,6 +1072,15 @@ export type EditorBaseOptions = {
 					) => void;
 			  }
 		>;
+		maxHeight?: string;
+		minWidth?: string;
+		onPlusClick?: (
+			arg0: SunEditor.Deps,
+			arg1: {
+				block: HTMLElement;
+				openMenu: () => void;
+			},
+		) => void;
 	};
 	/**
 	 * - Editor type. Use `"document"` for a document-style layout, with optional sub-types after `:`.

package/types/modules/ui/CommandMenu.d.ts

@@ -111,6 +111,13 @@ export type CommandMenuParams = {
 			icons: any;
 		},
 	) => string;
+	/**
+	 * - 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.
+	 */
+	prepareCommit?: () => void;
 };
 /**
  * @typedef {Object} CommandMenuItem
@@ -148,6 +155,10 @@ export type CommandMenuParams = {
  * @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.
  */
 /**
  * @class

package/types/modules/ui/SelectMenu.d.ts

@@ -31,11 +31,15 @@ export type SelectMenuParams = {
 	 */
 	closeMethod?: () => void;
 	/**
-	 * Optional owner hook invoked on ESC before the menu closes.
-	 * Return `true` if it dismissed an owner-managed sub-panel (e.g. CommandMenu's flyout), so ESC only
-	 * closes that sub-panel and keeps the menu open.
+	 * Optional owner hook that dismisses an owner-managed sub-panel (e.g. CommandMenu's dropdown-free flyout) and puts the cursor back on its row.
+	 * Return `true` when a sub-panel was actually dismissed.
 	 */
 	subEscMethod?: () => boolean;
+	/**
+	 * Optional owner hook answering "does the row at `index` own a sub-panel?".
+	 * - A query only — it must not open anything.
+	 */
+	subCheckMethod?: (index: number) => boolean;
 	/**
 	 * Optional max-height CSS value (e.g. `"200px"`). Enables scrolling when items exceed this height.
 	 */
@@ -66,9 +70,10 @@ export type SelectMenuParams = {
  * @property {number} [splitNum=0] Optional split number for horizontal positioning; defines how many items per row
  * @property {() => void} [openMethod] Optional method to call when the menu is opened
  * @property {() => void} [closeMethod] Optional method to call when the menu is closed
- * @property {() => boolean} [subEscMethod] Optional owner hook invoked on ESC before the menu closes.
- * Return `true` if it dismissed an owner-managed sub-panel (e.g. CommandMenu's flyout), so ESC only
- * closes that sub-panel and keeps the menu open.
+ * @property {() => boolean} [subEscMethod] Optional owner hook that dismisses an owner-managed sub-panel (e.g. CommandMenu's dropdown-free flyout) and puts the cursor back on its row.
+ * Return `true` when a sub-panel was actually dismissed.
+ * @property {(index: number) => boolean} [subCheckMethod] Optional owner hook answering "does the row at `index` own a sub-panel?".
+ * - A query only — it must not open anything.
  * @property {string} [maxHeight] Optional max-height CSS value (e.g. `"200px"`). Enables scrolling when items exceed this height.
  * @property {string} [minWidth] Optional min-width CSS value (e.g. `"130px"`).
  * @property {*} [keydownTarget]  Optional override for the keyboard navigation target. By default `on()` listens
@@ -104,6 +109,7 @@ declare class SelectMenu {
 	openMethod: () => void;
 	closeMethod: () => void;
 	subEscMethod: () => boolean;
+	subCheckMethod: (index: number) => boolean;
 	maxHeight: string;
 	minWidth: string;
 	/**
@@ -193,6 +199,6 @@ declare class SelectMenu {
 	 * @returns {boolean}
 	 */
 	hasOpenSubmenu(): boolean;
-	_onItem: Element;
+	_onItem: any;
 	#private;
 }

package/types/plugins/dropdown/table/index.d.ts

@@ -153,6 +153,17 @@ declare class Table extends PluginDropdownFree {
 	 * @description Closes table-related controllers and table figure
 	 */
 	_closeTableSelectInfo(): void;
+	/**
+	 * @description Insert a table of the given size at the caret and place the caret in its first cell.
+	 * @param {number} [cols=3] - Column count
+	 * @param {number} [rows=3] - Row count
+	 * @returns {boolean} `true` when the table was inserted
+	 * @example
+	 * // insert a 3x3 table without going through the size picker
+	 * editor.plugins.table.insert();
+	 * editor.plugins.table.insert(4, 2);
+	 */
+	insert(cols?: number, rows?: number): boolean;
 	#private;
 }
 import { PluginDropdownFree } from '../../../interfaces';

package/types/plugins/dropdown/table/shared/table.constants.d.ts

@@ -2,6 +2,7 @@ import type {} from '../../../../typedef';
 export const ROW_SELECT_MARGIN: 6;
 export const CELL_SELECT_MARGIN: 6;
 export const CELL_DECIMAL_END: 0;
+export const DEFAULT_SIZE: number[];
 export const RESIZE_CELL_CLASS: '.se-table-resize-line';
 export const RESIZE_CELL_PREV_CLASS: '.se-table-resize-line-prev';
 export const RESIZE_ROW_CLASS: '.se-table-resize-row';