suneditor 3.0.0-rc.5 → 3.0.0

package/src/themes/midnight.css

@@ -38,15 +38,19 @@
 	--se-edit-outline: #424242;
 
 	/** --------------------------- layout - [colors] ----------- */
-	/* main shell and typography */
-	--se-main-font-family: Helvetica Neue;
 	--se-main-out-color: #2c2c2c;
 	--se-main-color: #e4e4e4;
 	--se-main-color-lighter: #cfcfcf;
 	--se-main-background-color: #212121;
-	--se-code-view-color: #111111;
+	--se-code-view-color: #e4e4e4;
 	--se-main-font-color: #e4e4e4;
-	--se-code-view-background-color: #dadada;
+	--se-code-view-background-color: #1a1a1a;
+	--se-code-view-line-color: #999;
+	--se-code-view-line-background-color: #252525;
+	--se-markdown-view-color: #e4e4e4;
+	--se-markdown-view-background-color: #1a1a1a;
+	--se-markdown-view-line-color: #999;
+	--se-markdown-view-line-background-color: #252525;
 	--se-main-divider-color: #3d4350;
 	--se-main-border-color: #444;
 	--se-main-outline-color: #383838;
@@ -54,6 +58,11 @@
 	--se-statusbar-font-color: #a1a1a1;
 	--se-overlay-background-color: rgba(0, 0, 0, 0.6);
 
+	/* finder */
+	--se-find-match-color: rgba(255, 213, 0, 0.3);
+	--se-find-current-color: rgba(255, 150, 50, 0.55);
+	--se-find-no-match-color: rgba(255, 80, 80, 0.2);
+
 	/* hover states */
 	--se-hover-color: #2f3f44;
 	--se-hover-dark-color: #4b6b72;

package/src/typedef.js

@@ -195,7 +195,7 @@
  * @typedef {Object} SunEditor.Event.Info
  * @property {*} target Target element
  * @property {string} type Event type
- * @property {EventListenerOrEventListenerObject} listener Event listener
+ * @property {*} listener Event listener
  * @property {boolean|AddEventListenerOptions} [useCapture] Event useCapture option
  */
 
@@ -203,7 +203,7 @@
  * EventManager global event information
  * @typedef {Object} SunEditor.Event.GlobalInfo
  * @property {string} type Event type
- * @property {(...args: *) => *} listener Event listener
+ * @property {*} listener Event listener
  * @property {boolean|AddEventListenerOptions} [useCapture] Use event capture
  */
 
@@ -265,10 +265,10 @@
  * ---[ Auto-generated by scripts/check/gen-button-types.cjs - DO NOT EDIT MANUALLY ]---
  *
  * Default command buttons available in the toolbar
- * @typedef {"bold"|"underline"|"italic"|"strike"|"subscript"|"superscript"|"removeFormat"|"copyFormat"|"indent"|"outdent"|"fullScreen"|"showBlocks"|"codeView"|"undo"|"redo"|"preview"|"print"|"copy"|"dir"|"dir_ltr"|"dir_rtl"|"save"|"newDocument"|"selectAll"|"pageBreak"|"pageUp"|"pageDown"|"pageNavigator"} SunEditor.UI.ButtonCommand
+ * @typedef {"bold"|"underline"|"italic"|"strike"|"subscript"|"superscript"|"removeFormat"|"copyFormat"|"indent"|"outdent"|"fullScreen"|"showBlocks"|"codeView"|"markdownView"|"undo"|"redo"|"preview"|"print"|"copy"|"dir"|"dir_ltr"|"dir_rtl"|"finder"|"save"|"newDocument"|"selectAll"|"pageBreak"|"pageUp"|"pageDown"|"pageNavigator"} SunEditor.UI.ButtonCommand
  *
  * Plugin buttons available in the toolbar
- * @typedef {"blockquote"|"exportPDF"|"fileUpload"|"list_bulleted"|"list_numbered"|"mention"|"align"|"font"|"fontColor"|"backgroundColor"|"list"|"table"|"blockStyle"|"hr"|"layout"|"lineHeight"|"template"|"paragraphStyle"|"textStyle"|"link"|"image"|"video"|"audio"|"embed"|"math"|"drawing"|"imageGallery"|"videoGallery"|"audioGallery"|"fileGallery"|"fileBrowser"|"fontSize"|"pageNavigator"|"anchor"} SunEditor.UI.ButtonPlugin
+ * @typedef {"blockquote"|"codeBlock"|"exportPDF"|"fileUpload"|"list_bulleted"|"list_numbered"|"mention"|"align"|"font"|"fontColor"|"backgroundColor"|"list"|"table"|"blockStyle"|"hr"|"layout"|"lineHeight"|"template"|"paragraphStyle"|"textStyle"|"link"|"image"|"video"|"audio"|"embed"|"math"|"drawing"|"imageGallery"|"videoGallery"|"audioGallery"|"fileGallery"|"fileBrowser"|"fontSize"|"pageNavigator"|"anchor"} SunEditor.UI.ButtonPlugin
  *
  * Single button item in the toolbar (includes special controls and custom strings)
  * @typedef {SunEditor.UI.ButtonCommand|SunEditor.UI.ButtonPlugin|SunEditor.UI.ButtonSpecial|string} SunEditor.UI.ButtonItem

package/types/assets/icons/defaultIcons.d.ts

@@ -13,7 +13,9 @@ declare namespace _default {
 	export let outdent: string;
 	export let expansion: string;
 	export let reduction: string;
+	export let code_block: string;
 	export let code_view: string;
+	export let markdown_view: string;
 	export let preview: string;
 	export let print: string;
 	export let template: string;
@@ -119,12 +121,20 @@ declare namespace _default {
 	export let cut: string;
 	export let PDF: string;
 	export let format_paint: string;
-	export let find_replace: string;
 	export let drawing: string;
 	export let eraser: string;
 	export let search: string;
 	export let selection_search: string;
 	export let embed: string;
+	export let finder: string;
+	export let regex: string;
+	export let match_case: string;
+	export let whole_word: string;
+	export let swap_vert: string;
+	export let arrow_down_small: string;
+	export let arrow_up_small: string;
+	export let replaceText: string;
+	export let relaceTextAll: string;
 	export let menu_arrow_down: string;
 	export let menu_arrow_up: string;
 	export let menu_arrow_right: string;
@@ -147,6 +157,7 @@ declare namespace _default {
 	export let more_plus: string;
 	export let more_horizontal: string;
 	export let more_vertical: string;
+	export let more_flag: string;
 	export let as_inline: string;
 	export let as_block: string;
 	export let page_break: string;

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/offset.d.ts

@@ -279,22 +279,34 @@ 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, top: 0 }
+	 *   position: 'bottom', inst: this, addOffset: { left: 0, right: 0, top: 0 }
 	 * });
 	 */
 	setAbsPosition(
@@ -304,6 +316,7 @@ declare class Offset {
 			isWWTarget?: boolean;
 			addOffset?: {
 				left: number;
+				right: number;
 				top: number;
 			};
 			position?: 'bottom' | 'top';

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

@@ -127,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());
@@ -144,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.
 	 */