suneditor 3.2.6 → 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/config/optionProvider.js

@@ -229,13 +229,14 @@ export default class OptionProvider {
 				}
 
 				if (diff.has('placeholder_line')) {
-					const phLineText = newRootOptions.get('placeholder_line');
-					fc.set('placeholder_line', phLineText);
+					const phLine = newRootOptions.get('placeholder_line');
+					fc.set('placeholder_line', phLine);
 
 					const marked = fc.get('wysiwyg').querySelector('.se-placeholder-line');
 					if (marked) {
-						if (phLineText) {
-							marked.setAttribute('data-se-placeholder-line', phLineText);
+						const phText = ui.resolveLinePlaceholder(marked, phLine);
+						if (phText) {
+							marked.setAttribute('data-se-placeholder-line', phText);
 						} else {
 							marked.classList.remove('se-placeholder-line');
 							marked.removeAttribute('data-se-placeholder-line');

package/src/core/event/actions/index.js

@@ -138,7 +138,6 @@ export const A = {
 	 * @returns {Action}
 	 */
 	backspaceEmptyLineMergePrev: (formatEl, prev) => ({ t: 'backspace.emptyLine.mergePrev', p: { formatEl, prev } }),
-
 	/**
 	 * @param {Node} rowEndBr - the `<br>` the caret sits on (end of the empty row)
 	 * @param {Node} rowStartBr - the `<br>` that starts the empty row (removed to merge it up)
@@ -148,7 +147,6 @@ export const A = {
 		t: 'backspace.brline.rowMerge',
 		p: { rowEndBr, rowStartBr },
 	}),
-
 	/**
 	 * @description Soft line break merge (Backspace): the caret sits in the zero-width anchor right after a soft-break `<br>` (a Shift+Enter).
 	 * @param {Node} zws - the zero-width Text node holding the caret (its `previousSibling` is the `<br>`)
@@ -187,13 +185,11 @@ export const A = {
 	 * @returns {Action}
 	 */
 	deleteEmptyLineMergeNext: (formatEl, next) => ({ t: 'delete.emptyLine.mergeNext', p: { formatEl, next } }),
-
 	/**
 	 * @param {Node} rowEndBr - the `<br>` the caret sits on (end of the empty row); removed to pull the next row up
 	 * @returns {Action}
 	 */
 	deleteBrLineRowMerge: (rowEndBr) => ({ t: 'delete.brline.rowMerge', p: { rowEndBr } }),
-
 	/**
 	 * @description Soft line break merge (Delete): the caret sits just before a soft-break `<br>`.
 	 * @param {Node} br - the soft-break `<br>` to remove
@@ -201,6 +197,14 @@ export const A = {
 	 */
 	deleteSoftBreakMerge: (br) => ({ t: 'delete.softBreak.merge', p: { br } }),
 
+	// === line ===
+	/**
+	 * @param {HTMLElement} into - Line that receives the content (caret lands at its original end).
+	 * @param {HTMLElement} from - Line whose content is moved into `into`, then removed.
+	 * @returns {Action}
+	 */
+	mergeLineInto: (into, from) => ({ t: 'line.merge', p: { into, from } }),
+
 	// === tab ===
 	/**
 	 * @param {Range} range

package/src/core/event/effects/keydown.registry.js

@@ -250,6 +250,39 @@ export default {
 		caretToLineEdge(ports, next, false);
 	},
 
+	/**
+	 * @action mergeLineInto — Merge one line into another across a block boundary.
+	 */
+	'line.merge': ({ ports }, { into, from }) => {
+		const format = ports.format;
+		const container = from.parentElement;
+
+		stripTrailingBreaks(into);
+		const focusNode = into.lastChild;
+		stripTrailingBreaks(from);
+
+		while (from.firstChild) into.appendChild(from.firstChild);
+		dom.utils.removeItem(from);
+
+		let block = container;
+		while (
+			block &&
+			block !== into.parentElement &&
+			format.isBlock(block) &&
+			!format.isClosureBlock(block) &&
+			dom.check.isZeroWidth(block)
+		) {
+			const parent = block.parentElement;
+			dom.utils.removeItem(block);
+			block = parent;
+		}
+
+		if (!into.firstChild) into.appendChild(dom.utils.createElement('BR'));
+
+		if (focusNode) caretToNodeEnd(ports, focusNode);
+		else ports.selection.setRange(into, 0, into, 0);
+	},
+
 	/** @action deleteBrLineRowMerge — remove an empty row inside a brLine (PRE), pull the next row up */
 	'delete.brline.rowMerge': ({ ports }, { rowEndBr }) => {
 		let next = rowEndBr.nextSibling;
@@ -462,7 +495,8 @@ export default {
 				shouldDelete: true,
 				skipHistory: true,
 			});
-			edge.cc.insertBefore(newEl, edge.ec);
+
+			edge.cc.insertBefore(newEl, edge.sc ? edge.sc.nextSibling : edge.cc.firstChild);
 		}
 
 		newEl.innerHTML = '<br>';
@@ -596,15 +630,17 @@ export default {
 		dom.utils.copyTagAttributes(newFormat, formatEl, ctx.options.get('lineAttrReset'));
 
 		let child = focusBR;
-		let sNode = selectionNode;
-		do {
-			if (!dom.check.isBreak(sNode) && sNode.nodeType === 1) {
-				const f = /** @type {HTMLElement} */ (sNode.cloneNode(false));
-				f.appendChild(child);
-				child = f;
-			}
-			sNode = sNode.parentElement;
-		} while (formatEl !== sNode && formatEl.contains(sNode));
+		if (!(formatEndEdge && ctx.options.get('lineBreakClearStyle'))) {
+			let sNode = selectionNode;
+			do {
+				if (!dom.check.isBreak(sNode) && sNode.nodeType === 1) {
+					const f = /** @type {HTMLElement} */ (sNode.cloneNode(false));
+					f.appendChild(child);
+					child = f;
+				}
+				sNode = sNode.parentElement;
+			} while (formatEl !== sNode && formatEl.contains(sNode));
+		}
 
 		newFormat.appendChild(child);
 		formatEl.parentNode.insertBefore(
@@ -755,6 +791,19 @@ function caretToNodeEnd(ports, node) {
 	ports.selection.setRange(node, offset, node, offset);
 }
 
+/**
+ * @description Removes trailing `<br>` elements and zero-width text nodes from `el`.
+ * @param {HTMLElement} el
+ */
+function stripTrailingBreaks(el) {
+	let last = el.lastChild;
+	while (last && (dom.check.isBreak(last) || (last.nodeType === 3 && dom.check.isZeroWidth(last)))) {
+		const prev = last.previousSibling;
+		dom.utils.removeItem(last);
+		last = prev;
+	}
+}
+
 /**
  * @param {HTMLElement} formatEl - Format element
  * @returns {Node}

package/src/core/event/ports.js

@@ -34,6 +34,7 @@ import { useEnterFromBeforeInput } from './reducers/keydown.reducer';
  * @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
@@ -124,6 +125,7 @@ export function makePorts(inst, { _styleNodes }) {
 			isNormalLine: (n) => format.isNormalLine(n),
 			isBrLine: (n) => format.isBrLine(n),
 			isClosureBrLine: (n) => format.isClosureBrLine(n),
+			isBlock: (n) => format.isBlock(n),
 			isClosureBlock: (n) => format.isClosureBlock(n),
 			isEdgeLine: (node, offset, dir) => format.isEdgeLine(node, offset, dir),
 			removeBlock: (n, p) => format.removeBlock(n, p),

package/src/core/event/rules/keydown.rule.backspace.js

@@ -71,6 +71,23 @@ export function reduceBackspaceDown(actions, ports, ctx) {
 		return false;
 	}
 
+	if (
+		!selectRange &&
+		!bidiNotFront &&
+		formatEl &&
+		format.isNormalLine(formatEl) &&
+		!dom.check.isListCell(formatEl) &&
+		format.isEdgeLine(range.startContainer, range.startOffset, 'front')
+	) {
+		const prevLine = findPrevMergeLine(format, formatEl);
+		if (prevLine) {
+			actions.push(A.preventStop());
+			actions.push(A.mergeLineInto(prevLine, formatEl));
+			actions.push(A.historyPush(true));
+			return false;
+		}
+	}
+
 	// closure, default
 	if (
 		!selectRange &&
@@ -84,7 +101,6 @@ export function reduceBackspaceDown(actions, ports, ctx) {
 			format.isClosureBrLine(formatEl) ||
 			dom.check.isWysiwygFrame(formatEl.parentNode))
 	) {
-		// closure range
 		if (format.isClosureBlock(formatEl.parentNode)) {
 			actions.push(A.preventStop());
 			return false;
@@ -348,3 +364,38 @@ export function reduceBackspaceDown(actions, ports, ctx) {
 	actions.push(A.caretScrollTo(range));
 	return true;
 }
+
+/**
+ * @description Mirror of the Delete rule's `findNextMergeLine`: finds the previous line to merge INTO when
+ * Backspace is pressed at the start of `formatEl` and the previous line in document order lies across a block
+ * boundary. Returns `null` for a plain line→line neighbour (left to native) or when nothing is safely mergeable
+ * (list cell, closure, brLine, start of document).
+ * @param {EventPorts['format']} format
+ * @param {HTMLElement} formatEl
+ * @returns {?HTMLElement}
+ */
+function findPrevMergeLine(format, formatEl) {
+	let prev = formatEl.previousElementSibling;
+	if (!prev) {
+		// `formatEl` is the first line of its block — look at what precedes the block.
+		const block = formatEl.parentElement;
+		if (!format.isBlock(block) || format.isClosureBlock(block)) return null;
+		prev = block.previousElementSibling;
+		if (!prev) return null;
+	} else if (!format.isBlock(prev)) {
+		return null; // plain line→line — let the browser merge it natively
+	}
+
+	// Descend into blocks to the LAST line; only merge into a simple, non-list, non-closure, non-brLine line.
+	let line = prev;
+	while (line && format.isBlock(line) && !format.isClosureBlock(line)) line = line.lastElementChild;
+	if (
+		!format.isNormalLine(line) ||
+		dom.check.isListCell(line) ||
+		format.isBrLine(line) ||
+		format.isClosureBrLine(line)
+	) {
+		return null;
+	}
+	return /** @type {HTMLElement} */ (line);
+}

package/src/core/event/rules/keydown.rule.delete.js

@@ -37,6 +37,23 @@ export function reduceDeleteDown(actions, ports, ctx) {
 		return true;
 	}
 
+	if (
+		!selectRange &&
+		!bidiNotEnd &&
+		formatEl &&
+		format.isNormalLine(formatEl) &&
+		!dom.check.isListCell(formatEl) &&
+		format.isEdgeLine(range.endContainer, range.endOffset, 'end')
+	) {
+		const targetLine = findNextMergeLine(format, formatEl);
+		if (targetLine) {
+			actions.push(A.preventStop());
+			actions.push(A.mergeLineInto(formatEl, targetLine));
+			actions.push(A.historyPush(true));
+			return false;
+		}
+	}
+
 	if (
 		!selectRange &&
 		!bidiNotEnd &&
@@ -216,3 +233,37 @@ export function reduceDeleteDown(actions, ports, ctx) {
 
 	return true;
 }
+
+/**
+ * @description Finds the line to merge up when Delete is pressed at the end of `formatEl` and the next line in
+ * document order lies across a block boundary. Returns `null` for a plain line→line neighbour (left to native)
+ * or when there is nothing safely mergeable (list cell, closure, brLine, end of document).
+ * @param {EventPorts['format']} format
+ * @param {HTMLElement} formatEl
+ * @returns {?HTMLElement}
+ */
+function findNextMergeLine(format, formatEl) {
+	let next = formatEl.nextElementSibling;
+	if (!next) {
+		// `formatEl` is the last line of its block — look at what follows the block.
+		const block = formatEl.parentElement;
+		if (!format.isBlock(block) || format.isClosureBlock(block)) return null;
+		next = block.nextElementSibling;
+		if (!next) return null;
+	} else if (!format.isBlock(next)) {
+		return null; // plain line→line — let the browser merge it natively
+	}
+
+	// Descend into blocks to the first line; only merge a simple, non-list, non-closure, non-brLine line.
+	let line = next;
+	while (line && format.isBlock(line) && !format.isClosureBlock(line)) line = line.firstElementChild;
+	if (
+		!format.isNormalLine(line) ||
+		dom.check.isListCell(line) ||
+		format.isBrLine(line) ||
+		format.isClosureBrLine(line)
+	) {
+		return null;
+	}
+	return /** @type {HTMLElement} */ (line);
+}

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/panel/finder.js

@@ -125,6 +125,8 @@ class Finder {
 
 		this.#isOpen = true;
 
+		dom.utils.addClass(this.#$.commandDispatcher.targets.get('finder'), 'active');
+
 		// Listen for wysiwyg content changes to refresh highlights
 		this.#addContentInputListener();
 
@@ -175,6 +177,7 @@ class Finder {
 		if (!this.#isOpen) return;
 
 		this.#isOpen = false;
+		dom.utils.removeClass(this.#$.commandDispatcher.targets.get('finder'), 'active');
 		this.#clearHighlights();
 		this.#matches = [];
 		this.#currentIndex = -1;