suneditor 3.0.4 → 3.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "suneditor",
-	"version": "3.0.4",
+	"version": "3.0.6",
 	"description": "Vanilla JavaScript based WYSIWYG web editor",
 	"author": "Yi JiHong",
 	"license": "MIT",

package/src/assets/suneditor.css

@@ -368,6 +368,26 @@
 	z-index: 1;
 }
 
+/** -- plain text button */
+.sun-editor .se-btn.se-btn-plain {
+	background-color: transparent;
+	border-color: transparent;
+	box-shadow: none;
+}
+.sun-editor .se-btn.se-btn-plain:not(.on):not(.active):enabled:hover,
+.sun-editor .se-btn.se-btn-plain:not(.on):not(.active):enabled:focus {
+	background-color: transparent;
+	border-color: transparent;
+	box-shadow: none;
+}
+.sun-editor .se-btn.se-btn-plain:not(.on):not(.active):enabled:active,
+.sun-editor .se-btn.se-btn-plain:not(.on):not(.active):enabled.__se__active {
+	background-color: transparent;
+	border-color: transparent !important;
+	box-shadow: none;
+	outline: none !important;
+}
+
 /** --- primary button */
 .sun-editor .se-btn-primary {
 	background-color: var(--se-active-light2-color);
@@ -3232,11 +3252,14 @@
 	margin-left: 0;
 	margin-right: 0;
 }
-
-.sun-editor .se-browser .se-browser-search input {
+.sun-editor .se-browser .se-browser-search-input-wrap {
+	position: relative;
 	flex: auto;
+}
+.sun-editor .se-browser .se-browser-search-input-wrap input {
+	width: 100%;
+	padding: 3px 24px 3px 6px;
 	background-color: transparent;
-	padding: 3px 6px;
 	color: var(--se-main-font-color);
 	text-decoration: none;
 	border-radius: var(--se-border-radius);
@@ -3245,6 +3268,18 @@
 	-moz-background-clip: padding;
 	-webkit-background-clip: padding-box;
 	background-clip: padding-box;
+	box-sizing: border-box;
+}
+.sun-editor .se-browser .se-browser-search-clear {
+	position: absolute;
+	right: 2px;
+	top: 50%;
+	transform: translateY(-50%);
+	padding: 0 2px;
+	opacity: 0.35;
+}
+.sun-editor .se-browser .se-browser-search-clear:hover {
+	opacity: 0.8;
 }
 
 .sun-editor .se-browser .se-browser-search button {
@@ -3396,6 +3431,12 @@
 	opacity: 0.6;
 	pointer-events: none;
 }
+.sun-editor .se-browser .se-file-name-image mark {
+	background-color: var(--se-active-color);
+	color: var(--se-active-font-color);
+	padding: 0 1px;
+	border-radius: 2px;
+}
 
 .sun-editor .se-browser .se-browser-list.se-preview-list .se-file-item-img > * {
 	display: flex;
@@ -4148,6 +4189,13 @@
 	margin: 2px 8px;
 	flex-direction: row-reverse;
 }
+.sun-editor.se-rtl .se-browser .se-browser-search-input-wrap input {
+	padding: 3px 6px 3px 24px;
+}
+.sun-editor.se-rtl .se-browser .se-browser-search-clear {
+	right: auto;
+	left: 2px;
+}
 .sun-editor.se-rtl .se-browser .se-browser-side .se-menu-icon {
 	margin: 0 0 0 10px;
 }

package/src/core/logic/panel/viewer.js

@@ -300,7 +300,7 @@ class Viewer {
 			this.#originCssText = topArea.style.cssText;
 			this.#editorAreaOriginCssText = editorArea.style.cssText;
 			this.#wysiwygOriginCssText = wysiwygFrame.style.cssText;
-			this.#codeWrapperOriginCssText = codeWrapper.style.cssText;
+			this.#codeWrapperOriginCssText = codeWrapper?.style.cssText;
 			this.#codeOriginCssText = code.style.cssText;
 			this.#codeNumberOriginCssText = codeNumbers?.style.cssText;
 			this.#markdownWrapperOriginCssText = markdownWrapper?.style.cssText;
@@ -344,9 +344,11 @@ class Viewer {
 			wysiwygFrame.style.cssText = (wysiwygFrame.style.cssText.match(/\s?display(\s+)?:(\s+)?[a-zA-Z]+;/) || [''])[0] + this.#frameOptions.get('_defaultStyles').editor + (isCodeView || isMarkdownView ? 'display: none;' : '');
 
 			// code wrapper
-			codeWrapper.style.cssText = (codeWrapper.style.cssText.match(/\s?display(\s+)?:(\s+)?[a-zA-Z]+;/) || [''])[0] + `display: ${!isCodeView ? 'none' : 'flex'} !important;`;
-			codeWrapper.style.overflow = 'auto';
-			codeWrapper.style.height = '100%';
+			if (codeWrapper) {
+				codeWrapper.style.cssText = (codeWrapper.style.cssText.match(/\s?display(\s+)?:(\s+)?[a-zA-Z]+;/) || [''])[0] + `display: ${!isCodeView ? 'none' : 'flex'} !important;`;
+				codeWrapper.style.overflow = 'auto';
+				codeWrapper.style.height = '100%';
+			}
 
 			// markdown wrapper
 			if (markdownWrapper) {
@@ -384,7 +386,9 @@ class Viewer {
 			wysiwygFrame.style.cssText = this.#wysiwygOriginCssText.replace(/\s?display(\s+)?:(\s+)?[a-zA-Z]+;/, '') + (isCodeView || isMarkdownView ? 'display: none;' : '');
 
 			// code wrapper
-			codeWrapper.style.cssText = this.#codeWrapperOriginCssText.replace(/\s?display(\s+)?:(\s+)?[a-zA-Z]+;/, '') + `display: ${!isCodeView ? 'none' : 'flex'} !important;`;
+			if (codeWrapper) {
+				codeWrapper.style.cssText = this.#codeWrapperOriginCssText.replace(/\s?display(\s+)?:(\s+)?[a-zA-Z]+;/, '') + `display: ${!isCodeView ? 'none' : 'flex'} !important;`;
+			}
 
 			// code
 			code.style.cssText = this.#codeOriginCssText;

package/src/core/logic/shell/_commandExecutor.js

@@ -59,12 +59,15 @@ export default class CommandExecutor {
 	 * @description Execute default command of command button
 	 */
 	async execute(command, button) {
-		if (this.#frameContext.get('isReadOnly') && !/copy|cut|selectAll|codeView|markdownView|fullScreen|print|preview|showBlocks|finder/.test(command)) return;
+		if (this.#frameContext.get('isReadOnly') && !/copy|cut|selectAll|selectAll_full|codeView|markdownView|fullScreen|print|preview|showBlocks|finder/.test(command)) return;
 
 		switch (command) {
 			case 'selectAll':
 				this.#SELECT_ALL();
 				break;
+			case 'selectAll_full':
+				this.#SELECT_ALL_FULL();
+				break;
 			case 'copy': {
 				const range = this.#$.selection.getRange();
 				if (range.collapsed) break;
@@ -254,6 +257,40 @@ export default class CommandExecutor {
 		this.#$.toolbar._showBalloon(this.#$.selection.setRange(first, 0, last, last.textContent.length));
 	}
 
+	/**
+	 * @description Selects all content in the entire editor without scope stepping.
+	 */
+	#SELECT_ALL_FULL() {
+		this.#$.ui.offCurrentController();
+		this.#$.menu.containerOff();
+
+		const ww = this.#frameContext.get('wysiwyg');
+		let { first, last } = __findFirstAndLast(ww);
+
+		if (!first || !last) return;
+
+		let info = null;
+		if (dom.check.isMedia(first) || (info = this.#$.component.get(first)) || dom.check.isTableElements(first)) {
+			info ||= this.#$.component.get(first);
+			const br = dom.utils.createElement('BR');
+			const format = dom.utils.createElement(this.#options.get('defaultLine'), null, br);
+			first = info ? info.container || info.cover : first;
+			first.parentElement.insertBefore(format, first);
+			first = br;
+		}
+
+		if (dom.check.isMedia(last) || (info = this.#$.component.get(last)) || dom.check.isTableElements(last)) {
+			info ||= this.#$.component.get(last);
+			const br = dom.utils.createElement('BR');
+			const format = dom.utils.createElement(this.#options.get('defaultLine'), null, br);
+			last = info ? info.container || info.cover : last;
+			last.parentElement.appendChild(format);
+			last = br;
+		}
+
+		this.#$.toolbar._showBalloon(this.#$.selection.setRange(first, 0, last, last.textContent.length));
+	}
+
 	/**
 	 * @description Saves the editor content.
 	 * @returns {Promise<void>}

package/src/core/section/constructor.js

@@ -1132,7 +1132,7 @@ function _defaultButtons(isRTL, icons, lang) {
 		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],
+		selectAll: ['se-component-enabled', lang.selectAll, 'selectAll_full', '', icons.select_all],
 		pageBreak: ['se-component-enabled', lang.pageBreak, 'pageBreak', '', icons.page_break],
 		// document type buttons
 		pageUp: ['se-component-enabled', lang.pageUp, 'pageUp', '', icons.page_up],

package/src/helper/markdown.js

@@ -1,6 +1,21 @@
 /**
  * @fileoverview Markdown converter module
  * - Supports GitHub Flavored Markdown (GFM) syntax
+ *
+ * @description Limitations — Style loss during roundtrip
+ *
+ * Markdown syntax cannot represent HTML inline styles, classes, or data attributes.
+ * When switching between WYSIWYG and Markdown view, the following behavior applies:
+ *
+ * | Content type                        | Behavior                                    | Example                                              |
+ * |-------------------------------------|---------------------------------------------|------------------------------------------------------|
+ * | Media components (`div.se-component`) | Converted to markdown — styles are lost     | Image alignment, data-se-* attrs                     |
+ * | Styled `<span>` elements            | Preserved as raw HTML in markdown           | Font color, background, custom classes               |
+ * | Tables, figures                      | Converted to markdown — styles are lost     | Table cell styles, figure width, colgroup widths      |
+ * | General elements (p, h1, blockquote) | Converted to markdown — styles are lost     | text-align, color, font-size on paragraphs/headings  |
+ *
+ * This is a fundamental limitation of the Markdown format.
+ * To preserve all HTML attributes without loss, use Code View instead.
  */
 
 const VOID_ELEMENTS = /^(area|base|br|col|embed|hr|img|input|link|meta|param|source|track|wbr)$/i;
@@ -439,16 +454,16 @@ function nodeToMarkdown(node, indent, isBlock) {
 
 	// Span - pass through as inline (may contain styles)
 	if (tag === 'span') {
-		// Check if it has meaningful attributes that need HTML fallback
 		if (attributes.style || attributes.class) {
 			return nodeToHtmlFallback(node);
 		}
 		return childrenToInline(children);
 	}
 
-	// Figure - process children (usually contains img or other media)
+	// Figure - process children (table, media)
 	if (tag === 'figure') {
-		return children.map((c) => nodeToMarkdown(c, indent, true)).join('');
+		const inner = children.map((c) => nodeToMarkdown(c, indent, true)).join('');
+		return /\n$/.test(inner) ? inner : inner + '\n\n';
 	}
 	if (tag === 'figcaption') {
 		const content = childrenToInline(children).trim();

package/src/modules/contract/Browser.js

@@ -27,6 +27,19 @@ import ApiManager from '../manager/ApiManager';
  * @property {(target: Node) => void} selectorHandler - Function that actions when an item is clicked. Required. Can be overridden in browser.
  * @property {boolean} [useSearch] - Whether to use the search function. Optional. Default: `true`.
  * @property {string} [searchUrl] - File server search url. Optional. Can be overridden in browser.
+ * - Requested as `searchUrl + '?keyword=' + keyword`. The server must return:
+ * ```js
+ * {
+ *   "result": [
+ *     {
+ *       "src": "https://example.com/file.jpg",
+ *       "name": "file.jpg",
+ *       "thumbnail": "https://example.com/file_thumb.jpg",
+ *       "tag": ["photo"]
+ *     }
+ *   ]
+ * }
+ * ```
  * @property {Object<string, string>} [searchUrlHeader] - File server search http header. Optional. Can be overridden in browser.
  * @property {string} [listClass] - Class name of list div. Required. Can be overridden in browser.
  * @property {(item: BrowserFile) => string} [drawItemHandler] - Function that returns HTML string for rendering each file item. Required. Can be overridden in browser.
@@ -37,6 +50,7 @@ import ApiManager from '../manager/ApiManager';
  * @property {Array<*>} [props] - `props` argument to `drawItemHandler` function. Optional. Can be overridden in browser.
  * @property {number} [columnSize] - Number of `div.se-file-item-column` to be created.
  * - Optional. Can be overridden in browser. Default: 4.
+ * @property {number} [expand=1] - Initial folder expand depth. `1` expands the first level, `Infinity` expands all. Default: `1`.
  * @property {((item: BrowserFile) => string)} [thumbnail] - Default thumbnail
  */
 
@@ -50,6 +64,10 @@ class Browser {
 	#loading;
 	#globalEventHandler;
 
+	/** @type {Array<BrowserFile>} */
+	#allItems = [];
+	#searchInput;
+	#searchClearBtn;
 	#closeSignal = false;
 	#bindClose = null;
 
@@ -102,6 +120,7 @@ class Browser {
 		this.drawItemHandler = (params.drawItemHandler || DrawItems).bind({ thumbnail: params.thumbnail, props: params.props || [] });
 		this.selectorHandler = params.selectorHandler;
 		this.columnSize = params.columnSize || 4;
+		this.expand = params.expand ?? 1;
 		this.folderDefaultPath = '';
 		this.closeArrow = this.#$.icons.menu_arrow_right;
 		this.openArrow = this.#$.icons.menu_arrow_down;
@@ -139,9 +158,15 @@ class Browser {
 		this.#$.eventManager.addEvent(this.side, 'click', this.#OnClickSide.bind(this));
 		this.#$.eventManager.addEvent(content, 'mousedown', this.#OnMouseDown_browser.bind(this));
 		this.#$.eventManager.addEvent(content, 'click', this.#OnClick_browser.bind(this));
-		this.#$.eventManager.addEvent(browserFrame.querySelector('form.se-browser-search-form'), 'submit', this.#Search.bind(this));
 		this.#$.eventManager.addEvent((this.sideOpenBtn = /** @type {HTMLButtonElement} */ (browserFrame.querySelector('.se-side-open-btn'))), 'click', this.#SideOpen.bind(this));
 		this.#$.eventManager.addEvent([this.header, browserFrame.querySelector('.se-browser-main')], 'mousedown', this.#SideClose.bind(this));
+
+		// search
+		const searchForm = browserFrame.querySelector('form.se-browser-search-form');
+		this.#searchInput = /** @type {HTMLInputElement} */ (searchForm?.querySelector('input[type="text"]'));
+		this.#searchClearBtn = /** @type {HTMLButtonElement} */ (browserFrame.querySelector('.se-browser-search-clear'));
+		this.#$.eventManager.addEvent(searchForm, 'submit', this.#Search.bind(this));
+		this.#$.eventManager.addEvent(this.#searchClearBtn, 'click', this.#ClearSearch.bind(this));
 	}
 
 	/**
@@ -195,11 +220,16 @@ class Browser {
 		this.area.style.display = 'none';
 		this.selectedTags = [];
 		this.items = [];
+		this.#allItems = [];
 		this.folders = {};
 		this.tree = {};
 		this.data = {};
 		this.keyword = '';
 		this.list.innerHTML = this.tagArea.innerHTML = this.titleArea.textContent = '';
+
+		if (this.#searchInput) this.#searchInput.value = '';
+		if (this.#searchClearBtn) this.#searchClearBtn.style.display = 'none';
+
 		this.#$.ui.opendBrowser = null;
 		this.sideInner = null;
 
@@ -216,8 +246,25 @@ class Browser {
 			this.#drawFileList(this.searchUrl + '?keyword=' + keyword, this.searchUrlHeader, false);
 		} else {
 			this.keyword = keyword.toLowerCase();
-			this.#drawListItem(this.items, false);
+			this.#drawListItem(this.#allItems.length > 0 ? this.#allItems : this.items, false);
+		}
+	}
+
+	/**
+	 * @description Collects all file items from every folder in `this.data`.
+	 * @returns {Array<BrowserFile>}
+	 */
+	#collectAllItems() {
+		const all = [];
+		for (const key in this.data) {
+			const items = this.data[key];
+			if (Array.isArray(items)) {
+				for (let i = 0; i < items.length; i++) {
+					all.push(items[i]);
+				}
+			}
 		}
+		return all;
 	}
 
 	/**
@@ -306,6 +353,10 @@ class Browser {
 
 		this.list.innerHTML = listHTML;
 
+		if (keyword) {
+			this.#highlightKeyword(keyword);
+		}
+
 		if (update) {
 			this.items = items;
 			this.tagArea.innerHTML = tagsHTML;
@@ -341,6 +392,7 @@ class Browser {
 		} else if (typeof data === 'object') {
 			this.sideOpenBtn.style.display = '';
 			this.#parseFolderData(data);
+			this.#allItems = this.#collectAllItems();
 
 			this.side.innerHTML = '';
 			const sideInner = (this.sideInner = dom.utils.createElement('div', null));
@@ -412,8 +464,11 @@ class Browser {
 	 * @description Creates a nested folder list from parsed data.
 	 * @param {BrowserFile[]|BrowserFile} folderData - The structured folder data.
 	 * @param {HTMLElement} parentElement - The parent element to append folder structure to.
+	 * @param {number} [depth=0] - Current depth level.
 	 */
-	#createFolderList(folderData, parentElement) {
+	#createFolderList(folderData, parentElement, depth = 0) {
+		const expanded = depth < this.expand;
+
 		for (const key in folderData) {
 			const item = folderData[key];
 			if (!item) continue;
@@ -426,10 +481,10 @@ class Browser {
 				);
 				const folderDiv = dom.utils.createElement('div', { class: 'se-menu-folder' }, folderLabel);
 
-				folderLabel.insertBefore(dom.utils.createElement('button', null, this.closeArrow), folderLabel.firstElementChild);
+				folderLabel.insertBefore(dom.utils.createElement('button', null, expanded ? this.openArrow : this.closeArrow), folderLabel.firstElementChild);
 				const childContainer = document.createElement('div');
-				dom.utils.addClass(childContainer, 'se-menu-child|se-menu-hidden');
-				this.#createFolderList(item.children, childContainer);
+				dom.utils.addClass(childContainer, expanded ? 'se-menu-child' : 'se-menu-child|se-menu-hidden');
+				this.#createFolderList(item.children, childContainer, depth + 1);
 				folderDiv.appendChild(childContainer);
 
 				parentElement.appendChild(folderDiv);
@@ -544,7 +599,7 @@ class Browser {
 		if (typeof data === 'string') {
 			this.#drawFileList(data, this.urlHeader, true);
 		} else {
-			this.#drawListItem(data, false);
+			this.#drawListItem(data, true);
 		}
 	}
 
@@ -576,9 +631,39 @@ class Browser {
 	 * @param {SubmitEvent} e - Event object
 	 */
 	#Search(e) {
-		const eventTarget = /** @type {HTMLElement} */ (e.currentTarget);
 		e.preventDefault();
-		this.search(/** @type {HTMLInputElement} */ (eventTarget.querySelector('input[type="text"]')).value);
+
+		const keyword = this.#searchInput.value;
+		this.search(keyword);
+
+		if (this.#searchClearBtn) this.#searchClearBtn.style.display = keyword ? '' : 'none';
+	}
+
+	/**
+	 * @description Clears the search keyword and restores the current folder's item list.
+	 */
+	#ClearSearch() {
+		if (this.#searchInput) this.#searchInput.value = '';
+		if (this.#searchClearBtn) this.#searchClearBtn.style.display = 'none';
+
+		this.keyword = '';
+		this.#drawListItem(this.items, false);
+	}
+
+	/**
+	 * @description Highlights the search keyword in file name elements.
+	 * @param {string} keyword - Lowercase keyword to highlight.
+	 */
+	#highlightKeyword(keyword) {
+		const nameEls = this.list.querySelectorAll('.se-file-name-image:not(.se-file-name-back)');
+		for (let i = 0; i < nameEls.length; i++) {
+			const el = nameEls[i];
+			const text = el.textContent;
+			const idx = text.toLowerCase().indexOf(keyword);
+			if (idx > -1) {
+				el.innerHTML = text.substring(0, idx) + '<mark>' + text.substring(idx, idx + keyword.length) + '</mark>' + text.substring(idx + keyword.length);
+			}
+		}
 	}
 
 	/**
@@ -633,7 +718,10 @@ function CreateHTMLInfos($, useSearch) {
 								useSearch
 									? /*html*/ `
 										<form class="se-browser-search-form">
-											<input type="text" class="se-input-form" placeholder="${lang.search}" aria-label="${lang.search}">
+											<div class="se-browser-search-input-wrap">
+												<input type="text" class="se-input-form" placeholder="${lang.search}" aria-label="${lang.search}">
+												<button type="button" class="se-btn se-btn-plain se-browser-search-clear" title="${lang.cancel}" aria-label="${lang.cancel}" style="display:none">${icons.cancel}</button>
+											</div>
 											<button type="submit" class="se-btn" title="${lang.search}" aria-label="${lang.search}">${icons.search}</button>
 										</form>`
 									: ''

package/src/modules/contract/Controller.js

@@ -377,14 +377,13 @@ class Controller {
 		if (!passive) {
 			this.#$.ui.onControllerContext();
 			this.#$.store.set('controlActive', true);
+			this.#$.store.set('_preventBlur', true);
 		}
 
 		if (!this.isOpen) {
 			this.#$.ui.opendControllers.push(info);
 		}
 
-		this.#$.store.set('_preventBlur', true);
-
 		this.isOpen = true;
 
 		this.host.controllerOn?.(form, target);

package/src/modules/contract/Figure.js

@@ -904,7 +904,7 @@ class Figure {
 	retainFigureFormat(container, originEl, anchorCover, fileManagerInst) {
 		const isInline = this.#$.component.isInline(container);
 		const originParent = originEl.parentNode;
-		let existElement = this.#$.format.isBlock(originParent) || dom.check.isWysiwygFrame(originParent) ? originEl : Figure.GetContainer(originEl)?.container || originParent || originEl;
+		let existElement = this.#$.format.isBlock(originParent) || dom.check.isWysiwygFrame(originParent) || originParent.nodeType >= 9 ? originEl : Figure.GetContainer(originEl)?.container || originParent || originEl;
 
 		if (dom.query.getParentElement(originEl, dom.check.isExcludeFormat)) {
 			existElement = anchorCover && anchorCover !== originEl ? anchorCover : originEl;

package/src/modules/ui/ModalAnchorEditor.js

@@ -13,9 +13,24 @@ const { _w, NO_EVENT } = env;
  * @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' } }
+ * {
+ * 	  relList: ['nofollow', 'noreferrer', 'noopener'],
+ *    defaultRel: { default: 'noopener', check_new_window: 'noreferrer' }
+ * }
  * ```
  * @property {string} [uploadUrl] - File upload URL.
+ * - The server must return:
+ * ```js
+ * {
+ *   "result": [
+ *     {
+ *       "url": "https://example.com/file.pdf",
+ *       "name": "file.pdf",
+ *       "size": 1048576
+ *     }
+ *   ]
+ * }
+ * ```
  * @property {Object<string, string>} [uploadHeaders] - File upload headers.
  * @property {number} [uploadSizeLimit] - File upload size limit.
  * @property {number} [uploadSingleSizeLimit] - File upload single size limit.

package/src/plugins/browser/audioGallery.js

@@ -5,6 +5,19 @@ import { Browser } from '../../modules/contract';
  * @typedef {Object} AudioGalleryPluginOptions
  * @property {Array<SunEditor.Module.Browser.File>} [data] - Direct data without server calls
  * @property {string} [url] - Server request URL
+ * - The server must return:
+ * ```js
+ * {
+ *   "result": [
+ *     {
+ *       "src": "https://example.com/audio.mp3",
+ *       "name": "audio.mp3",
+ *       "thumbnail": "https://example.com/audio_icon.png",
+ *       "tag": ["music"]
+ *     }
+ *   ]
+ * }
+ * ```
  * @property {Object<string, string>} [headers] - Server request headers
  * @property {string|((item: SunEditor.Module.Browser.File) => string)} [thumbnail] - Default thumbnail
  */

package/src/plugins/browser/fileBrowser.js

@@ -5,8 +5,29 @@ import { Browser } from '../../modules/contract';
  * @typedef {Object} FileBrowserPluginOptions
  * @property {Object<string, *>|Array<*>} [data] - Direct data without server calls (bypasses URL fetch).
  * @property {string} [url] - Server request URL
+ * - The server must return a nested folder structure.
+ * - `_data`: array (inline) or string URL (lazy-loaded on folder click).
+ * - `"default": true` sets the initially selected folder.
+ * ```js
+ * {
+ *   "result": {
+ *     "root": {
+ *       "name": "Root",
+ *       "default": true,
+ *       "_data": [
+ *         { "src": "https://example.com/file1.pdf", "name": "file1.pdf" }
+ *       ],
+ *       "documents": {
+ *         "name": "Documents",
+ *         "_data": "https://api.example.com/files/documents"
+ *       }
+ *     }
+ *   }
+ * }
+ * ```
  * @property {Object<string, string>} [headers] - Server request headers
  * @property {string|((item: SunEditor.Module.Browser.File) => string)} [thumbnail] - Default thumbnail URL or a function that returns a thumbnail URL per item.
+ * @property {number} [expand=1] - Initial folder expand depth. `1` expands the first level, `Infinity` expands all. Default: `1`.
  * @property {Array<string>} [props] - Additional tag names
  * ```js
  * { url: '/api/files', headers: { Authorization: 'Bearer token' }, thumbnail: (item) => item.thumbUrl }
@@ -48,6 +69,7 @@ class FileBrowser extends PluginBrowser {
 			className: 'se-file-browser',
 			thumbnail: typeof pluginOptions.thumbnail === 'function' ? pluginOptions.thumbnail : (item) => thumbnail[item.type] || defaultThumbnail,
 			props: [...new Set((pluginOptions.props ?? []).concat(['frame']))],
+			expand: pluginOptions.expand,
 		});
 	}
 

package/src/plugins/browser/fileGallery.js

@@ -5,6 +5,20 @@ import { Browser } from '../../modules/contract';
  * @typedef {Object} FileGalleryPluginOptions
  * @property {Array<SunEditor.Module.Browser.File>} [data] - Direct data without server calls
  * @property {string} [url] - Server request URL
+ * - The server must return:
+ * ```js
+ * {
+ *   "result": [
+ *     {
+ *       "src": "https://example.com/doc.pdf",
+ *       "name": "doc.pdf",
+ *       "thumbnail": "https://example.com/pdf_icon.png",
+ *       "type": "file", // video, image ..[plugin name]
+ *       "tag": ["document"]
+ *     }
+ *   ]
+ * }
+ * ```
  * @property {Object<string, string>} [headers] - Server request headers
  * @property {string|((item: SunEditor.Module.Browser.File) => string)} [thumbnail] - Default thumbnail
  */

package/src/plugins/browser/imageGallery.js

@@ -5,6 +5,20 @@ import { Browser } from '../../modules/contract';
  * @typedef ImageGalleryPluginOptions
  * @property {Array<*>} [data] - Direct data without server calls
  * @property {string} [url] - Server request URL
+ * - The server must return:
+ * ```js
+ * {
+ *   "result": [
+ *     {
+ *       "src": "https://example.com/img.jpg",
+ *       "name": "img.jpg",
+ *       "thumbnail": "https://example.com/img_thumb.jpg",
+ *       "alt": "description",
+ *       "tag": ["nature"]
+ *     }
+ *   ]
+ * }
+ * ```
  * @property {Object<string, string>} [headers] - Server request headers
  */
 

package/src/plugins/browser/videoGallery.js

@@ -5,6 +5,20 @@ import { Browser } from '../../modules/contract';
  * @typedef {Object} VideoGalleryPluginOptions
  * @property {Array<SunEditor.Module.Browser.File>} [data] - Direct data without server calls
  * @property {string} [url] - Server request URL
+ * - The server must return:
+ * ```js
+ * {
+ *   "result": [
+ *     {
+ *       "src": "https://example.com/video.mp4",
+ *       "name": "video.mp4",
+ *       "thumbnail": "https://example.com/video_thumb.jpg",
+ *       "frame": "video",
+ *       "tag": ["tutorial"]
+ *     }
+ *   ]
+ * }
+ * ```
  * @property {Object<string, string>} [headers] - Server request headers
  * @property {string|((item: SunEditor.Module.Browser.File) => string)} [thumbnail] - Default thumbnail
  */

package/src/plugins/command/codeBlock.js

@@ -66,7 +66,7 @@ class CodeBlock extends PluginCommand {
 		// ───────────────── [[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' },
+			{ class: 'se-btn se-tooltip se-sub-arrow-btn', type: 'button', '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>`,
 		);
 

package/src/plugins/command/fileUpload.js

@@ -8,6 +8,18 @@ const { NO_EVENT } = env;
 /**
  * @typedef FileUploadPluginOptions
  * @property {string} uploadUrl - Server request URL for file upload
+ * - The server must return:
+ * ```js
+ * {
+ *   "result": [
+ *     {
+ *       "url": "https://example.com/file.pdf",
+ *       "name": "file.pdf",
+ *       "size": 1048576
+ *     }
+ *   ]
+ * }
+ * ```
  * @property {Object<string, string>} [uploadHeaders] - Server request headers
  * @property {number} [uploadSizeLimit] - Total upload size limit in bytes
  * @property {number} [uploadSingleSizeLimit] - Single file size limit in bytes