suneditor 3.1.0 → 3.1.2

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

@@ -200,14 +200,27 @@ class UIManager {
 
 	/**
 	 * @description Set direction to `rtl` or `ltr`.
-	 * @param {string} dir `rtl` or `ltr`
+	 * @param {"rtl"|"ltr"} dir `rtl` or `ltr`
 	 */
 	setDir(dir) {
 		const rtl = dir === 'rtl';
 		if (this.#options.get('_rtl') === rtl) return;
 
+		const prevDir = this.#options.get('textDirection');
+		const prevEditableClass = this.#options.get('_editableClass');
+		const prevPrintClass = this.#options.get('printClass');
+
 		try {
 			this.#options.set('_rtl', rtl);
+			this.#options.set('textDirection', dir);
+
+			// update _editableClass / printClass
+			const editableClass = rtl ? this.#options.get('_editableClass').replace(/\s*se-rtl/, '') + ' se-rtl' : this.#options.get('_editableClass').replace(/\s*se-rtl/, '');
+			this.#options.set('_editableClass', editableClass);
+			if (this.#options.get('printClass')) {
+				this.#options.set('printClass', rtl ? this.#options.get('printClass').replace(/\s*se-rtl/, '') + ' se-rtl' : this.#options.get('printClass').replace(/\s*se-rtl/, ''));
+			}
+
 			this.offCurrentController();
 
 			const fc = this.#frameContext;
@@ -221,11 +234,13 @@ class UIManager {
 			if (rtl) {
 				this.#contextProvider.applyToRoots((e) => {
 					dom.utils.addClass([e.get('topArea'), e.get('wysiwyg'), e.get('documentTypePageMirror')], 'se-rtl');
+					e.get('wysiwyg').dir = 'rtl';
 				});
 				dom.utils.addClass([this.#carrierWrapper, toolbarWrapper, statusbarWrapper], 'se-rtl');
 			} else {
 				this.#contextProvider.applyToRoots((e) => {
 					dom.utils.removeClass([e.get('topArea'), e.get('wysiwyg'), e.get('documentTypePageMirror')], 'se-rtl');
+					e.get('wysiwyg').removeAttribute('dir');
 				});
 				dom.utils.removeClass([this.#carrierWrapper, toolbarWrapper, statusbarWrapper], 'se-rtl');
 			}
@@ -255,6 +270,12 @@ class UIManager {
 
 			this.#activeDirBtn(rtl);
 
+			// reverse toolbar buttons
+			this.#reverseToolbarButtons(this.#context.get('toolbar_buttonTray'));
+			if (this.#context.has('toolbar_sub_buttonTray')) {
+				this.#reverseToolbarButtons(this.#context.get('toolbar_sub_buttonTray'));
+			}
+
 			// document type
 			if (fc.has('documentType_use_header')) {
 				if (rtl) fc.get('wrapper').appendChild(fc.get('documentTypeInner'));
@@ -269,6 +290,9 @@ class UIManager {
 			else if (this.#store.mode.isSubBalloon) this.#$.subToolbar._showBalloon();
 		} catch (e) {
 			this.#options.set('_rtl', !rtl);
+			this.#options.set('textDirection', prevDir);
+			this.#options.set('_editableClass', prevEditableClass);
+			if (prevPrintClass !== null) this.#options.set('printClass', prevPrintClass);
 			console.warn(`[SUNEDITOR.ui.setDir.fail] ${e.toString()}`);
 		}
 
@@ -702,6 +726,20 @@ class UIManager {
 		}
 	}
 
+	/**
+	 * @description Reverse the order of toolbar button groups (excluding the more-layer).
+	 * @param {HTMLElement} buttonTray - The `.se-btn-tray` element.
+	 */
+	#reverseToolbarButtons(buttonTray) {
+		if (!buttonTray) return;
+		const moreLayer = buttonTray.querySelector('.se-toolbar-more-layer');
+		const children = Array.from(buttonTray.children).filter((c) => c !== moreLayer);
+		for (let i = children.length - 1; i >= 0; i--) {
+			buttonTray.appendChild(children[i]);
+		}
+		if (moreLayer) buttonTray.appendChild(moreLayer);
+	}
+
 	/**
 	 * @internal
 	 * @description Set the disabled button list

package/src/core/section/constructor.js

@@ -361,8 +361,21 @@ export function CreateShortcuts(command, button, values, keyMap, rc, reverseKeys
 	}
 }
 
+/**
+ * @description Append tooltip span
+ * @param {Element} tooptipBtn
+ * @param {boolean} shift
+ * @param {string} shortcut
+ */
 function _addTooltip(tooptipBtn, shift, shortcut) {
-	tooptipBtn.appendChild(dom.utils.createElement('SPAN', { class: 'se-shortcut' }, env.cmdIcon + (shift ? env.shiftIcon : '') + '+<span class="se-shortcut-key">' + shortcut + '</span>'));
+	const tooltip = dom.utils.createElement('SPAN', { class: 'se-shortcut' }, env.cmdIcon + (shift ? env.shiftIcon : '') + '+<span class="se-shortcut-key">' + shortcut + '</span>');
+	const prevTooltip = tooptipBtn.querySelector('.se-shortcut');
+
+	if (prevTooltip) {
+		tooptipBtn.replaceChild(tooltip, prevTooltip);
+	} else {
+		tooptipBtn.appendChild(tooltip);
+	}
 }
 
 /**
@@ -937,6 +950,7 @@ function _initTargetElements(key, options, topDiv, targetOptions) {
 
 	if (!targetOptions.get('iframe')) {
 		wysiwygDiv.setAttribute('contenteditable', 'true');
+		if (options.get('_rtl')) wysiwygDiv.dir = 'rtl';
 		wysiwygDiv.className += ' ' + options.get('_editableClass');
 		wysiwygDiv.style.cssText = editorStyles.frame + editorStyles.editor;
 	} else {

package/src/plugins/field/autocomplete.js

@@ -59,11 +59,48 @@ function defaultOnSelect(item, triggerText) {
  * @property {boolean} [useCachingFieldData=true] - Whether to cache selected items for priority display.
  * @property {Object<string, AutocompleteTriggerConfig>} triggers - Per-trigger configurations keyed by trigger character.
  * ```js
- * // triggers
- * {
- *   '@': { data: [...], renderItem: (item) => `...` },
- *   '#': { apiUrl: '/api/tags?q={key}' }
- * }
+ * // Basic usage with static data — mention trigger
+ * const editor = SUNEDITOR.create('#editor', {
+ *   plugins: [autocomplete],
+ *   autocomplete: {
+ *     triggers: {
+ *       '@': {
+ *         data: [
+ *           { key: 'john', name: 'John Doe' },
+ *           { key: 'jane', name: 'Jane Smith' },
+ *         ],
+ *       },
+ *     },
+ *   },
+ * });
+ *
+ * // API-based trigger with custom rendering and selection
+ * const editor = SUNEDITOR.create('#editor', {
+ *   plugins: [autocomplete],
+ *   autocomplete: {
+ *     delayTime: 200,
+ *     limitSize: 10,
+ *     triggers: {
+ *       '@': {
+ *         apiUrl: '/api/users?q={key}&limit={limitSize}',
+ *         apiHeaders: { Authorization: 'Bearer TOKEN' },
+ *         transformResponse: (json) => json.data.map((u) => ({ key: u.username, name: u.displayName, id: u.id })),
+ *         renderItem: (item) => `<div class="user-item"><strong>${item.key}</strong> <span>${item.name}</span></div>`,
+ *         onSelect: (item, trigger) => ({
+ *           tag: 'a',
+ *           attrs: { href: `/users/${item.id}`, 'data-se-autocomplete': trigger + item.key },
+ *           text: trigger + item.key,
+ *         }),
+ *       },
+ *       '#': {
+ *         apiUrl: '/api/tags?q={key}',
+ *         transformResponse: (json) => json.tags,
+ *         searchStartLength: 2,
+ *         useCachingData: false,
+ *       },
+ *     },
+ *   },
+ * });
  * ```
  */
 

package/types/core/event/actions/index.d.ts

@@ -31,7 +31,7 @@ export namespace A {
 	function enterFormatCleanBrAndZWS(selectionNode: Node, selectionFormat: boolean, brBlock: Element, children: NodeList, offset: number): Action;
 	function enterFormatInsertBrHtml(brBlock: Element, range: Range, wSelection: Selection, offset: number): Action;
 	function enterFormatInsertBrNode(wSelection: Selection): Action;
-	function enterFormatBreakAtEdge(formatEl: Element, selectionNode: Node, formatStartEdge: boolean, formatEndEdge: boolean): Action;
+	function enterFormatBreakAtEdge(formatEl: Element, selectionNode: Node, formatStartEdge: boolean, formatEndEdge: boolean, bidiSwapped?: boolean): Action;
 	function enterFormatBreakWithSelection(formatEl: Element, range: Range, formatStartEdge: boolean, formatEndEdge: boolean): Action;
 	function enterFormatBreakAtCursor(formatEl: Element, range: Range): Action;
 	function enterFigcaptionExitInList(formatEl: Element): Action;

package/types/core/event/effects/keydown.registry.d.ts

@@ -42,7 +42,7 @@ declare const _default: {
 	/** @action enterFormatInsertBrNode */
 	'enter.format.insertBrNode': ({ ports }: EffectContext_keydown, { wSelection }: any) => void;
 	/** @action enterFormatBreakAtEdge */
-	'enter.format.breakAtEdge': ({ ports, ctx }: EffectContext_keydown, { formatEl, selectionNode, formatStartEdge, formatEndEdge }: any) => void;
+	'enter.format.breakAtEdge': ({ ports, ctx }: EffectContext_keydown, { formatEl, selectionNode, formatStartEdge, formatEndEdge, bidiSwapped }: any) => void;
 	/** @action enterFormatBreakWithSelection */
 	'enter.format.breakWithSelection': ({ ports, ctx }: EffectContext_keydown, { formatEl, range, formatStartEdge, formatEndEdge }: any) => void;
 	/** @action enterFormatBreakAtCursor */

package/types/core/event/effects/ruleHelpers.d.ts

@@ -34,3 +34,15 @@ export function isUneditableNode(ports: EventPorts, range: Range, isFront: boole
  * @returns {void}
  */
 export function setDefaultLine(ports: EventPorts, lineTagName: string): void;
+/**
+ * @description Detects if a detected logical edge is incorrect due to bidi text direction mismatch in RTL mode.
+ * When LTR text (numbers, Latin) is inside an RTL line, the browser may place the caret at offset 0
+ * for the visual end or offset=length for the visual start. This function compares the caret's visual
+ * position against the content boundaries to detect such mismatches.
+ * @param {Range} range - The current collapsed range
+ * @param {HTMLElement} formatEl - The format/line element
+ * @param {'front'|'end'} detectedEdge - The edge detected by logical offset check
+ * @param {Document} doc - The document object
+ * @returns {boolean} true if the detected edge doesn't match the visual position (bidi mismatch)
+ */
+export function isRtlBidiMismatch(range: Range, formatEl: HTMLElement, detectedEdge: 'front' | 'end', doc: Document): boolean;

package/types/core/logic/shell/ui.d.ts

@@ -51,9 +51,9 @@ declare class UIManager {
 	setTheme(theme: string): void;
 	/**
 	 * @description Set direction to `rtl` or `ltr`.
-	 * @param {string} dir `rtl` or `ltr`
+	 * @param {"rtl"|"ltr"} dir `rtl` or `ltr`
 	 */
-	setDir(dir: string): void;
+	setDir(dir: 'rtl' | 'ltr'): void;
 	/**
 	 * @description Switch to or off `ReadOnly` mode.
 	 * @param {boolean} value `readOnly` boolean value.

package/types/plugins/field/autocomplete.d.ts

@@ -102,11 +102,48 @@ export type AutocompletePluginOptions = {
 	/**
 	 * - Per-trigger configurations keyed by trigger character.
 	 * ```js
-	 * // triggers
-	 * {
-	 * '@': { data: [...], renderItem: (item) => `...` },
-	 * '#': { apiUrl: '/api/tags?q={key}' }
-	 * }
+	 * // Basic usage with static data — mention trigger
+	 * const editor = SUNEDITOR.create('#editor', {
+	 * plugins: [autocomplete],
+	 * autocomplete: {
+	 * triggers: {
+	 * '@': {
+	 * data: [
+	 * { key: 'john', name: 'John Doe' },
+	 * { key: 'jane', name: 'Jane Smith' },
+	 * ],
+	 * },
+	 * },
+	 * },
+	 * });
+	 *
+	 * // API-based trigger with custom rendering and selection
+	 * const editor = SUNEDITOR.create('#editor', {
+	 * plugins: [autocomplete],
+	 * autocomplete: {
+	 * delayTime: 200,
+	 * limitSize: 10,
+	 * triggers: {
+	 * '@': {
+	 * apiUrl: '/api/users?q={key}&limit={limitSize}',
+	 * apiHeaders: { Authorization: 'Bearer TOKEN' },
+	 * transformResponse: (json) => json.data.map((u) => ({ key: u.username, name: u.displayName, id: u.id })),
+	 * renderItem: (item) => `<div class="user-item"><strong>${item.key}</strong> <span>${item.name}</span></div>`,
+	 * onSelect: (item, trigger) => ({
+	 * tag: 'a',
+	 * attrs: { href: `/users/${item.id}`, 'data-se-autocomplete': trigger + item.key },
+	 * text: trigger + item.key,
+	 * }),
+	 * },
+	 * '#': {
+	 * apiUrl: '/api/tags?q={key}',
+	 * transformResponse: (json) => json.tags,
+	 * searchStartLength: 2,
+	 * useCachingData: false,
+	 * },
+	 * },
+	 * },
+	 * });
 	 * ```
 	 */
 	triggers: {
@@ -142,11 +179,48 @@ export type AutocompletePluginOptions = {
  * @property {boolean} [useCachingFieldData=true] - Whether to cache selected items for priority display.
  * @property {Object<string, AutocompleteTriggerConfig>} triggers - Per-trigger configurations keyed by trigger character.
  * ```js
- * // triggers
- * {
- *   '@': { data: [...], renderItem: (item) => `...` },
- *   '#': { apiUrl: '/api/tags?q={key}' }
- * }
+ * // Basic usage with static data — mention trigger
+ * const editor = SUNEDITOR.create('#editor', {
+ *   plugins: [autocomplete],
+ *   autocomplete: {
+ *     triggers: {
+ *       '@': {
+ *         data: [
+ *           { key: 'john', name: 'John Doe' },
+ *           { key: 'jane', name: 'Jane Smith' },
+ *         ],
+ *       },
+ *     },
+ *   },
+ * });
+ *
+ * // API-based trigger with custom rendering and selection
+ * const editor = SUNEDITOR.create('#editor', {
+ *   plugins: [autocomplete],
+ *   autocomplete: {
+ *     delayTime: 200,
+ *     limitSize: 10,
+ *     triggers: {
+ *       '@': {
+ *         apiUrl: '/api/users?q={key}&limit={limitSize}',
+ *         apiHeaders: { Authorization: 'Bearer TOKEN' },
+ *         transformResponse: (json) => json.data.map((u) => ({ key: u.username, name: u.displayName, id: u.id })),
+ *         renderItem: (item) => `<div class="user-item"><strong>${item.key}</strong> <span>${item.name}</span></div>`,
+ *         onSelect: (item, trigger) => ({
+ *           tag: 'a',
+ *           attrs: { href: `/users/${item.id}`, 'data-se-autocomplete': trigger + item.key },
+ *           text: trigger + item.key,
+ *         }),
+ *       },
+ *       '#': {
+ *         apiUrl: '/api/tags?q={key}',
+ *         transformResponse: (json) => json.tags,
+ *         searchStartLength: 2,
+ *         useCachingData: false,
+ *       },
+ *     },
+ *   },
+ * });
  * ```
  */
 /**