suneditor 3.0.5 → 3.1.0

package/src/interfaces/plugins.js

@@ -171,7 +171,7 @@ export class PluginDropdownFree extends Base {
  * These plugins typically respond to input events in the wysiwyg area
  *
  * **Commonly used hooks:**
- * - `onInput()` - Responds to input events in the editor (See: `mention` plugin)
+ * - `onInput()` - Responds to input events in the editor (See: `autocomplete` plugin)
  * - Other event hooks can be used as needed (`onKeydown`, `onClick`, etc.)
  *
  * Child classes MAY optionally implement event hook methods

package/src/langs/ckb.js

@@ -134,6 +134,7 @@
 		math_modal_title: 'بیركاری',
 		maxSize: 'گه‌وره‌ترین قه‌باره‌',
 		mediaGallery: 'گەلەری میدیا',
+		autocomplete: 'تەواوکردنی ئۆتۆماتیکی',
 		mention: 'تنويه ب',
 		menu_bordered: 'لێواری هه‌بێت',
 		menu_code: 'كۆد',

package/src/langs/cs.js

@@ -134,6 +134,7 @@
 		math_modal_title: 'Matematika',
 		maxSize: 'Max. velikost',
 		mediaGallery: 'Galerie médií',
+		autocomplete: 'Automatické doplňování',
 		mention: 'Zmínka',
 		menu_bordered: 'Ohraničené',
 		menu_code: 'Kód',

package/src/langs/da.js

@@ -134,6 +134,7 @@
 		math_modal_title: 'Math',
 		maxSize: 'Max størrelse',
 		mediaGallery: 'Mediegalleri',
+		autocomplete: 'Autofuldførelse',
 		mention: 'Nævne',
 		menu_bordered: 'Afgrænsningslinje',
 		menu_code: 'Code',

package/src/langs/de.js

@@ -134,6 +134,7 @@
 		math_modal_title: 'Mathematik',
 		maxSize: 'Maximale Größe',
 		mediaGallery: 'Mediengalerie',
+		autocomplete: 'Autovervollständigung',
 		mention: 'Erwähnen',
 		menu_bordered: 'Umrandet',
 		menu_code: 'Quellcode',

package/src/langs/en.js

@@ -133,7 +133,7 @@
 		math_modal_title: 'Math',
 		maxSize: 'Max size',
 		mediaGallery: 'Media gallery',
-		mention: 'Mention',
+		autocomplete: 'Autocomplete',
 		menu_bordered: 'Bordered',
 		menu_code: 'Code',
 		menu_neon: 'Neon',

package/src/langs/es.js

@@ -134,6 +134,7 @@
 		math_modal_title: 'Matemáticas',
 		maxSize: 'Tamaño máximo',
 		mediaGallery: 'Galería de medios',
+		autocomplete: 'Autocompletar',
 		mention: 'Mencionar',
 		menu_bordered: 'Bordeado',
 		menu_code: 'Código',

package/src/langs/fa.js

@@ -134,6 +134,7 @@
 		math_modal_title: 'فرمول ریاضی',
 		maxSize: 'حداکثر اندازه',
 		mediaGallery: 'گالری رسانه',
+		autocomplete: 'تکمیل خودکار',
 		mention: 'ذکر کردن',
 		menu_bordered: 'لبه‌دار',
 		menu_code: 'کُد',

package/src/langs/fr.js

@@ -134,6 +134,7 @@
 		math_modal_title: 'Math',
 		maxSize: 'Taille max',
 		mediaGallery: 'Galerie multimédia',
+		autocomplete: 'Saisie semi-automatique',
 		mention: 'Mention',
 		menu_bordered: 'Ligne de démarcation',
 		menu_code: 'Code',

package/src/langs/he.js

@@ -134,6 +134,7 @@
 		math_modal_title: 'נוסחה',
 		maxSize: 'גודל מרבי',
 		mediaGallery: 'גלריית מדיה',
+		autocomplete: 'השלמה אוטומטית',
 		mention: 'הזכר',
 		menu_bordered: 'בעל מיתאר',
 		menu_code: 'קוד',

package/src/langs/hu.js

@@ -134,6 +134,7 @@
 		math_modal_title: 'Matematika',
 		maxSize: 'Maximális méret',
 		mediaGallery: 'Média galéria',
+		autocomplete: 'Automatikus kiegészítés',
 		mention: 'Említés',
 		menu_bordered: 'Keretezett',
 		menu_code: 'Kód',

package/src/langs/it.js

@@ -134,6 +134,7 @@
 		math_modal_title: 'Matematica',
 		maxSize: 'Dimensione massima',
 		mediaGallery: 'Galleria multimediale',
+		autocomplete: 'Completamento automatico',
 		mention: 'Menzione',
 		menu_bordered: 'Bordato',
 		menu_code: 'Codice',

package/src/langs/ja.js

@@ -133,6 +133,7 @@
 		math_modal_title: '数学',
 		maxSize: '最大サイズ',
 		mediaGallery: 'メディア ギャラリー',
+		autocomplete: 'オートコンプリート',
 		mention: '言及する',
 		menu_bordered: '境界線',
 		menu_code: 'コード',

package/src/langs/km.js

@@ -133,6 +133,7 @@
 		math_modal_title: 'គណិត',
 		maxSize: 'ទំហំធំ',
 		mediaGallery: 'វិចិត្រសាលមេឌៀ',
+		autocomplete: 'បំពេញដោយស្វ័យប្រវត្តិ',
 		mention: 'លើកឡើង',
 		menu_bordered: 'មានស៊ុម',
 		menu_code: 'កូដ',

package/src/langs/ko.js

@@ -133,6 +133,7 @@
 		math_modal_title: '수식',
 		maxSize: '최대화',
 		mediaGallery: '미디어 갤러리',
+		autocomplete: '자동 완성',
 		mention: '멘션',
 		menu_bordered: '경계선',
 		menu_code: '코드',

package/src/langs/lv.js

@@ -134,6 +134,7 @@
 		math_modal_title: 'Matemātika',
 		maxSize: 'Maksimālais izmērs',
 		mediaGallery: 'Mediju galerija',
+		autocomplete: 'Automātiskā pabeigšana',
 		mention: 'Pieminēt',
 		menu_bordered: 'Robežojās',
 		menu_code: 'Kods',

package/src/langs/nl.js

@@ -134,6 +134,7 @@
 		math_modal_title: 'Wiskunde',
 		maxSize: 'Maximale grootte',
 		mediaGallery: 'Mediagalerij',
+		autocomplete: 'Automatisch aanvullen',
 		mention: 'Vermelding',
 		menu_bordered: 'Omlijnd',
 		menu_code: 'Code',

package/src/langs/pl.js

@@ -134,6 +134,7 @@
 		math_modal_title: 'Matematyczne',
 		maxSize: 'Maksymalny rozmiar',
 		mediaGallery: 'Galeria multimediów',
+		autocomplete: 'Automatyczne uzupełnianie',
 		mention: 'Wzmianka',
 		menu_bordered: 'Z obwódką',
 		menu_code: 'Kod',

package/src/langs/pt_br.js

@@ -134,6 +134,7 @@
 		math_modal_title: 'Matemática',
 		maxSize: 'Tam máx',
 		mediaGallery: 'Galeria de mídia',
+		autocomplete: 'Preenchimento automático',
 		mention: 'Menção',
 		menu_bordered: 'Com borda',
 		menu_code: 'Código',

package/src/langs/ro.js

@@ -134,6 +134,7 @@
 		math_modal_title: 'Matematică',
 		maxSize: 'Dimensiune maximă',
 		mediaGallery: 'Galeria media',
+		autocomplete: 'Completare automată',
 		mention: 'Mentiune',
 		menu_bordered: 'Mărginit',
 		menu_code: 'Citat',

package/src/langs/ru.js

@@ -134,6 +134,7 @@
 		math_modal_title: 'математический',
 		maxSize: 'Ширина по размеру страницы',
 		mediaGallery: 'Галерея мультимедиа',
+		autocomplete: 'Автозаполнение',
 		mention: 'Упоминание',
 		menu_bordered: 'Граничная Линия',
 		menu_code: 'Код',

package/src/langs/se.js

@@ -134,6 +134,7 @@
 		math_modal_title: 'Math',
 		maxSize: 'Maxstorlek',
 		mediaGallery: 'Rel attribut',
+		autocomplete: 'Autoslutför',
 		mention: 'Namn',
 		menu_bordered: 'Avgränsningslinje',
 		menu_code: 'Kod',

package/src/langs/tr.js

@@ -134,6 +134,7 @@
 		math_modal_title: 'Matematik',
 		maxSize: 'En Büyük Boyut',
 		mediaGallery: 'Medya galerisi',
+		autocomplete: 'Otomatik Tamamlama',
 		mention: 'Belirtmek',
 		menu_bordered: 'Çerçeveli',
 		menu_code: 'Kod',

package/src/langs/uk.js

@@ -134,6 +134,7 @@
 		math_modal_title: 'Формула',
 		maxSize: 'Ширина за розміром сторінки',
 		mediaGallery: 'Медіа галерея',
+		autocomplete: 'Автозаповнення',
 		mention: 'Згадати',
 		menu_bordered: 'З лініями',
 		menu_code: 'Код',

package/src/langs/ur.js

@@ -134,6 +134,7 @@
 		math_modal_title: 'ریاضی',
 		maxSize: 'زیادہ سے زیادہ سائز',
 		mediaGallery: 'میڈیا گیلری',
+		autocomplete: 'خود بخود مکمل',
 		mention: 'تذکرہ',
 		menu_bordered: 'سرحدی',
 		menu_code: 'کوڈ',

package/src/langs/zh_cn.js

@@ -134,6 +134,7 @@
 		math_modal_title: '数学',
 		maxSize: '最大尺寸',
 		mediaGallery: '媒体库',
+		autocomplete: '自动完成',
 		mention: '提到',
 		menu_bordered: '边界线',
 		menu_code: '代码',

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);
@@ -540,11 +595,12 @@ class Browser {
 		dom.utils.removeClass(this.side.querySelectorAll('.active'), 'active');
 		dom.utils.addClass([cmdTarget, dom.query.getParentElement(cmdTarget, '.se-menu-folder')], 'active');
 		this.tagArea.innerHTML = '';
+		this.selectedTags = [];
 
 		if (typeof data === 'string') {
 			this.#drawFileList(data, this.urlHeader, true);
 		} else {
-			this.#drawListItem(data, false);
+			this.#drawListItem(data, true);
 		}
 	}
 
@@ -576,9 +632,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 +719,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/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/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

package/src/plugins/dropdown/layout.js

@@ -75,7 +75,7 @@ function CreateHTML(layoutList) {
 		t = layoutList[i];
 		list += /*html*/ `
 			<li>
-				<button type="button" class="se-btn se-btn-list" data-value="${i}" title="${t.name}" aria-label="${t.name}">
+				<button type="button" class="se-btn se-btn-list" data-command="layout" data-value="${i}" title="${t.name}" aria-label="${t.name}">
 					${t.name}
 				</button>
 			</li>`;

package/src/plugins/dropdown/template.js

@@ -74,7 +74,8 @@ function CreateHTML(templateList) {
 		<li>
 			<button 
 				type="button" 
-				class="se-btn se-btn-list" 
+				class="se-btn se-btn-list"
+				data-command="template"
 				data-value="${i}" 
 				title="${t.name}" 
 				aria-label="${t.name}"