suneditor 3.2.6 → 3.3.1

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, evClick: ?SunEditor.Event.Info }} */
+	/** @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,16 +507,46 @@ class CommandMenu {
 		dom.utils.addClass(anchorLi, 'se-submenu-open');
 		plugin.on?.(anchorLi);
 
-		// Clicking inside the flyout's dropdown should dismiss both the flyout and the parent menu —
-		// matches the toolbar behavior where a click commits the selection.
-		const evClick = this.#$.eventManager.addEvent(dropdown, 'click', () =>
-			_w.setTimeout(() => {
-				this.#closeFlyout();
-				this.selectMenu.close();
-			}, 0),
-		);
+		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, offCommit };
+	}
 
-		this.#flyoutState = { dropdown, plugin, originalParent, anchorLi, evClick };
+	/**
+	 * @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);
+		};
 	}
 
 	/**
@@ -520,7 +558,8 @@ class CommandMenu {
 		if (!s) return;
 		this.#flyoutState = null;
 
-		this.#$?.eventManager.removeEvent(s.evClick);
+		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
+			case 'ArrowLeft':
+			case 'ArrowRight':
 				e.preventDefault();
 				e.stopPropagation();
-				moveIndex = -1;
-				break;
-			case 'ArrowRight': // right — enter submenu if available
-				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);
 		}
 	}
@@ -1003,6 +1064,12 @@ class SelectMenu {
 	#CloseListener_mousedown(e) {
 		const eventTarget = dom.query.getEventTarget(e);
 		if (this.form.contains(eventTarget)) return;
+		if (
+			this.#$.ui.opendControllers?.some(
+				({ form }) => form?.contains?.(eventTarget) && !form.contains(this.#refer),
+			)
+		)
+			return;
 		if (!this.#refer.contains(eventTarget)) {
 			this.close();
 		} else if (!dom.check.isInputElement(eventTarget)) {

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/services/table.cell.js

@@ -279,15 +279,12 @@ export class TableCellService {
 	 * @description Sets the unmerge button visibility.
 	 */
 	setUnMergeButton() {
-		if (
+		const hasMergedCells =
 			this.findMergedCells(
 				!this.#state.selectedCells?.length ? [this.#state.fixedCell] : this.#state.selectedCells,
-			).length > 0
-		) {
-			this.unmergeButton.disabled = false;
-		} else {
-			this.unmergeButton.disabled = true;
-		}
+			).length > 0;
+
+		this.unmergeButton.style.display = hasMergedCells ? 'block' : 'none';
 	}
 
 	/**

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/assets/icons/defaultIcons.d.ts

@@ -20,6 +20,7 @@ declare namespace _default {
 	export let print: string;
 	export let template: string;
 	export let layout: string;
+	export let ai: string;
 	export let new_document: string;
 	export let select_all: string;
 	export let line_height: string;

package/types/core/event/actions/index.d.ts

@@ -44,6 +44,7 @@ export namespace A {
 	function deleteEmptyLineMergeNext(formatEl: Element, next: Element): Action;
 	function deleteBrLineRowMerge(rowEndBr: Node): Action;
 	function deleteSoftBreakMerge(br: Node): Action;
+	function mergeLineInto(into: HTMLElement, from: HTMLElement): Action;
 	function tabFormatIndent(range: Range, formatEl: Element, shift: boolean): Action;
 	function caretScrollTo(range: Range): Action;
 	function enterLineAddDefault(formatEl: Element): Action;

package/types/core/event/effects/keydown.registry.d.ts

@@ -37,6 +37,10 @@ declare const _default: {
 	'delete.list.removeNested': ({ ports, ctx }: EffectContext_keydown, { range, formatEl, rangeEl }: any) => void;
 	/** @action deleteEmptyLineMergeNext — remove an empty line, move caret to the start of the next line */
 	'delete.emptyLine.mergeNext': ({ ports }: EffectContext_keydown, { formatEl, next }: any) => void;
+	/**
+	 * @action mergeLineInto — Merge one line into another across a block boundary.
+	 */
+	'line.merge': ({ ports }: EffectContext_keydown, { into, from }: any) => void;
 	/** @action deleteBrLineRowMerge — remove an empty row inside a brLine (PRE), pull the next row up */
 	'delete.brline.rowMerge': ({ ports }: EffectContext_keydown, { rowEndBr }: any) => void;
 	/** @action deleteSoftBreakMerge */

package/types/core/event/ports.d.ts

@@ -29,6 +29,7 @@ import type {} from '../../typedef';
  * @property {(...args: Parameters<Format['isNormalLine']>) => ReturnType<Format['isNormalLine']>} isNormalLine
  * @property {(...args: Parameters<Format['isBrLine']>) => ReturnType<Format['isBrLine']>} isBrLine
  * @property {(...args: Parameters<Format['isClosureBrLine']>) => ReturnType<Format['isClosureBrLine']>} isClosureBrLine
+ * @property {(...args: Parameters<Format['isBlock']>) => ReturnType<Format['isBlock']>} isBlock
  * @property {(...args: Parameters<Format['isClosureBlock']>) => ReturnType<Format['isClosureBlock']>} isClosureBlock
  * @property {(...args: Parameters<Format['isEdgeLine']>) => ReturnType<Format['isEdgeLine']>} isEdgeLine
  * @property {(...args: Parameters<Format['removeBlock']>) => ReturnType<Format['removeBlock']>} removeBlock
@@ -98,6 +99,7 @@ export function makePorts(
 		isNormalLine: (n: any) => n is HTMLElement;
 		isBrLine: (n: any) => n is HTMLElement;
 		isClosureBrLine: (n: any) => n is HTMLElement;
+		isBlock: (n: any) => n is HTMLElement;
 		isClosureBlock: (n: any) => n is HTMLElement;
 		isEdgeLine: (node: any, offset: any, dir: any) => node is HTMLElement;
 		removeBlock: (
@@ -206,6 +208,7 @@ export type FormatPorts = {
 	isNormalLine: (...args: Parameters<Format['isNormalLine']>) => ReturnType<Format['isNormalLine']>;
 	isBrLine: (...args: Parameters<Format['isBrLine']>) => ReturnType<Format['isBrLine']>;
 	isClosureBrLine: (...args: Parameters<Format['isClosureBrLine']>) => ReturnType<Format['isClosureBrLine']>;
+	isBlock: (...args: Parameters<Format['isBlock']>) => ReturnType<Format['isBlock']>;
 	isClosureBlock: (...args: Parameters<Format['isClosureBlock']>) => ReturnType<Format['isClosureBlock']>;
 	isEdgeLine: (...args: Parameters<Format['isEdgeLine']>) => ReturnType<Format['isEdgeLine']>;
 	removeBlock: (...args: Parameters<Format['removeBlock']>) => ReturnType<Format['removeBlock']>;