suneditor 3.0.0-beta.3 → 3.0.0-beta.30

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 pageBreaks = this._mirror.querySelectorAll('.se-page-break');
+			const heightGap = this.ww.scrollHeight > this._mirror.scrollHeight ? this.ww.scrollHeight - this._mirror.scrollHeight : 0;
+			const mirrorHeight = this._mirror.scrollHeight + heightGap;
+			const pageBreaks = this.ww.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();
@@ -165,28 +161,21 @@ DocumentType.prototype = {
 			const pages = [];
 
 			for (let i = 0; i < pageBreaks.length; i++) {
-				pages.push({ number: i, top: pageBreaks[i].offsetTop + pageBreakHeight - scrollTop });
+				pages.push({ number: i, top: pageBreaks[i].offsetTop + pageBreakHeight / 2 - 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.
@@ -441,7 +462,7 @@ DocumentType.prototype = {
 				const scrollTop = i === 0 && !this.isAutoHeight ? 0 : c.offsetTop - this.page.offsetTop - c.offsetHeight + globalTop;
 				this._applyPageScroll(scrollTop, () => {
 					if (this.editor.toolbar._sticky) {
-						this.displayPage.scrollTo({ top: scrollTop - this.context.get('toolbar.main').offsetHeight, behavior: 'smooth' });
+						this.displayPage.scrollTo({ top: scrollTop - this.context.get('toolbar_main').offsetHeight, behavior: 'smooth' });
 					}
 				});
 

package/src/core/util/instanceCheck.js

@@ -0,0 +1,59 @@
+/**
+ * @typedef {InstanceCheck} InstanceCheckThis
+ */
+
+/**
+ * @constructor
+ * @this {InstanceCheck}
+ * @description iframe-safe instanceof check utility class
+ * @param {__se__EditorCore} editor - The root editor instance
+ */
+function InstanceCheck(editor) {
+	this.editor = editor;
+}
+
+InstanceCheck.prototype = {
+	/**
+	 * @param {*} obj
+	 * @returns {obj is Node}
+	 */
+	isNode(obj) {
+		return obj instanceof this._getFrameWindow().Node;
+	},
+
+	/**
+	 * @param {*} obj
+	 * @returns {obj is Element}
+	 */
+	isElement(obj) {
+		return obj instanceof this._getFrameWindow().Element;
+	},
+
+	/**
+	 * @param {*} obj
+	 * @returns {obj is Range}
+	 */
+	isRange(obj) {
+		return obj instanceof this._getFrameWindow().Range;
+	},
+
+	/**
+	 * @param {*} obj
+	 * @returns {obj is Selection}
+	 */
+	isSelection(obj) {
+		return obj instanceof this._getFrameWindow().Selection;
+	},
+
+	/**
+	 * @private
+	 * @returns {window}
+	 */
+	_getFrameWindow() {
+		return this.editor.frameContext.get('_ww');
+	},
+
+	constructor: InstanceCheck
+};
+
+export default InstanceCheck;

package/src/editorInjector/_classes.js

@@ -17,6 +17,10 @@ function ClassInjector(editor) {
 	this.format = editor.format;
 	/** @description HTML class instance @type {__se__EditorCore['html']} */
 	this.html = editor.html;
+	/** @description Inline format class instance @type {__se__EditorCore['inline']} */
+	this.inline = editor.inline;
+	/** @description List format class instance @type {__se__EditorCore['listFormat']} */
+	this.listFormat = editor.listFormat;
 	/** @description Menu class instance @type {__se__EditorCore['menu']} */
 	this.menu = editor.menu;
 	/** @description NodeTransform class instance @type {__se__EditorCore['nodeTransform']} */

package/src/editorInjector/_core.js

@@ -15,6 +15,11 @@ export default function CoreInjector(editor) {
 	 * @type {__se__EditorCore['eventManager']}
 	 */
 	this.eventManager = editor.eventManager;
+	/**
+	 * @description The util/instanceCheck instance.
+	 * @type {__se__EditorCore['instanceCheck']}
+	 */
+	this.instanceCheck = editor.instanceCheck;
 	/**
 	 * @description The history manager instance.
 	 * @type {__se__EditorCore['history']}
@@ -48,12 +53,22 @@ export default function CoreInjector(editor) {
 	 */
 	this.status = editor.status;
 	/**
-	 * @description The editor's context map.
+	 * @description The editor's [frame] context utility object.
+	 * @type {__se__EditorCore['frameContext']}
+	 */
+	this.frameContext = editor.frameContext;
+	/**
+	 * @description The editor's [frame] options utility object.
+	 * @type {__se__EditorCore['frameOptions']}
+	 */
+	this.frameOptions = editor.frameOptions;
+	/**
+	 * @description The editor's context utility object.
 	 * @type {__se__EditorCore['context']}
 	 */
 	this.context = editor.context;
 	/**
-	 * @description The editor's options map.
+	 * @description The editor's options utility object.
 	 * @type {__se__EditorCore['options']}
 	 */
 	this.options = editor.options;
@@ -84,9 +99,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

@@ -11,6 +11,8 @@ function EditorInjector(editor) {
 	this.editor;
 	/** @type {import('./_core').default['eventManager']} */
 	this.eventManager;
+	/** @type {import('./_core').default['instanceCheck']} */
+	this.instanceCheck;
 	/** @type {import('./_core').default['history']} */
 	this.history;
 	/** @type {import('./_core').default['events']} */
@@ -23,6 +25,10 @@ function EditorInjector(editor) {
 	this.plugins;
 	/** @type {import('./_core').default['status']} */
 	this.status;
+	/** @type {import('./_core').default['frameContext']}  */
+	this.frameContext = editor.frameContext;
+	/**  @type {import('./_core').default['frameOptions']} */
+	this.frameOptions = editor.frameOptions;
 	/** @type {import('./_core').default['context']} */
 	this.context;
 	/** @type {import('./_core').default['options']} */
@@ -37,8 +43,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']} */
@@ -53,6 +57,10 @@ function EditorInjector(editor) {
 	this.format;
 	/** @type {import('./_classes').default['html']} */
 	this.html;
+	/** @type {import('./_classes').default['inline']} */
+	this.inline;
+	/** @type {import('./_classes').default['listFormat']} */
+	this.listFormat;
 	/** @type {import('./_classes').default['menu']} */
 	this.menu;
 	/** @type {import('./_classes').default['nodeTransform']} */

package/src/events.js

@@ -131,6 +131,12 @@ export default {
 	 */
 	onClick: null,
 
+	/**
+	 * @description Event call back function
+	 * @param {BaseEvent} params
+	 */
+	onBeforeInput: null,
+
 	/**
 	 * @description Event call back function
 	 * @param {BaseEvent} params

package/src/helper/clipboard.js

@@ -9,12 +9,12 @@ import { isElement } from './dom/domCheck';
  * - Iframe is replaced with a placeholder : <div data-se-iframe-holder-src="iframe.src">[iframe: iframe.src]</div>
  * - "iframe placeholder" is re-rendered in html.clean when pasted into the editor.
  * @param {Element|Text|string} content Content to be copied to the clipboard
- * @returns {Promise<void>}
+ * @returns {Promise<void|false>} If it fails, it returns false.
  */
 export async function write(content) {
 	if (!isClipboardSupported) {
 		console.error('Clipboard is not supported in this browser.');
-		return;
+		return false;
 	}
 
 	let htmlString = '';
@@ -44,14 +44,28 @@ export async function write(content) {
 		plainText = content.textContent;
 	}
 
-	/* eslint-disable-next-line compat/compat */
-	await navigator.clipboard.write([
-		/* eslint-disable-next-line compat/compat */
-		new ClipboardItem({
-			'text/html': new Blob([htmlString], { type: 'text/html' }),
-			'text/plain': new Blob([plainText], { type: 'text/plain' })
-		})
-	]);
+	try {
+		await navigator.clipboard.write([
+			/* eslint-disable-next-line compat/compat */
+			new ClipboardItem({
+				'text/html': new Blob([htmlString], { type: 'text/html' }),
+				'text/plain': new Blob([plainText], { type: 'text/plain' })
+			})
+		]);
+	} catch {
+		console.warn('[SUNEDITOR.copy.warn] This browser is not supported Clipboard API');
+		try {
+			await navigator.clipboard.writeText(plainText || stripHtml(htmlString));
+		} catch (err) {
+			console.error('[SUNEDITOR.copy.fail] ' + err);
+		}
+	}
+}
+
+function stripHtml(html) {
+	const div = document.createElement('div');
+	div.innerHTML = html;
+	return div.textContent || div.innerText || '';
 }
 
 export default {

package/src/helper/converter.js

@@ -1,15 +1,14 @@
 import { _d, _w } from './env';
 
-const URLPattern = /https?:\/\/[^\s]+/g;
 const FONT_VALUES_MAP = {
-	'xx-small': 1,
-	'x-small': 2,
-	small: 3,
-	medium: 4,
-	large: 5,
-	'x-large': 6,
-	'xx-large': 7,
-	'xxx-large': 8
+	'xx-small': 0.5625,
+	'x-small': 0.625,
+	small: 0.8333,
+	medium: 1,
+	large: 1.125,
+	'x-large': 1.5,
+	'xx-large': 2,
+	'xxx-large': 2.5
 };
 
 function NodeToJson(node) {
@@ -200,7 +199,7 @@ export function getValues(obj) {
 		? []
 		: Object.keys(obj).map(function (i) {
 				return obj[i];
-		  });
+			});
 }
 
 /**
@@ -350,7 +349,7 @@ export function rgb2hex(rgba) {
 
 		return `#${r}${g}${b}${a}`;
 	} else {
-		return '';
+		return rgba;
 	}
 }
 
@@ -377,6 +376,8 @@ export function getWidthInPercentage(target, parentTarget) {
  * @returns {boolean} Return true if the text node is converted to an anchor node
  */
 export function textToAnchor(node) {
+	const URLPattern = /https?:\/\/[^\s]+/g;
+
 	if (node.nodeType === 3 && URLPattern.test(node.textContent) && !/^A$/i.test(node.parentNode?.nodeName)) {
 		const textContent = node.textContent;
 		const fragment = _d.createDocumentFragment();
@@ -468,11 +469,15 @@ export function addUrlQuery(url, query) {
 	return url;
 }
 
+/**
+ * @typedef {import('../core/config/options').OptionStyleResult} OptionStyleResult_converter
+ */
+
 /**
  * @description Converts options-related styles and returns them for each frame.
  * @param {Map<string, *>} fo editor.frameOptions
  * @param {string} cssText Style string
- * @returns {{top: string, frame: string, editor: string}}
+ * @returns {OptionStyleResult_converter}
  * @private
  */
 export function _setDefaultOptionStyle(fo, cssText) {

package/src/helper/dom/domCheck.js

@@ -12,7 +12,16 @@ import domUtils from './domUtils';
  */
 export function isZeroWidth(text) {
 	if (text === null || text === undefined) return false;
-	if (typeof text !== 'string') text = text.textContent;
+	if (typeof text !== 'string') {
+		if (isElement(text)) {
+			const children = text.children;
+			for (let i = 0, len = children.length; i < len; i++) {
+				const child = children[i];
+				if (!isContentLess(child)) return false;
+			}
+		}
+		text = text.textContent;
+	}
 	return text === '' || onlyZeroWidthRegExp.test(text);
 }
 
@@ -24,7 +33,7 @@ export function isZeroWidth(text) {
  * @returns {boolean}
  */
 export function isEdgePoint(container, offset, dir) {
-	return (dir !== 'end' && offset === 0) || ((!dir || dir !== 'front') && !container.nodeValue && offset === 1) || ((!dir || dir === 'end') && container.nodeValue && offset >= container.nodeValue.length);
+	return (dir !== 'end' && offset === 0) || ((!dir || dir !== 'front') && !container.nodeValue && offset <= 1) || ((!dir || dir === 'end') && container.nodeValue && offset >= container.nodeValue.length);
 }
 
 /**
@@ -182,6 +191,15 @@ export function isEmptyLine(node) {
 	return !el.querySelector('IMG, IFRAME, AUDIO, VIDEO, CANVAS, TABLE') && (el.children.length <= 1 || isBreak(el.firstElementChild)) && isZeroWidth(el.textContent);
 }
 
+/**
+ * @description Checks if the given node is a container component (class "se-component-container").
+ * @param {Node} element
+ * @returns {boolean} True if the node is a container component, otherwise false.
+ */
+export function isComponentContainer(element) {
+	return domUtils.hasClass(element, 'se-component|se-flex-component');
+}
+
 /**
  * @description It is judged whether it is the edit region top div element or iframe's body tag.
  * @param {?Node} node The node to check
@@ -208,7 +226,7 @@ export function isNonEditable(node) {
 export function isSpanWithoutAttr(node) {
 	if (node?.nodeType !== 1) return false;
 	const el = /** @type {HTMLElement} */ (node);
-	return /^SPAN$/i.test(el.nodeName) && !el.className && !el.style.cssText;
+	return /^SPAN$/i.test(el.nodeName) && !el.className && el.style.length === 0;
 }
 
 /**
@@ -292,6 +310,7 @@ const check = {
 	isFigure,
 	isContentLess,
 	isEmptyLine,
+	isComponentContainer,
 	isWysiwygFrame,
 	isNonEditable,
 	isSpanWithoutAttr,