suneditor 3.2.2 → 3.2.4

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

@@ -3,6 +3,7 @@ import { dom, converter, markdown, numbers, unicode, clipboard, env } from '../.
 const { _d } = env;
 const REQUIRED_DATA_ATTRS = 'data-se-[^\\s]+';
 const V2_MIG_DATA_ATTRS = '|data-index|data-file-size|data-file-name|data-exp|data-font-size';
+const ZWS_RUN_REGEXP = new RegExp(unicode.zeroWidthSpace + '+', 'g');
 
 /**
  * @description All HTML related classes involved in the editing area
@@ -365,6 +366,14 @@ class HTML {
 			cleanData = this.#styleNodeConvertor(cleanData);
 		}
 
+		if (!_freeCodeViewMode && cleanData.includes(unicode.zeroWidthSpace)) {
+			cleanData = cleanData.replace(ZWS_RUN_REGEXP, (m, offset, str) => {
+				const boundedStart = offset === 0 || str[offset - 1] === '>';
+				const boundedEnd = offset + m.length === str.length || str[offset + m.length] === '<';
+				return boundedStart && boundedEnd ? m : '';
+			});
+		}
+
 		return cleanData;
 	}
 
@@ -2228,7 +2237,9 @@ class HTML {
 				v.push(sv[0]);
 			}
 		} else if (!v || !_RE_STYLE_EQ.test(v.toString())) {
-			if (this.#cleanStyleTagKeyRegExp.test(tagName)) {
+			if (_RE_SE_COMPONENT.test(m)) {
+				v = this.#cleanStyle(m, v, '@component');
+			} else if (this.#cleanStyleTagKeyRegExp.test(tagName)) {
 				v = this.#cleanStyle(m, v, tagName);
 			} else if (this.#$.format.isLine(tagName)) {
 				v = this.#cleanStyle(m, v, '@line');
@@ -2356,6 +2367,7 @@ const _RE_TAG_NAME = /(?!<)[a-zA-Z0-9-]+/;
 const _RE_ON_HANDLER = /\s(?:on[a-z]+)\s*=\s*(?:(["'])[^"']*\1|\S+)/gi;
 const _RE_STYLE_EQ = /style=/i;
 const _RE_STYLE_ATTR = /style\s*=\s*(?:"|')[^"']*(?:"|')/;
+const _RE_SE_COMPONENT = /class\s*=\s*("|')(?:[^"']*\s)?se-component(?=[\s"'])/i;
 const _RE_LEADING_SPACE = /^\s/;
 
 // #cleanStyle

package/src/core/logic/panel/blockHandle.js

@@ -1,4 +1,4 @@
-import { dom, env } from '../../../helper';
+import { dom, env, numbers } from '../../../helper';
 import { resolveBlock } from './blockResolver';
 import { ResolveButton } from '../../section/constructor';
 import CommandMenu from '../../../modules/ui/CommandMenu.js';
@@ -14,13 +14,13 @@ const { _w, _d } = env;
  */
 function _resolveLengthPx(value, contextStyle) {
 	const trimmed = (value || '').trim();
-	const num = parseFloat(trimmed);
+	const num = numbers.get(trimmed, -1);
 	if (!num) return 0;
 	if (/rem$/.test(trimmed)) {
-		return num * (parseFloat(_w.getComputedStyle(_d.documentElement).fontSize) || 16);
+		return num * (numbers.get(_w.getComputedStyle(_d.documentElement).fontSize, -1) || 16);
 	}
 	if (/em$/.test(trimmed)) {
-		return num * (parseFloat(contextStyle.fontSize) || 16);
+		return num * (numbers.get(contextStyle.fontSize, -1) || 16);
 	}
 	return num;
 }
@@ -455,9 +455,18 @@ class BlockHandle {
 		const scrollX = _w.scrollX;
 		const scrollY = _w.scrollY;
 
-		// parent-viewport top to convert to parent coordinates
-		const blockTopVP = isIframe ? blockRect.top + iframeRect.top : blockRect.top;
-		const top = blockTopVP + scrollY;
+		// First appearance after being hidden — skip transition. Make the handle
+		// measurable (display) before reading its height so we can center it.
+		const wasHidden = this.#handle.style.display !== 'flex';
+		if (wasHidden) {
+			dom.utils.addClass(this.#handle, 'se-no-transition');
+			this.#handle.style.display = 'flex';
+		}
+
+		const handleHeight = this.#handle.offsetHeight || 0;
+		const firstLineCenter = this.#getFirstLineCenter(blockElement, blockRect);
+		const firstLineCenterVP = isIframe ? firstLineCenter + iframeRect.top : firstLineCenter;
+		const top = firstLineCenterVP + scrollY - handleHeight / 2;
 
 		// Handle inline offset
 		const isRtl = !!this.#$.options.get('_rtl');
@@ -469,7 +478,7 @@ class BlockHandle {
 			const wysiwygFrame = this.#$.frameContext.get('wysiwyg');
 			if (wysiwygFrame) {
 				const cs = _w.getComputedStyle(wysiwygFrame);
-				const padStart = parseFloat(isRtl ? cs.paddingRight : cs.paddingLeft) || 0;
+				const padStart = numbers.get(isRtl ? cs.paddingRight : cs.paddingLeft, -1) || 0;
 				const baseline = _resolveLengthPx(cs.getPropertyValue('--se-edit-inner-padding'), cs);
 				centeringExtra = Math.max(0, padStart - baseline);
 			}
@@ -477,10 +486,6 @@ class BlockHandle {
 
 		const totalOffset = indent + centeringExtra;
 
-		// First appearance after being hidden — skip transition
-		const wasHidden = this.#handle.style.display !== 'flex';
-		if (wasHidden) dom.utils.addClass(this.#handle, 'se-no-transition');
-
 		this.#handle.style.top = top + 'px';
 		if (isRtl) {
 			this.#handle.style.left = '';
@@ -497,6 +502,37 @@ class BlockHandle {
 		}
 	}
 
+	/**
+	 * @description Viewport-Y center of the block's first line box (in the block's own document coordinates).
+	 * @param {HTMLElement} blockElement
+	 * @param {DOMRect} blockRect - `blockElement.getBoundingClientRect()`
+	 * @returns {number} Viewport-Y coordinate of the first line's vertical center
+	 */
+	#getFirstLineCenter(blockElement, blockRect) {
+		try {
+			const doc = blockElement.ownerDocument;
+			const walker = doc.createTreeWalker(blockElement, NodeFilter.SHOW_TEXT, null);
+
+			let textNode = /** @type {Text|null} */ (null);
+			while ((textNode = /** @type {Text} */ (walker.nextNode()))) {
+				if (textNode.textContent?.trim()) break;
+			}
+
+			if (textNode) {
+				const range = doc.createRange();
+				range.setStart(textNode, 0);
+				range.setEnd(textNode, Math.min(1, textNode.length));
+				const rects = range.getClientRects();
+				if (rects.length) return (rects[0].top + rects[0].bottom) / 2;
+			}
+		} catch {
+			// Fall through to the line-height estimate below
+		}
+
+		const lineHeight = numbers.get(_w.getComputedStyle(blockElement).lineHeight, -1) || blockRect.height;
+		return blockRect.top + Math.min(lineHeight, blockRect.height) / 2;
+	}
+
 	/**
 	 * @description Calculate the handle's inline indent.
 	 * @param {HTMLElement} blockElement
@@ -512,13 +548,13 @@ class BlockHandle {
 		const paddingKey = isRtl ? 'paddingRight' : 'paddingLeft';
 		let indent = 0;
 
-		indent += parseFloat(_w.getComputedStyle(blockElement)[marginKey]) || 0;
+		indent += numbers.get(_w.getComputedStyle(blockElement)[marginKey], -1) || 0;
 
 		let el = blockElement.parentElement;
 		while (el && el !== wysiwyg) {
 			if (format.isBlock(el)) {
 				const s = _w.getComputedStyle(el);
-				indent += (parseFloat(s[paddingKey]) || 0) + (parseFloat(s[marginKey]) || 0);
+				indent += (numbers.get(s[paddingKey], -1) || 0) + (numbers.get(s[marginKey], -1) || 0);
 			}
 			el = el.parentElement;
 		}

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

@@ -885,13 +885,15 @@ class UIManager {
 		if (!text) return false;
 
 		const wysiwyg = fc.get('wysiwyg');
-		const prev = wysiwyg.querySelector('.se-placeholder-line');
 
 		const line = this.#store.get('hasFocus') ? this.#$.format.getLine(this.#$.selection.selectionNode) : null;
-		const target = dom.check.isEmptyLine(line) && !dom.check.isListCell(line) ? line : null;
+		const inTableCell = !!line && !!dom.query.getParentElement(line, dom.check.isTableCell);
+		const target = dom.check.isEmptyLine(line) && !dom.check.isListCell(line) && !inTableCell ? line : null;
 
-		// Single-marker invariant: drop the previous marker unless it is still the target line.
-		if (prev && prev !== target) {
+		const prevMarkers = wysiwyg.querySelectorAll('.se-placeholder-line');
+		for (let i = 0; i < prevMarkers.length; i++) {
+			const prev = prevMarkers[i];
+			if (prev === target) continue;
 			prev.classList.remove('se-placeholder-line');
 			prev.removeAttribute('data-se-placeholder-line');
 			if (!prev.getAttribute('class')) prev.removeAttribute('class');
@@ -1047,7 +1049,7 @@ class UIManager {
 
 function CreateAlertHTML({ lang, icons }) {
 	const html =
-		'<div><button class="close" data-command="close" title="' +
+		'<div><button type="button" class="close" data-command="close" title="' +
 		lang.close +
 		'">' +
 		icons.cancel +

package/src/core/schema/options.js

@@ -70,6 +70,7 @@ export const DEFAULTS = {
 	TAG_STYLES: {
 		'@text': 'font-family|font-size|color|background-color|width|height',
 		'@line': 'text-align|margin|margin-left|margin-right|line-height',
+		'@component': 'width|height|min-width',
 		'table|th|td':
 			'border|border-[a-z]+|color|background-color|text-align|float|font-weight|text-decoration|font-style|vertical-align',
 		'table|td': 'width',
@@ -422,9 +423,10 @@ export const DEFAULTS = {
  * { allUsedStyles: 'color|background-color|text-shadow' }
  * ```
  * @property {Object<string, string>} [tagStyles={}] - Specifies allowed CSS styles per HTML tag.
- * - Key is a tag name, multiple tags joined with `|`, or a category sentinel (`@text`, `@line`).
+ * - Key is a tag name, multiple tags joined with `|`, or a category sentinel (`@text`, `@line`, `@component`).
  * - Value is a pipe-delimited list of allowed style names.
- * - Resolution order when filtering an element: explicit tag entry → `@line` (for formatLine elements) → `@text` (for textStyleTags).
+ * - Resolution order when filtering an element: `@component` (for `.se-component` containers) → explicit tag entry → `@line` (for formatLine elements) → `@text` (for textStyleTags).
+ * - `@component` guards the inline sizing (`width`/`height`/`min-width`) the editor writes on a media component's container for percentage-based sizes; keep these so a clean() round-trip does not reset the component to full width.
  * - An explicit tag entry **replaces** the category default — include category styles in the value if you want both.
  * - Merged with {@link DEFAULTS.TAG_STYLES}; user-supplied keys win.
  * ```js

package/src/core/section/constructor.js

@@ -77,6 +77,21 @@ function Constructor(editorTargets, options) {
 	const menuTray = dom.utils.createElement('DIV', { class: 'se-menu-tray', popover: 'manual' });
 	editor_carrier_wrapper.appendChild(menuTray);
 
+	// focus temp element — used by the legacy `keydown` Enter path (environments without `beforeinput`)
+	// to force-end a mobile virtual-keyboard IME session. See ports.enterPrevent / useEnterFromBeforeInput.
+	const focusTemp = /** @type {HTMLInputElement} */ (
+		dom.utils.createElement('INPUT', {
+			type: 'text',
+			id: editorFormFieldPrefix + '-focus-temp',
+			class: '__se__focus__temp__',
+			autocomplete: 'off',
+			'aria-hidden': 'true',
+			style: 'position: fixed !important; top: -10000px !important; left: -10000px !important; display: block !important; width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important;',
+		})
+	);
+	focusTemp.tabIndex = 0;
+	editor_carrier_wrapper.appendChild(focusTemp);
+
 	// modal
 	const modal = dom.utils.createElement('DIV', {
 		class: 'se-modal se-modal-area sun-editor-common',

package/src/helper/converter.js

@@ -1,4 +1,5 @@
 import { _d, _w } from './env';
+import { get as getNumber } from './numbers';
 
 const _RE_HTML_CHARS = /&|\u00A0|'|"|<|>/g;
 const _RE_HTML_ENTITIES = /&amp;|&nbsp;|&apos;|&quot;|&lt;|&gt;/g;
@@ -392,8 +393,8 @@ export function rgb2hex(rgba) {
 export function getWidthInPercentage(target, parentTarget) {
 	const parent = /** @type {HTMLElement} */ (parentTarget || target.parentElement);
 	const parentStyle = _w.getComputedStyle(parent);
-	const parentPaddingLeft = parseFloat(parentStyle.paddingLeft);
-	const parentPaddingRight = parseFloat(parentStyle.paddingRight);
+	const parentPaddingLeft = getNumber(parentStyle.paddingLeft, -1);
+	const parentPaddingRight = getNumber(parentStyle.paddingRight, -1);
 	const scrollbarWidth = parent.offsetWidth - parent.clientWidth;
 	const parentWidth = parent.offsetWidth - parentPaddingLeft - parentPaddingRight - scrollbarWidth;
 	const widthInPercentage = (target.offsetWidth / parentWidth) * 100;

package/src/helper/env.js

@@ -216,6 +216,56 @@ export const shiftIcon = isOSX_IOS ? '⇧' : '+SHIFT';
  */
 export const DPI = _w.devicePixelRatio;
 
+/** @type {?boolean} */
+let _canUseBeforeInputCache = null;
+
+/**
+ * @description Runtime probe: does this environment actually deliver input events for edits?
+ * Some managed/corporate environments (keyboard-hooking security SW, DLP, VDI) silently drop `beforeinput`
+ * **and** `input` at runtime even though the browser statically supports them — static feature-detection
+ * (`window.InputEvent`) cannot see that. This synthetically triggers an edit (`execCommand('insertText')`)
+ * on an offscreen contenteditable and observes whether an input-family event fires **synchronously**.
+ * @returns {boolean} `true` if an input-family event fired (environment delivers edits), else `false`.
+ */
+export function canUseBeforeInput() {
+	if (_canUseBeforeInputCache !== null) return _canUseBeforeInputCache;
+	if (!_d.body || typeof _d.execCommand !== 'function') return true;
+
+	let seen = false;
+
+	try {
+		const probe = _d.createElement('div');
+		probe.setAttribute('contenteditable', 'true');
+		probe.setAttribute('aria-hidden', 'true');
+		probe.style.cssText =
+			'position: fixed; top: 0; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none;';
+
+		const active = /** @type {?HTMLElement} */ (_d.activeElement);
+		_d.body.appendChild(probe);
+
+		const onInput = () => {
+			seen = true;
+		};
+
+		probe.addEventListener('beforeinput', onInput, true);
+		probe.addEventListener('input', onInput, true);
+
+		probe.focus({ preventScroll: true });
+		_d.execCommand('insertText', false, '\u200b');
+
+		probe.removeEventListener('beforeinput', onInput, true);
+		probe.removeEventListener('input', onInput, true);
+
+		probe.remove();
+
+		if (active && active !== _d.body && typeof active.focus === 'function') active.focus({ preventScroll: true });
+	} catch {
+		seen = true;
+	}
+
+	return (_canUseBeforeInputCache = seen);
+}
+
 /** --- editor env --- */
 export const KATEX_WEBSITE = 'https://katex.org/docs/supported.html';
 export const MATHJAX_WEBSITE = 'https://www.mathjax.org/';
@@ -239,6 +289,7 @@ const env = {
 	isAndroid,
 	isMobile,
 	isTouchDevice,
+	canUseBeforeInput,
 	cmdIcon,
 	shiftIcon,
 	DPI,

package/src/helper/markdown.js

@@ -322,9 +322,11 @@ function nodeToMarkdown(node, indent, isBlock) {
 	// Headings
 	const headingMatch = /^h([1-6])$/.exec(tag);
 	if (headingMatch) {
+		const content = childrenToInline(children).trim();
+		if (!content) return '\n';
 		const level = parseInt(headingMatch[1], 10);
 		const prefix = '#'.repeat(level);
-		return `${prefix} ${childrenToInline(children).trim()}\n\n`;
+		return `${prefix} ${content}\n\n`;
 	}
 
 	if (tag === 'p') {

package/src/modules/contract/Browser.js

@@ -516,7 +516,7 @@ class Browser {
 				const folderDiv = dom.utils.createElement('div', { class: 'se-menu-folder' }, folderLabel);
 
 				folderLabel.insertBefore(
-					dom.utils.createElement('button', null, expanded ? this.openArrow : this.closeArrow),
+					dom.utils.createElement('button', { type: 'button' }, expanded ? this.openArrow : this.closeArrow),
 					folderLabel.firstElementChild,
 				);
 				const childContainer = document.createElement('div');
@@ -762,7 +762,7 @@ function CreateHTMLInfos($, useSearch) {
 				<div class="se-browser-main"> 
 					<div class="se-browser-bar">
 						<div class="se-browser-search">
-							<button class="se-btn se-side-open-btn">${icons.side_menu_hamburger}</button>
+							<button type="button" class="se-btn se-side-open-btn">${icons.side_menu_hamburger}</button>
 							${
 								useSearch
 									? /*html*/ `

package/src/modules/ui/CommandMenu.js

@@ -448,7 +448,7 @@ class CommandMenu {
 			if (/modal/.test(type)) plugin.open?.();
 			else if (/browser/.test(type)) plugin.open?.(null);
 			else if (/popup/.test(type)) plugin.show?.();
-			else plugin.action?.(dom.utils.createElement('BUTTON', { 'data-command': resolved.name }));
+			else plugin.action?.(dom.utils.createElement('BUTTON', { type: 'button', 'data-command': resolved.name }));
 			this.#$.history.push(false);
 			return true;
 		}

package/src/plugins/dropdown/table/index.js

@@ -339,7 +339,7 @@ class Table extends PluginDropdownFree {
 								if (currentLogicalCol + i >= maxColumnCount || !cellWidth) continue;
 
 								rowColOccupancy[currentLogicalCol + i] = true;
-								const currentPxWidth = parseFloat(cellWidth);
+								const currentPxWidth = numbers.get(cellWidth, -1);
 
 								for (let j = 0; j < colSpan; j++) {
 									const targetColIndex = currentLogicalCol + j;
@@ -349,8 +349,9 @@ class Table extends PluginDropdownFree {
 									if (existingWidth === null) {
 										colWidths[targetColIndex] = `width: ${cellWidth};`;
 									} else {
-										const existingPxWidth = parseFloat(
+										const existingPxWidth = numbers.get(
 											existingWidth.replace('width: ', '').replace(';', ''),
+											-1,
 										);
 										if (colSpan === 1 && currentPxWidth !== existingPxWidth) {
 											colWidths[targetColIndex] = `width: ${cellWidth};`;

package/src/plugins/field/slashCommand.js

@@ -46,7 +46,23 @@ const { debounce } = converter;
  *         title: 'Heading 1',
  *         icon: 'h1',
  *         keywords: ['header', 'title'],
- *         action: ($) => $.format.applyBlock(document.createElement('H1')),
+ *         // A line-level tag (H1-H6, P): `setLine` CHANGES the current line's tag → `<h1>…</h1>`.
+ *         // Do NOT use `applyBlock` here — it WRAPS (`<h1><p>…</p></h1>`) and traps Enter inside.
+ *         action: ($) => $.format.setLine(document.createElement('H1')),
+ *       },
+ *       {
+ *         key: 'code',
+ *         title: 'Code block',
+ *         keywords: ['pre'],
+ *         // A br-line block (PRE): `setBrLine` converts the line to a `<br>`-separated code block.
+ *         action: ($) => $.format.setBrLine(document.createElement('PRE')),
+ *       },
+ *       {
+ *         key: 'quote',
+ *         title: 'Quote',
+ *         keywords: ['blockquote'],
+ *         // A container block (BLOCKQUOTE, DIV…): `applyBlock` WRAPS the selected lines → `<blockquote>…</blockquote>`.
+ *         action: ($) => $.format.applyBlock(document.createElement('BLOCKQUOTE')),
  *       },
  *       'bold',
  *       'image',

package/types/core/event/actions/index.d.ts

@@ -37,13 +37,15 @@ export namespace A {
 	function backspaceListRemoveNested(range: Range): Action;
 	function backspaceEmptyLineMergePrev(formatEl: Element, prev: Element): Action;
 	function backspaceBrLineRowMerge(rowEndBr: Node, rowStartBr: Node): Action;
+	function backspaceSoftBreakMerge(zws: Node): Action;
 	function deleteComponentSelect(formatEl: Element, fileComponentInfo: SunEditor.ComponentInfo): Action;
 	function deleteComponentSelectNext(formatEl: any, nextEl: Element): Action;
 	function deleteListRemoveNested(range: Range, formatEl: Element, rangeEl: Element): Action;
 	function deleteEmptyLineMergeNext(formatEl: Element, next: Element): Action;
 	function deleteBrLineRowMerge(rowEndBr: Node): Action;
+	function deleteSoftBreakMerge(br: Node): Action;
 	function tabFormatIndent(range: Range, formatEl: Element, shift: boolean): Action;
-	function enterScrollTo(range: Range): Action;
+	function caretScrollTo(range: Range): Action;
 	function enterLineAddDefault(formatEl: Element): Action;
 	function enterListAddItem(formatEl: Element, selectionNode: Node): Action;
 	function enterFormatExitEmpty(formatEl: Element, rangeEl: Element): Action;
@@ -57,6 +59,7 @@ export namespace A {
 	function enterFormatInsertBrHtml(brBlock: Element, range: Range, wSelection: Selection, offset: number): Action;
 	function enterFormatInsertBrNode(wSelection: Selection): Action;
 	function enterBrLineInsert(range: Range): Action;
+	function enterShiftBr(range: Range): Action;
 	function enterBrLineExit(brBlock: Element): Action;
 	function enterFormatBreakAtEdge(
 		formatEl: Element,

package/types/core/event/effects/keydown.registry.d.ts

@@ -26,6 +26,8 @@ declare const _default: {
 	'backspace.emptyLine.mergePrev': ({ ports }: EffectContext_keydown, { formatEl, prev }: any) => void;
 	/** @action backspaceBrLineRowMerge */
 	'backspace.brline.rowMerge': ({ ports }: EffectContext_keydown, { rowEndBr, rowStartBr }: any) => void;
+	/** @action backspaceSoftBreakMerge */
+	'backspace.softBreak.merge': ({ ports }: EffectContext_keydown, { zws }: any) => void;
 	/** [delete] */
 	/** @action deleteComponentSelect */
 	'delete.component.select': ({ ports }: EffectContext_keydown, { formatEl, fileComponentInfo }: any) => void;
@@ -37,12 +39,15 @@ declare const _default: {
 	'delete.emptyLine.mergeNext': ({ ports }: EffectContext_keydown, { formatEl, next }: any) => void;
 	/** @action deleteBrLineRowMerge — remove an empty row inside a brLine (PRE), pull the next row up */
 	'delete.brline.rowMerge': ({ ports }: EffectContext_keydown, { rowEndBr }: any) => void;
+	/** @action deleteSoftBreakMerge */
+	'delete.softBreak.merge': ({ ports }: EffectContext_keydown, { br }: any) => void;
 	/** [tab] */
 	/** @action tabFormatIndent */
 	'tab.format.indent': ({ ports, ctx }: EffectContext_keydown, { range, formatEl, shift }: any) => boolean;
+	/** [caret] */
+	/** @action caretScrollTo */
+	'caret.scrollTo': ({ ports }: EffectContext_keydown, { range }: any) => void;
 	/** [enter] */
-	/** @action enterScrollTo */
-	'enter.scrollTo': ({ ports }: EffectContext_keydown, { range }: any) => void;
 	/** @action enterLineAddDefault */
 	'enter.line.addDefault': ({ ports }: EffectContext_keydown, { formatEl }: any) => void;
 	/** @action enterListAddItem */
@@ -61,6 +66,8 @@ declare const _default: {
 	) => void;
 	/** @action enterBrLineInsert — insert exactly one empty row at the caret inside a normal brLine. */
 	'enter.brline.insert': ({ ports }: EffectContext_keydown, { range }: any) => void;
+	/** @action enterShiftBr — soft line break (Shift+Enter): insert a `<br>` at the caret, splitting the line. */
+	'enter.shift.br': ({ ports, ctx }: EffectContext_keydown, { range }: any) => void;
 	/** @action enterBrLineExit — consume only the caret's current (last) empty row and add a default line after the brLine. */
 	'enter.brline.exit': ({ ports }: EffectContext_keydown, { brBlock }: any) => void;
 	/** @action enterFormatInsertBrNode */

package/types/core/event/eventOrchestrator.d.ts

@@ -9,6 +9,11 @@ declare class EventOrchestrator extends KernelInjector {
 	 * @type {boolean}
 	 */
 	isComposing: boolean;
+	/**
+	 * @description Real Shift-key state of the most recent Enter keydown.
+	 * @type {boolean}
+	 */
+	_enterKeyShift: boolean;
 	/**
 	 * @description An array of parent containers that can be scrolled (in descending order)
 	 * @type {Array<Element>}
@@ -51,6 +56,8 @@ declare class EventOrchestrator extends KernelInjector {
 	__eventDoc: Document;
 	/** @type {string} */
 	__secopy: string;
+	/** @type {HTMLInputElement} */
+	__focusTemp: HTMLInputElement;
 	/**
 	 * @description Activates the corresponding button with the tags information of the current cursor position,
 	 * - such as `bold`, `underline`, etc., and executes the `active` method of the plugins.
@@ -86,11 +93,15 @@ declare class EventOrchestrator extends KernelInjector {
 	_setDefaultLine(formatName: string | null): void;
 	/**
 	 * @internal
-	 * @description Normalize the Enter range before the reducer reads it: reset to a text node, and when the
-	 * caret sits inside a zero-width text node adjacent to a `<br>`, move it onto the `<br>`.
+	 * @description Normalize the edit range before the reducer reads it, for every key we custom-handle
+	 * (Enter, Backspace, Delete). Resets an element-level container (a `line` such as `P`) to a text node so
+	 * the rules' text-offset arithmetic (`isEdgePoint`, `endOffset === textContent.length`, ...) is valid; and
+	 * when the caret sits inside a zero-width text node adjacent to a `<br>`, moves it onto the `<br>`.
+	 * Without this, Backspace/Delete misfire whenever the browser reports the container as the line itself
+	 * (child-index offset) instead of a `<br>`/ZWS text node.
 	 * @returns {?(HTMLElement|Text)} The updated selection node, or `null` when the caret is not on a line (no normalization ran).
 	 */
-	_normalizeEnterRange(): (HTMLElement | Text) | null;
+	_normalizeEditRange(): (HTMLElement | Text) | null;
 	/**
 	 * @internal
 	 * @description Handles data transfer actions for `paste` and `drop` events.

package/types/core/event/handlers/handler_ww_key.d.ts

@@ -23,6 +23,7 @@ export class OnKeyDown_wysiwyg {
 	 */
 	constructor(this: import('../eventOrchestrator').default, fc: SunEditor.FrameContext, e: KeyboardEvent);
 	isComposing: boolean;
+	_enterKeyShift: boolean;
 	_onShortcutKey: boolean;
 }
 /**

package/types/core/event/ports.d.ts

@@ -168,14 +168,16 @@ export function makePorts(
 	formatAttrsTempCache: (attrs: any) => any;
 	setOnShortcutKey: (v: any) => any;
 	/**
-	 * @description Scrolls the editor view to the caret position after pressing `Enter`.
-	 * @param {Range} range Pre-Enter snapshot range (fallback only).
+	 * @description Scrolls the editor view to the caret position after an edit (Enter, Backspace, ...).
+	 * @param {Range} range Pre-edit snapshot range (fallback only).
 	 */
-	enterScrollTo(range: Range): void;
+	caretScrollTo(range: Range): void;
 	/**
 	 * @description Prevents the default behavior of the `Enter` key.
-	 * Enter now runs from `beforeinput` (post-IME-commit), so the former mobile focus-shuffle
-	 * (temp-focus → refocus, to force-end a virtual-keyboard IME session) is unnecessary.
+	 * On the `beforeinput` Enter path the IME has already committed, so a plain `preventDefault` suffices.
+	 * On the legacy `keydown` path (environment doesn't deliver `beforeinput` — see `useEnterFromBeforeInput`)
+	 * a mobile virtual keyboard can leave an open IME session, so we force it to end with a focus-shuffle
+	 * (temp-focus → refocus wysiwyg); otherwise the just-committed marked-text is re-trapped.
 	 * @param {Event} e The keyboard/input event
 	 */
 	enterPrevent(e: Event): void;
@@ -259,5 +261,5 @@ export type EventReducerPorts = {
 	formatAttrsTempCache: (attrs: { [x: string]: any }) => void;
 	setOnShortcutKey: (v: boolean) => void;
 	enterPrevent: (e: Event) => void;
-	enterScrollTo: (range: Range) => void;
+	caretScrollTo: (range: Range) => void;
 };

package/types/core/event/reducers/keydown.reducer.d.ts

@@ -1,4 +1,12 @@
 import type {} from '../../../typedef';
+/**
+ * @description Routing decision for Enter. Auto-repeat (held key) fires `keydown` but not `beforeinput`,
+ * so a repeat must stay on `keydown` or only the first line break would land.
+ * @param {SunEditor.Store} store - Editor store object
+ * @param {KeyboardEvent|InputEvent} [e] - Source event; a `repeat` flag forces the `keydown` path.
+ * @returns {boolean} `true` to route Enter through `beforeinput`, `false` to keep it on `keydown`.
+ */
+export function useEnterFromBeforeInput(store: SunEditor.Store, e?: KeyboardEvent | InputEvent): boolean;
 /**
  * @typedef {import('../ports').EventReducerPorts} EventPorts
  */
@@ -28,11 +36,13 @@ import type {} from '../../../typedef';
  */
 export function reduceKeydown(ports: EventPorts, ctx: KeydownReducerCtx): Promise<EventActions>;
 /**
- * @description Enter is processed from the `beforeinput` event (post-IME-commit) instead of `keydown`,
- * to avoid trapping iOS/mobile IME marked-text when `keydown` mutates the DOM (see `handler_ww_input.js`).
- * Flip to `false` to instantly restore the legacy synchronous `keydown` Enter path — no other file needs
- * touching for rollback (the `keydown` Enter gate, the `handler_ww_key` normalization guard, and the
- * `beforeinput` dispatch all key off this single flag).
+ * @description Master switch for processing Enter from the `beforeinput` event (post-IME-commit) instead
+ * of `keydown`, to avoid trapping iOS/mobile IME marked-text when `keydown` mutates the DOM (see
+ * `handler_ww_input.js`).
+ *
+ * This is only the compile-time master; the effective per-environment decision is
+ * {@link useEnterFromBeforeInput}, which additionally requires that this environment actually delivers
+ * `beforeinput` at runtime (some corporate security SW / DLP / VDI drop it).
  * @type {boolean}
  */
 export const ENTER_FROM_BEFOREINPUT: boolean;

package/types/core/kernel/store.d.ts

@@ -65,6 +65,10 @@ export type StoreState = {
 	 * - Suppress `focus` event handling.
 	 */
 	_preventFocus: boolean;
+	/**
+	 * - Whether this environment actually delivers `beforeinput` at runtime (probed once at editor load; some corporate security SW / DLP / VDI drop it). Defaults `true`.
+	 */
+	_canUseBeforeInput: boolean;
 };
 /**
  * - Toolbar display mode flags (immutable after init).
@@ -117,6 +121,7 @@ export type StoreMode = {
  * @property {boolean} _mousedown - Whether `mousedown` is pressed.
  * @property {boolean} _preventBlur - Suppress `blur` event handling.
  * @property {boolean} _preventFocus - Suppress `focus` event handling.
+ * @property {boolean} _canUseBeforeInput - Whether this environment actually delivers `beforeinput` at runtime (probed once at editor load; some corporate security SW / DLP / VDI drop it). Defaults `true`.
  */
 /**
  * @typedef {Object} StoreMode - Toolbar display mode flags (immutable after init).

package/types/core/schema/options.d.ts

@@ -27,6 +27,7 @@ export namespace DEFAULTS {
 	let TAG_STYLES: {
 		'@text': string;
 		'@line': string;
+		'@component': string;
 		'table|th|td': string;
 		'table|td': string;
 		tr: string;
@@ -365,9 +366,10 @@ export namespace DEFAULTS {
  * { allUsedStyles: 'color|background-color|text-shadow' }
  * ```
  * @property {Object<string, string>} [tagStyles={}] - Specifies allowed CSS styles per HTML tag.
- * - Key is a tag name, multiple tags joined with `|`, or a category sentinel (`@text`, `@line`).
+ * - Key is a tag name, multiple tags joined with `|`, or a category sentinel (`@text`, `@line`, `@component`).
  * - Value is a pipe-delimited list of allowed style names.
- * - Resolution order when filtering an element: explicit tag entry → `@line` (for formatLine elements) → `@text` (for textStyleTags).
+ * - Resolution order when filtering an element: `@component` (for `.se-component` containers) → explicit tag entry → `@line` (for formatLine elements) → `@text` (for textStyleTags).
+ * - `@component` guards the inline sizing (`width`/`height`/`min-width`) the editor writes on a media component's container for percentage-based sizes; keep these so a clean() round-trip does not reset the component to full width.
  * - An explicit tag entry **replaces** the category default — include category styles in the value if you want both.
  * - Merged with {@link DEFAULTS.TAG_STYLES}; user-supplied keys win.
  * ```js
@@ -1177,9 +1179,10 @@ export type EditorBaseOptions = {
 	allUsedStyles?: string;
 	/**
 	 * - Specifies allowed CSS styles per HTML tag.
-	 * - Key is a tag name, multiple tags joined with `|`, or a category sentinel (`@text`, `@line`).
+	 * - Key is a tag name, multiple tags joined with `|`, or a category sentinel (`@text`, `@line`, `@component`).
 	 * - Value is a pipe-delimited list of allowed style names.
-	 * - Resolution order when filtering an element: explicit tag entry → `@line` (for formatLine elements) → `@text` (for textStyleTags).
+	 * - Resolution order when filtering an element: `@component` (for `.se-component` containers) → explicit tag entry → `@line` (for formatLine elements) → `@text` (for textStyleTags).
+	 * - `@component` guards the inline sizing (`width`/`height`/`min-width`) the editor writes on a media component's container for percentage-based sizes; keep these so a clean() round-trip does not reset the component to full width.
 	 * - An explicit tag entry **replaces** the category default — include category styles in the value if you want both.
 	 * - Merged with {@link DEFAULTS.TAG_STYLES}; user-supplied keys win.
 	 * ```js