suneditor 3.0.6 → 3.1.1

package/package.json

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

package/src/assets/suneditor.css

@@ -4377,8 +4377,8 @@
 	border-style: dashed none none;
 }
 
-/** mention  */
-.sun-editor .se-select-menu .se-select-item .se-mention-item span + span {
+/** autocomplete  */
+.sun-editor .se-select-menu .se-select-item .se-autocomplete-item span + span {
 	margin: 0 4px;
 	opacity: 0.5;
 }

package/src/core/editor.js

@@ -267,10 +267,27 @@ class Editor {
 
 			if (e.get('options').get('iframe')) {
 				const iframeLoaded = new Promise((resolve) => {
-					this.$.eventManager.addEvent(e.get('wysiwygFrame'), 'load', ({ target }) => {
-						this.#setIframeDocument(/** @type{HTMLIFrameElement} */ (target), this.$.optionProvider.options, e.get('options'));
+					const setupIframe = (target) => {
+						this.#setIframeDocument(target, this.$.optionProvider.options, e.get('options'));
 						resolve();
-					});
+					};
+
+					if (env.isGecko) {
+						// Firefox fires the iframe "load" event twice for sandboxed about:blank iframes —
+						// once for the initial document and again after sandbox processing replaces it.
+						// Debounce to ensure we initialize against the final document.
+						let debounceTimer = null;
+						this.$.eventManager.addEvent(e.get('wysiwygFrame'), 'load', ({ target }) => {
+							clearTimeout(debounceTimer);
+							debounceTimer = setTimeout(() => {
+								if (this.$) setupIframe(target);
+							}, 60);
+						});
+					} else {
+						this.$.eventManager.addEvent(e.get('wysiwygFrame'), 'load', ({ target }) => {
+							setupIframe(target);
+						});
+					}
 				});
 				iframePromises.push(iframeLoaded);
 			}

package/src/core/event/eventOrchestrator.js

@@ -1,5 +1,5 @@
 import KernelInjector from '../kernel/kernelInjector';
-import { dom, unicode, numbers, env, converter } from '../../helper';
+import { dom, unicode, numbers, env, converter, msOffice } from '../../helper';
 import { _DragHandle } from '../../modules/ui';
 
 // event handlers
@@ -256,6 +256,7 @@ class EventOrchestrator extends KernelInjector {
 			if (MSData) {
 				cleanData = cleanData.replace(/\n/g, ' ');
 				plainText = plainText.replace(/\n/g, ' ');
+				cleanData = msOffice.cleanHTML(cleanData);
 			}
 		}
 

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

@@ -42,9 +42,9 @@ export async function OnKeyDown_wysiwyg(fc, e) {
 	this.$.menu.dropdownOff();
 
 	if (this.$.store.mode.isBalloon) {
-		this._hideToolbar();
+		if (!this.$.store.mode.isBalloonAlways) this._hideToolbar();
 	} else if (this.$.store.mode.isSubBalloon) {
-		this._hideToolbar_sub();
+		if (!this.$.store.mode.isSubBalloonAlways) this._hideToolbar_sub();
 	}
 
 	// user event

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/dom/html.js

@@ -1648,12 +1648,34 @@ class HTML {
 
 		for (let i = 0, len = withoutFormatCells.length, t, f; i < len; i++) {
 			t = withoutFormatCells[i];
+
 			f = dom.utils.createElement('DIV');
-			f.innerHTML = t.textContent.trim().length === 0 && t.children.length === 0 ? '<br>' : t.innerHTML;
+			f.innerHTML = t.innerHTML;
+
+			if (t.textContent.trim().length === 0 && this.#isAllTextStyleNodes(t)) {
+				let leaf = /** @type {Element} */ (f);
+				while (leaf.firstElementChild) leaf = leaf.firstElementChild;
+				leaf.innerHTML = '<br>';
+			}
+
 			t.innerHTML = f.outerHTML;
 		}
 	}
 
+	/**
+	 * @description Checks if all element descendants are text-style nodes (no focusable non-text elements like br, img, etc.).
+	 * @param {Element} el Target element
+	 * @returns {boolean}
+	 */
+	#isAllTextStyleNodes(el) {
+		const nodes = el.querySelectorAll('*');
+		const format = this.#$.format;
+		for (let i = 0; i < nodes.length; i++) {
+			if (!format.isTextStyleNode(nodes[i])) return false;
+		}
+		return true;
+	}
+
 	/**
 	 * @description Removes attribute values such as style and converts tags that do not conform to the `html5` standard.
 	 * @param {string} html HTML string

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

@@ -1,8 +1,9 @@
 import { getParentElement } from '../../../helper/dom/domQuery';
 import { isWysiwygFrame, isElement } from '../../../helper/dom/domCheck';
-import { hasClass, addClass, removeClass, getClientSize } from '../../../helper/dom/domUtils';
+import { hasClass, addClass, removeClass, getClientSize, createTextNode } from '../../../helper/dom/domUtils';
 import { numbers } from '../../../helper';
 import { _w, _d } from '../../../helper/env';
+import { zeroWidthSpace } from '../../../helper/unicode';
 
 /**
  * @typedef {Object} RectsInfo Bounding rectangle information of the selection range.
@@ -639,6 +640,28 @@ class Offset {
 		const rectsObj = this.#$.selection.getRects(range, positionTop ? 'start' : 'end');
 		positionTop = rectsObj.position === 'start';
 
+		// fallback: when rects could not be obtained from the range (e.g. collapsed at <br>),
+		// insert a temporary zero-width space to get accurate viewport coordinates.
+		if (rectsObj.rects.noText) {
+			let refNode = range.startContainer;
+			if (refNode.nodeType === 1) refNode = refNode.childNodes[range.startOffset] || refNode;
+			const parentEl = refNode.parentNode;
+			if (parentEl) {
+				const zws = createTextNode(zeroWidthSpace);
+				parentEl.insertBefore(zws, refNode);
+				const tempRange = _d.createRange();
+				tempRange.setStart(zws, 1);
+				tempRange.setEnd(zws, 1);
+				const tempRects = tempRange.getClientRects()[0];
+				if (tempRects) {
+					rectsObj.rects = tempRects;
+					rectsObj.scrollLeft = _w.scrollX;
+					rectsObj.scrollTop = _w.scrollY;
+				}
+				parentEl.removeChild(zws);
+			}
+		}
+
 		const isFullScreen = this.#frameContext.get('isFullScreen');
 		const topArea = this.#frameContext.get('topArea');
 		const isInCarrier = this.#carrierWrapper.contains(element);

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/core/logic/panel/viewer.js

@@ -526,6 +526,8 @@ class Viewer {
 		const printDocument = dom.query.getIframeDocument(iframe);
 		const wDoc = this.#frameContext.get('_wd');
 		const rtlClass = this.#options.get('_rtl') ? ' se-rtl' : '';
+		const themeClass = (this.#options.get('_themeClass') || '').trim();
+		const stripTheme = (cls) => (themeClass ? cls.replace(themeClass, '').trim() : cls);
 		const pageCSS = /*html*/ `
 			<style>
 				@page {
@@ -536,10 +538,10 @@ class Viewer {
 
 		if (this.#frameOptions.get('iframe')) {
 			const arrts = this.#options.get('printClass')
-				? 'class="' + this.#options.get('printClass') + rtlClass + '"'
+				? 'class="' + stripTheme(this.#options.get('printClass')) + rtlClass + '"'
 				: this.#frameOptions.get('iframe_fullPage')
-					? dom.utils.getAttributesToString(wDoc.body, ['contenteditable'])
-					: 'class="' + this.#options.get('_editableClass') + rtlClass + '"';
+					? dom.utils.getAttributesToString(wDoc.body, ['contenteditable']).replace(themeClass, '')
+					: 'class="' + stripTheme(this.#options.get('_editableClass')) + rtlClass + '"';
 
 			printDocument.write(/*html*/ `
 				<!DOCTYPE html>
@@ -570,7 +572,7 @@ class Viewer {
 						${linkHTML}
 						${pageCSS}
 					</head>
-					<body class="${(this.#options.get('printClass') || this.#options.get('_editableClass')) + rtlClass}" style="padding: 0; padding-left: 0; padding-top: 0; padding-right: 0; padding-bottom: 0;">
+					<body class="${stripTheme(this.#options.get('printClass') || this.#options.get('_editableClass')) + rtlClass}" style="padding: 0; padding-left: 0; padding-top: 0; padding-right: 0; padding-bottom: 0;">
 						${contentHTML}
 					</body>
 				</html>`);

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

@@ -16,7 +16,7 @@ import { CreateShortcuts } from '../../section/constructor';
  * @property {string} type - Plugin's type. (`command`, `dropdown`, `modal`, `browser`, `input`, `field`, `popup`).
  * @property {Node} button - The plugin command button.
  * @property {Array<string>} r - An array of key codes generated with the reverseButtons option, used to reverse the action for a specific key combination.
- * @property {string} textTrigger - Whether the event was triggered by a text input (e.g., mention like @ab).
+ * @property {string} textTrigger - Whether the event was triggered by a text input (e.g., autocomplete like @ab).
  */
 
 /**

package/src/core/schema/options.js

@@ -579,6 +579,7 @@ export const DEFAULTS = {
  * @property {import('../../plugins/dropdown/align.js').AlignPluginOptions} [align]
  * @property {import('../../plugins/modal/audio.js').AudioPluginOptions} [audio]
  * @property {import('../../plugins/browser/audioGallery.js').AudioGalleryPluginOptions} [audioGallery]
+ * @property {import('../../plugins/field/autocomplete.js').AutocompletePluginOptions} [autocomplete]
  * @property {import('../../plugins/dropdown/backgroundColor.js').BackgroundColorPluginOptions} [backgroundColor]
  * @property {import('../../plugins/dropdown/blockStyle.js').BlockStylePluginOptions} [blockStyle]
  * @property {import('../../plugins/command/codeBlock.js').CodeBlockPluginOptions} [codeBlock]
@@ -598,7 +599,6 @@ export const DEFAULTS = {
  * @property {import('../../plugins/dropdown/lineHeight.js').LineHeightPluginOptions} [lineHeight]
  * @property {import('../../plugins/modal/link.js').LinkPluginOptions} [link]
  * @property {import('../../plugins/modal/math.js').MathPluginOptions} [math]
- * @property {import('../../plugins/field/mention.js').MentionPluginOptions} [mention]
  * @property {import('../../plugins/dropdown/paragraphStyle.js').ParagraphStylePluginOptions} [paragraphStyle]
  * @property {import('../../plugins/dropdown/table/index.js').TablePluginOptions} [table]
  * @property {import('../../plugins/dropdown/template.js').TemplatePluginOptions} [template]

package/src/core/section/constructor.js

@@ -946,7 +946,7 @@ function _initTargetElements(key, options, topDiv, targetOptions) {
 		// [sandbox] prop
 		let sandboxValue = frameAttrs.sandbox;
 		if (sandboxValue) {
-			const requiredSandbox = ['allow-same-origin'];
+			const requiredSandbox = ['allow-same-origin', 'allow-scripts'];
 			const userSandbox = sandboxValue.split(/\s+/);
 			const missingSandbox = requiredSandbox.filter((req) => !userSandbox.includes(req));
 
@@ -955,7 +955,7 @@ function _initTargetElements(key, options, topDiv, targetOptions) {
 				sandboxValue = userSandbox.concat(missingSandbox).join(' ');
 			}
 		} else {
-			sandboxValue = 'allow-same-origin';
+			sandboxValue = 'allow-same-origin allow-scripts';
 		}
 
 		// iframe [sandbox] attr

package/src/helper/index.js

@@ -6,6 +6,7 @@ import Numbers from './numbers';
 import KeyCodeMap from './keyCodeMap';
 import Clipboard from './clipboard';
 import Markdown from './markdown';
+import MSOffice from './msOffice';
 
 export const env = Env;
 export const unicode = Unicode;
@@ -15,6 +16,7 @@ export const numbers = Numbers;
 export const keyCodeMap = KeyCodeMap;
 export const clipboard = Clipboard;
 export const markdown = Markdown;
+export const msOffice = MSOffice;
 
 export default {
 	env,
@@ -25,4 +27,5 @@ export default {
 	keyCodeMap,
 	clipboard,
 	markdown,
+	msOffice,
 };