suneditor 3.0.6 → 3.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "suneditor",
-	"version": "3.0.6",
+	"version": "3.1.0",
 	"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/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/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,
 };