suneditor 3.1.3 → 3.2.0

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

@@ -0,0 +1,278 @@
+/**
+ * @fileoverview Stateless block boundary resolver for block handle positioning.
+ * Maps any DOM node inside the editor to its owning block-level element.
+ */
+
+import { isWysiwygFrame, isTableCell, isComponentContainer } from '../../../helper/dom/domCheck';
+
+/**
+ * @typedef {Object} BlockInfo
+ * @property {HTMLElement} element - The resolved block-level DOM element
+ * @property {string} type - Block type: 'p', 'heading', 'list', 'blockquote', 'pre', 'figure', 'table', 'div'
+ * @property {number} depth - Nesting level from wysiwyg root (0 = top-level)
+ * @property {HTMLElement|null} parent - Parent block element, or null if top-level
+ * @property {{ prev: HTMLElement|null, next: HTMLElement|null }} siblings - Adjacent blocks at same depth
+ * @property {DOMRect} rect - getBoundingClientRect() of the element (caller handles scroll/iframe offset)
+ */
+
+/**
+ * @typedef {Object} FormatAPI
+ * @property {(node: Node, validation?: (current: *) => boolean) => HTMLElement|null} getLine
+ * @property {(element: Node, validation?: (current: *) => boolean) => HTMLElement|null} getBlock
+ * @property {(element: Node) => boolean} isLine
+ * @property {(element: Node) => boolean} isBlock
+ */
+
+const HEADING_RE = /^H[1-6]$/;
+const LIST_RE = /^(UL|OL)$/;
+const LIST_ITEM_RE = /^LI$/;
+const TABLE_INNER_RE = /^(THEAD|TBODY|TR|TD|TH)$/;
+
+/**
+ * @description Classify the block type from a resolved element.
+ * @param {HTMLElement} el
+ * @returns {string}
+ */
+function classifyType(el) {
+	const tag = el.nodeName;
+	if (tag === 'P' || tag === 'DIV') return 'p';
+	if (HEADING_RE.test(tag)) return 'heading';
+	if (tag === 'LI') return 'list-item';
+	if (LIST_RE.test(tag)) return 'list';
+	if (tag === 'BLOCKQUOTE') return 'blockquote';
+	if (tag === 'PRE') return 'pre';
+	if (tag === 'FIGURE') return 'figure';
+	if (tag === 'TABLE') return 'table';
+	return 'p'; // fallback for custom format elements
+}
+
+/**
+ * @description Walk up from a table-internal node (td, th, tr, thead, tbody) to the table element.
+ * @param {Node} node
+ * @returns {HTMLElement|null}
+ */
+function resolveToTable(node) {
+	let el = node;
+	while (el && !isWysiwygFrame(el)) {
+		if (el.nodeName === 'TABLE') return /** @type {HTMLElement} */ (el);
+		el = el.parentNode;
+	}
+	return null;
+}
+
+/**
+ * @description Check if the node is inside or is a component (.se-component, .se-flex-component)
+ * @param {Node} node
+ * @returns {boolean}
+ */
+function isInsideComponent(node) {
+	let el = node;
+	while (el && !isWysiwygFrame(el)) {
+		if (el.nodeType === 1 && isComponentContainer(/** @type {Element} */ (el))) return true;
+		el = el.parentNode;
+	}
+	return false;
+}
+
+/**
+ * @description Count block-level ancestors between element and wysiwyg root.
+ * @param {HTMLElement} element
+ * @param {FormatAPI} format
+ * @returns {{ depth: number, parent: HTMLElement|null }}
+ */
+function computeDepth(element, format) {
+	let depth = 0;
+	let parent = null;
+	let node = element.parentNode;
+
+	while (node && !isWysiwygFrame(node)) {
+		if (node.nodeType === 1 && (format.isBlock(node) || format.isLine(node))) {
+			if (!parent) parent = /** @type {HTMLElement} */ (node);
+			depth++;
+		}
+		node = node.parentNode;
+	}
+
+	return { depth, parent };
+}
+
+/**
+ * @description Find the previous and next sibling block elements at the same level.
+ * @param {HTMLElement} element
+ * @returns {{ prev: HTMLElement|null, next: HTMLElement|null }}
+ */
+function computeSiblings(element) {
+	const prev = element.previousElementSibling;
+	const next = element.nextElementSibling;
+	return {
+		prev: /** @type {HTMLElement|null} */ (prev),
+		next: /** @type {HTMLElement|null} */ (next),
+	};
+}
+
+/**
+ * @description For a UL/OL, find the closest direct child LI by mouse Y.
+ * Recurses into the matched LI for deeper nesting.
+ * @param {HTMLElement} list - UL or OL element
+ * @param {number} mouseY
+ * @returns {HTMLElement|null}
+ */
+function resolveListChildLI(list, mouseY) {
+	const children = list.children;
+	let closest = null;
+	let closestDist = Infinity;
+	for (let i = 0; i < children.length; i++) {
+		const child = children[i];
+		if (!LIST_ITEM_RE.test(child.nodeName)) continue;
+		const r = child.getBoundingClientRect();
+		if (mouseY >= r.top && mouseY <= r.bottom) {
+			// Exact hit — recurse for deeper nesting
+			return resolveNestedLI(/** @type {HTMLElement} */ (child), mouseY) || /** @type {HTMLElement} */ (child);
+		}
+		const dist = Math.min(Math.abs(mouseY - r.top), Math.abs(mouseY - r.bottom));
+		if (dist < closestDist) {
+			closestDist = dist;
+			closest = /** @type {HTMLElement} */ (child);
+		}
+	}
+	return closest;
+}
+
+/**
+ * @description For an LI with nested sub-lists, find the closest child LI by mouse Y.
+ * Only resolves to a child when mouseY falls within the nested list region.
+ * @param {HTMLElement} li
+ * @param {number} mouseY
+ * @returns {HTMLElement|null}
+ */
+function resolveNestedLI(li, mouseY) {
+	const nestedList = li.querySelector(':scope > ul, :scope > ol');
+	if (!nestedList) return null;
+
+	const nestedRect = nestedList.getBoundingClientRect();
+	// Mouse is above the nested list → stays on parent LI's own content
+	if (mouseY < nestedRect.top) return null;
+
+	const childLIs = nestedList.children;
+	let closest = null;
+	let closestDist = Infinity;
+	for (let i = 0; i < childLIs.length; i++) {
+		const child = childLIs[i];
+		if (!LIST_ITEM_RE.test(child.nodeName)) continue;
+		const r = child.getBoundingClientRect();
+		if (mouseY >= r.top && mouseY <= r.bottom) {
+			// Exact hit — recurse for deeper nesting
+			return resolveNestedLI(/** @type {HTMLElement} */ (child), mouseY) || /** @type {HTMLElement} */ (child);
+		}
+		const dist = Math.min(Math.abs(mouseY - r.top), Math.abs(mouseY - r.bottom));
+		if (dist < closestDist) {
+			closestDist = dist;
+			closest = /** @type {HTMLElement} */ (child);
+		}
+	}
+	return closest;
+}
+
+/**
+ * @description Resolve any DOM node inside the editor to its owning block-level element.
+ * @param {Node|null} node - Any DOM node inside the editor
+ * @param {FormatAPI} format - Injected format methods (getLine, getBlock, isLine, isBlock)
+ * @param {HTMLElement} wysiwygFrame - The wysiwyg root element
+ * @param {number} [mouseY] - Mouse clientY for nested list resolution
+ * @returns {BlockInfo|null} Block information, or null if node is outside editable area
+ */
+export function resolveBlock(node, format, wysiwygFrame, mouseY) {
+	if (!node || !wysiwygFrame) return null;
+
+	// Text node → use parent element
+	if (node.nodeType === 3) {
+		node = node.parentNode;
+		if (!node) return null;
+	}
+
+	// Already at wysiwyg root
+	if (isWysiwygFrame(node)) return null;
+
+	// Skip components (images, videos, etc.) — they have their own interaction
+	if (isInsideComponent(node)) return null;
+
+	let resolved = null;
+
+	// Table cell or table-internal → resolve to TABLE
+	if (TABLE_INNER_RE.test(node.nodeName)) {
+		resolved = resolveToTable(node);
+	}
+	// List container (UL/OL) → keep as-is, resolveListChildLI will pick the right LI
+	else if (LIST_RE.test(node.nodeName)) {
+		resolved = /** @type {HTMLElement} */ (node);
+	}
+	// List item → resolve to LI itself (each list item gets its own handle)
+	else if (LIST_ITEM_RE.test(node.nodeName)) {
+		resolved = /** @type {HTMLElement} */ (node);
+	}
+	// Check if inside a table cell — walk up to table
+	else if (isTableCell(node.parentNode)) {
+		resolved = resolveToTable(node);
+	} else {
+		// Try getLine first (finds P, H1-H6, PRE, LI, etc.)
+		const line = format.getLine(node, null);
+		if (line) {
+			resolved = line;
+		}
+
+		// If no line found, try getBlock (finds BLOCKQUOTE, UL, OL, TABLE, etc.)
+		if (!resolved) {
+			const block = format.getBlock(node, null);
+			if (block) {
+				// For table internals, resolve up to TABLE
+				if (TABLE_INNER_RE.test(block.nodeName)) {
+					resolved = resolveToTable(block);
+				} else {
+					resolved = block;
+				}
+			}
+		}
+	}
+
+	// If nothing resolved, try walking up manually to find any block-level element
+	if (!resolved) {
+		let el = /** @type {Node} */ (node);
+		while (el && !isWysiwygFrame(el)) {
+			if (el.nodeType === 1 && el.parentNode && isWysiwygFrame(el.parentNode)) {
+				resolved = /** @type {HTMLElement} */ (el);
+				break;
+			}
+			el = el.parentNode;
+		}
+	}
+
+	if (!resolved) return null;
+
+	// Final component check on resolved element
+	if (isInsideComponent(resolved)) return null;
+
+	// For UL/OL, resolve to the closest child LI by mouse Y.
+	// For LI with nested sub-lists, find the deepest child LI.
+	if (mouseY !== undefined) {
+		if (LIST_RE.test(resolved.nodeName)) {
+			const childLI = resolveListChildLI(/** @type {HTMLElement} */ (resolved), mouseY);
+			if (childLI) resolved = childLI;
+		} else if (LIST_ITEM_RE.test(resolved.nodeName)) {
+			const nested = resolveNestedLI(/** @type {HTMLElement} */ (resolved), mouseY);
+			if (nested) resolved = nested;
+		}
+	}
+
+	const { depth, parent } = computeDepth(resolved, format);
+	const siblings = computeSiblings(resolved);
+	const type = classifyType(resolved);
+
+	return {
+		element: resolved,
+		type,
+		depth,
+		parent,
+		siblings,
+		rect: resolved.getBoundingClientRect(),
+	};
+}

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

@@ -54,7 +54,8 @@ class Finder {
 		Finder.#highlightStyleInjected = true;
 		const style = _d.createElement('style');
 		style.textContent =
-			'::highlight(se-find-match){background-color:var(--se-find-match-color,rgba(255,213,0,.4));color:inherit}' + '::highlight(se-find-current){background-color:var(--se-find-current-color,rgba(255,150,50,.7));color:inherit}';
+			'::highlight(se-find-match){background-color:var(--se-find-match-color,rgba(255,213,0,.4));color:inherit}' +
+			'::highlight(se-find-current){background-color:var(--se-find-current-color,rgba(255,150,50,.7));color:inherit}';
 		_d.head.appendChild(style);
 	}
 
@@ -99,7 +100,9 @@ class Finder {
 
 			// Update sticky top (responsive resize, more layer, etc.)
 			if (env.isResizeObserverSupported) {
-				this.#resizeObserver = new ResizeObserver(() => this.#updateStickyTop()).observe(this.#$.context.get('toolbar_main'));
+				this.#resizeObserver = new ResizeObserver(() => this.#updateStickyTop()).observe(
+					this.#$.context.get('toolbar_main'),
+				);
 			}
 		}
 	}
@@ -157,9 +160,11 @@ class Finder {
 		const stickyTop = this.#$.options.get('_toolbar_sticky');
 		if (this.#store.mode.isBottom) {
 			this.#panel.style.top = 'auto';
-			this.#panel.style.bottom = stickyTop >= 0 ? stickyTop + this.#$.context.get('toolbar_main').offsetHeight + 'px' : '0px';
+			this.#panel.style.bottom =
+				stickyTop >= 0 ? stickyTop + this.#$.context.get('toolbar_main').offsetHeight + 'px' : '0px';
 		} else {
-			this.#panel.style.top = stickyTop >= 0 ? stickyTop + this.#$.context.get('toolbar_main').offsetHeight + 'px' : '0px';
+			this.#panel.style.top =
+				stickyTop >= 0 ? stickyTop + this.#$.context.get('toolbar_main').offsetHeight + 'px' : '0px';
 		}
 	}
 
@@ -753,7 +758,9 @@ class Finder {
 			// Mark fallback: update active mark
 			this.#updateCurrentMarkHighlight();
 
-			const currentMark = this.#markElements.find((m) => m.getAttribute('data-se-find-idx') === String(this.#currentIndex));
+			const currentMark = this.#markElements.find(
+				(m) => m.getAttribute('data-se-find-idx') === String(this.#currentIndex),
+			);
 			if (currentMark) {
 				this.#$.selection.scrollTo(currentMark, { behavior: 'auto', noFocus: true });
 			}
@@ -780,7 +787,10 @@ class Finder {
 		const freshMatches = this.#findAllMatches(this.#searchTerm, wysiwyg);
 		if (this.#currentIndex >= freshMatches.length) return;
 
-		this.#replaceRange(freshMatches[this.#currentIndex], replaceText ?? (this.#replaceInput ? this.#replaceInput.value : ''));
+		this.#replaceRange(
+			freshMatches[this.#currentIndex],
+			replaceText ?? (this.#replaceInput ? this.#replaceInput.value : ''),
+		);
 		this.#$.history.push(false);
 
 		// Re-search

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

@@ -43,6 +43,8 @@ class Menu {
 		// members
 		/** @type {Object<string, HTMLElement>} */
 		this.targetMap = {};
+		/** @type {Object<string, Array<DropdownItem>>} Structured items keyed by plugin name */
+		this.itemsMap = {};
 		this.index = -1;
 		this.menus = [];
 		// dropdown
@@ -79,19 +81,37 @@ class Menu {
 	 * @description Method for managing dropdown element.
 	 * - You must add the `dropdown` element using this method at custom plugin.
 	 * @param {{key: string, type: string}} classObj Class object
-	 * @param {Node} menu Dropdown element
+	 * @param {Node|Array<DropdownItem>} menuOrItems Dropdown element or array of standardized items
+	 * @param {Object} [options] Options when passing items array
+	 * @param {string} [options.className] Additional CSS class for the wrapper element
+	 * @param {string} [options.prependHTML] HTML to prepend inside the `<ul>` (e.g. default/sub-list items)
+	 * @returns {HTMLElement} The registered menu element
 	 */
-	initDropdownTarget({ key, type }, menu) {
-		if (key) {
-			if (!IsFree(type)) {
-				/** @type {HTMLElement} */ (menu).setAttribute('data-key', key);
-				this.#dropdownCommands.push(key);
+	initDropdownTarget({ key, type }, menuOrItems, options) {
+		if (!key) throw Error("[SUNEDITOR.init.fail] The plugin's key is not added.");
+
+		let menu;
+		if (Array.isArray(menuOrItems)) {
+			menu = CreateDropdownMenu(menuOrItems, options);
+
+			const allButtons = menu.querySelectorAll('.se-list-inner li > button');
+			const offset = allButtons.length - menuOrItems.length;
+			for (let i = 0; i < menuOrItems.length; i++) {
+				menuOrItems[i]._element = /** @type {HTMLElement} */ (allButtons[offset + i]) || null;
 			}
-			this.#context.get('menuTray').appendChild(menu);
-			this.targetMap[key] = /** @type {HTMLElement} */ (menu);
+			this.itemsMap[key] = menuOrItems;
 		} else {
-			throw Error("[SUNEDITOR.init.fail] The plugin's key is not added.");
+			menu = /** @type {HTMLElement} */ (menuOrItems);
+		}
+
+		if (!IsFree(type)) {
+			menu.setAttribute('data-key', key);
+			this.#dropdownCommands.push(key);
 		}
+
+		this.#context.get('menuTray').appendChild(menu);
+		this.targetMap[key] = menu;
+		return menu;
 	}
 
 	/**
@@ -102,7 +122,9 @@ class Menu {
 		this.#removeGlobalEvent();
 		const moreBtn = this.#checkMoreLayer(button);
 		if (moreBtn) {
-			const target = dom.query.getParentElement(moreBtn, '.se-btn-tray').querySelector('[data-command="' + moreBtn.getAttribute('data-ref') + '"]');
+			const target = dom.query
+				.getParentElement(moreBtn, '.se-btn-tray')
+				.querySelector('[data-command="' + moreBtn.getAttribute('data-ref') + '"]');
 			if (target) {
 				this.#$.commandDispatcher.runFromTarget(target);
 				this.dropdownOn(button);
@@ -123,13 +145,31 @@ class Menu {
 		}
 
 		this.#context.get('menuTray').showPopover?.();
-		this.#bindClose_dropdown_mouse = this.#eventManager.addGlobalEvent('mousedown', this.#globalEventHandler.mousedown, false);
+		this.#bindClose_dropdown_mouse = this.#eventManager.addGlobalEvent(
+			'mousedown',
+			this.#globalEventHandler.mousedown,
+			false,
+		);
 		if (this.#dropdownCommands.includes(dropdownName)) {
 			this.menus = converter.nodeListToArray(menu.querySelectorAll('[data-command]'));
 			if (this.menus.length > 0) {
-				this.#bindClose_dropdown_key = this.#eventManager.addGlobalEvent('keydown', this.#globalEventHandler.keydown, false);
-				this.#bindMenu_mousemove = this.#eventManager.addEvent(menu, 'mousemove', this.#globalEventHandler.mousemove, false);
-				this.#bindMenu_mouseout = this.#eventManager.addEvent(menu, 'mouseout', this.#globalEventHandler.mouseout, false);
+				this.#bindClose_dropdown_key = this.#eventManager.addGlobalEvent(
+					'keydown',
+					this.#globalEventHandler.keydown,
+					false,
+				);
+				this.#bindMenu_mousemove = this.#eventManager.addEvent(
+					menu,
+					'mousemove',
+					this.#globalEventHandler.mousemove,
+					false,
+				);
+				this.#bindMenu_mouseout = this.#eventManager.addEvent(
+					menu,
+					'mouseout',
+					this.#globalEventHandler.mouseout,
+					false,
+				);
 			}
 		}
 
@@ -202,7 +242,8 @@ class Menu {
 		this.#removeGlobalEvent();
 
 		this.currentContainerActiveButton = /** @type {HTMLButtonElement} */ (button);
-		const containerName = (this.currentContainerName = this.currentContainerActiveButton.getAttribute('data-command'));
+		const containerName = (this.currentContainerName =
+			this.currentContainerActiveButton.getAttribute('data-command'));
 		this.currentContainer = this.targetMap[containerName];
 
 		if (isMobile) {
@@ -212,7 +253,11 @@ class Menu {
 		}
 
 		this.#context.get('menuTray').showPopover?.();
-		this.#bindClose_cons_mouse = this.#eventManager.addGlobalEvent('mousedown', this.#globalEventHandler.containerDown, false);
+		this.#bindClose_cons_mouse = this.#eventManager.addGlobalEvent(
+			'mousedown',
+			this.#globalEventHandler.containerDown,
+			false,
+		);
 
 		if (this.#$.plugins[containerName].on) this.#$.plugins[containerName].on(button);
 		this.#store.set('_preventBlur', true);
@@ -245,7 +290,13 @@ class Menu {
 	 * @param {HTMLElement} menu Menu element
 	 */
 	__resetMenuPosition(element, menu) {
-		this.#$.offset.setRelPosition(menu, this.#contextProvider.carrierWrapper, element.parentElement, dom.query.getParentElement(element, '.se-toolbar'), { preferUp: this.#store.mode.isBottom });
+		this.#$.offset.setRelPosition(
+			menu,
+			this.#contextProvider.carrierWrapper,
+			element.parentElement,
+			dom.query.getParentElement(element, '.se-toolbar'),
+			{ preferUp: this.#store.mode.isBottom },
+		);
 	}
 
 	/**
@@ -270,7 +321,13 @@ class Menu {
 		menu.style.height = '';
 		dom.utils.addClass(element.parentElement.children, 'on');
 
-		this.#$.offset.setRelPosition(menu, this.#contextProvider.carrierWrapper, element.parentElement, dom.query.getParentElement(element, '.se-toolbar'), { preferUp: this.#store.mode.isBottom });
+		this.#$.offset.setRelPosition(
+			menu,
+			this.#contextProvider.carrierWrapper,
+			element.parentElement,
+			dom.query.getParentElement(element, '.se-toolbar'),
+			{ preferUp: this.#store.mode.isBottom },
+		);
 
 		menu.style.visibility = '';
 
@@ -463,4 +520,48 @@ function IsFree(type) {
 	return /free$/.test(type);
 }
 
+/**
+ * @typedef {Object} DropdownItem
+ * @property {string} command - `data-command` attribute value
+ * @property {string} [value] - `data-value` attribute value
+ * @property {string} title - Title text (used for `title` and `aria-label`)
+ * @property {string} innerHTML - Button inner HTML content
+ * @property {string} [className] - Additional CSS class for the `<button>`
+ * @property {Object<string, string>} [attrs] - Extra data attributes (e.g. `{ 'data-class': 'xxx' }`)
+ * @property {HTMLElement} [_element] - Rendered button element (set by `initDropdownTarget`)
+ */
+
+/**
+ * @description Creates a dropdown menu element from standardized item objects.
+ * @param {Array<DropdownItem>} items - Menu items
+ * @param {Object} [options]
+ * @param {string} [options.className] - Additional class for the wrapper `<div>`
+ * @param {string} [options.prependHTML] - HTML to prepend inside the `<ul>` (e.g. default value items)
+ * @returns {HTMLElement}
+ */
+function CreateDropdownMenu(items, options = {}) {
+	let html = '';
+	for (let i = 0, len = items.length; i < len; i++) {
+		const item = items[i];
+		let attrStr = '';
+		if (item.attrs) {
+			const keys = Object.keys(item.attrs);
+			for (let a = 0; a < keys.length; a++) {
+				attrStr += ` ${keys[a]}="${item.attrs[keys[a]]}"`;
+			}
+		}
+		html += /*html*/ `
+		<li>
+			<button type="button" class="se-btn se-btn-list${item.className ? ' ' + item.className : ''}" data-command="${item.command}"${item.value !== undefined ? ` data-value="${item.value}"` : ''} title="${item.title}" aria-label="${item.title}"${attrStr}>${item.innerHTML}</button>
+		</li>`;
+	}
+
+	return dom.utils.createElement(
+		'DIV',
+		{ class: 'se-dropdown se-list-layer' + (options.className ? ' ' + options.className : '') },
+		/*html*/ `<div class="se-list-inner"><ul class="se-list-basic">${options.prependHTML || ''}${html}</ul></div>`,
+	);
+}
+
+export { CreateDropdownMenu };
 export default Menu;