suneditor 3.2.3 → 3.2.5

package/package.json

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

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

@@ -210,12 +210,15 @@ export const A = {
 	 */
 	tabFormatIndent: (range, formatEl, shift) => ({ t: 'tab.format.indent', p: { range, formatEl, shift } }),
 
-	// === enter ===
+	// === caret ===
 	/**
+	 * @description Scroll the editor view to the caret. Used after Enter, Backspace, and any edit that can move the caret out of view.
 	 * @param {Range} range Range object
 	 * @returns {Action}
 	 */
-	enterScrollTo: (range) => ({ t: 'enter.scrollTo', p: { range } }),
+	caretScrollTo: (range) => ({ t: 'caret.scrollTo', p: { range } }),
+
+	// === enter ===
 	/**
 	 * @param {Element} formatEl
 	 * @returns {Action}

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

@@ -402,13 +402,15 @@ export default {
 		ports.selection.setRange(r.sc, r.so, r.ec, r.eo);
 	},
 
-	/** [enter] */
+	/** [caret] */
 
-	/** @action enterScrollTo */
-	'enter.scrollTo': ({ ports }, { range }) => {
-		ports.enterScrollTo(range);
+	/** @action caretScrollTo */
+	'caret.scrollTo': ({ ports }, { range }) => {
+		ports.caretScrollTo(range);
 	},
 
+	/** [enter] */
+
 	/** @action enterLineAddDefault */
 	'enter.line.addDefault': ({ ports }, { formatEl }) => {
 		const newFormat = ports.format.addLineAfter(formatEl);

package/src/core/event/eventOrchestrator.js

@@ -214,11 +214,15 @@ class EventOrchestrator extends KernelInjector {
 
 	/**
 	 * @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>`.
+	 * @description Normalize the edit range before the reducer reads it, for every key we custom-handle
+	 * (Enter, Backspace, Delete). Resets an element-level container (a `line` such as `P`) to a text node so
+	 * the rules' text-offset arithmetic (`isEdgePoint`, `endOffset === textContent.length`, ...) is valid; and
+	 * when the caret sits inside a zero-width text node adjacent to a `<br>`, moves it onto the `<br>`.
+	 * Without this, Backspace/Delete misfire whenever the browser reports the container as the line itself
+	 * (child-index offset) instead of a `<br>`/ZWS text node.
 	 * @returns {?(HTMLElement|Text)} The updated selection node, or `null` when the caret is not on a line (no normalization ran).
 	 */
-	_normalizeEnterRange() {
+	_normalizeEditRange() {
 		if (!this.$.format.isLine(this.$.selection.getRange()?.startContainer)) return null;
 
 		this.$.selection.resetRangeToTextNode();

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

@@ -81,7 +81,7 @@ async function dispatchEnter(fc, e) {
 	this._enterKeyShift = false;
 
 	if (!shift) {
-		const normalized = this._normalizeEnterRange();
+		const normalized = this._normalizeEditRange();
 		if (normalized) selectionNode = normalized;
 	}
 

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

@@ -50,13 +50,14 @@ 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` (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.
+	 * default key action — normalize the edit range before the reducer reads it, for every custom-handled key.
+	 * - Enter: skipped when handled from `beforeinput` (useEnterFromBeforeInput),
+	 * - because mutating the DOM here on keydown re-traps the iOS/mobile IME marked-text.
+	 * - Backspace/Delete: always normalize on keydown (they have no `beforeinput` route).
 	 */
-	if (!useEnterFromBeforeInput(this.$.store, e) && keyCodeMap.isEnter(keyCode)) {
-		const normalized = this._normalizeEnterRange();
+	const enterOnKeydown = keyCodeMap.isEnter(keyCode) && !useEnterFromBeforeInput(this.$.store, e);
+	if (enterOnKeydown || keyCodeMap.isRemoveKey(keyCode)) {
+		const normalized = this._normalizeEditRange();
 		if (normalized) selectionNode = normalized;
 	}
 

package/src/core/event/ports.js

@@ -173,15 +173,13 @@ export function makePorts(inst, { _styleNodes }) {
 		formatAttrsTempCache: (attrs) => (inst._formatAttrsTemp = attrs),
 		setOnShortcutKey: (v) => (inst._onShortcutKey = v),
 
-		// === enter event specific ===
 		/**
-		 * @description Scrolls the editor view to the caret position after pressing `Enter`.
-		 * @param {Range} range Pre-Enter snapshot range (fallback only).
+		 * @description Scrolls the editor view to the caret position after an edit (Enter, Backspace, ...).
+		 * @param {Range} range Pre-edit snapshot range (fallback only).
 		 */
-		enterScrollTo(range) {
+		caretScrollTo(range) {
 			ui._iframeAutoHeight(frameContext);
 
-			// Scroll to the *live* post-Enter caret, not the pre-Enter `range` snapshot.
 			selection.scrollTo(selection.getRange() || range, {
 				behavior: 'auto',
 				block: 'nearest',
@@ -231,5 +229,5 @@ export function makePorts(inst, { _styleNodes }) {
  * @property {(v: boolean) => void} setOnShortcutKey
  *
  * @property {(e: Event) => void} enterPrevent
- * @property {(range: Range) => void} enterScrollTo
+ * @property {(range: Range) => void} caretScrollTo
  */

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

@@ -40,6 +40,7 @@ export function reduceBackspaceDown(actions, ports, ctx) {
 
 	if (selectRange && hardDelete(ports)) {
 		actions.push(A.preventStop());
+		actions.push(A.caretScrollTo(range));
 		return true;
 	}
 
@@ -66,6 +67,7 @@ export function reduceBackspaceDown(actions, ports, ctx) {
 		actions.push(A.preventStop());
 		actions.push(A.delFormatRemoveAndMove(range.startContainer, formatEl));
 		actions.push(A.historyPush(true));
+		actions.push(A.caretScrollTo(range));
 		return false;
 	}
 
@@ -107,6 +109,7 @@ export function reduceBackspaceDown(actions, ports, ctx) {
 		}
 
 		actions.push(A.editorNativeFocus());
+		actions.push(A.caretScrollTo(range));
 		return false;
 	}
 
@@ -201,6 +204,7 @@ export function reduceBackspaceDown(actions, ports, ctx) {
 				}
 			}
 
+			actions.push(A.caretScrollTo(range));
 			return true;
 		}
 
@@ -233,6 +237,7 @@ export function reduceBackspaceDown(actions, ports, ctx) {
 					),
 				);
 				actions.push(A.historyPush(true));
+				actions.push(A.caretScrollTo(range));
 				return true;
 			}
 		}
@@ -244,6 +249,7 @@ export function reduceBackspaceDown(actions, ports, ctx) {
 		if (fileComponentInfo) {
 			actions.push(A.preventStop());
 			actions.push(A.backspaceComponentRemove(false, formatEl.firstChild, formatEl, fileComponentInfo));
+			actions.push(A.caretScrollTo(range));
 			return true;
 		}
 	}
@@ -276,6 +282,7 @@ export function reduceBackspaceDown(actions, ports, ctx) {
 				actions.push(A.preventStop());
 				actions.push(A.domUtilsRemoveItem(prev));
 			}
+			actions.push(A.caretScrollTo(range));
 			return true;
 		}
 
@@ -283,6 +290,7 @@ export function reduceBackspaceDown(actions, ports, ctx) {
 		if (sel && dom.check.isNonEditable(sel.previousSibling)) {
 			actions.push(A.preventStop());
 			actions.push(A.domUtilsRemoveItem(sel.previousSibling));
+			actions.push(A.caretScrollTo(range));
 			return true;
 		}
 	}
@@ -300,6 +308,7 @@ export function reduceBackspaceDown(actions, ports, ctx) {
 			actions.push(A.preventStop());
 			actions.push(A.backspaceBrLineRowMerge(range.startContainer, rowStartBr));
 			actions.push(A.historyPush(true));
+			actions.push(A.caretScrollTo(range));
 			return false;
 		}
 	}
@@ -315,6 +324,7 @@ export function reduceBackspaceDown(actions, ports, ctx) {
 		actions.push(A.preventStop());
 		actions.push(A.backspaceSoftBreakMerge(range.startContainer));
 		actions.push(A.historyPush(true));
+		actions.push(A.caretScrollTo(range));
 		return false;
 	}
 
@@ -331,8 +341,10 @@ export function reduceBackspaceDown(actions, ports, ctx) {
 		actions.push(A.preventStop());
 		actions.push(A.backspaceEmptyLineMergePrev(formatEl, emptyLinePrev));
 		actions.push(A.historyPush(true));
+		actions.push(A.caretScrollTo(range));
 		return false;
 	}
 
+	actions.push(A.caretScrollTo(range));
 	return true;
 }

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

@@ -79,7 +79,7 @@ export function reduceEnterDown(actions, ports, ctx) {
 	if (shift) {
 		ports.enterPrevent(e);
 		actions.push(A.enterShiftBr(range));
-		actions.push(A.enterScrollTo(range));
+		actions.push(A.caretScrollTo(range));
 		return true;
 	}
 
@@ -107,7 +107,7 @@ export function reduceEnterDown(actions, ports, ctx) {
 		if (formatEndEdge && (/^H[1-6]$/i.test(formatEl.nodeName) || /^HR$/i.test(formatEl.nodeName))) {
 			ports.enterPrevent(e);
 			actions.push(A.enterLineAddDefault(formatEl));
-			actions.push(A.enterScrollTo(range));
+			actions.push(A.caretScrollTo(range));
 			return true;
 		} else if (rangeEl && formatEl && !dom.check.isTableCell(rangeEl) && !/^FIGCAPTION$/i.test(rangeEl.nodeName)) {
 			// add default List line
@@ -118,7 +118,7 @@ export function reduceEnterDown(actions, ports, ctx) {
 			) {
 				ports.enterPrevent(e);
 				actions.push(A.enterListAddItem(formatEl, selectionNode));
-				actions.push(A.enterScrollTo(range));
+				actions.push(A.caretScrollTo(range));
 				return true;
 			}
 
@@ -146,7 +146,7 @@ export function reduceEnterDown(actions, ports, ctx) {
 				} else {
 					actions.push(A.enterBrLineInsert(range));
 				}
-				actions.push(A.enterScrollTo(range));
+				actions.push(A.caretScrollTo(range));
 				return true;
 			}
 
@@ -157,7 +157,7 @@ export function reduceEnterDown(actions, ports, ctx) {
 			} else {
 				actions.push(A.enterFormatInsertBrNode(wSelection));
 			}
-			actions.push(A.enterScrollTo(range));
+			actions.push(A.caretScrollTo(range));
 			return true;
 		}
 
@@ -167,7 +167,7 @@ export function reduceEnterDown(actions, ports, ctx) {
 			actions.push(
 				A.enterFormatBreakAtEdge(formatEl, selectionNode, formatStartEdge, formatEndEdge, bidiSwapped),
 			);
-			actions.push(A.enterScrollTo(range));
+			actions.push(A.caretScrollTo(range));
 			return true;
 		}
 
@@ -194,13 +194,13 @@ export function reduceEnterDown(actions, ports, ctx) {
 				actions.push(A.enterFormatBreakAtCursor(formatEl, range));
 			}
 
-			actions.push(A.enterScrollTo(range));
+			actions.push(A.caretScrollTo(range));
 			return true;
 		}
 	}
 
 	if (selectRange) {
-		actions.push(A.enterScrollTo(range));
+		actions.push(A.caretScrollTo(range));
 		return true;
 	}
 
@@ -211,7 +211,7 @@ export function reduceEnterDown(actions, ports, ctx) {
 	) {
 		ports.enterPrevent(e);
 		actions.push(A.enterFigcaptionExitInList(formatEl));
-		actions.push(A.enterScrollTo(range));
+		actions.push(A.caretScrollTo(range));
 	}
 
 	return true;

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

@@ -482,21 +482,28 @@ class Selection_ {
 				el?.scrollIntoView(scrollOption);
 			}
 
-			if (scrollOption?.behavior === 'auto' && scrollY !== _w.scrollY) {
-				if (positionToolbarHeight) {
-					if (isBottom) {
+			if (scrollOption?.behavior === 'auto') {
+				if (positionToolbarHeight && !isBottom) {
+					// A sticky toolbar overlays the viewport band [0 .. positionToolbarHeight].
+					// caret on a wrapped line — and nudge it below the toolbar. Guards:
+					//   height > 0 — skip a collapsed range's zero rect (phantom full-toolbar scroll)
+					//   top >= 0   — skip off-screen / mid-animation rects; `behavior:'auto'` follows
+					//                the page's CSS scroll-behavior, so on `smooth` hosts it's async
+					//   top < band — only correct when actually under the toolbar; caps the nudge at
+					//                toolbar height so a stale measurement can't overshoot
+					const caretNow = ref?.getBoundingClientRect?.();
+					if (caretNow?.height > 0 && caretNow.top >= 0 && caretNow.top < positionToolbarHeight) {
+						_w.scrollBy(0, -(positionToolbarHeight - caretNow.top));
+					}
+				} else if (scrollY !== _w.scrollY) {
+					if (positionToolbarHeight) {
 						// bottom toolbar covers the bottom — scroll down more so the element clears the toolbar
 						if (scrollY < _w.scrollY) {
 							_w.scrollBy(0, positionToolbarHeight);
 						}
-					} else {
-						// top toolbar covers the top — scroll up more so the element clears the toolbar
-						if (scrollY > _w.scrollY) {
-							_w.scrollBy(0, -positionToolbarHeight);
-						}
+					} else if (isAutoHeight) {
+						_w.scrollBy(0, statusbarHeight);
 					}
-				} else if (isAutoHeight) {
-					_w.scrollBy(0, statusbarHeight);
 				}
 			}
 
@@ -532,7 +539,11 @@ class Selection_ {
 				const rectTop = refRect?.height > 0 ? refRect.top + scrollY : this.#$.offset.getGlobal(el).top;
 				const scrollMargin = viewHeight + scrollY - rectTop - elH;
 
-				if (scrollMargin - PADDING > 0 && viewHeight > scrollMargin + PADDING + topToolbarH) return;
+				// Top clearance: with a sticky toolbar, the caret is already clear once its top
+				// felt right. With no toolbar (topToolbarH === 0), keep the original PADDING.
+				const caretTop = rectTop - scrollY;
+				const topClear = topToolbarH > 0 ? caretTop >= topToolbarH : viewHeight > scrollMargin + PADDING;
+				if (scrollMargin - PADDING > 0 && topClear) return;
 
 				const newScrollTop =
 					scrollMargin <= PADDING

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

@@ -885,14 +885,15 @@ class UIManager {
 		if (!text) return false;
 
 		const wysiwyg = fc.get('wysiwyg');
-		const prev = wysiwyg.querySelector('.se-placeholder-line');
 
 		const line = this.#store.get('hasFocus') ? this.#$.format.getLine(this.#$.selection.selectionNode) : null;
 		const inTableCell = !!line && !!dom.query.getParentElement(line, dom.check.isTableCell);
 		const target = dom.check.isEmptyLine(line) && !dom.check.isListCell(line) && !inTableCell ? line : null;
 
-		// Single-marker invariant: drop the previous marker unless it is still the target line.
-		if (prev && prev !== target) {
+		const prevMarkers = wysiwyg.querySelectorAll('.se-placeholder-line');
+		for (let i = 0; i < prevMarkers.length; i++) {
+			const prev = prevMarkers[i];
+			if (prev === target) continue;
 			prev.classList.remove('se-placeholder-line');
 			prev.removeAttribute('data-se-placeholder-line');
 			if (!prev.getAttribute('class')) prev.removeAttribute('class');

package/types/core/event/actions/index.d.ts

@@ -45,7 +45,7 @@ export namespace A {
 	function deleteBrLineRowMerge(rowEndBr: Node): Action;
 	function deleteSoftBreakMerge(br: Node): Action;
 	function tabFormatIndent(range: Range, formatEl: Element, shift: boolean): Action;
-	function enterScrollTo(range: Range): Action;
+	function caretScrollTo(range: Range): Action;
 	function enterLineAddDefault(formatEl: Element): Action;
 	function enterListAddItem(formatEl: Element, selectionNode: Node): Action;
 	function enterFormatExitEmpty(formatEl: Element, rangeEl: Element): Action;

package/types/core/event/effects/keydown.registry.d.ts

@@ -44,9 +44,10 @@ declare const _default: {
 	/** [tab] */
 	/** @action tabFormatIndent */
 	'tab.format.indent': ({ ports, ctx }: EffectContext_keydown, { range, formatEl, shift }: any) => boolean;
+	/** [caret] */
+	/** @action caretScrollTo */
+	'caret.scrollTo': ({ ports }: EffectContext_keydown, { range }: any) => void;
 	/** [enter] */
-	/** @action enterScrollTo */
-	'enter.scrollTo': ({ ports }: EffectContext_keydown, { range }: any) => void;
 	/** @action enterLineAddDefault */
 	'enter.line.addDefault': ({ ports }: EffectContext_keydown, { formatEl }: any) => void;
 	/** @action enterListAddItem */

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

@@ -93,11 +93,15 @@ declare class EventOrchestrator extends KernelInjector {
 	_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>`.
+	 * @description Normalize the edit range before the reducer reads it, for every key we custom-handle
+	 * (Enter, Backspace, Delete). Resets an element-level container (a `line` such as `P`) to a text node so
+	 * the rules' text-offset arithmetic (`isEdgePoint`, `endOffset === textContent.length`, ...) is valid; and
+	 * when the caret sits inside a zero-width text node adjacent to a `<br>`, moves it onto the `<br>`.
+	 * Without this, Backspace/Delete misfire whenever the browser reports the container as the line itself
+	 * (child-index offset) instead of a `<br>`/ZWS text node.
 	 * @returns {?(HTMLElement|Text)} The updated selection node, or `null` when the caret is not on a line (no normalization ran).
 	 */
-	_normalizeEnterRange(): (HTMLElement | Text) | null;
+	_normalizeEditRange(): (HTMLElement | Text) | null;
 	/**
 	 * @internal
 	 * @description Handles data transfer actions for `paste` and `drop` events.

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

@@ -168,10 +168,10 @@ export function makePorts(
 	formatAttrsTempCache: (attrs: any) => any;
 	setOnShortcutKey: (v: any) => any;
 	/**
-	 * @description Scrolls the editor view to the caret position after pressing `Enter`.
-	 * @param {Range} range Pre-Enter snapshot range (fallback only).
+	 * @description Scrolls the editor view to the caret position after an edit (Enter, Backspace, ...).
+	 * @param {Range} range Pre-edit snapshot range (fallback only).
 	 */
-	enterScrollTo(range: Range): void;
+	caretScrollTo(range: Range): void;
 	/**
 	 * @description Prevents the default behavior of the `Enter` key.
 	 * On the `beforeinput` Enter path the IME has already committed, so a plain `preventDefault` suffices.
@@ -261,5 +261,5 @@ export type EventReducerPorts = {
 	formatAttrsTempCache: (attrs: { [x: string]: any }) => void;
 	setOnShortcutKey: (v: boolean) => void;
 	enterPrevent: (e: Event) => void;
-	enterScrollTo: (range: Range) => void;
+	caretScrollTo: (range: Range) => void;
 };