suneditor 3.0.0-beta.26 → 3.0.0-beta.28

package/src/core/{base → event}/eventManager.js

@@ -7,11 +7,12 @@ import { dom, unicode, numbers, env, converter } from '../../helper';
 import { _DragHandle } from '../../modules';
 
 // event handlers
-import { ButtonsHandler, OnClick_menuTray, OnClick_toolbar } from './eventHandlers/handler_toolbar';
-import { OnMouseDown_wysiwyg, OnMouseUp_wysiwyg, OnClick_wysiwyg, OnMouseMove_wysiwyg, OnMouseLeave_wysiwyg } from './eventHandlers/handler_ww_mouse';
-import { OnBeforeInput_wysiwyg, OnInput_wysiwyg, OnKeyDown_wysiwyg, OnKeyUp_wysiwyg } from './eventHandlers/handler_ww_key_input';
-import { OnPaste_wysiwyg, OnCopy_wysiwyg, OnCut_wysiwyg } from './eventHandlers/handler_ww_clipboard';
-import { OnDragOver_wysiwyg, OnDragEnd_wysiwyg, OnDrop_wysiwyg } from './eventHandlers/handler_ww_dragDrop';
+import { ButtonsHandler, OnClick_menuTray, OnClick_toolbar } from './handlers/handler_toolbar';
+import { OnMouseDown_wysiwyg, OnMouseUp_wysiwyg, OnClick_wysiwyg, OnMouseMove_wysiwyg, OnMouseLeave_wysiwyg } from './handlers/handler_ww_mouse';
+import { OnBeforeInput_wysiwyg, OnInput_wysiwyg } from './handlers/handler_ww_input';
+import { OnKeyDown_wysiwyg, OnKeyUp_wysiwyg } from './handlers/handler_ww_key';
+import { OnPaste_wysiwyg, OnCopy_wysiwyg, OnCut_wysiwyg } from './handlers/handler_ww_clipboard';
+import { OnDragOver_wysiwyg, OnDragEnd_wysiwyg, OnDrop_wysiwyg } from './handlers/handler_ww_dragDrop';
 
 const { _w, ON_OVER_COMPONENT, isMobile, isTouchDevice } = env;
 
@@ -447,93 +448,6 @@ EventManager.prototype = {
 		return dom.check.isElement(node) && node.getAttribute('data-se-non-focus') === 'true';
 	},
 
-	/**
-	 * @private
-	 * @this {EventManagerThis}
-	 * @description Determines if the "range" is within an uneditable node.
-	 * @param {Range} range The range object
-	 * @param {boolean} isFront Whether to check the start or end of the range
-	 * @returns {Node|null} The uneditable node if found, otherwise null
-	 */
-	_isUneditableNode(range, isFront) {
-		const container = isFront ? range.startContainer : range.endContainer;
-		const offset = isFront ? range.startOffset : range.endOffset;
-		const siblingKey = isFront ? 'previousSibling' : 'nextSibling';
-		const isElement = container.nodeType === 1;
-
-		let siblingNode;
-		if (isElement) {
-			siblingNode = /** @type {HTMLElement} */ (this._isUneditableNode_getSibling(container.childNodes[offset], siblingKey, container));
-			return dom.check.isComponentContainer(siblingNode) || dom.check.isNonEditable(siblingNode) ? siblingNode : null;
-		} else {
-			siblingNode = /** @type {HTMLElement} */ (this._isUneditableNode_getSibling(container, siblingKey, container));
-			return dom.check.isEdgePoint(container, offset, isFront ? 'front' : 'end') && (dom.check.isComponentContainer(siblingNode) || dom.check.isNonEditable(siblingNode)) ? siblingNode : null;
-		}
-	},
-
-	/**
-	 * @private
-	 * @this {EventManagerThis}
-	 * @description Retrieves the sibling node of a selected node if it is uneditable. || component node.
-	 * - Used only in `_isUneditableNode`.
-	 * @param {Node} selectNode The selected node
-	 * @param {string} siblingKey The key to access the sibling (`previousSibling` or `nextSibling`)
-	 * @param {Node} container The parent container node
-	 * @returns {Node|null} The sibling node if found, otherwise null
-	 */
-	_isUneditableNode_getSibling(selectNode, siblingKey, container) {
-		if (!selectNode) return null;
-		let siblingNode = selectNode[siblingKey];
-
-		if (!siblingNode) {
-			siblingNode = this.format.getLine(container);
-			siblingNode = siblingNode ? siblingNode[siblingKey] : null;
-			if (siblingNode && !this.component.is(siblingNode)) siblingNode = siblingKey === 'previousSibling' ? siblingNode.firstChild : siblingNode.lastChild;
-			else return null;
-		}
-
-		return siblingNode;
-	},
-
-	/**
-	 * @private
-	 * @this {EventManagerThis}
-	 * @description Deletes specific elements such as tables in "Firefox" and media elements (image, video, audio) in "Chrome".
-	 * - Handles deletion logic based on selection range and node types.
-	 * @returns {boolean} Returns `true` if an element was deleted and focus was adjusted, otherwise `false`.
-	 */
-	_hardDelete() {
-		const range = this.selection.getRange();
-		const sc = range.startContainer;
-		const ec = range.endContainer;
-
-		// table
-		const sCell = this.format.getBlock(sc);
-		const eCell = this.format.getBlock(ec);
-		const sIsCell = dom.check.isTableCell(sCell);
-		const eIsCell = dom.check.isTableCell(eCell);
-		if (((sIsCell && !sCell.previousElementSibling && !sCell.parentElement.previousElementSibling) || (eIsCell && !eCell.nextElementSibling && !eCell.parentElement.nextElementSibling)) && sCell !== eCell) {
-			const ancestor = dom.query.getParentElement(range.commonAncestorContainer, dom.check.isFigure)?.parentElement || range.commonAncestorContainer;
-			if (!sIsCell) {
-				dom.utils.removeItem(dom.query.getParentElement(eCell, (current) => ancestor === current.parentNode));
-			} else if (!eIsCell) {
-				dom.utils.removeItem(dom.query.getParentElement(sCell, (current) => ancestor === current.parentNode));
-			} else {
-				dom.utils.removeItem(dom.query.getParentElement(sCell, (current) => ancestor === current.parentNode));
-				this.editor._nativeFocus();
-				return true;
-			}
-		}
-
-		// component
-		const sComp = sc.nodeType === 1 ? dom.query.getParentElement(sc, '.se-component') : null;
-		const eComp = ec.nodeType === 1 ? dom.query.getParentElement(ec, '.se-component') : null;
-		if (sComp) dom.utils.removeItem(sComp);
-		if (eComp) dom.utils.removeItem(eComp);
-
-		return false;
-	},
-
 	/**
 	 * @private
 	 * @this {EventManagerThis}
@@ -612,7 +526,6 @@ EventManager.prototype = {
 			return;
 		}
 
-		/* eslint-disable @typescript-eslint/no-unused-vars */
 		try {
 			if (commonCon.nodeType === 3) {
 				format = dom.utils.createElement(formatName || this.options.get('defaultLine'));
@@ -627,13 +540,12 @@ EventManager.prototype = {
 				focusNode.parentNode.insertBefore(zeroWidth, focusNode);
 				focusNode = zeroWidth;
 			}
-		} catch (e) {
+		} catch {
 			this.editor.execCommand('formatBlock', false, formatName || this.options.get('defaultLine'));
 			this.editor.effectNode = null;
 			this.selection._init();
 			return;
 		}
-		/* eslint-disable @typescript-eslint/no-unused-vars */
 
 		if (format) {
 			if (dom.check.isBreak(format.nextSibling)) dom.utils.removeItem(format.nextSibling);
@@ -1043,7 +955,7 @@ EventManager.prototype = {
 		}
 
 		const openCont = this.editor.opendControllers;
-		if (!openCont.length) return;
+		if (openCont.length === 0) return;
 
 		this.__rePositionController(openCont);
 	},
@@ -1209,34 +1121,6 @@ EventManager.prototype = {
 		this.__inputPlugin = null;
 	},
 
-	/**
-	 * @private
-	 * @this {EventManagerThis}
-	 * @description Prevents the default behavior of the Enter key and refocuses the editor.
-	 * @param {Event} e The keyboard event
-	 */
-	__enterPrevent(e) {
-		e.preventDefault();
-		if (!isMobile) return;
-
-		this.__focusTemp.focus({ preventScroll: true });
-		this.frameContext.get('wysiwyg').focus({ preventScroll: true });
-	},
-
-	/**
-	 * @private
-	 * @description Scrolls the editor view to the caret position after pressing Enter. (Ignored on mobile devices)
-	 * @this {EventManagerThis}
-	 * @param {*} range Range object
-	 */
-	__enterScrollTo(range) {
-		this.editor._iframeAutoHeight(this.frameContext);
-
-		// scroll to
-		if (env.isMobile && this.scrollparents.length > 0) return;
-		this.editor.selection.scrollTo(range, { behavior: 'auto', block: 'nearest', inline: 'nearest' });
-	},
-
 	/**
 	 * @private
 	 * @description Focus Event Postprocessing

package/src/core/event/executor.js

@@ -0,0 +1,21 @@
+import common from './effects/common.registry';
+import keydown from './effects/keydown.registry';
+
+const HALT = 'action.stop';
+
+/**
+ * @description Execute actions sequentially
+ * @param {__se__EventActions} actions - Array of actions to execute
+ * @param {*} effContext - Effect context containing ports, ctx, and event
+ */
+export async function actionExecutor(actions, effContext) {
+	const effects = { ...common, ...keydown };
+	for (const a of actions) {
+		if (a.t === HALT) return false;
+		const eff = effects[a.t];
+		if (eff) {
+			const r = await eff(effContext, a.p);
+			if (r === false) return false;
+		}
+	}
+}

package/src/core/{base/eventHandlers → event/handlers}/handler_toolbar.js

@@ -113,7 +113,7 @@ export function OnClick_menuTray(e) {
 	let k = '';
 	while (t && !/se-menu-tray/.test(t.className) && !k) {
 		t = t.parentElement;
-		k = t.getAttribute('data-key');
+		k = t?.getAttribute('data-key');
 	}
 	if (!k) return;
 

package/src/core/event/handlers/handler_ww_input.js

@@ -0,0 +1,77 @@
+import { dom, keyCodeMap } from '../../../helper';
+
+/**
+ * @typedef {Omit<import('../eventManager').default & Partial<__se__EditorInjector>, 'eventManager'>} EventManagerThis_handler_ww_input
+ */
+
+/**
+ * @private
+ * @this {EventManagerThis_handler_ww_input}
+ * @param {__se__FrameContext} fc - Frame context object
+ * @param {InputEvent} e - Event object
+ */
+export async function OnBeforeInput_wysiwyg(fc, e) {
+	if (fc.get('isReadOnly') || fc.get('isDisabled')) {
+		e.preventDefault();
+		e.stopPropagation();
+		return false;
+	}
+
+	const data = (e.data === null ? '' : e.data === undefined ? ' ' : e.data) || '';
+	if (!keyCodeMap.isComposing(e)) {
+		if (!this.char.test(data, false)) {
+			e.preventDefault();
+			e.stopPropagation();
+			return false;
+		}
+		this._handledInBefore = true;
+	} else {
+		this._handledInBefore = false;
+	}
+
+	// user event
+	if ((await this.triggerEvent('onBeforeInput', { frameContext: fc, event: e, data })) === false) return;
+	// plugin event
+	if (this._callPluginEvent('onBeforeInput', { frameContext: fc, event: e, data }) === false) return;
+}
+
+/**
+ * @private
+ * @this {EventManagerThis_handler_ww_input}
+ * @param {__se__FrameContext} fc - Frame context object
+ * @param {InputEvent} e - Event object
+ */
+export async function OnInput_wysiwyg(fc, e) {
+	if (fc.get('isReadOnly') || fc.get('isDisabled')) {
+		e.preventDefault();
+		e.stopPropagation();
+		return false;
+	}
+
+	const range = this.selection.getRange();
+	const selectionNode = this.selection.getNode();
+	const formatEl = this.format.getLine(selectionNode, null);
+	if (!this.format.isNormalLine(formatEl) && !this.format.isBrLine(formatEl) && range.collapsed && !this.component.is(selectionNode) && !dom.check.isList(selectionNode)) {
+		const rangeEl = this.format.getBlock(selectionNode, null);
+		this._setDefaultLine(this.format.isBlock(rangeEl) ? 'DIV' : this.options.get('defaultLine'));
+	}
+
+	this.selection._init();
+
+	const data = (e.data === null ? '' : e.data === undefined ? ' ' : e.data) || '';
+	if (!this._handledInBefore) {
+		if (!this.char.test(data, true)) {
+			e.preventDefault();
+			e.stopPropagation();
+			return false;
+		}
+	}
+	this._handledInBefore = false;
+
+	// user event
+	if ((await this.triggerEvent('onInput', { frameContext: fc, event: e, data })) === false) return;
+	// plugin event
+	if (this._callPluginEvent('onInput', { frameContext: fc, event: e, data }) === false) return;
+
+	this.history.push(true);
+}

package/src/core/event/handlers/handler_ww_key.js

@@ -0,0 +1,228 @@
+import { dom, env, unicode, keyCodeMap } from '../../../helper';
+import { actionExecutor } from '../executor';
+import { makePorts } from '../ports';
+import { reduceKeydown } from '../reducers/keydown.reducer';
+
+const { _w } = env;
+const FRONT_ZEROWIDTH = new RegExp(unicode.zeroWidthSpace + '+', '');
+
+const keyState = {
+	ctrl: false,
+	alt: false
+};
+const _styleNodes = Object.preventExtensions({ value: [] });
+
+/**
+ * @typedef {Omit<import('../eventManager').default & Partial<__se__EditorInjector>, 'eventManager'>} EventManagerThis_handler_ww_key_input
+ */
+
+/**
+ * @private
+ * @this {EventManagerThis_handler_ww_key_input}
+ * @param {__se__FrameContext} fc - Frame context object
+ * @param {KeyboardEvent} e - Event object
+ */
+export async function OnKeyDown_wysiwyg(fc, e) {
+	if ((this.isComposing = keyCodeMap.isComposing(e))) return true;
+	if (this.editor.selectMenuOn || !e.isTrusted) return;
+
+	let selectionNode = this.selection.getNode();
+	if (dom.check.isInputElement(selectionNode)) return;
+	if (this.menu.currentDropdownName) return;
+
+	const keyCode = e.code;
+	const shift = keyCodeMap.isShift(e);
+	const ctrl = (keyState.ctrl = keyCodeMap.isCtrl(e));
+	const alt = (keyState.alt = keyCodeMap.isAlt(e));
+
+	if (!ctrl && fc.get('isReadOnly') && !keyCodeMap.isDirectionKey(keyCode)) {
+		e.preventDefault();
+		return false;
+	}
+
+	this.menu.dropdownOff();
+
+	if (this.editor.isBalloon) {
+		this._hideToolbar();
+	} else if (this.editor.isSubBalloon) {
+		this._hideToolbar_sub();
+	}
+
+	// user event
+	if ((await this.triggerEvent('onKeyDown', { frameContext: fc, event: e })) === false) return;
+
+	/** default key action */
+	if (keyCodeMap.isEnter(keyCode) && this.format.isLine(this.selection.getRange()?.startContainer)) {
+		this.selection._resetRangeToTextNode();
+		selectionNode = this.selection.getNode();
+	}
+
+	const range = this.selection.getRange();
+	const formatEl = /** @type {HTMLElement} */ (this.format.getLine(selectionNode, null) || selectionNode);
+
+	/** Shortcuts */
+	if (ctrl && !keyCodeMap.isNonTextKey(keyCode) && this.shortcuts.command(e, ctrl, shift, keyCode, '', false, null, null)) {
+		this._onShortcutKey = true;
+		e.preventDefault();
+		e.stopPropagation();
+		return false;
+	} else if (!ctrl && !keyCodeMap.isNonTextKey(keyCode) && this.format.isLine(formatEl) && range.collapsed && dom.check.isEdgePoint(range.startContainer, 0, 'front')) {
+		const keyword = /** @type {Text} */ (range.startContainer).substringData?.(0, range.startOffset);
+		if (keyword && this.shortcuts.command(e, false, shift, keyCode, keyword, true, formatEl, range)) {
+			this._onShortcutKey = true;
+			e.preventDefault();
+			e.stopPropagation();
+			return false;
+		}
+	} else if (this._onShortcutKey) {
+		this._onShortcutKey = false;
+	}
+
+	// plugin event
+	if (this._callPluginEvent('onKeyDown', { frameContext: fc, event: e, range, line: formatEl }) === false) return;
+
+	// reducer / actions
+	/** @type {__se__EventKeydownCtx} */
+	const ctx = { e, fc, status: this.status, options: this.options, frameOptions: this.frameOptions, range, selectionNode, formatEl, keyCode, ctrl, alt, shift };
+	const ports = makePorts(this, { _styleNodes });
+
+	// action execute
+	const actions = await reduceKeydown(ports, ctx);
+	await actionExecutor(actions, { ports, ctx });
+}
+
+/**
+ * @private
+ * @this {EventManagerThis_handler_ww_key_input}
+ * @param {__se__FrameContext} fc - Frame context object
+ * @param {KeyboardEvent} e - Event object
+ */
+export async function OnKeyUp_wysiwyg(fc, e) {
+	if (this._onShortcutKey || this.menu.currentDropdownName) return;
+
+	const keyCode = e.code;
+	const ctrl = keyCodeMap.isCtrl(e);
+	const alt = keyCodeMap.isAlt(e);
+
+	if (ctrl) keyState.ctrl = false;
+	if (alt) keyState.alt = false;
+
+	if (fc.get('isReadOnly')) return;
+
+	const range = this.selection.getRange();
+	let selectionNode = this.selection.getNode();
+
+	if ((this.editor.isBalloon || this.editor.isSubBalloon) && (((this.editor.isBalloonAlways || this.editor.isSubBalloonAlways) && !keyCodeMap.isEsc(keyCode)) || !range.collapsed)) {
+		if (this.editor.isBalloonAlways || this.editor.isSubBalloonAlways) {
+			if (!keyCodeMap.isEsc(keyCode)) this._showToolbarBalloonDelay();
+		} else {
+			if (this.editor.isSubBalloon) this.subToolbar._showBalloon();
+			else this.toolbar._showBalloon();
+			return;
+		}
+	}
+
+	/** when format tag deleted */
+	if (keyCodeMap.isBackspace(keyCode) && dom.check.isWysiwygFrame(selectionNode) && selectionNode.textContent === '' && selectionNode.children.length === 0) {
+		e.preventDefault();
+		e.stopPropagation();
+
+		selectionNode.innerHTML = '';
+
+		const oFormatTag = dom.utils.createElement(this.format.isLine(this.status.currentNodes[0]) && !dom.check.isListCell(this.status.currentNodes[0]) ? this.status.currentNodes[0] : this.options.get('defaultLine'), null, '<br>');
+		selectionNode.appendChild(oFormatTag);
+		this.selection.setRange(oFormatTag, 0, oFormatTag, 0);
+		this.applyTagEffect();
+
+		this.history.push(false);
+
+		// document type
+		if (fc.has('documentType_use_header')) {
+			if (keyCodeMap.isDocumentTypeObserverKey(keyCode)) {
+				fc.get('documentType').reHeader();
+			}
+		}
+
+		return;
+	}
+
+	const formatEl = this.format.getLine(selectionNode, null);
+	const rangeEl = this.format.getBlock(selectionNode, null);
+	const attrs = this._formatAttrsTemp;
+
+	if (formatEl && attrs) {
+		for (let i = 0, len = attrs.length; i < len; i++) {
+			if (keyCodeMap.isEnter(keyCode) && /^id$/i.test(attrs[i].name)) {
+				formatEl.removeAttribute('id');
+				continue;
+			}
+			formatEl.setAttribute(attrs[i].name, attrs[i].value);
+		}
+		this._formatAttrsTemp = null;
+	}
+
+	if (
+		!this.format.isNormalLine(formatEl) &&
+		!this.format.isBrLine(formatEl) &&
+		range.collapsed &&
+		!this.component.is(selectionNode) &&
+		!dom.check.isList(selectionNode) &&
+		this._setDefaultLine(this.format.isBlock(rangeEl) ? 'DIV' : this.options.get('defaultLine')) !== null
+	) {
+		selectionNode = this.selection.getNode();
+	}
+
+	const textKey = !keyState.ctrl && !keyState.alt && !keyCodeMap.isNonTextKey(keyCode);
+	if (textKey && selectionNode.nodeType === 3 && unicode.zeroWidthRegExp.test(selectionNode.textContent) && !(e.isComposing !== undefined ? e.isComposing : this.isComposing)) {
+		let so = range.startOffset,
+			eo = range.endOffset;
+		const frontZeroWidthCnt = (selectionNode.textContent.substring(0, eo).match(FRONT_ZEROWIDTH) || '').length;
+		so = range.startOffset - frontZeroWidthCnt;
+		eo = range.endOffset - frontZeroWidthCnt;
+		selectionNode.textContent = selectionNode.textContent.replace(unicode.zeroWidthRegExp, '');
+		this.selection.setRange(selectionNode, so < 0 ? 0 : so, selectionNode, eo < 0 ? 0 : eo);
+	}
+
+	if (keyCodeMap.isRemoveKey(keyCode) && dom.check.isZeroWidth(formatEl?.textContent) && !formatEl.previousElementSibling && !dom.check.isListCell(formatEl)) {
+		const rsMode = this.options.get('retainStyleMode');
+		if (rsMode !== 'none' && _styleNodes.value?.length > 0) {
+			if (rsMode === 'repeat') {
+				if (this.__retainTimer) {
+					this.__retainTimer = _w.clearTimeout(this.__retainTimer);
+					this._clearRetainStyleNodes(formatEl);
+				} else {
+					this.__retainTimer = _w.setTimeout(() => {
+						this.__retainTimer = null;
+					}, 0);
+					this._retainStyleNodes(formatEl, _styleNodes.value);
+				}
+			} else {
+				this.__retainTimer = null;
+				this._retainStyleNodes(formatEl, _styleNodes.value);
+			}
+		} else {
+			this._clearRetainStyleNodes(formatEl);
+		}
+	}
+
+	// document type
+	if (fc.has('documentType_use_header')) {
+		if (keyCodeMap.isDocumentTypeObserverKey(keyCode)) {
+			fc.get('documentType').reHeader();
+			const el = dom.query.getParentElement(this.selection.selectionNode, this.format.isLine.bind(this.format));
+			fc.get('documentType').on(el);
+		} else {
+			const el = dom.query.getParentElement(selectionNode, (current) => current.nodeType === 1);
+			fc.get('documentType').onChangeText(el);
+		}
+	}
+
+	// user event
+	if ((await this.triggerEvent('onKeyUp', { frameContext: fc, event: e })) === false) return;
+	// plugin event
+	if (this._callPluginEvent('onKeyUp', { frameContext: fc, event: e, range, line: formatEl }) === false) return;
+
+	if (keyCodeMap.isHistoryRelevantKey(keyCode)) {
+		this.history.push(true);
+	}
+}

package/src/core/{base/eventHandlers → event/handlers}/handler_ww_mouse.js

@@ -48,7 +48,7 @@ export async function OnMouseDown_wysiwyg(fc, e) {
 		this._hideToolbar_sub();
 	}
 
-	if (/FIGURE/i.test(eventTarget.nodeName)) e.preventDefault();
+	if (/FIGURE/i.test(eventTarget?.nodeName)) e.preventDefault();
 }
 
 /**
@@ -136,10 +136,10 @@ export async function OnClick_wysiwyg(fc, e) {
 			const _styleNode = [...this.editor._onCopyFormatInfo];
 			const n = _styleNode.pop();
 
-			this.format.removeInlineElement();
+			this.inline.remove();
 
 			if (n) {
-				const insertedNode = this.format.applyInlineElement(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);