suneditor 3.0.0-beta.3 → 3.0.0-beta.5

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "suneditor",
-	"version": "3.0.0-beta.3",
+	"version": "3.0.0-beta.5",
 	"description": "Vanilla javascript based WYSIWYG web editor",
 	"author": "Yi JiHong",
 	"license": "MIT",

package/src/assets/suneditor.css

@@ -778,9 +778,7 @@
 	height: 100%;
 	top: 0;
 	left: 0;
-	background-color: rgba(0, 0, 0, 0.35);
-	opacity: 0.7;
-	filter: alpha(opacity=70);
+	background-color: transparent;
 	z-index: 2147483647;
 }
 
@@ -816,7 +814,7 @@
 	opacity: 0.95;
 	border-radius: var(--se-border-radius);
 	cursor: pointer;
-	z-index: 2147483647;
+	z-index: 2147483646;
 	transition: opacity 0.3s ease, color 0.3s ease, background-color 0.3s ease;
 }
 .sun-editor .se-line-breaker-component.se-on-selected {
@@ -873,7 +871,7 @@
 .sun-editor .se-toolbar.se-toolbar-balloon {
 	display: none;
 	position: absolute;
-	z-index: 2147483647;
+	z-index: 2147483646;
 	width: auto;
 	box-shadow: 0 3px 9px var(--se-shadow-layer-color);
 	-webkit-box-shadow: 0 3px 9px var(--se-shadow-layer-color);
@@ -1062,7 +1060,7 @@
 	left: 0px;
 	width: 100%;
 	height: 0px;
-	z-index: 2147483647;
+	z-index: 2147483646;
 }
 
 /** --- dropdown layer ---------------------------------------------------------- */
@@ -1738,7 +1736,7 @@
 	-khtml-user-select: none;
 	-webkit-user-select: none;
 	-ms-user-select: none;
-	z-index: 2147483647;
+	z-index: 2147483646;
 	background-color: transparent;
 }
 
@@ -1788,7 +1786,7 @@
 	left: 0;
 	width: 100%;
 	height: 100%;
-	z-index: 2147483647;
+	z-index: 2147483646;
 }
 .sun-editor .se-modal-area.se-backdrop-show {
 	display: block;
@@ -2779,7 +2777,7 @@
 	min-width: auto;
 	top: 0px;
 	left: 0px;
-	z-index: 2147483647;
+	z-index: 2147483646;
 	display: none;
 	width: -webkit-max-content;
 	width: -moz-max-content;
@@ -2871,7 +2869,7 @@
 	left: 0;
 	width: 100%;
 	height: 100%;
-	z-index: 2147483647;
+	z-index: 2147483646;
 }
 
 .sun-editor .se-browser label,
@@ -3318,7 +3316,7 @@
 	left: 0;
 	width: 100%;
 	height: 100%;
-	z-index: 2147483647;
+	z-index: 2147483646;
 	pointer-events: none;
 }
 
@@ -4036,7 +4034,7 @@
 	pointer-events: none;
 	width: 2px;
 	background-color: var(--se-active-dark5-color);
-	z-index: 2147483647;
+	z-index: 2147483646;
 }
 .sun-editor.sun-editor-carrier-wrapper .se-drag-cursor::before {
 	content: '';

package/src/core/class/offset.js

@@ -288,7 +288,7 @@ Offset.prototype = {
 			}
 		}
 
-		el = /** @type {HTMLElement} */ (this._shadowRoot?.host);
+		el = /** @type {HTMLElement} */ (this.editor._shadowRoot?.host);
 		if (el) ohOffsetEl = owOffsetEl = topArea;
 		while (el) {
 			t += el.scrollTop;

package/src/core/class/selection.js

@@ -37,15 +37,12 @@ Selection_.prototype = {
 	 * @returns {Selection}
 	 */
 	get() {
-		const wSelection = this.editor.frameContext.get('_ww').getSelection();
 		let selection = null;
 
-		if (this._shadowRoot) {
-			selection = wSelection.getComposedRanges?.();
-		}
-
-		if (!selection) {
-			selection = wSelection;
+		if (typeof this.editor._shadowRoot?.getSelection === 'function') {
+			selection = this.editor._shadowRoot.getSelection();
+		} else {
+			selection = this.editor.frameContext.get('_ww').getSelection();
 		}
 
 		if (!selection) return null;

package/src/core/class/viewer.js

@@ -188,7 +188,7 @@ Viewer.prototype = {
 			topArea.style.width = '100%';
 			topArea.style.maxWidth = '100%';
 			topArea.style.height = '100%';
-			topArea.style.zIndex = '2147483646';
+			topArea.style.zIndex = '2147483639';
 
 			if (fc.get('_stickyDummy').style.display !== 'none' && fc.get('_stickyDummy').style.display !== '') {
 				this.fullScreenSticky = true;

package/src/core/editor.js

@@ -311,7 +311,7 @@ function Editor(multiTargets, options) {
 
 	/**
 	 * @description Closest ShadowRoot to editor if found
-	 * @type {ShadowRoot}
+	 * @type {ShadowRoot & { getSelection?: () => Selection }} - Chromium-based browsers (Chrome, Edge, etc.) has a getSelection method on the ShadowRoot
 	 */
 	this._shadowRoot = null;
 

package/src/editorInjector/_core.js

@@ -84,9 +84,4 @@ export default function CoreInjector(editor) {
 	 * @type {Document}
 	 */
 	this._d = editor._d;
-	/**
-	 * @description The shadow root object (if any).
-	 * @type {__se__EditorCore['_shadowRoot']}
-	 */
-	this._shadowRoot = editor._shadowRoot;
 }

package/src/editorInjector/index.js

@@ -37,8 +37,6 @@ function EditorInjector(editor) {
 	this._w;
 	/** @type {import('./_core').default['_d']} */
 	this._d;
-	/** @type {import('./_core').default['_shadowRoot']} */
-	this._shadowRoot;
 
 	// ClassInjector props
 	/** @type {import('./_classes').default['toolbar']} */

package/src/modules/Controller.js

@@ -235,7 +235,7 @@ class Controller extends EditorInjector {
 		if ((await this.triggerEvent('onBeforeShowController', { caller: this.kind, frameContext: this.editor.frameContext, info })) === false) return;
 
 		form.style.display = 'block';
-		if (this._shadowRoot) {
+		if (this.editor._shadowRoot) {
 			this.__shadowRootEventForm = form;
 			this.__shadowRootEventListener = (e) => e.stopPropagation();
 			form.addEventListener('mousedown', this.__shadowRootEventListener);

package/types/core/editor.d.ts

@@ -266,9 +266,11 @@ declare class Editor {
 	_lineBreaker_b: HTMLElement;
 	/**
 	 * @description Closest ShadowRoot to editor if found
-	 * @type {ShadowRoot}
+	 * @type {ShadowRoot & { getSelection?: () => Selection }} - Chromium-based browsers (Chrome, Edge, etc.) has a getSelection method on the ShadowRoot
 	 */
-	_shadowRoot: ShadowRoot;
+	_shadowRoot: ShadowRoot & {
+		getSelection?: () => Selection;
+	};
 	/**
 	 * @description Plugin call event map
 	 * @type {Map<string, Array<((...args: *) => *) & { index: number }>>}

package/types/editorInjector/_core.d.ts

@@ -84,9 +84,4 @@ export default class CoreInjector {
 	 * @type {Document}
 	 */
 	_d: Document;
-	/**
-	 * @description The shadow root object (if any).
-	 * @type {__se__EditorCore['_shadowRoot']}
-	 */
-	_shadowRoot: __se__EditorCore['_shadowRoot'];
 }

package/types/editorInjector/index.d.ts

@@ -40,8 +40,6 @@ declare class EditorInjector {
 	_w: import('./_core').default['_w'];
 	/** @type {import('./_core').default['_d']} */
 	_d: import('./_core').default['_d'];
-	/** @type {import('./_core').default['_shadowRoot']} */
-	_shadowRoot: import('./_core').default['_shadowRoot'];
 	/** @type {import('./_classes').default['toolbar']} */
 	toolbar: import('./_classes').default['toolbar'];
 	/** @type {import('./_classes').default['subToolbar']} */