suneditor 3.2.2 → 3.2.3

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,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

package/types/helper/env.d.ts

@@ -19,6 +19,15 @@ export function getPageStyle(doc: Document | null): string;
  * @returns {string} If not found, return the first found value.
  */
 export function getIncludePath(nameArray: Array<string>, extension: string): string;
+/**
+ * @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(): boolean;
 /** @type {SunEditor.GlobalWindow} */
 export const _w: SunEditor.GlobalWindow;
 /** @type {Document} */
@@ -127,6 +136,7 @@ declare namespace env {
 	export { isAndroid };
 	export { isMobile };
 	export { isTouchDevice };
+	export { canUseBeforeInput };
 	export { cmdIcon };
 	export { shiftIcon };
 	export { DPI };

package/types/helper/index.d.ts

@@ -18,6 +18,7 @@ export const env: {
 	isAndroid: boolean;
 	isMobile: boolean;
 	isTouchDevice: boolean;
+	canUseBeforeInput: typeof import('./env').canUseBeforeInput;
 	cmdIcon: string;
 	shiftIcon: string;
 	DPI: number;

package/types/plugins/field/slashCommand.d.ts

@@ -75,7 +75,23 @@ export type SlashCommandPluginOptions = {
 	 * 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',
@@ -130,7 +146,23 @@ export type SlashCommandPluginOptions = {
  *         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',