suneditor 3.3.0 → 3.3.2

package/src/core/config/eventManager.js

@@ -20,6 +20,9 @@ class EventManager {
 	/** @type {Array<*>} */
 	#events = [];
 
+	/** @type {?Array<SunEditor.Event.GlobalInfo>} */
+	#globalEvents = [];
+
 	/**
 	 * @constructor
 	 * @param {import('./contextProvider').default} contextProvider
@@ -165,11 +168,16 @@ class EventManager {
 			this.#frameContext.get('_ww').addEventListener(type, listener, useCapture);
 		}
 		_w.addEventListener(type, listener, useCapture);
-		return {
+
+		const info = {
 			type,
 			listener,
 			useCapture,
 		};
+
+		this.#globalEvents?.push(info);
+
+		return info;
 	}
 
 	/**
@@ -193,6 +201,12 @@ class EventManager {
 		}
 		_w.removeEventListener(type, listener, useCapture);
 
+		const i =
+			this.#globalEvents?.findIndex(
+				(e) => e.type === type && e.listener === listener && e.useCapture === useCapture,
+			) ?? -1;
+		if (i > -1) this.#globalEvents.splice(i, 1);
+
 		return null;
 	}
 
@@ -218,6 +232,15 @@ class EventManager {
 		this.#events = null;
 
 		this.#geckoActiveEvent &&= this.removeGlobalEvent(this.#geckoActiveEvent);
+
+		const frameWindow = this.#frameOptions.get('iframe') ? this.#frameContext.get('_ww') : null;
+		for (let i = 0, len = this.#globalEvents.length, e; i < len; i++) {
+			e = this.#globalEvents[i];
+			frameWindow?.removeEventListener(e.type, e.listener, e.useCapture);
+			_w.removeEventListener(e.type, e.listener, e.useCapture);
+		}
+
+		this.#globalEvents = null;
 	}
 }
 

package/src/core/editor.js

@@ -232,7 +232,12 @@ class Editor {
 			}
 			if (e.get('documentType').usePage) {
 				e.set('documentType_use_page', true);
-				e.get('documentTypePageMirror').innerHTML = e.get('wysiwyg').innerHTML;
+				const mirror = e.get('documentTypePageMirror');
+				const frag = mirror.ownerDocument.createDocumentFragment();
+				for (let n = e.get('wysiwyg').firstChild; n; n = n.nextSibling) {
+					frag.appendChild(n.cloneNode(true));
+				}
+				mirror.replaceChildren(frag);
 			}
 		}
 	}

package/src/core/event/effects/keydown.registry.js

@@ -1,4 +1,5 @@
 import { dom, unicode } from '../../../helper';
+import { getNestedListTarget } from './ruleHelpers';
 
 /**
  * @typedef {Object} EffectContext_keydown
@@ -79,12 +80,16 @@ export default {
 	/** @action backspaceComponentSelect */
 	'backspace.component.select': ({ ports }, { selectionNode, range, fileComponentInfo }) => {
 		let currentZWS = null;
-		if (dom.check.isBreak(selectionNode)) dom.utils.removeItem(selectionNode);
-		else if (dom.check.isBreak((currentZWS = range.startContainer.childNodes?.[range.startOffset])))
+
+		if (dom.check.isBreak(selectionNode)) {
+			dom.utils.removeItem(selectionNode);
+		} else if (dom.check.isBreak((currentZWS = range.startContainer.childNodes?.[range.startOffset]))) {
 			dom.utils.removeItem(currentZWS);
+		}
 
-		if (ports.component.select(fileComponentInfo.target, fileComponentInfo.pluginName) === false)
+		if (ports.component.select(fileComponentInfo.target, fileComponentInfo.pluginName) === false) {
 			ports.focusManager.blur();
+		}
 	},
 
 	/** @action backspaceComponentRemove */
@@ -103,6 +108,9 @@ export default {
 			rangeEl.parentNode.insertBefore(con, rangeEl.parentNode.firstChild);
 		}
 		const offset = con.nodeType === 3 ? con.textContent.length : 1;
+
+		stripTrailingBreaks(formatEl);
+
 		const children = formatEl.childNodes;
 		let after = con;
 		let child = children[0];
@@ -213,12 +221,9 @@ export default {
 	'delete.list.removeNested': ({ ports, ctx }, { range, formatEl, rangeEl }) => {
 		if (range.startContainer !== range.endContainer) ports.html.remove();
 
-		const next = /** @type {HTMLElement} */ (
-			dom.utils.arrayFind(formatEl.children, dom.check.isList) ||
-				formatEl.nextElementSibling ||
-				rangeEl.parentElement.nextElementSibling
-		);
-		if (next && (dom.check.isList(next) || dom.utils.arrayFind(next.children, dom.check.isList))) {
+		// Same decision the rule gated on — asked once, here and there, so the two can't drift apart.
+		const next = getNestedListTarget(formatEl, rangeEl);
+		if (next) {
 			ctx.e.preventDefault();
 
 			let con, children;

package/src/core/event/effects/ruleHelpers.js

@@ -188,4 +188,122 @@ function isRtlBidiMismatch(range, formatEl, detectedEdge, doc) {
 	return detectedEdge === 'front' ? caretRect.left <= contentRect.left + 2 : caretRect.left >= contentRect.right - 2;
 }
 
-export { hardDelete, cleanRemovedTags, isUneditableNode, setDefaultLine, isRtlBidiMismatch };
+/**
+ * @description Whether the caret sits on a bare `<br>` that stands at the front/end edge of its `line`.
+ * @param {Range} range - The current range
+ * @param {Node} selectionNode - Current selection node
+ * @param {'front'|'end'} edge - Edge to test: `front` for Backspace, `end` for Delete
+ * @returns {boolean} `true` if the caret is on an edge `<br>`
+ */
+function isEdgeBreakCaret(range, selectionNode, edge) {
+	if (!range.collapsed || !dom.check.isBreak(selectionNode)) return false;
+
+	const key = edge === 'front' ? 'previousSibling' : 'nextSibling';
+	let sibling = selectionNode[key];
+	while (sibling?.nodeType === 3 && dom.check.isZeroWidth(sibling)) {
+		sibling = sibling[key];
+	}
+
+	return !sibling || dom.check.isList(sibling);
+}
+
+/**
+ * @description The previous/next element in document order — crossing in and out of blocks (list, quote).
+ * - Out of list-cell ancestors (a nested list), stopping at a closure block (table cell).
+ * @param {EventPorts['format']} format - Format module
+ * @param {?HTMLElement} line - The caret's `line` element
+ * @param {'front'|'end'} edge - `front` for the previous element, `end` for the next one
+ * @returns {?HTMLElement} The adjacent element, or `null` at the document edge
+ */
+function getAdjacentElement(format, line, edge) {
+	const siblingKey = edge === 'front' ? 'previousElementSibling' : 'nextElementSibling';
+	const childKey = edge === 'front' ? 'lastElementChild' : 'firstElementChild';
+
+	let node = line;
+	let adjacent = null;
+	while (node && !(adjacent = node[siblingKey])) {
+		const parent = node.parentElement;
+		if (!parent || format.isClosureBlock(parent) || dom.check.isWysiwygFrame(parent)) return null;
+
+		if (format.isBlock(parent)) {
+			node = parent;
+		} else if (dom.check.isListCell(parent)) {
+			if (edge === 'front') return /** @type {HTMLElement} */ (parent);
+			node = parent;
+		} else {
+			return null; // the editable root
+		}
+	}
+
+	// step into blocks down to the nearest line
+	while (adjacent && format.isBlock(adjacent) && !format.isClosureBlock(adjacent)) {
+		adjacent = adjacent[childKey];
+	}
+
+	return /** @type {?HTMLElement} */ (adjacent);
+}
+
+/**
+ * @description The previous/next `line` in document order — {@link getAdjacentElement} filtered to lines.
+ * - `null` means either the document edge or a non-`line` neighbour (a component); use
+ * {@link getAdjacentElement} when the two must be told apart.
+ * @param {EventPorts['format']} format - Format module
+ * @param {?HTMLElement} line - The caret's `line` element
+ * @param {'front'|'end'} edge - `front` for the previous line, `end` for the next one
+ * @returns {?HTMLElement} The adjacent line, or `null`
+ */
+function getAdjacentLine(format, line, edge) {
+	const adjacent = getAdjacentElement(format, line, edge);
+	return format.isLine(adjacent) ? /** @type {HTMLElement} */ (adjacent) : null;
+}
+
+/**
+ * @description The neighbouring `line` an empty line collapses into, or `null` when there is nothing to merge.
+ * - A cell owning a nested list belongs to {@link getNestedListTarget} instead.
+ * @param {EventPorts['format']} format - Format module
+ * @param {?HTMLElement} formatEl - The caret's `line` element
+ * @param {'front'|'end'} edge - `front` for Backspace (previous line), `end` for Delete (next line)
+ * @returns {?HTMLElement} The neighbouring line to merge into, or `null`
+ */
+function getEmptyLineMergeTarget(format, formatEl, edge) {
+	if (!formatEl || !format.isNormalLine(formatEl) || !dom.check.isEmptyLine(formatEl)) return null;
+	if (dom.utils.arrayFind(formatEl.children, dom.check.isList)) return null;
+
+	const neighbor = /** @type {HTMLElement} */ (
+		edge === 'front' ? formatEl.previousElementSibling : formatEl.nextElementSibling
+	);
+
+	return format.isNormalLine(neighbor) || format.isBrLine(neighbor) ? neighbor : null;
+}
+
+/**
+ * @description The nested list a list-cell Backspace/Delete would lift, or `null` when there is none.
+ * - The rules gate their list branch on it so the branch can't claim the key with nothing to do.
+ * @param {HTMLElement} formatEl - The caret's list cell
+ * @param {HTMLElement} rangeEl - The list (`UL`/`OL`) the cell belongs to
+ * @returns {?HTMLElement} The element carrying the nested list, or `null`
+ */
+function getNestedListTarget(formatEl, rangeEl) {
+	const next = /** @type {HTMLElement} */ (
+		dom.utils.arrayFind(formatEl.children, dom.check.isList) ||
+			formatEl.nextElementSibling ||
+			rangeEl?.parentElement?.nextElementSibling
+	);
+
+	if (!next) return null;
+
+	return dom.check.isList(next) || dom.utils.arrayFind(next.children, dom.check.isList) ? next : null;
+}
+
+export {
+	hardDelete,
+	cleanRemovedTags,
+	isUneditableNode,
+	setDefaultLine,
+	isRtlBidiMismatch,
+	isEdgeBreakCaret,
+	getAdjacentElement,
+	getAdjacentLine,
+	getEmptyLineMergeTarget,
+	getNestedListTarget,
+};

package/src/core/event/eventOrchestrator.js

@@ -1,5 +1,5 @@
 import KernelInjector from '../kernel/kernelInjector';
-import { dom, unicode, numbers, env, converter, msOffice } from '../../helper';
+import { dom, unicode, numbers, env, converter, msOffice, googleDocs } from '../../helper';
 import { _DragHandle } from '../../modules/ui';
 
 // event handlers
@@ -234,9 +234,14 @@ class EventOrchestrator extends KernelInjector {
 			r.startContainer.nodeType === 3 &&
 			dom.check.isZeroWidth(r.startContainer)
 		) {
-			const br = r.startContainer.nextSibling;
-			if (br && dom.check.isBreak(br)) this.$.selection.setRange(br, 0, br, 0);
-			else this.$.selection.setRange(r.endContainer, r.endOffset, r.endContainer, r.endOffset);
+			const zeroWidth = r.startContainer;
+			const br = zeroWidth.nextSibling;
+			if (br && dom.check.isBreak(br)) {
+				dom.utils.removeItem(zeroWidth);
+				this.$.selection.setRange(br, 0, br, 0);
+			} else {
+				this.$.selection.setRange(r.endContainer, r.endOffset, r.endContainer, r.endOffset);
+			}
 		}
 
 		return this.$.selection.getNode();
@@ -269,7 +274,7 @@ class EventOrchestrator extends KernelInjector {
 	/**
 	 * @internal
 	 * @description Processes clipboard data for `paste` and `drop` events, handling text and HTML cleanup.
-	 * - Supports specific handling for content from Microsoft Office applications.
+	 * - Supports specific handling for content from Microsoft Office applications and Google Docs.
 	 * @param {"paste"|"drop"} type The type of event
 	 * @param {Event} e The original event object
 	 * @param {DataTransfer} clipboardData The clipboard data object
@@ -292,8 +297,10 @@ class EventOrchestrator extends KernelInjector {
 			/content=["']*Word.Document/i.test(cleanData) ||
 			/content=["']*OneNote.File/i.test(cleanData) ||
 			/content=["']*Excel.Sheet/i.test(cleanData);
+		// Google Docs
+		const GDData = !SEData && !MSData && googleDocs.isGoogleDocs(cleanData);
 		// from
-		const from = SEData ? 'SE' : MSData ? 'MS' : '';
+		const from = SEData ? 'SE' : MSData ? 'MS' : GDData ? 'GOOGLE' : '';
 
 		if (onlyText) {
 			cleanData = converter.htmlToEntity(plainText).replace(/\n/g, '<br>');
@@ -306,6 +313,8 @@ class EventOrchestrator extends KernelInjector {
 				cleanData = cleanData.replace(/\n/g, ' ');
 				plainText = plainText.replace(/\n/g, ' ');
 				cleanData = msOffice.cleanHTML(cleanData);
+			} else if (GDData) {
+				cleanData = googleDocs.cleanHTML(cleanData);
 			}
 		}
 

package/src/core/event/rules/keydown.rule.backspace.js

@@ -5,6 +5,9 @@ import {
 	isUneditableNode,
 	setDefaultLine,
 	isRtlBidiMismatch,
+	isEdgeBreakCaret,
+	getEmptyLineMergeTarget,
+	getAdjacentLine,
 } from '../effects/ruleHelpers';
 import { A } from '../actions';
 
@@ -79,8 +82,8 @@ export function reduceBackspaceDown(actions, ports, ctx) {
 		!dom.check.isListCell(formatEl) &&
 		format.isEdgeLine(range.startContainer, range.startOffset, 'front')
 	) {
-		const prevLine = findPrevMergeLine(format, formatEl);
-		if (prevLine) {
+		const prevLine = getAdjacentLine(format, formatEl, 'front');
+		if (prevLine && prevLine.parentElement !== formatEl.parentElement && format.isNormalLine(prevLine)) {
 			actions.push(A.preventStop());
 			actions.push(A.mergeLineInto(prevLine, formatEl));
 			actions.push(A.historyPush(true));
@@ -152,6 +155,7 @@ export function reduceBackspaceDown(actions, ports, ctx) {
 					: dom.check.isEdgePoint(range.startContainer, range.startOffset)
 						? dom.query.getPreviousDeepestNode(range.startContainer)
 						: null;
+
 		if (component.is(sel)) {
 			const fileComponentInfo = component.get(sel);
 			if (fileComponentInfo) {
@@ -185,6 +189,7 @@ export function reduceBackspaceDown(actions, ports, ctx) {
 			dom.check.isList(rangeEl) &&
 			(dom.check.isListCell(rangeEl.parentElement) || formatEl.previousElementSibling) &&
 			(selectionNode === formatEl ||
+				isEdgeBreakCaret(range, selectionNode, 'front') ||
 				(selectionNode.nodeType === 3 &&
 					(!selectionNode.previousSibling || dom.check.isList(selectionNode.previousSibling)))) &&
 			(format.getLine(range.startContainer, null) !== format.getLine(range.endContainer, null)
@@ -344,16 +349,9 @@ export function reduceBackspaceDown(actions, ports, ctx) {
 		return false;
 	}
 
-	// empty line: merge into the previous line
-	const emptyLinePrev = formatEl?.previousElementSibling;
-	if (
-		!selectRange &&
-		formatEl &&
-		format.isNormalLine(formatEl) &&
-		!dom.check.isListCell(formatEl) &&
-		dom.check.isEmptyLine(formatEl) &&
-		(format.isNormalLine(emptyLinePrev) || format.isBrLine(emptyLinePrev))
-	) {
+	// empty line: merge into the previous line — plain lines and list cells alike
+	const emptyLinePrev = getEmptyLineMergeTarget(format, formatEl, 'front');
+	if (!selectRange && emptyLinePrev) {
 		actions.push(A.preventStop());
 		actions.push(A.backspaceEmptyLineMergePrev(formatEl, emptyLinePrev));
 		actions.push(A.historyPush(true));
@@ -364,38 +362,3 @@ export function reduceBackspaceDown(actions, ports, ctx) {
 	actions.push(A.caretScrollTo(range));
 	return true;
 }
-
-/**
- * @description Mirror of the Delete rule's `findNextMergeLine`: finds the previous line to merge INTO when
- * Backspace is pressed at the start of `formatEl` and the previous line in document order lies across a block
- * boundary. Returns `null` for a plain line→line neighbour (left to native) or when nothing is safely mergeable
- * (list cell, closure, brLine, start of document).
- * @param {EventPorts['format']} format
- * @param {HTMLElement} formatEl
- * @returns {?HTMLElement}
- */
-function findPrevMergeLine(format, formatEl) {
-	let prev = formatEl.previousElementSibling;
-	if (!prev) {
-		// `formatEl` is the first line of its block — look at what precedes the block.
-		const block = formatEl.parentElement;
-		if (!format.isBlock(block) || format.isClosureBlock(block)) return null;
-		prev = block.previousElementSibling;
-		if (!prev) return null;
-	} else if (!format.isBlock(prev)) {
-		return null; // plain line→line — let the browser merge it natively
-	}
-
-	// Descend into blocks to the LAST line; only merge into a simple, non-list, non-closure, non-brLine line.
-	let line = prev;
-	while (line && format.isBlock(line) && !format.isClosureBlock(line)) line = line.lastElementChild;
-	if (
-		!format.isNormalLine(line) ||
-		dom.check.isListCell(line) ||
-		format.isBrLine(line) ||
-		format.isClosureBrLine(line)
-	) {
-		return null;
-	}
-	return /** @type {HTMLElement} */ (line);
-}

package/src/core/event/rules/keydown.rule.delete.js

@@ -1,5 +1,13 @@
 import { dom } from '../../../helper';
-import { hardDelete, isUneditableNode, isRtlBidiMismatch } from '../effects/ruleHelpers';
+import {
+	hardDelete,
+	isUneditableNode,
+	isRtlBidiMismatch,
+	isEdgeBreakCaret,
+	getEmptyLineMergeTarget,
+	getNestedListTarget,
+	getAdjacentElement,
+} from '../effects/ruleHelpers';
 import { A } from '../actions';
 
 /**
@@ -37,31 +45,24 @@ export function reduceDeleteDown(actions, ports, ctx) {
 		return true;
 	}
 
-	if (
-		!selectRange &&
-		!bidiNotEnd &&
-		formatEl &&
-		format.isNormalLine(formatEl) &&
-		!dom.check.isListCell(formatEl) &&
-		format.isEdgeLine(range.endContainer, range.endOffset, 'end')
-	) {
-		const targetLine = findNextMergeLine(format, formatEl);
-		if (targetLine) {
+	if (!selectRange && !bidiNotEnd && formatEl && format.isEdgeLine(range.endContainer, range.endOffset, 'end')) {
+		const adjacent = getAdjacentElement(format, formatEl, 'end');
+		if (!adjacent) {
 			actions.push(A.preventStop());
-			actions.push(A.mergeLineInto(formatEl, targetLine));
-			actions.push(A.historyPush(true));
 			return false;
 		}
-	}
 
-	if (
-		!selectRange &&
-		!bidiNotEnd &&
-		format.isEdgeLine(range.endContainer, range.endOffset, 'end') &&
-		!formatEl.nextSibling
-	) {
-		actions.push(A.preventStop());
-		return false;
+		if (
+			format.isLine(adjacent) &&
+			adjacent.parentElement !== formatEl.parentElement &&
+			format.isNormalLine(formatEl) &&
+			format.isNormalLine(adjacent)
+		) {
+			actions.push(A.preventStop());
+			actions.push(A.mergeLineInto(formatEl, adjacent));
+			actions.push(A.historyPush(true));
+			return false;
+		}
 	}
 
 	// line delete
@@ -158,7 +159,9 @@ export function reduceDeleteDown(actions, ports, ctx) {
 	if (
 		dom.check.isListCell(formatEl) &&
 		dom.check.isList(rangeEl) &&
+		(range.startContainer !== range.endContainer || getNestedListTarget(formatEl, rangeEl)) &&
 		(selectionNode === formatEl ||
+			isEdgeBreakCaret(range, selectionNode, 'end') ||
 			(selectionNode.nodeType === 3 &&
 				(!selectionNode.nextSibling || dom.check.isList(selectionNode.nextSibling)) &&
 				(format.getLine(range.startContainer, null) !== format.getLine(range.endContainer, null)
@@ -215,16 +218,9 @@ export function reduceDeleteDown(actions, ports, ctx) {
 		}
 	}
 
-	// empty line
-	const emptyLineNext = formatEl?.nextElementSibling;
-	if (
-		!selectRange &&
-		formatEl &&
-		format.isNormalLine(formatEl) &&
-		!dom.check.isListCell(formatEl) &&
-		dom.check.isEmptyLine(formatEl) &&
-		(format.isNormalLine(emptyLineNext) || format.isBrLine(emptyLineNext))
-	) {
+	// empty line — plain lines and list cells alike
+	const emptyLineNext = getEmptyLineMergeTarget(format, formatEl, 'end');
+	if (!selectRange && emptyLineNext) {
 		actions.push(A.preventStop());
 		actions.push(A.deleteEmptyLineMergeNext(formatEl, emptyLineNext));
 		actions.push(A.historyPush(true));
@@ -233,37 +229,3 @@ export function reduceDeleteDown(actions, ports, ctx) {
 
 	return true;
 }
-
-/**
- * @description Finds the line to merge up when Delete is pressed at the end of `formatEl` and the next line in
- * document order lies across a block boundary. Returns `null` for a plain line→line neighbour (left to native)
- * or when there is nothing safely mergeable (list cell, closure, brLine, end of document).
- * @param {EventPorts['format']} format
- * @param {HTMLElement} formatEl
- * @returns {?HTMLElement}
- */
-function findNextMergeLine(format, formatEl) {
-	let next = formatEl.nextElementSibling;
-	if (!next) {
-		// `formatEl` is the last line of its block — look at what follows the block.
-		const block = formatEl.parentElement;
-		if (!format.isBlock(block) || format.isClosureBlock(block)) return null;
-		next = block.nextElementSibling;
-		if (!next) return null;
-	} else if (!format.isBlock(next)) {
-		return null; // plain line→line — let the browser merge it natively
-	}
-
-	// Descend into blocks to the first line; only merge a simple, non-list, non-closure, non-brLine line.
-	let line = next;
-	while (line && format.isBlock(line) && !format.isClosureBlock(line)) line = line.firstElementChild;
-	if (
-		!format.isNormalLine(line) ||
-		dom.check.isListCell(line) ||
-		format.isBrLine(line) ||
-		format.isClosureBrLine(line)
-	) {
-		return null;
-	}
-	return /** @type {HTMLElement} */ (line);
-}

package/src/core/logic/dom/format.js

@@ -74,7 +74,7 @@ class Format {
 			) {
 				newFormat = /** @type {HTMLElement} */ (element.cloneNode(false));
 				dom.utils.copyFormatAttributes(newFormat, node);
-				newFormat.innerHTML = node.innerHTML;
+				while (node.firstChild) newFormat.appendChild(node.firstChild);
 
 				node.parentNode.replaceChild(newFormat, node);
 			}
@@ -290,7 +290,7 @@ class Format {
 		const lineAttrReset = this.#options.get('lineAttrReset');
 		let newEl;
 
-		if (/^H[1-6]$|^HR$/i.test(tag)) {
+		if (/^H[1-6]$/i.test(tag) || this.#$.component.is(element)) {
 			newEl = dom.utils.createElement(this.#options.get('defaultLine'), null, '<br>');
 		} else if (this.isBrLine(element)) {
 			newEl = dom.utils.createElement(this.#options.get('defaultLine'), null, '<br>');