suneditor 3.3.2 → 3.3.3

package/package.json

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

package/src/core/event/eventOrchestrator.js

@@ -1107,6 +1107,7 @@ class EventOrchestrator extends KernelInjector {
 		}
 
 		this.#scrollContainer();
+		this.#ui.blockHandle?.syncScroll();
 
 		// document type page
 		if (this.$.frameContext.has('documentType_use_page')) {
@@ -1159,6 +1160,7 @@ class EventOrchestrator extends KernelInjector {
 	#OnScroll_Abs() {
 		this.#menu.dropdownOff();
 		this.#scrollContainer();
+		this.#ui.blockHandle?.syncScroll();
 	}
 
 	/**

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

@@ -22,6 +22,8 @@ const _styleNodes = Object.preventExtensions({ value: [] });
  * @param {KeyboardEvent} e - Event object
  */
 export async function OnKeyDown_wysiwyg(fc, e) {
+	this.$.ui.blockHandle?.hideOnKeyDown();
+
 	if ((this.isComposing = keyCodeMap.isComposing(e))) return true;
 	if (this.$.ui.selectMenuOn || !e.isTrusted) return;
 

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

@@ -54,6 +54,10 @@ class BlockHandle {
 	#pendingMouseY = undefined;
 	/** @type {number|null} */
 	#hideTimer = null;
+	/** @type {boolean} */
+	#keyboardLock = false;
+	/** @type {number|undefined} */
+	#lastMouseY = undefined;
 	/** @type {HTMLElement[]} */
 	#hoverLines = [];
 
@@ -123,8 +127,6 @@ class BlockHandle {
 			em.addEvent(wrapper, 'dragover', this.#onDragOver.bind(this));
 			em.addEvent(wrapper, 'drop', this.#onDrop.bind(this));
 		}
-
-		em.addEvent(this.#$.frameContext.get('eventWysiwyg'), 'keydown', this.#onWrapperKeyDown.bind(this), true);
 	}
 
 	/**
@@ -161,13 +163,24 @@ class BlockHandle {
 		this.#cancelHide();
 		// Lock handle while action menu is open or dragging
 		if (this.#actionMenu?.isOpen || this.#isDragging) return;
+
+		if (this.#keyboardLock) {
+			if (mouseY === this.#lastMouseY) return;
+			this.#keyboardLock = false;
+		}
+
+		const framePending = this.#pendingTarget !== null;
 		this.#pendingTarget = eventTarget;
+		this.#lastMouseY = mouseY;
 		this.#pendingMouseY = mouseY;
-		if (this.#rafId) return;
+		if (framePending) return;
+
 		this.#rafId = _w.requestAnimationFrame(() => {
 			this.#rafId = null;
-			if (this.#pendingTarget) {
-				this.#doPosition(this.#pendingTarget, this.#pendingMouseY);
+			const target = this.#pendingTarget;
+			this.#pendingTarget = null;
+			if (target) {
+				this.#doPosition(target, this.#pendingMouseY);
 			}
 		});
 	}
@@ -321,6 +334,7 @@ class BlockHandle {
 		if (!this.#$) return;
 		if (this.#isDragging) return;
 
+		this.#keyboardLock = false;
 		this.#cancelHide();
 
 		// Don't reposition while action menu is open
@@ -494,6 +508,24 @@ class BlockHandle {
 
 		const totalOffset = indent + centeringExtra;
 
+		const toolbarEl = this.#$.context?.get('toolbar_main');
+		if (toolbarEl) {
+			const tRect = toolbarEl.getBoundingClientRect();
+			const handleWidth = this.#handle.offsetWidth || 0;
+			const hTop = firstLineCenterVP - handleHeight / 2;
+			const hLeft = isRtl ? areaRect.right - totalOffset - handleWidth : areaRect.left + totalOffset;
+			if (
+				tRect.height > 0 &&
+				hTop < tRect.bottom - 1 &&
+				hTop + handleHeight > tRect.top + 1 &&
+				hLeft < tRect.right &&
+				hLeft + handleWidth > tRect.left
+			) {
+				this.#hideHandle();
+				return;
+			}
+		}
+
 		this.#handle.style.top = top + 'px';
 		if (isRtl) {
 			this.#handle.style.left = '';
@@ -628,10 +660,13 @@ class BlockHandle {
 	}
 
 	/**
+	 * @internal
 	 * @description Editor keyboard activity (typing, Enter, etc.)
 	 */
-	#onWrapperKeyDown() {
-		this.#clearHoverLines();
+	hideOnKeyDown() {
+		if (this.#actionMenu?.isOpen) return;
+		this.#keyboardLock = true;
+		this.hideNow();
 	}
 
 	/**

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

@@ -136,6 +136,8 @@ class Component {
 
 		if (insertBehavior === undefined) insertBehavior = this.#options.get('componentInsertBehavior');
 
+		if (this.isSelected) this.__deselect();
+
 		const r = this.#$.html.remove();
 		const isInline = this.isInline(element);
 		this.#$.selection.getRangeAndAddLine(this.#$.selection.getRange(), r.container);
@@ -195,7 +197,7 @@ class Component {
 
 		const targetElement = /** @type {HTMLElement} */ (oNode || element);
 
-		if (scrollTo) this.#$.selection.scrollTo(targetElement, { behavior: 'auto' });
+		if (scrollTo) this.#$.selection.scrollTo(targetElement, { behavior: 'auto', noFocus: true });
 		if (insertBehavior !== null) this.applyInsertBehavior(element, oNode, insertBehavior);
 
 		return targetElement;

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

@@ -1,7 +1,36 @@
-import { _w } from '../../../helper/env';
+import { _w, _d } from '../../../helper/env';
 import { getNodeFromPath, getNodePath } from '../../../helper/dom/domQuery';
 import { numbers } from '../../../helper';
 
+const TRANSIENT_UI_CLASSES = [
+	'se-component-selected',
+	'se-figure-over-selected',
+	'se-block-hover',
+	'se-pre-code-focus',
+];
+const TRANSIENT_UI_CLASS_RE = new RegExp(TRANSIENT_UI_CLASSES.join('|'));
+const TRANSIENT_UI_CLASS_SELECTOR = '.' + TRANSIENT_UI_CLASSES.join(', .');
+
+/**
+ * @description Strips transient UI-state classes (selection/hover markers) from a snapshot's HTML.
+ * - only while a marker is actually present in the serialized content.
+ * @param {string} html Serialized wysiwyg content
+ * @returns {string} The cleaned content
+ */
+function cleanSnapshot(html) {
+	if (!TRANSIENT_UI_CLASS_RE.test(html)) return html;
+
+	const t = _d.createElement('template');
+	t.innerHTML = html;
+
+	const marked = t.content.querySelectorAll(TRANSIENT_UI_CLASS_SELECTOR);
+	for (let i = 0; i < marked.length; i++) {
+		marked[i].classList.remove(...TRANSIENT_UI_CLASSES);
+	}
+
+	return t.innerHTML;
+}
+
 /**
  * @description History stack closure
  * @param {SunEditor.Kernel} kernel
@@ -206,7 +235,7 @@ export default function History(kernel) {
 		$.pluginManager.checkFileInfo(false);
 
 		const fc = frameRoots.get(rootKey);
-		const current = fc.get('wysiwyg').innerHTML;
+		const current = cleanSnapshot(fc.get('wysiwyg').innerHTML);
 		const root = rootStack[rootKey];
 		if (!current || (root.value[root.index] && current === root.value[root.index].content)) return;
 		if (stack.length > stackIndex + 1) refreshRoots(root);
@@ -319,7 +348,7 @@ export default function History(kernel) {
 		 */
 		overwrite(rootKey) {
 			setStack(
-				frameRoots.get(rootKey || store.get('rootKey')).get('wysiwyg').innerHTML,
+				cleanSnapshot(frameRoots.get(rootKey || store.get('rootKey')).get('wysiwyg').innerHTML),
 				null,
 				store.get('rootKey'),
 				0,

package/src/modules/contract/Modal.js

@@ -249,6 +249,7 @@ class Modal {
 		}
 
 		this.#targetElement = null;
+		this.isUpdate = false;
 	}
 
 	/**

package/src/plugins/command/codeBlock.js

@@ -1,5 +1,5 @@
 import { PluginCommand, PluginDropdown } from '../../interfaces';
-import { converter, dom } from '../../helper';
+import { converter, dom, env } from '../../helper';
 import { Controller } from '../../modules/contract';
 import { SelectMenu } from '../../modules/ui';
 
@@ -133,6 +133,14 @@ class CodeBlock extends PluginCommand {
 		this.#hoverSelectMenu.on(this.#hoverButton, this.#onHoverSelect.bind(this));
 		this.#buildHoverMenu('');
 
+		this.$.eventManager.addEvent(containerEl, 'mousedown', (e) => {
+			if (env.isMobile || this.#hoverSelectMenu.form?.contains(dom.query.getEventTarget(e))) {
+				this.$.store.set('_preventBlur', true);
+			} else {
+				e.preventDefault();
+			}
+		});
+
 		// selectMenu
 		this.$.eventManager.addEvent(this.#hoverButton, 'click', (e) => {
 			e.preventDefault();

package/types/core/logic/panel/blockHandle.d.ts

@@ -47,5 +47,10 @@ declare class BlockHandle {
 	 * @description Cleanup — remove listeners, destroy menus, null references.
 	 */
 	destroy(): void;
+	/**
+	 * @internal
+	 * @description Editor keyboard activity (typing, Enter, etc.)
+	 */
+	hideOnKeyDown(): void;
 	#private;
 }