suneditor 3.1.1 → 3.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "suneditor",
-	"version": "3.1.1",
+	"version": "3.1.2",
 	"description": "Vanilla JavaScript based WYSIWYG web editor",
 	"author": "Yi JiHong",
 	"license": "MIT",
@@ -168,4 +168,4 @@
 		"web editor",
 		"browser editor"
 	]
-}
+}

package/src/assets/design/size.css

@@ -8,7 +8,8 @@
 
 	/** --------------------------- layout - [size] ----------- */
 	/** main, common */
-	--se-border-radius: 2px;
+	--se-border-radius: 3px;
+	--se-border-radius-lg: 6px;
 	--se-min-height: 65px;
 	--se-scroll-padding: 2em;
 

package/src/assets/suneditor.css

@@ -963,6 +963,18 @@
 	bottom: 0px;
 }
 
+/* Bottom toolbar: tooltip appears above */
+.sun-editor .se-toolbar.se-toolbar-bottom .se-tooltip .se-tooltip-inner {
+	top: auto;
+	bottom: 120%;
+}
+
+.sun-editor .se-toolbar.se-toolbar-bottom .se-tooltip .se-tooltip-inner .se-tooltip-text::after {
+	top: 100%;
+	bottom: auto;
+	border-color: var(--se-main-font-color) transparent transparent transparent;
+}
+
 /* toolbar arrow up */
 .sun-editor .se-toolbar .se-arrow.se-arrow-up {
 	border-bottom-color: var(--se-main-divider-color);
@@ -1156,7 +1168,7 @@
 	height: auto;
 	z-index: 5;
 	border: 1px solid var(--se-main-divider-color);
-	border-radius: var(--se-border-radius);
+	border-radius: var(--se-border-radius-lg);
 	padding: 4px;
 	background-color: var(--se-main-background-color);
 	box-shadow: 0 3px 9px var(--se-shadow-layer-color);
@@ -1189,7 +1201,8 @@
 
 /* dropdown layer - basic list */
 .sun-editor .se-list-inner .se-list-basic li {
-	width: 100%;
+	width: auto;
+	max-width: 100%;
 }
 .sun-editor .se-list-inner input {
 	border-radius: 0;
@@ -1563,6 +1576,19 @@
 	stroke-width: 2px;
 }
 
+.sun-editor .se-list-layer .se-selector-color .se-color-pallet:first-child li:first-child button {
+	border-top-left-radius: var(--se-border-radius);
+}
+.sun-editor .se-list-layer .se-selector-color .se-color-pallet:first-child li:last-child button {
+	border-top-right-radius: var(--se-border-radius);
+}
+.sun-editor .se-list-layer .se-selector-color .se-color-pallet:last-of-type li:first-child button {
+	border-bottom-left-radius: var(--se-border-radius);
+}
+.sun-editor .se-list-layer .se-selector-color .se-color-pallet:last-of-type li:last-child button {
+	border-bottom-right-radius: var(--se-border-radius);
+}
+
 /* --- hue slider -------------------------------------------------------------- */
 .sun-editor .se-hue-slider {
 	padding: 14px;
@@ -1997,7 +2023,7 @@
 	-webkit-background-clip: padding-box;
 	background-clip: padding-box;
 	border: 1px solid rgba(0, 0, 0, 0.2);
-	border-radius: var(--se-border-radius);
+	border-radius: var(--se-border-radius-lg);
 	outline: 0;
 	box-shadow: 0 3px 9px var(--se-shadow-layer-color);
 }
@@ -2558,6 +2584,7 @@
 	color: var(--se-controller-color);
 	-webkit-background-clip: padding-box;
 	background-clip: padding-box;
+	border-radius: var(--se-border-radius);
 	line-break: auto;
 }
 
@@ -2582,13 +2609,13 @@
 
 .sun-editor-editable[contenteditable='true'] figure figcaption {
 	display: block;
-	z-index: 2;
+	z-index: 11;
 }
 
 .sun-editor-editable[contenteditable='true']:not(.se-read-only) figure:not(.se-input-component)::after {
 	position: absolute;
 	content: '';
-	z-index: 1;
+	z-index: 10;
 	top: 0;
 	left: 0;
 	right: 0;
@@ -2960,10 +2987,10 @@
 	overflow-x: visible;
 	overflow: visible;
 	background-color: var(--se-main-background-color);
-	border-radius: var(--se-border-radius);
-	padding: 2px 0;
+	border-radius: var(--se-border-radius-lg);
+	padding: 4px 0;
 	margin: 0;
-	border: 1px solid var(--se-main-outline-color);
+	border: 1px solid var(--se-main-divider-color);
 	box-shadow: 0 3px 9px var(--se-shadow-layer-color);
 	outline: 0 none;
 }
@@ -2990,8 +3017,10 @@
 	min-height: 28px;
 	font-size: var(--se-btn-font-size);
 	padding: 0 6px;
-	margin: 2px 0;
+	margin: 1px 4px;
 	cursor: pointer;
+	border-radius: var(--se-border-radius);
+	transition: background-color 0.08s ease;
 }
 
 .sun-editor .se-select-menu .se-select-item button {
@@ -3011,21 +3040,12 @@
 
 .sun-editor .se-select-menu.se-select-menu-mouse-move .se-select-item:hover,
 .sun-editor .se-select-menu:not(.se-select-menu-mouse-move) .se-select-item.active {
-	border-color: var(--se-active-light3-color) !important;
-	outline: 1px solid var(--se-active-color) !important;
-	box-shadow: 0 0 0 0.3rem var(--se-active-light3-color);
-	transition: box-shadow 0.1s ease-in-out;
+	background-color: var(--se-hover-light-color);
 }
 
 .sun-editor .se-select-menu.se-select-menu-mouse-move .se-select-item:active,
 .sun-editor .se-select-menu.se-select-menu-mouse-move .se-select-item.__se__active {
-	background-color: var(--se-active-light4-color);
-	border-color: var(--se-active-light4-color) !important;
-	outline: 1px solid var(--se-active-color) !important;
-	box-shadow: none;
-	transition:
-		background-color 0.1s ease-in-out,
-		box-shadow 0.1s ease-in-out;
+	background-color: var(--se-hover-light2-color);
 }
 
 .sun-editor .se-modal-form-files .se-select-menu {
@@ -3086,7 +3106,7 @@
 	-webkit-background-clip: padding-box;
 	background-clip: padding-box;
 	border: 1px solid rgba(0, 0, 0, 0.2);
-	border-radius: var(--se-border-radius);
+	border-radius: var(--se-border-radius-lg);
 	outline: 0;
 	box-shadow: 0 3px 9px var(--se-shadow-layer-color);
 }
@@ -3943,6 +3963,12 @@
 .sun-editor.se-rtl .se-find-replace-row {
 	justify-content: flex-start;
 }
+.sun-editor.se-rtl .se-find-replace-input {
+	direction: rtl;
+}
+.sun-editor.se-rtl .se-input-form {
+	direction: rtl;
+}
 
 /* statusbar */
 .sun-editor.se-rtl .se-status-bar {

package/src/core/editor.js

@@ -245,6 +245,7 @@ class Editor {
 			converter._setAutoHeightStyle(targetOptions.get('height'));
 		frame.contentDocument.body.className = originOptions.get('_editableClass');
 		frame.contentDocument.body.setAttribute('contenteditable', 'true');
+		if (originOptions.get('_rtl')) frame.contentDocument.body.dir = 'rtl';
 	}
 
 	/**

package/src/core/event/actions/index.js

@@ -203,9 +203,10 @@ export const A = {
 	 * @param {Node} selectionNode
 	 * @param {boolean} formatStartEdge
 	 * @param {boolean} formatEndEdge
+	 * @param {boolean} [bidiSwapped]
 	 * @returns {Action}
 	 */
-	enterFormatBreakAtEdge: (formatEl, selectionNode, formatStartEdge, formatEndEdge) => ({ t: 'enter.format.breakAtEdge', p: { formatEl, selectionNode, formatStartEdge, formatEndEdge } }),
+	enterFormatBreakAtEdge: (formatEl, selectionNode, formatStartEdge, formatEndEdge, bidiSwapped) => ({ t: 'enter.format.breakAtEdge', p: { formatEl, selectionNode, formatStartEdge, formatEndEdge, bidiSwapped } }),
 	/**
 	 * @param {Element} formatEl
 	 * @param {Range} range

package/src/core/event/effects/keydown.registry.js

@@ -411,7 +411,7 @@ export default {
 	},
 
 	/** @action enterFormatBreakAtEdge */
-	'enter.format.breakAtEdge': ({ ports, ctx }, { formatEl, selectionNode, formatStartEdge, formatEndEdge }) => {
+	'enter.format.breakAtEdge': ({ ports, ctx }, { formatEl, selectionNode, formatStartEdge, formatEndEdge, bidiSwapped }) => {
 		const focusBR = dom.utils.createElement('BR');
 		const newFormat = dom.utils.createElement(formatEl.nodeName, null, focusBR);
 
@@ -432,6 +432,8 @@ export default {
 		formatEl.parentNode.insertBefore(newFormat, formatStartEdge && !formatEndEdge ? formatEl : formatEl.nextElementSibling);
 		if (formatEndEdge) {
 			ports.selection.setRange(focusBR, 1, focusBR, 1);
+		} else if (bidiSwapped) {
+			ports.selection.setRange(formatEl, 1, formatEl, 1);
 		} else {
 			const firstEl = formatEl.firstChild || formatEl;
 			ports.selection.setRange(firstEl, 0, firstEl, 0);

package/src/core/event/effects/ruleHelpers.js

@@ -145,4 +145,33 @@ function setDefaultLine(ports, lineTagName) {
 	return ports.setDefaultLine(lineTagName);
 }
 
-export { hardDelete, cleanRemovedTags, isUneditableNode, setDefaultLine };
+/**
+ * @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)
+ */
+function isRtlBidiMismatch(range, formatEl, detectedEdge, doc) {
+	if (!range.collapsed || !formatEl) return false;
+
+	const caretRect = range.getBoundingClientRect();
+	if (caretRect.height <= 0) return false;
+
+	const contentRange = doc.createRange();
+	contentRange.selectNodeContents(formatEl);
+
+	const contentRect = contentRange.getBoundingClientRect();
+	if (contentRect.width <= 2) return false;
+
+	// In RTL: content left = visual end, content right = visual start
+	// 'front' mismatch: logically at front (offset 0) but caret at left = visual end
+	// 'end' mismatch: logically at end (offset=length) but caret at right = visual start
+	return detectedEdge === 'front' ? caretRect.left <= contentRect.left + 2 : caretRect.left >= contentRect.right - 2;
+}
+
+export { hardDelete, cleanRemovedTags, isUneditableNode, setDefaultLine, isRtlBidiMismatch };

package/src/core/event/rules/keydown.rule.arrow.js

@@ -20,6 +20,10 @@ import { A } from '../actions';
 export function reduceArrowDown(actions, ports, ctx) {
 	const { component } = ports;
 	const { formatEl, range, selectionNode, keyCode } = ctx;
+	const rtl = ctx.options.get('_rtl');
+
+	// In RTL, ArrowLeft is forward (toward end on the left), ArrowRight is backward (toward start on the right)
+	const hDir = keyCode === 'ArrowLeft' ? (rtl ? 'forward' : 'back') : keyCode === 'ArrowRight' ? (rtl ? 'back' : 'forward') : null;
 
 	// next component
 	let cmponentInfo = null;
@@ -30,12 +34,24 @@ export function reduceArrowDown(actions, ports, ctx) {
 			}
 			break;
 		case 'ArrowLeft' /** left key */:
-			if (dom.check.isEdgePoint(selectionNode, range.startOffset, 'front')) {
-				const prevEl = selectionNode.previousElementSibling || dom.query.getPreviousDeepestNode(selectionNode);
-				if (prevEl) {
-					if (component.is(prevEl)) cmponentInfo = component.get(prevEl);
-				} else if (component.is(formatEl.previousElementSibling)) {
-					cmponentInfo = component.get(formatEl.previousElementSibling);
+		case 'ArrowRight' /** right key */:
+			if (hDir === 'forward') {
+				if (dom.check.isEdgePoint(selectionNode, range.endOffset, 'end')) {
+					const nextEl = selectionNode.nextElementSibling || dom.query.getNextDeepestNode(selectionNode);
+					if (nextEl) {
+						if (component.is(nextEl)) cmponentInfo = component.get(nextEl);
+					} else if (component.is(formatEl.nextElementSibling)) {
+						cmponentInfo = component.get(formatEl.nextElementSibling);
+					}
+				}
+			} else if (hDir === 'back') {
+				if (dom.check.isEdgePoint(selectionNode, range.startOffset, 'front')) {
+					const prevEl = selectionNode.previousElementSibling || dom.query.getPreviousDeepestNode(selectionNode);
+					if (prevEl) {
+						if (component.is(prevEl)) cmponentInfo = component.get(prevEl);
+					} else if (component.is(formatEl.previousElementSibling)) {
+						cmponentInfo = component.get(formatEl.previousElementSibling);
+					}
 				}
 			}
 			break;
@@ -44,16 +60,6 @@ export function reduceArrowDown(actions, ports, ctx) {
 				cmponentInfo = component.get(formatEl.nextElementSibling);
 			}
 			break;
-		case 'ArrowRight' /** right key */:
-			if (dom.check.isEdgePoint(selectionNode, range.endOffset, 'end')) {
-				const nextEl = selectionNode.nextElementSibling || dom.query.getNextDeepestNode(selectionNode);
-				if (nextEl) {
-					if (component.is(nextEl)) cmponentInfo = component.get(nextEl);
-				} else if (component.is(formatEl.nextElementSibling)) {
-					cmponentInfo = component.get(formatEl.nextElementSibling);
-				}
-			}
-			break;
 	}
 
 	if (cmponentInfo && !cmponentInfo.options?.isInputComponent) {

package/src/core/event/rules/keydown.rule.backspace.js

@@ -1,5 +1,5 @@
 import { dom } from '../../../helper';
-import { cleanRemovedTags, hardDelete, isUneditableNode, setDefaultLine } from '../effects/ruleHelpers';
+import { cleanRemovedTags, hardDelete, isUneditableNode, setDefaultLine, isRtlBidiMismatch } from '../effects/ruleHelpers';
 import { A } from '../actions';
 
 /**
@@ -22,6 +22,8 @@ export function reduceBackspaceDown(actions, ports, ctx) {
 	let { formatEl } = ctx;
 
 	const selectRange = !range.collapsed || range.startContainer !== range.endContainer;
+	// RTL bidi guard: if offset 0 is actually at the visual end due to LTR text in RTL line, skip front-edge handling
+	const bidiNotFront = options.get('_rtl') && !selectRange && range.startOffset === 0 && isRtlBidiMismatch(range, formatEl, 'front', fc.get('_wd'));
 
 	actions.push(A.componentDeselect());
 	actions.push(A.cacheStyleNode());
@@ -54,6 +56,7 @@ export function reduceBackspaceDown(actions, ports, ctx) {
 	// closure, default
 	if (
 		!selectRange &&
+		!bidiNotFront &&
 		!formatEl.previousElementSibling &&
 		range.startOffset === 0 &&
 		!selectionNode.previousSibling &&
@@ -87,7 +90,7 @@ export function reduceBackspaceDown(actions, ports, ctx) {
 
 	// clean remove tag
 	const startCon = range.startContainer;
-	if (formatEl && !formatEl.previousElementSibling && range.startOffset === 0 && startCon.nodeType === 3 && dom.check.isZeroWidth(startCon)) {
+	if (formatEl && !bidiNotFront && !formatEl.previousElementSibling && range.startOffset === 0 && startCon.nodeType === 3 && dom.check.isZeroWidth(startCon)) {
 		if (cleanRemovedTags(ports, startCon, formatEl) === true) return true;
 	}
 
@@ -118,7 +121,7 @@ export function reduceBackspaceDown(actions, ports, ctx) {
 	}
 
 	// format attributes
-	if (!selectRange && format.isEdgeLine(range.startContainer, range.startOffset, 'front')) {
+	if (!selectRange && !bidiNotFront && format.isEdgeLine(range.startContainer, range.startOffset, 'front')) {
 		if (format.isLine(formatEl.previousElementSibling)) {
 			actions.push(A.cacheFormatAttrsTemp(formatEl.previousElementSibling.attributes));
 		}
@@ -134,7 +137,7 @@ export function reduceBackspaceDown(actions, ports, ctx) {
 			dom.check.isList(rangeEl) &&
 			(dom.check.isListCell(rangeEl.parentElement) || formatEl.previousElementSibling) &&
 			(selectionNode === formatEl || (selectionNode.nodeType === 3 && (!selectionNode.previousSibling || dom.check.isList(selectionNode.previousSibling)))) &&
-			(format.getLine(range.startContainer, null) !== format.getLine(range.endContainer, null) ? rangeEl.contains(range.startContainer) : range.startOffset === 0 && range.collapsed)
+			(format.getLine(range.startContainer, null) !== format.getLine(range.endContainer, null) ? rangeEl.contains(range.startContainer) : range.startOffset === 0 && range.collapsed && !bidiNotFront)
 		) {
 			if (range.startContainer !== range.endContainer) {
 				actions.push(A.prevent());
@@ -163,7 +166,7 @@ export function reduceBackspaceDown(actions, ports, ctx) {
 		}
 
 		// detach range
-		if (!selectRange && range.startOffset === 0) {
+		if (!selectRange && range.startOffset === 0 && !bidiNotFront) {
 			let detach = true;
 			let comm = commonCon;
 			while (comm && comm !== rangeEl && !dom.check.isWysiwygFrame(comm)) {
@@ -185,6 +188,16 @@ export function reduceBackspaceDown(actions, ports, ctx) {
 		}
 	}
 
+	// empty line adjacent to component (offset-independent — handles RTL caret at offset 1)
+	if (!selectRange && formatEl && dom.check.isEmptyLine(formatEl) && component.is(formatEl.previousElementSibling)) {
+		const fileComponentInfo = component.get(formatEl.previousElementSibling);
+		if (fileComponentInfo) {
+			actions.push(A.preventStop());
+			actions.push(A.backspaceComponentRemove(false, formatEl.firstChild, formatEl, fileComponentInfo));
+			return true;
+		}
+	}
+
 	// component
 	if (!selectRange && formatEl && (range.startOffset === 0 || (selectionNode === formatEl ? formatEl.childNodes[range.startOffset] : false))) {
 		const isList = dom.check.isListCell(formatEl);

package/src/core/event/rules/keydown.rule.delete.js

@@ -1,5 +1,5 @@
 import { dom } from '../../../helper';
-import { hardDelete, isUneditableNode } from '../effects/ruleHelpers';
+import { hardDelete, isUneditableNode, isRtlBidiMismatch } from '../effects/ruleHelpers';
 import { A } from '../actions';
 
 /**
@@ -18,10 +18,12 @@ import { A } from '../actions';
  */
 export function reduceDeleteDown(actions, ports, ctx) {
 	const { format, component } = ports;
-	const { range, selectionNode } = ctx;
+	const { fc, range, selectionNode } = ctx;
 	let { formatEl } = ctx;
 
 	const selectRange = !range.collapsed || range.startContainer !== range.endContainer;
+	// RTL bidi guard: if offset=length is actually at the visual start due to LTR text in RTL line, skip end-edge handling
+	const bidiNotEnd = ctx.options.get('_rtl') && !selectRange && range.endOffset >= (range.endContainer.textContent?.length || 0) && isRtlBidiMismatch(range, formatEl, 'end', fc.get('_wd'));
 
 	actions.push(A.componentDeselect());
 	actions.push(A.cacheStyleNode());
@@ -31,7 +33,7 @@ export function reduceDeleteDown(actions, ports, ctx) {
 		return true;
 	}
 
-	if (!selectRange && format.isEdgeLine(range.endContainer, range.endOffset, 'end') && !formatEl.nextSibling) {
+	if (!selectRange && !bidiNotEnd && format.isEdgeLine(range.endContainer, range.endOffset, 'end') && !formatEl.nextSibling) {
 		actions.push(A.preventStop());
 		return false;
 	}
@@ -107,7 +109,7 @@ export function reduceDeleteDown(actions, ports, ctx) {
 	}
 
 	// format attributes
-	if (!selectRange && format.isEdgeLine(range.endContainer, range.endOffset, 'end')) {
+	if (!selectRange && !bidiNotEnd && format.isEdgeLine(range.endContainer, range.endOffset, 'end')) {
 		if (format.isLine(formatEl.nextElementSibling)) {
 			actions.push(A.cacheFormatAttrsTemp(formatEl.attributes));
 		}
@@ -122,7 +124,7 @@ export function reduceDeleteDown(actions, ports, ctx) {
 		(selectionNode === formatEl ||
 			(selectionNode.nodeType === 3 &&
 				(!selectionNode.nextSibling || dom.check.isList(selectionNode.nextSibling)) &&
-				(format.getLine(range.startContainer, null) !== format.getLine(range.endContainer, null) ? rangeEl.contains(range.endContainer) : range.endOffset === selectionNode.textContent.length && range.collapsed)))
+				(format.getLine(range.startContainer, null) !== format.getLine(range.endContainer, null) ? rangeEl.contains(range.endContainer) : range.endOffset === selectionNode.textContent.length && range.collapsed && !bidiNotEnd)))
 	) {
 		actions.push(A.deleteListRemoveNested(range, formatEl, rangeEl));
 		return true;

package/src/core/event/rules/keydown.rule.enter.js

@@ -1,4 +1,5 @@
 import { dom } from '../../../helper';
+import { isRtlBidiMismatch } from '../effects/ruleHelpers';
 import { A } from '../actions';
 
 /**
@@ -40,8 +41,24 @@ export function reduceEnterDown(actions, ports, ctx) {
 	}
 
 	if (!shift) {
-		const formatEndEdge = format.isEdgeLine(range.endContainer, range.endOffset, 'end');
-		const formatStartEdge = format.isEdgeLine(range.startContainer, range.startOffset, 'front');
+		let formatEndEdge = format.isEdgeLine(range.endContainer, range.endOffset, 'end');
+		let formatStartEdge = format.isEdgeLine(range.startContainer, range.startOffset, 'front');
+
+		// RTL bidi edge correction: when LTR text (e.g. numbers) is inside an RTL line,
+		// the browser places the caret at the logically opposite offset at bidi boundaries.
+		let bidiSwapped = false;
+		if (ctx.options.get('_rtl') && formatEl && range.collapsed && formatStartEdge !== formatEndEdge) {
+			const _wd = ctx.fc.get('_wd');
+			if (formatStartEdge && isRtlBidiMismatch(range, formatEl, 'front', _wd)) {
+				formatStartEdge = false;
+				formatEndEdge = true;
+				bidiSwapped = true;
+			} else if (formatEndEdge && isRtlBidiMismatch(range, formatEl, 'end', _wd)) {
+				formatEndEdge = false;
+				formatStartEdge = true;
+				bidiSwapped = true;
+			}
+		}
 
 		// add default format line
 		if (formatEndEdge && (/^H[1-6]$/i.test(formatEl.nodeName) || /^HR$/i.test(formatEl.nodeName))) {
@@ -115,7 +132,7 @@ export function reduceEnterDown(actions, ports, ctx) {
 		// set format attrs - edge
 		if (range.collapsed && (formatStartEdge || formatEndEdge)) {
 			ports.enterPrevent(e);
-			actions.push(A.enterFormatBreakAtEdge(formatEl, selectionNode, formatStartEdge, formatEndEdge));
+			actions.push(A.enterFormatBreakAtEdge(formatEl, selectionNode, formatStartEdge, formatEndEdge, bidiSwapped));
 			actions.push(A.enterScrollTo(range));
 			return true;
 		}
@@ -125,6 +142,19 @@ export function reduceEnterDown(actions, ports, ctx) {
 
 			/** @type {HTMLElement} */
 			if (selectRange) {
+				// RTL bidi edge correction for selection ranges (formatStartEdge only)
+				// formatEndEdge insert-after behavior is already correct for RTL selections
+				if (ctx.options.get('_rtl') && formatStartEdge && !formatEndEdge) {
+					const _wd = ctx.fc.get('_wd');
+					const testRange = _wd.createRange();
+					testRange.setStart(range.startContainer, range.startOffset);
+					testRange.collapse(true);
+					if (isRtlBidiMismatch(testRange, formatEl, 'front', _wd)) {
+						formatStartEdge = false;
+						formatEndEdge = true;
+						bidiSwapped = true;
+					}
+				}
 				actions.push(A.enterFormatBreakWithSelection(formatEl, range, formatStartEdge, formatEndEdge));
 			} else {
 				actions.push(A.enterFormatBreakAtCursor(formatEl, range));

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/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;