suneditor 3.1.2 → 3.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "suneditor",
-	"version": "3.1.2",
+	"version": "3.1.4",
 	"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/dom/html.js

@@ -77,18 +77,10 @@ class HTML {
 		}
 
 		const stylesMap = new Map();
-		const stylesObj = {
-			...splitTagStyles,
-			line: options.get('_lineStylesRegExp'),
-		};
-		this.#textStyleTags.forEach((v) => {
-			stylesObj[v] = options.get('_textStylesRegExp');
-		});
-
-		for (const key in stylesObj) {
-			stylesMap.set(new RegExp(`^(${key})$`), stylesObj[key]);
+		for (const key in splitTagStyles) {
+			stylesMap.set(new RegExp(`^(${key})$`), splitTagStyles[key]);
 		}
-		this.#cleanStyleTagKeyRegExp = new RegExp(`^(${Object.keys(stylesObj).join('|')})$`, 'i');
+		this.#cleanStyleTagKeyRegExp = new RegExp(`^(${Object.keys(splitTagStyles).join('|')})$`, 'i');
 		this.#cleanStyleRegExpMap = stylesMap;
 
 		// font size unit
@@ -1966,12 +1958,12 @@ class HTML {
 				v.push(sv[0]);
 			}
 		} else if (!v || !_RE_STYLE_EQ.test(v.toString())) {
-			if (this.#textStyleTags.includes(tagName)) {
+			if (this.#cleanStyleTagKeyRegExp.test(tagName)) {
 				v = this.#cleanStyle(m, v, tagName);
 			} else if (this.#$.format.isLine(tagName)) {
-				v = this.#cleanStyle(m, v, 'line');
-			} else if (this.#cleanStyleTagKeyRegExp.test(tagName)) {
-				v = this.#cleanStyle(m, v, tagName);
+				v = this.#cleanStyle(m, v, '@line');
+			} else if (this.#textStyleTags.includes(tagName)) {
+				v = this.#cleanStyle(m, v, '@text');
 			}
 		}
 

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

@@ -67,6 +67,8 @@ export const DEFAULTS = {
 		'vertical-align|visibility|' +
 		'white-space|word-break|word-wrap',
 	TAG_STYLES: {
+		'@text': 'font-family|font-size|color|background-color|width|height',
+		'@line': 'text-align|margin|margin-left|margin-right|line-height',
 		'table|th|td': 'border|border-[a-z]+|color|background-color|text-align|float|font-weight|text-decoration|font-style|vertical-align',
 		'table|td': 'width',
 		tr: 'height',
@@ -78,8 +80,6 @@ export const DEFAULTS = {
 		'img|video|iframe': 'transform|transform-origin|width|min-width|max-width|height|min-height|max-height|float|margin|margin-top',
 		hr: '',
 	},
-	SPAN_STYLES: 'font-family|font-size|color|background-color|width|height',
-	LINE_STYLES: 'text-align|margin|margin-left|margin-right|line-height',
 
 	RETAIN_STYLE_MODE: ['repeat', 'always', 'none'],
 };
@@ -317,7 +317,7 @@ export const DEFAULTS = {
  * - `classFilter`: Filters disallowed CSS class names (`allowedClassName`)
  * - `textStyleTagFilter`: Filters text style tags (b, i, u, span, etc.)
  * - `attrFilter`: Filters disallowed HTML attributes (`attributeWhitelist`/`attributeBlacklist`)
- * - `styleFilter`: Filters disallowed inline styles (`spanStyles`/`lineStyles`/`allUsedStyles`)
+ * - `styleFilter`: Filters disallowed inline styles (per-tag from `tagStyles`)
  * ```js
  * // disable only attribute and style filters
  * {
@@ -363,7 +363,7 @@ export const DEFAULTS = {
  *   attributeWhitelist: {
  *     a: 'href|target',
  *     img: 'src|alt',
- *     '*': 'id|data-*'
+ *     '*': 'id|data-[^\s]+'
  *   }
  * }
  * ```
@@ -393,19 +393,23 @@ export const DEFAULTS = {
  * ```js
  * { allUsedStyles: 'color|background-color|text-shadow' }
  * ```
- * @property {Object<string, string>} [tagStyles={}] - Specifies allowed styles for HTML tags. Key is tag name(s), value is pipe-delimited allowed styles.
+ * @property {Object<string, string>} [tagStyles={}] - Specifies allowed CSS styles per HTML tag.
+ * - Key is a tag name, multiple tags joined with `|`, or a category sentinel (`@text`, `@line`).
+ * - Value is a pipe-delimited list of allowed style names.
+ * - Resolution order when filtering an element: explicit tag entry → `@line` (for formatLine elements) → `@text` (for textStyleTags).
+ * - An explicit tag entry **replaces** the category default — include category styles in the value if you want both.
+ * - Merged with {@link DEFAULTS.TAG_STYLES}; user-supplied keys win.
  * ```js
  * {
  *   tagStyles: {
- *     'table|td': 'border|color|background-color',
- *     hr: 'border-top'
+ *     '@text': 'color|font-size|background-color',  // default for span, b, i, em, ...
+ *     '@line': 'text-align|margin|line-height',     // default for p, h1-h6, div, li, ...
+ *     'table|td': 'border|color|background-color',  // per-tag whitelist
+ *     div: 'color',                                   // explicit override; ignores `@line` default
+ *     hr: 'border-top',
  *   }
  * }
  * ```
- * @property {string} [spanStyles=CONSTANTS.SPAN_STYLES] - Specifies allowed styles for the `span` tag.
- * - The default follows {@link DEFAULTS.SPAN_STYLES}
- * @property {string} [lineStyles=CONSTANTS.LINE_STYLES] - Specifies allowed styles for the `line` element (p..).
- * - The default follows {@link DEFAULTS.LINE_STYLES}
  * @property {Array<string>} [fontSizeUnits=CONSTANTS.SIZE_UNITS] - Allowed font size units.
  * - The default follows {@link DEFAULTS.SIZE_UNITS}
  * @property {"repeat"|"always"|"none"} [retainStyleMode="repeat"] - Determines how inline elements (e.g. `<span>`, `<strong>`) are handled when deleting text.
@@ -625,8 +629,6 @@ export const DEFAULTS = {
  * @property {string[]} [_reverseCommandArray] - Internal key shortcut matcher for reverse commands.
  * @property {string} [_subMode] - Sub toolbar mode (e.g., `balloon`).
  * @property {string[]} [_textStyleTags] - Tag names used for text styling, plus span/li.
- * @property {RegExp} [_textStylesRegExp] - Regex to match inline styles (e.g., fontSize, color).
- * @property {RegExp} [_lineStylesRegExp] - Regex to match line styles (e.g., text-align, padding).
  * @property {Object<string, string>} [_defaultStyleTagMap] - Mapping HTML tag => standard tag.
  * @property {Object<string, string>} [_styleCommandMap] - Mapping HTML tag => command (e.g., bold, underline).
  * @property {Object<string, string>} [_defaultTagCommand] - Mapping command => preferred tag.
@@ -723,8 +725,6 @@ export const OPTION_FIXED_FLAG = {
 	convertTextTags: 'fixed',
 	__tagStyles: 'fixed',
 	tagStyles: 'fixed',
-	spanStyles: 'fixed',
-	lineStyles: 'fixed',
 	textDirection: true,
 	reverseButtons: 'fixed',
 	historyStackDelayTime: true,
@@ -788,7 +788,7 @@ export const OPTION_FIXED_FLAG = {
  * @property {boolean} classFilter - Filters disallowed CSS class names (`allowedClassName`)
  * @property {boolean} textStyleTagFilter - Filters text style tags (b, i, u, span, etc.)
  * @property {boolean} attrFilter - Filters disallowed HTML attributes (`attributeWhitelist`/`attributeBlacklist`)
- * @property {boolean} styleFilter - Filters disallowed inline styles (`spanStyles`/`lineStyles`/`allUsedStyles`)
+ * @property {boolean} styleFilter - Filters disallowed inline styles (per-tag from `tagStyles`)
  */
 
 /**

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);
@@ -500,8 +516,6 @@ export function InitOptions(options, editorTargets, plugins) {
 			return _default;
 		}, {}),
 	);
-	o.set('_textStylesRegExp', new RegExp(`\\s*[^-a-zA-Z](${DEFAULTS.SPAN_STYLES}${options.spanStyles ? '|' + options.spanStyles : ''})\\s*:[^;]+(?!;)*`, 'gi'));
-	o.set('_lineStylesRegExp', new RegExp(`\\s*[^-a-zA-Z](${DEFAULTS.LINE_STYLES}${options.lineStyles ? '|' + options.lineStyles : ''})\\s*:[^;]+(?!;)*`, 'gi'));
 	o.set('_defaultStyleTagMap', {
 		strong: textTags.bold,
 		b: textTags.bold,
@@ -744,21 +758,13 @@ export function InitOptions(options, editorTargets, plugins) {
 
 	/** Create all used styles  */
 	const allUsedStyles = new Set(DEFAULTS.CONTENT_STYLES.split('|'));
-	const _ss = options.spanStyles?.split('|') || [];
 	const _ls = o.get('__listCommonStyle');
-	const _dts = DEFAULTS.SPAN_STYLES.split('|');
-	for (let i = 0, len = _dts.length; i < len; i++) {
-		allUsedStyles.add(_dts[i]);
-	}
 	for (const _ts of Object.values(o.get('tagStyles'))) {
 		const _tss = _ts.split('|');
 		for (let i = 0, len = _tss.length; i < len; i++) {
 			allUsedStyles.add(_tss[i]);
 		}
 	}
-	for (let i = 0, len = _ss.length; i < len; i++) {
-		allUsedStyles.add(_ss[i]);
-	}
 	for (let i = 0, len = _ls.length; i < len; i++) {
 		allUsedStyles.add(_ls[i]);
 	}
@@ -934,9 +940,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 +997,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')) {