suneditor 3.0.0-rc.4 → 3.0.0

package/src/modules/manager/FileManager.js

@@ -35,7 +35,7 @@ class FileManager {
 		this.uploadFileLength = 0;
 		this.__updateTags = [];
 		// api manager
-		this.apiManager = new ApiManager(this, null);
+		this.apiManager = new ApiManager(this, $);
 
 		// se-ts-ignore - call by editor
 		void this._resetInfo;
@@ -49,6 +49,15 @@ 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, uploadHeader, data, callBack, errorCallBack) {
 		this.#$.ui.showLoading();
@@ -75,6 +84,10 @@ 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);
 	 */
 	async asyncUpload(uploadUrl, uploadHeader, data) {
 		this.#$.ui.showLoading();
@@ -102,6 +115,10 @@ 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, { name, size }) {
 		if (!element) return;

package/src/modules/ui/ModalAnchorEditor.js

@@ -9,8 +9,12 @@ const { _w, NO_EVENT } = env;
  * @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.
@@ -37,6 +41,17 @@ 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($, modalForm, params) {
 		this.#$ = $;
@@ -149,6 +164,13 @@ 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) {
 		if (!isUpdate) {
@@ -173,6 +195,17 @@ class ModalAnchorEditor {
 	 * @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) {
 		if (this.linkValue.length === 0) return null;

package/src/modules/ui/SelectMenu.js

@@ -5,12 +5,19 @@ const MENU_MIN_HEIGHT = 38;
 
 /**
  * @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"`).
  */
 
 /**
@@ -59,6 +66,8 @@ class SelectMenu {
 		this.horizontal = !!this.splitNum;
 		this.openMethod = params.openMethod;
 		this.closeMethod = params.closeMethod;
+		this.maxHeight = params.maxHeight || '';
+		this.minWidth = params.minWidth || '';
 
 		this.#dirPosition = /^(left|right)$/.test(this.position) ? (this.position === 'left' ? 'right' : 'left') : this.position;
 		this.#dirSubPosition = /^(left|right)$/.test(this.subPosition) ? (this.subPosition === 'left' ? 'right' : 'left') : this.subPosition;
@@ -101,26 +110,48 @@ 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, selectMethod, attr = {}) {
 		this.#refer = /** @type {HTMLElement} */ (referElement);
 		this.#keydownTarget = dom.check.isInputElement(referElement) ? referElement : this.#$.frameContext.get('_ww');
 		this.#selectMethod = selectMethod;
+
+		let innerStyle = '';
+		if (this.maxHeight) innerStyle += 'max-height:' + this.maxHeight + ';overflow-y:auto;';
+		if (this.minWidth) innerStyle += 'min-width:' + this.minWidth + ';';
+
 		this.form = dom.utils.createElement(
 			'DIV',
 			{
 				class: 'se-select-menu' + (attr.class ? ' ' + attr.class : ''),
 				style: attr.style || '',
 			},
-			'<div class="se-list-inner"></div>',
+			'<div class="se-list-inner"' + (innerStyle ? ' style="' + innerStyle + '"' : '') + '></div>',
 		);
+
 		referElement.parentNode.insertBefore(this.form, referElement);
 	}
 
 	/**
 	 * @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, onItemQuerySelector) {
 		this.#$.ui.selectMenuOn = true;
@@ -386,11 +417,12 @@ class SelectMenu {
 	 */
 	#addEvents() {
 		this.#removeEvents();
-		this.#events = this.#eventHandlers;
-		this.form.addEventListener('mousedown', this.#events.mousedown);
-		this.form.addEventListener('mousemove', this.#events.mousemove);
-		this.form.addEventListener('click', this.#events.click);
-		this.#keydownTarget.addEventListener('keydown', this.#events.keydown);
+		this.#events = {
+			mousedown: this.#$.eventManager.addEvent(this.form, 'mousedown', this.#eventHandlers.mousedown),
+			mousemove: this.#$.eventManager.addEvent(this.form, 'mousemove', this.#eventHandlers.mousemove),
+			click: this.#$.eventManager.addEvent(this.form, 'click', this.#eventHandlers.click),
+			keydown: this.#$.eventManager.addEvent(this.#keydownTarget, 'keydown', this.#eventHandlers.keydown),
+		};
 	}
 
 	/**
@@ -398,10 +430,10 @@ class SelectMenu {
 	 */
 	#removeEvents() {
 		if (!this.#events) return;
-		this.form.removeEventListener('mousedown', this.#events.mousedown);
-		this.form.removeEventListener('mousemove', this.#events.mousemove);
-		this.form.removeEventListener('click', this.#events.click);
-		this.#keydownTarget.removeEventListener('keydown', this.#events.keydown);
+		this.#$.eventManager.removeEvent(this.#events.mousedown);
+		this.#$.eventManager.removeEvent(this.#events.mousemove);
+		this.#$.eventManager.removeEvent(this.#events.click);
+		this.#$.eventManager.removeEvent(this.#events.keydown);
 		this.#events = null;
 	}
 
@@ -526,7 +558,7 @@ class SelectMenu {
 	#CloseListener_mousedown(e) {
 		const eventTarget = dom.query.getEventTarget(e);
 		if (this.form.contains(eventTarget)) return;
-		if (e.target !== this.#refer) {
+		if (!this.#refer.contains(eventTarget)) {
 			this.close();
 		} else if (!dom.check.isInputElement(eventTarget)) {
 			this.#bindClose_click = this.#$.eventManager.addGlobalEvent('click', this.#globalEventHandlers.click, true);

package/src/plugins/browser/fileBrowser.js

@@ -3,11 +3,14 @@ import { Browser } from '../../modules/contract';
 
 /**
  * @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 }
+ * ```
  */
 
 /**

package/src/plugins/command/codeBlock.js

@@ -0,0 +1,324 @@
+import { PluginCommand, PluginDropdown } from '../../interfaces';
+import { converter, dom } from '../../helper';
+import { Controller } from '../../modules/contract';
+import { SelectMenu } from '../../modules/ui';
+
+void PluginDropdown;
+
+const DEFAULT_LANGS = ['javascript', 'typescript', 'html', 'css', 'json', 'python', 'java', 'c', 'cpp', 'csharp', 'go', 'rust', 'ruby', 'php', 'swift', 'kotlin', 'sql', 'bash', 'markdown', 'xml', 'yaml'];
+
+/**
+ * @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">`
+ */
+class CodeBlock extends PluginCommand {
+	static key = 'codeBlock';
+	static className = '';
+
+	#preTag;
+	#langItems;
+	#langs;
+
+	// hover UI
+	#hoverButton;
+	#hoverSelectMenu;
+	#hoverController;
+	#hoverCurrentPre;
+	#mouseLeaveEvent;
+	#removeEventFunc;
+
+	/**
+	 * @constructor
+	 * @param {SunEditor.Kernel} kernel - The Kernel instance
+	 * @param {CodeBlockPluginOptions} pluginOptions - Configuration options for the CodeBlock plugin.
+	 */
+	constructor(kernel, pluginOptions) {
+		super(kernel);
+		this.title = this.$.lang.codeBlock || 'Code Block';
+		this.icon = 'code_block';
+
+		this.#preTag = dom.utils.createElement('PRE');
+		this.#langs = pluginOptions?.langs ?? DEFAULT_LANGS;
+
+		if (!this.#langs.length) return;
+
+		/**
+		 * ──────────────────────────────────
+		 * [[ langs select ]]
+		 * ──────────────────────────────────
+		 */
+
+		// ───────────────── [[toolbar dropdown type]] ─────────────────
+		this.afterItem = dom.utils.createElement(
+			'button',
+			{ class: 'se-btn se-tooltip se-sub-arrow-btn', 'data-command': CodeBlock.key, 'data-type': 'dropdown' },
+			`${this.$.icons.arrow_down}<span class="se-tooltip-inner"><span class="se-tooltip-text">${this.$.lang.codeLanguage || 'Language'}</span></span>`,
+		);
+
+		const menu = CreateDropdownHTML(this.$, this.#langs);
+		this.#langItems = menu.querySelectorAll('li button');
+		this.$.menu.initDropdownTarget({ key: CodeBlock.key, type: 'dropdown' }, menu);
+
+		// ───────────────── [hover UI] ─────────────────
+		// controller
+		const containerEl = dom.utils.createElement('DIV', { class: 'se-controller se-code-lang' });
+		this.#hoverButton = dom.utils.createElement('DIV', { class: 'se-code-lang-button' });
+		this.#updateHoverButtonText('');
+		containerEl.appendChild(this.#hoverButton);
+
+		this.#hoverController = new Controller(this, this.$, containerEl, { position: 'top', isWWTarget: true });
+
+		// mouseleave handler
+		this.#removeEventFunc = converter.debounce((e) => {
+			this.#mouseLeaveEvent = this.$.eventManager.removeEvent(this.#mouseLeaveEvent);
+
+			if (e && containerEl.contains(e.relatedTarget)) {
+				this.#addCtrlLeaveEvent();
+			} else {
+				this.#hideHover();
+			}
+		}, 0);
+
+		// SelectMenu
+		this.#hoverSelectMenu = new SelectMenu(this.$, {
+			position: 'bottom-right',
+			dir: this.$.options.get('_rtl') ? 'rtl' : 'ltr',
+			maxHeight: '214px',
+			minWidth: '132px',
+			closeMethod: this.#removeEventFunc,
+		});
+
+		this.#hoverSelectMenu.on(this.#hoverButton, this.#onHoverSelect.bind(this));
+		this.#buildHoverMenu('');
+
+		// selectMenu
+		this.$.eventManager.addEvent(this.#hoverButton, 'click', (e) => {
+			e.preventDefault();
+			e.stopPropagation();
+			if (this.#hoverSelectMenu.isOpen) {
+				this.#hoverSelectMenu.close();
+			} else {
+				const currentLang = this.#getPreLang(this.#hoverCurrentPre);
+				this.#buildHoverMenu(currentLang);
+				const items = this.#hoverSelectMenu.items;
+				const idx = currentLang ? items.indexOf(currentLang) : 0;
+				this.#hoverSelectMenu.open(null, idx >= 0 ? `[data-index="${idx}"]` : null);
+			}
+		});
+	}
+
+	/**
+	 * @hook Editor.EventManager
+	 * @type {SunEditor.Hook.Event.OnMouseMove}
+	 */
+	onMouseMove({ event }) {
+		if (!this.#hoverController) return;
+		const eventTarget = dom.query.getEventTarget(event);
+		const pre = eventTarget.closest('pre');
+
+		if (pre && !this.#isHoverOpen() && this.$.ui.opendControllers.length === 0) {
+			this.#showHover(pre);
+		}
+	}
+
+	/**
+	 * @hook Editor.EventManager
+	 * @type {SunEditor.Hook.Event.Active}
+	 */
+	active(element, target) {
+		if (/^PRE$/i.test(element?.nodeName)) {
+			dom.utils.addClass(target, 'active');
+			return true;
+		}
+
+		dom.utils.removeClass(target, 'active');
+		return false;
+	}
+
+	/**
+	 * @override
+	 * @type {PluginCommand['action']}
+	 */
+	action(target) {
+		const lang = target?.getAttribute('data-value') || '';
+		const selNode = this.$.selection.getNode();
+		const currentPre = dom.query.getParentElement(selNode, (el) => /^PRE$/i.test(el.nodeName));
+
+		if (currentPre && !lang) {
+			// toggle off: convert <pre> to default line
+			this.$.format.setLine(dom.utils.createElement(this.$.options.get('defaultLine')));
+		} else {
+			// toggle on or change language
+			if (!currentPre) {
+				this.$.format.setBrLine(this.#preTag.cloneNode(false));
+			}
+
+			if (lang) {
+				const pre = dom.query.getParentElement(this.$.selection.getNode(), (el) => /^PRE$/i.test(el.nodeName));
+				if (pre) this.#setLang(pre, lang);
+			}
+		}
+
+		this.$.menu.dropdownOff();
+		this.$.focusManager.focus();
+		this.$.history.push(false);
+	}
+
+	/**
+	 * @impl Dropdown
+	 * @type {PluginDropdown['on']}
+	 */
+	on() {
+		if (!this.#langItems) return;
+		const currentLang = this.#getPreLang(this.$.selection.getNode());
+
+		for (let i = 0, len = this.#langItems.length; i < len; i++) {
+			const item = this.#langItems[i];
+			dom.utils.toggleClass(item, 'active', item.getAttribute('data-value') === currentLang);
+		}
+	}
+
+	/**
+	 * @description Shows the hover language selector over the given pre element.
+	 * @param {HTMLElement} preElement
+	 */
+	#showHover(preElement) {
+		if (this.#hoverCurrentPre === preElement && this.#hoverController.isOpen) return;
+
+		if (this.#hoverCurrentPre && this.#hoverCurrentPre !== preElement) {
+			dom.utils.removeClass(this.#hoverCurrentPre, 'se-pre-code-focus');
+		}
+		this.#hoverCurrentPre = preElement;
+		dom.utils.addClass(preElement, 'se-pre-code-focus');
+
+		this.#hoverController.open(preElement, null, { passive: true, addOffset: { right: preElement.offsetWidth } });
+		this.#updateHoverButtonText(this.#getPreLang(preElement));
+
+		this.#addPreLeaveEvent();
+	}
+
+	#hideHover() {
+		if (this.#hoverSelectMenu?.isOpen) return;
+		this.#closeHover();
+	}
+
+	#closeHover() {
+		if (this.#hoverSelectMenu?.isOpen) this.#hoverSelectMenu.close();
+		dom.utils.removeClass(this.#hoverCurrentPre, 'se-pre-code-focus');
+		this.#hoverController.close(true);
+	}
+
+	/** @hook Module.Controller */
+	controllerClose() {
+		if (this.#hoverCurrentPre) {
+			dom.utils.removeClass(this.#hoverCurrentPre, 'se-pre-code-focus');
+			this.#hoverCurrentPre = null;
+		}
+	}
+
+	#onHoverSelect(langValue) {
+		if (!this.#hoverCurrentPre) return;
+		this.#setLang(this.#hoverCurrentPre, langValue);
+		this.#updateHoverButtonText(langValue);
+		this.#hoverSelectMenu.close();
+		this.#hideHover();
+		this.$.focusManager.focus();
+		this.$.history.push(false);
+	}
+
+	#addPreLeaveEvent() {
+		this.#mouseLeaveEvent ??= this.$.eventManager.addEvent(this.#hoverCurrentPre, 'mouseleave', this.#removeEventFunc);
+	}
+
+	#addCtrlLeaveEvent() {
+		this.#mouseLeaveEvent ??= this.$.eventManager.addEvent(this.#hoverController.form, 'mouseleave', this.#removeEventFunc);
+	}
+
+	#buildHoverMenu(currentLang) {
+		const noneLabel = this.$.lang.codeLanguage_none || 'None';
+		const hasExtra = currentLang && !this.#langs.includes(currentLang);
+		const items = hasExtra ? ['', currentLang, ...this.#langs] : ['', ...this.#langs];
+		const menus = hasExtra ? [noneLabel, currentLang, ...this.#langs] : [noneLabel, ...this.#langs];
+		this.#hoverSelectMenu.create(items, menus);
+	}
+
+	#updateHoverButtonText(lang) {
+		this.#hoverButton.innerHTML = /* html */ `<span class="se-code-lang-icon">&lt;/&gt;</span><span class="se-code-lang-text">${lang || this.$.lang.codeLanguage || 'Language'}</span>`;
+	}
+
+	#isHoverOpen() {
+		return this.#hoverSelectMenu?.isOpen || this.#hoverController?.isOpen;
+	}
+
+	/**
+	 * @description Get the language from a pre element's class.
+	 * @param {?Node} preOrChild - The pre element or a node inside it
+	 * @returns {string}
+	 */
+	#getPreLang(preOrChild) {
+		const pre = preOrChild?.nodeName === 'PRE' ? preOrChild : dom.query.getParentElement(preOrChild, (el) => /^PRE$/i.test(el.nodeName));
+		if (!pre) return '';
+		return /** @type {HTMLElement} */ (pre).className.match(/language-(\S+)/)?.[1] || '';
+	}
+
+	/**
+	 * @description Set language class on a pre element.
+	 * @param {HTMLElement} pre
+	 * @param {string} lang
+	 */
+	#setLang(pre, lang) {
+		pre.className = pre.className.replace(/\s*language-\S+/g, '').trim();
+		if (lang) {
+			dom.utils.addClass(pre, 'language-' + lang);
+			pre.setAttribute('data-se-lang', lang);
+		} else {
+			pre.removeAttribute('data-se-lang');
+		}
+	}
+
+	/**
+	 * @description Cleans up resources.
+	 */
+	destroy() {
+		if (this.#hoverCurrentPre) {
+			dom.utils.removeClass(this.#hoverCurrentPre, 'se-pre-code-focus');
+		}
+		this.#hoverController?.form?.parentNode?.removeChild(this.#hoverController.form);
+		this.#hoverCurrentPre = null;
+	}
+}
+
+/**
+ * @param {SunEditor.Deps} $
+ * @param {string[]} langs
+ * @returns {HTMLElement}
+ */
+function CreateDropdownHTML($, langs) {
+	const noneLabel = $.lang.codeLanguage_none || 'None';
+	let list = '<div class="se-list-inner"><ul class="se-list-basic">';
+
+	list += `<li><button type="button" class="se-btn se-btn-list" data-command="codeBlock" data-value="" title="${noneLabel}">${noneLabel}</button></li>`;
+	for (const lang of langs) {
+		list += `<li><button type="button" class="se-btn se-btn-list" data-command="codeBlock" data-value="${lang}" title="${lang}">${lang}</button></li>`;
+	}
+
+	list += '</ul></div>';
+	return dom.utils.createElement('DIV', { class: 'se-dropdown se-list-layer se-list-code-block' }, list);
+}
+
+export default CodeBlock;

package/src/plugins/command/exportPDF.js

@@ -63,12 +63,17 @@ class ExportPDF extends PluginCommand {
 
 		try {
 			const standardWW = this.$.frameContext.get('documentTypePageMirror') || this.$.frameContext.get('wysiwygFrame');
-			const editableDiv = dom.utils.createElement('div', { class: standardWW.className }, standardWW.innerHTML);
+
+			// Strip theme class so getComputedStyle resolves default (light) colors for borders, shadows, etc.
+			const themeClass = (this.$.options.get('_themeClass') || '').trim();
+			const wwClassName = themeClass ? standardWW.className.replace(themeClass, '').trim() : standardWW.className;
+			const editableDiv = dom.utils.createElement('div', { class: wwClassName }, standardWW.innerHTML);
 			ww = dom.utils.createElement('div', { style: `position: absolute; top: -10000px; left: -10000px; width: 21cm; columns: 21cm; height: auto;` }, editableDiv);
 
 			const innerPadding = _w.getComputedStyle(standardWW).padding;
 			const inlineWW = dom.utils.applyInlineStylesAll(editableDiv, true, this.$.options.get('allUsedStyles'));
 			inlineWW.style.padding = inlineWW.style.paddingTop = inlineWW.style.paddingBottom = inlineWW.style.paddingLeft = inlineWW.style.paddingRight = '0';
+
 			ww.innerHTML = `
 				<style>
 					@page {
@@ -109,8 +114,15 @@ class ExportPDF extends PluginCommand {
 		const xhr = await this.apiManager.asyncCall({ data: JSON.stringify(data) });
 
 		if (xhr.status !== 200) {
-			const res = !xhr.responseText ? xhr : JSON.parse(xhr.responseText);
-			throw Error(`[SUNEDITOR.plugins.exportPDF.error] ${res.errorMessage}`);
+			let errorMessage;
+
+			try {
+				errorMessage = JSON.parse(xhr.responseText).errorMessage;
+			} catch {
+				// ignore
+			}
+
+			throw Error(`[SUNEDITOR.plugins.exportPDF.error] ${errorMessage || xhr.statusText}`);
 		}
 
 		const blob = new Blob([xhr.response], { type: 'application/pdf' });

package/src/plugins/command/fileUpload.js

@@ -12,7 +12,10 @@ const { NO_EVENT } = env;
  * @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/src/plugins/dropdown/backgroundColor.js

@@ -4,9 +4,13 @@ import { dom } from '../../helper';
 
 /**
  * @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 }
+ * ```
  */
 
 /**

package/src/plugins/dropdown/blockStyle.js

@@ -7,7 +7,13 @@ import { dom } from '../../helper';
 
 /**
  * @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' }]
+ * ```
  */
 
 /**
@@ -133,7 +139,7 @@ class BlockStyle extends PluginDropdown {
  * @returns {HTMLElement}
  */
 function CreateHTML({ lang }, items) {
-	const defaultFormats = ['p', 'blockquote', 'pre', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
+	const defaultFormats = ['p', 'blockquote', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
 	const formatList = !items || items.length === 0 ? defaultFormats : items;
 
 	let list = /*html*/ `