suneditor 3.1.0 → 3.1.1

package/package.json

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

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

@@ -40,8 +40,8 @@ export function reduceEnterDown(actions, ports, ctx) {
 	}
 
 	if (!shift) {
-		const formatEndEdge = !range.endContainer.nextSibling && format.isEdgeLine(range.endContainer, range.endOffset, 'end');
-		const formatStartEdge = !range.startContainer.previousSibling && format.isEdgeLine(range.startContainer, range.startOffset, 'front');
+		const formatEndEdge = format.isEdgeLine(range.endContainer, range.endOffset, 'end');
+		const formatStartEdge = format.isEdgeLine(range.startContainer, range.startOffset, 'front');
 
 		// add default format line
 		if (formatEndEdge && (/^H[1-6]$/i.test(formatEl.nodeName) || /^HR$/i.test(formatEl.nodeName))) {

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

@@ -766,7 +766,11 @@ class Format {
 	 * @returns {node is HTMLElement}
 	 */
 	isEdgeLine(node, offset, dir) {
-		if (!dom.check.isEdgePoint(node, offset, dir)) return false;
+		if (dir === 'front') {
+			if (offset > 0) return false;
+		} else {
+			if (node?.textContent?.length > offset) return false;
+		}
 
 		let result = false;
 		const siblingType = dir === 'front' ? 'previousSibling' : 'nextSibling';

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

@@ -1,4 +1,6 @@
-import { dom, converter } from '../../../helper';
+import { dom, converter, env } from '../../../helper';
+
+const { isMobile, _w } = env;
 
 /**
  * @description Dropdown and container menu management class
@@ -22,6 +24,9 @@ class Menu {
 	#bindMenu_mouseout = null;
 	#menuBtn = null;
 	#menuContainer = null;
+	#deferredShowTimer = null;
+	#viewportListener = null;
+	#visualViewport = null;
 
 	/**
 	 * @constructor
@@ -67,6 +72,7 @@ class Menu {
 		// eventManager member (viewport)
 		this.#menuBtn = null;
 		this.#menuContainer = null;
+		this.#visualViewport = _w.visualViewport || null;
 	}
 
 	/**
@@ -109,7 +115,12 @@ class Menu {
 		this.currentDropdownType = btnEl.getAttribute('data-type');
 		const menu = (this.currentDropdown = this.targetMap[dropdownName]);
 		this.currentDropdownActiveButton = btnEl;
-		this.#setMenuPosition(btnEl, menu);
+
+		if (isMobile) {
+			this.#deferMenuShow(btnEl, menu);
+		} else {
+			this.#setMenuPosition(btnEl, menu);
+		}
 
 		this.#bindClose_dropdown_mouse = this.#eventManager.addGlobalEvent('mousedown', this.#globalEventHandler.mousedown, false);
 		if (this.#dropdownCommands.includes(dropdownName)) {
@@ -131,6 +142,7 @@ class Menu {
 	 * @description Closes the currently open dropdown menu.
 	 */
 	dropdownOff() {
+		this.#clearDeferredShow();
 		this.#removeGlobalEvent();
 		if (IsFree(this.currentDropdownType)) this.currentDropdownPlugin?.off?.();
 
@@ -189,7 +201,13 @@ class Menu {
 
 		this.currentContainerActiveButton = /** @type {HTMLButtonElement} */ (button);
 		const containerName = (this.currentContainerName = this.currentContainerActiveButton.getAttribute('data-command'));
-		this.#setMenuPosition(button, (this.currentContainer = this.targetMap[containerName]));
+		this.currentContainer = this.targetMap[containerName];
+
+		if (isMobile) {
+			this.#deferMenuShow(button, this.currentContainer);
+		} else {
+			this.#setMenuPosition(button, this.currentContainer);
+		}
 
 		this.#bindClose_cons_mouse = this.#eventManager.addGlobalEvent('mousedown', this.#globalEventHandler.containerDown, false);
 
@@ -201,6 +219,7 @@ class Menu {
 	 * @description Closes the currently open menu container.
 	 */
 	containerOff() {
+		this.#clearDeferredShow();
 		this.#removeGlobalEvent();
 
 		if (this.currentContainer) {
@@ -231,6 +250,8 @@ class Menu {
 	 */
 	__restoreMenuPosition() {
 		if (!this.#menuBtn || !this.#menuContainer) return;
+		// skip if deferred show is pending — it will handle positioning after viewport settles
+		if (this.#viewportListener || this.#deferredShowTimer) return;
 		this.#setMenuPosition(this.#menuBtn, this.#menuContainer);
 	}
 
@@ -253,6 +274,56 @@ class Menu {
 		this.#menuContainer = menu;
 	}
 
+	/**
+	 * @description Defer menu display on mobile until viewport settles after keyboard dismiss.
+	 * @param {Node} element Button element
+	 * @param {HTMLElement} menu Menu element
+	 */
+	#deferMenuShow(element, menu) {
+		this.#clearDeferredShow();
+
+		menu.style.display = 'none';
+		dom.utils.addClass(element.parentElement.children, 'on');
+		this.#menuBtn = element;
+		this.#menuContainer = menu;
+
+		let resolved = false;
+		const show = (delay) => {
+			if (resolved) return;
+			resolved = true;
+			this.#clearDeferredShow();
+			this.#deferredShowTimer = _w.setTimeout(() => {
+				this.#deferredShowTimer = null;
+				if (this.#menuBtn === element) {
+					this.#setMenuPosition(element, menu);
+				}
+			}, delay);
+		};
+
+		if (this.#visualViewport) {
+			// listen for viewport resize (keyboard dismiss) — small delay to let viewport settle
+			this.#viewportListener = () => show(10);
+			this.#visualViewport.addEventListener('resize', this.#viewportListener, { once: true });
+		}
+
+		// fallback if no viewport change occurs (keyboard already hidden or no visualViewport)
+		this.#deferredShowTimer = _w.setTimeout(() => show(0), 50);
+	}
+
+	/**
+	 * @description Clear deferred show timer and viewport listener.
+	 */
+	#clearDeferredShow() {
+		if (this.#deferredShowTimer) {
+			_w.clearTimeout(this.#deferredShowTimer);
+			this.#deferredShowTimer = null;
+		}
+		if (this.#viewportListener) {
+			this.#visualViewport?.removeEventListener('resize', this.#viewportListener);
+			this.#viewportListener = null;
+		}
+	}
+
 	/**
 	 * @description Check if the element is part of a more layer
 	 * @param {Node} element The element to check

package/src/plugins/field/autocomplete.js

@@ -59,11 +59,48 @@ function defaultOnSelect(item, triggerText) {
  * @property {boolean} [useCachingFieldData=true] - Whether to cache selected items for priority display.
  * @property {Object<string, AutocompleteTriggerConfig>} triggers - Per-trigger configurations keyed by trigger character.
  * ```js
- * // triggers
- * {
- *   '@': { data: [...], renderItem: (item) => `...` },
- *   '#': { apiUrl: '/api/tags?q={key}' }
- * }
+ * // Basic usage with static data — mention trigger
+ * const editor = SUNEDITOR.create('#editor', {
+ *   plugins: [autocomplete],
+ *   autocomplete: {
+ *     triggers: {
+ *       '@': {
+ *         data: [
+ *           { key: 'john', name: 'John Doe' },
+ *           { key: 'jane', name: 'Jane Smith' },
+ *         ],
+ *       },
+ *     },
+ *   },
+ * });
+ *
+ * // API-based trigger with custom rendering and selection
+ * const editor = SUNEDITOR.create('#editor', {
+ *   plugins: [autocomplete],
+ *   autocomplete: {
+ *     delayTime: 200,
+ *     limitSize: 10,
+ *     triggers: {
+ *       '@': {
+ *         apiUrl: '/api/users?q={key}&limit={limitSize}',
+ *         apiHeaders: { Authorization: 'Bearer TOKEN' },
+ *         transformResponse: (json) => json.data.map((u) => ({ key: u.username, name: u.displayName, id: u.id })),
+ *         renderItem: (item) => `<div class="user-item"><strong>${item.key}</strong> <span>${item.name}</span></div>`,
+ *         onSelect: (item, trigger) => ({
+ *           tag: 'a',
+ *           attrs: { href: `/users/${item.id}`, 'data-se-autocomplete': trigger + item.key },
+ *           text: trigger + item.key,
+ *         }),
+ *       },
+ *       '#': {
+ *         apiUrl: '/api/tags?q={key}',
+ *         transformResponse: (json) => json.tags,
+ *         searchStartLength: 2,
+ *         useCachingData: false,
+ *       },
+ *     },
+ *   },
+ * });
  * ```
  */
 

package/types/plugins/field/autocomplete.d.ts

@@ -102,11 +102,48 @@ export type AutocompletePluginOptions = {
 	/**
 	 * - Per-trigger configurations keyed by trigger character.
 	 * ```js
-	 * // triggers
-	 * {
-	 * '@': { data: [...], renderItem: (item) => `...` },
-	 * '#': { apiUrl: '/api/tags?q={key}' }
-	 * }
+	 * // Basic usage with static data — mention trigger
+	 * const editor = SUNEDITOR.create('#editor', {
+	 * plugins: [autocomplete],
+	 * autocomplete: {
+	 * triggers: {
+	 * '@': {
+	 * data: [
+	 * { key: 'john', name: 'John Doe' },
+	 * { key: 'jane', name: 'Jane Smith' },
+	 * ],
+	 * },
+	 * },
+	 * },
+	 * });
+	 *
+	 * // API-based trigger with custom rendering and selection
+	 * const editor = SUNEDITOR.create('#editor', {
+	 * plugins: [autocomplete],
+	 * autocomplete: {
+	 * delayTime: 200,
+	 * limitSize: 10,
+	 * triggers: {
+	 * '@': {
+	 * apiUrl: '/api/users?q={key}&limit={limitSize}',
+	 * apiHeaders: { Authorization: 'Bearer TOKEN' },
+	 * transformResponse: (json) => json.data.map((u) => ({ key: u.username, name: u.displayName, id: u.id })),
+	 * renderItem: (item) => `<div class="user-item"><strong>${item.key}</strong> <span>${item.name}</span></div>`,
+	 * onSelect: (item, trigger) => ({
+	 * tag: 'a',
+	 * attrs: { href: `/users/${item.id}`, 'data-se-autocomplete': trigger + item.key },
+	 * text: trigger + item.key,
+	 * }),
+	 * },
+	 * '#': {
+	 * apiUrl: '/api/tags?q={key}',
+	 * transformResponse: (json) => json.tags,
+	 * searchStartLength: 2,
+	 * useCachingData: false,
+	 * },
+	 * },
+	 * },
+	 * });
 	 * ```
 	 */
 	triggers: {
@@ -142,11 +179,48 @@ export type AutocompletePluginOptions = {
  * @property {boolean} [useCachingFieldData=true] - Whether to cache selected items for priority display.
  * @property {Object<string, AutocompleteTriggerConfig>} triggers - Per-trigger configurations keyed by trigger character.
  * ```js
- * // triggers
- * {
- *   '@': { data: [...], renderItem: (item) => `...` },
- *   '#': { apiUrl: '/api/tags?q={key}' }
- * }
+ * // Basic usage with static data — mention trigger
+ * const editor = SUNEDITOR.create('#editor', {
+ *   plugins: [autocomplete],
+ *   autocomplete: {
+ *     triggers: {
+ *       '@': {
+ *         data: [
+ *           { key: 'john', name: 'John Doe' },
+ *           { key: 'jane', name: 'Jane Smith' },
+ *         ],
+ *       },
+ *     },
+ *   },
+ * });
+ *
+ * // API-based trigger with custom rendering and selection
+ * const editor = SUNEDITOR.create('#editor', {
+ *   plugins: [autocomplete],
+ *   autocomplete: {
+ *     delayTime: 200,
+ *     limitSize: 10,
+ *     triggers: {
+ *       '@': {
+ *         apiUrl: '/api/users?q={key}&limit={limitSize}',
+ *         apiHeaders: { Authorization: 'Bearer TOKEN' },
+ *         transformResponse: (json) => json.data.map((u) => ({ key: u.username, name: u.displayName, id: u.id })),
+ *         renderItem: (item) => `<div class="user-item"><strong>${item.key}</strong> <span>${item.name}</span></div>`,
+ *         onSelect: (item, trigger) => ({
+ *           tag: 'a',
+ *           attrs: { href: `/users/${item.id}`, 'data-se-autocomplete': trigger + item.key },
+ *           text: trigger + item.key,
+ *         }),
+ *       },
+ *       '#': {
+ *         apiUrl: '/api/tags?q={key}',
+ *         transformResponse: (json) => json.tags,
+ *         searchStartLength: 2,
+ *         useCachingData: false,
+ *       },
+ *     },
+ *   },
+ * });
  * ```
  */
 /**