suneditor 3.0.5 → 3.1.0

package/package.json

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

package/src/assets/suneditor.css

@@ -368,6 +368,26 @@
 	z-index: 1;
 }
 
+/** -- plain text button */
+.sun-editor .se-btn.se-btn-plain {
+	background-color: transparent;
+	border-color: transparent;
+	box-shadow: none;
+}
+.sun-editor .se-btn.se-btn-plain:not(.on):not(.active):enabled:hover,
+.sun-editor .se-btn.se-btn-plain:not(.on):not(.active):enabled:focus {
+	background-color: transparent;
+	border-color: transparent;
+	box-shadow: none;
+}
+.sun-editor .se-btn.se-btn-plain:not(.on):not(.active):enabled:active,
+.sun-editor .se-btn.se-btn-plain:not(.on):not(.active):enabled.__se__active {
+	background-color: transparent;
+	border-color: transparent !important;
+	box-shadow: none;
+	outline: none !important;
+}
+
 /** --- primary button */
 .sun-editor .se-btn-primary {
 	background-color: var(--se-active-light2-color);
@@ -3232,11 +3252,14 @@
 	margin-left: 0;
 	margin-right: 0;
 }
-
-.sun-editor .se-browser .se-browser-search input {
+.sun-editor .se-browser .se-browser-search-input-wrap {
+	position: relative;
 	flex: auto;
+}
+.sun-editor .se-browser .se-browser-search-input-wrap input {
+	width: 100%;
+	padding: 3px 24px 3px 6px;
 	background-color: transparent;
-	padding: 3px 6px;
 	color: var(--se-main-font-color);
 	text-decoration: none;
 	border-radius: var(--se-border-radius);
@@ -3245,6 +3268,18 @@
 	-moz-background-clip: padding;
 	-webkit-background-clip: padding-box;
 	background-clip: padding-box;
+	box-sizing: border-box;
+}
+.sun-editor .se-browser .se-browser-search-clear {
+	position: absolute;
+	right: 2px;
+	top: 50%;
+	transform: translateY(-50%);
+	padding: 0 2px;
+	opacity: 0.35;
+}
+.sun-editor .se-browser .se-browser-search-clear:hover {
+	opacity: 0.8;
 }
 
 .sun-editor .se-browser .se-browser-search button {
@@ -3396,6 +3431,12 @@
 	opacity: 0.6;
 	pointer-events: none;
 }
+.sun-editor .se-browser .se-file-name-image mark {
+	background-color: var(--se-active-color);
+	color: var(--se-active-font-color);
+	padding: 0 1px;
+	border-radius: 2px;
+}
 
 .sun-editor .se-browser .se-browser-list.se-preview-list .se-file-item-img > * {
 	display: flex;
@@ -4148,6 +4189,13 @@
 	margin: 2px 8px;
 	flex-direction: row-reverse;
 }
+.sun-editor.se-rtl .se-browser .se-browser-search-input-wrap input {
+	padding: 3px 6px 3px 24px;
+}
+.sun-editor.se-rtl .se-browser .se-browser-search-clear {
+	right: auto;
+	left: 2px;
+}
 .sun-editor.se-rtl .se-browser .se-browser-side .se-menu-icon {
 	margin: 0 0 0 10px;
 }
@@ -4329,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/_commandExecutor.js

@@ -59,12 +59,15 @@ export default class CommandExecutor {
 	 * @description Execute default command of command button
 	 */
 	async execute(command, button) {
-		if (this.#frameContext.get('isReadOnly') && !/copy|cut|selectAll|codeView|markdownView|fullScreen|print|preview|showBlocks|finder/.test(command)) return;
+		if (this.#frameContext.get('isReadOnly') && !/copy|cut|selectAll|selectAll_full|codeView|markdownView|fullScreen|print|preview|showBlocks|finder/.test(command)) return;
 
 		switch (command) {
 			case 'selectAll':
 				this.#SELECT_ALL();
 				break;
+			case 'selectAll_full':
+				this.#SELECT_ALL_FULL();
+				break;
 			case 'copy': {
 				const range = this.#$.selection.getRange();
 				if (range.collapsed) break;
@@ -254,6 +257,40 @@ export default class CommandExecutor {
 		this.#$.toolbar._showBalloon(this.#$.selection.setRange(first, 0, last, last.textContent.length));
 	}
 
+	/**
+	 * @description Selects all content in the entire editor without scope stepping.
+	 */
+	#SELECT_ALL_FULL() {
+		this.#$.ui.offCurrentController();
+		this.#$.menu.containerOff();
+
+		const ww = this.#frameContext.get('wysiwyg');
+		let { first, last } = __findFirstAndLast(ww);
+
+		if (!first || !last) return;
+
+		let info = null;
+		if (dom.check.isMedia(first) || (info = this.#$.component.get(first)) || dom.check.isTableElements(first)) {
+			info ||= this.#$.component.get(first);
+			const br = dom.utils.createElement('BR');
+			const format = dom.utils.createElement(this.#options.get('defaultLine'), null, br);
+			first = info ? info.container || info.cover : first;
+			first.parentElement.insertBefore(format, first);
+			first = br;
+		}
+
+		if (dom.check.isMedia(last) || (info = this.#$.component.get(last)) || dom.check.isTableElements(last)) {
+			info ||= this.#$.component.get(last);
+			const br = dom.utils.createElement('BR');
+			const format = dom.utils.createElement(this.#options.get('defaultLine'), null, br);
+			last = info ? info.container || info.cover : last;
+			last.parentElement.appendChild(format);
+			last = br;
+		}
+
+		this.#$.toolbar._showBalloon(this.#$.selection.setRange(first, 0, last, last.textContent.length));
+	}
+
 	/**
 	 * @description Saves the editor content.
 	 * @returns {Promise<void>}

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
@@ -1132,7 +1132,7 @@ function _defaultButtons(isRTL, icons, lang) {
 		finder: ['se-component-enabled', lang.find, 'finder', '', icons.finder],
 		save: ['se-component-enabled', lang.save, 'save', '', icons.save],
 		newDocument: ['se-component-enabled', lang.newDocument, 'newDocument', '', icons.new_document],
-		selectAll: ['se-component-enabled', lang.selectAll, 'selectAll', '', icons.select_all],
+		selectAll: ['se-component-enabled', lang.selectAll, 'selectAll_full', '', icons.select_all],
 		pageBreak: ['se-component-enabled', lang.pageBreak, 'pageBreak', '', icons.page_break],
 		// document type buttons
 		pageUp: ['se-component-enabled', lang.pageUp, 'pageUp', '', icons.page_up],

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,
 };