suneditor 3.3.0 → 3.3.2

package/src/core/logic/dom/html.js

@@ -9,6 +9,7 @@ const ZWS_RUN_REGEXP = new RegExp(unicode.zeroWidthSpace + '+', 'g');
  * @description All HTML related classes involved in the editing area
  */
 class HTML {
+	/** @type {SunEditor.Deps} */
 	#$;
 	#store;
 
@@ -33,6 +34,7 @@ class HTML {
 	#disallowedTagsRegExp;
 	#disallowedTagNameRegExp;
 	#allowedTagNameRegExp;
+	#emptyLineRegExp;
 
 	/** @type {Object<string, RegExp>} */
 	#attributeWhitelist;
@@ -73,6 +75,18 @@ class HTML {
 				splitTagStyles[n] += tagStyles[k];
 			}
 		}
+
+		// A tag with an explicit entry that is also a line/text-style tag inherits the category
+		// styles ('@line'/'@text'), so category edits stay effective for it. (e.g. "li")
+		const formatLineReg = options.get('formatLine').reg;
+		for (const k in splitTagStyles) {
+			if (k.startsWith('@')) continue;
+			const category = formatLineReg.test(k) ? '@line' : this.#textStyleTags.includes(k) ? '@text' : '';
+			if (category && tagStyles[category]) {
+				splitTagStyles[k] += (splitTagStyles[k] ? '|' : '') + tagStyles[category];
+			}
+		}
+
 		for (const k in splitTagStyles) {
 			splitTagStyles[k] = new RegExp(`\\s*[^-a-zA-Z](${splitTagStyles[k]})\\s*:[^;]+(?!;)*`, 'gi');
 		}
@@ -97,6 +111,12 @@ class HTML {
 		this.#disallowedTagNameRegExp = new RegExp(`^(${disallowedExtraTags})$`, 'i');
 		this.#allowedTagNameRegExp = new RegExp(`^(${allowedExtraTags})$`, 'i');
 
+		// empty default line probe
+		this.#emptyLineRegExp = new RegExp(
+			`<${options.get('defaultLine')}(?:\\s[^>]*)?></${options.get('defaultLine')}>`,
+			'i',
+		);
+
 		// set disallow text nodes
 		const disallowStyleNodes = Object.keys(options.get('_defaultStyleTagMap'));
 		const allowStyleNodes = !options.get('elementWhitelist')
@@ -374,6 +394,8 @@ class HTML {
 			});
 		}
 
+		if (formatFilter && !_freeCodeViewMode) cleanData = this.#dropEmptyLines(cleanData);
+
 		return cleanData;
 	}
 
@@ -1652,7 +1674,7 @@ class HTML {
 				) || [];
 			for (let i = ch.length - 1, c; i >= 0; i--) {
 				c = /** @type {HTMLElement} */ (ch[i]);
-				c.outerHTML = c.innerHTML;
+				c.replaceWith(...c.childNodes);
 			}
 
 			if (
@@ -1699,6 +1721,28 @@ class HTML {
 		return '';
 	}
 
+	/**
+	 * @description Drops empty default lines (`<p></p>`) from a cleaned HTML string.
+	 * Wrapping block-level content in a default line is invalid HTML, so the parser tears the line
+	 * apart and leaves caret-less debris behind. An intentionally blank line always carries `<br>`.
+	 * @param {string} html Cleaned HTML string
+	 * @returns {string} The string without empty default lines
+	 */
+	#dropEmptyLines(html) {
+		if (!this.#emptyLineRegExp.test(html)) return html;
+
+		const holder = dom.utils.createElement('DIV', null, html);
+		const lines = holder.querySelectorAll(this.#options.get('defaultLine'));
+		let removed = false;
+		for (let i = lines.length - 1; i >= 0; i--) {
+			if (lines[i].firstChild) continue;
+			dom.utils.removeItem(lines[i]);
+			removed = true;
+		}
+
+		return removed ? holder.innerHTML : html;
+	}
+
 	/**
 	 * @description Checks whether a node is a block-level container in which whitespace-only text
 	 * children are insignificant formatting whitespace (safe to drop), as opposed to an inline/line
@@ -1861,7 +1905,20 @@ class HTML {
 				}
 				checkTags.push(t);
 			} else {
-				p.parentNode.insertBefore(t, p);
+				const ref = p.nextSibling;
+
+				let rest = null;
+				if (t.nextSibling) {
+					rest = p.cloneNode(false);
+					while (t.nextSibling) rest.appendChild(t.nextSibling);
+				}
+
+				p.parentNode.insertBefore(t, ref);
+
+				if (rest) {
+					p.parentNode.insertBefore(rest, ref);
+					checkTags.push(rest);
+				}
 				checkTags.push(p);
 			}
 		}
@@ -1898,19 +1955,42 @@ class HTML {
 			}
 		}
 
+		// wrap top-level `li` elements without a list parent in a `ul`
+		if (formatFilter) {
+			const orphanCells = dom.query.getListChildNodes(
+				documentFragment,
+				(current) => dom.check.isListCell(current) && !dom.check.isList(current.parentNode),
+				null,
+			);
+
+			for (let i = 0, len = orphanCells.length, t, ul, n, next; i < len; i++) {
+				t = orphanCells[i];
+				if (dom.check.isList(t.parentNode)) continue;
+
+				ul = dom.utils.createElement('UL');
+				t.parentNode.insertBefore(ul, t);
+				n = t;
+				while (n && (dom.check.isListCell(n) || (n.nodeType === 3 && !n.textContent.trim()))) {
+					next = n.nextSibling;
+					ul.appendChild(n);
+					n = next;
+				}
+			}
+		}
+
 		for (let i = 0, len = withoutFormatCells.length, t, f; i < len; i++) {
 			t = withoutFormatCells[i];
 
 			f = dom.utils.createElement('DIV');
-			f.innerHTML = t.innerHTML;
+			while (t.firstChild) f.appendChild(t.firstChild);
 
-			if (t.textContent.trim().length === 0 && this.#isAllTextStyleNodes(t)) {
+			if (f.textContent.trim().length === 0 && this.#isAllTextStyleNodes(f)) {
 				let leaf = /** @type {Element} */ (f);
 				while (leaf.firstElementChild) leaf = leaf.firstElementChild;
 				leaf.innerHTML = '<br>';
 			}
 
-			t.innerHTML = f.outerHTML;
+			t.appendChild(f);
 		}
 	}
 

package/src/core/logic/dom/nodeTransform.js

@@ -106,8 +106,9 @@ class NodeTransform {
 
 			if (temp) {
 				if (dom.check.isListCell(newEl) && dom.check.isList(temp) && temp.firstElementChild) {
-					newEl.innerHTML = temp.firstElementChild.innerHTML;
-					dom.utils.removeItem(temp.firstElementChild);
+					const firstCell = temp.firstElementChild;
+					while (firstCell.firstChild) newEl.appendChild(firstCell.firstChild);
+					dom.utils.removeItem(firstCell);
 					if (temp.children.length > 0) newEl.appendChild(temp);
 				} else {
 					newEl.appendChild(temp);
@@ -300,7 +301,8 @@ class NodeTransform {
 							}
 						}
 					} else {
-						child.innerHTML += next.innerHTML;
+						while (next.firstChild) child.appendChild(next.firstChild);
+						child.normalize();
 					}
 
 					dom.utils.removeItem(next);

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

@@ -37,6 +37,10 @@ class BlockHandle {
 	#plusBtn;
 	#dragBtn;
 	#menuConfig;
+	#menuMaxHeight;
+	#menuMinWidth;
+	/** @type {?function(SunEditor.Deps, { block: HTMLElement, openMenu: function(): void }): void} */
+	#onPlusClickHook;
 
 	/** @type {CommandMenu|null} */
 	#actionMenu = null;
@@ -74,17 +78,21 @@ class BlockHandle {
 	 * @param {HTMLElement} blockHandle - Handle group (.se-block-handle)
 	 * @param {HTMLElement} blockHandlePlus - Plus button
 	 * @param {HTMLElement} blockHandleDrag - Drag button
-	 * @param {Array<string | { title: string, icon?: string, action: function(SunEditor.Deps, { block: HTMLElement }): void }>|null} menuConfig
-	 *   Menu entries. Strings resolve via `ResolveButton` (plugin names, built-in commands). Objects
-	 *   define a custom row whose `action` is invoked with the Deps bag and the current block element.
+	 * @param {Object|Array<*>|null} blockHandleOptions - The `blockHandle` option object (`{ menu, onPlusClick, maxHeight, minWidth }`).
+	 * - An array is accepted as a shorthand for `{ menu: [...] }`.
 	 */
-	constructor($, blockHandleArea, blockHandle, blockHandlePlus, blockHandleDrag, menuConfig) {
+	constructor($, blockHandleArea, blockHandle, blockHandlePlus, blockHandleDrag, blockHandleOptions) {
 		this.#$ = $;
 		this.#area = blockHandleArea;
 		this.#handle = blockHandle;
 		this.#plusBtn = blockHandlePlus;
 		this.#dragBtn = blockHandleDrag;
-		this.#menuConfig = menuConfig || null;
+
+		const opts = Array.isArray(blockHandleOptions) ? { menu: blockHandleOptions } : blockHandleOptions || {};
+		this.#menuConfig = opts.menu || null;
+		this.#menuMaxHeight = typeof opts.maxHeight === 'string' ? opts.maxHeight : '';
+		this.#menuMinWidth = typeof opts.minWidth === 'string' ? opts.minWidth : '200px';
+		this.#onPlusClickHook = typeof opts.onPlusClick === 'function' ? opts.onPlusClick : null;
 
 		this.#$.contextProvider.carrierWrapper.appendChild(this.#handle);
 
@@ -579,6 +587,7 @@ class BlockHandle {
 	/**
 	 * @description Plus button click — insert new line after current block.
 	 * Mirrors Enter-at-end-of-line behavior from keydown.rule.enter.
+	 * Adding the line is the fixed behavior; `onPlusClick` decides what happens next (nothing by default).
 	 * @param {MouseEvent} e
 	 */
 	#onPlusClick(e) {
@@ -588,10 +597,20 @@ class BlockHandle {
 		if (!this.#currentBlock) return;
 
 		const newLine = this.#$.format.addLineAfter(this.#currentBlock);
-		if (newLine) {
-			this.#$.selection.setRange(newLine, 1, newLine, 1);
-			this.#$.history.push(false);
-		}
+		if (!newLine) return;
+
+		this.#$.selection.setRange(newLine, 1, newLine, 1);
+		this.#$.history.push(false);
+
+		if (!this.#onPlusClickHook) return;
+
+		this.#setCurrentBlock(newLine);
+		this.#updatePosition(newLine);
+
+		this.#onPlusClickHook(this.#$, {
+			block: newLine,
+			openMenu: () => this.#toggleActionMenu(),
+		});
 	}
 
 	/**
@@ -777,6 +796,22 @@ class BlockHandle {
 		// Skip if this click was actually a drag
 		if (this.#isDragging) return;
 
+		const componentInfo = this.#$.component.get(this.#currentBlock);
+		if (componentInfo) {
+			this.#actionMenu?.close();
+			this.#clearHoverLines();
+			this.#$.component.select(componentInfo.target, componentInfo.pluginName);
+			return;
+		}
+
+		this.#toggleActionMenu();
+	}
+
+	/**
+	 * @description Open the block action menu (or close it when already open). Shared by the drag button
+	 * and by the `openMenu` helper handed to the `onPlusClick` hook.
+	 */
+	#toggleActionMenu() {
 		if (!this.#menuConfig) return;
 
 		// Lazy build — plugins are not yet instantiated when BlockHandle is constructed
@@ -786,23 +821,24 @@ class BlockHandle {
 
 		if (this.#actionMenu.isOpen) {
 			this.#actionMenu.close();
-		} else {
-			this.#expandRangeToFullLines();
+			return;
+		}
 
-			// Highlight selected range lines
-			const lines = this.#$.format.getLines(null);
-			if (lines.length > 0) {
-				this.#setHoverLines(lines);
-			}
+		this.#expandRangeToFullLines();
 
-			// Choose open direction based on available space.
-			const btnGlobal = this.#$.offset.getGlobal(this.#dragBtn);
-			const spaceBelow = dom.utils.getClientSize().h - (btnGlobal.top - _w.scrollY + btnGlobal.height);
-			const spaceAbove = btnGlobal.top - _w.scrollY;
-			const horiz = this.#$.options.get('_rtl') ? 'left' : 'right';
-			const dir = `${horiz}-${spaceBelow >= spaceAbove ? 'bottom' : 'top'}`;
-			this.#actionMenu.open(dir);
+		// Highlight selected range lines
+		const lines = this.#$.format.getLines(null);
+		if (lines.length > 0) {
+			this.#setHoverLines(lines);
 		}
+
+		// Choose open direction based on available space.
+		const btnGlobal = this.#$.offset.getGlobal(this.#dragBtn);
+		const spaceBelow = dom.utils.getClientSize().h - (btnGlobal.top - _w.scrollY + btnGlobal.height);
+		const spaceAbove = btnGlobal.top - _w.scrollY;
+		const horiz = this.#$.options.get('_rtl') ? 'left' : 'right';
+		const dir = `${horiz}-${spaceBelow >= spaceAbove ? 'bottom' : 'top'}`;
+		this.#actionMenu.open(dir);
 	}
 
 	/**
@@ -816,7 +852,8 @@ class BlockHandle {
 			selectMenuParams: {
 				position: 'right-top',
 				dir: this.#$.options.get('_rtl') ? 'rtl' : 'ltr',
-				minWidth: '200px',
+				minWidth: this.#menuMinWidth,
+				maxHeight: this.#menuMaxHeight,
 				keydownTarget: _w,
 				closeMethod: () => {
 					dom.utils.removeClass(this.#dragBtn, 'on');

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

@@ -35,6 +35,7 @@ const TABLE_INNER_RE = /^(THEAD|TBODY|TR|TD|TH)$/;
  */
 function classifyType(el) {
 	const tag = el.nodeName;
+	if (isComponentContainer(el)) return 'component';
 	if (tag === 'P' || tag === 'DIV') return 'p';
 	if (HEADING_RE.test(tag)) return 'heading';
 	if (tag === 'LI') return 'list-item';
@@ -74,6 +75,24 @@ function isInsideComponent(node) {
 	return false;
 }
 
+/**
+ * @description Resolve a node to its outermost component container, but only when that container sits directly on the wysiwyg root.
+ * @param {Node} node
+ * @returns {HTMLElement|null} The top-level component container, or `null` if there is none
+ */
+function resolveTopLevelComponent(node) {
+	let el = node;
+	let outermost = null;
+
+	while (el && !isWysiwygFrame(el)) {
+		if (el.nodeType === 1 && isComponentContainer(/** @type {Element} */ (el)))
+			outermost = /** @type {HTMLElement} */ (el);
+		el = el.parentNode;
+	}
+
+	return outermost && outermost.parentNode && isWysiwygFrame(outermost.parentNode) ? outermost : null;
+}
+
 /**
  * @description Count block-level ancestors between element and wysiwyg root.
  * @param {HTMLElement} element
@@ -193,8 +212,10 @@ export function resolveBlock(node, format, wysiwygFrame, mouseY) {
 	// Already at wysiwyg root
 	if (isWysiwygFrame(node)) return null;
 
-	// Skip components (images, videos, etc.) — they have their own interaction
-	if (isInsideComponent(node)) return null;
+	if (isInsideComponent(node)) {
+		const component = resolveTopLevelComponent(node);
+		return component ? describeBlock(component, format, mouseY) : null;
+	}
 
 	let resolved = null;
 
@@ -248,8 +269,24 @@ export function resolveBlock(node, format, wysiwygFrame, mouseY) {
 
 	if (!resolved) return null;
 
-	// Final component check on resolved element
-	if (isInsideComponent(resolved)) return null;
+	// Final component check on the resolved element (e.g. getLine walked into a component)
+	if (isInsideComponent(resolved)) {
+		const component = resolveTopLevelComponent(resolved);
+		return component ? describeBlock(component, format, mouseY) : null;
+	}
+
+	return describeBlock(resolved, format, mouseY);
+}
+
+/**
+ * @description Build the `BlockInfo` for an already-resolved block element.
+ * @param {HTMLElement} element - Resolved block-level element
+ * @param {FormatAPI} format - Injected format methods
+ * @param {number} [mouseY] - Mouse clientY for nested list resolution
+ * @returns {BlockInfo}
+ */
+function describeBlock(element, format, mouseY) {
+	let resolved = element;
 
 	// For UL/OL, resolve to the closest child LI by mouse Y.
 	// For LI with nested sub-lists, find the deepest child LI.

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

@@ -151,9 +151,22 @@ class PluginManager {
 		let retainFilter;
 		if ((retainFilter = this.#options.get('__pluginRetainFilter'))) {
 			this.#retainFormatCheckers.forEach((plugin, query) => {
-				const infoLst = domParser.querySelectorAll(query);
+				let infoLst;
+				try {
+					infoLst = domParser.querySelectorAll(query);
+				} catch (error) {
+					console.warn(`[SUNEDITOR.retainFormat.fail]-[${plugin.key}]`, error.message);
+					return;
+				}
+
 				for (let i = 0, len = infoLst.length; i < len; i++) {
-					if (retainFilter === true || retainFilter[plugin.key] !== false) plugin.method(infoLst[i]);
+					if (retainFilter !== true && retainFilter[plugin.key] === false) continue;
+
+					try {
+						plugin.method(infoLst[i]);
+					} catch (error) {
+						console.warn(`[SUNEDITOR.retainFormat.fail]-[${plugin.key}]`, error.message);
+					}
 				}
 			});
 		}

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

@@ -72,6 +72,16 @@ class UIManager {
 	 */
 	#blockHandle = null;
 
+	/**
+	 * @description Currently open `SelectMenu` instances.
+	 * - There is one editor-wide "a select menu is open" flag but many `SelectMenu` instances, so it
+	 * cannot be a plain boolean: the last writer would win. A field plugin that closes its own menu on
+	 * every keystroke (`autocomplete`) used to flip the flag off while another menu (`slashCommand`) was
+	 * still open, which let the wysiwyg keydown handler run against the open menu.
+	 * @type {Set<*>}
+	 */
+	#openSelectMenus = new Set();
+
 	/**
 	 * @constructor
 	 * @param {SunEditor.Kernel} kernel
@@ -110,12 +120,6 @@ class UIManager {
 		this.#closeSignal = false;
 		this.#backWrapper = /** @type {HTMLElement} */ (this.#carrierWrapper.querySelector('.se-back-wrapper'));
 
-		/**
-		 * @description Whether `SelectMenu` is open
-		 * @type {boolean}
-		 */
-		this.selectMenuOn = false;
-
 		/**
 		 * @description Currently open `Controller` info array
 		 * @type {Array<SunEditor.Module.Controller.Info>}
@@ -136,6 +140,27 @@ class UIManager {
 		this._figureContainer = null;
 	}
 
+	/**
+	 * @description Whether any `SelectMenu` is currently open.
+	 * - Read-only: a menu announces itself through {@link setSelectMenuOpen}. Derived from the set of
+	 * open instances so an unrelated menu closing cannot clear the flag for a menu that is still open.
+	 * @returns {boolean}
+	 */
+	get selectMenuOn() {
+		return this.#openSelectMenus.size > 0;
+	}
+
+	/**
+	 * @internal
+	 * @description `SelectMenu` open-state notification. Called by `SelectMenu.open()` / `.close()`.
+	 * @param {*} instance The `SelectMenu` instance changing state
+	 * @param {boolean} open `true` on open, `false` on close
+	 */
+	setSelectMenuOpen(instance, open) {
+		if (open) this.#openSelectMenus.add(instance);
+		else this.#openSelectMenus.delete(instance);
+	}
+
 	/**
 	 * @description Set editor frame styles.
 	 * - Define the style of the edit area
@@ -291,12 +316,6 @@ 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'));
-			}
-
 			if (this.#store.mode.isBalloon) this.#$.toolbar._showBalloon();
 			else if (this.#store.mode.isSubBalloon) this.#$.subToolbar._showBalloon();
 		} catch (e) {
@@ -614,7 +633,7 @@ class UIManager {
 				rt.get('blockHandle'),
 				rt.get('blockHandlePlus'),
 				rt.get('blockHandleDrag'),
-				blockHandleOpt.menu,
+				blockHandleOpt,
 			);
 		}
 	}
@@ -783,20 +802,6 @@ 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
@@ -954,7 +959,12 @@ class UIManager {
 		this._updatePlaceholder(fc);
 		// document type page
 		if (fc.has('documentType_use_page')) {
-			fc.get('documentTypePageMirror').innerHTML = fc.get('wysiwyg').innerHTML;
+			const mirror = fc.get('documentTypePageMirror');
+			const frag = mirror.ownerDocument.createDocumentFragment();
+			for (let n = fc.get('wysiwyg').firstChild; n; n = n.nextSibling) {
+				frag.appendChild(n.cloneNode(true));
+			}
+			mirror.replaceChildren(frag);
 			fc.get('documentType').rePage(true);
 		}
 	}

package/src/core/schema/options.js

@@ -71,6 +71,7 @@ export const DEFAULTS = {
 		'@text': 'font-family|font-size|color|background-color|width|height',
 		'@line': 'text-align|margin|margin-left|margin-right|line-height',
 		'@component': 'width|height|min-width',
+		li: 'font-family|font-size|color|background-color|font-weight|font-style',
 		'table|th|td':
 			'border|border-[a-z]+|color|background-color|text-align|float|font-weight|text-decoration|font-style|vertical-align',
 		'table|td': 'width',
@@ -327,9 +328,25 @@ export const DEFAULTS = {
  *   menu: [
  *     'p', 'heading', 'blockStyle',
  *     { title: 'Duplicate', icon: 'copy', action: ($, { block }) => block.after(block.cloneNode(true)) },
+ *     // `'table'` as a string opens the size picker; a custom item inserts a default table directly
+ *     { title: 'Table', icon: 'table', action: ($) => $.plugins.table.insert(3, 3) },
  *   ],
  * }
  * ```
+ * @property {string} [blockHandle.maxHeight=""] - Max height of the menu list. Any CSS length; the list scrolls past it.
+ * - Unset by default: the menu grows with its items and is only clamped when it would overflow the viewport.
+ * @property {string} [blockHandle.minWidth="200px"] - Min width of the menu.
+ * @property {function(SunEditor.Deps, { block: HTMLElement, openMenu: function(): void }): void} [blockHandle.onPlusClick] - Runs after the plus button inserted a new line.
+ * - Adding the line is fixed behavior; this hook decides what happens next. Nothing does by default.
+ * - `block` is the new line, already focused. `openMenu()` opens the block handle's own `menu`.
+ * ```js
+ * blockHandle: {
+ *   // open the block handle menu
+ *   onPlusClick: ($, { openMenu }) => openMenu(),
+ *   // ...or the slash command menu
+ *   onPlusClick: ($, { block }) => $.plugins.slashCommand.open(block),
+ * }
+ * ```
  * @property {string} [type=""] - Editor type. Use `"document"` for a document-style layout, with optional sub-types after `:`.
  * ```js
  * // type
@@ -441,7 +458,7 @@ export const DEFAULTS = {
  * - Value is a pipe-delimited list of allowed style names.
  * - Resolution order when filtering an element: `@component` (for `.se-component` containers) → explicit tag entry → `@line` (for formatLine elements) → `@text` (for textStyleTags).
  * - `@component` guards the inline sizing (`width`/`height`/`min-width`) the editor writes on a media component's container for percentage-based sizes; keep these so a clean() round-trip does not reset the component to full width.
- * - An explicit tag entry **replaces** the category default — include category styles in the value if you want both.
+ * - An explicit tag entry is **merged** with its category default when the tag belongs to one (`@line` for formatLine elements, else `@text` for textStyleTags) — the entry adds styles on top of the category's.
  * - Merged with {@link DEFAULTS.TAG_STYLES}; user-supplied keys win.
  * ```js
  * {
@@ -449,8 +466,8 @@ export const DEFAULTS = {
  *     '@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',
+ *      div: 'color',                                 // merged with the `@line` default (div is a line element)
+ *      hr: 'border-top',
  *   }
  * }
  * ```

package/src/core/section/constructor.js

@@ -44,12 +44,16 @@ function Constructor(editorTargets, options) {
 	if (options.plugins) {
 		const excludedPlugins = options.excludedPlugins || [];
 		const originPlugins = options.plugins;
-		const pluginsValues = (Array.isArray(originPlugins) ? originPlugins : Object.keys(originPlugins))
-			.filter((name) => !excludedPlugins.includes(name))
-			.map((name) => originPlugins[name]);
-
-		for (let i = 0, len = pluginsValues.length, p; i < len; i++) {
-			p = pluginsValues[i].default || pluginsValues[i];
+		const pluginsEntries = Array.isArray(originPlugins)
+			? originPlugins.map((plugin) => [null, plugin])
+			: Object.keys(originPlugins).map((name) => [name, originPlugins[name]]);
+
+		for (let i = 0, len = pluginsEntries.length, name, p; i < len; i++) {
+			name = pluginsEntries[i][0];
+			p = pluginsEntries[i][1];
+			p = p?.default || p;
+			if (!p?.key) continue;
+			if (excludedPlugins.includes(p.key) || (name !== null && excludedPlugins.includes(name))) continue;
 			plugins[p.key] = p;
 		}
 	}
@@ -921,7 +925,7 @@ export function InitOptions(options, editorTargets, plugins) {
 				'toolbar_sub_width',
 				subbar.width ? (numbers.is(subbar.width) ? subbar.width + 'px' : subbar.width) : 'auto',
 			);
-			subButtons = o.get('_rtl') ? subbar.buttonList.reverse() : subbar.buttonList;
+			subButtons = subbar.buttonList;
 			o.set('buttons_sub', new Set(subButtons.toString().split(',')));
 		}
 	}
@@ -1054,7 +1058,7 @@ export function InitOptions(options, editorTargets, plugins) {
 		i: icons,
 		l: /** @type {Object<string, string>} */ (options.lang || _defaultLang),
 		v: (options.value = typeof options.value === 'string' ? options.value : null),
-		buttons: o.get('_rtl') ? buttonList.reverse() : buttonList,
+		buttons: buttonList,
 		subButtons: subButtons,
 		statusbarContainer:
 			typeof options.statusbar_container === 'string'

package/src/events.js

@@ -17,7 +17,7 @@
  * @property {Event} event - event object
  * @property {string} data - drop data
  * @property {boolean} maxCharCount - is max char count
- * @property {string} from - `"SE"`|`"MS"`|`""` - source
+ * @property {string} from - `"SE"`|`"MS"`|`"GOOGLE"`|`""` - source
  */
 
 // --- media