suneditor 3.3.0 → 3.3.2

package/src/helper/dom/domQuery.js

@@ -513,7 +513,8 @@ export function getEdgeChildNodes(first, last) {
 
 /**
  * @template {Node} T
- * @description Gets the previous sibling last child. If there is no sibling, then it'll take it from the closest ancestor with child
+ * @description Gets the previous sibling last child. If there is no sibling, then it'll take it from the closest ancestor with child.
+ * - Components (image, table, etc.) are treated as a single tag and not traversed into.
  * @param {Node} node Reference element
  * @param {?Node} [ceiling] Highest boundary allowed
  * @returns {T|null} Not found: `null`
@@ -533,14 +534,17 @@ export function getPreviousDeepestNode(node, ceiling) {
 
 	if (domCheck.isNonEditable(previousNode)) return /** @type {T} */ (/** @type {unknown} */ (previousNode));
 
-	while (previousNode.lastChild) previousNode = previousNode.lastChild;
+	while (!domCheck.isComponentContainer(previousNode) && previousNode.lastChild) {
+		previousNode = previousNode.lastChild;
+	}
 
 	return /** @type {T} */ (/** @type {unknown} */ (previousNode));
 }
 
 /**
  * @template {Node} T
- * @description Gets the next sibling first child. If there is no sibling, then it'll take it from the closest ancestor with child
+ * @description Gets the next sibling first child. If there is no sibling, then it'll take it from the closest ancestor with child.
+ * - Components (image, table, etc.) are treated as a single tag and not traversed into.
  * @param {Node} node Reference element
  * @param {?Node} [ceiling] Highest boundary allowed
  * @returns {T|null} Not found: `null`
@@ -560,7 +564,9 @@ export function getNextDeepestNode(node, ceiling) {
 
 	if (domCheck.isNonEditable(nextNode)) return /** @type {T} */ (/** @type {unknown} */ (nextNode));
 
-	while (nextNode.firstChild) nextNode = nextNode.firstChild;
+	while (!domCheck.isComponentContainer(nextNode) && nextNode.firstChild) {
+		nextNode = nextNode.firstChild;
+	}
 
 	return /** @type {T} */ (/** @type {unknown} */ (nextNode));
 }

package/src/helper/googleDocs.js

@@ -0,0 +1,40 @@
+/**
+ * @description Cleans Google Docs clipboard HTML.
+ */
+
+/** Matches the Google Docs clipboard wrapper id */
+const _RE_GUID = /id=["']?docs-internal-guid-/i;
+
+/**
+ * @description Whether the HTML string is a Google Docs clipboard payload.
+ * @param {string} html HTML string
+ * @returns {boolean}
+ */
+export function isGoogleDocs(html) {
+	return _RE_GUID.test(html);
+}
+
+/**
+ * @description Removes the Google Docs clipboard wrapper tags, keeping their children.
+ * - Only the guid-carrying inline wrappers (`b`/`span`) are unwrapped; real formatting tags inside are untouched.
+ * @param {string} html HTML string
+ * @returns {string} HTML string
+ */
+export function cleanHTML(html) {
+	const doc = new DOMParser().parseFromString(html, 'text/html');
+	const wrappers = doc.body.querySelectorAll('b[id^="docs-internal-guid-"], span[id^="docs-internal-guid-"]');
+	if (wrappers.length === 0) return html;
+
+	for (let i = 0, len = wrappers.length, w; i < len; i++) {
+		w = wrappers[i];
+		while (w.firstChild) w.parentNode.insertBefore(w.firstChild, w);
+		w.parentNode.removeChild(w);
+	}
+
+	return doc.body.innerHTML;
+}
+
+export default {
+	isGoogleDocs,
+	cleanHTML,
+};

package/src/helper/index.js

@@ -7,6 +7,7 @@ import KeyCodeMap from './keyCodeMap';
 import Clipboard from './clipboard';
 import Markdown from './markdown';
 import MSOffice from './msOffice';
+import GoogleDocs from './googleDocs';
 
 export const env = Env;
 export const unicode = Unicode;
@@ -17,6 +18,7 @@ export const keyCodeMap = KeyCodeMap;
 export const clipboard = Clipboard;
 export const markdown = Markdown;
 export const msOffice = MSOffice;
+export const googleDocs = GoogleDocs;
 
 export default {
 	env,
@@ -28,4 +30,5 @@ export default {
 	clipboard,
 	markdown,
 	msOffice,
+	googleDocs,
 };

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';
 

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();
 	}
 }