suneditor 3.1.3 → 3.2.0

package/src/langs/tr.js

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

package/src/langs/ur.js

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

package/src/langs/zh_cn.js

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

package/src/modules/contract/Browser.js

@@ -40,7 +40,7 @@ import ApiManager from '../manager/ApiManager';
  *   ]
  * }
  * ```
- * @property {Object<string, string>} [searchUrlHeader] - File server search http header. Optional. Can be overridden in browser.
+ * @property {Object<string, string>} [searchHeaders] - 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.
  * ```js
@@ -93,7 +93,9 @@ class Browser {
 
 		// create HTML
 		this.useSearch = params.useSearch ?? true;
-		const browserFrame = dom.utils.createElement('DIV', { class: 'se-browser sun-editor-common' + (params.className ? ` ${params.className}` : '') });
+		const browserFrame = dom.utils.createElement('DIV', {
+			class: 'se-browser sun-editor-common' + (params.className ? ` ${params.className}` : ''),
+		});
 		const contentHTML = CreateHTMLInfos(this.#$, this.useSearch);
 		const content = contentHTML.html;
 
@@ -114,10 +116,13 @@ class Browser {
 		this.listClass = params.listClass || 'se-preview-list';
 		this.directData = params.data;
 		this.url = params.url;
-		this.urlHeader = params.headers;
+		this.headers = params.headers;
 		this.searchUrl = params.searchUrl;
-		this.searchUrlHeader = params.searchUrlHeader;
-		this.drawItemHandler = (params.drawItemHandler || DrawItems).bind({ thumbnail: params.thumbnail, props: params.props || [] });
+		this.searchHeaders = params.searchHeaders;
+		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;
@@ -159,13 +164,23 @@ 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((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.#$.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.#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));
 	}
@@ -176,7 +191,7 @@ class Browser {
 	 * @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 {Object<string, string>} [params.headers] - File server http header. If not, use `this.headers`.
 	 * @example
 	 * // Open with default settings (configured at construction):
 	 * this.browser.open();
@@ -185,7 +200,7 @@ class Browser {
 	 * this.browser.open({
 	 *   title: 'Select a video',
 	 *   url: '/api/videos',
-	 *   urlHeader: { Authorization: 'Bearer token' },
+	 *   headers: { Authorization: 'Bearer token' },
 	 * });
 	 */
 	open(params = {}) {
@@ -205,10 +220,11 @@ class Browser {
 		if (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.headers || this.headers, false);
 		}
 
-		this.body.style.maxHeight = dom.utils.getClientSize().h - (this.#$.offset.getGlobal(this.body).top - _w.scrollY) - 20 + 'px';
+		this.body.style.maxHeight =
+			dom.utils.getClientSize().h - (this.#$.offset.getGlobal(this.body).top - _w.scrollY) - 20 + 'px';
 	}
 
 	/**
@@ -246,7 +262,12 @@ class Browser {
 	search(keyword) {
 		if (this.searchUrl) {
 			this.keyword = keyword;
-			this.#drawFileList(this.searchUrl + '?keyword=' + keyword, this.searchUrlHeader, false);
+			const sep = this.searchUrl.includes('?') ? '&' : '?';
+			this.#drawFileList(
+				this.searchUrl + sep + 'keyword=' + _w.encodeURIComponent(keyword),
+				this.searchHeaders,
+				false,
+			);
 		} else {
 			this.keyword = keyword.toLowerCase();
 			this.#drawListItem(this.#allItems.length > 0 ? this.#allItems : this.items, false);
@@ -282,7 +303,9 @@ class Browser {
 	 */
 	tagfilter(items) {
 		const selectedTags = this.selectedTags;
-		return selectedTags.length === 0 ? items : items.filter((item) => !Array.isArray(item.tag) || item.tag.some((tag) => selectedTags.includes(tag)));
+		return selectedTags.length === 0
+			? items
+			: items.filter((item) => !Array.isArray(item.tag) || item.tag.some((tag) => selectedTags.includes(tag)));
 	}
 
 	/**
@@ -302,11 +325,17 @@ class Browser {
 	/**
 	 * @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 {Object<string, string>} headers - The HTTP headers for the request.
 	 * @param {boolean} pageLoading - Indicates if this is a paginated request.
 	 */
-	#drawFileList(url, urlHeader, pageLoading) {
-		this.apiManager.call({ method: 'GET', url, headers: urlHeader, callBack: this.#CallBackGet.bind(this), errorCallBack: this.#CallBackError.bind(this) });
+	#drawFileList(url, headers, pageLoading) {
+		this.apiManager.call({
+			method: 'GET',
+			url,
+			headers,
+			callBack: this.#CallBackGet.bind(this),
+			errorCallBack: this.#CallBackError.bind(this),
+		});
 		if (!pageLoading) {
 			this.sideOpenBtn.style.display = 'none';
 			this.showBrowserLoading();
@@ -403,7 +432,9 @@ class Browser {
 			this.side.appendChild(sideInner);
 
 			if (this.folderDefaultPath) {
-				const openFolder = /** @type {HTMLButtonElement} */ (sideInner.querySelector(`[data-command="${this.folderDefaultPath}"]`));
+				const openFolder = /** @type {HTMLButtonElement} */ (
+					sideInner.querySelector(`[data-command="${this.folderDefaultPath}"]`)
+				);
 				openFolder.click();
 				if (this.folderDefaultPath.includes('/')) {
 					dom.utils.removeClass(openFolder.parentElement, 'se-menu-hidden');
@@ -484,7 +515,10 @@ class Browser {
 				);
 				const folderDiv = dom.utils.createElement('div', { class: 'se-menu-folder' }, folderLabel);
 
-				folderLabel.insertBefore(dom.utils.createElement('button', null, expanded ? this.openArrow : 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, expanded ? 'se-menu-child' : 'se-menu-child|se-menu-hidden');
 				this.#createFolderList(item.children, childContainer, depth + 1);
@@ -492,7 +526,11 @@ class Browser {
 
 				parentElement.appendChild(folderDiv);
 			} else {
-				const folderLabel = dom.utils.createElement('div', { 'data-command': item.key, 'aria-label': item.name, class: 'se-menu-folder-item' }, `<span class="se-menu-icon">${this.icon_item}</span><span>${item.name}</span>`);
+				const folderLabel = dom.utils.createElement(
+					'div',
+					{ 'data-command': item.key, 'aria-label': item.name, class: 'se-menu-folder-item' },
+					`<span class="se-menu-icon">${this.icon_item}</span><span>${item.name}</span>`,
+				);
 				if (parentElement === this.sideInner) {
 					const folderDiv = dom.utils.createElement('div', { class: 'se-menu-folder' }, folderLabel);
 					parentElement.appendChild(folderDiv);
@@ -528,7 +566,9 @@ class Browser {
 	 */
 	#CallBackError(res, xmlHttp) {
 		this.closeBrowserLoading();
-		throw Error(`[SUNEDITOR.browser.get.serverException] status: ${xmlHttp.status}, response: ${res.errorMessage || xmlHttp.responseText}`);
+		throw Error(
+			`[SUNEDITOR.browser.get.serverException] status: ${xmlHttp.status}, response: ${res.errorMessage || xmlHttp.responseText}`,
+		);
 	}
 
 	/**
@@ -601,7 +641,7 @@ class Browser {
 		this.selectedTags = [];
 
 		if (typeof data === 'string') {
-			this.#drawFileList(data, this.urlHeader, true);
+			this.#drawFileList(data, this.headers, true);
 		} else {
 			this.#drawListItem(data, true);
 		}
@@ -665,7 +705,12 @@ class Browser {
 			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);
+				el.innerHTML =
+					text.substring(0, idx) +
+					'<mark>' +
+					text.substring(idx, idx + keyword.length) +
+					'</mark>' +
+					text.substring(idx + keyword.length);
 			}
 		}
 	}

package/src/modules/contract/ColorPicker.js

@@ -120,7 +120,11 @@ class ColorPicker {
 		if (!params.disableHEXInput) {
 			this.hueSlider = new HueSlider(this, $, params.hueSliderOptions, 'se-dropdown');
 			// hue open
-			this.#$.eventManager.addEvent(this.target.querySelector('.__se_hue'), 'click', this.#OnColorPalette.bind(this));
+			this.#$.eventManager.addEvent(
+				this.target.querySelector('.__se_hue'),
+				'click',
+				this.#OnColorPalette.bind(this),
+			);
 			this.#$.eventManager.addEvent(this.inputElement, 'input', this.#OnChangeInput.bind(this));
 			this.#$.eventManager.addEvent(this.target.querySelector('form'), 'submit', this.#Submit.bind(this));
 		}
@@ -140,7 +144,7 @@ class ColorPicker {
 	 * @description Displays or resets the currently selected color at color list.
 	 * @param {Node|string} nodeOrColor Current Selected node
 	 * @param {Node} target target
-	 * @param {?(current: Node) => boolean} [stopCondition] - A function used to stop traversing parent nodes while finding the color.
+	 * @param {?(current: *) => boolean} [stopCondition] - A function used to stop traversing parent nodes while finding the color.
 	 * - When this function returns `true`, the traversal ends at that node.
 	 * - e.g., `(node) => this.format.isLine(node)` stops at line-level elements like <p>, <div>.
 	 * @example
@@ -154,7 +158,9 @@ class ColorPicker {
 		this.targetButton = target;
 		if (typeof stopCondition !== 'function') stopCondition = () => false;
 
-		let fillColor = (typeof nodeOrColor === 'string' ? nodeOrColor : this.#getColorInNode(nodeOrColor, stopCondition)) || this.defaultColor;
+		let fillColor =
+			(typeof nodeOrColor === 'string' ? nodeOrColor : this.#getColorInNode(nodeOrColor, stopCondition)) ||
+			this.defaultColor;
 		fillColor = converter.isHexColor(fillColor) ? fillColor : converter.rgb2hex(fillColor) || fillColor || '';
 
 		const colorList = this.colorList;
@@ -248,7 +254,9 @@ class ColorPicker {
 				return parseInt(a, 10);
 			});
 		dom.utils.removeItem(temp);
-		return colors.length >= 3 ? '#' + ((1 << 24) + (colors[0] << 16) + (colors[1] << 8) + colors[2]).toString(16).substring(1) : '';
+		return colors.length >= 3
+			? '#' + ((1 << 24) + (colors[0] << 16) + (colors[1] << 8) + colors[2]).toString(16).substring(1)
+			: '';
 	}
 
 	#OnColorPalette() {

package/src/modules/contract/Controller.js

@@ -25,6 +25,8 @@ const ADD_OFFSET_VALUE = { left: 0, right: 0, top: 0 };
  * @property {"top"|"bottom"} [position="bottom"] Controller position
  * @property {boolean} [isWWTarget=true] If the controller is in the WYSIWYG area, set it to `true`.
  * @property {() => void} [initMethod=null] Method to be called when the controller is closed.
+ * @property {() => boolean} [escGuard=null] Called on ESC before the controller closes. Return `true`
+ * to keep it open (e.g. when an inner sub-panel should absorb the ESC instead).
  * @property {boolean} [disabled=false] If `true`, When the `controller` is opened, buttons without the `se-component-enabled` class are disabled.
  * @property {Array<Controller|HTMLElement>} [parents=[]] The parent `controller` instance array when `controller` is opened nested.
  * @property {boolean} [parentsHide=false] If `true`, the parent element is hidden when the controller is opened.
@@ -45,6 +47,7 @@ class Controller {
 	#$;
 
 	#initMethod;
+	#escGuard;
 	#globalEventHandlers;
 
 	#addOffset = ADD_OFFSET_VALUE;
@@ -98,7 +101,11 @@ class Controller {
 		this.__offset = {};
 
 		this.#initMethod = typeof params.initMethod === 'function' ? params.initMethod : null;
-		this.#globalEventHandlers = { keydown: this.#CloseListener_keydown.bind(this), mousedown: this.#CloseListener_mousedown.bind(this) };
+		this.#escGuard = typeof params.escGuard === 'function' ? params.escGuard : null;
+		this.#globalEventHandlers = {
+			keydown: this.#CloseListener_keydown.bind(this),
+			mousedown: this.#CloseListener_mousedown.bind(this),
+		};
 
 		for (const parent of this.parents) {
 			if (dom.check.isElement(parent)) {
@@ -293,7 +300,8 @@ class Controller {
 	 * @description Reposition controller on scroll event
 	 */
 	_scrollReposition() {
-		if (this.form.hasAttribute('data-se-hidden-by-parent') || this.form.hasAttribute('data-se-hidden-by-children')) return;
+		if (this.form.hasAttribute('data-se-hidden-by-parent') || this.form.hasAttribute('data-se-hidden-by-children'))
+			return;
 		if (this.#setControllerPosition(this.form, this.currentPositionTarget, false)) {
 			_w.setTimeout(() => {
 				this.#childrenSync('show');
@@ -368,7 +376,14 @@ class Controller {
 			notInCarrier: !this.#$.contextProvider.carrierWrapper.contains(form),
 		};
 
-		if ((await this.#$.eventManager.triggerEvent('onBeforeShowController', { caller: this.kind, frameContext: this.#$.frameContext, info })) === false) return;
+		if (
+			(await this.#$.eventManager.triggerEvent('onBeforeShowController', {
+				caller: this.kind,
+				frameContext: this.#$.frameContext,
+				info,
+			})) === false
+		)
+			return;
 
 		form.style.display = 'block';
 		if (this.#$.contextProvider.shadowRoot) {
@@ -388,7 +403,11 @@ class Controller {
 		this.isOpen = true;
 
 		this.host.controllerOn?.(form, target);
-		this.#$.eventManager.triggerEvent('onShowController', { caller: this.kind, frameContext: this.#$.frameContext, info });
+		this.#$.eventManager.triggerEvent('onShowController', {
+			caller: this.kind,
+			frameContext: this.#$.frameContext,
+			info,
+		});
 	}
 
 	/**
@@ -403,7 +422,9 @@ class Controller {
 		this.#$.ui.setControllerOnDisabledButtons(false);
 		this.#$.ui.offControllerContext();
 
-		this.#$.frameContext.get('lineBreaker_t').style.display = this.#$.frameContext.get('lineBreaker_b').style.display = 'none';
+		this.#$.frameContext.get('lineBreaker_t').style.display = this.#$.frameContext.get(
+			'lineBreaker_b',
+		).style.display = 'none';
 		this.#$.store.set('_lastSelectionNode', null);
 		this.#$.ui.currentControllerName = '';
 		this.#$.store.set('_preventBlur', false);
@@ -477,7 +498,11 @@ class Controller {
 	#addGlobalEvent() {
 		this.#removeGlobalEvent();
 		this.#bindClose_key = this.#$.eventManager.addGlobalEvent('keydown', this.#globalEventHandlers.keydown, true);
-		this.#bindClose_mouse = this.#$.eventManager.addGlobalEvent(isMobile ? 'click' : 'mousedown', this.#globalEventHandlers.mousedown, true);
+		this.#bindClose_mouse = this.#$.eventManager.addGlobalEvent(
+			isMobile ? 'click' : 'mousedown',
+			this.#globalEventHandlers.mousedown,
+			true,
+		);
 	}
 
 	/**
@@ -526,7 +551,11 @@ class Controller {
 		}
 
 		const _element = this.host._element;
-		return !isParentForm && (!!dom.query.getParentElement(target, '.se-controller') || (this.#$.component.isInline(_element) ? target === _element : target?.contains(_element)));
+		return (
+			!isParentForm &&
+			(!!dom.query.getParentElement(target, '.se-controller') ||
+				(this.#$.component.isInline(_element) ? target === _element : target?.contains(_element)))
+		);
 	}
 
 	/**
@@ -584,6 +613,7 @@ class Controller {
 			if (this.#$.pluginManager.fileInfo.pluginRegExp.test(this.kind)) return;
 		} else {
 			if (this.#__childrenControllers__.some(({ isOpen }) => isOpen)) return;
+			if (this.#escGuard?.()) return;
 		}
 
 		this.#PostCloseEvent(eventTarget);