suneditor 3.2.0 → 3.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "suneditor",
-	"version": "3.2.0",
+	"version": "3.2.2",
 	"description": "Vanilla JavaScript based WYSIWYG web editor",
 	"author": "Yi JiHong",
 	"license": "MIT",

package/src/assets/suneditor.css

@@ -1044,9 +1044,10 @@
 	color: var(--se-block-handle-color);
 	z-index: 10;
 	transition:
-		top 0.15s ease-out,
-		left 0.15s ease-out,
-		right 0.15s ease-out;
+		top 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
+		left 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
+		right 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+	will-change: top, left, right;
 }
 
 .sun-editor .se-block-handle.se-no-transition {
@@ -1347,6 +1348,7 @@
 
 /** --- popover UA override ---------------------------------------------------- */
 .sun-editor .se-controller[popover],
+.sun-editor .se-block-handle[popover],
 .sun-editor.sun-editor-carrier-wrapper .se-drag-cursor[popover] {
 	inset: unset;
 	margin: 0;
@@ -1357,6 +1359,7 @@
 .sun-editor .se-loading-box[popover],
 .sun-editor .se-toast[popover],
 .sun-editor .se-browser[popover],
+.sun-editor .se-block-handle[popover],
 .sun-editor .se-menu-tray[popover] {
 	background: none;
 	border: none;

package/src/core/event/eventOrchestrator.js

@@ -112,9 +112,6 @@ class EventOrchestrator extends KernelInjector {
 		this.__eventDoc = null;
 		/** @type {string} */
 		this.__secopy = null;
-
-		/** @type {HTMLInputElement} */
-		this.__focusTemp = this.#contextProvider.carrierWrapper.querySelector('.__se__focus__temp__');
 	}
 
 	/**
@@ -206,6 +203,32 @@ class EventOrchestrator extends KernelInjector {
 		return this.defaultLineManager.execute(formatName);
 	}
 
+	/**
+	 * @internal
+	 * @description Normalize the Enter range before the reducer reads it: reset to a text node, and when the
+	 * caret sits inside a zero-width text node adjacent to a `<br>`, move it onto the `<br>`.
+	 * @returns {?(HTMLElement|Text)} The updated selection node, or `null` when the caret is not on a line (no normalization ran).
+	 */
+	_normalizeEnterRange() {
+		if (!this.$.format.isLine(this.$.selection.getRange()?.startContainer)) return null;
+
+		this.$.selection.resetRangeToTextNode();
+
+		const r = this.$.selection.getRange();
+		if (
+			r.startContainer === r.endContainer &&
+			r.startOffset !== r.endOffset &&
+			r.startContainer.nodeType === 3 &&
+			dom.check.isZeroWidth(r.startContainer)
+		) {
+			const br = r.startContainer.nextSibling;
+			if (br && dom.check.isBreak(br)) this.$.selection.setRange(br, 0, br, 0);
+			else this.$.selection.setRange(r.endContainer, r.endOffset, r.endContainer, r.endOffset);
+		}
+
+		return this.$.selection.getNode();
+	}
+
 	/**
 	 * @internal
 	 * @description Handles data transfer actions for `paste` and `drop` events.
@@ -579,9 +602,6 @@ class EventOrchestrator extends KernelInjector {
 			this.#eventManager.addEvent(parent, 'scroll', OnScrollAbs, false);
 		}
 
-		/** focus temp (mobile) */
-		this.#eventManager.addEvent(this.__focusTemp, 'focus', (e) => e.preventDefault(), false);
-
 		/** document event */
 		if (this.__eventDoc !== fc.get('_wd')) {
 			this.__eventDoc = fc.get('_wd');
@@ -658,7 +678,6 @@ class EventOrchestrator extends KernelInjector {
 		this.__inputPlugin = null;
 		this.__inputBlurEvent = null;
 		this.__inputKeyEvent = null;
-		this.__focusTemp = null;
 		this.__eventDoc = null;
 		this.__secopy = null;
 		this._lineBreakComp = null;

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

@@ -1,4 +1,12 @@
 import { dom, keyCodeMap } from '../../../helper';
+import { actionExecutor } from '../executor';
+import { makePorts } from '../ports';
+import { reduceEnterDown } from '../rules/keydown.rule.enter';
+import { ENTER_FROM_BEFOREINPUT } from '../reducers/keydown.reducer';
+
+// The Enter rule/effects never touch the retain-style node cache (a backspace concern) — a local
+// placeholder is enough to satisfy `makePorts`.
+const _enterStyleNodes = { value: [] };
 
 /**
  * @typedef {import('../eventOrchestrator').default} EventManagerThis_handler_ww_input
@@ -16,6 +24,14 @@ export async function OnBeforeInput_wysiwyg(fc, e) {
 		return false;
 	}
 
+	// Enter is dispatched here — not on keydown — so the IME has finished committing before the DOM
+	// mutates (iOS/mobile marked-text stability). `insertParagraph` = Enter, `insertLineBreak` = Shift+Enter.
+	// ctrl/alt+Enter are shortcuts and never produce these inputTypes, so they stay on the keydown path.
+	if (ENTER_FROM_BEFOREINPUT && (e.inputType === 'insertParagraph' || e.inputType === 'insertLineBreak')) {
+		await dispatchEnter.call(this, fc, e);
+		return;
+	}
+
 	const data = (e.data === null ? '' : e.data === undefined ? ' ' : e.data) || '';
 	if (!keyCodeMap.isComposing(e)) {
 		if (!this.$.char.test(data, false)) {
@@ -35,6 +51,65 @@ export async function OnBeforeInput_wysiwyg(fc, e) {
 	await this._callPluginEventAsync('onBeforeInput', { frameContext: fc, event: e, data });
 }
 
+/**
+ * @this {EventManagerThis_handler_ww_input}
+ * @description Runs SunEditor's Enter logic from the `beforeinput` event (post-IME-commit) by reusing the
+ * exact keydown Enter rule + effects — only the dispatch site moves off keydown. See ENTER_FROM_BEFOREINPUT.
+ * The guards mirror `OnKeyDown_wysiwyg` (selectMenu, input-element, open-dropdown) so a `beforeinput` Enter
+ * is dropped in the same situations a keydown Enter is.
+ * @param {SunEditor.FrameContext} fc - Frame context object
+ * @param {InputEvent} e - The `beforeinput` event (`insertParagraph` | `insertLineBreak`)
+ */
+async function dispatchEnter(fc, e) {
+	// Skip while an IME composition is still active
+	if (e.isComposing || this.isComposing) return;
+	if (this.$.ui.selectMenuOn) return;
+
+	let selectionNode = this.$.selection.getNode();
+	if (dom.check.isInputElement(selectionNode)) return;
+	if (this.$.menu.currentDropdownName) return;
+
+	if (dom.check.isWysiwygFrame(selectionNode)) {
+		this._setDefaultLine(this.$.options.get('defaultLine'));
+		selectionNode = this.$.selection.getNode();
+	}
+
+	const normalized = this._normalizeEnterRange();
+	if (normalized) selectionNode = normalized;
+
+	const range = this.$.selection.getRange();
+	const formatEl = /** @type {HTMLElement} */ (this.$.format.getLine(selectionNode, null) || selectionNode);
+	const shift = e.inputType === 'insertLineBreak';
+
+	/** @type {import('../reducers/keydown.reducer').KeydownReducerCtx} */
+	const ctx = {
+		e,
+		fc,
+		store: this.$.store,
+		options: this.$.options,
+		frameOptions: this.$.frameOptions,
+		range,
+		selectionNode,
+		formatEl,
+		keyCode: 'Enter',
+		ctrl: false,
+		alt: false,
+		shift,
+	};
+
+	const ports = makePorts(this, { _styleNodes: _enterStyleNodes });
+	const actions = [];
+	reduceEnterDown(actions, ports, ctx);
+
+	// `beforeinput.preventDefault()` MUST run synchronously (before the first `await` below), or the browser
+	// commits its native insertParagraph/insertLineBreak on top of ours (duplicate line / cloned container).
+	if (actions.some((a) => a.t === 'event.prevent' || a.t === 'event.prevent.stop')) {
+		e.preventDefault();
+	}
+
+	await actionExecutor(actions, { ports, ctx });
+}
+
 /**
  * @this {EventManagerThis_handler_ww_input}
  * @param {SunEditor.FrameContext} fc - Frame context object

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

@@ -1,7 +1,7 @@
 import { dom, env, unicode, keyCodeMap } from '../../../helper';
 import { actionExecutor } from '../executor';
 import { makePorts } from '../ports';
-import { reduceKeydown } from '../reducers/keydown.reducer';
+import { reduceKeydown, ENTER_FROM_BEFOREINPUT } from '../reducers/keydown.reducer';
 
 const { _w } = env;
 const FRONT_ZEROWIDTH = new RegExp(unicode.zeroWidthSpace + '+', '');
@@ -47,23 +47,15 @@ export async function OnKeyDown_wysiwyg(fc, e) {
 		if (!this.$.store.mode.isSubBalloonAlways) this._hideToolbar_sub();
 	}
 
-	/** default key action — normalize the Enter range before the reducer reads it */
-	if (keyCodeMap.isEnter(keyCode) && this.$.format.isLine(this.$.selection.getRange()?.startContainer)) {
-		this.$.selection.resetRangeToTextNode();
-
-		const r = this.$.selection.getRange();
-		if (
-			r.startContainer === r.endContainer &&
-			r.startOffset !== r.endOffset &&
-			r.startContainer.nodeType === 3 &&
-			dom.check.isZeroWidth(r.startContainer)
-		) {
-			const br = r.startContainer.nextSibling;
-			if (br && dom.check.isBreak(br)) this.$.selection.setRange(br, 0, br, 0);
-			else this.$.selection.setRange(r.endContainer, r.endOffset, r.endContainer, r.endOffset);
-		}
-
-		selectionNode = this.$.selection.getNode();
+	/**
+	 * default key action — normalize the Enter range before the reducer reads it.
+	 * Skipped when Enter is handled from `beforeinput` (ENTER_FROM_BEFOREINPUT): mutating the DOM here
+	 * on keydown re-traps the iOS/mobile IME marked-text — `dispatchEnter` runs this same normalization
+	 * later, after the IME has committed.
+	 */
+	if (!ENTER_FROM_BEFOREINPUT && keyCodeMap.isEnter(keyCode)) {
+		const normalized = this._normalizeEnterRange();
+		if (normalized) selectionNode = normalized;
 	}
 
 	const range = this.$.selection.getRange();

package/src/core/event/ports.js

@@ -1,5 +1,3 @@
-import { isMobile } from '../../helper/env';
-
 /**
  * @typedef {import('./eventOrchestrator').default} EventManagerInstanceType
  */
@@ -187,15 +185,13 @@ export function makePorts(inst, { _styleNodes }) {
 			});
 		},
 		/**
-		 * @description Prevents the default behavior of the `Enter` key and refocuses the editor.
-		 * @param {Event} e The keyboard event
+		 * @description Prevents the default behavior of the `Enter` key.
+		 * Enter now runs from `beforeinput` (post-IME-commit), so the former mobile focus-shuffle
+		 * (temp-focus → refocus, to force-end a virtual-keyboard IME session) is unnecessary.
+		 * @param {Event} e The keyboard/input event
 		 */
 		enterPrevent(e) {
 			e.preventDefault();
-			if (!isMobile) return;
-
-			inst.__focusTemp.focus({ preventScroll: true });
-			frameContext.get('wysiwyg').focus({ preventScroll: true });
 		},
 	};
 }

package/src/core/event/reducers/keydown.reducer.js

@@ -9,13 +9,23 @@ import { A } from '../actions';
 
 const { isOSX_IOS } = env;
 
+/**
+ * @description Enter is processed from the `beforeinput` event (post-IME-commit) instead of `keydown`,
+ * to avoid trapping iOS/mobile IME marked-text when `keydown` mutates the DOM (see `handler_ww_input.js`).
+ * Flip to `false` to instantly restore the legacy synchronous `keydown` Enter path — no other file needs
+ * touching for rollback (the `keydown` Enter gate, the `handler_ww_key` normalization guard, and the
+ * `beforeinput` dispatch all key off this single flag).
+ * @type {boolean}
+ */
+export const ENTER_FROM_BEFOREINPUT = true;
+
 /**
  * @typedef {import('../ports').EventReducerPorts} EventPorts
  */
 
 /**
  * @typedef {Object} KeydownReducerCtx - Keydown Reducer Context object
- * @property {KeyboardEvent} ctx.e - The keyboard event
+ * @property {KeyboardEvent|InputEvent} ctx.e - The keyboard event (or the `beforeinput` InputEvent when Enter is dispatched from `beforeinput`)
  * @property {SunEditor.FrameContext} ctx.fc - Frame context object
  * @property {SunEditor.Store} ctx.store - Editor store object
  * @property {SunEditor.Options} ctx.options - Options object
@@ -62,8 +72,13 @@ export async function reduceKeydown(ports, ctx) {
 			break;
 		}
 		case 'Enter' /** enter key */: {
-			if (reduceEnterDown(actions, ports, ctx) === false) {
-				return actions;
+			// Enter is handled in `beforeinput` (IME stability) — see ENTER_FROM_BEFOREINPUT.
+			// Gate only (not an early-return) so the post-switch `documentTypeRefreshHeader`
+			// still runs for a selectRange + Enter on keydown.
+			if (!ENTER_FROM_BEFOREINPUT) {
+				if (reduceEnterDown(actions, ports, ctx) === false) {
+					return actions;
+				}
 			}
 			break;
 		}

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

@@ -119,6 +119,30 @@ class BlockHandle {
 		em.addEvent(this.#$.frameContext.get('eventWysiwyg'), 'keydown', this.#onWrapperKeyDown.bind(this), true);
 	}
 
+	/**
+	 * @description Show the handle.
+	 */
+	#showHandle() {
+		this.#handle.style.display = 'flex';
+		try {
+			this.#handle.showPopover?.();
+		} catch {
+			// already open
+		}
+	}
+
+	/**
+	 * @description Hide the handle and drop it out of the top layer.
+	 */
+	#hideHandle() {
+		try {
+			this.#handle.hidePopover?.();
+		} catch {
+			// already hidden
+		}
+		this.#handle.style.display = 'none';
+	}
+
 	/**
 	 * @description Position the block handle for the given mouse target. Uses rAF throttle.
 	 * Called from wysiwyg mousemove.
@@ -156,7 +180,7 @@ class BlockHandle {
 	 */
 	hideNow() {
 		this.#cancelHide();
-		this.#handle.style.display = 'none';
+		this.#hideHandle();
 		this.#actionMenu?.close();
 		this.#setCurrentBlock(null);
 	}
@@ -267,7 +291,7 @@ class BlockHandle {
 		if (this.#hideTimer) return;
 		this.#hideTimer = _w.setTimeout(() => {
 			this.#hideTimer = null;
-			this.#handle.style.display = 'none';
+			this.#hideHandle();
 			this.#actionMenu?.close();
 			this.#setCurrentBlock(null);
 		}, 200);
@@ -323,11 +347,8 @@ class BlockHandle {
 	 */
 	#onAreaMouseLeave(e) {
 		if (this.#actionMenu?.isOpen) return;
-
-		const related = /** @type {Node} */ (e?.relatedTarget);
-		if (related && this.#handle?.contains(related)) return;
-
-		this.#scheduleHide();
+		if (this.#stayAlive(/** @type {Node} */ (e?.relatedTarget))) return;
+		this.hideNow();
 	}
 
 	/**
@@ -335,11 +356,19 @@ class BlockHandle {
 	 */
 	#onWrapperMouseLeave(e) {
 		if (this.#actionMenu?.isOpen) return;
-		const related = /** @type {Node} */ (e?.relatedTarget);
-		if (related && this.#handle?.contains(related)) return;
-		this.#cancelHide();
-		this.#handle.style.display = 'none';
-		this.#setCurrentBlock(null);
+		if (this.#stayAlive(/** @type {Node} */ (e?.relatedTarget))) return;
+		this.hideNow();
+	}
+
+	/**
+	 * @description Whether a mouseleave's `relatedTarget` is still within the editor interaction zone
+	 * @param {Node|null} related - `relatedTarget` of the mouseleave event
+	 * @returns {boolean}
+	 */
+	#stayAlive(related) {
+		if (!related) return false;
+		const wrapper = this.#area?.parentElement;
+		return !!(this.#handle?.contains(related) || wrapper?.contains(related));
 	}
 
 	/**
@@ -412,13 +441,13 @@ class BlockHandle {
 		if (isIframe) {
 			const iframeH = wysiwygFrameEl.clientHeight || 0;
 			if (blockRect.bottom <= 0 || blockRect.top >= iframeH) {
-				this.#handle.style.display = 'none';
+				this.#hideHandle();
 				return;
 			}
 		} else {
 			const wwFrameRect = wysiwygFrameEl.getBoundingClientRect();
 			if (blockRect.bottom <= wwFrameRect.top || blockRect.top >= wwFrameRect.bottom) {
-				this.#handle.style.display = 'none';
+				this.#hideHandle();
 				return;
 			}
 		}
@@ -460,7 +489,7 @@ class BlockHandle {
 			this.#handle.style.right = '';
 			this.#handle.style.left = areaRect.left + scrollX + totalOffset + 'px';
 		}
-		this.#handle.style.display = 'flex';
+		this.#showHandle();
 
 		if (wasHidden) {
 			void this.#handle.offsetHeight;

package/src/core/section/constructor.js

@@ -76,19 +76,6 @@ function Constructor(editorTargets, options) {
 	// menuTray
 	const menuTray = dom.utils.createElement('DIV', { class: 'se-menu-tray', popover: 'manual' });
 	editor_carrier_wrapper.appendChild(menuTray);
-	// focus temp element
-	const focusTemp = /** @type {HTMLInputElement} */ (
-		dom.utils.createElement('INPUT', {
-			type: 'text',
-			id: editorFormFieldPrefix + '-focus-temp',
-			class: '__se__focus__temp__',
-			autocomplete: 'off',
-			'aria-hidden': 'true',
-			style: 'position: fixed !important; top: -10000px !important; left: -10000px !important; display: block !important; width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important;',
-		})
-	);
-	focusTemp.tabIndex = 0;
-	editor_carrier_wrapper.appendChild(focusTemp);
 
 	// modal
 	const modal = dom.utils.createElement('DIV', {
@@ -312,7 +299,7 @@ function Constructor(editorTargets, options) {
 		if (isBlockHandle) {
 			blockHandleArea = dom.utils.createElement('DIV', { class: 'se-block-handle-area' });
 
-			const blockHandleGroup = dom.utils.createElement('DIV', { class: 'se-block-handle' });
+			const blockHandleGroup = dom.utils.createElement('DIV', { class: 'se-block-handle', popover: 'manual' });
 			const blockHandlePlus = dom.utils.createElement(
 				'DIV',
 				{ class: 'se-block-handle-btn se-block-handle-plus' },

package/types/core/event/eventOrchestrator.d.ts

@@ -51,8 +51,6 @@ declare class EventOrchestrator extends KernelInjector {
 	__eventDoc: Document;
 	/** @type {string} */
 	__secopy: string;
-	/** @type {HTMLInputElement} */
-	__focusTemp: HTMLInputElement;
 	/**
 	 * @description Activates the corresponding button with the tags information of the current cursor position,
 	 * - such as `bold`, `underline`, etc., and executes the `active` method of the plugins.
@@ -86,6 +84,13 @@ declare class EventOrchestrator extends KernelInjector {
 	 * @param {?string} formatName Format tag name (default: `P`)
 	 */
 	_setDefaultLine(formatName: string | null): void;
+	/**
+	 * @internal
+	 * @description Normalize the Enter range before the reducer reads it: reset to a text node, and when the
+	 * caret sits inside a zero-width text node adjacent to a `<br>`, move it onto the `<br>`.
+	 * @returns {?(HTMLElement|Text)} The updated selection node, or `null` when the caret is not on a line (no normalization ran).
+	 */
+	_normalizeEnterRange(): (HTMLElement | Text) | null;
 	/**
 	 * @internal
 	 * @description Handles data transfer actions for `paste` and `drop` events.

package/types/core/event/ports.d.ts

@@ -173,8 +173,10 @@ export function makePorts(
 	 */
 	enterScrollTo(range: Range): void;
 	/**
-	 * @description Prevents the default behavior of the `Enter` key and refocuses the editor.
-	 * @param {Event} e The keyboard event
+	 * @description Prevents the default behavior of the `Enter` key.
+	 * Enter now runs from `beforeinput` (post-IME-commit), so the former mobile focus-shuffle
+	 * (temp-focus → refocus, to force-end a virtual-keyboard IME session) is unnecessary.
+	 * @param {Event} e The keyboard/input event
 	 */
 	enterPrevent(e: Event): void;
 };

package/types/core/event/reducers/keydown.reducer.d.ts

@@ -4,7 +4,7 @@ import type {} from '../../../typedef';
  */
 /**
  * @typedef {Object} KeydownReducerCtx - Keydown Reducer Context object
- * @property {KeyboardEvent} ctx.e - The keyboard event
+ * @property {KeyboardEvent|InputEvent} ctx.e - The keyboard event (or the `beforeinput` InputEvent when Enter is dispatched from `beforeinput`)
  * @property {SunEditor.FrameContext} ctx.fc - Frame context object
  * @property {SunEditor.Store} ctx.store - Editor store object
  * @property {SunEditor.Options} ctx.options - Options object
@@ -27,15 +27,24 @@ import type {} from '../../../typedef';
  * @returns {Promise<EventActions>} Action list
  */
 export function reduceKeydown(ports: EventPorts, ctx: KeydownReducerCtx): Promise<EventActions>;
+/**
+ * @description Enter is processed from the `beforeinput` event (post-IME-commit) instead of `keydown`,
+ * to avoid trapping iOS/mobile IME marked-text when `keydown` mutates the DOM (see `handler_ww_input.js`).
+ * Flip to `false` to instantly restore the legacy synchronous `keydown` Enter path — no other file needs
+ * touching for rollback (the `keydown` Enter gate, the `handler_ww_key` normalization guard, and the
+ * `beforeinput` dispatch all key off this single flag).
+ * @type {boolean}
+ */
+export const ENTER_FROM_BEFOREINPUT: boolean;
 export type EventPorts = import('../ports').EventReducerPorts;
 /**
  * - Keydown Reducer Context object
  */
 export type KeydownReducerCtx = {
 	/**
-	 * - The keyboard event
+	 * - The keyboard event (or the `beforeinput` InputEvent when Enter is dispatched from `beforeinput`)
 	 */
-	e: KeyboardEvent;
+	e: KeyboardEvent | InputEvent;
 	/**
 	 * - Frame context object
 	 */