suneditor 3.0.0-rc.4 → 3.0.0

package/src/core/schema/options.js

@@ -43,7 +43,7 @@ export const DEFAULTS = {
 
 	SIZE_UNITS: ['px', 'pt', 'em', 'rem'],
 
-	CLASS_NAME: '^__se__|^se-|^katex|^MathJax',
+	CLASS_NAME: '^__se__|^se-|^katex|^MathJax|^language-',
 	CLASS_MJX: 'mjx-container|mjx-math|mjx-mrow|mjx-mi|mjx-mo|mjx-mn|mjx-msup|mjx-mfrac|mjx-munderover',
 	EXTRA_TAG_MAP: { script: false, style: false, meta: false, link: false, '[a-z]+:[a-z]+': false },
 
@@ -100,7 +100,10 @@ export const DEFAULTS = {
  * === Content & Editing ===
  * @property {string} [value=""] - Initial value for the editor.
  * @property {string} [placeholder=""] - Placeholder text.
- * @property {Object<string, string>} [editableFrameAttributes={spellcheck: "false"}] - Attributes for the editable frame[.sun-editor-editable]. (e.g. [key]: value)
+ * @property {Object<string, string>} [editableFrameAttributes={spellcheck: "false"}] - Attributes for the editable frame[.sun-editor-editable].
+ * ```js
+ * { editableFrameAttributes: { spellcheck: 'true', autocomplete: 'on' } }
+ * ```
  * ///
  *
  * === Layout & Sizing ===
@@ -110,19 +113,26 @@ export const DEFAULTS = {
  * @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.
- * @property {string} [editorStyle=""] - Style string of the top frame of the editor. (e.g. "border: 1px solid #ccc;").
+ * @property {string} [editorStyle=""] - Style string of the top frame of the editor.
+ * ```js
+ * { editorStyle: 'border: 1px solid #ccc; border-radius: 4px;' }
+ * ```
  * ///
  *
  * === Iframe Mode ===
  * @property {boolean} [iframe=false] - Content will be placed in an iframe and isolated from the rest of the page.
  * @property {boolean} [iframe_fullPage=false] - Allows the usage of HTML, HEAD, BODY tags and DOCTYPE declaration on the `iframe`.
- * @property {Object<string, string>} [iframe_attributes={}] - Attributes of the `iframe`. (e.g. {'allow-scripts': 'true'})
+ * @property {Object<string, string>} [iframe_attributes={}] - Attributes of the `iframe`.
+ * ```js
+ * { iframe_attributes: { 'allow-scripts': 'true', sandbox: 'allow-same-origin' } }
+ * ```
  * @property {Array<string>} [iframe_cssFileName=["suneditor"]] - CSS files to apply inside the iframe.
  * - String: Filename pattern to search in document `<link>` tags.
- * - (e.g. "suneditor" or "suneditor.[a-z0-9]+" matches "suneditor.abc123.css")
- * - "*": Wildcard to include ALL stylesheets from the page.
- * - Array: Multiple patterns (e.g. ["suneditor", "custom", "*"]).
- * - Absolute URLs and data URLs (data:text/css,) are also supported.
+ * - `"*"`: Wildcard to include ALL stylesheets from the page.
+ * - Absolute URLs and data URLs (`data:text/css,`) are also supported.
+ * ```js
+ * { iframe_cssFileName: ['suneditor', 'custom', 'https://example.com/style.css'] }
+ * ```
  * ///
  *
  * === Statusbar & Character Counter ===
@@ -132,12 +142,14 @@ export const DEFAULTS = {
  * @property {boolean} [charCounter=false] - Shows the number of characters in the editor.
  * - If the `maxCharCount` option has a value, it becomes `true`.
  * @property {?number} [charCounter_max=null] - The maximum number of characters allowed to be inserted into the editor.
- * @property {?string} [charCounter_label=null] - Text to be displayed in the `charCounter` area of the bottom bar. (e.g. "Characters : 20/200")
+ * @property {?string} [charCounter_label=null] - Text to be displayed in the `charCounter` area of the bottom bar.
+ * ```js
+ * { charCounter_label: 'Characters :' }
+ * ```
  * @property {"char"|"byte"|"byte-html"} [charCounter_type="char"] - Defines the calculation method of the `charCounter` option.
  * - `char`: Characters length.
  * - `byte`: Binary data size of characters.
  * - `byte-html`: Binary data size of the full HTML string.
- *
  */
 
 /** ================================================================================================================================ */
@@ -206,9 +218,11 @@ export const DEFAULTS = {
  * - 'a|img|p|div|...' (REQUIRED + DEFAULT)
  * - 2. If options are given directly, the final pattern is:
  * - 'a|img|custom|tags' (REQUIRED + options.__defaultElementWhitelist)
- * @property {string} [__defaultAttributeWhitelist=CONSTANTS.ATTRIBUTE_WHITELIST] - A complete list of attributes that are allowed by default on all tags.
- * - Delimiter: "|" (e.g. "href|target").
+ * @property {string} [__defaultAttributeWhitelist=CONSTANTS.ATTRIBUTE_WHITELIST] - A complete list of attributes that are allowed by default on all tags. Delimiter: `"|"`.
  * - The default follows {@link DEFAULTS.ATTRIBUTE_WHITELIST}
+ * ```js
+ * { __defaultAttributeWhitelist: 'href|target|src|alt|class' }
+ * ```
  * ///
  *
  *  === Formatting  ===
@@ -230,7 +244,13 @@ export const DEFAULTS = {
  * - For example, when changing the font size or color of a list item (`<li>`),
  * - these styles apply to the `<li>` tag instead of wrapping content in additional tags.
  * @property {{pluginName: string, we: boolean}|boolean} [__pluginRetainFilter=true] - Plugin retain filter configuration. (Internal use primarily)
- * - You can turn it off/on globally with `true`/`false` or set it per plugin. (e.g. { table: false })
+ * - You can turn it off/on globally with `true`/`false` or set it per plugin.
+ * ```js
+ * // disable filter for table plugin only
+ * {
+ *   __pluginRetainFilter: { table: false }
+ * }
+ * ```
  */
 
 /**
@@ -241,16 +261,30 @@ export const DEFAULTS = {
  * -----------------
  *
  * === Plugins & Toolbar ===
- * @property {Object<string, *>|Array<Object<string, *>>} [plugins] - Plugin configuration.
- * @property {Array<string>} [excludedPlugins=[]] - Plugin configuration.
+ * @property {Object<string, *>|Array<Object<string, *>>} [plugins] - Plugin configuration. Pass an array of plugin classes or an object keyed by plugin name.
+ * ```js
+ * import plugins, { image, link, table } from 'suneditor/src/plugins';
+ * { plugins: plugins,
+ *   plugins: [image, link, table],
+ *   plugins: { image, link, table }
+ * }
+ * ```
+ * @property {Array<string>} [excludedPlugins=[]] - List of plugin names to exclude.
+ * ```js
+ * { excludedPlugins: ['image', 'video'] }
+ * ```
  * @property {SunEditor.UI.ButtonList} [buttonList=CONSTANTS.BUTTON_LIST] - List of toolbar buttons, grouped by sub-arrays.
  * - The default follows {@link DEFAULTS.BUTTON_LIST}
  * ///
  *
  * === Modes & Themes ===
  * @property {boolean} [v2Migration=false] - Enables migration mode for SunEditor v2.
- * @property {"classic"|"inline"|"balloon"|"balloon-always"} [mode="classic"] - Toolbar mode: `classic`, `inline`, `balloon`, `balloon-always`.
- * @property {string} [type=""] - Editor type: `document:header,page`.
+ * @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 {string} [type=""] - Editor type. Use `"document"` for a document-style layout, with optional sub-types after `:`.
+ * ```js
+ * // type
+ * 'document:header,page'
+ * ```
  * @property {string} [theme=""] - Editor theme.
  * @property {Object<string, string>} [lang] - Language configuration. default : EN
  * @property {Object<string, string>} [icons] - Overrides the default icons.
@@ -277,6 +311,19 @@ export const DEFAULTS = {
  * - `textStyleTagFilter`: Filters text style tags (b, i, u, span, etc.)
  * - `attrFilter`: Filters disallowed HTML attributes (`attributeWhitelist`/`attributeBlacklist`)
  * - `styleFilter`: Filters disallowed inline styles (`spanStyles`/`lineStyles`/`allUsedStyles`)
+ * ```js
+ * // disable only attribute and style filters
+ * {
+ *   strictMode: {
+ *     tagFilter: true,
+ *     formatFilter: true,
+ *     classFilter: true,
+ *     textStyleTagFilter: true,
+ *     attrFilter: false,
+ *     styleFilter: false
+ *   }
+ * }
+ * ```
  * @property {Array<string>} [scopeSelectionTags=CONSTANTS.SCOPE_SELECTION_TAGS] - Tags treated as whole units when selecting all content.
  * - The default follows {@link DEFAULTS.SCOPE_SELECTION_TAGS}
  * ///
@@ -284,12 +331,16 @@ export const DEFAULTS = {
  * === Content Filtering & Formatting ===
  * ==
  * #### 1) Tag & Element Control
- * @property {string} [elementWhitelist=""] - Specifies HTML elements to additionally allow beyond the default allow list.
- * - Delimiter: "|" (e.g. "p|div", "*").
+ * @property {string} [elementWhitelist=""] - Specifies HTML elements to additionally allow beyond the default allow list. Delimiter: `"|"`.
  * - Added to the default list determined by {@link PrivateBaseOptions.__defaultElementWhitelist}.
- * @property {string} [elementBlacklist=""] - Specifies HTML elements that should not be used.
- * - Delimiter: "|" (e.g. "script|style").
+ * ```js
+ * { elementWhitelist: 'mark|details|summary' }
+ * ```
+ * @property {string} [elementBlacklist=""] - Specifies HTML elements that should not be used. Delimiter: `"|"`.
  * - Tags specified here will eventually be removed, even if they are included in other whitelists.
+ * ```js
+ * { elementBlacklist: 'script|style|iframe' }
+ * ```
  * @property {string} [allowedEmptyTags=CONSTANTS.ALLOWED_EMPTY_NODE_LIST] - A list of tags that are allowed to be kept even if their values are empty.
  * - The default follows {@link DEFAULTS.ALLOWED_EMPTY_NODE_LIST}
  * - Concatenated with `ALLOWED_EMPTY_NODE_LIST` to form the final `allowedEmptyTags` list.
@@ -298,22 +349,52 @@ export const DEFAULTS = {
  * ///
  *
  * #### 2) Attribute Control
- * @property {{[key: string]: string|undefined}} [attributeWhitelist=null] - Specifies additional attributes to allow for each tag.
- * - (e.g. {a: "href|target", img: "src|alt", "*": "id"})
+ * @property {{[key: string]: string|undefined}} [attributeWhitelist=null] - Specifies additional attributes to allow for each tag. `"*"` applies to all tags.
  * - Rules specified here will be merged into {@link PrivateBaseOptions.__defaultAttributeWhitelist}.
- * @property {{[key: string]: string|undefined}} [attributeBlacklist=null] - Specifies attributes to disallow by tag.
- * - (e.g. {a: "href|target", img: "src|alt", "*": "name"})
+ * ```js
+ * {
+ *   attributeWhitelist: {
+ *     a: 'href|target',
+ *     img: 'src|alt',
+ *     '*': 'id|data-*'
+ *   }
+ * }
+ * ```
+ * @property {{[key: string]: string|undefined}} [attributeBlacklist=null] - Specifies attributes to disallow by tag. `"*"` applies to all tags.
  * - Attributes specified here will eventually be removed even if they are allowed by other settings.
  * - A list of required elements, {@link DEFAULTS.REQUIRED_FORMAT_LINE}, is always included.
+ * ```js
+ * { attributeBlacklist: { '*': 'onclick|onerror' } }
+ * ```
  * ///
  *
  * #### 3) Text & Inline Style Control
  * @property {string} [textStyleTags=__textStyleTags] - Additional text style tags.
  * - The default follows {@link PrivateBaseOptions.__textStyleTags}
  * @property {Object<string, string>} [convertTextTags={bold: "strong", underline: "u", italic: "em", strike: "del", subscript: "sub", superscript: "sup"}] - Maps text styles to specific HTML tags.
- * @property {string} [allUsedStyles] - Specifies additional styles to the list of allowed styles.
- * - Delimiter: "|" (e.g. "color|background-color").
- * @property {Object<string, string>} [tagStyles={}] - Specifies allowed styles for HTML tags.
+ * ```js
+ * {
+ *   convertTextTags: {
+ *     bold: 'b',
+ *     italic: 'i',
+ *     underline: 'u',
+ *     strike: 's'
+ *   }
+ * }
+ * ```
+ * @property {string} [allUsedStyles] - Specifies additional styles to the list of allowed styles. Delimiter: `"|"`.
+ * ```js
+ * { allUsedStyles: 'color|background-color|text-shadow' }
+ * ```
+ * @property {Object<string, string>} [tagStyles={}] - Specifies allowed styles for HTML tags. Key is tag name(s), value is pipe-delimited allowed styles.
+ * ```js
+ * {
+ *   tagStyles: {
+ *     'table|td': 'border|color|background-color',
+ *     hr: 'border-top'
+ *   }
+ * }
+ * ```
  * @property {string} [spanStyles=CONSTANTS.SPAN_STYLES] - Specifies allowed styles for the `span` tag.
  * - The default follows {@link DEFAULTS.SPAN_STYLES}
  * @property {string} [lineStyles=CONSTANTS.LINE_STYLES] - Specifies allowed styles for the `line` element (p..).
@@ -338,14 +419,23 @@ export const DEFAULTS = {
  * - Formats that include `line`, such as "Quote", still operate on a `line` basis.
  * - suneditor processes work in `line` units.
  * - When set to `br`, performance may decrease when editing a lot of data.
- * @property {string} [lineAttrReset=""] - Line properties that should be reset when changing lines (e.g. "id|name").
- * @property {string} [formatLine=__defaultFormatLine] - Additionally allowed `line` elements beyond the default. Delimiter: "|" (e.g. "p|div").
+ * @property {string} [lineAttrReset=""] - Line properties that should be reset when changing lines. Delimiter: `"|"`.
+ * ```js
+ * { lineAttrReset: 'id|name' }
+ * ```
+ * @property {string} [formatLine=__defaultFormatLine] - Additionally allowed `line` elements beyond the default. Delimiter: `"|"`.
  * - Concatenated with {@link PrivateBaseOptions.__defaultFormatLine} to form the final `line` list.
  * - `line` element also contains `brLine` element.
- * @property {string} [formatBrLine=__defaultFormatBrLine] - Additionally allowed `brLine` elements beyond the default. (e.g. "PRE").
+ * ```js
+ * { formatLine: 'ARTICLE|SECTION' }
+ * ```
+ * @property {string} [formatBrLine=__defaultFormatBrLine] - Additionally allowed `brLine` elements beyond the default.
  * - Concatenated with {@link PrivateBaseOptions.__defaultFormatBrLine} to form the final `brLine` list.
  * - `brLine` elements are included in the `line` element.
  * - `brLine` elements' line break is `BR` tag.
+ * ```js
+ * { formatBrLine: 'CODE' }
+ * ```
  * - ※ Entering the Enter key on the last line ends `brLine` and appends `line`.
  * @property {string} [formatClosureBrLine=__defaultFormatClosureBrLine] - Additionally allowed `closureBrLine` elements beyond the default.
  * - Concatenated with {@link PrivateBaseOptions.__defaultFormatClosureBrLine} for the final `closureBrLine` list.
@@ -372,14 +462,28 @@ export const DEFAULTS = {
  * @property {?HTMLElement} [toolbar_container] - Container element for the toolbar.
  * @property {number} [toolbar_sticky=0] - Enables sticky toolbar with optional offset.
  * @property {boolean} [toolbar_hide=false] - Hides toolbar initially.
- * @property {Object} [subToolbar={}] - Sub-toolbar configuration.
+ * @property {Object} [subToolbar={}] - Sub-toolbar configuration. A secondary toolbar that appears on text selection.
  * @property {SunEditor.UI.ButtonList} [subToolbar.buttonList] - List of Sub-toolbar buttons, grouped by sub-arrays.
  * @property {"balloon"|"balloon-always"} [subToolbar.mode="balloon"] - Sub-toolbar mode: `balloon`, `balloon-always`.
  * @property {string} [subToolbar.width="auto"] - Sub-toolbar width.
+ * ```js
+ * { subToolbar: { buttonList: [['bold', 'italic', 'link']], mode: 'balloon' } }
+ * ```
  * @property {?HTMLElement} [statusbar_container] - Container element for the status bar.
  * @property {boolean} [shortcutsHint=true] - Displays shortcut hints in tooltips.
  * @property {boolean} [shortcutsDisable=false] - Disables keyboard shortcuts.
  * @property {{[key: string]: Array<string>|undefined}} [shortcuts={}] - Custom keyboard shortcuts.
+ * - Keys starting with `_` are user-defined custom shortcuts. Each value is an array of `[keyCombo, hintLabel]` pairs.
+ * - Key combos use `c` (Ctrl/Cmd), `s` (Shift), and `KeyEvent.code` values joined by `+`.
+ * - Use `$~pluginName.method` to call a specific plugin method.
+ * ```js
+ * {
+ *   shortcuts: {
+ *     bold: ['c+KeyB', 'B'],
+ *     _h1: ['c+s+Digit1+$~blockStyle.applyHeaderByShortcut', '']
+ *   }
+ * }
+ * ```
  * ///
  *
  * === Advanced Features ===
@@ -388,10 +492,14 @@ export const DEFAULTS = {
  * - Default: `Boolean(plugins.link)` — determined by whether the `link` plugin is enabled.
  * @property {Array<string>} [autoStyleify=["bold", "underline", "italic", "strike"]] - Styles applied automatically on text input.
  * @property {number} [historyStackDelayTime=400] - Delay time for history stack updates (ms).
+ * @property {number} [historyStackSize=100] - Maximum number of history entries per root frame. Oldest entries are discarded when exceeded.
  * @property {string} [printClass=""] - Class name for printing.
  * @property {number} [fullScreenOffset=0] - Offset applied when entering fullscreen mode.
- * @property {?string} [previewTemplate=null] - Custom template for preview mode.
- * @property {?string} [printTemplate=null] - Custom template for print mode.
+ * @property {?string} [previewTemplate=null] - Custom HTML template for preview mode. Use `{{ contents }}` as a placeholder for editor content.
+ * @property {?string} [printTemplate=null] - Custom HTML template for print mode. Use `{{ contents }}` as a placeholder for editor content.
+ * ```js
+ * { previewTemplate: '<div class="my-preview"><h1>Preview</h1>{{ contents }}</div>' }
+ * ```
  * @property {SunEditor.ComponentInsertType} [componentInsertBehavior="auto"] - Enables automatic selection of inserted components.
  * - For inline components: places cursor near the component, or selects if no nearby range.
  * - For block components: executes behavior based on `selectMode`:
@@ -400,18 +508,48 @@ export const DEFAULTS = {
  *    - `line`: Move cursor to the next line if possible, or create a new line and move there.
  *    - `none`: Do nothing.
  * @property {?string} [defaultUrlProtocol=null] - Default URL protocol for links.
- * @property {Object<"copy", number>} [toastMessageTime={copy: 1500}] - {"copy": 1500} - Duration for displaying toast messages.
+ * @property {Object<"copy", number>} [toastMessageTime={copy: 1500}] - Duration for displaying toast messages (ms).
  * @property {boolean} [freeCodeViewMode=false] - Enables free code view mode.
+ * @property {boolean} [finder_panel=true] - Shows the built-in Find/Replace panel UI.
+ * - The finder is always created internally; this option controls whether the panel is visible to users (Ctrl+F / Ctrl+H).
+ * @property {boolean} [finder_liveSearch=true] - Searches instantly as you type (debounced). When false, search runs only on Enter.
+ *
+ * ///
  *
  * === Dynamic Options ===
- * @property {Object<string, *>} [externalLibs] - External libraries like CodeMirror or MathJax.
+ * @property {Object<string, *>} [externalLibs] - External libraries like CodeMirror, KaTeX, or MathJax.
  * - See {@link https://github.com/ARA-developer/suneditor/blob/develop/guide/external-libraries.md External Libraries Guide}
- * @property {Object<string, boolean>} [allowedExtraTags=CONSTANTS.EXTRA_TAG_MAP] - Specifies extra allowed or disallowed tags.
+ * ```js
+ * {
+ *   externalLibs: {
+ *     katex: window.katex,
+ *     codeMirror: { src: CodeMirror }
+ *   }
+ * }
+ * ```
+ * @property {Object<string, boolean>} [allowedExtraTags=CONSTANTS.EXTRA_TAG_MAP] - Specifies extra allowed or disallowed tags. `true` to allow, `false` to disallow.
  * - The default follows {@link DEFAULTS.EXTRA_TAG_MAP}
+ * ```js
+ * {
+ *   allowedExtraTags: {
+ *     script: false,
+ *     style: false,
+ *     mark: true
+ *   }
+ * }
+ * ```
  * ///
  *
  * === User Events ===
- * @property {SunEditor.Event.Handlers} [events] - User event handlers configuration
+ * @property {SunEditor.Event.Handlers} [events] - User event handlers configuration.
+ * ```js
+ * {
+ *   events: {
+ *     onChange: (content) => console.log(content),
+ *     onImageUploadBefore: (files, info) => true
+ *   }
+ * }
+ * ```
  * ///
  *
  * === [ Plugin-Specific Options ] ===
@@ -421,6 +559,7 @@ export const DEFAULTS = {
  * @property {import('../../plugins/browser/audioGallery.js').AudioGalleryPluginOptions} [audioGallery]
  * @property {import('../../plugins/dropdown/backgroundColor.js').BackgroundColorPluginOptions} [backgroundColor]
  * @property {import('../../plugins/dropdown/blockStyle.js').BlockStylePluginOptions} [blockStyle]
+ * @property {import('../../plugins/command/codeBlock.js').CodeBlockPluginOptions} [codeBlock]
  * @property {import('../../plugins/modal/drawing.js').DrawingPluginOptions} [drawing]
  * @property {import('../../plugins/modal/embed.js').EmbedPluginOptions} [embed]
  * @property {import('../../plugins/command/exportPDF.js').ExportPDFPluginOptions} [exportPDF]
@@ -480,7 +619,6 @@ export const DEFAULTS = {
  * @property {*} [codeMirror] - CodeMirror configuration object from `externalLibs.codeMirror`.
  * @property {boolean} [codeMirrorEditor] - Whether CodeMirror is available (base-level flag). Frame-level stores the actual CM instance.
  * @property {boolean} [hasCodeMirror] - Uses CodeMirror for code view.
- *
  * @property {Set<string>} [allUsedStyles] - Processed set of all allowed CSS styles.
  * - Converted from user's `string` input ("|" delimited) to `Set<string>` in constructor.
  */
@@ -566,6 +704,7 @@ export const OPTION_FIXED_FLAG = {
 	textDirection: true,
 	reverseButtons: 'fixed',
 	historyStackDelayTime: true,
+	historyStackSize: 'fixed',
 	lineAttrReset: true,
 	printClass: true,
 	defaultLine: 'fixed',
@@ -606,6 +745,8 @@ export const OPTION_FIXED_FLAG = {
 	toastMessageTime: true,
 	icons: 'fixed',
 	freeCodeViewMode: true,
+	finder_panel: 'fixed',
+	finder_liveSearch: true,
 	__lineFormatFilter: true,
 	__pluginRetainFilter: true,
 	__listCommonStyle: 'fixed',

package/src/core/section/constructor.js

@@ -115,6 +115,9 @@ function Constructor(editorTargets, options) {
 		toolbar.style.width = o.get('toolbar_width');
 		toolbar.appendChild(dom.utils.createElement('DIV', { class: 'se-arrow' }));
 	}
+	if (o.get('_toolbar_bottom')) {
+		toolbar.className += ' se-toolbar-bottom';
+	}
 
 	/** --- subToolbar --------------------------------------------------------------- */
 	if (optionMap.subButtons) {
@@ -180,20 +183,36 @@ function Constructor(editorTargets, options) {
 		// root key
 		const key = editTarget.key || null;
 
-		// code view - wrapper
-		const codeWrapper = dom.utils.createElement('DIV', { class: 'se-code-wrapper' }, textarea);
-		codeWrapper.style.setProperty('display', 'none', 'important');
-		editor_div.appendChild(codeWrapper);
-
-		// check code mirror
-		const codeMirrorEl = _checkCodeMirror(o, to, textarea);
-		// not used code mirror
-		if (textarea === codeMirrorEl) {
-			// add line nubers
-			const codeNumbers = dom.utils.createElement('TEXTAREA', { class: 'se-code-view-line', readonly: 'true' }, null);
-			codeWrapper.insertBefore(codeNumbers, textarea);
-		} else {
-			textarea = codeMirrorEl;
+		// code view - wrapper (only created when codeView button exists)
+		let codeWrapper = null;
+		if (o.get('buttons').has('codeView')) {
+			codeWrapper = dom.utils.createElement('DIV', { class: 'se-code-wrapper' }, textarea);
+			codeWrapper.style.setProperty('display', 'none', 'important');
+			editor_div.appendChild(codeWrapper);
+
+			// check code mirror
+			const codeMirrorEl = _checkCodeMirror(o, to, textarea);
+			// not used code mirror
+			if (textarea === codeMirrorEl) {
+				// add line nubers
+				const codeNumbers = dom.utils.createElement('TEXTAREA', { class: 'se-code-view-line', readonly: 'true' }, null);
+				codeWrapper.insertBefore(codeNumbers, textarea);
+			} else {
+				textarea = codeMirrorEl;
+			}
+		}
+
+		// markdown view - wrapper (only created when markdownView button exists)
+		let markdownWrapper = null;
+		let markdownTextarea = null;
+		if (o.get('buttons').has('markdownView')) {
+			markdownTextarea = initElements.markdownView;
+			const markdownNumbers = dom.utils.createElement('TEXTAREA', { class: 'se-markdown-view-line', readonly: 'true' }, null);
+			markdownWrapper = dom.utils.createElement('DIV', { class: 'se-markdown-wrapper' });
+			markdownWrapper.appendChild(markdownNumbers);
+			markdownWrapper.appendChild(markdownTextarea);
+			markdownWrapper.style.setProperty('display', 'none', 'important');
+			editor_div.appendChild(markdownWrapper);
 		}
 
 		// document type
@@ -216,7 +235,10 @@ function Constructor(editorTargets, options) {
 		// set container
 		top_div.appendChild(container);
 		rootKeys.push(key);
-		frameRoots.set(key, CreateFrameContext({ target: editTarget.target, key: editTarget.key, options: to }, top_div, wysiwyg_div, codeWrapper, textarea, default_status_bar || statusbar, documentTypeInner, key));
+		frameRoots.set(
+			key,
+			CreateFrameContext({ target: editTarget.target, key: editTarget.key, options: to }, top_div, wysiwyg_div, codeWrapper, textarea, markdownWrapper, markdownTextarea, default_status_bar || statusbar, documentTypeInner, key),
+		);
 	}
 	/** frame - root set - end -------------------------------------------------------------- */
 
@@ -232,8 +254,14 @@ function Constructor(editorTargets, options) {
 		toolbar_container.appendChild(dom.utils.createElement('DIV', { class: 'se-toolbar-sticky-dummy' }));
 	} else {
 		const rootContainer = frameRoots.get(rootId).get('container');
-		rootContainer.insertBefore(toolbar, rootContainer.firstElementChild);
-		if (subbar) rootContainer.insertBefore(subbar, rootContainer.firstElementChild);
+		if (o.get('_toolbar_bottom')) {
+			const statusbar = rootContainer.querySelector('.se-statusbar');
+			rootContainer.insertBefore(toolbar, statusbar);
+			if (subbar) rootContainer.insertBefore(subbar, toolbar);
+		} else {
+			rootContainer.insertBefore(toolbar, rootContainer.firstElementChild);
+			if (subbar) rootContainer.insertBefore(subbar, rootContainer.firstElementChild);
+		}
 	}
 
 	return {
@@ -395,9 +423,13 @@ export function InitOptions(options, editorTargets, plugins) {
 		...(typeof options.strictMode === 'boolean' ? {} : options.strictMode),
 	});
 	o.set('freeCodeViewMode', !!options.freeCodeViewMode);
+	o.set('finder_panel', options.finder_panel !== false);
+	o.set('finder_liveSearch', options.finder_liveSearch !== false);
 	o.set('__lineFormatFilter', options.__lineFormatFilter ?? true);
 	o.set('__pluginRetainFilter', options.__pluginRetainFilter ?? true);
-	o.set('mode', options.mode || 'classic'); // classic, inline, balloon, balloon-always
+	const [modeBase, modePart] = (options.mode || 'classic').split(':');
+	o.set('mode', modeBase); // classic, inline, balloon, balloon-always
+	o.set('_toolbar_bottom', modePart === 'bottom' && /^(classic|inline)$/i.test(modeBase));
 	o.set('type', options.type?.split(':')[0] || ''); // document:header,page
 	o.set('theme', options.theme || '');
 	o.set('_themeClass', options.theme ? ` se-theme-${options.theme}` : '');
@@ -506,6 +538,7 @@ export function InitOptions(options, editorTargets, plugins) {
 
 	// etc
 	o.set('historyStackDelayTime', typeof options.historyStackDelayTime === 'number' ? options.historyStackDelayTime : 400);
+	o.set('historyStackSize', typeof options.historyStackSize === 'number' && options.historyStackSize > 0 ? options.historyStackSize : 100);
 	o.set('_editableClass', 'sun-editor-editable' + o.get('_themeClass') + (o.get('_rtl') ? ' se-rtl' : '') + (o.get('type') === 'document' ? ' se-type-document-editable-a4' : ''));
 	o.set('lineAttrReset', ['id'].concat(options.lineAttrReset && typeof options.lineAttrReset === 'string' ? options.lineAttrReset.toLowerCase().split('|') : []));
 	o.set('printClass', typeof options.printClass === 'string' ? options.printClass + ' ' + o.get('_editableClass') : null);
@@ -624,6 +657,7 @@ export function InitOptions(options, editorTargets, plugins) {
 					indent: ['c+BracketRight', ']'],
 					outdent: ['c+BracketLeft', '['],
 					save: ['c+KeyS', 'S'],
+					...(o.get('finder_panel') ? { finder: ['c+KeyF', 'F'] } : {}),
 					// plugins
 					link: ['c+KeyK', 'K'],
 					hr: ['!+---+=+~shortcut', ''],
@@ -844,7 +878,7 @@ function InitFrameOptions(o, origin) {
  * @param {Map<string, *>} options - Options
  * @param {HTMLElement} topDiv - Top div
  * @param {SunEditor.FrameOptions} targetOptions - `editor.frameOptions`
- * @returns {{bottomBar: ReturnType<CreateStatusbar>, wysiwygFrame: HTMLElement, codeView: HTMLElement, placeholder: HTMLElement}}
+ * @returns {{bottomBar: ReturnType<CreateStatusbar>, wysiwygFrame: HTMLElement, codeView: HTMLElement, markdownView: HTMLElement, placeholder: HTMLElement}}
  */
 function _initTargetElements(key, options, topDiv, targetOptions) {
 	const editorStyles = targetOptions.get('_defaultStyles');
@@ -900,6 +934,10 @@ function _initTargetElements(key, options, topDiv, targetOptions) {
 
 	// textarea for code view
 	const textarea = dom.utils.createElement('TEXTAREA', { class: 'se-wrapper-inner se-code-viewer', style: editorStyles.frame });
+
+	// textarea for markdown view
+	const markdownTextarea = dom.utils.createElement('TEXTAREA', { class: 'se-wrapper-inner se-markdown-viewer', style: editorStyles.frame });
+
 	const placeholder = dom.utils.createElement('SPAN', { class: 'se-placeholder' });
 	if (targetOptions.get('placeholder')) {
 		placeholder.textContent = targetOptions.get('placeholder');
@@ -909,6 +947,7 @@ function _initTargetElements(key, options, topDiv, targetOptions) {
 		bottomBar: CreateStatusbar(targetOptions, null),
 		wysiwygFrame: wysiwygDiv,
 		codeView: textarea,
+		markdownView: markdownTextarea,
 		placeholder: placeholder,
 	};
 }
@@ -929,7 +968,7 @@ function _checkCodeMirror(options, targetOptions, textarea) {
 				mode: 'htmlmixed',
 				htmlMode: true,
 				lineNumbers: true,
-				lineWrapping: true,
+				lineWrapping: false,
 			},
 			codeMirror.options || {},
 		].reduce((init, option) => {
@@ -1038,6 +1077,7 @@ function _defaultButtons(isRTL, icons, lang) {
 		fullScreen: ['se-code-view-enabled se-component-enabled', lang.fullScreen, 'fullScreen', '', icons.expansion],
 		showBlocks: ['', lang.showBlocks, 'showBlocks', '', icons.show_blocks],
 		codeView: ['se-code-view-enabled se-component-enabled', lang.codeView, 'codeView', '', icons.code_view],
+		markdownView: ['se-code-view-enabled se-component-enabled', lang.markdownView, 'markdownView', '', icons.markdown_view],
 		undo: ['se-component-enabled', lang.undo, 'undo', '', icons.undo],
 		redo: ['se-component-enabled', lang.redo, 'redo', '', icons.redo],
 		preview: ['se-component-enabled', lang.preview, 'preview', '', icons.preview],
@@ -1046,6 +1086,7 @@ function _defaultButtons(isRTL, icons, lang) {
 		dir: ['', lang[isRTL ? 'dir_ltr' : 'dir_rtl'], 'dir', '', icons[isRTL ? 'dir_ltr' : 'dir_rtl']],
 		dir_ltr: ['', lang.dir_ltr, 'dir_ltr', '', icons.dir_ltr],
 		dir_rtl: ['', lang.dir_rtl, 'dir_rtl', '', icons.dir_rtl],
+		finder: ['se-component-enabled', lang.find, 'finder', '', icons.finder],
 		save: ['se-component-enabled', lang.save, 'save', '', icons.save],
 		newDocument: ['se-component-enabled', lang.newDocument, 'newDocument', '', icons.new_document],
 		selectAll: ['se-component-enabled', lang.selectAll, 'selectAll', '', icons.select_all],

package/src/core/section/documentType.js

@@ -183,7 +183,7 @@ class DocumentType {
 			const pages = [];
 
 			for (let i = 0; i < pageBreaks.length; i++) {
-				pages.push({ number: i, top: pageBreaks[i].offsetTop + pageBreakHeight / 2 - scrollTop });
+				pages.push({ number: i, top: pageBreaks[i].offsetTop + pageBreakHeight / 2 });
 			}
 
 			this.#mirrorCache = 0;
@@ -489,7 +489,7 @@ class DocumentType {
 				if (!force) this.#selection.setRange(c, 0, c, 0);
 				const scrollTop = i === 0 && isScrollable ? 0 : c.offsetTop - this.#page.offsetTop - c.offsetHeight + globalTop;
 				this._applyPageScroll(scrollTop, () => {
-					if (this.#toolbar.isSticky) {
+					if (this.#toolbar.isSticky && !this.#store.mode.isBottom) {
 						this._getDisplayPage().scrollTo({ top: scrollTop - this.#context.get('toolbar_main').offsetHeight, behavior: 'smooth' });
 					}
 				});

package/src/events.js

@@ -312,6 +312,17 @@ function onBeforeShowController(params) {}
  */
 function onToggleCodeView(params) {}
 
+/**
+ * @callback
+ * @description Fired when the editor switches between WYSIWYG view and markdown view.
+ * The `is` parameter indicates whether markdown view is now active (`true`) or WYSIWYG view is active (`false`).
+ * @param {Object} params
+ * @param {SunEditor.Deps} params.$ - Kernel dependencies
+ * @param {SunEditor.FrameContext} params.frameContext - frame context
+ * @param {boolean} params.is - markdown view status
+ */
+function onToggleMarkdownView(params) {}
+
 /**
  * @callback
  * @description Fired when the editor enters or exits fullscreen mode.
@@ -859,6 +870,7 @@ function onEmbedDeleteBefore(params) {
  * @property {?onShowController} [onShowController]
  * @property {?onBeforeShowController} [onBeforeShowController]
  * @property {?onToggleCodeView} [onToggleCodeView]
+ * @property {?onToggleMarkdownView} [onToggleMarkdownView]
  * @property {?onToggleFullScreen} [onToggleFullScreen]
  * @property {?onResizeEditor} [onResizeEditor]
  * @property {?onSetToolbarButtons} [onSetToolbarButtons]

package/src/helper/clipboard.js

@@ -43,7 +43,7 @@ export async function write(content) {
 
 	try {
 		await navigator.clipboard.write([
-			/* eslint-disable-next-line compat/compat */
+			// eslint-disable-next-line compat/compat
 			new ClipboardItem({
 				'text/html': new Blob([htmlString], { type: 'text/html' }),
 				'text/plain': new Blob([plainText], { type: 'text/plain' }),