suneditor 3.0.0-rc.4 → 3.0.0

package/types/core/config/eventManager.d.ts

@@ -21,18 +21,16 @@ declare class EventManager {
 	 * @type {(eventName: string, ...args: *) => Promise<*>}
 	 */
 	triggerEvent: (eventName: string, ...args: any) => Promise<any>;
-	/** @type {HTMLInputElement} */
-	__focusTemp: HTMLInputElement;
 	/**
 	 * @description Register for an event.
 	 * - Only events registered with this method are unregistered or re-registered when methods such as 'setOptions', 'destroy' are called.
 	 * @param {*} target Target element
 	 * @param {string} type Event type
-	 * @param {EventListenerOrEventListenerObject} listener Event handler
+	 * @param {*} listener Event handler
 	 * @param {boolean|AddEventListenerOptions} [useCapture] Event useCapture option
 	 * @return {?SunEditor.Event.Info} Registered event information
 	 */
-	addEvent(target: any, type: string, listener: EventListenerOrEventListenerObject, useCapture?: boolean | AddEventListenerOptions): SunEditor.Event.Info | null;
+	addEvent(target: any, type: string, listener: any, useCapture?: boolean | AddEventListenerOptions): SunEditor.Event.Info | null;
 	/**
 	 * @description Remove event
 	 * @param {SunEditor.Event.Info} params event info = this.addEvent()
@@ -43,20 +41,20 @@ declare class EventManager {
 	 * @description Add an event to document.
 	 * - When created as an Iframe, the same event is added to the document in the Iframe.
 	 * @param {string} type Event type
-	 * @param {(...args: *) => *} listener Event listener
+	 * @param {*} listener Event listener
 	 * @param {boolean|AddEventListenerOptions} [useCapture] Use event capture
 	 * @return {SunEditor.Event.GlobalInfo} Registered event information
 	 */
-	addGlobalEvent(type: string, listener: (...args: any) => any, useCapture?: boolean | AddEventListenerOptions): SunEditor.Event.GlobalInfo;
+	addGlobalEvent(type: string, listener: any, useCapture?: boolean | AddEventListenerOptions): SunEditor.Event.GlobalInfo;
 	/**
 	 * @description Remove events from document.
 	 * - When created as an Iframe, the event of the document inside the Iframe is also removed.
 	 * @param {string|SunEditor.Event.GlobalInfo} type Event type or (Event info = this.addGlobalEvent())
-	 * @param {(...args: *) => *} [listener] Event listener
+	 * @param {*} [listener] Event listener
 	 * @param {boolean|AddEventListenerOptions} [useCapture] Use event capture
 	 * @returns {undefined|null} Success: `null`, Not found: `undefined`
 	 */
-	removeGlobalEvent(type: string | SunEditor.Event.GlobalInfo, listener?: (...args: any) => any, useCapture?: boolean | AddEventListenerOptions): undefined | null;
+	removeGlobalEvent(type: string | SunEditor.Event.GlobalInfo, listener?: any, useCapture?: boolean | AddEventListenerOptions): undefined | null;
 	/**
 	 * @internal
 	 * @description Gives an active effect when the mouse down event is blocked. (Used when "env.isGecko" is `true`)

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

@@ -15,6 +15,7 @@ export namespace A {
 	function selectComponentFallback(cmponentInfo: SunEditor.ComponentInfo): Action;
 	function delFormatRemoveAndMove(container: Node, formatEl: Element): Action;
 	function backspaceFormatMaintain(formatEl: Element): Action;
+	function backspaceBrLineStrip(formatEl: Element): Action;
 	function backspaceComponentSelect(selectionNode: Node, range: Range, fileComponentInfo: SunEditor.ComponentInfo): Action;
 	function backspaceComponentRemove(isList: boolean, sel: Node, formatEl: Element, fileComponentInfo: SunEditor.ComponentInfo): Action;
 	function backspaceListMergePrev(prev: Element, formatEl: Element, rangeEl: Element): Action;

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

@@ -4,6 +4,8 @@ declare const _default: {
 	/** @action delFormatRemoveAndMove */
 	'del.format.removeAndMove': ({ ports }: EffectContext_keydown, { container, formatEl }: any) => void;
 	/** [backspace]  */
+	/** @action backspaceBrLineStrip — extract first line from brLine (PRE) */
+	'backspace.brline.strip': ({ ctx, ports }: EffectContext_keydown, { formatEl }: any) => void;
 	/** @action backspaceFormatMaintain */
 	'backspace.format.maintain': ({ ctx }: EffectContext_keydown, { formatEl }: any) => void;
 	/** @action backspaceComponentSelect */

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

@@ -51,6 +51,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.
@@ -122,7 +124,6 @@ declare class EventOrchestrator extends KernelInjector {
 	 * - Disconnects observers and clears stored event references.
 	 */
 	_removeAllEvents(): void;
-	__focusTemp: any;
 	/**
 	 * @internal
 	 * @description Synchronizes the selection state by resetting it on `mouseup`.

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

@@ -136,6 +136,10 @@ export type Deps = {
 	 * - L3: View mode handler
 	 */
 	viewer: import('../logic/panel/viewer').default;
+	/**
+	 * - L3: Finder handler
+	 */
+	finder: import('../logic/panel/finder').default;
 };
 /**
  * @typedef {import('../section/constructor').ConstructorReturnType} ProductType
@@ -180,6 +184,7 @@ export type Deps = {
  * @property {import('../logic/panel/toolbar').default} subToolbar - L3: Sub-toolbar renderer
  * @property {import('../logic/panel/menu').default} menu - L3: Menu renderer
  * @property {import('../logic/panel/viewer').default} viewer - L3: View mode handler
+ * @property {import('../logic/panel/finder').default} finder - L3: Finder handler
  */
 /**
  * @description Core dependency container for the editor.

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

@@ -94,6 +94,10 @@ export type StoreMode = {
 	 * - Whether the sub-toolbar is in `balloon-always` mode.
 	 */
 	isSubBalloonAlways: boolean;
+	/**
+	 * - Whether the toolbar is placed at the bottom of the editor (`classic:bottom`, `inline:bottom`).
+	 */
+	isBottom: boolean;
 };
 /**
  * @typedef {Object} StoreState
@@ -122,6 +126,7 @@ export type StoreMode = {
  * @property {boolean} isBalloonAlways - Whether the toolbar is in `balloon-always` mode (always visible as floating).
  * @property {boolean} isSubBalloon - Whether the sub-toolbar is in `balloon` mode.
  * @property {boolean} isSubBalloonAlways - Whether the sub-toolbar is in `balloon-always` mode.
+ * @property {boolean} isBottom - Whether the toolbar is placed at the bottom of the editor (`classic:bottom`, `inline:bottom`).
  */
 /**
  * @description Central runtime state management for the editor.

package/types/core/logic/dom/char.d.ts

@@ -13,6 +13,8 @@ declare class Char {
 	 * @description Returns `false` if char count is greater than "frameOptions.get('charCounter_max')" when "html" is added to the current editor.
 	 * @param {Node|string} html Element node or String.
 	 * @returns {boolean}
+	 * @example
+	 * const canInsert = editor.$.char.check('<strong>new text</strong>');
 	 */
 	check(html: Node | string): boolean;
 	/**
@@ -20,12 +22,17 @@ declare class Char {
 	 * - If [content] is `undefined`, get the current editor's number of characters or binary data size.
 	 * @param {string} [content] Content to count. (defalut: this.#frameContext.get('wysiwyg'))
 	 * @returns {number}
+	 * @example
+	 * const currentLength = editor.$.char.getLength();
+	 * const textLength = editor.$.char.getLength('Hello World');
 	 */
 	getLength(content?: string): number;
 	/**
 	 * @descriptionGets Get the length in bytes of a string.
 	 * @param {string} text String text
 	 * @returns {number}
+	 * @example
+	 * const bytes = editor.$.char.getByteLength('Hello 世界'); // 12
 	 */
 	getByteLength(text: string): number;
 	/**
@@ -40,6 +47,10 @@ declare class Char {
 	 * @param {string} inputText Text added.
 	 * @param {boolean} _fromInputEvent Whether the test is triggered from an input event.
 	 * @returns {boolean}
+	 * @example
+	 * if (!editor.$.char.test(inputData, true)) {
+	 *   e.preventDefault();
+	 * }
 	 */
 	test(inputText: string, _fromInputEvent: boolean): boolean;
 	#private;

package/types/core/logic/dom/format.d.ts

@@ -27,11 +27,16 @@ declare class Format {
 	 * @param {Node} node Reference node.
 	 * @param {?(current: Node) => boolean} [validation] Additional validation function.
 	 * @returns {HTMLElement|null}
+	 * @example
+	 * const line = editor.$.format.getLine(editor.$.selection.getNode());
+	 * const lineWithFilter = editor.$.format.getLine(node, (el) => el.nodeName !== 'LI');
 	 */
 	getLine(node: Node, validation?: ((current: Node) => boolean) | null): HTMLElement | null;
 	/**
 	 * @description Replace the br-line tag of the current selection.
 	 * @param {Node} element BR-Line element (PRE..)
+	 * @example
+	 * editor.$.format.setBrLine(document.createElement('pre'));
 	 */
 	setBrLine(element: Node): void;
 	/**
@@ -39,6 +44,8 @@ declare class Format {
 	 * @param {Node} element Reference node.
 	 * @param {?(current: Node) => boolean} [validation] Additional validation function.
 	 * @returns {HTMLBRElement|null}
+	 * @example
+	 * const brLine = editor.$.format.getBrLine(editor.$.selection.getNode());
 	 */
 	getBrLine(element: Node, validation?: ((current: Node) => boolean) | null): HTMLBRElement | null;
 	/**
@@ -55,6 +62,8 @@ declare class Format {
 	 * @param {Node} element Reference node.
 	 * @param {?(current: Node) => boolean} [validation] Additional validation function.
 	 * @returns {HTMLElement|null}
+	 * @example
+	 * const block = editor.$.format.getBlock(editor.$.selection.getNode());
 	 */
 	getBlock(element: Node, validation?: ((current: Node) => boolean) | null): HTMLElement | null;
 	/**
@@ -140,6 +149,9 @@ declare class Format {
 	 * @description It is judged whether it is a node related to the text style.
 	 * @param {Node|string} element The node to check
 	 * @returns {element is HTMLElement}
+	 * @example
+	 * editor.$.format.isTextStyleNode('STRONG'); // true
+	 * editor.$.format.isTextStyleNode('P'); // false
 	 */
 	isTextStyleNode(element: Node | string): element is HTMLElement;
 	/**
@@ -148,6 +160,9 @@ declare class Format {
 	 * - `line` element also contain `brLine` element
 	 * @param {Node|string} element The node to check
 	 * @returns {element is HTMLElement}
+	 * @example
+	 * editor.$.format.isLine(document.createElement('p')); // true
+	 * editor.$.format.isLine('SPAN'); // false
 	 */
 	isLine(element: Node | string): element is HTMLElement;
 	/**
@@ -164,6 +179,8 @@ declare class Format {
 	 * ※ Entering the Enter key in the space on the last line ends `brLine` and appends `line`.
 	 * @param {Node|string} element The node to check
 	 * @returns {element is HTMLElement}
+	 * @example
+	 * editor.$.format.isBrLine(document.createElement('pre')); // true
 	 */
 	isBrLine(element: Node | string): element is HTMLElement;
 	/**
@@ -172,6 +189,9 @@ declare class Format {
 	 * - `block` is wrap the `line` and `component`
 	 * @param {Node|string} element The node to check
 	 * @returns {element is HTMLElement}
+	 * @example
+	 * editor.$.format.isBlock(document.createElement('blockquote')); // true
+	 * editor.$.format.isBlock(document.createElement('ul')); // true
 	 */
 	isBlock(element: Node | string): element is HTMLElement;
 	/**
@@ -200,6 +220,8 @@ declare class Format {
 	 * @description Returns a `line` array from selected range.
 	 * @param {?(current: Node) => boolean} [validation] The validation function. (Replaces the default validation `format.isLine(current)`)
 	 * @returns {Array<HTMLElement>}
+	 * @example
+	 * const selectedLines = editor.$.format.getLines();
 	 */
 	getLines(validation?: ((current: Node) => boolean) | null): Array<HTMLElement>;
 	/**

package/types/core/logic/dom/html.d.ts

@@ -181,6 +181,9 @@ declare class HTML {
 	 * @param {boolean} [options.includeFullPage=false] Return only the content of the body without headers when the `iframe_fullPage` option is `true`
 	 * @param {number|Array<number>} [options.rootKey=null] Root index
 	 * @returns {string|Object<*, string>}
+	 * @example
+	 * const html = editor.$.html.get();
+	 * const htmlWithFrame = editor.$.html.get({ withFrame: true });
 	 */
 	get({ withFrame, includeFullPage, rootKey }?: { withFrame?: boolean; includeFullPage?: boolean; rootKey?: number | Array<number> }): string | any;
 	/**
@@ -188,6 +191,9 @@ declare class HTML {
 	 * @param {string} html HTML string
 	 * @param {Object} [options] Options
 	 * @param {number|Array<number>} [options.rootKey=null] Root index
+	 * @example
+	 * editor.$.html.set('<p>New content</p>');
+	 * editor.$.html.set(html, { rootKey: 'header' });
 	 */
 	set(
 		html: string,
@@ -217,15 +223,25 @@ declare class HTML {
 	 * @param {boolean} [options.withFrame=false] Gets the current content with containing parent `div.sun-editor-editable` (`<div class="sun-editor-editable">{content}</div>`).
 	 * @param {number|Array<number>} [options.rootKey=null] Root index
 	 * @returns {Object<string, *>} JSON data
+	 * @example
+	 * const json = editor.$.html.getJson();
+	 * const jsonWithFrame = editor.$.html.getJson({ withFrame: true });
 	 */
 	getJson({ withFrame, rootKey }?: { withFrame?: boolean; rootKey?: number | Array<number> }): {
 		[x: string]: any;
 	};
 	/**
 	 * @description Sets the JSON data to the editor content
+	 * (see @link converter.jsonToHtml)
 	 * @param {Object<string, *>} jsdonData HTML string
 	 * @param {Object} [options] Options
 	 * @param {number|Array<number>} [options.rootKey=null] Root index
+	 * @example
+	 * const html = editor.$.html.setJson({
+	 *   type: 'element', tag: 'p', attributes: { class: 'txt' },
+	 *   children: [{ type: 'text', content: 'Hello' }],
+	 * });
+	 * // '<p class="txt">Hello</p>'
 	 */
 	setJson(
 		jsdonData: {

package/types/core/logic/dom/nodeTransform.d.ts

@@ -55,6 +55,8 @@ declare class NodeTransform {
 	 * @description Remove nested tags without other child nodes.
 	 * @param {Node} element Element object
 	 * @param {?(((current: Node) => boolean)|string)} [validation] Validation function / String(`tag1|tag2..`) / If `null`, all tags are applicable.
+	 * @example
+	 * editor.$.nodeTransform.mergeNestedTags(parentElement, (current) => current.nodeName === 'SPAN');
 	 */
 	mergeNestedTags(element: Node, validation?: (((current: Node) => boolean) | string) | null): void;
 	/**
@@ -98,6 +100,17 @@ declare class NodeTransform {
 	 * @param {SunEditor.NodeCollection} nodeArray An array of nodes to clone. The first node in the array will be the top-level parent.
 	 * @param {?(current: Node) => boolean} [validate] A validate function.
 	 * @returns {{ parent: Node, inner: Node }} An object containing the top-level parent node and the innermost child node.
+	 * @example
+	 * // [div, span, em] → <div><span><em></em></span></div> (cloned)
+	 * const { parent, inner } = editor.$.nodeTransform.createNestedNode([div, span, em]);
+	 * // parent = div (top), inner = em (innermost)
+	 *
+	 * // validate: skip nodes that fail the condition
+	 * const { parent, inner } = editor.$.nodeTransform.createNestedNode(
+	 *   [div, span, em],
+	 *   (node) => node.nodeName !== 'SPAN'
+	 * );
+	 * // Result: <div><em></em></div> (SPAN excluded)
 	 */
 	createNestedNode(
 		nodeArray: SunEditor.NodeCollection,

package/types/core/logic/dom/offset.d.ts

@@ -262,6 +262,7 @@ declare class Offset {
 	 */
 	getGlobal(node?: Node | null): OffsetGlobalInfo;
 	/**
+	 * @deprecated
 	 * @description Gets the current editor-relative scroll offset.
 	 * @param {?Node} [node] Target element.
 	 * @returns {OffsetGlobalScrollInfo} Global scroll information.
@@ -278,19 +279,35 @@ declare class Offset {
 	 * @param {HTMLElement} e_container Element's root container
 	 * @param {HTMLElement} target Target element to position against
 	 * @param {HTMLElement} t_container Target's root container
+	 * @param {Object} [opts] Options
+	 * @param {boolean} [opts.preferUp=false] Open upward by default (for bottom toolbar)
 	 */
-	setRelPosition(element: HTMLElement, e_container: HTMLElement, target: HTMLElement, t_container: HTMLElement): void;
+	setRelPosition(
+		element: HTMLElement,
+		e_container: HTMLElement,
+		target: HTMLElement,
+		t_container: HTMLElement,
+		{
+			preferUp,
+		}?: {
+			preferUp?: boolean;
+		},
+	): void;
 	/**
 	 * @description Sets the absolute position of an element
 	 * @param {HTMLElement} element Element to position
 	 * @param {HTMLElement} target Target element
 	 * @param {Object} params Position parameters
 	 * @param {boolean} [params.isWWTarget=false] Whether the target is within the editor's WYSIWYG area
-	 * @param {{left:number, top:number}} [params.addOffset={left:0, top:0}] Additional offset
+	 * @param {{left:number, right:number, top:number}} [params.addOffset={left:0, right:0, top:0}] Additional offset
 	 * @param {"bottom"|"top"} [params.position="bottom"] Position ('bottom'|'top')
 	 * @param {*} params.inst Instance object of caller
 	 * @param {HTMLElement} [params.sibling=null] The sibling controller element
 	 * @returns {{position: "top" | "bottom"} | undefined} Success -> {position: current position}
+	 * @example
+	 * const result = editor.$.offset.setAbsPosition(controller, targetElement, {
+	 *   position: 'bottom', inst: this, addOffset: { left: 0, right: 0, top: 0 }
+	 * });
 	 */
 	setAbsPosition(
 		element: HTMLElement,
@@ -299,6 +316,7 @@ declare class Offset {
 			isWWTarget?: boolean;
 			addOffset?: {
 				left: number;
+				right: number;
 				top: number;
 			};
 			position?: 'bottom' | 'top';
@@ -319,6 +337,9 @@ declare class Offset {
 	 * @param {"bottom"|"top"} [options.position="bottom"] Position ('bottom'|'top')
 	 * @param {number} [options.addTop=0] Additional top offset
 	 * @returns {boolean} Success / Failure
+	 * @example
+	 * const success = editor.$.offset.setRangePosition(toolbar, null, { position: 'bottom', addTop: 0 });
+	 * if (!success) toolbar.style.display = 'none';
 	 */
 	setRangePosition(
 		element: HTMLElement,

package/types/core/logic/dom/selection.d.ts

@@ -62,6 +62,9 @@ declare class Selection_ {
 	 * - If there is no next sibling but a previous sibling exists, it returns the previous sibling with an offset of 1.
 	 * @param {Node} target Target node whose neighboring range is to be determined.
 	 * @returns {{container: Node, offset: number}|null} An object containing the nearest container node and its offset.
+	 * @example
+	 * const nearRange = editor.$.selection.getNearRange(targetNode);
+	 * if (nearRange) editor.$.selection.setRange(nearRange.container, nearRange.offset, nearRange.container, nearRange.offset);
 	 */
 	getNearRange(target: Node): {
 		container: Node;
@@ -77,6 +80,9 @@ declare class Selection_ {
 	/**
 	 * @description Get current select node
 	 * @returns {HTMLElement|Text}
+	 * @example
+	 * const node = editor.$.selection.getNode();
+	 * const line = editor.$.format.getLine(node);
 	 */
 	getNode(): HTMLElement | Text;
 	/**
@@ -121,7 +127,7 @@ declare class Selection_ {
 	/**
 	 * @description Scroll to the corresponding selection or range position.
 	 * @param {Selection|Range|Node} ref selection or range object
-	 * @param {Object<string, *>} [scrollOption] option of scrollTo
+	 * @param {ScrollIntoViewOptions & {noFocus?: boolean}} [scrollOption] Scroll options. Extends `ScrollIntoViewOptions` (`behavior`, `block`, `inline`) with `noFocus` to prevent focus change.
 	 * @example
 	 * // Scroll to current selection smoothly
 	 * editor.selection.scrollTo(editor.selection.get());
@@ -138,8 +144,8 @@ declare class Selection_ {
 	 */
 	scrollTo(
 		ref: Selection | Range | Node,
-		scrollOption?: {
-			[x: string]: any;
+		scrollOption?: ScrollIntoViewOptions & {
+			noFocus?: boolean;
 		},
 	): void;
 	/**

package/types/core/logic/panel/finder.d.ts

@@ -0,0 +1,83 @@
+import type {} from '../../../typedef';
+export default Finder;
+/**
+ * @description Find/Replace feature
+ */
+declare class Finder {
+	/** @description Inject ::highlight() styles at runtime (avoids PostCSS parse errors). */
+	static #highlightStyleInjected: boolean;
+	static #injectHighlightStyles(): void;
+	/**
+	 * @constructor
+	 * @param {SunEditor.Kernel} kernel
+	 */
+	constructor(kernel: SunEditor.Kernel);
+	/**
+	 * @description Whether the panel is open.
+	 * @returns {boolean}
+	 */
+	get isOpen(): boolean;
+	/**
+	 * @description Opens the finder. With panel: shows UI. Without panel: activates search state only.
+	 * @param {boolean} [replaceMode=true] Whether to show replace row
+	 */
+	open(replaceMode?: boolean): void;
+	/**
+	 * @description Closes the finder and clears highlights.
+	 */
+	close(): void;
+	/**
+	 * @description Navigate to next match (public for shortcut binding).
+	 */
+	findNext(): void;
+	/**
+	 * @description Navigate to previous match (public for shortcut binding).
+	 */
+	findPrev(): void;
+	/**
+	 * @description Search for a term in the editor content (headless API).
+	 * @param {string} term Search term
+	 * @param {Object} [options] Search options
+	 * @param {boolean} [options.matchCase=false] Case-sensitive search
+	 * @param {boolean} [options.wholeWord=false] Whole word search
+	 * @param {boolean} [options.regex=false] Regex search
+	 * @returns {number} Number of matches found
+	 */
+	search(
+		term: string,
+		{
+			matchCase,
+			wholeWord,
+			regex,
+		}?: {
+			matchCase?: boolean;
+			wholeWord?: boolean;
+			regex?: boolean;
+		},
+	): number;
+	/**
+	 * @description Replace the current match (headless API).
+	 * @param {string} replaceText Replacement text
+	 */
+	replace(replaceText: string): void;
+	/**
+	 * @description Replace all matches (headless API).
+	 * @param {string} replaceText Replacement text
+	 */
+	replaceAll(replaceText: string): void;
+	/**
+	 * @description Current match count and index.
+	 * @returns {{ current: number, total: number }}
+	 */
+	get matchInfo(): {
+		current: number;
+		total: number;
+	};
+	/**
+	 * @description Re-run search with current term (debounced 300ms). Called on wysiwyg content change.
+	 */
+	refresh(): void;
+	/** @internal */
+	_destroy(): void;
+	#private;
+}

package/types/core/logic/panel/toolbar.d.ts

@@ -40,7 +40,6 @@ declare class Toolbar {
 	 */
 	keyName: any;
 	currentMoreLayerActiveButton: HTMLButtonElement;
-	isSticky: boolean;
 	isBalloonMode: boolean;
 	isInlineMode: boolean;
 	isBalloonAlwaysMode: boolean;
@@ -53,6 +52,20 @@ declare class Toolbar {
 		top: number;
 		left: number;
 	};
+	isBottomMode: boolean;
+	/**
+	 * @description Whether the toolbar is currently in a sticky (fixed) state.
+	 * For CSS sticky mode, computed from the element's viewport position.
+	 * For JS sticky mode (toolbar_container), uses a manual flag.
+	 * @type {boolean}
+	 */
+	get isSticky(): boolean;
+	/**
+	 * @description Whether the toolbar uses native CSS `position: sticky`.
+	 * - When `false`, the JS-based sticky fallback (`position: fixed`) is active.
+	 * @type {boolean}
+	 */
+	get isCSSSticky(): boolean;
 	/**
 	 * @description Disables all toolbar buttons.
 	 */

package/types/core/logic/panel/viewer.d.ts

@@ -14,6 +14,11 @@ declare class Viewer {
 	 * @param {boolean} [value] `true`/`false`, If `undefined` toggle the `codeView` mode.
 	 */
 	codeView(value?: boolean): void;
+	/**
+	 * @description Changes to markdown view or wysiwyg view
+	 * @param {boolean} [value] `true`/`false`, If `undefined` toggle the `markdownView` mode.
+	 */
+	markdownView(value?: boolean): void;
 	/**
 	 * @description Changes to full screen or default screen
 	 * @param {boolean} [value] `true`/`false`, If `undefined` toggle the `fullScreen` mode.
@@ -67,11 +72,11 @@ declare class Viewer {
 	 * @internal
 	 * @description Adjusts the height of the code view area.
 	 * - Ensures the code block `auto`-resizes based on its content.
-	 * @param {HTMLElement} code - Code area
+	 * @param {HTMLTextAreaElement} code - Code area
 	 * @param {HTMLTextAreaElement} codeNumbers - Code numbers area
 	 * @param {boolean} isAuto - `auto` height option
 	 */
-	_codeViewAutoHeight(code: HTMLElement, codeNumbers: HTMLTextAreaElement, isAuto: boolean): void;
+	_codeViewAutoHeight(code: HTMLTextAreaElement, codeNumbers: HTMLTextAreaElement, isAuto: boolean): void;
 	/**
 	 * @internal
 	 * @this {HTMLElement} Code numbers area
@@ -80,6 +85,21 @@ declare class Viewer {
 	 * @param {HTMLTextAreaElement} codeNumbers - Code numbers textarea
 	 */
 	_scrollLineNumbers(this: HTMLElement, codeNumbers: HTMLTextAreaElement): void;
+	/**
+	 * @internal
+	 * @description Adjusts the height of the markdown view area.
+	 * @param {HTMLTextAreaElement} md - Markdown area
+	 * @param {HTMLTextAreaElement} mdNumbers - Markdown numbers area
+	 * @param {boolean} isAuto - `auto` height option
+	 */
+	_markdownViewAutoHeight(md: HTMLTextAreaElement, mdNumbers: HTMLTextAreaElement, isAuto: boolean): void;
+	/**
+	 * @internal
+	 * @this {HTMLElement} Markdown numbers area
+	 * @description Synchronizes scrolling of line numbers with the markdown editor.
+	 * @param {HTMLTextAreaElement} mdNumbers - Markdown numbers textarea
+	 */
+	_scrollMarkdownLineNumbers(this: HTMLElement, mdNumbers: HTMLTextAreaElement): void;
 	/**
 	 * @internal
 	 * @description Destroy the Viewer instance and release memory

package/types/core/logic/shell/shortcuts.d.ts

@@ -121,7 +121,7 @@ declare class Shortcuts {
 	 * @description Registers custom shortcut keys (keys starting with `_`) into the shortcut map.
 	 * Called during initialization and when toolbar is reset.
 	 */
-	_registerCustomShortcuts(): void;
+	_registerShortcuts(): void;
 	/**
 	 * @internal
 	 * @description Destroy the Shortcuts instance and release memory

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

@@ -29,6 +29,9 @@ import type {} from '../../typedef';
  * @property {HTMLElement} codeWrapper - Wrapper element for the code-view mode.
  * @property {HTMLElement & HTMLTextAreaElement} code - Code view editing element (a <textarea> or <pre>).
  * @property {HTMLTextAreaElement} codeNumbers - Element displaying line numbers in code view mode.
+ * @property {HTMLElement} markdownWrapper - Wrapper element for the markdown-view mode.
+ * @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 {HTMLElement} statusbar - Editor status bar element (for resizing, info, etc.).
  * @property {HTMLElement} navigation - Navigation element (e.g., for outline or bookmarks).
@@ -46,6 +49,7 @@ import type {} from '../../typedef';
  *
  * === State Flags ===
  * @property {boolean} isCodeView - Whether the editor is currently in code view mode.
+ * @property {boolean} isMarkdownView - Whether the editor is currently in markdown view mode.
  * @property {boolean} isFullScreen - Whether the editor is currently in fullscreen mode.
  * @property {boolean} isReadOnly - Whether the editor is set to readonly mode.
  * @property {boolean} isDisabled - Whether the editor is currently disabled.
@@ -97,6 +101,8 @@ export function CreateFrameContext(
 	wwFrame: HTMLElement,
 	codeWrapper: HTMLElement,
 	codeFrame: HTMLElement,
+	markdownWrapper: any,
+	markdownFrame: any,
 	statusbar: HTMLElement | null,
 	documentTypeInner: {
 		inner: HTMLElement;
@@ -177,6 +183,18 @@ export type FrameContextStore = {
 	 * - Element displaying line numbers in code view mode.
 	 */
 	codeNumbers: HTMLTextAreaElement;
+	/**
+	 * - Wrapper element for the markdown-view mode.
+	 */
+	markdownWrapper: HTMLElement;
+	/**
+	 * - Markdown view editing element (a <textarea>).
+	 */
+	markdown: HTMLTextAreaElement;
+	/**
+	 * - Element displaying line numbers in markdown view mode.
+	 */
+	markdownNumbers: HTMLTextAreaElement;
 	/**
 	 * - Placeholder element shown when the editor is empty.
 	 */
@@ -238,6 +256,10 @@ export type FrameContextStore = {
 	 * - Whether the editor is currently in code view mode.
 	 */
 	isCodeView: boolean;
+	/**
+	 * - Whether the editor is currently in markdown view mode.
+	 */
+	isMarkdownView: boolean;
 	/**
 	 * - Whether the editor is currently in fullscreen mode.
 	 */