suneditor 3.0.0-rc.5 → 3.0.0

package/src/langs/uk.js

@@ -126,6 +126,7 @@
 		link_modal_url: 'Посилання',
 		link_modal_relAttribute: 'Атрибут rel',
 		list: 'Список',
+		markdownView: 'Перегляд Markdown',
 		math: 'Формула',
 		math_modal_fontSizeLabel: 'Розмір шрифту',
 		math_modal_inputLabel: 'Математична запис',
@@ -187,6 +188,7 @@
 		tableProperties: 'Властивості таблиці',
 		tags: 'Теги',
 		tag_blockquote: 'Цитата',
+		codeBlock: 'Блок коду',
 		tag_div: 'Базовий',
 		tag_h: 'Заголовок',
 		tag_p: 'Абзац',
@@ -205,6 +207,13 @@
 		video_modal_title: 'Вставити відео',
 		video_modal_url: 'Посилання на відео, Youtube, Vimeo',
 		width: 'Ширина',
+		codeLanguage: 'Мова',
+		codeLanguage_none: 'Жоден',
+		finder_matchCase: 'Зіставте регістр',
+		finder_wholeWord: 'Ціле слово',
+		finder_regex: 'Регулярний вираз',
+		finder_prev: 'Попередній матч',
+		finder_next: 'Наступний матч',
 		message_copy_success: 'Скопійовано в буфер обміну',
 		message_copy_fail: 'Не вдалося скопіювати. Будь ласка, скопіюйте вручну.',
 	};

package/src/langs/ur.js

@@ -126,6 +126,7 @@
 		link_modal_url: 'لنک کرنے کے لیے URL',
 		link_modal_relAttribute: 'Rel وصف',
 		list: 'فہرست',
+		markdownView: 'مارک ڈاؤن منظر',
 		math: 'ریاضی',
 		math_modal_fontSizeLabel: 'حرف کا سائز',
 		math_modal_inputLabel: 'ریاضیاتی اشارے',
@@ -187,6 +188,7 @@
 		tableProperties: 'ٹیبل کی خصوصیات',
 		tags: 'ٹیگز',
 		tag_blockquote: 'اقتباس',
+		codeBlock: 'کوڈ بلاک',
 		tag_div: 'عام (div)',
 		tag_h: 'ہیڈر',
 		tag_p: 'پیراگراف',
@@ -205,6 +207,13 @@
 		video_modal_title: 'ویڈیو داخل کریں',
 		video_modal_url: 'ذرائع ابلاغ کا یو آر ایل، یوٹیوب/ویمیو',
 		width: 'چوڑائی',
+		codeLanguage: 'زبان',
+		codeLanguage_none: 'کوئی نہیں۔',
+		finder_matchCase: 'میچ کیس',
+		finder_wholeWord: 'پورا کلام',
+		finder_regex: 'باقاعدہ اظہار',
+		finder_prev: 'پچھلا میچ',
+		finder_next: 'اگلا میچ',
 		message_copy_success: 'کلپ بورڈ میں کاپی ہو گیا',
 		message_copy_fail: 'کاپی ناکام۔ براہ کرم دستی طور پر کاپی کریں۔',
 	};

package/src/langs/zh_cn.js

@@ -126,6 +126,7 @@
 		link_modal_url: '网址',
 		link_modal_relAttribute: 'Rel 属性',
 		list: '列表',
+		markdownView: 'Markdown视图',
 		math: '数学',
 		math_modal_fontSizeLabel: '字号',
 		math_modal_inputLabel: '数学符号',
@@ -187,6 +188,7 @@
 		tableProperties: '表格属性',
 		tags: '标签',
 		tag_blockquote: '引用',
+		codeBlock: '代码块',
 		tag_div: '正文 (DIV)',
 		tag_h: '标题',
 		tag_p: '段落',
@@ -205,6 +207,13 @@
 		video_modal_title: '插入视频',
 		video_modal_url: '嵌入网址, Youtube,Vimeo',
 		width: '宽度',
+		codeLanguage: '语言',
+		codeLanguage_none: '没有任何',
+		finder_matchCase: '火柴盒',
+		finder_wholeWord: '整个单词',
+		finder_regex: '正则表达式',
+		finder_prev: '上一场比赛',
+		finder_next: '下一场比赛',
 		message_copy_success: '已复制到剪贴板',
 		message_copy_fail: '复制失败，请手动复制。',
 	};

package/src/modules/contract/Controller.js

@@ -6,6 +6,7 @@ const INDEX_00 = '2147483646';
 const INDEX_0 = '2147483645';
 const INDEX_S_1 = '2147483642';
 const INDEX_1 = '2147483641';
+const ADD_OFFSET_VALUE = { left: 0, right: 0, top: 0 };
 
 /**
  * Controller information object
@@ -46,11 +47,10 @@ class Controller {
 	#initMethod;
 	#globalEventHandlers;
 
-	#addOffset = { left: 0, top: 0 };
+	#addOffset = ADD_OFFSET_VALUE;
 	#reserveIndex = false;
 	#preventClose = false;
-	#shadowRootEventForm = null;
-	#shadowRootEventListener = null;
+	#bindShadowRootEvent = null;
 	#bindClose_key = null;
 	#bindClose_mouse = null;
 
@@ -124,9 +124,13 @@ class Controller {
 	 * @param {Node} [positionTarget] Position target element
 	 * @param {Object} [params={}] params
 	 * @param {boolean} [params.isWWTarget] If the controller is in the WYSIWYG area, set it to `true`.
+	 * @param {boolean} [params.passive] If `true`, opens the controller visually without affecting editor state
+	 * - (`_preventBlur`, `controlActive`, `onControllerContext`, `opendControllers`).
+	 * - Used for lightweight, non-intrusive display such as hover-triggered UI (e.g., codeLang selector on `<pre>` hover).
+	 * - Automatically set to `true` when opened during component hover selection (`ON_OVER_COMPONENT`).
 	 * @param {() => void} [params.initMethod] Method to be called when the controller is closed.
 	 * @param {boolean} [params.disabled] If `true`, When the `controller` is opened, buttons without the `se-component-enabled` class are disabled. (default: `this.disabled`)
-	 * @param {{left?: number, top?: number}} [params.addOffset] Additional offset values
+	 * @param {{left?: number, right?:number, top?: number}} [params.addOffset] Additional offset values
 	 * @example
 	 * // Open controller on a target element with default options
 	 * this.controller.open(target);
@@ -137,9 +141,9 @@ class Controller {
 	 * // Open on a Range target (e.g., text selection)
 	 * this.controller.open(this.$.selection.getRange());
 	 */
-	open(target, positionTarget, { isWWTarget, initMethod, disabled, addOffset } = {}) {
+	open(target, positionTarget, { isWWTarget, passive, initMethod, disabled, addOffset } = {}) {
 		if (_DragHandle.get('__overInfo') === ON_OVER_COMPONENT) {
-			return;
+			passive = true;
 		}
 
 		if (!target) {
@@ -151,35 +155,38 @@ class Controller {
 		this.form.removeAttribute('data-se-hidden-by-children');
 		this.#__hiddenByParents__.clear();
 
-		if (this.#$.store.mode.isBalloon) this.#$.toolbar.hide();
-		else if (this.#$.store.mode.isSubBalloon) this.#$.subToolbar.hide();
+		if (!passive) {
+			if (this.#$.store.mode.isBalloon) this.#$.toolbar.hide();
+			else if (this.#$.store.mode.isSubBalloon) this.#$.subToolbar.hide();
 
-		if (!this.#$.store.get('hasFocus')) {
-			if (disabled ?? this.disabled) {
-				this.#$.ui.setControllerOnDisabledButtons(true);
-			} else {
-				this.#$.ui.setControllerOnDisabledButtons(false);
+			if (!this.#$.store.get('hasFocus')) {
+				if (disabled ?? this.disabled) {
+					this.#$.ui.setControllerOnDisabledButtons(true);
+				} else {
+					this.#$.ui.setControllerOnDisabledButtons(false);
+				}
 			}
 		}
 
 		this.currentPositionTarget = positionTarget || target;
 		this.isWWTarget = isWWTarget ?? this.isWWTarget;
 		if (typeof initMethod === 'function') this.#initMethod = initMethod;
-		this.#$.ui.currentControllerName = this.kind;
+		if (!passive) this.#$.ui.currentControllerName = this.kind;
 
-		this.#addOffset = { left: 0, top: 0 };
-		if (addOffset) this.#addOffset = { ...this.#addOffset, ...addOffset };
+		this.#addOffset = { left: 0, right: 0, top: 0, ...addOffset };
 
-		const parents = this.isOutsideForm ? this.parentsForm : [];
-		this.#$.ui.opendControllers?.forEach((e) => {
-			if (!parents.includes(e.form)) e.form.style.zIndex = INDEX_1;
-		});
-
-		if (this.parentsHide) {
-			this.parentsForm.forEach((e) => {
-				e.style.display = 'none';
-				e.setAttribute('data-se-hidden-by-children', '1');
+		if (!passive) {
+			const parents = this.isOutsideForm ? this.parentsForm : [];
+			this.#$.ui.opendControllers?.forEach((e) => {
+				if (!parents.includes(e.form)) e.form.style.zIndex = INDEX_1;
 			});
+
+			if (this.parentsHide) {
+				this.parentsForm.forEach((e) => {
+					e.style.display = 'none';
+					e.setAttribute('data-se-hidden-by-children', '1');
+				});
+			}
 		}
 
 		this.#addGlobalEvent();
@@ -189,7 +196,7 @@ class Controller {
 
 		const isRangeTarget = this.#$.instanceCheck.isRange(target);
 		this.currentTarget = /** @type {HTMLElement} */ (isRangeTarget ? null : target);
-		this.#controllerOn(this.form, target, isRangeTarget);
+		this.#controllerOn(this.form, target, isRangeTarget, passive);
 		_w.setTimeout(() => _DragHandle.set('__overInfo', false), 0);
 	}
 
@@ -216,7 +223,7 @@ class Controller {
 		this.isOpen = false;
 		this.#preventClose = false;
 		this.__offset = {};
-		this.#addOffset = { left: 0, top: 0 };
+		this.#addOffset = ADD_OFFSET_VALUE;
 
 		this.#removeGlobalEvent();
 
@@ -347,8 +354,9 @@ class Controller {
 	 * @param {HTMLFormElement} form Controller element
 	 * @param {Node|Range} target Controller target element
 	 * @param {boolean} isRangeTarget If the target is a `Range`, set it to `true`.
+	 * @param {boolean} [passive=false] If `true`, opens without affecting editor state (_preventBlur, controlActive, etc.)
 	 */
-	async #controllerOn(form, target, isRangeTarget) {
+	async #controllerOn(form, target, isRangeTarget, passive) {
 		/** @type {ControllerInfo} */
 		const info = {
 			position: this.position,
@@ -363,20 +371,21 @@ class Controller {
 
 		form.style.display = 'block';
 		if (this.#$.contextProvider.shadowRoot) {
-			this.#shadowRootEventForm = form;
-			this.#shadowRootEventListener = (e) => e.stopPropagation();
-			form.addEventListener('mousedown', this.#shadowRootEventListener);
+			this.#bindShadowRootEvent = this.#$.eventManager.addEvent(form, 'mousedown', (e) => e.stopPropagation());
 		}
 
-		this.#$.ui.onControllerContext();
+		if (!passive) {
+			this.#$.ui.onControllerContext();
+			this.#$.store.set('controlActive', true);
+		}
 
 		if (!this.isOpen) {
 			this.#$.ui.opendControllers.push(info);
 		}
 
-		this.isOpen = true;
 		this.#$.store.set('_preventBlur', true);
-		this.#$.store.set('controlActive', true);
+
+		this.isOpen = true;
 
 		this.host.controllerOn?.(form, target);
 		this.#$.eventManager.triggerEvent('onShowController', { caller: this.kind, frameContext: this.#$.frameContext, info });
@@ -401,10 +410,7 @@ class Controller {
 		_w.setTimeout(() => {
 			this.#$.store.set('controlActive', false);
 		}, 0);
-		if (this.#shadowRootEventForm) {
-			this.#shadowRootEventForm.removeEventListener('mousedown', this.#shadowRootEventListener);
-			this.#shadowRootEventForm = this.#shadowRootEventListener = null;
-		}
+		this.#bindShadowRootEvent &&= this.#$.eventManager.removeEvent(this.#bindShadowRootEvent);
 	}
 
 	/**
@@ -500,7 +506,7 @@ class Controller {
 
 	/**
 	 * @description Checks if the given target is within a form or controller.
-	 * @param {Node} target The target element.
+	 * @param {Element} target The target element.
 	 * @returns {boolean} `true` if the target is inside a form or controller.
 	 */
 	#checkForm(target) {
@@ -532,6 +538,11 @@ class Controller {
 		e.stopPropagation();
 		e.preventDefault();
 
+		if (target.getAttribute('data-command') === 'close') {
+			this.close();
+			return;
+		}
+
 		this.host.controllerAction(target);
 	}
 

package/src/modules/manager/ApiManager.js

@@ -144,9 +144,9 @@ class ApiManager {
 						this.#$.ui.hideLoading();
 					}
 				} else {
+					console.error(`[SUNEDITOR.ApiManager[${this.kind}].upload.serverException]`, xhr);
 					try {
-						const res = !xhr.responseText ? xhr : JSON.parse(xhr.responseText);
-						reject(res);
+						reject(_parseErrorResponse(xhr));
 					} finally {
 						this.#$.ui.hideLoading();
 					}
@@ -203,12 +203,12 @@ class ApiManager {
 				// exception
 				console.error(`[SUNEDITOR.ApiManager[${this.kind}].upload.serverException]`, xmlHttp);
 				try {
-					const res = !xmlHttp.responseText ? xmlHttp : JSON.parse(xmlHttp.responseText);
+					const res = _parseErrorResponse(xmlHttp);
 					let message = '';
 					if (typeof errorCallBack === 'function') {
 						message = await errorCallBack(res, xmlHttp);
 					}
-					const err = `[SUNEDITOR.ApiManager[${this.kind}].upload.serverException] status: ${xmlHttp.status}, response: ${message || res.errorMessage || xmlHttp.responseText}`;
+					const err = `[SUNEDITOR.ApiManager[${this.kind}].upload.serverException] status: ${xmlHttp.status}, response: ${message || res.errorMessage || (typeof res === 'string' ? res : JSON.stringify(res))}`;
 					this.#$.ui.alertOpen(err, 'error');
 				} catch (error) {
 					throw Error(`[SUNEDITOR.ApiManager[${this.kind}].upload.errorCallBack.fail] ${error.message}`);
@@ -220,4 +220,27 @@ class ApiManager {
 	}
 }
 
+/**
+ * @description Parses error response from XMLHttpRequest.
+ * Safely handles non-text responseTypes (blob, arraybuffer, etc.) where accessing responseText throws.
+ * @param {XMLHttpRequest} xhr
+ * @returns {Object|string} Parsed JSON object, raw text, or status string as fallback
+ */
+function _parseErrorResponse(xhr) {
+	let text;
+	try {
+		text = xhr.responseText;
+	} catch {
+		return `status ${xhr.status}`;
+	}
+
+	if (!text) return `status ${xhr.status}`;
+
+	try {
+		return JSON.parse(text);
+	} catch {
+		return text;
+	}
+}
+
 export default ApiManager;

package/src/modules/manager/FileManager.js

@@ -35,7 +35,7 @@ class FileManager {
 		this.uploadFileLength = 0;
 		this.__updateTags = [];
 		// api manager
-		this.apiManager = new ApiManager(this, null);
+		this.apiManager = new ApiManager(this, $);
 
 		// se-ts-ignore - call by editor
 		void this._resetInfo;

package/src/modules/ui/SelectMenu.js

@@ -16,6 +16,8 @@ const MENU_MIN_HEIGHT = 38;
  * @property {number} [splitNum=0] Optional split number for horizontal positioning; defines how many items per row
  * @property {() => void} [openMethod] Optional method to call when the menu is opened
  * @property {() => void} [closeMethod] Optional method to call when the menu is closed
+ * @property {string} [maxHeight] Optional max-height CSS value (e.g. `"200px"`). Enables scrolling when items exceed this height.
+ * @property {string} [minWidth] Optional min-width CSS value (e.g. `"130px"`).
  */
 
 /**
@@ -64,6 +66,8 @@ class SelectMenu {
 		this.horizontal = !!this.splitNum;
 		this.openMethod = params.openMethod;
 		this.closeMethod = params.closeMethod;
+		this.maxHeight = params.maxHeight || '';
+		this.minWidth = params.minWidth || '';
 
 		this.#dirPosition = /^(left|right)$/.test(this.position) ? (this.position === 'left' ? 'right' : 'left') : this.position;
 		this.#dirSubPosition = /^(left|right)$/.test(this.subPosition) ? (this.subPosition === 'left' ? 'right' : 'left') : this.subPosition;
@@ -117,14 +121,20 @@ class SelectMenu {
 		this.#refer = /** @type {HTMLElement} */ (referElement);
 		this.#keydownTarget = dom.check.isInputElement(referElement) ? referElement : this.#$.frameContext.get('_ww');
 		this.#selectMethod = selectMethod;
+
+		let innerStyle = '';
+		if (this.maxHeight) innerStyle += 'max-height:' + this.maxHeight + ';overflow-y:auto;';
+		if (this.minWidth) innerStyle += 'min-width:' + this.minWidth + ';';
+
 		this.form = dom.utils.createElement(
 			'DIV',
 			{
 				class: 'se-select-menu' + (attr.class ? ' ' + attr.class : ''),
 				style: attr.style || '',
 			},
-			'<div class="se-list-inner"></div>',
+			'<div class="se-list-inner"' + (innerStyle ? ' style="' + innerStyle + '"' : '') + '></div>',
 		);
+
 		referElement.parentNode.insertBefore(this.form, referElement);
 	}
 
@@ -407,11 +417,12 @@ class SelectMenu {
 	 */
 	#addEvents() {
 		this.#removeEvents();
-		this.#events = this.#eventHandlers;
-		this.form.addEventListener('mousedown', this.#events.mousedown);
-		this.form.addEventListener('mousemove', this.#events.mousemove);
-		this.form.addEventListener('click', this.#events.click);
-		this.#keydownTarget.addEventListener('keydown', this.#events.keydown);
+		this.#events = {
+			mousedown: this.#$.eventManager.addEvent(this.form, 'mousedown', this.#eventHandlers.mousedown),
+			mousemove: this.#$.eventManager.addEvent(this.form, 'mousemove', this.#eventHandlers.mousemove),
+			click: this.#$.eventManager.addEvent(this.form, 'click', this.#eventHandlers.click),
+			keydown: this.#$.eventManager.addEvent(this.#keydownTarget, 'keydown', this.#eventHandlers.keydown),
+		};
 	}
 
 	/**
@@ -419,10 +430,10 @@ class SelectMenu {
 	 */
 	#removeEvents() {
 		if (!this.#events) return;
-		this.form.removeEventListener('mousedown', this.#events.mousedown);
-		this.form.removeEventListener('mousemove', this.#events.mousemove);
-		this.form.removeEventListener('click', this.#events.click);
-		this.#keydownTarget.removeEventListener('keydown', this.#events.keydown);
+		this.#$.eventManager.removeEvent(this.#events.mousedown);
+		this.#$.eventManager.removeEvent(this.#events.mousemove);
+		this.#$.eventManager.removeEvent(this.#events.click);
+		this.#$.eventManager.removeEvent(this.#events.keydown);
 		this.#events = null;
 	}
 
@@ -547,7 +558,7 @@ class SelectMenu {
 	#CloseListener_mousedown(e) {
 		const eventTarget = dom.query.getEventTarget(e);
 		if (this.form.contains(eventTarget)) return;
-		if (e.target !== this.#refer) {
+		if (!this.#refer.contains(eventTarget)) {
 			this.close();
 		} else if (!dom.check.isInputElement(eventTarget)) {
 			this.#bindClose_click = this.#$.eventManager.addGlobalEvent('click', this.#globalEventHandlers.click, true);