suneditor 3.1.4 → 3.2.1

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

@@ -91,7 +91,12 @@ class Toolbar {
 		const isStickyPosible = !this.isSub && !balloon && !inline;
 		const stickyTop = this.#options.get('_toolbar_sticky');
 
-		this.#useCSSSticky = isStickyPosible && stickyTop >= 0 && !this.#options.get('toolbar_container') && typeof CSS !== 'undefined' && CSS.supports('position', 'sticky');
+		this.#useCSSSticky =
+			isStickyPosible &&
+			stickyTop >= 0 &&
+			!this.#options.get('toolbar_container') &&
+			typeof CSS !== 'undefined' &&
+			CSS.supports('position', 'sticky');
 
 		this.isBottomMode = this.#store.mode.isBottom;
 
@@ -153,14 +158,20 @@ class Toolbar {
 		this._moreLayerOff();
 		this.#$.menu.dropdownOff();
 		this.#$.menu.containerOff();
-		dom.utils.setDisabled(this.#context.get(this.keyName.buttonTray).querySelectorAll('.se-menu-list .se-toolbar-btn[data-type]'), true);
+		dom.utils.setDisabled(
+			this.#context.get(this.keyName.buttonTray).querySelectorAll('.se-menu-list .se-toolbar-btn[data-type]'),
+			true,
+		);
 	}
 
 	/**
 	 * @description Enables all toolbar buttons.
 	 */
 	enable() {
-		dom.utils.setDisabled(this.#context.get(this.keyName.buttonTray).querySelectorAll('.se-menu-list .se-toolbar-btn[data-type]'), false);
+		dom.utils.setDisabled(
+			this.#context.get(this.keyName.buttonTray).querySelectorAll('.se-menu-list .se-toolbar-btn[data-type]'),
+			false,
+		);
 	}
 
 	/**
@@ -208,7 +219,10 @@ class Toolbar {
 		const responsiveSize = this.#rButtonsize;
 		if (responsiveSize) {
 			let w = 0;
-			if (((this.isBalloonMode || this.isInlineMode) && this.#options.get('toolbar_width') === 'auto') || (this.#store.mode.isSubBalloon && this.#options.get('toolbar_sub_width') === 'auto')) {
+			if (
+				((this.isBalloonMode || this.isInlineMode) && this.#options.get('toolbar_width') === 'auto') ||
+				(this.#store.mode.isSubBalloon && this.#options.get('toolbar_sub_width') === 'auto')
+			) {
 				w = this.#frameContext.get('topArea').offsetWidth;
 			} else {
 				w = this.#context.get(this.keyName.main).offsetWidth;
@@ -243,12 +257,17 @@ class Toolbar {
 
 		newToolbar.updateButtons.forEach((v) => UpdateButton(v.button, v.plugin, this.#icons, this.#lang));
 
-		this.#context.get(this.keyName.main).replaceChild(newToolbar.buttonTray, this.#context.get(this.keyName.buttonTray));
+		this.#context
+			.get(this.keyName.main)
+			.replaceChild(newToolbar.buttonTray, this.#context.get(this.keyName.buttonTray));
 		this.#context.set(this.keyName.buttonTray, newToolbar.buttonTray);
 
 		this.#resetButtonInfo();
 
-		this.#eventManager.triggerEvent('onSetToolbarButtons', { buttonTray: newToolbar.buttonTray, frameContext: this.#frameContext });
+		this.#eventManager.triggerEvent('onSetToolbarButtons', {
+			buttonTray: newToolbar.buttonTray,
+			frameContext: this.#frameContext,
+		});
 	}
 
 	/**
@@ -280,7 +299,9 @@ class Toolbar {
 			const editorBottom = editorOffset.top + editorHeight;
 			const y = viewportBottom - stickyTop - (this.isInlineMode ? toolbar.offsetHeight : 0);
 
-			const offSticky = !this.#options.get('toolbar_container') ? y - editorOffset.top - minHeight : viewportBottom - stickyTop - editorOffset.top - minHeight - toolbar.offsetHeight;
+			const offSticky = !this.#options.get('toolbar_container')
+				? y - editorOffset.top - minHeight
+				: viewportBottom - stickyTop - editorOffset.top - minHeight - toolbar.offsetHeight;
 			if (y > editorBottom) {
 				this.#offSticky();
 			} else if (offSticky < 0) {
@@ -292,9 +313,15 @@ class Toolbar {
 			}
 		} else {
 			const y = currentScrollY + stickyTop;
-			const t = (this.isBalloonMode || this.isInlineMode ? editorOffset.top : this.#$.offset.getGlobal(this.#options.get('toolbar_container')).top) - (this.isInlineMode ? toolbar.offsetHeight : 0);
-
-			const offSticky = !this.#options.get('toolbar_container') ? editorHeight + t + stickyTop - y - minHeight : editorOffset.top - currentScrollY + editorHeight - minHeight - stickyTop - toolbar.offsetHeight;
+			const t =
+				(this.isBalloonMode || this.isInlineMode
+					? editorOffset.top
+					: this.#$.offset.getGlobal(this.#options.get('toolbar_container')).top) -
+				(this.isInlineMode ? toolbar.offsetHeight : 0);
+
+			const offSticky = !this.#options.get('toolbar_container')
+				? editorHeight + t + stickyTop - y - minHeight
+				: editorOffset.top - currentScrollY + editorHeight - minHeight - stickyTop - toolbar.offsetHeight;
 			if (y < t) {
 				this.#offSticky();
 			} else if (offSticky < 0) {
@@ -372,12 +399,18 @@ class Toolbar {
 			isDirTop = selection.focusOffset < selection.anchorOffset;
 		} else {
 			const childNodes = dom.query.getListChildNodes(range.commonAncestorContainer, null, null);
-			isDirTop = dom.utils.getArrayIndex(childNodes, selection.focusNode) < dom.utils.getArrayIndex(childNodes, selection.anchorNode);
+			isDirTop =
+				dom.utils.getArrayIndex(childNodes, selection.focusNode) <
+				dom.utils.getArrayIndex(childNodes, selection.anchorNode);
 		}
 
 		this._setBalloonOffset(isDirTop, range);
 
-		this.#eventManager.triggerEvent('onShowToolbar', { toolbar, mode: 'balloon', frameContext: this.#frameContext });
+		this.#eventManager.triggerEvent('onShowToolbar', {
+			toolbar,
+			mode: 'balloon',
+			frameContext: this.#frameContext,
+		});
 	}
 
 	/**
@@ -392,7 +425,12 @@ class Toolbar {
 		const offsets = this.#$.offset.getGlobal(topArea);
 		const stickyTop = offsets.top;
 
-		if (!this.#$.offset.setRangePosition(toolbar, range, { position: positionTop ? 'top' : 'bottom', addTop: stickyTop })) {
+		if (
+			!this.#$.offset.setRangePosition(toolbar, range, {
+				position: positionTop ? 'top' : 'bottom',
+				addTop: stickyTop,
+			})
+		) {
 			this.hide();
 			return;
 		}
@@ -404,7 +442,10 @@ class Toolbar {
 			let left = container.offsetLeft;
 			let top = container.offsetTop;
 
-			while (!container.parentElement.contains(editorParent) && !/^(BODY|HTML)$/i.test(container.parentElement.nodeName)) {
+			while (
+				!container.parentElement.contains(editorParent) &&
+				!/^(BODY|HTML)$/i.test(container.parentElement.nodeName)
+			) {
 				container = /** @type {HTMLElement} */ (container.offsetParent);
 				left += container.offsetLeft;
 				top += container.offsetTop;
@@ -438,9 +479,18 @@ class Toolbar {
 		this.inlineToolbarAttr.width = toolbar.style.width = this.#options.get(this.keyName.width);
 		if (this.isBottomMode) {
 			const topArea = this.#frameContext.get('topArea');
-			this.inlineToolbarAttr.top = toolbar.style.top = this.#$.offset.getGlobal(topArea).top + topArea.offsetHeight - this.#$.offset.getGlobal(toolbar).top + 'px';
+			this.inlineToolbarAttr.top = toolbar.style.top =
+				this.#$.offset.getGlobal(topArea).top +
+				topArea.offsetHeight -
+				this.#$.offset.getGlobal(toolbar).top +
+				'px';
 		} else {
-			this.inlineToolbarAttr.top = toolbar.style.top = -1 + (this.#$.offset.getGlobal(this.#frameContext.get('topArea')).top - this.#$.offset.getGlobal(toolbar).top - toolbar.offsetHeight) + 'px';
+			this.inlineToolbarAttr.top = toolbar.style.top =
+				-1 +
+				(this.#$.offset.getGlobal(this.#frameContext.get('topArea')).top -
+					this.#$.offset.getGlobal(toolbar).top -
+					toolbar.offsetHeight) +
+				'px';
 		}
 
 		this._resetSticky();
@@ -470,7 +520,9 @@ class Toolbar {
 	_moreLayerOff() {
 		if (this.currentMoreLayerActiveButton) {
 			/** @type {HTMLElement} */
-			const layer = this.#context.get(this.keyName.main).querySelector('.' + this.currentMoreLayerActiveButton.getAttribute('data-command'));
+			const layer = this.#context
+				.get(this.keyName.main)
+				.querySelector('.' + this.currentMoreLayerActiveButton.getAttribute('data-command'));
 			layer.style.display = 'none';
 			dom.utils.removeClass(this.currentMoreLayerActiveButton, 'on');
 			this.currentMoreLayerActiveButton = null;
@@ -484,7 +536,9 @@ class Toolbar {
 		const toolbar = this.#context.get(this.keyName.main);
 
 		if (!this.isInlineMode) {
-			const stickyDummy = !this.#options.get('toolbar_container') ? this.#frameContext.get('_stickyDummy') : this.#context.get('_stickyDummy');
+			const stickyDummy = !this.#options.get('toolbar_container')
+				? this.#frameContext.get('_stickyDummy')
+				: this.#context.get('_stickyDummy');
 			stickyDummy.style.height = toolbar.offsetHeight + 'px';
 			stickyDummy.style.display = 'block';
 		}
@@ -554,7 +608,9 @@ class Toolbar {
 	 * @description Disable `sticky` toolbar mode.
 	 */
 	#offSticky() {
-		const stickyDummy = !this.#options.get('toolbar_container') ? this.#frameContext.get('_stickyDummy') : this.#context.get('_stickyDummy');
+		const stickyDummy = !this.#options.get('toolbar_container')
+			? this.#frameContext.get('_stickyDummy')
+			: this.#context.get('_stickyDummy');
 		stickyDummy.style.display = 'none';
 
 		const toolbar = this.#context.get(this.keyName.main);

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

@@ -128,7 +128,8 @@ class Viewer {
 			codeWrapper.style.setProperty('display', 'none', 'important');
 			wysiwygFrame.style.display = 'block';
 
-			if (this.#frameOptions.get('height') === 'auto' && !this.#options.get('hasCodeMirror')) fc.get('code').style.height = '0px';
+			if (this.#frameOptions.get('height') === 'auto' && !this.#options.get('hasCodeMirror'))
+				fc.get('code').style.height = '0px';
 
 			if (!fc.get('isFullScreen')) {
 				this.#$.ui.preventToolbarHide(false);
@@ -200,7 +201,8 @@ class Viewer {
 			if (fc.get('isFullScreen')) {
 				markdownFrame.style.height = '100%';
 			} else if (this.#frameOptions.get('height') === 'auto') {
-				markdownFrame.style.height = markdownFrame.scrollHeight > 0 ? markdownFrame.scrollHeight + 'px' : 'auto';
+				markdownFrame.style.height =
+					markdownFrame.scrollHeight > 0 ? markdownFrame.scrollHeight + 'px' : 'auto';
 			}
 
 			if (!fc.get('isFullScreen')) {
@@ -294,7 +296,9 @@ class Viewer {
 		const arrow = this.#context.get('toolbar_arrow');
 
 		this.#$.ui.offCurrentController();
-		const wasToolbarHidden = toolbar.style.display === 'none' || (this.#store.mode.isInline && !this.#$.toolbar.inlineToolbarAttr.isShow);
+		const wasToolbarHidden =
+			toolbar.style.display === 'none' ||
+			(this.#store.mode.isInline && !this.#$.toolbar.inlineToolbarAttr.isShow);
 
 		if (value) {
 			this.#originCssText = topArea.style.cssText;
@@ -341,18 +345,25 @@ class Viewer {
 
 			// frame
 			editorArea.style.cssText = toolbar.style.cssText = '';
-			wysiwygFrame.style.cssText = (wysiwygFrame.style.cssText.match(/\s?display(\s+)?:(\s+)?[a-zA-Z]+;/) || [''])[0] + this.#frameOptions.get('_defaultStyles').editor + (isCodeView || isMarkdownView ? 'display: none;' : '');
+			wysiwygFrame.style.cssText =
+				(wysiwygFrame.style.cssText.match(/\s?display(\s+)?:(\s+)?[a-zA-Z]+;/) || [''])[0] +
+				this.#frameOptions.get('_defaultStyles').editor +
+				(isCodeView || isMarkdownView ? 'display: none;' : '');
 
 			// code wrapper
 			if (codeWrapper) {
-				codeWrapper.style.cssText = (codeWrapper.style.cssText.match(/\s?display(\s+)?:(\s+)?[a-zA-Z]+;/) || [''])[0] + `display: ${!isCodeView ? 'none' : 'flex'} !important;`;
+				codeWrapper.style.cssText =
+					(codeWrapper.style.cssText.match(/\s?display(\s+)?:(\s+)?[a-zA-Z]+;/) || [''])[0] +
+					`display: ${!isCodeView ? 'none' : 'flex'} !important;`;
 				codeWrapper.style.overflow = 'auto';
 				codeWrapper.style.height = '100%';
 			}
 
 			// markdown wrapper
 			if (markdownWrapper) {
-				markdownWrapper.style.cssText = (markdownWrapper.style.cssText.match(/\s?display(\s+)?:(\s+)?[a-zA-Z]+;/) || [''])[0] + `display: ${!isMarkdownView ? 'none' : 'flex'} !important;`;
+				markdownWrapper.style.cssText =
+					(markdownWrapper.style.cssText.match(/\s?display(\s+)?:(\s+)?[a-zA-Z]+;/) || [''])[0] +
+					`display: ${!isMarkdownView ? 'none' : 'flex'} !important;`;
 				markdownWrapper.style.overflow = 'auto';
 				markdownWrapper.style.height = '100%';
 			}
@@ -367,7 +378,11 @@ class Viewer {
 			toolbar.style.display = 'block';
 
 			this.#fullScreenInnerHeight = _w.innerHeight - toolbar.offsetHeight;
-			editorArea.style.height = this.#fullScreenInnerHeight - (fc.has('statusbar') ? fc.get('statusbar').offsetHeight : 0) - this.#options.get('fullScreenOffset') + 'px';
+			editorArea.style.height =
+				this.#fullScreenInnerHeight -
+				(fc.has('statusbar') ? fc.get('statusbar').offsetHeight : 0) -
+				this.#options.get('fullScreenOffset') +
+				'px';
 
 			if (this.#frameOptions.get('iframe') && this.#frameOptions.get('height') === 'auto') {
 				editorArea.style.overflow = 'auto';
@@ -383,11 +398,15 @@ class Viewer {
 			});
 		} else {
 			// frame
-			wysiwygFrame.style.cssText = this.#wysiwygOriginCssText.replace(/\s?display(\s+)?:(\s+)?[a-zA-Z]+;/, '') + (isCodeView || isMarkdownView ? 'display: none;' : '');
+			wysiwygFrame.style.cssText =
+				this.#wysiwygOriginCssText.replace(/\s?display(\s+)?:(\s+)?[a-zA-Z]+;/, '') +
+				(isCodeView || isMarkdownView ? 'display: none;' : '');
 
 			// code wrapper
 			if (codeWrapper) {
-				codeWrapper.style.cssText = this.#codeWrapperOriginCssText.replace(/\s?display(\s+)?:(\s+)?[a-zA-Z]+;/, '') + `display: ${!isCodeView ? 'none' : 'flex'} !important;`;
+				codeWrapper.style.cssText =
+					this.#codeWrapperOriginCssText.replace(/\s?display(\s+)?:(\s+)?[a-zA-Z]+;/, '') +
+					`display: ${!isCodeView ? 'none' : 'flex'} !important;`;
 			}
 
 			// code
@@ -396,7 +415,9 @@ class Viewer {
 
 			// markdown wrapper
 			if (markdownWrapper) {
-				markdownWrapper.style.cssText = this.#markdownWrapperOriginCssText.replace(/\s?display(\s+)?:(\s+)?[a-zA-Z]+;/, '') + `display: ${!isMarkdownView ? 'none' : 'flex'} !important;`;
+				markdownWrapper.style.cssText =
+					this.#markdownWrapperOriginCssText.replace(/\s?display(\s+)?:(\s+)?[a-zA-Z]+;/, '') +
+					`display: ${!isMarkdownView ? 'none' : 'flex'} !important;`;
 			}
 			if (markdownFrame) markdownFrame.style.cssText = this.#markdownOriginCssText;
 			if (markdownNumbers) markdownNumbers.style.cssText = this.#markdownNumberOriginCssText;
@@ -408,7 +429,8 @@ class Viewer {
 			if (arrow) arrow.style.cssText = this.#arrowOriginCssText;
 			_d.body.style.overflow = this.#bodyOverflow;
 
-			if (this.#frameOptions.get('height') === 'auto' && !this.#options.get('hasCodeMirror')) this._codeViewAutoHeight(fc.get('code'), fc.get('codeNumbers'), true);
+			if (this.#frameOptions.get('height') === 'auto' && !this.#options.get('hasCodeMirror'))
+				this._codeViewAutoHeight(fc.get('code'), fc.get('codeNumbers'), true);
 
 			if (this.#toolbarParent) {
 				this.#toolbarParent.appendChild(toolbar);
@@ -522,7 +544,9 @@ class Viewer {
 		_d.body.appendChild(iframe);
 
 		const innerPadding = _w.getComputedStyle(this.#frameContext.get('wysiwyg')).padding;
-		const contentHTML = this.#options.get('printTemplate') ? this.#options.get('printTemplate').replace(/\{\{\s*contents\s*\}\}/i, this.#$.html.get()) : this.#$.html.get();
+		const contentHTML = this.#options.get('printTemplate')
+			? this.#options.get('printTemplate').replace(/\{\{\s*contents\s*\}\}/i, this.#$.html.get())
+			: this.#$.html.get();
 		const printDocument = dom.query.getIframeDocument(iframe);
 		const wDoc = this.#frameContext.get('_wd');
 		const rtlClass = this.#options.get('_rtl') ? ' se-rtl' : '';
@@ -613,7 +637,11 @@ class Viewer {
 		this.#$.ui.offCurrentController();
 		this.#$.ui.offCurrentModal();
 
-		const contentHTML = this.#options.get('previewTemplate') ? this.#options.get('previewTemplate').replace(/\{\{\s*contents\s*\}\}/i, this.#$.html.get({ withFrame: true })) : this.#$.html.get({ withFrame: true });
+		const contentHTML = this.#options.get('previewTemplate')
+			? this.#options
+					.get('previewTemplate')
+					.replace(/\{\{\s*contents\s*\}\}/i, this.#$.html.get({ withFrame: true }))
+			: this.#$.html.get({ withFrame: true });
 		const windowObject = _w.open('', '_blank');
 		const wDoc = this.#frameContext.get('_wd');
 		const rtlClass = this.#options.get('_rtl') ? ' se-rtl' : '';
@@ -670,7 +698,11 @@ class Viewer {
 	 */
 	_resetFullScreenHeight() {
 		if (this.#frameContext.get('isFullScreen')) {
-			this.#fullScreenInnerHeight += _w.innerHeight - this.#context.get('toolbar_main').offsetHeight - (this.#frameContext.has('statusbar') ? this.#frameContext.get('statusbar').offsetHeight : 0) - this.#fullScreenInnerHeight;
+			this.#fullScreenInnerHeight +=
+				_w.innerHeight -
+				this.#context.get('toolbar_main').offsetHeight -
+				(this.#frameContext.has('statusbar') ? this.#frameContext.get('statusbar').offsetHeight : 0) -
+				this.#fullScreenInnerHeight;
 			this.#frameContext.get('wrapper').style.height = this.#fullScreenInnerHeight + 'px';
 			return true;
 		}
@@ -795,12 +827,22 @@ class Viewer {
 			}
 
 			let headers = parseDocument.head.innerHTML;
-			if (!parseDocument.head.querySelector('link[rel="stylesheet"]') || (this.#frameOptions.get('height') === 'auto' && !parseDocument.head.querySelector('style'))) {
-				headers += converter._setIframeStyleLinks(this.#frameOptions.get('iframe_cssFileName')) + converter._setAutoHeightStyle(this.#frameOptions.get('height'));
+			if (
+				!parseDocument.head.querySelector('link[rel="stylesheet"]') ||
+				(this.#frameOptions.get('height') === 'auto' && !parseDocument.head.querySelector('style'))
+			) {
+				headers +=
+					converter._setIframeStyleLinks(this.#frameOptions.get('iframe_cssFileName')) +
+					converter._setAutoHeightStyle(this.#frameOptions.get('height'));
 			}
 
 			wDoc.head.innerHTML = headers;
-			wDoc.body.innerHTML = this.#$.html.clean(parseDocument.body.innerHTML, { forceFormat: true, whitelist: null, blacklist: null, _freeCodeViewMode: this.#options.get('freeCodeViewMode') });
+			wDoc.body.innerHTML = this.#$.html.clean(parseDocument.body.innerHTML, {
+				forceFormat: true,
+				whitelist: null,
+				blacklist: null,
+				_freeCodeViewMode: this.#options.get('freeCodeViewMode'),
+			});
 
 			const attrs = parseDocument.body.attributes;
 			for (let i = 0, len = attrs.length; i < len; i++) {
@@ -816,7 +858,12 @@ class Viewer {
 		} else {
 			this.#frameContext.get('wysiwyg').innerHTML =
 				code_html.length > 0
-					? this.#$.html.clean(code_html, { forceFormat: true, whitelist: null, blacklist: null, _freeCodeViewMode: this.#options.get('freeCodeViewMode') })
+					? this.#$.html.clean(code_html, {
+							forceFormat: true,
+							whitelist: null,
+							blacklist: null,
+							_freeCodeViewMode: this.#options.get('freeCodeViewMode'),
+						})
 					: '<' + this.#options.get('defaultLine') + '><br></' + this.#options.get('defaultLine') + '>';
 		}
 	}
@@ -830,7 +877,14 @@ class Viewer {
 
 		if (this.#frameOptions.get('iframe_fullPage')) {
 			const attrs = dom.utils.getAttributesToString(this.#frameContext.get('_wd').body, null);
-			codeValue = '<!DOCTYPE html>\n<html>\n' + this.#frameContext.get('_wd').head.outerHTML.replace(/>(?!\n)/g, '>\n') + '<body ' + attrs + '>\n' + codeContent + '</body>\n</html>';
+			codeValue =
+				'<!DOCTYPE html>\n<html>\n' +
+				this.#frameContext.get('_wd').head.outerHTML.replace(/>(?!\n)/g, '>\n') +
+				'<body ' +
+				attrs +
+				'>\n' +
+				codeContent +
+				'</body>\n</html>';
 		} else {
 			codeValue = codeContent;
 		}
@@ -855,7 +909,9 @@ class Viewer {
 		const html = markdown.markdownToHtml(md, this.#options.get('defaultLine'));
 
 		this.#frameContext.get('wysiwyg').innerHTML =
-			html.length > 0 ? this.#$.html.clean(html, { forceFormat: true, whitelist: null, blacklist: null }) : '<' + this.#options.get('defaultLine') + '><br></' + this.#options.get('defaultLine') + '>';
+			html.length > 0
+				? this.#$.html.clean(html, { forceFormat: true, whitelist: null, blacklist: null })
+				: '<' + this.#options.get('defaultLine') + '><br></' + this.#options.get('defaultLine') + '>';
 	}
 
 	/**

package/src/core/logic/shell/_commandExecutor.js

@@ -59,7 +59,13 @@ export default class CommandExecutor {
 	 * @description Execute default command of command button
 	 */
 	async execute(command, button) {
-		if (this.#frameContext.get('isReadOnly') && !/copy|cut|selectAll|selectAll_full|codeView|markdownView|fullScreen|print|preview|showBlocks|finder/.test(command)) return;
+		if (
+			this.#frameContext.get('isReadOnly') &&
+			!/copy|cut|selectAll|selectAll_full|codeView|markdownView|fullScreen|print|preview|showBlocks|finder/.test(
+				command,
+			)
+		)
+			return;
 
 		switch (command) {
 			case 'selectAll':
@@ -162,7 +168,11 @@ export default class CommandExecutor {
 			this.#$.inline.remove();
 
 			if (n) {
-				const insertedNode = this.#$.inline.apply(n, { stylesToModify: null, nodesToRemove: [n.nodeName], strictRemove: false });
+				const insertedNode = this.#$.inline.apply(n, {
+					stylesToModify: null,
+					nodesToRemove: [n.nodeName],
+					strictRemove: false,
+				});
 				const { parent, inner } = this.#$.nodeTransform.createNestedNode(_styleNode);
 				insertedNode.parentNode.insertBefore(parent, insertedNode);
 				inner.appendChild(insertedNode);
@@ -200,14 +210,25 @@ export default class CommandExecutor {
 			let commonNodeName = (prevScopeTagName = commonNode.nodeName?.toLowerCase());
 			if (range.startOffset === 0 && range.endOffset === range.endContainer.textContent?.length) {
 				const commonParent = commonNode.parentElement;
-				if ((dom.check.isList(commonParent) || dom.check.isListCell(commonParent)) && commonParent.firstChild.contains?.(range.startContainer) && commonParent.lastChild?.contains(range.endContainer)) {
+				if (
+					(dom.check.isList(commonParent) || dom.check.isListCell(commonParent)) &&
+					commonParent.firstChild.contains?.(range.startContainer) &&
+					commonParent.lastChild?.contains(range.endContainer)
+				) {
 					prevScopeTag = commonNode = commonParent.parentElement;
 					prevScopeTagName = commonNode.nodeName?.toLowerCase();
 				}
 			}
 
 			commonNodeName = commonNode.nodeName?.toLowerCase();
-			while (commonNode && ((!commonNode.nextSibling && !commonNode.previousSibling && !scopeSelectionTags.includes(commonNodeName)) || dom.check.isContentLess(commonNodeName)) && commonNode !== ww) {
+			while (
+				commonNode &&
+				((!commonNode.nextSibling &&
+					!commonNode.previousSibling &&
+					!scopeSelectionTags.includes(commonNodeName)) ||
+					dom.check.isContentLess(commonNodeName)) &&
+				commonNode !== ww
+			) {
 				commonNode = commonNode.parentElement;
 				commonNodeName = commonNode.nodeName?.toLowerCase();
 			}
@@ -220,7 +241,9 @@ export default class CommandExecutor {
 
 		// select all
 		const scopeTagList = scopeSelectionTags.filter((tagName) => tagName !== prevScopeTagName);
-		const scopeBaseTag = dom.query.getParentElement(prevScopeTag || this.#$.selection.getNode(), (current) => scopeTagList.includes(current.nodeName?.toLowerCase()));
+		const scopeBaseTag = dom.query.getParentElement(prevScopeTag || this.#$.selection.getNode(), (current) =>
+			scopeTagList.includes(current.nodeName?.toLowerCase()),
+		);
 
 		let selectArea = scopeBaseTag || ww;
 		let { first, last } = __findFirstAndLast(selectArea);
@@ -230,7 +253,11 @@ export default class CommandExecutor {
 		const isZeroWidth = dom.check.isZeroWidth;
 		while (isZeroWidth(first) && isZeroWidth(last) && selectArea !== ww) {
 			selectArea = selectArea.parentElement;
-			({ first, last } = __findFirstAndLast(dom.query.getParentElement(selectArea, (current) => scopeTagList.includes(current.nodeName?.toLowerCase())) || ww));
+			({ first, last } = __findFirstAndLast(
+				dom.query.getParentElement(selectArea, (current) =>
+					scopeTagList.includes(current.nodeName?.toLowerCase()),
+				) || ww,
+			));
 		}
 
 		if (!first || !last) return;
@@ -371,7 +398,9 @@ export default class CommandExecutor {
 		command = this.#options.get('_defaultTagCommand')[command.toLowerCase()] || command;
 		let nodeName = this.#options.get('convertTextTags')[command] || command;
 		const nodesMap = this.#store.get('currentNodesMap');
-		const el = nodesMap.includes(this.#options.get('_styleCommandMap')[nodeName]) ? null : dom.utils.createElement(nodeName);
+		const el = nodesMap.includes(this.#options.get('_styleCommandMap')[nodeName])
+			? null
+			: dom.utils.createElement(nodeName);
 
 		if (/^sub$/i.test(nodeName) && nodesMap.includes('superscript')) {
 			nodeName = 'sup';
@@ -379,7 +408,11 @@ export default class CommandExecutor {
 			nodeName = 'sub';
 		}
 
-		this.#$.inline.apply(el, { stylesToModify: StyleMap[command] || null, nodesToRemove: [nodeName], strictRemove: false });
+		this.#$.inline.apply(el, {
+			stylesToModify: StyleMap[command] || null,
+			nodesToRemove: [nodeName],
+			strictRemove: false,
+		});
 		this.#$.focusManager.focus();
 	}
 
@@ -387,7 +420,9 @@ export default class CommandExecutor {
 	 * @description Inserts a page break element into the editor.
 	 */
 	#PAGE_BREAK() {
-		const pageBreak = dom.utils.createElement('DIV', { class: 'se-component se-component-line-break se-page-break' });
+		const pageBreak = dom.utils.createElement('DIV', {
+			class: 'se-component se-component-line-break se-page-break',
+		});
 		this.#$.component.insert(pageBreak, { skipCharCount: true, insertBehavior: 'line' });
 		const line = pageBreak.nextElementSibling || this.#$.format.addLine(pageBreak);
 		this.#$.selection.setRange(line, 1, line, 1);

package/src/core/logic/shell/commandDispatcher.js

@@ -9,14 +9,35 @@ export const COMMAND_BUTTONS = '.se-menu-list .se-toolbar-btn[data-command]';
  * - These commands typically apply inline formatting or structural changes.
  * @constant {string[]}
  */
-const ACTIVE_EVENT_COMMANDS = ['bold', 'underline', 'italic', 'strike', 'subscript', 'superscript', 'indent', 'outdent'];
+const ACTIVE_EVENT_COMMANDS = [
+	'bold',
+	'underline',
+	'italic',
+	'strike',
+	'subscript',
+	'superscript',
+	'indent',
+	'outdent',
+];
 
 /**
  * @description List of basic editor commands, including active event commands and additional actions
  * - such as undo, redo, saving, full-screen toggle, and text direction commands.
  * @constant {string[]}
  */
-const BASIC_COMMANDS = ACTIVE_EVENT_COMMANDS.concat(['undo', 'redo', 'save', 'fullScreen', 'showBlocks', 'codeView', 'markdownView', 'finder', 'dir', 'dir_ltr', 'dir_rtl']);
+const BASIC_COMMANDS = ACTIVE_EVENT_COMMANDS.concat([
+	'undo',
+	'redo',
+	'save',
+	'fullScreen',
+	'showBlocks',
+	'codeView',
+	'markdownView',
+	'finder',
+	'dir',
+	'dir_ltr',
+	'dir_rtl',
+]);
 
 /**
  * @description Routes toolbar button commands to their handlers and manages active button states.
@@ -103,14 +124,20 @@ export default class CommandDispatcher {
 				return;
 			}
 
-			if (/container/.test(type) && (this.#$.menu.targetMap[command] === null || button !== this.#$.menu.currentContainerActiveButton)) {
+			if (
+				/container/.test(type) &&
+				(this.#$.menu.targetMap[command] === null || button !== this.#$.menu.currentContainerActiveButton)
+			) {
 				this.#$.menu.containerOn(button);
 				return;
 			}
 
 			if (this.#$.ui.isButtonDisabled(button)) return;
 
-			if (/dropdown/.test(type) && (this.#$.menu.targetMap[command] === null || button !== this.#$.menu.currentDropdownActiveButton)) {
+			if (
+				/dropdown/.test(type) &&
+				(this.#$.menu.targetMap[command] === null || button !== this.#$.menu.currentDropdownActiveButton)
+			) {
 				this.#$.menu.dropdownOn(button);
 				return;
 			} else if (/modal/.test(type)) {
@@ -184,6 +211,21 @@ export default class CommandDispatcher {
 		}
 	}
 
+	/**
+	 * @description Inverse of {@link registerTargets}. Removes a previously registered target so
+	 * ephemeral participants (e.g. CommandMenu rows) can opt out of the active-state pass on close.
+	 * Drops the command entry when its target array empties.
+	 * @param {string} cmd - The command identifier.
+	 * @param {HTMLElement} target - The target previously registered.
+	 */
+	unregisterTargets(cmd, target) {
+		const arr = this.#commandTargets.get(cmd);
+		if (!arr) return;
+		const i = arr.indexOf(/** @type {HTMLButtonElement} */ (target));
+		if (i !== -1) arr.splice(i, 1);
+		if (arr.length === 0) this.#commandTargets.delete(cmd);
+	}
+
 	resetTargets() {
 		this.#commandTargets = new Map();
 		this._initCommandButtons();