suneditor 3.0.0-rc.4 → 3.0.0

package/types/modules/manager/FileManager.d.ts

@@ -49,6 +49,15 @@ declare class FileManager {
 	 * @param {FileList|File[]|{formData: FormData, size: number}} data FormData in body or Files array
 	 * @param {?(xmlHttp: XMLHttpRequest) => boolean} [callBack] Success call back function
 	 * @param {?(res: *, xmlHttp: XMLHttpRequest) => string} [errorCallBack] Error call back function
+	 * @example
+	 * // Upload with a File array
+	 * const files = [new File(['content'], 'photo.jpg', { type: 'image/jpeg' })];
+	 * fileManager.upload('/api/upload', { Authorization: 'Bearer token' }, files, onSuccess, onError);
+	 *
+	 * // Upload with a pre-built FormData
+	 * const formData = new FormData();
+	 * formData.append('file-0', myFile);
+	 * fileManager.upload('/api/upload', null, { formData, size: 1 }, onSuccess, onError);
 	 */
 	upload(
 		uploadUrl: string,
@@ -71,6 +80,10 @@ declare class FileManager {
 	 * @param {?Object<string, string>} uploadHeader Request header
 	 * @param {FileList|File[]|{formData: FormData, size: number}} data FormData in body or Files array
 	 * @returns {Promise<XMLHttpRequest>}
+	 * @example
+	 * const files = [new File(['content'], 'photo.jpg')];
+	 * const xmlHttp = await fileManager.asyncUpload('/api/upload', { Authorization: 'Bearer token' }, files);
+	 * const response = JSON.parse(xmlHttp.responseText);
 	 */
 	asyncUpload(
 		uploadUrl: string,
@@ -92,6 +105,10 @@ declare class FileManager {
 	 * @param {string} params.name File name
 	 * @param {number} params.size File size
 	 * @returns
+	 * @example
+	 * const imgElement = document.createElement('img');
+	 * imgElement.src = 'https://example.com/photo.jpg';
+	 * fileManager.setFileData(imgElement, { name: 'photo.jpg', size: 2048 });
 	 */
 	setFileData(
 		element: Node,

package/types/modules/ui/ModalAnchorEditor.d.ts

@@ -18,11 +18,15 @@ export type ModalAnchorEditorParams = {
 	 */
 	noAutoPrefix?: boolean;
 	/**
-	 * - The `rel` attribute list of anchor tag.
+	 * - Available `rel` attribute values shown as checkboxes in the link modal.
 	 */
 	relList?: Array<string>;
 	/**
-	 * - Default `rel` attributes of anchor tag.
+	 * - Default `rel` values auto-applied by condition.
+	 * `default` is always applied, `check_new_window` when "Open in new window" is checked, `check_bookmark` for bookmark links.
+	 * ```js
+	 * { relList: ['nofollow', 'noreferrer', 'noopener'], defaultRel: { default: 'noopener', check_new_window: 'noreferrer' } }
+	 * ```
 	 */
 	defaultRel?: {
 		default?: string;
@@ -62,8 +66,12 @@ export type ModalAnchorEditorParams = {
  * @property {boolean} [textToDisplay=''] - Create Text to display input.
  * @property {boolean} [openNewWindow=false] - Default checked value of the "Open in new window" checkbox.
  * @property {boolean} [noAutoPrefix=false] - If `true`, disables the automatic prefixing of the host URL to the value of the link.
- * @property {Array<string>} [relList=[]] - The `rel` attribute list of anchor tag.
- * @property {{default?: string, check_new_window?: string, check_bookmark?: string}} [defaultRel={}] - Default `rel` attributes of anchor tag.
+ * @property {Array<string>} [relList=[]] - Available `rel` attribute values shown as checkboxes in the link modal.
+ * @property {{default?: string, check_new_window?: string, check_bookmark?: string}} [defaultRel={}] - Default `rel` values auto-applied by condition.
+ * `default` is always applied, `check_new_window` when "Open in new window" is checked, `check_bookmark` for bookmark links.
+ * ```js
+ * { relList: ['nofollow', 'noreferrer', 'noopener'], defaultRel: { default: 'noopener', check_new_window: 'noreferrer' } }
+ * ```
  * @property {string} [uploadUrl] - File upload URL.
  * @property {Object<string, string>} [uploadHeaders] - File upload headers.
  * @property {number} [uploadSizeLimit] - File upload size limit.
@@ -82,6 +90,17 @@ declare class ModalAnchorEditor {
 	 * @param {SunEditor.Deps} $ Kernel dependencies
 	 * @param {HTMLElement} modalForm Modal <form>
 	 * @param {ModalAnchorEditorParams} params ModalAnchorEditor options
+	 * @example
+	 * // In a link plugin (text anchor):
+	 * this.anchor = new ModalAnchorEditor(this.$, modalEl, this.pluginOptions);
+	 *
+	 * // In an image plugin (non-text anchor with custom options):
+	 * const linkOptions = this.$.plugins.link ? this.$.plugins.link.pluginOptions : {};
+	 * this.anchor = new ModalAnchorEditor(this.$, modalEl.html, {
+	 *   ...linkOptions,
+	 *   textToDisplay: false,
+	 *   title: true,
+	 * });
 	 */
 	constructor($: SunEditor.Deps, modalForm: HTMLElement, params: ModalAnchorEditorParams);
 	openNewWindow: boolean;
@@ -135,12 +154,30 @@ declare class ModalAnchorEditor {
 	/**
 	 * @description Opens the anchor editor modal and populates it with data.
 	 * @param {boolean} isUpdate - Indicates whether an existing anchor is being updated (`true`) or a new one is being created (`false`).
+	 * @example
+	 * // Called from modalOn() — populate form for a new link:
+	 * this.anchor.on(false);
+	 *
+	 * // Populate form to edit an existing link (call set() first):
+	 * this.anchor.set(existingAnchorElement);
+	 * this.anchor.on(true);
 	 */
 	on(isUpdate: boolean): void;
 	/**
 	 * @description Creates an anchor (`<a>`) element with the specified attributes.
 	 * @param {boolean} notText - If `true`, the anchor will not contain text content.
 	 * @returns {HTMLElement|null} - The newly created anchor element, or `null` if the URL is empty.
+	 * @example
+	 * // In a link plugin — create anchor with text content:
+	 * const oA = this.anchor.create(false);
+	 * if (oA === null) return false;
+	 * this.$.html.insertNode(oA);
+	 *
+	 * // In an image plugin — create anchor without text (wraps an image):
+	 * const anchor = this.anchor.create(true);
+	 * if (anchor) {
+	 *   anchor.appendChild(imgElement);
+	 * }
 	 */
 	create(notText: boolean): HTMLElement | null;
 	/**

package/types/modules/ui/SelectMenu.d.ts

@@ -2,7 +2,12 @@ import type {} from '../../typedef';
 export default SelectMenu;
 export type SelectMenuParams = {
 	/**
-	 * Position of the select menu, specified as `"[left|right]-[middle|top|bottom]"` or `"[top|bottom]-[center|left|right]"`
+	 * Position of the select menu, specified as `"[left|right]-[middle|top|bottom]"` or `"[top|bottom]-[center|left|right]"`.
+	 * ```js
+	 * // position
+	 * 'left-bottom' // menu appears below, aligned to the left
+	 * 'top-center'  // menu appears above, centered
+	 * ```
 	 */
 	position: string;
 	/**
@@ -25,15 +30,30 @@ export type SelectMenuParams = {
 	 * Optional method to call when the menu is closed
 	 */
 	closeMethod?: () => void;
+	/**
+	 * Optional max-height CSS value (e.g. `"200px"`). Enables scrolling when items exceed this height.
+	 */
+	maxHeight?: string;
+	/**
+	 * Optional min-width CSS value (e.g. `"130px"`).
+	 */
+	minWidth?: string;
 };
 /**
  * @typedef {Object} SelectMenuParams
- * @property {string} position Position of the select menu, specified as `"[left|right]-[middle|top|bottom]"` or `"[top|bottom]-[center|left|right]"`
+ * @property {string} position Position of the select menu, specified as `"[left|right]-[middle|top|bottom]"` or `"[top|bottom]-[center|left|right]"`.
+ * ```js
+ * // position
+ * 'left-bottom' // menu appears below, aligned to the left
+ * 'top-center'  // menu appears above, centered
+ * ```
  * @property {boolean} [checkList=false] Flag to determine if the checklist is enabled (`true` or `false`)
  * @property {"rtl" | "ltr"} [dir="ltr"] Optional text direction: `"rtl"` for right-to-left, `"ltr"` for left-to-right
  * @property {number} [splitNum=0] Optional split number for horizontal positioning; defines how many items per row
  * @property {() => void} [openMethod] Optional method to call when the menu is opened
  * @property {() => void} [closeMethod] Optional method to call when the menu is closed
+ * @property {string} [maxHeight] Optional max-height CSS value (e.g. `"200px"`). Enables scrolling when items exceed this height.
+ * @property {string} [minWidth] Optional min-width CSS value (e.g. `"130px"`).
  */
 /**
  * @class
@@ -61,6 +81,8 @@ declare class SelectMenu {
 	horizontal: boolean;
 	openMethod: () => void;
 	closeMethod: () => void;
+	maxHeight: string;
+	minWidth: string;
 	/**
 	 * @description Creates the select menu items.
 	 * @param {Array<string>|SunEditor.NodeCollection} items - Command list of selectable items.
@@ -72,6 +94,12 @@ declare class SelectMenu {
 	 * @param {Node} referElement - The element that triggers the select menu.
 	 * @param {(command: string) => void} selectMethod - The function to execute when an item is selected.
 	 * @param {{class?: string, style?: string}} [attr={}] - Additional attributes for the select menu container.
+	 * @example
+	 * // Basic: attach menu to a button with a selection callback
+	 * selectMenu.on(this.alignButton, this.onAlignSelect.bind(this));
+	 *
+	 * // With custom attributes for styling
+	 * selectMenu.on(this.alignButton, this.onAlignSelect.bind(this), { class: 'se-figure-select-list' });
 	 */
 	on(
 		referElement: Node,
@@ -84,7 +112,17 @@ declare class SelectMenu {
 	/**
 	 * @description Select menu open
 	 * @param {?string} [position] `"[left|right]-[middle|top|bottom] | [top|bottom]-[center|left|right]"`
+	 * Always specify in LTR orientation. In RTL environments, left/right are automatically swapped.
 	 * @param {?string} [onItemQuerySelector] The querySelector string of the menu to be activated
+	 * @example
+	 * // Open with default position (uses constructor's position param)
+	 * selectMenu.open();
+	 *
+	 * // Open at a specific position (always use LTR basis; RTL is auto-mirrored)
+	 * selectMenu.open('bottom-left');
+	 *
+	 * // Open with an active item highlighted via querySelector
+	 * selectMenu.open('', '[data-command="' + this.align + '"]');
 	 */
 	open(position?: string | null, onItemQuerySelector?: string | null): void;
 	/**

package/types/plugins/browser/fileBrowser.d.ts

@@ -2,7 +2,7 @@ import type {} from '../../typedef';
 export default FileBrowser;
 export type FileBrowserPluginOptions = {
 	/**
-	 * - Direct data without server calls
+	 * - Direct data without server calls (bypasses URL fetch).
 	 */
 	data?:
 		| {
@@ -20,21 +20,27 @@ export type FileBrowserPluginOptions = {
 		[x: string]: string;
 	};
 	/**
-	 * - Default thumbnail
+	 * - Default thumbnail URL or a function that returns a thumbnail URL per item.
 	 */
 	thumbnail?: string | ((item: SunEditor.Module.Browser.File) => string);
 	/**
 	 * - Additional tag names
+	 * ```js
+	 * { url: '/api/files', headers: { Authorization: 'Bearer token' }, thumbnail: (item) => item.thumbUrl }
+	 * ```
 	 */
 	props?: Array<string>;
 };
 /**
  * @typedef {Object} FileBrowserPluginOptions
- * @property {Object<string, *>|Array<*>} [data] - Direct data without server calls
+ * @property {Object<string, *>|Array<*>} [data] - Direct data without server calls (bypasses URL fetch).
  * @property {string} [url] - Server request URL
  * @property {Object<string, string>} [headers] - Server request headers
- * @property {string|((item: SunEditor.Module.Browser.File) => string)} [thumbnail] - Default thumbnail
+ * @property {string|((item: SunEditor.Module.Browser.File) => string)} [thumbnail] - Default thumbnail URL or a function that returns a thumbnail URL per item.
  * @property {Array<string>} [props] - Additional tag names
+ * ```js
+ * { url: '/api/files', headers: { Authorization: 'Bearer token' }, thumbnail: (item) => item.thumbUrl }
+ * ```
  */
 /**
  * @class

package/types/plugins/command/codeBlock.d.ts

@@ -0,0 +1,53 @@
+import type {} from '../../typedef';
+export default CodeBlock;
+export type CodeBlockPluginOptions = {
+	/**
+	 * - List of selectable programming languages for code blocks.
+	 * - Defaults to 21 common languages
+	 * - [javascript, typescript, html, css, json, python, java, c, cpp, csharp, go, rust, ruby, php, swift, kotlin, sql, bash, markdown, xml, yaml].
+	 * - Set to empty array `[]` to disable language selection UI entirely.
+	 * ```js
+	 * { codeBlock: { langs: ['javascript', 'python', 'html', 'css'] } }
+	 * ```
+	 */
+	langs?: Array<string>;
+};
+/**
+ * @typedef {Object} CodeBlockPluginOptions
+ * @property {Array<string>} [langs] - List of selectable programming languages for code blocks.
+ * - Defaults to 21 common languages
+ * - [javascript, typescript, html, css, json, python, java, c, cpp, csharp, go, rust, ruby, php, swift, kotlin, sql, bash, markdown, xml, yaml].
+ * - Set to empty array `[]` to disable language selection UI entirely.
+ * ```js
+ * { codeBlock: { langs: ['javascript', 'python', 'html', 'css'] } }
+ * ```
+ */
+/**
+ * @class
+ * @implements {PluginDropdown}
+ * @description Code block plugin — toggles `<pre>` formatting with language selection.
+ * - Toolbar: command button (toggle `<pre>`) + optional dropdown (language list)
+ * - Hover UI: shows language selector on `<pre>` hover (Controller + SelectMenu)
+ * - I/O conversion: `<pre class="language-xxx">` ↔ `<pre><code class="language-xxx">`
+ */
+declare class CodeBlock extends PluginCommand implements PluginDropdown {
+	/**
+	 * @constructor
+	 * @param {SunEditor.Kernel} kernel - The Kernel instance
+	 * @param {CodeBlockPluginOptions} pluginOptions - Configuration options for the CodeBlock plugin.
+	 */
+	constructor(kernel: SunEditor.Kernel, pluginOptions: CodeBlockPluginOptions);
+	title: any;
+	onMouseMove(params: SunEditor.HookParams.MouseEvent): void;
+	active(element: HTMLElement | null, target: HTMLElement | null): boolean | void;
+	on(target?: HTMLElement): void;
+	/** @hook Module.Controller */
+	controllerClose(): void;
+	/**
+	 * @description Cleans up resources.
+	 */
+	destroy(): void;
+	#private;
+}
+import { PluginDropdown } from '../../interfaces';
+import { PluginCommand } from '../../interfaces';

package/types/plugins/command/fileUpload.d.ts

@@ -24,7 +24,10 @@ export type FileUploadPluginOptions = {
 	 */
 	allowMultiple?: boolean;
 	/**
-	 * - Accepted file formats (e.g., 'image/*, .pdf')
+	 * - Accepted file formats.
+	 * ```js
+	 * { acceptedFormats: 'image/*, .pdf, .docx' }
+	 * ```
 	 */
 	acceptedFormats?: string;
 	/**
@@ -52,7 +55,10 @@ export type FileUploadPluginOptions = {
  * @property {number} [uploadSizeLimit] - Total upload size limit in bytes
  * @property {number} [uploadSingleSizeLimit] - Single file size limit in bytes
  * @property {boolean} [allowMultiple=false] - Allow multiple file uploads
- * @property {string} [acceptedFormats="*"] - Accepted file formats (e.g., 'image/*, .pdf')
+ * @property {string} [acceptedFormats="*"] - Accepted file formats.
+ * ```js
+ * { acceptedFormats: 'image/*, .pdf, .docx' }
+ * ```
  * @property {string} [as="box"] - Specify the default form of the file component as `box` or `link`
  * @property {Array<string>} [controls] - Additional controls to be added to the figure
  * @property {SunEditor.ComponentInsertType} [insertBehavior] - Component insertion behavior for selection and cursor placement.

package/types/plugins/dropdown/backgroundColor.d.ts

@@ -2,7 +2,8 @@ import type {} from '../../typedef';
 export default BackgroundColor;
 export type BackgroundColorPluginOptions = {
 	/**
-	 * - Color list
+	 * - Color list.
+	 * Use HEX strings or objects with `value`/`name` for labeled colors.
 	 */
 	items?: Array<
 		| string
@@ -17,14 +18,21 @@ export type BackgroundColorPluginOptions = {
 	splitNum?: number;
 	/**
 	 * - Disable HEX input
+	 * ```js
+	 * { items: ['#ff0000', '#00ff00', { value: '#0000ff', name: 'Blue' }], splitNum: 6 }
+	 * ```
 	 */
 	disableHEXInput?: boolean;
 };
 /**
  * @typedef {Object} BackgroundColorPluginOptions
- * @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 }
+ * ```
  */
 /**
  * @class

package/types/plugins/dropdown/blockStyle.d.ts

@@ -8,7 +8,13 @@ export type BlockStyleItem = {
 };
 export type BlockStylePluginOptions = {
 	/**
-	 * - Format list
+	 * - Format list.
+	 * Use string shortcuts for built-in tags, or `BlockStyleItem` objects for custom block styles.
+	 * - `command` — `"line"`: single line block, `"br-line"`: br-separated block, `"block"`: container block.
+	 * ```js
+	 * // string shortcuts + custom item
+	 * ['p', 'h1', 'h2', 'blockquote', { tag: 'div', command: 'block', name: 'Custom Block', class: 'my-block' }]
+	 * ```
 	 */
 	items?: Array<'p' | 'div' | 'blockquote' | 'pre' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | string | BlockStyleItem>;
 };
@@ -17,7 +23,13 @@ export type BlockStylePluginOptions = {
  */
 /**
  * @typedef {Object} BlockStylePluginOptions
- * @property {Array<"p"|"div"|"blockquote"|"pre"|"h1"|"h2"|"h3"|"h4"|"h5"|"h6"|string|BlockStyleItem>} [items] - Format list
+ * @property {Array<"p"|"div"|"blockquote"|"pre"|"h1"|"h2"|"h3"|"h4"|"h5"|"h6"|string|BlockStyleItem>} [items] - Format list.
+ * Use string shortcuts for built-in tags, or `BlockStyleItem` objects for custom block styles.
+ * - `command` — `"line"`: single line block, `"br-line"`: br-separated block, `"block"`: container block.
+ * ```js
+ * // string shortcuts + custom item
+ * ['p', 'h1', 'h2', 'blockquote', { tag: 'div', command: 'block', name: 'Custom Block', class: 'my-block' }]
+ * ```
  */
 /**
  * @class

package/types/plugins/dropdown/fontColor.d.ts

@@ -2,7 +2,8 @@ import type {} from '../../typedef';
 export default FontColor;
 export type FontColorPluginOptions = {
 	/**
-	 * - Color list
+	 * - Color list.
+	 * Use HEX strings or objects with `value`/`name` for labeled colors.
 	 */
 	items?: Array<
 		| string
@@ -17,14 +18,21 @@ export type FontColorPluginOptions = {
 	splitNum?: number;
 	/**
 	 * - Disable HEX input
+	 * ```js
+	 * { items: ['#ff0000', '#00ff00', { value: '#0000ff', name: 'Blue' }], splitNum: 6 }
+	 * ```
 	 */
 	disableHEXInput?: boolean;
 };
 /**
  * @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 }
+ * ```
  */
 /**
  * @class

package/types/plugins/dropdown/hr.d.ts

@@ -3,6 +3,12 @@ export default HR;
 export type HRPluginOptions = {
 	/**
 	 * - HR list
+	 * ```js
+	 * [
+	 * { name: 'Solid', class: '__se__solid', style: 'border-top: 1px solid #000;' },
+	 * { name: 'Dashed', class: '__se__dashed' }
+	 * ]
+	 * ```
 	 */
 	items?: Array<{
 		name: string;
@@ -13,6 +19,12 @@ export type HRPluginOptions = {
 /**
  * @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' }
+ * ]
+ * ```
  */
 /**
  * @class

package/types/plugins/dropdown/layout.d.ts

@@ -2,7 +2,10 @@ import type {} from '../../typedef';
 export default Layout;
 export type LayoutPluginOptions = {
 	/**
-	 * - Layout list
+	 * - 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>' }]
+	 * ```
 	 */
 	items?: Array<{
 		name: string;
@@ -11,7 +14,10 @@ export type LayoutPluginOptions = {
 };
 /**
  * @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>' }]
+ * ```
  */
 /**
  * @class

package/types/plugins/dropdown/lineHeight.d.ts

@@ -3,6 +3,9 @@ export default LineHeight;
 export type LineHeightPluginOptions = {
 	/**
 	 * - Line height list
+	 * ```js
+	 * [{ text: 'Single', value: '1' }, { text: '1.5', value: '1.5' }, { text: 'Double', value: '2' }]
+	 * ```
 	 */
 	items?: Array<{
 		text: string;
@@ -12,6 +15,9 @@ export type LineHeightPluginOptions = {
 /**
  * @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' }]
+ * ```
  */
 /**
  * @class

package/types/plugins/dropdown/paragraphStyle.d.ts

@@ -3,6 +3,16 @@ export default ParagraphStyle;
 export type ParagraphStylePluginOptions = {
 	/**
 	 * - Paragraph item list
+	 * ```js
+	 * // use default paragraph styles
+	 * ['spaced', 'bordered', 'neon']
+	 * // custom paragraph styles
+	 * [
+	 * { name: 'spaced', class: '__se__p-spaced', _class: '' },
+	 * { name: 'bordered', class: '__se__p-bordered', _class: '' },
+	 * { name: 'neon', class: '__se__p-neon', _class: '' }
+	 * ]
+	 * ```
 	 */
 	items?: Array<
 		| string
@@ -16,15 +26,16 @@ export type ParagraphStylePluginOptions = {
 /**
  * @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: '' }
  * ]
+ * ```
  */
 /**
  * @class

package/types/plugins/dropdown/table/index.d.ts

@@ -14,9 +14,12 @@ export type TablePluginOptions = {
 	 */
 	cellControllerPosition?: 'cell' | 'table';
 	/**
-	 * - Color list, used in cell color picker
+	 * - HEX color list for the cell background color picker.
+	 * ```js
+	 * { colorList: ['#bbf7d0', '#fde68a', '#fecaca', '#e9d5ff'] }
+	 * ```
 	 */
-	colorList?: any[];
+	colorList?: Array<string>;
 };
 export type TableState = import('./shared/table.constants').TableState;
 /**
@@ -24,7 +27,10 @@ export type TableState = import('./shared/table.constants').TableState;
  * @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'] }
+ * ```
  */
 /**
  * @typedef {import('./shared/table.constants').TableState} TableState

package/types/plugins/dropdown/template.d.ts

@@ -3,6 +3,9 @@ export default Template;
 export type TemplatePluginOptions = {
 	/**
 	 * - Template list
+	 * ```js
+	 * [{ name: 'Greeting', html: '<p>Hello! Thank you for contacting us.</p>' }]
+	 * ```
 	 */
 	items?: Array<{
 		name: string;
@@ -12,6 +15,9 @@ export type TemplatePluginOptions = {
 /**
  * @typedef {Object} TemplatePluginOptions
  * @property {Array<{name: string, html: string}>} [items] - Template list
+ * ```js
+ * [{ name: 'Greeting', html: '<p>Hello! Thank you for contacting us.</p>' }]
+ * ```
  */
 /**
  * @class

package/types/plugins/dropdown/textStyle.d.ts

@@ -2,7 +2,11 @@ import type {} from '../../typedef';
 export default TextStyle;
 export type TextStylePluginOptions = {
 	/**
-	 * - Text style item list
+	 * - 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' }]
+	 * ```
 	 */
 	items?: Array<
 		| string
@@ -15,7 +19,11 @@ export type TextStylePluginOptions = {
 };
 /**
  * @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' }]
+ * ```
  */
 /**
  * @class

package/types/plugins/field/mention.d.ts

@@ -18,7 +18,11 @@ export type MentionPluginOptions = {
 	 */
 	delayTime?: number;
 	/**
-	 * - Use data without using API
+	 * - Static mention data (used instead of API).
+	 * ```js
+	 * // data
+	 * [{ key: 'john', name: 'John Doe', url: '/users/john' }]
+	 * ```
 	 */
 	data?: Array<{
 		key: string;
@@ -50,7 +54,11 @@ export type MentionPluginOptions = {
  * @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/types/plugins/index.d.ts

@@ -1,6 +1,7 @@
 import type {} from '../typedef';
 declare namespace _default {
 	export { blockquote };
+	export { codeBlock };
 	export { exportPDF };
 	export { fileUpload };
 	export { list_bulleted };
@@ -42,6 +43,7 @@ import fileGallery from './browser/fileGallery';
 import imageGallery from './browser/imageGallery';
 import videoGallery from './browser/videoGallery';
 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';
@@ -78,6 +80,7 @@ export {
 	backgroundColor,
 	blockquote,
 	blockStyle,
+	codeBlock,
 	drawing,
 	embed,
 	exportPDF,