suneditor 3.1.4 → 3.2.0

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

@@ -1,5 +1,6 @@
 import { dom, converter, keyCodeMap, env, numbers } from '../../../helper';
 import { _DragHandle } from '../../../modules/ui';
+import BlockHandle from '../panel/blockHandle.js';
 import { COMMAND_BUTTONS } from './commandDispatcher';
 
 const DISABLE_BUTTONS_CODEVIEW = `${COMMAND_BUTTONS}:not([class~="se-code-view-enabled"]):not([data-type="MORE"])`;
@@ -65,6 +66,12 @@ class UIManager {
 	 */
 	#lineBreaker_b = null;
 
+	/**
+	 * @description Block handle instance
+	 * @type {BlockHandle}
+	 */
+	#blockHandle = null;
+
 	/**
 	 * @constructor
 	 * @param {SunEditor.Kernel} kernel
@@ -216,10 +223,17 @@ class UIManager {
 			this.#options.set('textDirection', dir);
 
 			// update _editableClass / printClass
-			const editableClass = rtl ? this.#options.get('_editableClass').replace(/\s*se-rtl/, '') + ' se-rtl' : this.#options.get('_editableClass').replace(/\s*se-rtl/, '');
+			const editableClass = rtl
+				? this.#options.get('_editableClass').replace(/\s*se-rtl/, '') + ' se-rtl'
+				: this.#options.get('_editableClass').replace(/\s*se-rtl/, '');
 			this.#options.set('_editableClass', editableClass);
 			if (this.#options.get('printClass')) {
-				this.#options.set('printClass', rtl ? this.#options.get('printClass').replace(/\s*se-rtl/, '') + ' se-rtl' : this.#options.get('printClass').replace(/\s*se-rtl/, ''));
+				this.#options.set(
+					'printClass',
+					rtl
+						? this.#options.get('printClass').replace(/\s*se-rtl/, '') + ' se-rtl'
+						: this.#options.get('printClass').replace(/\s*se-rtl/, ''),
+				);
 			}
 
 			this.offCurrentController();
@@ -240,7 +254,10 @@ class UIManager {
 				dom.utils.addClass([this.#carrierWrapper, toolbarWrapper, statusbarWrapper], 'se-rtl');
 			} else {
 				this.#contextProvider.applyToRoots((e) => {
-					dom.utils.removeClass([e.get('topArea'), e.get('wysiwyg'), e.get('documentTypePageMirror')], 'se-rtl');
+					dom.utils.removeClass(
+						[e.get('topArea'), e.get('wysiwyg'), e.get('documentTypePageMirror')],
+						'se-rtl',
+					);
 					e.get('wysiwyg').removeAttribute('dir');
 				});
 				dom.utils.removeClass([this.#carrierWrapper, toolbarWrapper, statusbarWrapper], 'se-rtl');
@@ -249,7 +266,10 @@ class UIManager {
 			const lineNodes = dom.query.getListChildren(
 				fc.get('wysiwyg'),
 				(current) => {
-					return this.#$.format.isLine(current) && !!(current.style.marginRight || current.style.marginLeft || current.style.textAlign);
+					return (
+						this.#$.format.isLine(current) &&
+						!!(current.style.marginRight || current.style.marginLeft || current.style.textAlign)
+					);
 				},
 				null,
 			);
@@ -277,16 +297,6 @@ class UIManager {
 				this.#reverseToolbarButtons(this.#context.get('toolbar_sub_buttonTray'));
 			}
 
-			// document type
-			if (fc.has('documentType_use_header')) {
-				if (rtl) fc.get('wrapper').appendChild(fc.get('documentTypeInner'));
-				else fc.get('wrapper').insertBefore(fc.get('documentTypeInner'), fc.get('wysiwygFrame'));
-			}
-			if (fc.has('documentType_use_page')) {
-				if (rtl) fc.get('wrapper').insertBefore(fc.get('documentTypePage'), fc.get('wysiwygFrame'));
-				else fc.get('wrapper').appendChild(fc.get('documentTypePage'));
-			}
-
 			if (this.#store.mode.isBalloon) this.#$.toolbar._showBalloon();
 			else if (this.#store.mode.isSubBalloon) this.#$.subToolbar._showBalloon();
 		} catch (e) {
@@ -397,7 +407,11 @@ class UIManager {
 	 * @param {string} [rootKey] Root key
 	 */
 	showLoading(rootKey) {
-		const el = /** @type {HTMLElement} */ ((rootKey ? this.#frameRoots.get(rootKey).get('container') : this.#carrierWrapper).querySelector('.se-loading-box'));
+		const el = /** @type {HTMLElement} */ (
+			(rootKey ? this.#frameRoots.get(rootKey).get('container') : this.#carrierWrapper).querySelector(
+				'.se-loading-box',
+			)
+		);
 		el.style.display = 'block';
 		el.showPopover?.();
 	}
@@ -407,7 +421,11 @@ class UIManager {
 	 * @param {string} [rootKey] Root key
 	 */
 	hideLoading(rootKey) {
-		const el = /** @type {HTMLElement} */ ((rootKey ? this.#frameRoots.get(rootKey).get('container') : this.#carrierWrapper).querySelector('.se-loading-box'));
+		const el = /** @type {HTMLElement} */ (
+			(rootKey ? this.#frameRoots.get(rootKey).get('container') : this.#carrierWrapper).querySelector(
+				'.se-loading-box',
+			)
+		);
 		el.hidePopover?.();
 		el.style.display = 'none';
 	}
@@ -423,7 +441,8 @@ class UIManager {
 		dom.utils.removeClass(this.alertModal, 'se-alert-error|se-alert-success');
 		if (type) dom.utils.addClass(this.alertModal, `se-alert-${type}`);
 
-		if (this.#closeSignal) this.#bindAlertClick = this.#eventManager.addEvent(this.#alertInner, 'click', this.#closeListener[1]);
+		if (this.#closeSignal)
+			this.#bindAlertClick = this.#eventManager.addEvent(this.#alertInner, 'click', this.#closeListener[1]);
 		this.#bindClose &&= this.#eventManager.removeGlobalEvent(this.#bindClose);
 		this.#bindClose = this.#eventManager.addGlobalEvent('keydown', this.#closeListener[0]);
 
@@ -573,10 +592,31 @@ class UIManager {
 	/**
 	 * @param {SunEditor.FrameContext} rt Root target[key] FrameContext
 	 */
+	/**
+	 * @description Block handle instance for external access.
+	 * @type {BlockHandle}
+	 */
+	get blockHandle() {
+		return this.#blockHandle;
+	}
+
 	reset(rt) {
 		rt.set('_editorHeight', rt.get('wysiwygFrame').offsetHeight);
 		this.#lineBreaker_t = rt.get('lineBreaker_t');
 		this.#lineBreaker_b = rt.get('lineBreaker_b');
+
+		// block handle init
+		const blockHandleOpt = this.#options.get('blockHandle');
+		if (blockHandleOpt && rt.get('blockHandleArea') && !this.#blockHandle) {
+			this.#blockHandle = new BlockHandle(
+				this.#$,
+				rt.get('blockHandleArea'),
+				rt.get('blockHandle'),
+				rt.get('blockHandlePlus'),
+				rt.get('blockHandleDrag'),
+				blockHandleOpt.menu,
+			);
+		}
 	}
 
 	/**
@@ -624,6 +664,9 @@ class UIManager {
 			this.#context.get('toolbar_sub_main').style.left = this.#$.subToolbar.balloonOffset.left - x + 'px';
 		}
 
+		// block handle scroll sync
+		this.#blockHandle?.syncScroll();
+
 		if (this.controllerTargetContext !== this.#frameContext.get('topArea')) {
 			this.offCurrentController();
 		}
@@ -724,7 +767,10 @@ class UIManager {
 
 		// change dir buttons
 		this.#$.commandDispatcher.applyTargets('dir', (e) => {
-			dom.utils.changeTxt(e.querySelector('.se-tooltip-text'), this.#contextProvider.lang[rtl ? 'dir_ltr' : 'dir_rtl']);
+			dom.utils.changeTxt(
+				e.querySelector('.se-tooltip-text'),
+				this.#contextProvider.lang[rtl ? 'dir_ltr' : 'dir_rtl'],
+			);
 			dom.utils.changeElement(e.firstElementChild, icons[rtl ? 'dir_ltr' : 'dir_rtl']);
 		});
 
@@ -758,12 +804,22 @@ class UIManager {
 	_initToggleButtons() {
 		const ctx = this.#context;
 
-		this.#codeViewDisabledButtons = converter.nodeListToArray(ctx.get('toolbar_buttonTray').querySelectorAll(DISABLE_BUTTONS_CODEVIEW));
-		this.#controllerOnDisabledButtons = converter.nodeListToArray(ctx.get('toolbar_buttonTray').querySelectorAll(DISABLE_BUTTONS_CONTROLLER));
+		this.#codeViewDisabledButtons = converter.nodeListToArray(
+			ctx.get('toolbar_buttonTray').querySelectorAll(DISABLE_BUTTONS_CODEVIEW),
+		);
+		this.#controllerOnDisabledButtons = converter.nodeListToArray(
+			ctx.get('toolbar_buttonTray').querySelectorAll(DISABLE_BUTTONS_CONTROLLER),
+		);
 
 		if (this.#options.has('_subMode')) {
-			this.#codeViewDisabledButtons = this.#codeViewDisabledButtons.concat(converter.nodeListToArray(ctx.get('toolbar_sub_buttonTray').querySelectorAll(DISABLE_BUTTONS_CODEVIEW)));
-			this.#controllerOnDisabledButtons = this.#controllerOnDisabledButtons.concat(converter.nodeListToArray(ctx.get('toolbar_sub_buttonTray').querySelectorAll(DISABLE_BUTTONS_CONTROLLER)));
+			this.#codeViewDisabledButtons = this.#codeViewDisabledButtons.concat(
+				converter.nodeListToArray(ctx.get('toolbar_sub_buttonTray').querySelectorAll(DISABLE_BUTTONS_CODEVIEW)),
+			);
+			this.#controllerOnDisabledButtons = this.#controllerOnDisabledButtons.concat(
+				converter.nodeListToArray(
+					ctx.get('toolbar_sub_buttonTray').querySelectorAll(DISABLE_BUTTONS_CONTROLLER),
+				),
+			);
 		}
 	}
 
@@ -790,7 +846,10 @@ class UIManager {
 	 * @returns {boolean}
 	 */
 	isButtonDisabled(button) {
-		if (this.#frameContext.get('isReadOnly') && dom.utils.arrayIncludes(this.#controllerOnDisabledButtons, button)) {
+		if (
+			this.#frameContext.get('isReadOnly') &&
+			dom.utils.arrayIncludes(this.#controllerOnDisabledButtons, button)
+		) {
 			return true;
 		}
 		return false;
@@ -804,20 +863,45 @@ class UIManager {
 	 */
 	_updatePlaceholder(fc) {
 		fc ||= this.#frameContext;
-		const placeholder = fc.get('placeholder');
+		const isCodeView = fc.get('isMarkdownView') || fc.get('isCodeView');
+
+		const lineShown = !isCodeView && this.#updateLinePlaceholder(fc);
 
+		const placeholder = fc.get('placeholder');
 		if (placeholder) {
-			if (fc.get('isCodeView')) {
-				placeholder.style.display = 'none';
-				return;
-			}
+			placeholder.style.display = !isCodeView && !lineShown && this.#$.facade.isEmpty(fc) ? 'block' : 'none';
+		}
+	}
 
-			if (this.#$.facade.isEmpty(fc)) {
-				placeholder.style.display = 'block';
-			} else {
-				placeholder.style.display = 'none';
-			}
+	/**
+	 * @internal
+	 * @description Notion-style per-line placeholder. Marks the focused empty line so a CSS `::before`
+	 * renders the hint text on it.
+	 * @param {SunEditor.FrameContext} fc - Frame context
+	 * @returns {boolean} Whether the line placeholder is currently shown.
+	 */
+	#updateLinePlaceholder(fc) {
+		const text = fc.get('placeholder_line');
+		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;
+
+		// Single-marker invariant: drop the previous marker unless it is still the target line.
+		if (prev && prev !== target) {
+			prev.classList.remove('se-placeholder-line');
+			prev.removeAttribute('data-se-placeholder-line');
+			if (!prev.getAttribute('class')) prev.removeAttribute('class');
 		}
+
+		if (!target) return false;
+
+		target.classList.add('se-placeholder-line');
+		target.setAttribute('data-se-placeholder-line', text);
+		return true;
 	}
 
 	/**
@@ -887,10 +971,17 @@ class UIManager {
 			h === -1
 				? resizeObserverEntry?.borderBoxSize && resizeObserverEntry.borderBoxSize[0]
 					? resizeObserverEntry.borderBoxSize[0].blockSize
-					: resizeObserverEntry.contentRect.height + numbers.get(fc.get('wwComputedStyle').getPropertyValue('padding-left')) + numbers.get(fc.get('wwComputedStyle').getPropertyValue('padding-right'))
+					: resizeObserverEntry.contentRect.height +
+						numbers.get(fc.get('wwComputedStyle').getPropertyValue('padding-left')) +
+						numbers.get(fc.get('wwComputedStyle').getPropertyValue('padding-right'))
 				: h;
 		if (fc.get('_editorHeight') !== h) {
-			this.#eventManager.triggerEvent('onResizeEditor', { height: h, prevHeight: fc.get('_editorHeight'), frameContext: fc, observerEntry: resizeObserverEntry });
+			this.#eventManager.triggerEvent('onResizeEditor', {
+				height: h,
+				prevHeight: fc.get('_editorHeight'),
+				frameContext: fc,
+				observerEntry: resizeObserverEntry,
+			});
 			fc.set('_editorHeight', h);
 		}
 
@@ -901,7 +992,11 @@ class UIManager {
 	}
 
 	init() {
-		this.#closeSignal = !this.#eventManager.addEvent(this.alertModal.querySelector('[data-command="close"]'), 'click', this.alertClose.bind(this));
+		this.#closeSignal = !this.#eventManager.addEvent(
+			this.alertModal.querySelector('[data-command="close"]'),
+			'click',
+			this.alertClose.bind(this),
+		);
 		this._initToggleButtons();
 	}
 
@@ -943,13 +1038,20 @@ class UIManager {
 		this.opendBrowser = null;
 		this.#lineBreaker_t = null;
 		this.#lineBreaker_b = null;
+		this.#blockHandle?.destroy();
+		this.#blockHandle = null;
 		this.#controllerOnDisabledButtons = null;
 		this.#codeViewDisabledButtons = null;
 	}
 }
 
 function CreateAlertHTML({ lang, icons }) {
-	const html = '<div><button class="close" data-command="close" title="' + lang.close + '">' + icons.cancel + '</button></div><div><span></span></div>';
+	const html =
+		'<div><button class="close" data-command="close" title="' +
+		lang.close +
+		'">' +
+		icons.cancel +
+		'</button></div><div><span></span></div>';
 	return dom.utils.createElement('DIV', { class: 'se-alert-content' }, html);
 }
 

package/src/core/schema/frameContext.js

@@ -34,6 +34,7 @@ import { get as getNumber } from '../../helper/numbers';
  * @property {HTMLTextAreaElement} markdown - Markdown view editing element (a <textarea>).
  * @property {HTMLTextAreaElement} markdownNumbers - Element displaying line numbers in markdown view mode.
  * @property {HTMLElement} placeholder - Placeholder element shown when the editor is empty.
+ * @property {string} placeholder_line - Per-line placeholder text, rendered via a `::before` on the focused empty line.
  * @property {HTMLElement} statusbar - Editor status bar element (for resizing, info, etc.).
  * @property {HTMLElement} navigation - Navigation element (e.g., for outline or bookmarks).
  * @property {HTMLElement} charWrapper - Wrapper for the character counter element.
@@ -46,6 +47,10 @@ import { get as getNumber } from '../../helper/numbers';
  * === UI Utilities & Visual Components ===
  * @property {HTMLElement} lineBreaker_t - Top floating line-breaker UI element (for line insertion).
  * @property {HTMLElement} lineBreaker_b - Bottom floating line-breaker UI element (for line insertion).
+ * @property {?HTMLElement} blockHandleArea - Gutter container (`.se-block-handle-area`) holding the per-line block handle. `null` when the `blockHandle` option is disabled.
+ * @property {?HTMLElement} blockHandle - Block handle group (`.se-block-handle`) containing the plus and drag buttons. `null` when disabled.
+ * @property {?HTMLElement} blockHandlePlus - Plus button (`.se-block-handle-plus`) — inserts a new line after the current block. `null` when disabled.
+ * @property {?HTMLElement} blockHandleDrag - Drag button (`.se-block-handle-drag`) — opens the action menu / starts drag-to-reorder. `null` when disabled.
  * @property {HTMLElement} [_stickyDummy] - Placeholder element used for sticky toolbar behavior.
  * @property {HTMLElement} [_toolbarShadow] - Shadow element below the toolbar for visual effects.
  * @property {{main: HTMLElement, border: HTMLElement, display: HTMLElement, handles: HTMLElement[]}} [_figure] - Current active figure component (image, table, etc.).
@@ -91,12 +96,27 @@ import { get as getNumber } from '../../helper/numbers';
  * @param {HTMLElement} wwFrame Editor wysiwyg frame
  * @param {HTMLElement} codeWrapper Editor code view wrapper
  * @param {HTMLElement} codeFrame Editor code view frame
- * @param {{inner: HTMLElement, page: HTMLElement, pageMirror: HTMLElement}} documentTypeInner Document type elements
+ * @param {?HTMLElement} markdownWrapper Editor markdown view wrapper (only present when the markdown view button is enabled)
+ * @param {?HTMLElement} markdownFrame Editor markdown view frame (only present when the markdown view button is enabled)
  * @param {?HTMLElement} statusbar Editor statusbar
+ * @param {{inner: HTMLElement, page: HTMLElement, pageMirror: HTMLElement}} documentTypeInner Document type elements
+ * @param {?HTMLElement} blockHandleArea Block handle gutter (`.se-block-handle-area`). `null` when the `blockHandle` option is disabled.
  * @param {*} key root key
  * @returns {FrameContexType}
  */
-export function CreateFrameContext(editorTarget, top, wwFrame, codeWrapper, codeFrame, markdownWrapper, markdownFrame, statusbar, documentTypeInner, key) {
+export function CreateFrameContext(
+	editorTarget,
+	top,
+	wwFrame,
+	codeWrapper,
+	codeFrame,
+	markdownWrapper,
+	markdownFrame,
+	statusbar,
+	documentTypeInner,
+	blockHandleArea,
+	key,
+) {
 	const m = /** @type {FrameContexType} */ (
 		new Map([
 			['key', key],
@@ -114,10 +134,18 @@ export function CreateFrameContext(editorTarget, top, wwFrame, codeWrapper, code
 			// markdown
 			['markdownWrapper', markdownWrapper],
 			['markdown', markdownFrame],
-			['markdownNumbers', /** @type {HTMLTextAreaElement} */ (markdownWrapper?.querySelector('.se-markdown-view-line'))],
+			[
+				'markdownNumbers',
+				/** @type {HTMLTextAreaElement} */ (markdownWrapper?.querySelector('.se-markdown-view-line')),
+			],
 			// linebreak, toolbar internal
 			['lineBreaker_t', top.querySelector('.se-line-breaker-component-t')],
 			['lineBreaker_b', top.querySelector('.se-line-breaker-component-b')],
+			// block handle
+			['blockHandleArea', blockHandleArea],
+			['blockHandle', blockHandleArea?.querySelector('.se-block-handle') || null],
+			['blockHandlePlus', blockHandleArea?.querySelector('.se-block-handle-plus') || null],
+			['blockHandleDrag', blockHandleArea?.querySelector('.se-block-handle-drag') || null],
 			['_stickyDummy', top.querySelector('.se-toolbar-sticky-dummy')],
 			['_toolbarShadow', top.querySelector('.se-toolbar-shadow')],
 			['_minHeight', getNumber(wwFrame.style.minHeight || '65', 0)],
@@ -157,6 +185,9 @@ export function CreateFrameContext(editorTarget, top, wwFrame, codeWrapper, code
 	const placeholder = top.querySelector('.se-placeholder');
 	if (placeholder) m.set('placeholder', placeholder);
 
+	const placeholderLine = editorTarget.options.get('placeholder_line');
+	if (placeholderLine) m.set('placeholder_line', placeholderLine);
+
 	return m;
 }
 

package/src/core/schema/options.js

@@ -39,7 +39,8 @@ export const DEFAULTS = {
 	FORMAT_BLOCK: 'BLOCKQUOTE|OL|UL|FIGCAPTION|TABLE|THEAD|TBODY|TR|CAPTION|DETAILS',
 	FORMAT_CLOSURE_BLOCK: 'TH|TD',
 
-	ALLOWED_EMPTY_NODE_LIST: '.se-component, pre, blockquote, hr, li, table, img, iframe, video, audio, canvas, details',
+	ALLOWED_EMPTY_NODE_LIST:
+		'.se-component, pre, blockquote, hr, li, table, img, iframe, video, audio, canvas, details',
 
 	SIZE_UNITS: ['px', 'pt', 'em', 'rem'],
 
@@ -69,7 +70,8 @@ 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',
-		'table|th|td': 'border|border-[a-z]+|color|background-color|text-align|float|font-weight|text-decoration|font-style|vertical-align',
+		'table|th|td':
+			'border|border-[a-z]+|color|background-color|text-align|float|font-weight|text-decoration|font-style|vertical-align',
 		'table|td': 'width',
 		tr: 'height',
 		col: 'width',
@@ -77,7 +79,8 @@ export const DEFAULTS = {
 		'ol|ul': 'list-style-type',
 		figure: 'display|width|height|padding|padding-bottom',
 		figcaption: 'margin|margin-top|margin-bottom|text-align',
-		'img|video|iframe': 'transform|transform-origin|width|min-width|max-width|height|min-height|max-height|float|margin|margin-top',
+		'img|video|iframe':
+			'transform|transform-origin|width|min-width|max-width|height|min-height|max-height|float|margin|margin-top',
 		hr: '',
 	},
 
@@ -99,7 +102,9 @@ export const DEFAULTS = {
  *
  * === Content & Editing ===
  * @property {string} [value=""] - Initial value for the editor.
- * @property {string} [placeholder=""] - Placeholder text.
+ * @property {string} [placeholder=""] - Placeholder text shown when the whole editor is empty.
+ * @property {string} [placeholder_line=""] - per-line placeholder shown on the focused
+ * line when that line is empty. Takes priority over `placeholder` while a line is focused.
  * @property {Object<string, string>} [editableFrameAttributes={spellcheck: "false"}] - Attributes for the editable frame[.sun-editor-editable].
  * ```js
  * { editableFrameAttributes: { spellcheck: 'true', autocomplete: 'on' } }
@@ -110,6 +115,13 @@ export const DEFAULTS = {
  * @property {string|number} [width="100%"] - Width for the editor.
  * @property {string|number} [minWidth=""] - Min width for the editor.
  * @property {string|number} [maxWidth=""] - Max width for the editor.
+ * @property {string} [innerWidth=""] - Optional max-width for the editor body (`.se-wrapper`).
+ * - **CSS length** (`"740px"`, `"60ch"`): editor body's content is clamped to this width and centered horizontally; scroll container stays full width (scrollbar at the outer edge, wheel/touch active over the whole area).
+ * - **`"auto"`** or **empty string** (default): no constraint — natural full-width layout with default content padding.
+ * - In `blockHandle` mode, the gutter handle tracks the centered text band.
+ * ```js
+ * { innerWidth: '740px' }
+ * ```
  * @property {string|number} [height="auto"] - Height for the editor.
  * @property {string|number} [minHeight=""] - Min height for the editor.
  * @property {string|number} [maxHeight=""] - Max height for the editor.
@@ -287,6 +299,22 @@ export const DEFAULTS = {
  * === Modes & Themes ===
  * @property {boolean} [v2Migration=false] - Enables migration mode for SunEditor v2.
  * @property {"classic"|"inline"|"balloon"|"balloon-always"|"classic:bottom"|"inline:bottom"} [mode="classic"] - Toolbar mode: `classic`, `inline`, `balloon`, `balloon-always`. Append `:bottom` to place toolbar at the bottom (e.g. `classic:bottom`, `inline:bottom`).
+ * @property {Object} [blockHandle] - Block handle configuration. When provided, a per-line block handle UI is shown. Works independently of `mode`.
+ * @property {Array<string | { title: string, icon?: string, action: (deps: SunEditor.Deps, ctx: { block: HTMLElement }) => void }>} [blockHandle.menu] - Menu entries.
+ * - **String entries** — resolved via `ResolveButton`. Accepts the same values as toolbar `buttonList`:
+ *   - **Block format keys**: `p`, `h1`-`h6`, `heading` (H1-H6 submenu), `ul`, `ol`, `list` (UL/OL submenu), `blockquote`, `pre`.
+ *   - **Plugin names**: Any registered plugin name (e.g. `blockStyle`, `align`, `image`, `link`). Dropdown plugins display their items as a submenu. Modal plugins open the modal on click.
+ *   - **Built-in commands**: `bold`, `italic`, `underline`, `strike`, `undo`, `redo`, etc.
+ * - **Custom item objects** — `{ title, icon?, action }`. `icon` is an icon key from `$.icons` or a raw `<svg>` HTML string; `action` is invoked with `($, { block })`.
+ * - Defaults to `['p', 'heading', 'list', 'blockquote', 'pre']`.
+ * ```js
+ * blockHandle: {
+ *   menu: [
+ *     'p', 'heading', 'blockStyle',
+ *     { title: 'Duplicate', icon: 'copy', action: ($, { block }) => block.after(block.cloneNode(true)) },
+ *   ],
+ * }
+ * ```
  * @property {string} [type=""] - Editor type. Use `"document"` for a document-style layout, with optional sub-types after `:`.
  * ```js
  * // type
@@ -470,6 +498,15 @@ export const DEFAULTS = {
  * @property {boolean} [syncTabIndent=true] - Synchronizes tab indent with spaces.
  * @property {boolean} [tabDisable=false] - Disables tab key input.
  * @property {string} [toolbar_width="auto"] - Toolbar width.
+ * @property {string} [toolbar_innerWidth=""] - Center the toolbar's button row (`.se-btn-tray`) horizontally.
+ * - **CSS length** (e.g. `"500px"`, `"740px"`, `"60ch"`): toolbar background spans full width while the button row is capped at that width and centered. If buttons fit, the row stays on a single line; if they exceed the cap, they wrap inside it.
+ * - **`"auto"`**: no cap — the row is sized to its content and simply centered.
+ * - **Empty string** (default): no constraint.
+ * - **Note on `responsiveButtonList`**: thresholds compare against the toolbar's full width, not the band. When this option is set, calibrate `responsiveButtonList` keys around the toolbar size you actually want each button set to kick in at.
+ * ```js
+ * { toolbar_innerWidth: '740px' }
+ * { toolbar_innerWidth: 'auto' }
+ * ```
  * @property {?HTMLElement} [toolbar_container] - Container element for the toolbar.
  * @property {number|{top: number, offset: number}} [toolbar_sticky=0] - Enables sticky toolbar.
  * - `number`: Sets the sticky top position (px). Use `-1` to disable sticky.
@@ -604,6 +641,7 @@ export const DEFAULTS = {
  * @property {import('../../plugins/modal/link.js').LinkPluginOptions} [link]
  * @property {import('../../plugins/modal/math.js').MathPluginOptions} [math]
  * @property {import('../../plugins/dropdown/paragraphStyle.js').ParagraphStylePluginOptions} [paragraphStyle]
+ * @property {import('../../plugins/field/slashCommand.js').SlashCommandPluginOptions} [slashCommand]
  * @property {import('../../plugins/dropdown/table/index.js').TablePluginOptions} [table]
  * @property {import('../../plugins/dropdown/template.js').TemplatePluginOptions} [template]
  * @property {import('../../plugins/dropdown/textStyle.js').TextStylePluginOptions} [textStyle]
@@ -671,10 +709,12 @@ export const DEFAULTS = {
 export const OPTION_FRAME_FIXED_FLAG = {
 	value: 'fixed',
 	placeholder: true,
+	placeholder_line: true,
 	editableFrameAttributes: true,
 	width: true,
 	minWidth: true,
 	maxWidth: true,
+	innerWidth: 'fixed',
 	height: true,
 	minHeight: true,
 	maxHeight: true,
@@ -706,6 +746,7 @@ export const OPTION_FIXED_FLAG = {
 	v2Migration: 'fixed',
 	strictMode: 'fixed',
 	mode: 'fixed',
+	blockHandle: 'fixed',
 	type: 'fixed',
 	theme: true,
 	lang: 'fixed',
@@ -752,6 +793,7 @@ export const OPTION_FIXED_FLAG = {
 	formatClosureBlock: 'fixed',
 	allowedEmptyTags: true,
 	toolbar_width: true,
+	toolbar_innerWidth: 'fixed',
 	toolbar_container: 'fixed',
 	toolbar_sticky: true,
 	toolbar_hide: true,