suneditor 3.2.1 → 3.2.3

package/package.json

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

package/src/assets/suneditor.css

@@ -1348,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;
@@ -1358,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;
@@ -3327,7 +3329,7 @@
 	margin: 0;
 	min-height: 28px;
 }
-.sun-editor .se-select-menu .se-select-item .se-btn-list span {
+.sun-editor .se-select-menu .se-select-item .se-btn-list > span {
 	padding: 0;
 	margin: 0;
 }
@@ -4376,6 +4378,11 @@
 	direction: rtl;
 }
 
+/* toolbar */
+.sun-editor.se-rtl .se-btn-tray {
+	direction: rtl;
+}
+
 /* statusbar */
 .sun-editor.se-rtl .se-status-bar {
 	direction: rtl;

package/src/core/editor.js

@@ -139,6 +139,8 @@ class Editor {
 		this.$.store.set('initViewportHeight', env._w.visualViewport.height);
 		this.#kernel._eventOrchestrator.__setViewportSize();
 
+		this.$.store.set('_canUseBeforeInput', env.canUseBeforeInput());
+
 		this.$.contextProvider.init();
 
 		// initialize core and add event listeners

package/src/core/event/actions/index.js

@@ -149,6 +149,13 @@ export const A = {
 		p: { rowEndBr, rowStartBr },
 	}),
 
+	/**
+	 * @description Soft line break merge (Backspace): the caret sits in the zero-width anchor right after a soft-break `<br>` (a Shift+Enter).
+	 * @param {Node} zws - the zero-width Text node holding the caret (its `previousSibling` is the `<br>`)
+	 * @returns {Action}
+	 */
+	backspaceSoftBreakMerge: (zws) => ({ t: 'backspace.softBreak.merge', p: { zws } }),
+
 	// === delete ===
 	/**
 	 * @param {Element} formatEl
@@ -187,6 +194,13 @@ export const A = {
 	 */
 	deleteBrLineRowMerge: (rowEndBr) => ({ t: 'delete.brline.rowMerge', p: { rowEndBr } }),
 
+	/**
+	 * @description Soft line break merge (Delete): the caret sits just before a soft-break `<br>`.
+	 * @param {Node} br - the soft-break `<br>` to remove
+	 * @returns {Action}
+	 */
+	deleteSoftBreakMerge: (br) => ({ t: 'delete.softBreak.merge', p: { br } }),
+
 	// === tab ===
 	/**
 	 * @param {Range} range
@@ -253,6 +267,13 @@ export const A = {
 	 * @returns {Action}
 	 */
 	enterBrLineInsert: (range) => ({ t: 'enter.brline.insert', p: { range } }),
+	/**
+	 * @description Soft line break (Shift+Enter) — insert a `<br>` at the caret, splitting the line.
+	 * Used instead of the browser's native `insertLineBreak`, which is inconsistent across browsers.
+	 * @param {Range} range Caret range captured at rule time.
+	 * @returns {Action}
+	 */
+	enterShiftBr: (range) => ({ t: 'enter.shift.br', p: { range } }),
 	/**
 	 * @description Exit a normal brLine — drop its trailing empty rows and add a default line after it.
 	 * @param {Element} brBlock

package/src/core/event/effects/keydown.registry.js

@@ -155,6 +155,19 @@ export default {
 		}
 	},
 
+	/** @action backspaceSoftBreakMerge */
+	'backspace.softBreak.merge': ({ ports }, { zws }) => {
+		const br = zws.previousSibling;
+		const parent = zws.parentNode;
+		const before = br?.previousSibling;
+
+		dom.utils.removeItem(zws);
+		if (br) dom.utils.removeItem(br);
+
+		if (before) caretToNodeEnd(ports, before);
+		else if (parent) ports.selection.setRange(parent, 0, parent, 0);
+	},
+
 	/** [delete] */
 
 	/** @action deleteComponentSelect */
@@ -252,6 +265,19 @@ export default {
 		}
 	},
 
+	/** @action deleteSoftBreakMerge */
+	'delete.softBreak.merge': ({ ports }, { br }) => {
+		const before = br.previousSibling;
+		const parent = br.parentNode;
+		const zws = br.nextSibling;
+
+		if (zws && zws.nodeType === 3 && dom.check.isZeroWidth(zws.textContent)) dom.utils.removeItem(zws);
+		dom.utils.removeItem(br);
+
+		if (before) caretToNodeEnd(ports, before);
+		else if (parent) ports.selection.setRange(parent, 0, parent, 0);
+	},
+
 	/** [tab] */
 
 	/** @action tabFormatIndent */
@@ -486,6 +512,46 @@ export default {
 		ports.setOnShortcutKey(true);
 	},
 
+	/** @action enterShiftBr — soft line break (Shift+Enter): insert a `<br>` at the caret, splitting the line. */
+	'enter.shift.br': ({ ports, ctx }, { range }) => {
+		const wd = ctx.fc.get('_wd');
+
+		const domSel = ports.selection.get();
+		const live = domSel?.rangeCount > 0 && ctx.fc.get('wysiwyg').contains(domSel.focusNode);
+		const src = live ? domSel.getRangeAt(0) : range;
+
+		const r = wd.createRange();
+		r.setStart(src.startContainer, src.startOffset);
+		r.setEnd(src.endContainer, src.endOffset);
+		if (!src.collapsed) {
+			r.deleteContents();
+			r.collapse(true);
+		}
+
+		if (r.startContainer.nodeType === 1 && dom.check.isBreak(r.startContainer)) {
+			const brNode = r.startContainer;
+			r.setStart(
+				brNode.parentNode,
+				dom.utils.getArrayIndex(brNode.parentNode.childNodes, brNode) + r.startOffset,
+			);
+			r.collapse(true);
+		}
+
+		const br = dom.utils.createElement('BR');
+		r.insertNode(br);
+
+		const next = br.nextSibling;
+		if (next && next.nodeType === 3 && !dom.check.isZeroWidth(next.textContent)) {
+			ports.selection.setRange(next, 0, next, 0);
+		} else {
+			const zws = dom.utils.createTextNode(unicode.zeroWidthSpace);
+			br.parentNode.insertBefore(zws, br.nextSibling);
+			ports.selection.setRange(zws, 1, zws, 1);
+		}
+
+		ports.history.push(false);
+	},
+
 	/** @action enterBrLineExit — consume only the caret's current (last) empty row and add a default line after the brLine. */
 	'enter.brline.exit': ({ ports }, { brBlock }) => {
 		const last = brBlock.lastChild;
@@ -676,6 +742,17 @@ function caretToLineEdge(ports, line, toEnd) {
 	ports.selection.setRange(line, offset, line, offset);
 }
 
+/**
+ * @description Place a collapsed caret at the END of `node`, whether it is a Text node (end of its text)
+ * or an element (after its last child). A fixed offset would land mid-node for a multi-child inline wrapper.
+ * @param {import('../ports').EventReducerPorts} ports
+ * @param {Node} node
+ */
+function caretToNodeEnd(ports, node) {
+	const offset = node.nodeType === 3 ? node.textContent.length : node.childNodes.length;
+	ports.selection.setRange(node, offset, node, offset);
+}
+
 /**
  * @param {HTMLElement} formatEl - Format element
  * @returns {Node}

package/src/core/event/eventOrchestrator.js

@@ -66,6 +66,12 @@ class EventOrchestrator extends KernelInjector {
 		 */
 		this.isComposing = false;
 
+		/**
+		 * @description Real Shift-key state of the most recent Enter keydown.
+		 * @type {boolean}
+		 */
+		this._enterKeyShift = false;
+
 		/**
 		 * @description An array of parent containers that can be scrolled (in descending order)
 		 * @type {Array<Element>}
@@ -112,6 +118,9 @@ class EventOrchestrator extends KernelInjector {
 		this.__eventDoc = null;
 		/** @type {string} */
 		this.__secopy = null;
+
+		/** @type {HTMLInputElement} */
+		this.__focusTemp = this.#contextProvider.carrierWrapper.querySelector('.__se__focus__temp__');
 	}
 
 	/**
@@ -602,6 +611,9 @@ class EventOrchestrator extends KernelInjector {
 			this.#eventManager.addEvent(parent, 'scroll', OnScrollAbs, false);
 		}
 
+		/** focus temp (mobile) — used by the legacy `keydown` Enter path to force-end a virtual-keyboard IME session */
+		this.#eventManager.addEvent(this.__focusTemp, 'focus', (e) => e.preventDefault(), false);
+
 		/** document event */
 		if (this.__eventDoc !== fc.get('_wd')) {
 			this.__eventDoc = fc.get('_wd');
@@ -678,6 +690,7 @@ 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

@@ -2,7 +2,7 @@ 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';
+import { useEnterFromBeforeInput } 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`.
@@ -27,7 +27,10 @@ export async function OnBeforeInput_wysiwyg(fc, e) {
 	// 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')) {
+	if (
+		useEnterFromBeforeInput(this.$.store) &&
+		(e.inputType === 'insertParagraph' || e.inputType === 'insertLineBreak')
+	) {
 		await dispatchEnter.call(this, fc, e);
 		return;
 	}
@@ -74,12 +77,16 @@ async function dispatchEnter(fc, e) {
 		selectionNode = this.$.selection.getNode();
 	}
 
-	const normalized = this._normalizeEnterRange();
-	if (normalized) selectionNode = normalized;
+	const shift = this._enterKeyShift || e.inputType === 'insertLineBreak';
+	this._enterKeyShift = false;
+
+	if (!shift) {
+		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 = {

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, ENTER_FROM_BEFOREINPUT } from '../reducers/keydown.reducer';
+import { reduceKeydown, useEnterFromBeforeInput } from '../reducers/keydown.reducer';
 
 const { _w } = env;
 const FRONT_ZEROWIDTH = new RegExp(unicode.zeroWidthSpace + '+', '');
@@ -34,6 +34,8 @@ export async function OnKeyDown_wysiwyg(fc, e) {
 	const ctrl = (keyState.ctrl = keyCodeMap.isCtrl(e));
 	const alt = (keyState.alt = keyCodeMap.isAlt(e));
 
+	if (keyCodeMap.isEnter(keyCode)) this._enterKeyShift = shift;
+
 	if (!ctrl && fc.get('isReadOnly') && !keyCodeMap.isDirectionKey(keyCode)) {
 		e.preventDefault();
 		return false;
@@ -49,11 +51,11 @@ export async function OnKeyDown_wysiwyg(fc, e) {
 
 	/**
 	 * 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
+	 * Skipped when Enter is handled from `beforeinput` (useEnterFromBeforeInput): 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)) {
+	if (!useEnterFromBeforeInput(this.$.store, e) && keyCodeMap.isEnter(keyCode)) {
 		const normalized = this._normalizeEnterRange();
 		if (normalized) selectionNode = normalized;
 	}

package/src/core/event/ports.js

@@ -1,3 +1,6 @@
+import { isMobile } from '../../helper/env';
+import { useEnterFromBeforeInput } from './reducers/keydown.reducer';
+
 /**
  * @typedef {import('./eventOrchestrator').default} EventManagerInstanceType
  */
@@ -94,6 +97,7 @@ export function makePorts(inst, { _styleNodes }) {
 		history,
 		char,
 		menu,
+		store,
 	} = inst.$;
 
 	return {
@@ -186,12 +190,18 @@ export function makePorts(inst, { _styleNodes }) {
 		},
 		/**
 		 * @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.
+		 * On the `beforeinput` Enter path the IME has already committed, so a plain `preventDefault` suffices.
+		 * On the legacy `keydown` path (environment doesn't deliver `beforeinput` — see `useEnterFromBeforeInput`)
+		 * a mobile virtual keyboard can leave an open IME session, so we force it to end with a focus-shuffle
+		 * (temp-focus → refocus wysiwyg); otherwise the just-committed marked-text is re-trapped.
 		 * @param {Event} e The keyboard/input event
 		 */
 		enterPrevent(e) {
 			e.preventDefault();
+			if (!isMobile || useEnterFromBeforeInput(store)) return;
+
+			inst.__focusTemp.focus({ preventScroll: true });
+			frameContext.get('wysiwyg').focus({ preventScroll: true });
 		},
 	};
 }

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

@@ -10,15 +10,28 @@ 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).
+ * @description Master switch for processing Enter 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`).
+ *
+ * This is only the compile-time master; the effective per-environment decision is
+ * {@link useEnterFromBeforeInput}, which additionally requires that this environment actually delivers
+ * `beforeinput` at runtime (some corporate security SW / DLP / VDI drop it).
  * @type {boolean}
  */
 export const ENTER_FROM_BEFOREINPUT = true;
 
+/**
+ * @description Routing decision for Enter. Auto-repeat (held key) fires `keydown` but not `beforeinput`,
+ * so a repeat must stay on `keydown` or only the first line break would land.
+ * @param {SunEditor.Store} store - Editor store object
+ * @param {KeyboardEvent|InputEvent} [e] - Source event; a `repeat` flag forces the `keydown` path.
+ * @returns {boolean} `true` to route Enter through `beforeinput`, `false` to keep it on `keydown`.
+ */
+export function useEnterFromBeforeInput(store, e) {
+	return ENTER_FROM_BEFOREINPUT && store.get('_canUseBeforeInput') && !(/** @type {KeyboardEvent} */ (e)?.repeat);
+}
+
 /**
  * @typedef {import('../ports').EventReducerPorts} EventPorts
  */
@@ -72,10 +85,7 @@ export async function reduceKeydown(ports, ctx) {
 			break;
 		}
 		case 'Enter' /** enter key */: {
-			// 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 (!useEnterFromBeforeInput(ctx.store, ctx.e)) {
 				if (reduceEnterDown(actions, ports, ctx) === false) {
 					return actions;
 				}

package/src/core/event/rules/keydown.rule.backspace.js

@@ -304,6 +304,20 @@ export function reduceBackspaceDown(actions, ports, ctx) {
 		}
 	}
 
+	// soft line break (Shift+Enter)
+	if (
+		!selectRange &&
+		range.startContainer.nodeType === 3 &&
+		dom.check.isZeroWidth(range.startContainer) &&
+		range.startOffset <= 1 &&
+		dom.check.isBreak(range.startContainer.previousSibling)
+	) {
+		actions.push(A.preventStop());
+		actions.push(A.backspaceSoftBreakMerge(range.startContainer));
+		actions.push(A.historyPush(true));
+		return false;
+	}
+
 	// empty line: merge into the previous line
 	const emptyLinePrev = formatEl?.previousElementSibling;
 	if (

package/src/core/event/rules/keydown.rule.delete.js

@@ -169,6 +169,35 @@ export function reduceDeleteDown(actions, ports, ctx) {
 		}
 	}
 
+	// soft line break (Shift+Enter)
+	if (!selectRange) {
+		const dcon = range.startContainer;
+		let softBr = null;
+
+		if (
+			dcon.nodeType === 3 &&
+			range.startOffset >= dcon.textContent.length &&
+			dom.check.isBreak(dcon.nextSibling)
+		) {
+			const br = dcon.nextSibling;
+			if (br.nextSibling?.nodeType === 3 && dom.check.isZeroWidth(br.nextSibling.textContent)) softBr = br;
+		} else if (
+			dcon.nodeType === 3 &&
+			dom.check.isZeroWidth(dcon) &&
+			range.startOffset === 0 &&
+			dom.check.isBreak(dcon.previousSibling)
+		) {
+			softBr = dcon.previousSibling;
+		}
+
+		if (softBr) {
+			actions.push(A.preventStop());
+			actions.push(A.deleteSoftBreakMerge(softBr));
+			actions.push(A.historyPush(true));
+			return false;
+		}
+	}
+
 	// empty line
 	const emptyLineNext = formatEl?.nextElementSibling;
 	if (

package/src/core/event/rules/keydown.rule.enter.js

@@ -76,6 +76,13 @@ export function reduceEnterDown(actions, ports, ctx) {
 		}
 	}
 
+	if (shift) {
+		ports.enterPrevent(e);
+		actions.push(A.enterShiftBr(range));
+		actions.push(A.enterScrollTo(range));
+		return true;
+	}
+
 	if (!shift) {
 		let formatEndEdge = format.isEdgeLine(range.endContainer, range.endOffset, 'end');
 		let formatStartEdge = format.isEdgeLine(range.startContainer, range.startOffset, 'front');

package/src/core/kernel/store.js

@@ -18,6 +18,7 @@ import { numbers } from '../../helper';
  * @property {boolean} _mousedown - Whether `mousedown` is pressed.
  * @property {boolean} _preventBlur - Suppress `blur` event handling.
  * @property {boolean} _preventFocus - Suppress `focus` event handling.
+ * @property {boolean} _canUseBeforeInput - Whether this environment actually delivers `beforeinput` at runtime (probed once at editor load; some corporate security SW / DLP / VDI drop it). Defaults `true`.
  */
 
 /**
@@ -100,6 +101,7 @@ class Store {
 			_mousedown: false,
 			_preventBlur: false,
 			_preventFocus: false,
+			_canUseBeforeInput: true,
 		};
 	}
 

package/src/core/logic/dom/html.js

@@ -3,6 +3,7 @@ import { dom, converter, markdown, numbers, unicode, clipboard, env } from '../.
 const { _d } = env;
 const REQUIRED_DATA_ATTRS = 'data-se-[^\\s]+';
 const V2_MIG_DATA_ATTRS = '|data-index|data-file-size|data-file-name|data-exp|data-font-size';
+const ZWS_RUN_REGEXP = new RegExp(unicode.zeroWidthSpace + '+', 'g');
 
 /**
  * @description All HTML related classes involved in the editing area
@@ -365,6 +366,14 @@ class HTML {
 			cleanData = this.#styleNodeConvertor(cleanData);
 		}
 
+		if (!_freeCodeViewMode && cleanData.includes(unicode.zeroWidthSpace)) {
+			cleanData = cleanData.replace(ZWS_RUN_REGEXP, (m, offset, str) => {
+				const boundedStart = offset === 0 || str[offset - 1] === '>';
+				const boundedEnd = offset + m.length === str.length || str[offset + m.length] === '<';
+				return boundedStart && boundedEnd ? m : '';
+			});
+		}
+
 		return cleanData;
 	}
 
@@ -2228,7 +2237,9 @@ class HTML {
 				v.push(sv[0]);
 			}
 		} else if (!v || !_RE_STYLE_EQ.test(v.toString())) {
-			if (this.#cleanStyleTagKeyRegExp.test(tagName)) {
+			if (_RE_SE_COMPONENT.test(m)) {
+				v = this.#cleanStyle(m, v, '@component');
+			} else if (this.#cleanStyleTagKeyRegExp.test(tagName)) {
 				v = this.#cleanStyle(m, v, tagName);
 			} else if (this.#$.format.isLine(tagName)) {
 				v = this.#cleanStyle(m, v, '@line');
@@ -2356,6 +2367,7 @@ const _RE_TAG_NAME = /(?!<)[a-zA-Z0-9-]+/;
 const _RE_ON_HANDLER = /\s(?:on[a-z]+)\s*=\s*(?:(["'])[^"']*\1|\S+)/gi;
 const _RE_STYLE_EQ = /style=/i;
 const _RE_STYLE_ATTR = /style\s*=\s*(?:"|')[^"']*(?:"|')/;
+const _RE_SE_COMPONENT = /class\s*=\s*("|')(?:[^"']*\s)?se-component(?=[\s"'])/i;
 const _RE_LEADING_SPACE = /^\s/;
 
 // #cleanStyle