suneditor 3.1.0 → 3.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "suneditor",
-	"version": "3.1.0",
+	"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 = !range.endContainer.nextSibling && format.isEdgeLine(range.endContainer, range.endOffset, 'end');
-		const formatStartEdge = !range.startContainer.previousSibling && 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/dom/format.js

@@ -766,7 +766,11 @@ class Format {
 	 * @returns {node is HTMLElement}
 	 */
 	isEdgeLine(node, offset, dir) {
-		if (!dom.check.isEdgePoint(node, offset, dir)) return false;
+		if (dir === 'front') {
+			if (offset > 0) return false;
+		} else {
+			if (node?.textContent?.length > offset) return false;
+		}
 
 		let result = false;
 		const siblingType = dir === 'front' ? 'previousSibling' : 'nextSibling';

package/src/core/logic/panel/menu.js

@@ -1,4 +1,6 @@
-import { dom, converter } from '../../../helper';
+import { dom, converter, env } from '../../../helper';
+
+const { isMobile, _w } = env;
 
 /**
  * @description Dropdown and container menu management class
@@ -22,6 +24,9 @@ class Menu {
 	#bindMenu_mouseout = null;
 	#menuBtn = null;
 	#menuContainer = null;
+	#deferredShowTimer = null;
+	#viewportListener = null;
+	#visualViewport = null;
 
 	/**
 	 * @constructor
@@ -67,6 +72,7 @@ class Menu {
 		// eventManager member (viewport)
 		this.#menuBtn = null;
 		this.#menuContainer = null;
+		this.#visualViewport = _w.visualViewport || null;
 	}
 
 	/**
@@ -109,7 +115,12 @@ class Menu {
 		this.currentDropdownType = btnEl.getAttribute('data-type');
 		const menu = (this.currentDropdown = this.targetMap[dropdownName]);
 		this.currentDropdownActiveButton = btnEl;
-		this.#setMenuPosition(btnEl, menu);
+
+		if (isMobile) {
+			this.#deferMenuShow(btnEl, menu);
+		} else {
+			this.#setMenuPosition(btnEl, menu);
+		}
 
 		this.#bindClose_dropdown_mouse = this.#eventManager.addGlobalEvent('mousedown', this.#globalEventHandler.mousedown, false);
 		if (this.#dropdownCommands.includes(dropdownName)) {
@@ -131,6 +142,7 @@ class Menu {
 	 * @description Closes the currently open dropdown menu.
 	 */
 	dropdownOff() {
+		this.#clearDeferredShow();
 		this.#removeGlobalEvent();
 		if (IsFree(this.currentDropdownType)) this.currentDropdownPlugin?.off?.();
 
@@ -189,7 +201,13 @@ class Menu {
 
 		this.currentContainerActiveButton = /** @type {HTMLButtonElement} */ (button);
 		const containerName = (this.currentContainerName = this.currentContainerActiveButton.getAttribute('data-command'));
-		this.#setMenuPosition(button, (this.currentContainer = this.targetMap[containerName]));
+		this.currentContainer = this.targetMap[containerName];
+
+		if (isMobile) {
+			this.#deferMenuShow(button, this.currentContainer);
+		} else {
+			this.#setMenuPosition(button, this.currentContainer);
+		}
 
 		this.#bindClose_cons_mouse = this.#eventManager.addGlobalEvent('mousedown', this.#globalEventHandler.containerDown, false);
 
@@ -201,6 +219,7 @@ class Menu {
 	 * @description Closes the currently open menu container.
 	 */
 	containerOff() {
+		this.#clearDeferredShow();
 		this.#removeGlobalEvent();
 
 		if (this.currentContainer) {
@@ -231,6 +250,8 @@ class Menu {
 	 */
 	__restoreMenuPosition() {
 		if (!this.#menuBtn || !this.#menuContainer) return;
+		// skip if deferred show is pending — it will handle positioning after viewport settles
+		if (this.#viewportListener || this.#deferredShowTimer) return;
 		this.#setMenuPosition(this.#menuBtn, this.#menuContainer);
 	}
 
@@ -253,6 +274,56 @@ class Menu {
 		this.#menuContainer = menu;
 	}
 
+	/**
+	 * @description Defer menu display on mobile until viewport settles after keyboard dismiss.
+	 * @param {Node} element Button element
+	 * @param {HTMLElement} menu Menu element
+	 */
+	#deferMenuShow(element, menu) {
+		this.#clearDeferredShow();
+
+		menu.style.display = 'none';
+		dom.utils.addClass(element.parentElement.children, 'on');
+		this.#menuBtn = element;
+		this.#menuContainer = menu;
+
+		let resolved = false;
+		const show = (delay) => {
+			if (resolved) return;
+			resolved = true;
+			this.#clearDeferredShow();
+			this.#deferredShowTimer = _w.setTimeout(() => {
+				this.#deferredShowTimer = null;
+				if (this.#menuBtn === element) {
+					this.#setMenuPosition(element, menu);
+				}
+			}, delay);
+		};
+
+		if (this.#visualViewport) {
+			// listen for viewport resize (keyboard dismiss) — small delay to let viewport settle
+			this.#viewportListener = () => show(10);
+			this.#visualViewport.addEventListener('resize', this.#viewportListener, { once: true });
+		}
+
+		// fallback if no viewport change occurs (keyboard already hidden or no visualViewport)
+		this.#deferredShowTimer = _w.setTimeout(() => show(0), 50);
+	}
+
+	/**
+	 * @description Clear deferred show timer and viewport listener.
+	 */
+	#clearDeferredShow() {
+		if (this.#deferredShowTimer) {
+			_w.clearTimeout(this.#deferredShowTimer);
+			this.#deferredShowTimer = null;
+		}
+		if (this.#viewportListener) {
+			this.#visualViewport?.removeEventListener('resize', this.#viewportListener);
+			this.#viewportListener = null;
+		}
+	}
+
 	/**
 	 * @description Check if the element is part of a more layer
 	 * @param {Node} element The element to check