suneditor 3.1.2 → 3.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "suneditor",
-	"version": "3.1.2",
+	"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",

package/src/assets/suneditor.css

@@ -1149,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;
@@ -2568,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);
@@ -4553,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/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/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);

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');
@@ -396,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?.();
 	}
 
 	/**
@@ -404,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';
 	}
 
 	/**
@@ -423,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');
 	}
 
@@ -432,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);
@@ -452,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');
 
@@ -468,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';
 	}
 
@@ -509,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';
 	}

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);
@@ -934,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;
@@ -990,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');