suneditor 3.0.0-beta.13 → 3.0.0-beta.15

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "suneditor",
-	"version": "3.0.0-beta.13",
+	"version": "3.0.0-beta.15",
 	"description": "Vanilla javascript based WYSIWYG web editor",
 	"author": "Yi JiHong",
 	"license": "MIT",
@@ -81,11 +81,11 @@
 	},
 	"browserslist": [
 		"chrome >= 80",
+		"firefox >= 90",
+		"safari >= 14.1",
 		"edge >= 80",
-		"firefox >= 74",
-		"safari >= 13.1",
-		"ios >= 13.4",
 		"opera >= 67",
+		"ios >= 14.5",
 		"android >= 80",
 		"samsung >= 13",
 		"not IE <= 11",
@@ -121,4 +121,4 @@
 		"web editor",
 		"browser editor"
 	]
-}
+}

package/src/assets/icons/defaultIcons.js

@@ -25,7 +25,7 @@ export default {
 	print: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18,3H6V7H18M19,12A1,1 0 0,1 18,11A1,1 0 0,1 19,10A1,1 0 0,1 20,11A1,1 0 0,1 19,12M16,19H8V14H16M19,8H5A3,3 0 0,0 2,11V17H6V21H18V17H22V11A3,3 0 0,0 19,8Z" /></svg>',
 	template:
 		'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13,7.5H18V9.5H13V7.5M13,14.5H18V16.5H13V14.5M19,3A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3H19M19,19V5H5V19H19M11,6V11H6V6H11M10,10V7H7V10H10M11,13V18H6V13H11M10,17V14H7V17H10Z" /></svg>',
-	layout: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 21H11V13H3M5 15H9V19H5M3 11H11V3H3M5 5H9V9H5M13 3V11H21V3M19 9H15V5H19M18 16H21V18H18V21H16V18H13V16H16V13H18Z" /></svg>',
+	layout: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21 13H3A1 1 0 0 0 2 14V20A1 1 0 0 0 3 21H21A1 1 0 0 0 22 20V14A1 1 0 0 0 21 13M20 19H4V15H20M21 3H3A1 1 0 0 0 2 4V10A1 1 0 0 0 3 11H21A1 1 0 0 0 22 10V4A1 1 0 0 0 21 3M20 9H4V5H20Z" /></svg>',
 	new_document: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z" /></svg>',
 	select_all:
 		'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9,9H15V15H9M7,17H17V7H7M15,5H17V3H15M15,21H17V19H15M19,17H21V15H19M19,9H21V7H19M19,21A2,2 0 0,0 21,19H19M19,13H21V11H19M11,21H13V19H11M9,3H7V5H9M3,17H5V15H3M5,21V19H3A2,2 0 0,0 5,21M19,3V5H21A2,2 0 0,0 19,3M13,3H11V5H13M3,9H5V7H3M7,21H9V19H7M3,13H5V11H3M3,5H5V3A2,2 0 0,0 3,5Z" /></svg>',
@@ -202,6 +202,9 @@ export default {
 	alert_outline:
 		'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11,15H13V17H11V15M11,7H13V13H11V7M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20Z" /></svg>',
 	// More icons
+	more_media:
+		'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 13V5C9 3.9 9.9 3 11 3H20C21.1 3 22 3.9 22 5V11H18.57L17.29 9.26C17.23 9.17 17.11 9.17 17.05 9.26L15.06 12C15 12.06 14.88 12.07 14.82 12L13.39 10.25C13.33 10.18 13.22 10.18 13.16 10.25L11.05 12.91C10.97 13 11.04 13.15 11.16 13.15H17.5V15H11C9.89 15 9 14.11 9 13M6 22V21H4V22H2V2H4V3H6V2H8.39C7.54 2.74 7 3.8 7 5V13C7 15.21 8.79 17 11 17H15.7C14.67 17.83 14 19.08 14 20.5C14 21.03 14.11 21.53 14.28 22H6M4 7H6V5H4V7M4 11H6V9H4V11M4 15H6V13H4V15M6 19V17H4V19H6M23 13V15H21V20.5C21 21.88 19.88 23 18.5 23S16 21.88 16 20.5 17.12 18 18.5 18C18.86 18 19.19 18.07 19.5 18.21V13H23Z" /></svg>',
+	more_view: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 21H11V13H3M5 15H9V19H5M3 11H11V3H3M5 5H9V9H5M13 3V11H21V3M19 9H15V5H19M18 16H21V18H18V21H16V18H13V16H16V13H18Z" /></svg>',
 	more_text:
 		'<svg class="se-ci" xmlns="http://www.w3.org/2000/svg" viewBox="10 10 180 180"><g><path d="M49.711,142.188h49.027c2.328,0.002,4.394,1.492,5.129,3.699l9.742,29.252c0.363,1.092,1.385,1.828,2.537,1.83l15.883,0.01c0.859,0,1.667-0.412,2.17-1.109s0.641-1.594,0.37-2.41l-16.625-50.045L86.503,28.953c-0.36-1.097-1.383-1.839-2.537-1.842H64.532c-1.153-0.001-2.178,0.736-2.542,1.831L13.847,173.457c-0.271,0.816-0.135,1.713,0.369,2.412c0.503,0.697,1.311,1.109,2.171,1.109h15.872c1.151,0,2.173-0.736,2.537-1.828l9.793-29.287C45.325,143.66,47.39,142.18,49.711,142.188L49.711,142.188z M53.493,119.098l15.607-46.9c0.744-2.196,2.806-3.674,5.125-3.674s4.381,1.478,5.125,3.674l15.607,46.904c0.537,1.621,0.263,3.402-0.736,4.789c-1.018,1.408-2.649,2.24-4.386,2.24H58.615c-1.736,0-3.368-0.832-4.386-2.24C53.23,122.504,52.956,120.721,53.493,119.098L53.493,119.098z M190.465,63.32c0-2.919-1.015-5.396-3.059-7.428c-2.029-2.031-4.496-3.047-7.383-3.047c-2.889,0-5.355,1.016-7.388,3.047c-2.029,2.032-3.056,4.498-3.056,7.386c0,2.889,1.026,5.354,3.056,7.385c2.032,2.032,4.499,3.059,7.388,3.059c2.887,0,5.354-1.026,7.383-3.059C189.45,68.633,190.465,66.178,190.465,63.32L190.465,63.32z M190.465,101.994c0-2.858-1.015-5.313-3.059-7.333c-2.029-2.042-4.496-3.047-7.383-3.047c-2.889,0-5.355,1.005-7.388,3.047c-2.029,2.021-3.056,4.486-3.056,7.376c0,2.887,1.026,5.352,3.056,7.395c2.032,2.021,4.499,3.047,7.388,3.047c2.887,0,5.354-1.025,7.383-3.047C189.45,107.389,190.465,104.914,190.465,101.994L190.465,101.994z M190.465,140.76c0-2.918-1.015-5.395-3.059-7.438c-2.029-2.041-4.496-3.047-7.383-3.047c-2.889,0-5.355,1.006-7.388,3.047c-2.029,2.043-3.056,4.52-3.056,7.438c0,2.922,1.026,5.398,3.056,7.439c2.032,2.021,4.499,3.047,7.388,3.047c2.887,0,5.354-1.025,7.383-3.047C189.45,146.158,190.465,143.682,190.465,140.76L190.465,140.76z"/></g></svg>',
 	more_paragraph:

package/src/assets/suneditor-contents.css

@@ -20,9 +20,7 @@
 	line-height: var(--se-edit-line-height);
 }
 
-.sun-editor-editable.se-type-document-editable {
-	padding: var(--se-edit-inner-padding-doc-type);
-}
+.sun-editor .se-wrapper .se-wrapper-inner.sun-editor-editable.se-type-document-editable,
 .sun-editor-editable.se-document-page-mirror-a4 {
 	width: 21cm;
 	padding: var(--se-edit-inner-padding-doc-type);

package/src/assets/suneditor.css

@@ -366,6 +366,7 @@
 	outline: 1px solid var(--se-active-dark5-color) !important;
 	box-shadow: 0 0 0 0.3rem var(--se-active-light5-color);
 	transition: box-shadow 0.1s ease-in-out;
+	z-index: 1;
 }
 
 /** --- primary button */
@@ -760,7 +761,7 @@
 	top: -12px;
 	content: ' ';
 	border-bottom-width: 0;
-	border-top-color: var(--se-main-background-color);
+	border-top-color: var(--se-controller-background-color);
 }
 
 /** --- container */
@@ -1652,6 +1653,9 @@
 .sun-editor .se-wrapper .se-code-wrapper {
 	width: 100%;
 }
+.sun-editor .se-wrapper .se-code-wrapper > div {
+	width: 100%;
+}
 .sun-editor .se-wrapper .se-code-wrapper .se-code-view-line {
 	background-color: var(--se-code-view-color);
 	color: var(--se-code-view-background-color);

package/src/core/base/eventManager.js

@@ -986,11 +986,11 @@ EventManager.prototype = {
 	 * @this {EventManagerThis}
 	 * @description Adjusts the position of the editor's toolbar, controllers, and other floating elements based on scroll position.
 	 * - Ensures UI elements maintain their intended relative positions when scrolling.
-	 * @param {Element} eventWysiwyg The wysiwyg event object containing scroll data
+	 * @param {*} eventWysiwyg The wysiwyg event object containing scroll data (Window or element)
 	 */
 	_moveContainer(eventWysiwyg) {
-		const y = eventWysiwyg.scrollTop || 0;
-		const x = eventWysiwyg.scrollLeft || 0;
+		const y = eventWysiwyg.scrollTop || eventWysiwyg.scrollY || 0;
+		const x = eventWysiwyg.scrollLeft || eventWysiwyg.scrollX || 0;
 
 		if (this.editor.isBalloon) {
 			this.context.get('toolbar.main').style.top = this.toolbar._balloonOffset.top - y + 'px';
@@ -1270,7 +1270,7 @@ EventManager.prototype = {
 /**
  * @this {EventManagerThis}
  * @param {__se__FrameContext} frameContext - frame context object
- * @param {Element} eventWysiwyg - wysiwyg event object
+ * @param {Element|Window} eventWysiwyg - wysiwyg event object
  * @param {Event} e - Event object
  */
 function OnScroll_wysiwyg(frameContext, eventWysiwyg, e) {

package/src/core/class/component.js

@@ -496,7 +496,7 @@ Component.prototype = {
 			componentTop = top;
 			w = target.offsetWidth / 2 / 2;
 
-			t_style.top = componentTop - scrollY - cH / 2 + 'px';
+			t_style.top = componentTop - cH / 2 + 'px';
 			t_style[dir[0]] = (isNonSelected ? sideOffset - cW / 2 : sideOffset + w) + 'px';
 			t_style[dir[1]] = '';
 
@@ -522,7 +522,7 @@ Component.prototype = {
 				w = target.offsetWidth / 2 / 2;
 			}
 
-			b_style.top = componentTop + target.offsetHeight - scrollY - cH / 2 + 'px';
+			b_style.top = componentTop + target.offsetHeight - cH / 2 + 'px';
 			b_style[dir[0]] = sideOffset + target.offsetWidth - (isNonSelected ? 0 : w) - (isNonSelected ? cW / 2 : cW) + 'px';
 			b_style[dir[1]] = '';
 

package/src/core/class/html.js

@@ -1091,6 +1091,7 @@ HTML.prototype = {
 	 * @param {number|Array<number>} [options.rootKey=null] Root index
 	 */
 	set(html, { rootKey } = {}) {
+		this.ui._offCurrentController();
 		this.selection.removeRange();
 		const convertValue = html === null || html === undefined ? '' : this.clean(html, { forceFormat: true, whitelist: null, blacklist: null });
 
@@ -1119,6 +1120,8 @@ HTML.prototype = {
 	 * @param {number|Array<number>} [options.rootKey=null] Root index
 	 */
 	add(html, { rootKey } = {}) {
+		this.ui._offCurrentController();
+
 		if (!rootKey) rootKey = [this.status.rootKey];
 		else if (!Array.isArray(rootKey)) rootKey = [rootKey];
 

package/src/core/class/offset.js

@@ -149,8 +149,8 @@ Offset.prototype = {
 			left: offsetLeft,
 			top: offsetTop,
 			right: offsetElement?.offsetWidth ? offsetElement.offsetWidth - (offsetLeft - l + targetWidth) + r : 0,
-			scrollX: eventWysiwyg.scrollX || eventWysiwyg.scrollLeft || 0,
-			scrollY: eventWysiwyg.scrollY || eventWysiwyg.scrollTop || 0
+			scrollX: eventWysiwyg.scrollLeft || eventWysiwyg.scrollX || 0,
+			scrollY: eventWysiwyg.scrollTop || eventWysiwyg.scrollY || 0
 		};
 	},
 
@@ -349,13 +349,13 @@ Offset.prototype = {
 	getWWScroll() {
 		const eventWysiwyg = this.editor.frameContext.get('wysiwyg');
 		const rects = this.selection.getRects(eventWysiwyg, 'start').rects;
-		const top = eventWysiwyg.scrollY || eventWysiwyg.scrollTop || 0;
-		const height = eventWysiwyg.scrollHeight || 0;
+		const top = eventWysiwyg.scrollTop || eventWysiwyg.scrollY || 0;
+		const height = eventWysiwyg.scrollHeight || eventWysiwyg.document?.documentElement.scrollHeight || 0;
 
 		return {
 			top,
-			left: eventWysiwyg.scrollX || eventWysiwyg.scrollLeft || 0,
-			width: eventWysiwyg.scrollWidth || 0,
+			left: eventWysiwyg.scrollLeft || eventWysiwyg.scrollX || 0,
+			width: eventWysiwyg.scrollWidth || eventWysiwyg.document?.documentElement.scrollWidth || 0,
 			height,
 			bottom: top + height,
 			rects
@@ -453,6 +453,7 @@ Offset.prototype = {
 	 * @param {{left:number, top:number}} [params.addOffset={left:0, top:0}] Additional offset
 	 * @param {"bottom"|"top"} [params.position="bottom"] Position ('bottom'|'top')
 	 * @param {*} params.inst Instance object of caller
+	 * @param {HTMLElement} [params.sibling] The sibling controller element
 	 * @returns {{position: "top" | "bottom"} | undefined} Success -> {position: current position}
 	 */
 	setAbsPosition(element, target, params) {
@@ -469,55 +470,76 @@ Offset.prototype = {
 			addOffset.left *= -1;
 		}
 
-		const isWWTarget = this.editor.frameContext.get('wrapper').contains(target) || params.isWWTarget;
-		const isCtrlTarget = getParentElement(target, '.se-controller');
+		const isIframe = this.editor.frameOptions.get('iframe');
+		const isWWTarget = this.editor.frameContext.get('wrapper').contains(target) || params.isWWTarget || (isIframe ? this.editor.frameContext.get('wysiwyg').contains(target) : false);
+
+		const isCtrlTarget = target.nodeType === 1;
 		const isTargetAbs = isWWTarget && !isCtrlTarget;
+		const isInlineTarget = isCtrlTarget && /inline/.test(_w.getComputedStyle(target).display);
 		const clientSize = getClientSize(_d);
 		const wwScroll = isTargetAbs ? this.getWWScroll() : this._getWindowScroll();
-		const targetRect = isCtrlTarget ? target.getBoundingClientRect() : this.selection.getRects(target, 'start').rects;
+		const targetRect = !isIframe && isCtrlTarget ? target.getBoundingClientRect() : this.selection.getRects(target, 'start').rects;
 		const targetOffset = this.getGlobal(target);
 		const arrow = /** @type {HTMLElement} */ (hasClass(element.firstElementChild, 'se-arrow') ? element.firstElementChild : null);
 
 		// top ----------------------------------------------------------------------------------------------------
+		const siblingH = params.sibling?.offsetHeight || 0;
 		const ah = arrow ? arrow.offsetHeight : 0;
 		const elH = element.offsetHeight;
 		const targetH = target.offsetHeight;
 		// margin
 		const tmtw = targetRect.top;
 		const tmbw = clientSize.h - targetRect.bottom;
-		const toolbarH = !this.editor.toolbar._sticky && (this.editor.isBalloon || this.editor.isInline) ? 0 : this.context.get('toolbar.main').offsetHeight;
+		const globalTop = this.getGlobal(this.editor.frameContext.get('topArea')).top;
+		const wScrollY = _w.scrollY;
+		const th = this.context.get('toolbar.main').offsetHeight;
+		const containerToolbar = this.options.get('toolbar_container');
+		const headLess = this.editor.isBalloon || this.editor.isInline || containerToolbar;
+		const toolbarH = (containerToolbar && globalTop - wScrollY - th > 0) || (!this.editor.toolbar._sticky && headLess) ? 0 : th;
 
 		// check margin
-		const { rmt, rmb, rt } = this._getVMargin(tmtw, tmbw, toolbarH, clientSize, targetRect, isTargetAbs, wwScroll);
-		if (isWWTarget && (rmb + targetH <= 0 || rmt + rt + targetH <= 0)) return;
+		const { rmt, rmb, bMargin, rt } = this._getVMargin(tmtw, tmbw, toolbarH, clientSize, targetRect, isTargetAbs, wwScroll);
+		if (isWWTarget && ((rmb > 0 ? bMargin : rmb) + targetH <= 0 || rmt + rt + targetH - (this.editor.toolbar._sticky && isInlineTarget ? toolbarH : 0) <= 0)) return;
 
+		const isSticky = this.editor.toolbar._sticky && this.context.get('toolbar.main').style.display !== 'none' && (!headLess || this.editor.frameContext.get('topArea').getBoundingClientRect().top <= th);
+		const statusBarH = this.editor.frameContext.get('statusbar')?.offsetHeight || 0;
 		let t = addOffset.top;
 		let y = 0;
 		let arrowDir = '';
+
+		// [bottom] position
 		if (position === 'bottom') {
+			let trmt = rmt - (isSticky && globalTop - wScrollY <= toolbarH ? toolbarH : 0);
+			if (isSticky && trmt + toolbarH < 0) trmt += toolbarH;
 			arrowDir = 'up';
-			t += targetRect.bottom + ah + _w.scrollY;
-			y = rmb - (elH + ah);
-			if (y < 0) {
+			t += targetRect.bottom + ah + wScrollY;
+			y = rmb - (elH + ah) - statusBarH;
+			// change to <top> position
+			if (y - siblingH < 0) {
 				arrowDir = 'down';
 				t -= targetH + elH + ah * 2;
-				y = toolbarH + rmt - (elH + ah);
-				if (y < 0) {
+				y = trmt - (elH + ah);
+				// sticky the <top> position
+				if (y - siblingH < 0) {
 					arrowDir = '';
-					t -= y;
+					t -= y - siblingH - Math.max(1, y + elH + ah) + (!isSticky && trmt < 0 ? toolbarH : 0) - (isSticky ? this.context.get('toolbar.main').offsetTop : 0);
 				}
 			}
-		} else {
+		}
+		// <top> position
+		else {
 			arrowDir = 'down';
-			t += targetRect.top - elH - ah + _w.scrollY;
-			y = rmt - (elH + ah);
-			if (y < 0) {
+			t += targetRect.top - elH - ah + wScrollY;
+			y = (isSticky ? targetRect.top - toolbarH : rmt) - elH - ah;
+			// change to [bottom] position
+			if (y - siblingH < 0) {
 				arrowDir = 'up';
 				t += targetH + elH + ah * 2;
-				y = rmb - (elH + ah);
-				if (y < 0) {
+				y = (rmb > 0 ? bMargin : rmb) - (elH + ah) - statusBarH;
+				// sticky the [bottom] position
+				if (y - siblingH < 0) {
 					arrowDir = '';
-					t += y;
+					t += y - 2;
 				}
 			}
 		}
@@ -734,24 +756,32 @@ Offset.prototype = {
 	 * @param {RectsInfo} targetRect Target rect object
 	 * @param {boolean} isTargetAbs Is target absolute position
 	 * @param {OffsetWWScrollInfo} wwScroll WYSIWYG scroll info
-	 * @returns {{rmt:number, rmb:number, rt:number}} Margin values (rmt: top margin, rmb: bottom margin, rt: Toolbar height offset adjustment)
+	 * @returns {{rmt:number, rmb:number, rt:number, tMargin:number, bMargin:number}} Margin values
+	 * - rmt: top margin to frame
+	 * - rmb: bottom margin to frame
+	 * - rt: Toolbar height offset adjustment
+	 * - tMargin: top margin
+	 * - bMargin: bottom margin
 	 */
 	_getVMargin(tmtw, tmbw, toolbarH, clientSize, targetRect, isTargetAbs, wwScroll) {
 		let rmt = 0;
 		let rmb = 0;
 		let rt = 0;
+		let tMargin = 0;
+		let bMargin = 0;
+
 		if (this.editor.frameContext.get('isFullScreen')) {
 			rmt = tmtw - toolbarH;
 			rmb = tmbw;
 		} else {
-			const isIframe = isTargetAbs && this.editor.frameOptions.get('iframe');
-			const tMargin = targetRect.top;
-			const bMargin = clientSize.h - targetRect.bottom;
+			const isIframeAbs = isTargetAbs && this.editor.frameOptions.get('iframe');
+			tMargin = targetRect.top;
+			bMargin = clientSize.h - targetRect.bottom;
 			const editorOffset = this.getGlobal();
 			const editorScroll = this.getGlobalScroll();
 			const statusBarH = this.editor.frameContext.get('statusbar')?.offsetHeight || 0;
 
-			if (isIframe) {
+			if (isIframeAbs) {
 				const emt = editorOffset.top - editorScroll.top - editorScroll.ts;
 				const editorH = this.editor.frameContext.get('topArea').offsetHeight;
 				rmt = targetRect.top - emt;
@@ -764,29 +794,28 @@ Offset.prototype = {
 				if (toolbarH > wst) {
 					if (this.editor.toolbar._sticky) {
 						st = toolbarH;
-						toolbarH = 0;
 					} else {
 						st = wst + toolbarH;
 					}
-				} else if (this.options.get('toolbar_container')) {
+				} else if (this.options.get('toolbar_container') && !this.editor.toolbar._sticky) {
 					toolbarH = 0;
 				} else {
-					st = wst + (this.editor.toolbar._sticky ? toolbarH : 0);
+					st = wst + toolbarH;
 				}
 
-				rmt = targetRect.top - st;
-				rmb = wwScroll.rects.bottom - targetRect.bottom - wsb - statusBarH;
+				rmt = targetRect.top - wwScroll.rects.top - st + toolbarH;
+				rmb = wwScroll.rects.bottom - targetRect.bottom - wsb;
+				// display margin
+				rmt = rmt > 0 ? rmt : rmt - toolbarH;
 			}
-
-			// display margin
-			rmt = (rmt > 0 ? tMargin : rmt) - toolbarH;
-			rmb = rmb > 0 ? bMargin : rmb;
 		}
 
 		return {
 			rmt,
 			rmb,
-			rt
+			rt,
+			tMargin,
+			bMargin
 		};
 	},
 

package/src/core/class/toolbar.js

@@ -362,7 +362,7 @@ Toolbar.prototype = {
 			let left = container.offsetLeft;
 			let top = container.offsetTop;
 
-			while (!container.parentElement.contains(editorParent) || !/^(BODY|HTML)$/i.test(container.parentElement.nodeName)) {
+			while (!container.parentElement.contains(editorParent) && !/^(BODY|HTML)$/i.test(container.parentElement.nodeName)) {
 				container = container.offsetParent;
 				left += container.offsetLeft;
 				top += container.offsetTop;

package/src/core/editor.js

@@ -1,5 +1,6 @@
 import { env, converter, dom, numbers } from '../helper';
-import Constructor, { InitOptions, UpdateButton, CreateShortcuts, CreateStatusbar, OPTION_FRAME_FIXED_FLAG, OPTION_FIXED_FLAG } from './section/constructor';
+import Constructor, { InitOptions, UpdateButton, CreateShortcuts, CreateStatusbar } from './section/constructor';
+import { OPTION_FRAME_FIXED_FLAG, OPTION_FIXED_FLAG } from './section/options';
 import { UpdateStatusbarContext } from './section/context';
 import { BASIC_COMMANDS, ACTIVE_EVENT_COMMANDS, SELECT_ALL, DIR_BTN_ACTIVE, SAVE, COPY_FORMAT, FONT_STYLE, PAGE_BREAK } from './section/actives';
 import History from './base/history';

package/src/core/section/constructor.js

@@ -14,119 +14,6 @@ const _d = env._d;
  * @typedef {import('./options').EditorInitOptions} EditorInitOptions
  */
 
-/** ------------- [OPTIONS FRAG] ------------- */
-/**
- * @description For all EditorInitOptions keys, only boolean | null values are allowed.
- * - 'fixed' → Immutable / null → Resettable.
- * @type {Partial<Record<keyof EditorInitOptions, "fixed" | true>>}
- */
-export const OPTION_FRAME_FIXED_FLAG = {
-	value: 'fixed',
-	placeholder: true,
-	editableFrameAttributes: true,
-	width: true,
-	minWidth: true,
-	maxWidth: true,
-	height: true,
-	minHeight: true,
-	maxHeight: true,
-	editorStyle: true,
-	iframe: 'fixed',
-	iframe_fullPage: 'fixed',
-	iframe_attributes: true,
-	iframe_cssFileName: true,
-	statusbar: true,
-	statusbar_showPathLabel: true,
-	statusbar_resizeEnable: 'fixed',
-	charCounter: true,
-	charCounter_max: true,
-	charCounter_label: true,
-	charCounter_type: true
-};
-/**
- * @description For all EditorInitOptions keys, only boolean | null values are allowed.
- * - 'fixed' → Immutable / null → Resettable.
- * @type {Partial<Record<keyof EditorInitOptions, "fixed" | true>>}
- */
-export const OPTION_FIXED_FLAG = {
-	plugins: 'fixed',
-	excludedPlugins: 'fixed',
-	buttonList: 'fixed',
-	v2Migration: 'fixed',
-	strictMode: 'fixed',
-	mode: 'fixed',
-	type: 'fixed',
-	theme: true,
-	lang: 'fixed',
-	fontSizeUnits: 'fixed',
-	allowedClassName: 'fixed',
-	closeModalOutsideClick: 'fixed',
-	copyFormatKeepOn: true,
-	syncTabIndent: true,
-	tabDisable: true,
-	autoLinkify: true,
-	autoStyleify: true,
-	scrollToOptions: true,
-	componentScrollToOptions: true,
-	retainStyleMode: true,
-	allowedExtraTags: 'fixed',
-	events: true,
-	__textStyleTags: 'fixed',
-	textStyleTags: 'fixed',
-	convertTextTags: 'fixed',
-	__tagStyles: 'fixed',
-	tagStyles: 'fixed',
-	spanStyles: 'fixed',
-	lineStyles: 'fixed',
-	textDirection: true,
-	reverseButtons: 'fixed',
-	historyStackDelayTime: true,
-	lineAttrReset: true,
-	printClass: true,
-	defaultLine: 'fixed',
-	defaultLineBreakFormat: true,
-	scopeSelectionTags: true,
-	__defaultElementWhitelist: 'fixed',
-	elementWhitelist: 'fixed',
-	elementBlacklist: 'fixed',
-	__defaultAttributeWhitelist: 'fixed',
-	attributeWhitelist: 'fixed',
-	attributeBlacklist: 'fixed',
-	__defaultFormatLine: 'fixed',
-	formatLine: 'fixed',
-	__defaultFormatBrLine: 'fixed',
-	formatBrLine: 'fixed',
-	__defaultFormatClosureBrLine: 'fixed',
-	formatClosureBrLine: 'fixed',
-	__defaultFormatBlock: 'fixed',
-	formatBlock: 'fixed',
-	__defaultFormatClosureBlock: 'fixed',
-	formatClosureBlock: 'fixed',
-	allowedEmptyTags: true,
-	toolbar_width: true,
-	toolbar_container: 'fixed',
-	toolbar_sticky: true,
-	toolbar_hide: true,
-	subToolbar: 'fixed',
-	statusbar_container: 'fixed',
-	shortcutsHint: true,
-	shortcutsDisable: 'fixed',
-	shortcuts: 'fixed',
-	fullScreenOffset: true,
-	previewTemplate: true,
-	printTemplate: true,
-	componentAutoSelect: true,
-	defaultUrlProtocol: true,
-	allUsedStyles: 'fixed',
-	toastMessageTime: true,
-	icons: 'fixed',
-	freeCodeViewMode: true,
-	__lineFormatFilter: true,
-	__pluginRetainFilter: true,
-	__listCommonStyle: 'fixed',
-	externalLibs: 'fixed'
-};
-
 /**
  * @description Creates a new SunEditor instance with specified options.
  * @param {Array<{target: Element, key: *, options: EditorFrameOptions}>} editorTargets - Target element or multi-root object.
@@ -555,7 +442,7 @@ export function InitOptions(options, editorTargets, plugins) {
 			return _default;
 		}, {})
 	);
-	o.set('_textStylesRegExp', new RegExp(`\\s*[^-a-zA-Z](${DEFAULTS.TEXT_STYLES}${options.spanStyles ? '|' + options.spanStyles : ''})\\s*:[^;]+(?!;)*`, 'gi'));
+	o.set('_textStylesRegExp', new RegExp(`\\s*[^-a-zA-Z](${DEFAULTS.SPAN_STYLES}${options.spanStyles ? '|' + options.spanStyles : ''})\\s*:[^;]+(?!;)*`, 'gi'));
 	o.set('_lineStylesRegExp', new RegExp(`\\s*[^-a-zA-Z](${DEFAULTS.LINE_STYLES}${options.lineStyles ? '|' + options.lineStyles : ''})\\s*:[^;]+(?!;)*`, 'gi'));
 	o.set('_defaultStyleTagMap', {
 		strong: textTags.bold,
@@ -788,7 +675,7 @@ export function InitOptions(options, editorTargets, plugins) {
 	const allUsedStyles = new Set(DEFAULTS.CONTENT_STYLES.split('|'));
 	const _ss = options.spanStyles?.split('|') || [];
 	const _ls = o.get('__listCommonStyle');
-	const _dts = DEFAULTS.TEXT_STYLES.split('|');
+	const _dts = DEFAULTS.SPAN_STYLES.split('|');
 	for (let i = 0, len = _dts.length; i < len; i++) {
 		allUsedStyles.add(_dts[i]);
 	}

package/src/core/section/documentType.js

@@ -130,9 +130,11 @@ DocumentType.prototype = {
 		this._rePageTimeout = _w.setTimeout(async () => {
 			await dom.utils.waitForMediaLoad(this._mirror, 1500);
 
-			const mirrorHeight = this._mirror.scrollHeight;
+			const heightGap = this.ww.scrollHeight > this._mirror.scrollHeight ? this.ww.scrollHeight - this._mirror.scrollHeight : 0;
+			const mirrorHeight = this._mirror.scrollHeight + heightGap;
 			const pageBreaks = this._mirror.querySelectorAll('.se-page-break');
 			if (!force && this.pageHeight === mirrorHeight && this.pageBreaksCnt === pageBreaks.length) return;
+
 			this.pageHeight = mirrorHeight;
 			this.pageBreaksCnt = pageBreaks.length;
 
@@ -145,18 +147,12 @@ DocumentType.prototype = {
 				for (let i = 0; i < pageBreaks.length; i++) {
 					const breakPosition = pageBreaks[i].offsetTop;
 					const sectionHeight = breakPosition - lastBreakPosition;
-
-					if (sectionHeight % A4_PAGE_HEIGHT !== 0) {
-						additionalPages++;
-					}
-
+					if (sectionHeight % A4_PAGE_HEIGHT !== 0) additionalPages++;
 					lastBreakPosition = breakPosition;
 				}
 
 				const lastSectionHeight = mirrorHeight - lastBreakPosition;
-				if (lastSectionHeight > 0 && lastSectionHeight % A4_PAGE_HEIGHT !== 0) {
-					additionalPages++;
-				}
+				if (lastSectionHeight > 0 && lastSectionHeight % A4_PAGE_HEIGHT !== 0) additionalPages++;
 			}
 
 			const scrollTop = this.isAutoHeight ? 0 : this._getWWScrollTop();
@@ -168,25 +164,18 @@ DocumentType.prototype = {
 				pages.push({ number: i, top: pageBreaks[i].offsetTop + pageBreakHeight - scrollTop });
 			}
 
-			// A4 position
 			this._mirrorCache = 0;
 			const chr = this.ww.children;
 			const mChr = this._mirror.children;
 			this._initializeCache(mChr);
+
 			pages.push({ number: 0, top: 0 });
+
 			for (let i = 1, t = 0; i < totalPages; i++) {
 				t += A4_PAGE_HEIGHT + (i === 1 ? this._paddingTop + this._paddingBottom : this._paddingTop);
-				if (!pages.some((p) => Math.abs(p.top - t) < 1)) {
-					const { ci, cm, ch } = this._getElementAtPosition(t, mChr);
-					const el = chr[ci];
-					if (!el) break;
-
-					if (chr[this._mirrorCache]) {
-						t += numbers.get(_w.getComputedStyle(chr[this._mirrorCache]).marginBottom);
-					}
-
-					const elBottom = el.offsetTop + el.offsetHeight;
-					const top = elBottom + cm + (el.offsetHeight - ch);
+				if (!pages.some((p) => Math.abs(p.top - t) < 3)) {
+					const top = this._calcPageBreakTop(t, chr, mChr);
+					if (top === null) break;
 					pages.push({ number: i, top });
 				}
 			}
@@ -202,11 +191,21 @@ DocumentType.prototype = {
 			pages.sort((a, b) => a.top - b.top);
 			this.page.innerHTML = '';
 			this.pages = [];
+
 			for (let i = 0, t; i < totalPages; i++) {
 				if (!pages[i]) continue;
 				t = pages[i].top;
 				if (mirrorHeight < t) break;
-				const pageNumber = dom.utils.createElement('DIV', { style: `top:${t - scrollTop}px`, innerHTML: String(i + 1) }, `<div class="se-document-page-line" style="width: ${wwWidth}px;"></div>${i + 1}`);
+
+				const pageNumber = dom.utils.createElement(
+					'DIV',
+					{
+						style: `top:${t - scrollTop}px`,
+						innerHTML: String(i + 1)
+					},
+					`<div class="se-document-page-line" style="width: ${wwWidth}px;"></div>${i + 1}`
+				);
+
 				this.page.appendChild(pageNumber);
 				this.pages.push(pageNumber);
 			}
@@ -217,6 +216,28 @@ DocumentType.prototype = {
 		}, 400);
 	},
 
+	/**
+	 * @private
+	 * @description Calculates and compensates for the vertical gap between the rendered content (current page)
+	 * - and the mirrored preview page due to differences in width and layout.
+	 * @param {number} t - The initial top position value to be adjusted.
+	 * @param {HTMLElement[]} chr - The elements array in the current (main) page.
+	 * @param {HTMLElement[]} mChr - The elements array in the mirrored page.
+	 * @returns {number|null} - The adjusted top value.
+	 */
+	_calcPageBreakTop(t, chr, mChr) {
+		const { ci } = this._getElementAtPosition(t, mChr);
+		const mel = mChr[ci];
+		const el = chr[ci];
+		if (!mel || !el) return null;
+
+		const offsetDiff = el.offsetTop - mel.offsetTop;
+		const heightDiff = el.offsetHeight - mel.offsetHeight;
+
+		const top = t + offsetDiff + heightDiff / 2;
+		return Math.round(top);
+	},
+
 	/**
 	 * @private
 	 * @description Initializes the cache for document elements.
@@ -242,7 +263,7 @@ DocumentType.prototype = {
 	 * @private
 	 * @description Retrieves the element at a given position.
 	 * @param {number} pageTop - The vertical position to check.
-	 * @param {NodeList} mChr - List of mirrored elements.
+	 * @param {HTMLElement[]} mChr - List of mirrored elements.
 	 * @returns {{ci: number, cm: number, ch: number}} The closest element and its related data.
 	 * - ci: The index of the closest element.
 	 * - cm: The distance between the top of the closest element and the given position.