suneditor 3.1.1 → 3.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "suneditor",
-	"version": "3.1.1",
+	"version": "3.1.3",
 	"description": "Vanilla JavaScript based WYSIWYG web editor",
 	"author": "Yi JiHong",
 	"license": "MIT",
@@ -49,16 +49,19 @@
 	"engines": {
 		"node": ">=14.0.0"
 	},
+	"overrides": {
+		"uuid": ">=14.0.0"
+	},
 	"scripts": {
 		"dev": "webpack-dev-server --config webpack/dev.js",
 		"start": "npm run dev",
 		"build:dev": "cross-env NODE_ENV=development webpack --config webpack/builder.js && cross-env NODE_ENV=development webpack --config webpack/builder-contents.js && rm -f dist/_suneditor-contents.js",
 		"build:prod": "cross-env NODE_ENV=production webpack --config webpack/builder.js && cross-env NODE_ENV=production webpack --config webpack/builder-contents.js && rm -f dist/_suneditor-contents.js",
 		"lint:type": "npx tsc --noEmit",
-		"lint:fix-js": "npx eslint \"src/**/*.js\" --fix",
+		"lint:fix-js": "npx eslint src/ --fix",
 		"lint:fix-ts": "npx eslint types/ --fix",
-		"lint:fix-all": "npx eslint \"src/**/*.js\" types/ --fix",
-		"lint": "npx eslint \"src/**/*.js\" types/ && npm run lint:type && npm run check:arch",
+		"lint:fix-all": "npx eslint src/ types/ --fix",
+		"lint": "npx eslint src/ types/ && npm run lint:type && npm run check:arch",
 		"ts-build": "npm run check:inject && (npx tsc || true) && barrelsby --config .barrelsby.json && node scripts/ts-build/format-index.cjs && node scripts/ts-build/fix-langs.cjs && node scripts/ts-build/wrap-dts.cjs && node scripts/ts-build/rename-index.cjs && node scripts/ts-build/interfaces-convert.cjs && node scripts/ts-build/gen-options-dts.cjs && node scripts/ts-build/gen-css-dts.cjs && node scripts/ts-build/inject-typedef-import.cjs && npm run lint:fix-ts",
 		"test": "jest --silent",
 		"test:watch": "jest --watch",
@@ -125,13 +128,13 @@
 		"webpack": "^5.102.0",
 		"webpack-bundle-analyzer": "^4.10.2",
 		"webpack-cli": "^6.0.1",
-		"webpack-dev-server": "^5.2.2",
+		"webpack-dev-server": "^5.2.3",
 		"webpack-merge": "^6.0.1"
 	},
 	"browserslist": [
 		"chrome >= 119",
 		"edge >= 119",
-		"firefox >= 121",
+		"firefox >= 125",
 		"safari >= 17.2",
 		"opera >= 105",
 		"samsung >= 23",
@@ -168,4 +171,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);
@@ -1137,6 +1149,26 @@
 	z-index: 2147483646;
 }
 
+/** --- popover UA override ---------------------------------------------------- */
+.sun-editor .se-controller[popover],
+.sun-editor.sun-editor-carrier-wrapper .se-drag-cursor[popover] {
+	inset: unset;
+	margin: 0;
+}
+
+.sun-editor .se-modal-area[popover],
+.sun-editor .se-back-wrapper[popover],
+.sun-editor .se-loading-box[popover],
+.sun-editor .se-toast[popover],
+.sun-editor .se-browser[popover],
+.sun-editor .se-menu-tray[popover] {
+	background: none;
+	border: none;
+	padding: 0;
+	overflow: visible;
+	color: inherit;
+}
+
 /** --- dropdown layer ---------------------------------------------------------- */
 .sun-editor .se-dropdown {
 	overflow-x: hidden;
@@ -1156,7 +1188,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 +1221,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 +1596,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 +2043,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);
 }
@@ -2542,6 +2588,12 @@
 	display: none;
 	overflow: visible;
 	z-index: 2147483646;
+}
+
+.sun-editor .se-controller[popover]:popover-open {
+	position: absolute;
+	inset: unset;
+	margin: 0;
 	padding: 2px 2px 0 2px;
 	margin: 0;
 	border: 1px solid var(--se-controller-border-color);
@@ -2558,6 +2610,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 +2635,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 +3013,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 +3043,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 +3066,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 +3132,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 +3989,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 {
@@ -4527,8 +4579,8 @@
 .sun-editor-editable[contenteditable='true'] .se-page-break::after {
 	content: '⎯⎯⎯⎯⎯⎯';
 	position: absolute;
-	top: 1px;
-	background: var(--se-main-background-color);
+	top: 0px;
+	background: transparent;
 	padding: 0 5px;
 	color: var(--se-doc-info-page-background-color);
 	font-size: var(--se-main-font-size);

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/handlers/handler_ww_dragDrop.js

@@ -46,7 +46,17 @@ export function OnDragOver_wysiwyg(fc, dragCursor, _iframeTopArea, _innerToolbar
 		dragCursor.style.top = `${rect.top + _w.scrollY + _offset.y - 5 + frameY}px`;
 		dragCursor.style.height = `${rect.height + 10}px`;
 		dragCursor.style.display = 'block';
+		try {
+			dragCursor.showPopover?.();
+		} catch {
+			// ignore
+		}
 	} else {
+		try {
+			dragCursor.hidePopover?.();
+		} catch {
+			// ignore
+		}
 		dragCursor.style.display = 'none';
 	}
 }
@@ -56,6 +66,11 @@ export function OnDragOver_wysiwyg(fc, dragCursor, _iframeTopArea, _innerToolbar
  * @param {HTMLElement} dragCursor - Drag cursor element
  */
 export function OnDragEnd_wysiwyg(dragCursor) {
+	try {
+		dragCursor.hidePopover?.();
+	} catch {
+		// ignore
+	}
 	dragCursor.style.display = 'none';
 }
 
@@ -109,6 +124,11 @@ export function OnDrop_wysiwyg(fc, dragCursor, e) {
 		this.$.selection.setRange(sc, so, ec, eo);
 		return this._dataTransferAction('drop', e, dataTransfer, fc);
 	} finally {
+		try {
+			dragCursor.hidePopover?.();
+		} catch {
+			// ignore
+		}
 		dragCursor.style.display = 'none';
 	}
 }

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/panel/menu.js

@@ -122,6 +122,7 @@ class Menu {
 			this.#setMenuPosition(btnEl, menu);
 		}
 
+		this.#context.get('menuTray').showPopover?.();
 		this.#bindClose_dropdown_mouse = this.#eventManager.addGlobalEvent('mousedown', this.#globalEventHandler.mousedown, false);
 		if (this.#dropdownCommands.includes(dropdownName)) {
 			this.menus = converter.nodeListToArray(menu.querySelectorAll('[data-command]'));
@@ -162,6 +163,7 @@ class Menu {
 			}
 			this.currentDropdownActiveButton = null;
 			this.#$.ui.preventToolbarHide(false);
+			this.#context.get('menuTray').hidePopover?.();
 		}
 
 		this.#store.set('_preventBlur', false);
@@ -209,6 +211,7 @@ class Menu {
 			this.#setMenuPosition(button, this.currentContainer);
 		}
 
+		this.#context.get('menuTray').showPopover?.();
 		this.#bindClose_cons_mouse = this.#eventManager.addGlobalEvent('mousedown', this.#globalEventHandler.containerDown, false);
 
 		if (this.#$.plugins[containerName].on) this.#$.plugins[containerName].on(button);
@@ -229,6 +232,7 @@ class Menu {
 			dom.utils.removeClass(this.currentContainerActiveButton, 'on');
 			this.currentContainerActiveButton = null;
 			this.#$.ui.preventToolbarHide(false);
+			this.#context.get('menuTray').hidePopover?.();
 		}
 
 		this.#store.set('_preventBlur', false);