suneditor 3.1.3 → 3.2.0

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

@@ -65,8 +65,10 @@ class Component {
 		this.currentTarget = null;
 
 		/**
-		 * @description Currently selected component plugin instance
-		 * @type {*}
+		 * @description Currently selected component plugin instance (a full plugin) or a
+		 * launcher stand-in for non-plugin components (e.g. `pageBreak`). Consumers call the
+		 * shared component hooks (`componentDestroy`/`componentSelect`/`componentDeselect`) on it.
+		 * @type {?SunEditor.ComponentLauncher}
 		 */
 		this.currentPlugin = null;
 
@@ -101,7 +103,11 @@ class Component {
 	_init() {
 		this.#contextProvider.applyToRoots((e) => {
 			// drag
-			const dragHandle = dom.utils.createElement('DIV', { class: 'se-drag-handle', draggable: 'true' }, this.#contextProvider.icons.selection);
+			const dragHandle = dom.utils.createElement(
+				'DIV',
+				{ class: 'se-drag-handle', draggable: 'true' },
+				this.#contextProvider.icons.selection,
+			);
 			e.get('wrapper').appendChild(dragHandle);
 			this.#eventManager.addEvent(dragHandle, 'mouseenter', this.#OnDragEnter.bind(this));
 			this.#eventManager.addEvent(dragHandle, 'mouseleave', this.#OnDragLeave.bind(this));
@@ -139,15 +145,36 @@ class Component {
 
 		try {
 			if (dom.check.isListCell(formatEl)) {
-				this.#$.html.insertNode(element, { afterNode: isInline ? null : !dom.check.isZeroWidth(selectionNode) ? null : (selectionNode || r.container || {}).nextSibling, skipCharCount: true });
+				this.#$.html.insertNode(element, {
+					afterNode: isInline
+						? null
+						: !dom.check.isZeroWidth(selectionNode)
+							? null
+							: (selectionNode || r.container || {}).nextSibling,
+					skipCharCount: true,
+				});
 				if (!isInline && !element.nextSibling) element.parentNode.appendChild(dom.utils.createElement('BR'));
 			} else {
-				if (!isInline && this.#$.selection.getRange().collapsed && (r.container?.nodeType === 3 || dom.check.isBreak(r.container))) {
-					const depthFormat = dom.query.getParentElement(r.container, this.#$.format.isBlock.bind(this.#$.format));
-					oNode = this.#$.nodeTransform.split(r.container, r.offset, !depthFormat ? 0 : dom.query.getNodeDepth(depthFormat) + 1);
+				if (
+					!isInline &&
+					this.#$.selection.getRange().collapsed &&
+					(r.container?.nodeType === 3 || dom.check.isBreak(r.container))
+				) {
+					const depthFormat = dom.query.getParentElement(
+						r.container,
+						this.#$.format.isBlock.bind(this.#$.format),
+					);
+					oNode = this.#$.nodeTransform.split(
+						r.container,
+						r.offset,
+						!depthFormat ? 0 : dom.query.getNodeDepth(depthFormat) + 1,
+					);
 					if (oNode) formatEl = /** @type {HTMLElement} */ (oNode.previousSibling);
 				}
-				this.#$.html.insertNode(element, { afterNode: isInline ? null : this.#$.format.isBlock(formatEl) ? null : formatEl, skipCharCount: true });
+				this.#$.html.insertNode(element, {
+					afterNode: isInline ? null : this.#$.format.isBlock(formatEl) ? null : formatEl,
+					skipCharCount: true,
+				});
 				if (!isInline && formatEl && dom.check.isZeroWidth(formatEl)) dom.utils.removeItem(formatEl);
 			}
 
@@ -243,7 +270,8 @@ class Component {
 		let launcher = null;
 
 		if (this.is(element)) {
-			if (dom.check.isComponentContainer(element) && !dom.utils.hasClass(element, 'se-inline-component')) element = /** @type {HTMLElement} */ (element).firstElementChild || element;
+			if (dom.check.isComponentContainer(element) && !dom.utils.hasClass(element, 'se-inline-component'))
+				element = /** @type {HTMLElement} */ (element).firstElementChild || element;
 			if (/^FIGURE$/i.test(element.nodeName)) element = /** @type {HTMLElement} */ (element).firstElementChild;
 			if (!element) return null;
 
@@ -296,7 +324,12 @@ class Component {
 	 */
 	select(element, pluginName, { isInput = false } = {}) {
 		const info = this.get(element);
-		if (!info || dom.check.isUneditable(dom.query.getParentElement(element, this.is.bind(this))) || dom.check.isUneditable(element)) return false;
+		if (
+			!info ||
+			dom.check.isUneditable(dom.query.getParentElement(element, this.is.bind(this))) ||
+			dom.check.isUneditable(element)
+		)
+			return false;
 
 		const plugin = info.launcher || this.#$.plugins[pluginName];
 		if (!plugin) return;
@@ -324,7 +357,8 @@ class Component {
 		if (typeof plugin.componentSelect === 'function') isNonFigureComponent = plugin.componentSelect(element);
 
 		const isBreakComponent = dom.utils.hasClass(info.target, 'se-component-line-break');
-		if (isBreakComponent || (!isNonFigureComponent && !dom.utils.hasClass(info.container, 'se-inline-component'))) this._setComponentLineBreaker(/** @type {HTMLElement} */ (info.container || info.cover || element));
+		if (isBreakComponent || (!isNonFigureComponent && !dom.utils.hasClass(info.container, 'se-inline-component')))
+			this._setComponentLineBreaker(/** @type {HTMLElement} */ (info.container || info.cover || element));
 
 		this.currentTarget = element;
 		this.currentPlugin = plugin;
@@ -365,7 +399,9 @@ class Component {
 
 			this.#store.set('controlActive', true);
 		} else if (isBreakComponent || !dom.utils.hasClass(info.container, 'se-input-component')) {
-			const dragHandle = /** @type {HTMLElement} */ (this.#frameContext.get('wrapper').querySelector('.se-drag-handle'));
+			const dragHandle = /** @type {HTMLElement} */ (
+				this.#frameContext.get('wrapper').querySelector('.se-drag-handle')
+			);
 			dom.utils.addClass(dragHandle, 'se-drag-handle-full');
 			this.#$.ui._visibleControllers(false, false);
 
@@ -435,7 +471,12 @@ class Component {
 		if (dom.utils.hasClass(element, 'se-inline-component')) return true;
 
 		const comp = this.#$.pluginManager.findComponentInfo(element);
-		if (comp && (dom.utils.hasClass(element, 'se-inline-component') || dom.utils.hasClass(element.parentElement, 'se-inline-component'))) return true;
+		if (
+			comp &&
+			(dom.utils.hasClass(element, 'se-inline-component') ||
+				dom.utils.hasClass(element.parentElement, 'se-inline-component'))
+		)
+			return true;
 
 		return false;
 	}
@@ -518,7 +559,9 @@ class Component {
 		}
 
 		if (this.#frameContext.get('lineBreaker_t')) {
-			this.#frameContext.get('lineBreaker_t').style.display = this.#frameContext.get('lineBreaker_b').style.display = 'none';
+			this.#frameContext.get('lineBreaker_t').style.display = this.#frameContext.get(
+				'lineBreaker_b',
+			).style.display = 'none';
 		}
 
 		if (this.currentPlugin) {
@@ -563,7 +606,13 @@ class Component {
 		const { top, left, right, scrollX, scrollY } = this.#$.offset.getLocal(offsetTarget);
 		const sideOffset = isRtl ? right : left;
 
-		if (isList ? (!dom.check.isBreak(container.previousElementSibling) && !container.previousSibling?.textContent?.trim()) || this.is(container.previousElementSibling) : !this.#$.format.isLine(container.previousElementSibling)) {
+		if (
+			isList
+				? (!dom.check.isBreak(container.previousElementSibling) &&
+						!container.previousSibling?.textContent?.trim()) ||
+					this.is(container.previousElementSibling)
+				: !this.#$.format.isLine(container.previousElementSibling)
+		) {
 			const cStyle = _w.getComputedStyle(lb_t);
 			const cH = numbers.get(cStyle.height, 1);
 			const cW = numbers.get(cStyle.width, 1);
@@ -587,7 +636,12 @@ class Component {
 		}
 
 		// bottom
-		if (isList ? (!dom.check.isBreak(container.nextElementSibling) && !container.nextSibling?.textContent?.trim()) || this.is(container.nextElementSibling) : !this.#$.format.isLine(container.nextElementSibling)) {
+		if (
+			isList
+				? (!dom.check.isBreak(container.nextElementSibling) && !container.nextSibling?.textContent?.trim()) ||
+					this.is(container.nextElementSibling)
+				: !this.#$.format.isLine(container.nextElementSibling)
+		) {
 			const cStyle = _w.getComputedStyle(lb_b);
 			const cH = numbers.get(cStyle.height, 1);
 			const cW = numbers.get(cStyle.width, 1);
@@ -599,7 +653,8 @@ class Component {
 			}
 
 			b_style.top = componentTop + target.offsetHeight - cH / 2 + 'px';
-			b_style[dir[0]] = sideOffset + target.offsetWidth - (isNonSelected ? 0 : w) - (isNonSelected ? cW / 2 : cW) + 'px';
+			b_style[dir[0]] =
+				sideOffset + target.offsetWidth - (isNonSelected ? 0 : w) - (isNonSelected ? cW / 2 : cW) + 'px';
 			b_style[dir[1]] = '';
 
 			lb_b.setAttribute('data-offset', scrollY + ',' + dir[0] + ',' + scrollX);
@@ -659,7 +714,11 @@ class Component {
 	 */
 	#addNotFileGlobalEvent() {
 		this.#removeNotFileGlobalEvent();
-		this.#bindClose_mousedown = this.#eventManager.addGlobalEvent(isMobile ? 'click' : 'mousedown', this.#globalEvents.mousedown, true);
+		this.#bindClose_mousedown = this.#eventManager.addGlobalEvent(
+			isMobile ? 'click' : 'mousedown',
+			this.#globalEvents.mousedown,
+			true,
+		);
 	}
 
 	/**
@@ -703,19 +762,26 @@ class Component {
 		const nodeName = element.nodeName.toLowerCase();
 		return (
 			this.#$.pluginManager.fileInfo.regExp.test(nodeName) &&
-			(!this.#$.pluginManager.fileInfo.tagAttrs[nodeName] || this.#$.pluginManager.fileInfo.tagAttrs[nodeName]?.every((v) => /** @type {HTMLElement} */ (element).hasAttribute(v)))
+			(!this.#$.pluginManager.fileInfo.tagAttrs[nodeName] ||
+				this.#$.pluginManager.fileInfo.tagAttrs[nodeName]?.every((v) =>
+					/** @type {HTMLElement} */ (element).hasAttribute(v),
+				))
 		);
 	}
 
 	#OnDragEnter() {
 		this.#store.set('_preventBlur', true);
-		this.#$.ui._visibleControllers(false, dom.utils.hasClass(_DragHandle.get('__dragHandler'), 'se-drag-handle-full'));
+		this.#$.ui._visibleControllers(
+			false,
+			dom.utils.hasClass(_DragHandle.get('__dragHandler'), 'se-drag-handle-full'),
+		);
 		dom.utils.addClass(_DragHandle.get('__dragCover') || _DragHandle.get('__dragContainer'), 'se-drag-over');
 	}
 
 	#OnDragLeave() {
 		this.#store.set('_preventBlur', false);
-		if (!dom.utils.hasClass(_DragHandle.get('__dragHandler'), 'se-drag-handle-full')) this.#$.ui._visibleControllers(true, true);
+		if (!dom.utils.hasClass(_DragHandle.get('__dragHandler'), 'se-drag-handle-full'))
+			this.#$.ui._visibleControllers(true, true);
 		dom.utils.removeClass([_DragHandle.get('__dragCover'), _DragHandle.get('__dragContainer')], 'se-drag-over');
 	}
 
@@ -765,7 +831,8 @@ class Component {
 			this.currentTarget?.contains(target) ||
 			dom.query.getParentElement(target, '.se-controller') ||
 			dom.utils.hasClass(target, 'se-drag-handle') ||
-			(this.currentPluginName === this.#$.ui.currentControllerName && this.#$.ui.opendControllers.some(({ form }) => form.contains(target)))
+			(this.currentPluginName === this.#$.ui.currentControllerName &&
+				this.#$.ui.opendControllers.some(({ form }) => form.contains(target)))
 		) {
 			return;
 		}
@@ -783,7 +850,10 @@ class Component {
 		if (!info) return;
 
 		const cloneContainer = info.container.cloneNode(true);
-		if (typeof this.#$.plugins[info.pluginName]?.componentCopy !== 'function' || this.#$.plugins[info.pluginName].componentCopy({ event: e, cloneContainer, info }) === false) {
+		if (
+			typeof this.#$.plugins[info.pluginName]?.componentCopy !== 'function' ||
+			this.#$.plugins[info.pluginName].componentCopy({ event: e, cloneContainer, info }) === false
+		) {
 			SetClipboardComponent(e, cloneContainer, e.clipboardData);
 		}
 
@@ -833,7 +903,10 @@ class Component {
 			e.preventDefault();
 			e.stopPropagation();
 
-			if (typeof this.currentPlugin?.componentDestroy === 'function' && (!this.info.isInputType || !this.#store.get('hasFocus'))) {
+			if (
+				typeof this.currentPlugin?.componentDestroy === 'function' &&
+				(!this.info.isInputType || !this.#store.get('hasFocus'))
+			) {
 				const focusNode = this.info.container.previousSibling;
 				await this.currentPlugin.componentDestroy(this.currentTarget);
 				this.deselect();
@@ -857,7 +930,11 @@ class Component {
 			if (dom.check.isListCell(container.parentNode)) {
 				newEl = dom.utils.createElement('BR');
 			} else {
-				newEl = dom.utils.createElement(this.#$.format.isLine(sibling) ? sibling.nodeName : this.#options.get('defaultLine'), null, '<br>');
+				newEl = dom.utils.createElement(
+					this.#$.format.isLine(sibling) ? sibling.nodeName : this.#options.get('defaultLine'),
+					null,
+					'<br>',
+				);
 			}
 
 			const pluginName = this.currentPluginName;

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

@@ -35,13 +35,18 @@ export default class FocusManager {
 		if (this.#frameContext.get('wysiwygFrame').style.display === 'none') return;
 		this.#store.set('_preventBlur', false);
 
-		if (this.#frameOptions.get('iframe') || !this.#frameContext.get('wysiwyg').contains(this.#$.selection.getNode())) {
+		if (
+			this.#frameOptions.get('iframe') ||
+			!this.#frameContext.get('wysiwyg').contains(this.#$.selection.getNode())
+		) {
 			this.nativeFocus();
 		} else {
 			try {
 				const range = this.#$.selection.getRange();
 				if (range.startContainer === range.endContainer && dom.check.isWysiwygFrame(range.startContainer)) {
-					const currentNode = /** @type {HTMLElement} */ (range.commonAncestorContainer).children[range.startOffset];
+					const currentNode = /** @type {HTMLElement} */ (range.commonAncestorContainer).children[
+						range.startOffset
+					];
 					if (!this.#$.format.isLine(currentNode) && !this.#$.component.is(currentNode)) {
 						const br = dom.utils.createElement('BR');
 						const format = dom.utils.createElement(this.#options.get('defaultLine'), null, br);
@@ -50,7 +55,12 @@ export default class FocusManager {
 						return;
 					}
 				}
-				this.#$.selection.setRange(range.startContainer, range.startOffset, range.endContainer, range.endOffset);
+				this.#$.selection.setRange(
+					range.startContainer,
+					range.startOffset,
+					range.endContainer,
+					range.endOffset,
+				);
 			} catch (e) {
 				console.warn('[SUNEDITOR.focus.warn] ', e);
 				this.nativeFocus();

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

@@ -36,7 +36,8 @@ export default function History(kernel) {
 		// user event
 		eventManager.triggerEvent('onChange', { frameContext: fc, data: fc.get('wysiwyg').innerHTML });
 		if (context.get('toolbar_main').style.display === 'block') $.toolbar._showBalloon();
-		else if (store.mode.isSubBalloon && context.get('toolbar_sub_main').style.display === 'block') $.subToolbar._showBalloon();
+		else if (store.mode.isSubBalloon && context.get('toolbar_sub_main').style.display === 'block')
+			$.subToolbar._showBalloon();
 	}
 
 	/**
@@ -48,14 +49,17 @@ export default function History(kernel) {
 		const prevRoot = rootStack[prevKey];
 
 		stackIndex += increase;
-		const rootKey = increase < 0 && prevKey !== stack[stackIndex] && prevRoot.index > 0 ? prevKey : stack[stackIndex];
+		const rootKey =
+			increase < 0 && prevKey !== stack[stackIndex] && prevRoot.index > 0 ? prevKey : stack[stackIndex];
 		const root = rootStack[rootKey];
 		root.index += increase;
 
 		const item = root.value[root.index];
 
 		if (!item) {
-			console.warn('[SunEditor.history.setContent.fail] History state desynchronized. Aborting undo/redo operation.');
+			console.warn(
+				'[SunEditor.history.setContent.fail] History state desynchronized. Aborting undo/redo operation.',
+			);
 			// Rollback to prevent stuck state
 			root.index -= increase;
 			stackIndex -= increase;
@@ -84,7 +88,12 @@ export default function History(kernel) {
 		}
 
 		$.facade.changeFrameContext(focusKey);
-		$.selection.setRange(getNodeFromPath(focusItem.s.path, focusItem.frame), focusItem.s.offset, getNodeFromPath(focusItem.e.path, focusItem.frame), focusItem.e.offset);
+		$.selection.setRange(
+			getNodeFromPath(focusItem.s.path, focusItem.frame),
+			focusItem.s.offset,
+			getNodeFromPath(focusItem.e.path, focusItem.frame),
+			focusItem.e.offset,
+		);
 		$.focusManager.focus();
 
 		if (stackIndex < 0) stackIndex = 0;
@@ -309,7 +318,12 @@ export default function History(kernel) {
 		 * @param {string} [rootKey] The key of the root frame to overwrite.
 		 */
 		overwrite(rootKey) {
-			setStack(frameRoots.get(rootKey || store.get('rootKey')).get('wysiwyg').innerHTML, null, store.get('rootKey'), 0);
+			setStack(
+				frameRoots.get(rootKey || store.get('rootKey')).get('wysiwyg').innerHTML,
+				null,
+				store.get('rootKey'),
+				0,
+			);
 		},
 
 		/**
@@ -385,7 +399,8 @@ export default function History(kernel) {
 
 			const savedIndex = target.get('savedIndex');
 			const historyIndex = target.get('historyIndex');
-			const isChanged = savedIndex > -1 ? savedIndex !== index : isReset ? root.index > 0 : index > 0 && historyIndex !== index;
+			const isChanged =
+				savedIndex > -1 ? savedIndex !== index : isReset ? root.index > 0 : index > 0 && historyIndex !== index;
 
 			target.set('historyIndex', index);
 			target.set('isChanged', isChanged);

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

@@ -216,7 +216,9 @@ class PluginManager {
 	register(pluginName, targets, pluginOptions) {
 		let plugin = this.#plugins[pluginName];
 		if (!plugin) {
-			throw Error(`[SUNEDITOR.registerPlugin.fail] The called plugin does not exist or is in an invalid format. (pluginName: "${pluginName}")`);
+			throw Error(
+				`[SUNEDITOR.registerPlugin.fail] The called plugin does not exist or is in an invalid format. (pluginName: "${pluginName}")`,
+			);
 		} else if (typeof this.#plugins[pluginName] === 'function') {
 			plugin = this.#plugins[pluginName] = new this.#plugins[pluginName](this.#kernel, pluginOptions || {});
 		}
@@ -227,7 +229,10 @@ class PluginManager {
 				UpdateButton(targets[i], plugin, icons, lang);
 			}
 
-			if (!this.#$.commandDispatcher.activeCommands.includes(pluginName) && typeof this.#plugins[pluginName].active === 'function') {
+			if (
+				!this.#$.commandDispatcher.activeCommands.includes(pluginName) &&
+				typeof this.#plugins[pluginName].active === 'function'
+			) {
 				this.#$.commandDispatcher.activeCommands.push(pluginName);
 			}
 		}
@@ -308,24 +313,27 @@ class PluginManager {
 			this.#componentCheckers.push(
 				function (focusManager, history, element) {
 					if (!element || !dom.utils.hasClass(element, 'se-page-break')) return null;
-					return {
-						target: element,
-						launcher: {
-							destroy: (target) => {
-								const focusEl = target.previousElementSibling || target.nextElementSibling;
-								dom.utils.removeItem(target);
-								// focus
-								focusManager.focusEdge(focusEl);
-								history.push(false);
-							},
+					// Typed as an assignment (not a cast) so a mis-named hook (e.g. `destroy`) is a tsc excess-property error.
+					/** @type {SunEditor.ComponentLauncher} */
+					const launcher = {
+						componentDestroy: (target) => {
+							const focusEl = target.previousElementSibling || target.nextElementSibling;
+							dom.utils.removeItem(target);
+							// focus
+							focusManager.focusEdge(focusEl);
+							history.push(false);
 						},
 					};
+					return { target: element, launcher };
 				}.bind(null, this.#$.focusManager, this.#$.history),
 			);
 		}
 
 		this.#fileInfo.regExp = new RegExp(`^(${this.#fileInfo.tags.join('|') || '\\^'})$`, 'i');
-		this.#fileInfo.pluginRegExp = new RegExp(`^(${filePluginRegExp.length === 0 ? '\\^' : filePluginRegExp.join('|')})$`, 'i');
+		this.#fileInfo.pluginRegExp = new RegExp(
+			`^(${filePluginRegExp.length === 0 ? '\\^' : filePluginRegExp.join('|')})$`,
+			'i',
+		);
 
 		this.#pluginCallButtons = null;
 		this.#pluginCallButtons_sub = null;

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

@@ -74,7 +74,15 @@ class Shortcuts {
 			info = this.keyMap.get(text) || this.keyMap.get(text + event.key);
 		}
 
-		if (!info || (!shift && info.s) || (info.space && !keyCodeMap.isSpace(keyCode)) || (info.enter && !keyCodeMap.isEnter(keyCode)) || (info.textTrigger && !event.key.trim()) || (info.edge && !edge)) return false;
+		if (
+			!info ||
+			(!shift && info.s) ||
+			(info.space && !keyCodeMap.isSpace(keyCode)) ||
+			(info.enter && !keyCodeMap.isEnter(keyCode)) ||
+			(info.textTrigger && !event.key.trim()) ||
+			(info.edge && !edge)
+		)
+			return false;
 
 		if (info.plugin && typeof info.method === 'string') {
 			this.#$.plugins[info.plugin][info.method]?.({ range, line, info, event, keyCode });