suneditor 3.2.1 → 3.2.3

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;
 }
@@ -119,6 +119,30 @@ class BlockHandle {
 		em.addEvent(this.#$.frameContext.get('eventWysiwyg'), 'keydown', this.#onWrapperKeyDown.bind(this), true);
 	}
 
+	/**
+	 * @description Show the handle.
+	 */
+	#showHandle() {
+		this.#handle.style.display = 'flex';
+		try {
+			this.#handle.showPopover?.();
+		} catch {
+			// already open
+		}
+	}
+
+	/**
+	 * @description Hide the handle and drop it out of the top layer.
+	 */
+	#hideHandle() {
+		try {
+			this.#handle.hidePopover?.();
+		} catch {
+			// already hidden
+		}
+		this.#handle.style.display = 'none';
+	}
+
 	/**
 	 * @description Position the block handle for the given mouse target. Uses rAF throttle.
 	 * Called from wysiwyg mousemove.
@@ -156,7 +180,7 @@ class BlockHandle {
 	 */
 	hideNow() {
 		this.#cancelHide();
-		this.#handle.style.display = 'none';
+		this.#hideHandle();
 		this.#actionMenu?.close();
 		this.#setCurrentBlock(null);
 	}
@@ -267,7 +291,7 @@ class BlockHandle {
 		if (this.#hideTimer) return;
 		this.#hideTimer = _w.setTimeout(() => {
 			this.#hideTimer = null;
-			this.#handle.style.display = 'none';
+			this.#hideHandle();
 			this.#actionMenu?.close();
 			this.#setCurrentBlock(null);
 		}, 200);
@@ -323,11 +347,8 @@ class BlockHandle {
 	 */
 	#onAreaMouseLeave(e) {
 		if (this.#actionMenu?.isOpen) return;
-
-		const related = /** @type {Node} */ (e?.relatedTarget);
-		if (related && this.#handle?.contains(related)) return;
-
-		this.#scheduleHide();
+		if (this.#stayAlive(/** @type {Node} */ (e?.relatedTarget))) return;
+		this.hideNow();
 	}
 
 	/**
@@ -335,11 +356,19 @@ class BlockHandle {
 	 */
 	#onWrapperMouseLeave(e) {
 		if (this.#actionMenu?.isOpen) return;
-		const related = /** @type {Node} */ (e?.relatedTarget);
-		if (related && this.#handle?.contains(related)) return;
-		this.#cancelHide();
-		this.#handle.style.display = 'none';
-		this.#setCurrentBlock(null);
+		if (this.#stayAlive(/** @type {Node} */ (e?.relatedTarget))) return;
+		this.hideNow();
+	}
+
+	/**
+	 * @description Whether a mouseleave's `relatedTarget` is still within the editor interaction zone
+	 * @param {Node|null} related - `relatedTarget` of the mouseleave event
+	 * @returns {boolean}
+	 */
+	#stayAlive(related) {
+		if (!related) return false;
+		const wrapper = this.#area?.parentElement;
+		return !!(this.#handle?.contains(related) || wrapper?.contains(related));
 	}
 
 	/**
@@ -412,13 +441,13 @@ class BlockHandle {
 		if (isIframe) {
 			const iframeH = wysiwygFrameEl.clientHeight || 0;
 			if (blockRect.bottom <= 0 || blockRect.top >= iframeH) {
-				this.#handle.style.display = 'none';
+				this.#hideHandle();
 				return;
 			}
 		} else {
 			const wwFrameRect = wysiwygFrameEl.getBoundingClientRect();
 			if (blockRect.bottom <= wwFrameRect.top || blockRect.top >= wwFrameRect.bottom) {
-				this.#handle.style.display = 'none';
+				this.#hideHandle();
 				return;
 			}
 		}
@@ -426,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');
@@ -440,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);
 			}
@@ -448,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 = '';
@@ -460,7 +494,7 @@ class BlockHandle {
 			this.#handle.style.right = '';
 			this.#handle.style.left = areaRect.left + scrollX + totalOffset + 'px';
 		}
-		this.#handle.style.display = 'flex';
+		this.#showHandle();
 
 		if (wasHidden) {
 			void this.#handle.offsetHeight;
@@ -468,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
@@ -483,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

@@ -888,7 +888,8 @@ class UIManager {
 		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) {
@@ -1047,7 +1048,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',
@@ -299,7 +314,7 @@ function Constructor(editorTargets, options) {
 		if (isBlockHandle) {
 			blockHandleArea = dom.utils.createElement('DIV', { class: 'se-block-handle-area' });
 
-			const blockHandleGroup = dom.utils.createElement('DIV', { class: 'se-block-handle' });
+			const blockHandleGroup = dom.utils.createElement('DIV', { class: 'se-block-handle', popover: 'manual' });
 			const blockHandlePlus = dom.utils.createElement(
 				'DIV',
 				{ class: 'se-block-handle-btn se-block-handle-plus' },

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,11 +37,13 @@ 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 enterLineAddDefault(formatEl: 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,6 +39,8 @@ 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;
@@ -61,6 +65,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.

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

@@ -174,8 +174,10 @@ export function makePorts(
 	enterScrollTo(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;

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