suneditor 3.0.0-beta.9 → 3.0.0-rc.2

package/src/langs/ur.js

@@ -9,7 +9,7 @@
 						throw new Error('SUNEDITOR_LANG a window with a document');
 					}
 					return factory(w);
-			  };
+				};
 	} else {
 		factory(global);
 	}
@@ -206,7 +206,7 @@
 		video_modal_url: 'ذرائع ابلاغ کا یو آر ایل، یوٹیوب/ویمیو',
 		width: 'چوڑائی',
 		message_copy_success: 'کلپ بورڈ میں کاپی ہو گیا',
-		message_copy_fail: 'کاپی ناکام۔ براہ کرم دستی طور پر کاپی کریں۔'
+		message_copy_fail: 'کاپی ناکام۔ براہ کرم دستی طور پر کاپی کریں۔',
 	};
 
 	if (typeof noGlobal === typeof undefined) {
@@ -215,7 +215,7 @@
 				enumerable: true,
 				writable: false,
 				configurable: false,
-				value: {}
+				value: {},
 			});
 		}
 
@@ -223,7 +223,7 @@
 			enumerable: true,
 			writable: true,
 			configurable: true,
-			value: lang
+			value: lang,
 		});
 	}
 

package/src/langs/zh_cn.js

@@ -9,7 +9,7 @@
 						throw new Error('SUNEDITOR_LANG a window with a document');
 					}
 					return factory(w);
-			  };
+				};
 	} else {
 		factory(global);
 	}
@@ -206,7 +206,7 @@
 		video_modal_url: '嵌入网址, Youtube,Vimeo',
 		width: '宽度',
 		message_copy_success: '已复制到剪贴板',
-		message_copy_fail: '复制失败，请手动复制。'
+		message_copy_fail: '复制失败，请手动复制。',
 	};
 
 	if (typeof noGlobal === typeof undefined) {
@@ -215,7 +215,7 @@
 				enumerable: true,
 				writable: false,
 				configurable: false,
-				value: {}
+				value: {},
 			});
 		}
 
@@ -223,7 +223,7 @@
 			enumerable: true,
 			writable: true,
 			configurable: true,
-			value: lang
+			value: lang,
 		});
 	}
 

package/src/modules/{Browser.js → contract/Browser.js}

@@ -1,61 +1,71 @@
-import CoreInjector from '../editorInjector/_core';
-import { dom, keyCodeMap } from '../helper';
-import ApiManager from './ApiManager';
+import { dom, keyCodeMap } from '../../helper';
+import { _w } from '../../helper/env';
+import ApiManager from '../manager/ApiManager';
 
 /**
+ * Browser file item structure
  * @typedef {Object} BrowserFile
  * @property {string} [src=""] - Source url
  * @property {string} [name=""] - File name | Folder name
- * @property {string=} thumbnail - Thumbnail url
- * @property {string=} alt - Image alt
- * @property {Array<string>|string=} tag - Tag name list
- * @property {string=} type - Type (image, video, audio, etc.)
- * @property {string=} frame - Frame name (iframe, video, etc.)
- * @property {BrowserFile | string=} _data - The folder's contents or an API URL.
- * @property {boolean=} default - Whether this folder is the default selection.
- * @property {Object<string, *>=} meta - Metadata
+ * @property {string} [thumbnail] - Thumbnail url
+ * @property {string} [alt] - Image alt
+ * @property {Array<string>|string} [tag] - Tag name list
+ * @property {string} [type] - Type (image, video, audio, etc.)
+ * @property {string} [frame] - Frame name (iframe, video, etc.)
+ * @property {boolean} [default] - Whether this folder is the default selection.
+ * @property {Object<string, *>} [meta] - Metadata
+ * @property {BrowserFile | string} [_data] - Internal: The folder's contents or an API URL (⚠️ DO NOT USE directly)
  */
 
 /**
  * @typedef BrowserParams
  * @property {string} title - File browser window title. Required. Can be overridden in browser.
- * @property {string=} className - Class name of the file browser. Optional. Default: ''.
- * @property {Object<string, *>|Array<*>=} data - direct data without server calls
- * @property {string=} url - File server url. Required. Can be overridden in browser.
- * @property {Object<string, string>=} headers - File server http header. Required. Can be overridden in browser.
+ * @property {string} [className] - Class name of the file browser. Optional. Default: ''.
+ * @property {Object<string, *>|Array<*>} [data] - direct data without server calls
+ * @property {string} [url] - File server url. Required. Can be overridden in browser.
+ * @property {Object<string, string>} [headers] - File server http header. Required. Can be overridden in browser.
  * @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.
- * @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 defines the HTML of a file item. Required. Can be overridden in browser.
- * @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 {((item: BrowserFile) => string)=} thumbnail - Default thumbnail
+ * @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.
+ * @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 defines the HTML of a file item. Required. Can be overridden in browser.
+ * @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 {((item: BrowserFile) => string)} [thumbnail] - Default thumbnail
  */
 
 /**
  * @class
  * @description File browser plugin
  */
-class Browser extends CoreInjector {
+class Browser {
+	#$;
+
+	#loading;
+	#globalEventHandler;
+
+	#closeSignal = false;
+	#bindClose = null;
+
 	/**
 	 * @constructor
-	 * @param {*} inst The instance object that called the constructor.
+	 * @param {*} host The instance object that called the constructor.
+	 * @param {SunEditor.Deps} $ Kernel dependencies
 	 * @param {BrowserParams} params Browser options
 	 */
-	constructor(inst, params) {
-		super(inst.editor);
+	constructor(host, $, params) {
+		this.#$ = $;
 
 		// create HTML
 		this.useSearch = params.useSearch ?? true;
 		const browserFrame = dom.utils.createElement('DIV', { class: 'se-browser sun-editor-common' + (params.className ? ` ${params.className}` : '') });
-		const contentHTML = CreateHTMLInfos(inst.editor, this.useSearch);
+		const contentHTML = CreateHTMLInfos(this.#$, this.useSearch);
 		const content = contentHTML.html;
 
 		// members
-		this.kind = inst.constructor.key || inst.constructor.name;
-		this.inst = inst;
+		this.kind = host.constructor['key'] || host.constructor.name;
+		this.host = host;
 		this.area = browserFrame;
 		this.header = contentHTML.header;
 		this.titleArea = contentHTML.titleArea;
@@ -64,7 +74,7 @@ class Browser extends CoreInjector {
 		this.list = contentHTML.list;
 		this.side = contentHTML.side;
 		this.wrapper = contentHTML.wrapper;
-		this._loading = contentHTML._loading;
+		this.#loading = contentHTML._loading;
 
 		this.title = params.title;
 		this.listClass = params.listClass || 'se-preview-list';
@@ -77,66 +87,57 @@ class Browser extends CoreInjector {
 		this.selectorHandler = params.selectorHandler;
 		this.columnSize = params.columnSize || 4;
 		this.folderDefaultPath = '';
-		this.closeArrow = this.icons.menu_arrow_right;
-		this.openArrow = this.icons.menu_arrow_down;
-		this.icon_folder = this.icons.side_menu_folder_item;
-		this.icon_folder_item = this.icons.side_menu_folder;
-		this.icon_item = this.icons.side_menu_item;
-
-		/**
-		 * @type {Array<BrowserFile>}
-		 */
+		this.closeArrow = this.#$.icons.menu_arrow_right;
+		this.openArrow = this.#$.icons.menu_arrow_down;
+		this.icon_folder = this.#$.icons.side_menu_folder_item;
+		this.icon_folder_item = this.#$.icons.side_menu_folder;
+		this.icon_item = this.#$.icons.side_menu_item;
+
+		/** @type {Array<BrowserFile>} */
 		this.items = [];
-		/**
-		 * @type {Object<string, {name: string, meta: Object<string, *>}>}
-		 */
+		/** @type {Object<string, {name: string, meta: Object<string, *>}>} */
 		this.folders = {};
-		/**
-		 * @type {Object<string, {key?: string, name?: string, children?: *}>}
-		 */
+		/** @type {Object<string, {key?: string, name?: string, children?: *}>} */
 		this.tree = {};
-		/**
-		 * @type {BrowserFile}
-		 */
+		/** @type {BrowserFile} */
 		this.data = {};
 		this.selectedTags = [];
 		this.keyword = '';
 		this.sideInner = null;
-		this._closeSignal = false;
-		this._bindClose = null;
-		this.__globalEventHandler = (e) => {
+
+		// api manager
+		this.apiManager = new ApiManager(this, $, { method: 'GET' });
+
+		this.#globalEventHandler = (e) => {
 			if (!keyCodeMap.isEsc(e.code)) return;
 			this.close();
 		};
-		// api manager
-		this.apiManager = new ApiManager(this, { method: 'GET' });
 
 		// init
 		browserFrame.appendChild(dom.utils.createElement('DIV', { class: 'se-browser-back' }));
 		browserFrame.appendChild(content);
-		this.carrierWrapper.appendChild(browserFrame);
-
-		this.eventManager.addEvent(this.tagArea, 'click', this.#OnClickTag.bind(this));
-		this.eventManager.addEvent(this.list, 'click', this.#OnClickFile.bind(this));
-		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));
+		this.#$.contextProvider.carrierWrapper.appendChild(browserFrame);
+
+		this.#$.eventManager.addEvent(this.tagArea, 'click', this.#OnClickTag.bind(this));
+		this.#$.eventManager.addEvent(this.list, 'click', this.#OnClickFile.bind(this));
+		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));
 	}
 
 	/**
 	 * @description Open a file browser plugin
 	 * @param {Object} [params={}]
-	 * @param {string=} params.listClass - Class name of list div. If not, use "this.listClass".
-	 * @param {string=} params.title - File browser window title. If not, use "this.title".
-	 * @param {string=} params.url - File server url. If not, use "this.url".
-	 * @param {Object<string, string>=} params.urlHeader - File server http header. If not, use "this.urlHeader".
+	 * @param {string} [params.listClass] - Class name of list div. If not, use `this.listClass`.
+	 * @param {string} [params.title] - File browser window title. If not, use `this.title`.
+	 * @param {string} [params.url] - File server url. If not, use `this.url`.
+	 * @param {Object<string, string>} [params.urlHeader] - File server http header. If not, use `this.urlHeader`.
 	 */
-	open(params) {
-		if (!params) params = {};
-		this.__addGlobalEvent();
+	open(params = {}) {
+		this.#addGlobalEvent();
 
 		const listClassName = params.listClass || this.listClass;
 		if (!dom.utils.hasClass(this.list, listClassName)) {
@@ -145,22 +146,24 @@ class Browser extends CoreInjector {
 
 		this.titleArea.textContent = params.title || this.title;
 		this.area.style.display = 'block';
-		this.editor.opendBrowser = this;
-		this.closeArrow = this.options.get('_rtl') ? this.icons.menu_arrow_left : this.icons.menu_arrow_right;
+		this.#$.ui.opendBrowser = this;
+		this.closeArrow = this.#$.options.get('_rtl') ? this.#$.icons.menu_arrow_left : this.#$.icons.menu_arrow_right;
 
 		if (this.directData) {
-			this.__drowItems(this.directData);
+			this.#drowItems(this.directData);
 		} else {
-			this._drawFileList(params.url || this.url, params.urlHeader || this.urlHeader, false);
+			this.#drawFileList(params.url || this.url, params.urlHeader || this.urlHeader, false);
 		}
+
+		this.body.style.maxHeight = dom.utils.getClientSize().h - (this.#$.offset.getGlobal(this.body).top - _w.scrollY) - 20 + 'px';
 	}
 
 	/**
 	 * @description Close a browser plugin
-	 * - The plugin's "init" method is called.
+	 * - The plugin's `init` method is called.
 	 */
 	close() {
-		this.__removeGlobalEvent();
+		this.#removeGlobalEvent();
 		this.apiManager.cancel();
 
 		this.area.style.display = 'none';
@@ -171,10 +174,10 @@ class Browser extends CoreInjector {
 		this.data = {};
 		this.keyword = '';
 		this.list.innerHTML = this.tagArea.innerHTML = this.titleArea.textContent = '';
-		this.editor.opendBrowser = null;
+		this.#$.ui.opendBrowser = null;
 		this.sideInner = null;
 
-		if (typeof this.inst.init === 'function') this.inst.init();
+		this.host.browserInit?.();
 	}
 
 	/**
@@ -184,10 +187,10 @@ class Browser extends CoreInjector {
 	search(keyword) {
 		if (this.searchUrl) {
 			this.keyword = keyword;
-			this._drawFileList(this.searchUrl + '?keyword=' + keyword, this.searchUrlHeader, false);
+			this.#drawFileList(this.searchUrl + '?keyword=' + keyword, this.searchUrlHeader, false);
 		} else {
 			this.keyword = keyword.toLowerCase();
-			this._drawListItem(this.items, false);
+			this.#drawListItem(this.items, false);
 		}
 	}
 
@@ -205,24 +208,23 @@ class Browser extends CoreInjector {
 	 * @description Show file browser loading box
 	 */
 	showBrowserLoading() {
-		this._loading.style.display = 'block';
+		this.#loading.style.display = 'block';
 	}
 
 	/**
 	 * @description Close file browser loading box
 	 */
 	closeBrowserLoading() {
-		this._loading.style.display = 'none';
+		this.#loading.style.display = 'none';
 	}
 
 	/**
-	 * @private
 	 * @description Fetches the file list from the server.
 	 * @param {string} url - The file server URL.
 	 * @param {Object<string, string>} urlHeader - The HTTP headers for the request.
 	 * @param {boolean} pageLoading - Indicates if this is a paginated request.
 	 */
-	_drawFileList(url, urlHeader, pageLoading) {
+	#drawFileList(url, urlHeader, pageLoading) {
 		this.apiManager.call({ method: 'GET', url, headers: urlHeader, callBack: this.#CallBackGet.bind(this), errorCallBack: this.#CallBackError.bind(this) });
 		if (!pageLoading) {
 			this.sideOpenBtn.style.display = 'none';
@@ -231,12 +233,11 @@ class Browser extends CoreInjector {
 	}
 
 	/**
-	 * @private
 	 * @description Updates the displayed list of file items.
 	 * @param {Array<BrowserFile>} items - The file items to display.
 	 * @param {boolean} update - Whether to update the tags.
 	 */
-	_drawListItem(items, update) {
+	#drawListItem(items, update) {
 		const keyword = this.keyword;
 		items = this.tagfilter(items).filter((item) => item.name.toLowerCase().indexOf(keyword) > -1);
 
@@ -281,41 +282,38 @@ class Browser extends CoreInjector {
 	}
 
 	/**
-	 * @private
 	 * @description Adds a global event listener for closing the browser.
 	 */
-	__addGlobalEvent() {
-		this.__removeGlobalEvent();
-		this._bindClose = this.eventManager.addGlobalEvent('keydown', this.__globalEventHandler, true);
+	#addGlobalEvent() {
+		this.#removeGlobalEvent();
+		this.#bindClose = this.#$.eventManager.addGlobalEvent('keydown', this.#globalEventHandler, true);
 	}
 
 	/**
-	 * @private
 	 * @description Removes the global event listener for closing the browser.
 	 */
-	__removeGlobalEvent() {
-		if (this._bindClose) this._bindClose = this.eventManager.removeGlobalEvent(this._bindClose);
+	#removeGlobalEvent() {
+		this.#bindClose &&= this.#$.eventManager.removeGlobalEvent(this.#bindClose);
 	}
 
 	/**
-	 * @private
 	 * @description Renders the file items or folder structure from data.
 	 * @param {BrowserFile[]|BrowserFile} data - The data representing the file structure.
-	 * @returns {boolean} True if rendering was successful, false otherwise.
+	 * @returns {boolean} `true` if rendering was successful, `false` otherwise.
 	 */
-	__drowItems(data) {
+	#drowItems(data) {
 		if (Array.isArray(data)) {
 			if (data.length > 0) {
-				this._drawListItem(data, true);
+				this.#drawListItem(data, true);
 			}
 			return true;
 		} else if (typeof data === 'object') {
 			this.sideOpenBtn.style.display = '';
-			this.__parseFolderData(data);
+			this.#parseFolderData(data);
 
 			this.side.innerHTML = '';
 			const sideInner = (this.sideInner = dom.utils.createElement('div', null));
-			this.__createFolderList(this.tree, sideInner);
+			this.#createFolderList(this.tree, sideInner);
 			this.side.appendChild(sideInner);
 
 			if (this.folderDefaultPath) {
@@ -333,12 +331,11 @@ class Browser extends CoreInjector {
 	}
 
 	/**
-	 * @private
 	 * @description Parses folder data into a structured format.
 	 * @param {BrowserFile} data - The folder data.
 	 * @param {string} [path] - The current path in the folder hierarchy.
 	 */
-	__parseFolderData(data, path) {
+	#parseFolderData(data, path) {
 		let current = this.tree;
 
 		// _data
@@ -351,9 +348,7 @@ class Browser extends CoreInjector {
 			const parts = path.split('/');
 			const len = parts.length - 1;
 			parts.forEach((part, index) => {
-				if (!current[part]) {
-					current[part] = { children: {} };
-				}
+				current[part] ||= { children: {} };
 
 				if (index === len) {
 					current[part].key = path;
@@ -375,20 +370,19 @@ class Browser extends CoreInjector {
 
 			this.folders[currentPath] = {
 				name: v.name || key,
-				meta: v.meta || {}
+				meta: v.meta || {},
 			};
 
-			this.__parseFolderData(v, currentPath);
+			this.#parseFolderData(v, currentPath);
 		});
 	}
 
 	/**
-	 * @private
 	 * @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.
 	 */
-	__createFolderList(folderData, parentElement) {
+	#createFolderList(folderData, parentElement) {
 		for (const key in folderData) {
 			const item = folderData[key];
 			if (!item) continue;
@@ -397,14 +391,14 @@ class Browser extends CoreInjector {
 				const folderLabel = dom.utils.createElement(
 					'div',
 					item.key ? { 'data-command': item.key, 'aria-label': item.name } : null,
-					`<span class="se-menu-icon">${item.key ? this.icon_folder : this.icon_folder_item}</span><span>${item.name}</span>`
+					`<span class="se-menu-icon">${item.key ? this.icon_folder : this.icon_folder_item}</span><span>${item.name}</span>`,
 				);
 				const folderDiv = dom.utils.createElement('div', { class: 'se-menu-folder' }, folderLabel);
 
 				folderLabel.insertBefore(dom.utils.createElement('button', null, this.closeArrow), folderLabel.firstElementChild);
 				const childContainer = document.createElement('div');
 				dom.utils.addClass(childContainer, 'se-menu-child|se-menu-hidden');
-				this.__createFolderList(item.children, childContainer);
+				this.#createFolderList(item.children, childContainer);
 				folderDiv.appendChild(childContainer);
 
 				parentElement.appendChild(folderDiv);
@@ -427,7 +421,7 @@ class Browser extends CoreInjector {
 		try {
 			const res = JSON.parse(xmlHttp.responseText);
 			const data = res.result;
-			if (this.__drowItems(data)) return;
+			if (this.#drowItems(data)) return;
 
 			if (res.nullMessage) {
 				this.list.innerHTML = res.nullMessage;
@@ -436,7 +430,6 @@ class Browser extends CoreInjector {
 			throw Error(`[SUNEDITOR.browser.drawList.fail] cause: "${e.message}"`);
 		} finally {
 			this.closeBrowserLoading();
-			this.body.style.maxHeight = dom.utils.getClientSize().h - this.header.offsetHeight - 50 + 'px';
 		}
 	}
 
@@ -468,7 +461,7 @@ class Browser extends CoreInjector {
 			dom.utils.addClass(selectTag, 'on');
 		}
 
-		this._drawListItem(this.items, false);
+		this.#drawListItem(this.items, false);
 	}
 
 	/**
@@ -518,9 +511,9 @@ class Browser extends CoreInjector {
 		this.tagArea.innerHTML = '';
 
 		if (typeof data === 'string') {
-			this._drawFileList(data, this.urlHeader, true);
+			this.#drawFileList(data, this.urlHeader, true);
 		} else {
-			this._drawListItem(data, false);
+			this.#drawListItem(data, false);
 		}
 	}
 
@@ -530,9 +523,9 @@ class Browser extends CoreInjector {
 	#OnMouseDown_browser(e) {
 		const eventTarget = dom.query.getEventTarget(e);
 		if (/se-browser-inner/.test(eventTarget.className)) {
-			this._closeSignal = true;
+			this.#closeSignal = true;
 		} else {
-			this._closeSignal = false;
+			this.#closeSignal = false;
 		}
 	}
 
@@ -543,7 +536,7 @@ class Browser extends CoreInjector {
 		const eventTarget = dom.query.getEventTarget(e);
 		e.stopPropagation();
 
-		if (/close/.test(eventTarget.getAttribute('data-command')) || this._closeSignal) {
+		if (/close/.test(eventTarget.getAttribute('data-command')) || this.#closeSignal) {
 			this.close();
 		}
 	}
@@ -584,14 +577,13 @@ class Browser extends CoreInjector {
 }
 
 /**
- * @private
- * @param {__se__EditorCore} editor - editor instance
+ * @param {SunEditor.Deps} $ - editor instance
  * @param {boolean} useSearch - Whether to use the search function
  * @returns {{ html: HTMLElement, header: HTMLElement, titleArea: HTMLElement, tagArea: HTMLElement, body: HTMLElement, list: HTMLElement, side: HTMLElement, wrapper: HTMLElement, _loading: HTMLElement }} HTML
  */
-function CreateHTMLInfos(editor, useSearch) {
-	const lang = editor.lang;
-	const icons = editor.icons;
+function CreateHTMLInfos($, useSearch) {
+	const lang = $.lang;
+	const icons = $.icons;
 	const htmlString = /*html*/ `
 		<div class="se-browser-content">
 			<div class="se-browser-header">
@@ -638,15 +630,14 @@ function CreateHTMLInfos(editor, useSearch) {
 		list: content.querySelector('.se-browser-list'),
 		side: content.querySelector('.se-browser-side'),
 		wrapper: content.querySelector('.se-browser-wrapper'),
-		_loading: content.querySelector('.se-loading-box')
+		_loading: content.querySelector('.se-loading-box'),
 	};
 }
 
 /**
- * @private
  * @this {{ thumbnail: ((...args: *) => *), props: Array<*> }}
- * @description Define the HTML of the item to be put in "div.se-file-item-column".
- * - Format: [ { src: "image src", name: "name(@option)", alt: "image alt(@option)", tag: "tag name(@option)" } ]
+ * @description Define the HTML of the item to be put in `div.se-file-item-column`.
+ * - Format: `[ { src: "image src", name: "name(@option)", alt: "image alt(@option)", tag: "tag name(@option)" } ]`
  * @param {BrowserFile} item Item of the response data's array
  */
 function DrawItems(item) {