suneditor 3.0.0-rc.4 → 3.0.0

package/src/plugins/dropdown/fontColor.js

@@ -4,9 +4,13 @@ import { dom } from '../../helper';
 
 /**
  * @typedef {Object} FontColorPluginOptions
- * @property {Array<string|{value: string, name: string}>} [items] - Color list
+ * @property {Array<string|{value: string, name: string}>} [items] - Color list.
+ * Use HEX strings or objects with `value`/`name` for labeled colors.
  * @property {number} [splitNum] - Number of colors per line
  * @property {boolean} [disableHEXInput] - Disable HEX input
+ * ```js
+ * { items: ['#ff0000', '#00ff00', { value: '#0000ff', name: 'Blue' }], splitNum: 6 }
+ * ```
  */
 
 /**

package/src/plugins/dropdown/hr.js

@@ -4,6 +4,12 @@ import { dom } from '../../helper';
 /**
  * @typedef {Object} HRPluginOptions
  * @property {Array<{name: string, class: string, style?: string}>} [items] - HR list
+ * ```js
+ * [
+ *   { name: 'Solid', class: '__se__solid', style: 'border-top: 1px solid #000;' },
+ *   { name: 'Dashed', class: '__se__dashed' }
+ * ]
+ * ```
  */
 
 /**

package/src/plugins/dropdown/layout.js

@@ -3,7 +3,10 @@ import { dom } from '../../helper';
 
 /**
  * @typedef {Object} LayoutPluginOptions
- * @property {Array<{name: string, html: string}>} [items] - Layout list
+ * @property {Array<{name: string, html: string}>} [items] - Layout list. Each item defines a named layout template with raw HTML.
+ * ```js
+ * [{ name: 'Two Columns', html: '<div style="display:flex"><div style="flex:1">Left</div><div style="flex:1">Right</div></div>' }]
+ * ```
  */
 
 /**

package/src/plugins/dropdown/lineHeight.js

@@ -4,6 +4,9 @@ import { dom } from '../../helper';
 /**
  * @typedef {Object} LineHeightPluginOptions
  * @property {Array<{text: string, value: string}>} [items] - Line height list
+ * ```js
+ * [{ text: 'Single', value: '1' }, { text: '1.5', value: '1.5' }, { text: 'Double', value: '2' }]
+ * ```
  */
 
 /**

package/src/plugins/dropdown/paragraphStyle.js

@@ -4,15 +4,16 @@ import { dom } from '../../helper';
 /**
  * @typedef {Object} ParagraphStylePluginOptions
  * @property {Array<string|{name: string, class: string, _class: string}>} [items] - Paragraph item list
- * @example
- * use default paragraph styles
+ * ```js
+ * // use default paragraph styles
  * ['spaced', 'bordered', 'neon']
- * custom paragraph styles
+ * // custom paragraph styles
  * [
  *   { name: 'spaced', class: '__se__p-spaced', _class: '' },
  *   { name: 'bordered', class: '__se__p-bordered', _class: '' },
  *   { name: 'neon', class: '__se__p-neon', _class: '' }
  * ]
+ * ```
  */
 
 /**
@@ -75,9 +76,8 @@ class ParagraphStyle extends PluginDropdown {
 		}
 
 		// change format class
-		const toggleClass = dom.utils.hasClass(target, 'active') ? dom.utils.removeClass : dom.utils.addClass;
 		for (let i = 0, len = selectedFormsts.length; i < len; i++) {
-			toggleClass(selectedFormsts[i], value);
+			dom.utils.toggleClass(selectedFormsts[i], value);
 		}
 
 		this.$.menu.dropdownOff();

package/src/plugins/dropdown/table/index.js

@@ -21,7 +21,10 @@ const { _w, ON_OVER_COMPONENT } = env;
  * @property {"x"|"y"|"xy"} [scrollType='x'] - Scroll type (`x`, `y`, `xy`)
  * @property {"top"|"bottom"} [captionPosition='bottom'] - Caption position (`top`, `bottom`)
  * @property {"cell"|"table"} [cellControllerPosition='cell'] - Cell controller position (`cell`, `table`)
- * @property {Array} [colorList] - Color list, used in cell color picker
+ * @property {Array<string>} [colorList] - HEX color list for the cell background color picker.
+ * ```js
+ * { colorList: ['#bbf7d0', '#fde68a', '#fecaca', '#e9d5ff'] }
+ * ```
  */
 
 /**

package/src/plugins/dropdown/table/render/table.html.js

@@ -190,7 +190,7 @@ export function CreateHTML_controller_properties({ lang, icons, options }) {
 	const html = /*html*/ `
 		<div class="se-controller-content">
 			<div class="se-controller-header">
-				<button type="button" data-command="close_props" class="se-btn se-close-btn close" title="${lang.close}" aria-label="${lang.close}">${icons.cancel}</button>
+				<button type="button" data-command="close" class="se-btn se-close-btn close" title="${lang.close}" aria-label="${lang.close}">${icons.cancel}</button>
 				<span class="se-controller-title">${lang.tableProperties}</span>
 			</div>
 			<div class="se-controller-body">

package/src/plugins/dropdown/table/services/table.grid.js

@@ -311,15 +311,23 @@ export class TableGridService {
 			if (remove) {
 				dom.utils.removeItem(cols[insertIndex]);
 			} else {
-				let totalW = 0;
-				for (let i = 0, len = cols.length, w; i < len; i++) {
-					w = numbers.get(cols[i].style.width);
-					w -= Math.round((w * len * 0.1) / 2);
-					totalW += w;
-					cols[i].style.width = `${w}%`;
+				const isAutoLayout = !dom.utils.hasClass(this.#main._element, 'se-table-layout-fixed') && this.#main._element.style.tableLayout !== 'fixed';
+				const hasWidth = !isAutoLayout && Array.prototype.some.call(cols, (col) => numbers.get(col.style.width) > 0);
+
+				if (hasWidth) {
+					let totalW = 0;
+					for (let i = 0, len = cols.length, w; i < len; i++) {
+						w = numbers.get(cols[i].style.width);
+						w -= Math.round((w * len * 0.1) / 2);
+						totalW += w;
+						cols[i].style.width = `${w}%`;
+					}
+					const newCol = dom.utils.createElement('col', { style: `width:${100 - totalW}%` });
+					colgroup.insertBefore(newCol, cols[insertIndex]);
+				} else {
+					// auto layout or no explicit widths — add bare col, let browser distribute
+					colgroup.insertBefore(dom.utils.createElement('col'), cols[insertIndex] || null);
 				}
-				const newCol = dom.utils.createElement('col', { style: `width:${100 - totalW}%` });
-				colgroup.insertBefore(newCol, cols[insertIndex]);
 			}
 		}
 

package/src/plugins/dropdown/table/services/table.style.js

@@ -597,7 +597,6 @@ export class TableStyleService {
 			align_v = verticalAlign;
 		this._propsCache = [];
 
-		const tempColorStyles = _w.getComputedStyle(this.#$.eventManager.__focusTemp);
 		for (let i = 0, t, isBreak; (t = targets[i]); i++) {
 			// eslint-disable-next-line no-shadow
 			const { cssText, border, backgroundColor, color, textAlign, verticalAlign, fontWeight, textDecoration, fontStyle } = t.style;
@@ -606,16 +605,13 @@ export class TableStyleService {
 
 			const { c, s, w } = this.#getBorderStyle(border);
 
-			// colors
+			// use getComputedStyle to normalize any CSS color format to rgb
 			let hexBackColor = backgroundColor;
 			let hexColor = color;
-			if (hexBackColor) {
-				this.#$.eventManager.__focusTemp.style.backgroundColor = hexBackColor;
-				hexBackColor = tempColorStyles.backgroundColor;
-			}
-			if (hexColor) {
-				this.#$.eventManager.__focusTemp.style.color = hexColor;
-				hexColor = tempColorStyles.color;
+			if (hexBackColor || hexColor) {
+				const computed = _w.getComputedStyle(t);
+				if (hexBackColor) hexBackColor = computed.backgroundColor;
+				if (hexColor) hexColor = computed.color;
 			}
 
 			if (b_color && cellBorder.c !== c) b_color = '';

package/src/plugins/dropdown/template.js

@@ -4,6 +4,9 @@ import { dom } from '../../helper';
 /**
  * @typedef {Object} TemplatePluginOptions
  * @property {Array<{name: string, html: string}>} [items] - Template list
+ * ```js
+ * [{ name: 'Greeting', html: '<p>Hello! Thank you for contacting us.</p>' }]
+ * ```
  */
 
 /**

package/src/plugins/dropdown/textStyle.js

@@ -3,7 +3,11 @@ import { dom } from '../../helper';
 
 /**
  * @typedef {Object} TextStylePluginOptions
- * @property {Array<string|{name: string, class: string, tag?: string}>} [items] - Text style item list
+ * @property {Array<string|{name: string, class: string, tag?: string}>} [items] - Text style item list.
+ * Use string shortcuts for built-in styles (e.g., `'shadow'`), or objects for custom styles.
+ * ```js
+ * ['shadow', { name: 'Highlight', class: 'my-highlight', tag: 'mark' }]
+ * ```
  */
 
 /**

package/src/plugins/field/mention.js

@@ -12,7 +12,11 @@ const { debounce } = converter;
  * @property {number} [limitSize=5] - The number of items to display in the mention list
  * @property {number} [searchStartLength=0] - The number of characters to start searching for the mention list
  * @property {number} [delayTime=200] - The time to wait before displaying the mention list
- * @property {Array<{key: string, name: string, url: string}>} [data] - Use data without using API
+ * @property {Array<{key: string, name: string, url: string}>} [data] - Static mention data (used instead of API).
+ * ```js
+ * // data
+ * [{ key: 'john', name: 'John Doe', url: '/users/john' }]
+ * ```
  * @property {string} [apiUrl] - The URL to call the mention list
  * @property {Object<string, string>} [apiHeaders] - The headers to send with the API call
  * @property {boolean} [useCachingData=true] - Whether to cache the mention list data

package/src/plugins/index.js

@@ -1,5 +1,6 @@
 // command
 import blockquote from './command/blockquote';
+import codeBlock from './command/codeBlock';
 import exportPDF from './command/exportPDF';
 import fileUpload from './command/fileUpload';
 import list_bulleted from './command/list_bulleted';
@@ -48,6 +49,7 @@ import anchor from './popup/anchor';
 
 export {
 	blockquote,
+	codeBlock,
 	exportPDF,
 	fileUpload,
 	list_bulleted,
@@ -84,6 +86,7 @@ export {
 };
 export default {
 	blockquote,
+	codeBlock,
 	exportPDF,
 	fileUpload,
 	list_bulleted,

package/src/plugins/input/fontSize.js

@@ -94,9 +94,16 @@ const DEFAULT_UNIT_MAP = {
  * - Accepted values include: `'px'`, `'pt'`, `'em'`, `'rem'`, `'vw'`, `'vh'`, `'%'` or `'text'`.
  * - If `'text'` is used, a text-based font size list is applied.
  * @property {boolean} [showDefaultSizeLabel=true] - Determines whether the default size label is displayed in the dropdown menu.
- * @property {boolean} [showIncDecControls=false] - When `true`, displays increase and decrease buttons for font size adjustments.
- * @property {boolean} [disableInput=true] - When `true`, disables the direct font size input box.
- * @property {Object<string, {default: number, inc: number, min: number, max: number, list: Array<number>}>} [unitMap={}] - Optional object to override or extend the default unit mapping for font sizes.
+ * @property {boolean} [showIncDecControls] - When `true`, displays increase and decrease buttons for font size adjustments.
+ * - Defaults to `false`. Always `false` when `sizeUnit` is `'text'` (ignored).
+ * @property {boolean} [disableInput] - When `true`, disables the direct font size input box.
+ * - Defaults to `true` when `sizeUnit` is `'text'`, otherwise `false`.
+ * @property {Object<string, {default: number, inc: number, min: number, max: number, list: Array<number>}>} [unitMap={}] - Override or extend the default unit mapping for font sizes.
+ * Each key is a unit name (e.g., `'px'`, `'em'`). `default`: initial size, `inc`: step for inc/dec buttons, `min`/`max`: range limits, `list`: dropdown values.
+ * When `sizeUnit` is `'text'`, list items use `{title: string, size: string}` instead of numbers.
+ * ```js
+ * { unitMap: { px: { default: 16, inc: 1, min: 8, max: 72, list: [8, 12, 16, 20, 24, 32, 48] } } }
+ * ```
  */
 
 /**

package/src/plugins/modal/audio.js

@@ -7,10 +7,11 @@ const { NO_EVENT, ON_OVER_COMPONENT } = env;
 
 /**
  * @typedef {Object} AudioPluginOptions
- * @property {string} [defaultWidth="300px"] - The default width of the `AUDIO` tag (e.g., `"300px"`).
- * @property {string} [defaultHeight="150px"] - The default height of the `AUDIO` tag (e.g., `"150px"`).
+ * @property {string} [defaultWidth="300px"] - The default width of the `AUDIO` tag.
+ * @property {string} [defaultHeight="150px"] - The default height of the `AUDIO` tag.
  * @property {boolean} [createFileInput] - Whether to create a file input element.
- * @property {boolean} [createUrlInput] - Whether to create a URL input element (default is `true` if file input is not created).
+ * @property {boolean} [createUrlInput] - Whether to create a URL input element.
+ * - Defaults to `true`. Always `true` when `createFileInput` is `false`.
  * @property {string} [uploadUrl] - The URL to which files will be uploaded.
  * @property {Object<string, string>} [uploadHeaders] - Headers to include in the file upload request.
  * @property {number} [uploadSizeLimit] - The total upload size limit in bytes.
@@ -18,6 +19,9 @@ const { NO_EVENT, ON_OVER_COMPONENT } = env;
  * @property {boolean} [allowMultiple] - Whether to allow multiple file uploads.
  * @property {string} [acceptedFormats="audio/*"] - Accepted file formats (default is `"audio/*"`).
  * @property {Object<string, string>} [audioTagAttributes] - Additional attributes to set on the `AUDIO` tag.
+ * ```js
+ * { audioTagAttributes: { controls: 'true', preload: 'metadata' } }
+ * ```
  * @property {SunEditor.ComponentInsertType} [insertBehavior] - Component insertion behavior for selection and cursor placement.
  * - [default: `options.get('componentInsertBehavior')`]
  * - `auto`: Move cursor to the next line if possible, otherwise select the component.

package/src/plugins/modal/embed.js

@@ -15,28 +15,31 @@ const { _w, NO_EVENT } = env;
  * @property {number} [uploadSizeLimit] - The total file upload size limit in bytes.
  * @property {number} [uploadSingleSizeLimit] - The single file upload size limit in bytes.
  * @property {Object<string, string>} [iframeTagAttributes] - Additional attributes to set on the `IFRAME` tag.
- * @property {string} [query_youtube] - YouTube query parameter.
- * @property {string} [query_vimeo] - Vimeo query parameter.
- * @property {Array<RegExp>} [urlPatterns] - Additional URL patterns for embed.
- * @property {Object<string, {pattern: RegExp, action: (url: string) => string, tag: string}>} [embedQuery] - Custom query objects for additional embedding services.
- * Example :
+ * ```js
+ * { iframeTagAttributes: { allowfullscreen: 'true', loading: 'lazy' } }
+ * ```
+ * @property {string} [query_youtube] - YouTube query parameter appended to the embed URL.
+ * ```js
+ * { query_youtube: 'autoplay=1&mute=1' }
+ * ```
+ * @property {string} [query_vimeo] - Vimeo query parameter appended to the embed URL.
+ * ```js
+ * { query_vimeo: 'autoplay=1' }
+ * ```
+ * @property {Array<RegExp>} [urlPatterns] - Additional URL patterns to recognize as embeddable content.
+ * @property {Object<string, {pattern: RegExp, action: (url: string) => string, tag: string}>} [embedQuery] - Custom embed service definitions.
+ * Each key is a service name, with `pattern` to match the URL, `action` to transform it into an embed URL, and `tag` for the output element.
+ * ```js
  * {
- *   facebook: {
- *     pattern: /(?:https?:\/\/)?(?:www\.)?(?:facebook\.com)\/(.+)/i,
- *     action: (url) => {
- *       return `https://www.facebook.com/plugins/post.php?href=${encodeURIComponent(url)}&show_text=true&width=500`;
- *     },
- *     tag: 'iframe'
- *   },
- *   twitter: {
- *     pattern: /(?:https?:\/\/)?(?:www\.)?(?:twitter\.com)\/(status|embed)\/(.+)/i,
- *     action: (url) => {
- *       return `https://platform.twitter.com/embed/Tweet.html?url=${encodeURIComponent(url)}`;
- *     },
- *     tag: 'iframe'
- *   },
- *   // Additional services...
+ *   embedQuery: {
+ *     facebook: {
+ *       pattern: /(?:https?:\/\/)?(?:www\.)?facebook\.com\/(.+)/i,
+ *       action: (url) => `https://www.facebook.com/plugins/post.php?href=${encodeURIComponent(url)}`,
+ *       tag: 'iframe'
+ *     }
+ *   }
  * }
+ * ```
  * @property {SunEditor.Module.Figure.Controls} [controls] - Figure controls.
  * @property {SunEditor.ComponentInsertType} [insertBehavior] - Component insertion behavior for selection and cursor placement.
  * - [default: `options.get('componentInsertBehavior')`]

package/src/plugins/modal/image/index.js

@@ -19,9 +19,13 @@ const { NO_EVENT } = env;
  * @property {string} [defaultHeight="auto"] - The default height of the image. If a number is provided, `"px"` will be appended.
  * @property {boolean} [percentageOnlySize=false] - Whether to allow only percentage-based sizing.
  * @property {boolean} [createFileInput=true] - Whether to create a file input element for image uploads.
- * @property {boolean} [createUrlInput=true] - Whether to create a URL input element for image insertion.
+ * @property {boolean} [createUrlInput] - Whether to create a URL input element for image insertion.
+ * - Defaults to `true`. Always `true` when `createFileInput` is `false`.
  * @property {string} [uploadUrl] - The URL endpoint for image file uploads.
  * @property {Object<string, string>} [uploadHeaders] - Additional headers to include in the file upload request.
+ * ```js
+ * { uploadUrl: '/api/upload/image', uploadHeaders: { Authorization: 'Bearer token' } }
+ * ```
  * @property {number} [uploadSizeLimit] - The total upload size limit in bytes.
  * @property {number} [uploadSingleSizeLimit] - The single file upload size limit in bytes.
  * @property {boolean} [allowMultiple=false] - Whether multiple image uploads are allowed.

package/src/plugins/modal/math.js

@@ -8,11 +8,16 @@ const { _w, _d } = env;
  * @typedef {Object} MathPluginOptions
  * @property {boolean} [canResize=true] - Whether the math modal can be resized.
  * @property {boolean} [autoHeight=false] - Whether to automatically adjust the height of the modal.
- * @property {Array<object>} [fontSizeList] - A list of font size options for rendering math expressions.
+ * @property {Array<{text: string, value: string, default?: true}>} [fontSizeList] - A list of font size options for the math expression size selector.
+ * ```js
+ * // fontSizeList
+ * [{ text: '1', value: '1em', default: true }, { text: '1.5', value: '1.5em' }, { text: '2', value: '2em' }]
+ * ```
  * @property {?(...args: *) => *} [onPaste] - A callback function to handle paste events in the math input area.
  * @property {Object} [formSize={}] - An object specifying the dimensions for the math modal.
  * @property {string} [formSize.width="460px"] - The default width of the math modal.
- * @property {string} [formSize.height="14em"] - The default height of the math modal.
+ * @property {string} [formSize.height] - The default height of the math modal.
+ * - Defaults to `"14em"`. When `autoHeight` is `true`, defaults to `formSize.minHeight`.
  * @property {string} [formSize.maxWidth] - The maximum width of the math modal.
  * @property {string} [formSize.maxHeight] - The maximum height of the math modal.
  * @property {string} [formSize.minWidth="400px"] - The minimum width of the math modal.

package/src/plugins/modal/video/index.js

@@ -16,21 +16,38 @@ import { CreateHTML_modal } from './render/video.html';
  * @property {string} [defaultHeight] - The default height of the video element. If a number is provided, `"px"` will be appended.
  * @property {boolean} [percentageOnlySize=false] - Whether to allow only percentage-based sizing.
  * @property {boolean} [createFileInput=false] - Whether to create a file input element for video uploads.
- * @property {boolean} [createUrlInput=true] - Whether to create a URL input element for video embedding.
+ * @property {boolean} [createUrlInput] - Whether to create a URL input element for video embedding.
+ * - Defaults to `true`. Always `true` when `createFileInput` is `false`.
  * @property {string} [uploadUrl] - The URL endpoint for video file uploads.
  * @property {Object<string, string>} [uploadHeaders] - Additional headers to include in the video upload request.
  * @property {number} [uploadSizeLimit] - The total upload size limit for videos in bytes.
  * @property {number} [uploadSingleSizeLimit] - The single file upload size limit for videos in bytes.
  * @property {boolean} [allowMultiple=false] - Whether multiple video uploads are allowed.
  * @property {string} [acceptedFormats="video/*"] - Accepted file formats for video uploads (`"video/*"`).
- * @property {number} [defaultRatio=0.5625] - The default aspect ratio for the video (e.g., 16:9 is 0.5625).
+ * @property {number} [defaultRatio=0.5625] - The default aspect ratio for the video (height/width, e.g. 16:9 → `9/16 = 0.5625`).
  * @property {boolean} [showRatioOption=true] - Whether to display the ratio option in the modal.
- * @property {Array} [ratioOptions] - Custom ratio options for video resizing.
+ * @property {Array<{name: string, value: number}>} [ratioOptions] - Custom ratio options for video resizing (value = height/width).
+ * ```js
+ * // ratioOptions
+ * [{ name: '16:9', value: 0.5625 }, { name: '4:3', value: 0.75 }]
+ * ```
  * @property {Object<string, string>} [videoTagAttributes] - Additional attributes to set on the `VIDEO` tag.
+ * ```js
+ * { videoTagAttributes: { controls: 'true', muted: 'true', playsinline: '' } }
+ * ```
  * @property {Object<string, string>} [iframeTagAttributes] - Additional attributes to set on the `IFRAME` tag.
+ * ```js
+ * { iframeTagAttributes: { allowfullscreen: 'true', loading: 'lazy' } }
+ * ```
  * @property {string} [query_youtube=""] - Additional query parameters for YouTube embedding.
+ * ```js
+ * { query_youtube: 'autoplay=1&mute=1' }
+ * ```
  * @property {string} [query_vimeo=""] - Additional query parameters for Vimeo embedding.
- * @property {Object<string, {pattern: RegExp, action: (url: string) => string, tag: string}>} [embedQuery] - Custom query objects for additional embedding services.
+ * ```js
+ * { query_vimeo: 'autoplay=1' }
+ * ```
+ * @property {Object<string, {pattern: RegExp, action: (url: string) => string, tag: string}>} [embedQuery] - Custom embed service definitions (see `EmbedPluginOptions.embedQuery`).
  * @property {Array<RegExp>} [urlPatterns] - Additional URL patterns for video embedding.
  * @property {Array<string>} [extensions] - Additional file extensions to be recognized for video uploads.
  * @property {SunEditor.Module.Figure.Controls} [controls] - Figure controls.

package/src/themes/cobalt.css

@@ -38,15 +38,19 @@
 	--se-edit-outline: #444;
 
 	/** --------------------------- layout - [colors] ----------- */
-	/* main shell and typography */
-	--se-main-font-family: Helvetica Neue;
 	--se-main-out-color: #444;
 	--se-main-color: #ccc;
 	--se-main-color-lighter: #aaa;
 	--se-main-background-color: #0f1828;
-	--se-code-view-color: #030712;
+	--se-code-view-color: #ccc;
 	--se-main-font-color: #ccc;
-	--se-code-view-background-color: #ddd;
+	--se-code-view-background-color: #0d1520;
+	--se-code-view-line-color: #8899aa;
+	--se-code-view-line-background-color: #0f1828;
+	--se-markdown-view-color: #ccc;
+	--se-markdown-view-background-color: #0d1520;
+	--se-markdown-view-line-color: #8899aa;
+	--se-markdown-view-line-background-color: #0f1828;
 	--se-main-divider-color: #555;
 	--se-main-border-color: #666;
 	--se-main-outline-color: #444;
@@ -54,6 +58,11 @@
 	--se-statusbar-font-color: #aaa;
 	--se-overlay-background-color: #111;
 
+	/* 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: #162040;
 	--se-hover-dark-color: #304878;

package/src/themes/cream.css

@@ -38,8 +38,6 @@
 	--se-edit-outline: #c4a06e;
 
 	/** --------------------------- layout - [colors] ----------- */
-	/* main shell and typography */
-	--se-main-font-family: Helvetica Neue;
 	--se-main-out-color: #ebe4d5;
 	--se-main-color: #2b2b2b;
 	--se-main-color-lighter: #555555;
@@ -47,6 +45,12 @@
 	--se-code-view-color: #2b2b2b;
 	--se-main-font-color: #2b2b2b;
 	--se-code-view-background-color: #fefcf6;
+	--se-code-view-line-color: #8a7e68;
+	--se-code-view-line-background-color: #f5f0e0;
+	--se-markdown-view-color: #2b2b2b;
+	--se-markdown-view-background-color: #fefcf6;
+	--se-markdown-view-line-color: #8a7e68;
+	--se-markdown-view-line-background-color: #f5f0e0;
 	--se-main-divider-color: #d5c9b0;
 	--se-main-border-color: #c4a06e;
 	--se-main-outline-color: #e0d6c2;
@@ -54,6 +58,11 @@
 	--se-statusbar-font-color: #666666;
 	--se-overlay-background-color: rgba(0, 0, 0, 0.3);
 
+	/* finder */
+	--se-find-match-color: rgba(255, 213, 0, 0.4);
+	--se-find-current-color: rgba(255, 150, 50, 0.65);
+	--se-find-no-match-color: rgba(255, 80, 80, 0.12);
+
 	/* hover states */
 	--se-hover-color: #d6e8f8;
 	--se-hover-dark-color: #6ba3d6;

package/src/themes/dark.css

@@ -39,15 +39,19 @@
 	--se-edit-outline: #3b4048;
 
 	/** --------------------------- layout - [colors] ----------- */
-	/* main shell and typography */
-	--se-main-font-family: Helvetica Neue;
 	--se-main-out-color: #21252b;
 	--se-main-color: #d7dae0;
 	--se-main-color-lighter: #abb2bf;
 	--se-main-background-color: #282c34;
-	--se-code-view-color: #181a1f;
+	--se-code-view-color: #d7dae0;
 	--se-main-font-color: #d7dae0;
-	--se-code-view-background-color: #d7dae0;
+	--se-code-view-background-color: #1e2127;
+	--se-code-view-line-color: #abb2bf;
+	--se-code-view-line-background-color: #282c34;
+	--se-markdown-view-color: #d7dae0;
+	--se-markdown-view-background-color: #1e2127;
+	--se-markdown-view-line-color: #abb2bf;
+	--se-markdown-view-line-background-color: #282c34;
 	--se-main-divider-color: #3b4048;
 	--se-main-border-color: #3e4451;
 	--se-main-outline-color: #2f333d;
@@ -55,6 +59,11 @@
 	--se-statusbar-font-color: #9da5b4;
 	--se-overlay-background-color: rgba(0, 0, 0, 0.55);
 
+	/* 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: #28434c;
 	--se-hover-dark-color: #365864;

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/assets/suneditor.css.d.ts

@@ -1 +1 @@
-declare module 'suneditor/css';
+declare module 'suneditor/css/editor';