suneditor 3.1.1 → 3.1.3

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

@@ -89,6 +89,7 @@ class UIManager {
 
 		// toast
 		const toastPopup = CreateToastHTML();
+		toastPopup.setAttribute('popover', 'manual');
 		this.toastPopup = toastPopup;
 		this.toastContainer = toastPopup.querySelector('.se-toast-container');
 		this.toastMessage = toastPopup.querySelector('span');
@@ -200,14 +201,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 +235,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 +271,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 +291,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()}`);
 		}
 
@@ -372,7 +397,9 @@ class UIManager {
 	 * @param {string} [rootKey] Root key
 	 */
 	showLoading(rootKey) {
-		/** @type {HTMLElement} */ ((rootKey ? this.#frameRoots.get(rootKey).get('container') : this.#carrierWrapper).querySelector('.se-loading-box')).style.display = 'block';
+		const el = /** @type {HTMLElement} */ ((rootKey ? this.#frameRoots.get(rootKey).get('container') : this.#carrierWrapper).querySelector('.se-loading-box'));
+		el.style.display = 'block';
+		el.showPopover?.();
 	}
 
 	/**
@@ -380,7 +407,9 @@ class UIManager {
 	 * @param {string} [rootKey] Root key
 	 */
 	hideLoading(rootKey) {
-		/** @type {HTMLElement} */ ((rootKey ? this.#frameRoots.get(rootKey).get('container') : this.#carrierWrapper).querySelector('.se-loading-box')).style.display = 'none';
+		const el = /** @type {HTMLElement} */ ((rootKey ? this.#frameRoots.get(rootKey).get('container') : this.#carrierWrapper).querySelector('.se-loading-box'));
+		el.hidePopover?.();
+		el.style.display = 'none';
 	}
 
 	/**
@@ -399,6 +428,7 @@ class UIManager {
 		this.#bindClose = this.#eventManager.addGlobalEvent('keydown', this.#closeListener[0]);
 
 		this.#alertArea.style.display = 'block';
+		this.#alertArea.showPopover?.();
 		dom.utils.addClass(this.alertModal, 'se-modal-show');
 	}
 
@@ -408,6 +438,7 @@ class UIManager {
 	alertClose() {
 		dom.utils.removeClass(this.alertModal, 'se-modal-show');
 		dom.utils.removeClass(this.alertModal, 'se-alert-*');
+		this.#alertArea.hidePopover?.();
 		this.#alertArea.style.display = 'none';
 		this.#bindAlertClick &&= this.#eventManager.removeEvent(this.#bindAlertClick);
 		this.#bindClose &&= this.#eventManager.removeGlobalEvent(this.#bindClose);
@@ -428,6 +459,7 @@ class UIManager {
 		if (type) dom.utils.addClass(this.toastPopup, `se-toast-${type}`);
 
 		this.toastPopup.style.display = 'block';
+		this.toastPopup.showPopover?.();
 		this.toastMessage.textContent = message;
 		dom.utils.addClass(this.toastContainer, 'se-toast-show');
 
@@ -444,6 +476,7 @@ class UIManager {
 		if (this.#toastToggle) _w.clearTimeout(this.#toastToggle);
 		this.#toastToggle = null;
 		dom.utils.removeClass(this.toastContainer, 'se-toast-show');
+		this.toastPopup.hidePopover?.();
 		this.toastPopup.style.display = 'none';
 	}
 
@@ -485,12 +518,14 @@ class UIManager {
 	enableBackWrapper(cursor) {
 		this.#backWrapper.style.cursor = cursor;
 		this.#backWrapper.style.display = 'block';
+		this.#backWrapper.showPopover?.();
 	}
 
 	/**
 	 * @description Disabled background `div`
 	 */
 	disableBackWrapper() {
+		this.#backWrapper.hidePopover?.();
 		this.#backWrapper.style.display = 'none';
 		this.#backWrapper.style.cursor = 'default';
 	}
@@ -702,6 +737,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/schema/options.js

@@ -363,7 +363,7 @@ export const DEFAULTS = {
  *   attributeWhitelist: {
  *     a: 'href|target',
  *     img: 'src|alt',
- *     '*': 'id|data-*'
+ *     '*': 'id|data-[^\s]+'
  *   }
  * }
  * ```

package/src/core/section/constructor.js

@@ -6,6 +6,7 @@ import { dom, numbers, converter, env } from '../../helper';
 import { DEFAULTS } from '../schema/options';
 
 const _d = env._d;
+let editorInstanceId = 0;
 
 /**
  * @typedef {import('../schema/options').AllBaseOptions} AllBaseOptions_constructor
@@ -57,16 +58,21 @@ function Constructor(editorTargets, options) {
 	const icons = optionMap.i;
 	const lang = optionMap.l;
 	const loadingBox = dom.utils.createElement('DIV', { class: 'se-loading-box sun-editor-common' }, '<div class="se-loading-effect"></div>');
+	const editorFormFieldPrefix = 'suneditor-' + ++editorInstanceId;
 
 	/** --- carrier wrapper --------------------------------------------------------------- */
 	const editor_carrier_wrapper = dom.utils.createElement('DIV', { class: 'sun-editor sun-editor-carrier-wrapper sun-editor-common' + o.get('_themeClass') + (o.get('_rtl') ? ' se-rtl' : '') });
 	// menuTray
-	const menuTray = dom.utils.createElement('DIV', { class: 'se-menu-tray' });
+	const menuTray = dom.utils.createElement('DIV', { class: 'se-menu-tray', popover: 'manual' });
 	editor_carrier_wrapper.appendChild(menuTray);
 	// focus temp element
 	const focusTemp = /** @type {HTMLInputElement} */ (
 		dom.utils.createElement('INPUT', {
+			type: 'text',
+			id: editorFormFieldPrefix + '-focus-temp',
 			class: '__se__focus__temp__',
+			autocomplete: 'off',
+			'aria-hidden': 'true',
 			style: 'position: fixed !important; top: -10000px !important; left: -10000px !important; display: block !important; width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important;',
 		})
 	);
@@ -74,7 +80,7 @@ function Constructor(editorTargets, options) {
 	editor_carrier_wrapper.appendChild(focusTemp);
 
 	// modal
-	const modal = dom.utils.createElement('DIV', { class: 'se-modal se-modal-area sun-editor-common' });
+	const modal = dom.utils.createElement('DIV', { class: 'se-modal se-modal-area sun-editor-common', popover: 'manual' });
 	const modal_back = dom.utils.createElement('DIV', { class: 'se-modal-back' });
 	const modal_inner = dom.utils.createElement('DIV', { class: 'se-modal-inner' });
 	modal.appendChild(modal_back);
@@ -82,7 +88,7 @@ function Constructor(editorTargets, options) {
 	editor_carrier_wrapper.appendChild(modal);
 
 	// alert
-	const alert = dom.utils.createElement('DIV', { class: 'se-alert se-modal-area sun-editor-common', style: 'display: none;' });
+	const alert = dom.utils.createElement('DIV', { class: 'se-alert se-modal-area sun-editor-common', style: 'display: none;', popover: 'manual' });
 	const alert_back = dom.utils.createElement('DIV', { class: 'se-modal-back' });
 	const alert_inner = dom.utils.createElement('DIV', { class: 'se-modal-inner' });
 	alert.appendChild(alert_back);
@@ -90,11 +96,13 @@ function Constructor(editorTargets, options) {
 	editor_carrier_wrapper.appendChild(alert);
 
 	// loding box, resizing back
-	editor_carrier_wrapper.appendChild(dom.utils.createElement('DIV', { class: 'se-back-wrapper' }));
-	editor_carrier_wrapper.appendChild(loadingBox.cloneNode(true));
+	editor_carrier_wrapper.appendChild(dom.utils.createElement('DIV', { class: 'se-back-wrapper', popover: 'manual' }));
+	const loadingBoxEl = /** @type {HTMLElement} */ (loadingBox.cloneNode(true));
+	loadingBoxEl.setAttribute('popover', 'manual');
+	editor_carrier_wrapper.appendChild(loadingBoxEl);
 
 	// drag cursor
-	const dragCursor = dom.utils.createElement('DIV', { class: 'se-drag-cursor' });
+	const dragCursor = dom.utils.createElement('DIV', { class: 'se-drag-cursor', popover: 'manual' });
 	editor_carrier_wrapper.appendChild(dragCursor);
 
 	// set carrier wrapper
@@ -146,7 +154,7 @@ function Constructor(editorTargets, options) {
 		container.appendChild(dom.utils.createElement('DIV', { class: 'se-toolbar-shadow' }));
 
 		// init element
-		const initElements = _initTargetElements(editTarget.key, o, top_div, to);
+		const initElements = _initTargetElements(editTarget.key, o, top_div, to, editorFormFieldPrefix);
 		const bottomBar = initElements.bottomBar;
 		const statusbar = bottomBar.statusbar;
 		const wysiwyg_div = initElements.wysiwygFrame;
@@ -195,7 +203,11 @@ function Constructor(editorTargets, options) {
 			// not used code mirror
 			if (textarea === codeMirrorEl) {
 				// add line nubers
-				const codeNumbers = dom.utils.createElement('TEXTAREA', { class: 'se-code-view-line', readonly: 'true' }, null);
+				const codeNumbers = dom.utils.createElement(
+					'TEXTAREA',
+					{ id: editorFormFieldPrefix + '-code-view-line-' + (key || 'default'), class: 'se-code-view-line', readonly: 'true', autocomplete: 'off', 'aria-hidden': 'true', tabindex: '-1' },
+					null,
+				);
 				codeWrapper.insertBefore(codeNumbers, textarea);
 			} else {
 				textarea = codeMirrorEl;
@@ -207,7 +219,11 @@ function Constructor(editorTargets, options) {
 		let markdownTextarea = null;
 		if (o.get('buttons').has('markdownView')) {
 			markdownTextarea = initElements.markdownView;
-			const markdownNumbers = dom.utils.createElement('TEXTAREA', { class: 'se-markdown-view-line', readonly: 'true' }, null);
+			const markdownNumbers = dom.utils.createElement(
+				'TEXTAREA',
+				{ id: editorFormFieldPrefix + '-markdown-view-line-' + (key || 'default'), class: 'se-markdown-view-line', readonly: 'true', autocomplete: 'off', 'aria-hidden': 'true', tabindex: '-1' },
+				null,
+			);
 			markdownWrapper = dom.utils.createElement('DIV', { class: 'se-markdown-wrapper' });
 			markdownWrapper.appendChild(markdownNumbers);
 			markdownWrapper.appendChild(markdownTextarea);
@@ -361,8 +377,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);
+	}
 }
 
 /**
@@ -921,9 +950,10 @@ function InitFrameOptions(o, origin) {
  * @param {Map<string, *>} options - Options
  * @param {HTMLElement} topDiv - Top div
  * @param {SunEditor.FrameOptions} targetOptions - `editor.frameOptions`
+ * @param {string} formFieldPrefix - Prefix for generated form field ids
  * @returns {{bottomBar: ReturnType<CreateStatusbar>, wysiwygFrame: HTMLElement, codeView: HTMLElement, markdownView: HTMLElement, placeholder: HTMLElement}}
  */
-function _initTargetElements(key, options, topDiv, targetOptions) {
+function _initTargetElements(key, options, topDiv, targetOptions, formFieldPrefix) {
 	const editorStyles = targetOptions.get('_defaultStyles');
 	/** top div */
 	topDiv.style.cssText = editorStyles.top;
@@ -937,6 +967,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 {
@@ -976,10 +1007,10 @@ function _initTargetElements(key, options, topDiv, targetOptions) {
 	}
 
 	// textarea for code view
-	const textarea = dom.utils.createElement('TEXTAREA', { class: 'se-wrapper-inner se-code-viewer', style: editorStyles.frame });
+	const textarea = dom.utils.createElement('TEXTAREA', { id: formFieldPrefix + '-code-viewer-' + (key || 'default'), class: 'se-wrapper-inner se-code-viewer', style: editorStyles.frame, autocomplete: 'off' });
 
 	// textarea for markdown view
-	const markdownTextarea = dom.utils.createElement('TEXTAREA', { class: 'se-wrapper-inner se-markdown-viewer', style: editorStyles.frame });
+	const markdownTextarea = dom.utils.createElement('TEXTAREA', { id: formFieldPrefix + '-markdown-viewer-' + (key || 'default'), class: 'se-wrapper-inner se-markdown-viewer', style: editorStyles.frame, autocomplete: 'off' });
 
 	const placeholder = dom.utils.createElement('SPAN', { class: 'se-placeholder' });
 	if (targetOptions.get('placeholder')) {

package/src/core/section/documentType.js

@@ -162,28 +162,19 @@ class DocumentType {
 
 			// page break
 			let pageBreakHeight = 0;
-			let lastBreakPosition = 0;
-			let additionalPages = 0;
+			const breakPoints = [];
 			if (pageBreaks.length > 0) {
 				pageBreakHeight = pageBreaks[0].offsetHeight;
 				for (let i = 0; i < pageBreaks.length; i++) {
-					const breakPosition = pageBreaks[i].offsetTop;
-					const sectionHeight = breakPosition - lastBreakPosition;
-					if (sectionHeight % A4_PAGE_HEIGHT !== 0) additionalPages++;
-					lastBreakPosition = breakPosition;
+					breakPoints.push({ top: pageBreaks[i].offsetTop, end: pageBreaks[i].offsetTop + pageBreakHeight / 2 });
 				}
-
-				const lastSectionHeight = mirrorHeight - lastBreakPosition;
-				if (lastSectionHeight > 0 && lastSectionHeight % A4_PAGE_HEIGHT !== 0) additionalPages++;
 			}
 
 			const scrollTop = !this.#isScrollable(this.#fc) ? 0 : this._getWWScrollTop();
-			const totalPages = Math.ceil(mirrorHeight / A4_PAGE_HEIGHT) + additionalPages;
-			const wwWidth = this.#wwFrame.offsetWidth + 1;
-			const pages = [];
+			const pages = [{ number: 0, top: 0 }];
 
-			for (let i = 0; i < pageBreaks.length; i++) {
-				pages.push({ number: i, top: pageBreaks[i].offsetTop + pageBreakHeight / 2 });
+			for (let i = 0; i < breakPoints.length; i++) {
+				pages.push({ number: 0, top: breakPoints[i].top + pageBreakHeight / 2, isBreak: true });
 			}
 
 			this.#mirrorCache = 0;
@@ -191,14 +182,27 @@ class DocumentType {
 			const mChr = this.#mirror.children;
 			this._initializeCache(mChr);
 
-			pages.push({ number: 0, top: 0 });
+			// Calculate page positions per section (between page breaks)
+			const sectionStarts = [0, ...breakPoints.map((b) => b.end)];
+			const sectionEnds = [...breakPoints.map((b) => b.top), mirrorHeight];
+
+			for (let s = 0; s < sectionStarts.length; s++) {
+				const sStart = sectionStarts[s];
+				const sEnd = sectionEnds[s];
+				let t = sStart;
+				let isFirst = s === 0;
 
-			for (let i = 1, t = 0; i < totalPages; i++) {
-				t += A4_PAGE_HEIGHT + (i === 1 ? this.#paddingTop + this.#paddingBottom : this.#paddingTop);
-				if (!pages.some((p) => Math.abs(p.top - t) < 3)) {
-					const top = this._calcPageBreakTop(t, chr, mChr);
-					if (top === null) break;
-					pages.push({ number: i, top });
+				while (true) {
+					t += A4_PAGE_HEIGHT + (isFirst ? this.#paddingTop + this.#paddingBottom : this.#paddingTop);
+					isFirst = false;
+
+					if (t >= sEnd) break;
+
+					if (!pages.some((p) => Math.abs(p.top - t) < 3)) {
+						const top = this._calcPageBreakTop(t, chr, mChr, pages);
+						if (top === null) break;
+						pages.push({ number: 0, top });
+					}
 				}
 			}
 
@@ -214,8 +218,8 @@ class DocumentType {
 			this.#page.innerHTML = '';
 			this.#pages = [];
 
-			for (let i = 0, t; i < totalPages; i++) {
-				if (!pages[i]) continue;
+			const wwWidth = this.#wwFrame.offsetWidth + 1;
+			for (let i = 0, t; i < pages.length; i++) {
 				t = pages[i].top;
 				if (mirrorHeight < t) break;
 
@@ -249,10 +253,11 @@ class DocumentType {
 	 * @param {number} t - The initial top position value to be adjusted.
 	 * @param {HTMLCollection} chr - The elements array in the current (main) page.
 	 * @param {HTMLCollection} mChr - The elements array in the mirrored page.
+	 * @param {Array.<{number: number, top: number, isBreak?: boolean}>} [pages] - The pages array containing page break info.
 	 * @returns {number|null} The adjusted top value.
 	 */
-	_calcPageBreakTop(t, chr, mChr) {
-		const { ci } = this._getElementAtPosition(t, mChr);
+	_calcPageBreakTop(t, chr, mChr, pages) {
+		const { ci } = this._getElementAtPosition(t, mChr, pages);
 		const mel = /** @type {HTMLElement} */ (mChr[ci]);
 		const el = /** @type {HTMLElement} */ (chr[ci]);
 		if (!mel || !el) return null;
@@ -290,22 +295,39 @@ class DocumentType {
 	 * @description Retrieves the element at a given position.
 	 * @param {number} pageTop - The vertical position to check.
 	 * @param {HTMLCollection} mChr - List of mirrored elements.
+	 * @param {Array.<{number: number, top: number, isBreak?: boolean}>} [pages] - The pages array containing page break info for skipping break elements.
 	 * @returns {{ci: number, cm: number, ch: number}} The closest element and its related data.
 	 * - ci: The index of the closest element.
 	 * - cm: The distance between the top of the closest element and the given position.
 	 * - ch: The height of the closest element.
 	 */
-	_getElementAtPosition(pageTop, mChr) {
+	_getElementAtPosition(pageTop, mChr, pages) {
 		let start = this.#mirrorCache;
 		let end = mChr.length - 1;
 
+		// Reset cache if target position is before cached position (crossing section boundaries)
+		if (start > 0) {
+			const cachedPos = this.#positionCache.get(start);
+			if (cachedPos && pageTop < cachedPos.top) {
+				start = 0;
+			}
+		}
+
 		while (start <= end) {
 			const mid = Math.floor((start + end) / 2);
 			const { top, height, bottom } = this.#positionCache.get(mid);
 
 			if (pageTop >= top && pageTop <= bottom) {
-				this.#mirrorCache = mid;
-				return { ci: mid, cm: pageTop - bottom, ch: height };
+				let ci = mid;
+				// Skip page break elements — use adjacent content element
+				if (pages && dom.utils.hasClass(mChr[ci], 'se-page-break')) {
+					ci = ci + 1 < mChr.length ? ci + 1 : Math.max(0, ci - 1);
+					const adjPos = this.#positionCache.get(ci);
+					this.#mirrorCache = ci;
+					return { ci, cm: pageTop - adjPos.bottom, ch: adjPos.height };
+				}
+				this.#mirrorCache = ci;
+				return { ci, cm: pageTop - bottom, ch: height };
 			}
 
 			if (pageTop < top) {
@@ -315,7 +337,11 @@ class DocumentType {
 			}
 		}
 
-		const closestIndex = mChr[start] ? start : end;
+		let closestIndex = mChr[start] ? start : end;
+		// Skip page break elements for closest match
+		if (pages && dom.utils.hasClass(mChr[closestIndex], 'se-page-break')) {
+			closestIndex = closestIndex + 1 < mChr.length ? closestIndex + 1 : Math.max(0, closestIndex - 1);
+		}
 		this.#mirrorCache = closestIndex;
 		const iElement = this.#positionCache.get(closestIndex);
 		return { ci: closestIndex, cm: pageTop - iElement.bottom, ch: iElement.height };

package/src/modules/contract/Browser.js

@@ -151,6 +151,7 @@ class Browser {
 		// init
 		browserFrame.appendChild(dom.utils.createElement('DIV', { class: 'se-browser-back' }));
 		browserFrame.appendChild(content);
+		browserFrame.setAttribute('popover', 'manual');
 		this.#$.contextProvider.carrierWrapper.appendChild(browserFrame);
 
 		this.#$.eventManager.addEvent(this.tagArea, 'click', this.#OnClickTag.bind(this));
@@ -197,6 +198,7 @@ class Browser {
 
 		this.titleArea.textContent = params.title || this.title;
 		this.area.style.display = 'block';
+		this.area.showPopover?.();
 		this.#$.ui.opendBrowser = this;
 		this.closeArrow = this.#$.options.get('_rtl') ? this.#$.icons.menu_arrow_left : this.#$.icons.menu_arrow_right;
 
@@ -217,6 +219,7 @@ class Browser {
 		this.#removeGlobalEvent();
 		this.apiManager.cancel();
 
+		this.area.hidePopover?.();
 		this.area.style.display = 'none';
 		this.selectedTags = [];
 		this.items = [];

package/src/modules/contract/Controller.js

@@ -110,6 +110,7 @@ class Controller {
 		}
 
 		// add element
+		this.form.setAttribute('popover', 'manual');
 		this.#$.contextProvider.carrierWrapper.appendChild(element);
 
 		// init
@@ -394,6 +395,7 @@ class Controller {
 	 * @description Hide controller at editor area (link button, image resize button..)
 	 */
 	#controllerOff() {
+		this.form.hidePopover?.();
 		this.form.style.display = 'none';
 		this.#$.ui.opendControllers = this.#$.ui.opendControllers.filter((v) => v.form !== this.form);
 		if (this.#$.ui.currentControllerName !== this.kind && this.#$.ui.opendControllers.length > 0) return;
@@ -464,6 +466,7 @@ class Controller {
 
 		controller.style.zIndex = this.toTop ? INDEX_0 : this.#reserveIndex ? INDEX_S_1 : INDEX_1;
 		controller.style.visibility = '';
+		controller.showPopover?.();
 		return true;
 	}
 

package/src/modules/contract/Figure.js

@@ -282,10 +282,18 @@ class Figure {
 		const cover = dom.query.getParentElement(element, 'FIGURE', 2);
 		const inlineCover = dom.query.getParentElement(element, 'SPAN', 2);
 		const anyCover = cover || inlineCover;
-		const target = dom.query.getParentElement(element, (current) => current.parentElement === anyCover, 0) || /** @type {HTMLElement} */ (element);
+		let target = dom.query.getParentElement(element, (current) => current.parentElement === anyCover, 0) || element;
+
+		// When image is wrapped by anchor, target becomes <a> instead of <img>
+		if (dom.check.isAnchor(target)) {
+			const imgEl = target.querySelector(':scope > img');
+			if (imgEl) {
+				target = imgEl;
+			}
+		}
 
 		return {
-			target,
+			target: /** @type {HTMLElement} */ (target),
 			container: dom.query.getParentElement(target, Figure.is, 3) || cover,
 			cover: cover,
 			inlineCover: dom.utils.hasClass(inlineCover, 'se-inline-component') ? /** @type {HTMLElement} */ (inlineCover) : null,
@@ -734,12 +742,23 @@ class Figure {
 		const { container, inlineCover, target } = Figure.GetContainer(targetNode);
 		const { w, h } = this.getSize(target);
 
+		// Check if target is wrapped by an anchor
+		const anchorEl = dom.check.isAnchor(target.parentNode) ? target.parentNode : null;
+
 		const newTarget = /** @type {HTMLElement} */ (target.cloneNode(false));
 		newTarget.style.width = '';
 		newTarget.style.height = '';
 		newTarget.removeAttribute('width');
 		newTarget.removeAttribute('height');
 
+		// Preserve anchor wrapper if exists
+		let elementToInsert = newTarget;
+		if (anchorEl) {
+			const newAnchor = /** @type {HTMLElement} */ (anchorEl.cloneNode(false));
+			newAnchor.appendChild(newTarget);
+			elementToInsert = newAnchor;
+		}
+
 		switch (formatStyle) {
 			case 'inline': {
 				if (inlineCover) break;
@@ -748,7 +767,7 @@ class Figure {
 				const next = container.nextElementSibling;
 				const parent = container.parentElement;
 
-				const figure = Figure.CreateInlineContainer(newTarget);
+				const figure = Figure.CreateInlineContainer(elementToInsert);
 				dom.utils.addClass(
 					figure.container,
 					container.className
@@ -777,7 +796,7 @@ class Figure {
 					dom.utils.removeItem(s.previousElementSibling);
 				}
 
-				const figure = Figure.CreateContainer(newTarget);
+				const figure = Figure.CreateContainer(elementToInsert);
 				dom.utils.addClass(
 					figure.container,
 					container.className

package/src/modules/contract/Modal.js

@@ -162,6 +162,7 @@ class Modal {
 
 		dom.utils.addClass(this.#modalArea, 'se-backdrop-show');
 		dom.utils.addClass(this.form, 'se-modal-show');
+		this.#modalArea.showPopover?.();
 
 		if (this.#resizeBody) {
 			const offset = this.#saveOffset();
@@ -197,6 +198,7 @@ class Modal {
 		this.#bindClose &&= this.#$.eventManager.removeGlobalEvent(this.#bindClose);
 
 		// close
+		this.#modalArea.hidePopover?.();
 		dom.utils.removeClass(this.#modalArea, 'se-backdrop-show');
 		dom.utils.removeClass(this.form, 'se-modal-show');
 

package/src/plugins/dropdown/table/services/table.style.js

@@ -598,16 +598,25 @@ export class TableStyleService {
 		this._propsCache = [];
 
 		for (let i = 0, t, isBreak; (t = targets[i]); i++) {
-			// eslint-disable-next-line no-shadow
-			const { cssText, border, backgroundColor, color, textAlign, verticalAlign, fontWeight, textDecoration, fontStyle } = t.style;
-			this._propsCache.push([t, cssText]);
+			const {
+				cssText: t_cssText,
+				border: t_border,
+				backgroundColor: t_backgroundColor,
+				color: t_color,
+				textAlign: t_textAlign,
+				verticalAlign: t_verticalAlign,
+				fontWeight: t_fontWeight,
+				textDecoration: t_textDecoration,
+				fontStyle: t_fontStyle,
+			} = t.style;
+			this._propsCache.push([t, t_cssText]);
 			if (isBreak) continue;
 
-			const { c, s, w } = this.#getBorderStyle(border);
+			const { c, s, w } = this.#getBorderStyle(t_border);
 
 			// use getComputedStyle to normalize any CSS color format to rgb
-			let hexBackColor = backgroundColor;
-			let hexColor = color;
+			let hexBackColor = t_backgroundColor;
+			let hexColor = t_color;
 			if (hexBackColor || hexColor) {
 				const computed = _w.getComputedStyle(t);
 				if (hexBackColor) hexBackColor = computed.backgroundColor;
@@ -619,12 +628,12 @@ export class TableStyleService {
 			if (b_width && cellBorder.w !== w) b_width = '';
 			if (backColor !== converter.rgb2hex(hexBackColor)) backColor = '';
 			if (fontColor !== converter.rgb2hex(hexColor)) fontColor = '';
-			if (align !== (isTable ? this.#state.figureElement?.style.float : textAlign)) align = '';
-			if (align_v && align_v !== verticalAlign) align_v = '';
-			if (bold && bold !== /.+/.test(fontWeight)) bold = false;
-			if (underline && underline !== /underline/i.test(textDecoration)) underline = false;
-			if (strike && strike !== /line-through/i.test(textDecoration)) strike = false;
-			if (italic && italic !== /italic/i.test(fontStyle)) italic = false;
+			if (align !== (isTable ? this.#state.figureElement?.style.float : t_textAlign)) align = '';
+			if (align_v && align_v !== t_verticalAlign) align_v = '';
+			if (bold && bold !== /.+/.test(t_fontWeight)) bold = false;
+			if (underline && underline !== /underline/i.test(t_textDecoration)) underline = false;
+			if (strike && strike !== /line-through/i.test(t_textDecoration)) strike = false;
+			if (italic && italic !== /italic/i.test(t_fontStyle)) italic = false;
 			if (!b_color || !b_style || !b_width || !backColor || !fontColor) {
 				isBreak = true;
 			}

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;