suneditor 3.3.1 → 3.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "suneditor",
-	"version": "3.3.1",
+	"version": "3.3.2",
 	"description": "Vanilla JavaScript based WYSIWYG web editor",
 	"author": "Yi JiHong",
 	"license": "MIT",
@@ -50,7 +50,8 @@
 		"node": ">=14.0.0"
 	},
 	"overrides": {
-		"uuid": ">=14.0.0"
+		"uuid": ">=14.0.0",
+		"qs": "^6.16.0"
 	},
 	"scripts": {
 		"dev": "webpack-dev-server --config webpack/dev.js",

package/src/assets/suneditor.css

@@ -2112,11 +2112,18 @@
 	-moz-backface-visibility: hidden;
 }
 
+.sun-editor .se-wrapper .se-placeholder-line {
+	position: relative;
+}
 .sun-editor .se-wrapper .se-placeholder-line::before {
 	content: attr(data-se-placeholder-line);
-	display: inline-block;
-	width: 0;
-	overflow: visible;
+	position: absolute;
+	inset: 0;
+	padding: inherit;
+	box-sizing: border-box;
+	text-align: inherit;
+	overflow: hidden;
+	text-overflow: ellipsis;
 	color: var(--se-main-outline-color);
 	pointer-events: none;
 	user-select: none;
@@ -2124,6 +2131,15 @@
 	white-space: nowrap;
 }
 
+.sun-editor .se-wrapper li.se-placeholder-line {
+	overflow: hidden;
+}
+.sun-editor .se-wrapper li.se-placeholder-line::before {
+	inset: auto;
+	padding: 0;
+	max-width: 100%;
+}
+
 /** --- status bar */
 .sun-editor .se-status-bar {
 	display: flex;

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

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

@@ -9,6 +9,7 @@ const ZWS_RUN_REGEXP = new RegExp(unicode.zeroWidthSpace + '+', 'g');
  * @description All HTML related classes involved in the editing area
  */
 class HTML {
+	/** @type {SunEditor.Deps} */
 	#$;
 	#store;
 
@@ -74,6 +75,18 @@ class HTML {
 				splitTagStyles[n] += tagStyles[k];
 			}
 		}
+
+		// A tag with an explicit entry that is also a line/text-style tag inherits the category
+		// styles ('@line'/'@text'), so category edits stay effective for it. (e.g. "li")
+		const formatLineReg = options.get('formatLine').reg;
+		for (const k in splitTagStyles) {
+			if (k.startsWith('@')) continue;
+			const category = formatLineReg.test(k) ? '@line' : this.#textStyleTags.includes(k) ? '@text' : '';
+			if (category && tagStyles[category]) {
+				splitTagStyles[k] += (splitTagStyles[k] ? '|' : '') + tagStyles[category];
+			}
+		}
+
 		for (const k in splitTagStyles) {
 			splitTagStyles[k] = new RegExp(`\\s*[^-a-zA-Z](${splitTagStyles[k]})\\s*:[^;]+(?!;)*`, 'gi');
 		}
@@ -1661,7 +1674,7 @@ class HTML {
 				) || [];
 			for (let i = ch.length - 1, c; i >= 0; i--) {
 				c = /** @type {HTMLElement} */ (ch[i]);
-				c.outerHTML = c.innerHTML;
+				c.replaceWith(...c.childNodes);
 			}
 
 			if (
@@ -1892,7 +1905,20 @@ class HTML {
 				}
 				checkTags.push(t);
 			} else {
-				p.parentNode.insertBefore(t, p);
+				const ref = p.nextSibling;
+
+				let rest = null;
+				if (t.nextSibling) {
+					rest = p.cloneNode(false);
+					while (t.nextSibling) rest.appendChild(t.nextSibling);
+				}
+
+				p.parentNode.insertBefore(t, ref);
+
+				if (rest) {
+					p.parentNode.insertBefore(rest, ref);
+					checkTags.push(rest);
+				}
 				checkTags.push(p);
 			}
 		}
@@ -1929,19 +1955,42 @@ class HTML {
 			}
 		}
 
+		// wrap top-level `li` elements without a list parent in a `ul`
+		if (formatFilter) {
+			const orphanCells = dom.query.getListChildNodes(
+				documentFragment,
+				(current) => dom.check.isListCell(current) && !dom.check.isList(current.parentNode),
+				null,
+			);
+
+			for (let i = 0, len = orphanCells.length, t, ul, n, next; i < len; i++) {
+				t = orphanCells[i];
+				if (dom.check.isList(t.parentNode)) continue;
+
+				ul = dom.utils.createElement('UL');
+				t.parentNode.insertBefore(ul, t);
+				n = t;
+				while (n && (dom.check.isListCell(n) || (n.nodeType === 3 && !n.textContent.trim()))) {
+					next = n.nextSibling;
+					ul.appendChild(n);
+					n = next;
+				}
+			}
+		}
+
 		for (let i = 0, len = withoutFormatCells.length, t, f; i < len; i++) {
 			t = withoutFormatCells[i];
 
 			f = dom.utils.createElement('DIV');
-			f.innerHTML = t.innerHTML;
+			while (t.firstChild) f.appendChild(t.firstChild);
 
-			if (t.textContent.trim().length === 0 && this.#isAllTextStyleNodes(t)) {
+			if (f.textContent.trim().length === 0 && this.#isAllTextStyleNodes(f)) {
 				let leaf = /** @type {Element} */ (f);
 				while (leaf.firstElementChild) leaf = leaf.firstElementChild;
 				leaf.innerHTML = '<br>';
 			}
 
-			t.innerHTML = f.outerHTML;
+			t.appendChild(f);
 		}
 	}
 

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

@@ -106,8 +106,9 @@ class NodeTransform {
 
 			if (temp) {
 				if (dom.check.isListCell(newEl) && dom.check.isList(temp) && temp.firstElementChild) {
-					newEl.innerHTML = temp.firstElementChild.innerHTML;
-					dom.utils.removeItem(temp.firstElementChild);
+					const firstCell = temp.firstElementChild;
+					while (firstCell.firstChild) newEl.appendChild(firstCell.firstChild);
+					dom.utils.removeItem(firstCell);
 					if (temp.children.length > 0) newEl.appendChild(temp);
 				} else {
 					newEl.appendChild(temp);
@@ -300,7 +301,8 @@ class NodeTransform {
 							}
 						}
 					} else {
-						child.innerHTML += next.innerHTML;
+						while (next.firstChild) child.appendChild(next.firstChild);
+						child.normalize();
 					}
 
 					dom.utils.removeItem(next);

package/src/core/logic/shell/ui.js

@@ -959,7 +959,12 @@ class UIManager {
 		this._updatePlaceholder(fc);
 		// document type page
 		if (fc.has('documentType_use_page')) {
-			fc.get('documentTypePageMirror').innerHTML = fc.get('wysiwyg').innerHTML;
+			const mirror = fc.get('documentTypePageMirror');
+			const frag = mirror.ownerDocument.createDocumentFragment();
+			for (let n = fc.get('wysiwyg').firstChild; n; n = n.nextSibling) {
+				frag.appendChild(n.cloneNode(true));
+			}
+			mirror.replaceChildren(frag);
 			fc.get('documentType').rePage(true);
 		}
 	}