suneditor 3.0.0-beta.2 → 3.0.0-beta.3

package/src/events.js

@@ -161,12 +161,24 @@ export default {
 	 */
 	onFocus: null,
 
+	/**
+	 * @description Event call back function
+	 * @param {BaseEvent} params
+	 */
+	onNativeFocus: null,
+
 	/**
 	 * @description Event call back function
 	 * @param {BaseEvent} params
 	 */
 	onBlur: null,
 
+	/**
+	 * @description Event call back function
+	 * @param {BaseEvent} params
+	 */
+	onNativeBlur: null,
+
 	/**
 	 * @description Event function on copy
 	 * @param {Object} params

package/src/helper/converter.js

@@ -170,6 +170,26 @@ export function syncMaps(targetMap, referenceMap) {
 	});
 }
 
+/**
+ * @description Merges multiple Map objects into a new Map using spread syntax.
+ * - Entries from later maps in the arguments list will overwrite entries from earlier maps if keys conflict.
+ * - The original maps are not modified.
+ * @param {...Map<*, *>} mapsToMerge - An arbitrary number of Map objects to merge.
+ * @returns {Map<*, *>} A new Map containing all entries from the input maps.
+ */
+export function mergeMaps(...mapsToMerge) {
+	const validMaps = mapsToMerge.filter((m) => {
+		if (!(m instanceof Map)) {
+			return false;
+		}
+		return true;
+	});
+
+	const allEntries = validMaps.flatMap((map) => [...map]);
+
+	return new Map(allEntries);
+}
+
 /**
  * @description Object.values
  * @param {Object<*, *>} obj Object parameter.
@@ -269,8 +289,9 @@ export function nodeListToArray(nodeList) {
 export function swapKeyValue(obj) {
 	const swappedObj = {};
 
+	const hasOwn = Object.prototype.hasOwnProperty;
 	for (const key in obj) {
-		if (Object.prototype.hasOwnProperty.call(obj, key)) {
+		if (hasOwn.call(obj, key)) {
 			swappedObj[obj[key]] = key;
 		}
 	}
@@ -542,6 +563,7 @@ const converter = {
 	entityToHTML,
 	debounce,
 	syncMaps,
+	mergeMaps,
 	getValues,
 	camelToKebabCase,
 	kebabToCamelCase,

package/src/helper/dom/domCheck.js

@@ -179,7 +179,7 @@ export function isContentLess(node) {
 export function isEmptyLine(node) {
 	if (!node?.parentNode) return true;
 	const el = /** @type {HTMLElement} */ (node);
-	return !el.querySelector('IMG, IFRAME, AUDIO, VIDEO, CANVAS, TABLE') && el.children.length === 0 && check.isZeroWidth(el.textContent);
+	return !el.querySelector('IMG, IFRAME, AUDIO, VIDEO, CANVAS, TABLE') && (el.children.length <= 1 || isBreak(el.firstElementChild)) && isZeroWidth(el.textContent);
 }
 
 /**
@@ -188,7 +188,7 @@ export function isEmptyLine(node) {
  * @returns {node is HTMLElement}
  */
 export function isWysiwygFrame(node) {
-	return node?.nodeType === 1 && (domUtils.hasClass(node, 'se-wrapper-wysiwyg|sun-editor-carrier-wrapper') || /^BODY$/i.test(node.nodeName));
+	return node?.nodeType === 1 && (domUtils.hasClass(node, 'se-wrapper-wysiwyg|sun-editor-carrier-wrapper|se-wrapper') || /^BODY$/i.test(node.nodeName));
 }
 
 /**

package/src/modules/Controller.js

@@ -108,10 +108,12 @@ class Controller extends EditorInjector {
 		if (this.editor.isBalloon) this.toolbar.hide();
 		else if (this.editor.isSubBalloon) this.subToolbar.hide();
 
-		if (disabled ?? this.disabled) {
-			this.ui.setControllerOnDisabledButtons(true);
-		} else {
-			this.ui.setControllerOnDisabledButtons(false);
+		if (!this.status.hasFocus) {
+			if (disabled ?? this.disabled) {
+				this.ui.setControllerOnDisabledButtons(true);
+			} else {
+				this.ui.setControllerOnDisabledButtons(false);
+			}
 		}
 
 		this.currentPositionTarget = positionTarget || target;
@@ -429,6 +431,7 @@ class Controller extends EditorInjector {
 		if (this.form.contains(eventTarget) || this._checkForm(eventTarget)) return;
 		if (this.editor._fileManager.pluginRegExp.test(this.kind) && !keyCodeMap.isEsc(keyCode)) return;
 
+		this.#PostCloseEvent(eventTarget);
 		this.close();
 	}
 
@@ -443,12 +446,29 @@ class Controller extends EditorInjector {
 		}
 
 		this.isOpen = true;
-		if (eventTarget === this.inst._element || eventTarget === this.currentTarget || this._checkFixed() || this.form.contains(eventTarget) || this._checkForm(eventTarget)) {
+		if (
+			eventTarget === this.inst._element ||
+			eventTarget === this.currentTarget ||
+			this._checkFixed() ||
+			this.form.contains(eventTarget) ||
+			this._checkForm(eventTarget) ||
+			dom.query.getParentElement(eventTarget, '.se-line-breaker-component')
+		) {
 			return;
 		}
 
+		this.#PostCloseEvent(eventTarget);
 		this.close(true);
 	}
+
+	/**
+	 * @param {HTMLElement} eventTarget - The target element that triggered the event.
+	 */
+	#PostCloseEvent(eventTarget) {
+		if (!this.editor.frameContext.get('wysiwyg').contains(eventTarget)) {
+			this.component.__prevent = false;
+		}
+	}
 }
 
 export default Controller;

package/src/plugins/dropdown/formatBlock.js

@@ -1,15 +1,6 @@
 import EditorInjector from '../../editorInjector';
 import { dom } from '../../helper';
 
-const HEADER_KEYCODE = new Map([
-	['Digit1', 'h1'],
-	['Digit2', 'h2'],
-	['Digit3', 'h3'],
-	['Digit4', 'h4'],
-	['Digit5', 'h5'],
-	['Digit6', 'h6']
-]);
-
 /**
  * @class
  * @description FormatBlock Plugin (P, BLOCKQUOTE, PRE, H1, H2...)
@@ -125,12 +116,12 @@ class FormatBlock extends EditorInjector {
 
 	/**
 	 * @description Create a header tag, call by "shortcut" class
-	 * - (e.g. shortcuts._h1: ['c+s+49+p~formatBlock.createHeader', ''])
+	 * - (e.g. shortcuts._h1: ['c+s+49+$~formatBlock.applyHeaderByShortcut', ''])
 	 * @param {__se__PluginShortcutInfo} params - Information of the "shortcut" plugin
 	 */
-	createHeader({ keyCode }) {
-		const headerName = HEADER_KEYCODE.get(keyCode);
-		const tag = dom.utils.createElement(headerName);
+	applyHeaderByShortcut({ keyCode }) {
+		const headerNum = keyCode.match(/\d+$/)?.[0];
+		const tag = dom.utils.createElement(`H${headerNum}`);
 		this.format.setLine(tag);
 	}
 }

package/src/themes/dark.css

@@ -38,8 +38,18 @@
 	--se-statusbar-font-color: #aaa;
 	--se-overlay-background-color: #111;
 
-	/* hover, active */
+	/* hover */
+	--se-hover-color: #0d200c;
+	--se-hover-dark-color: #8192a3;
+	--se-hover-dark2-color: #738495;
+	--se-hover-dark3-color: #667788;
+	--se-hover-light-color: #9ab0c5;
+	--se-hover-light2-color: #adc2d7;
+	--se-hover-light3-color: #c0d3e5;
+
+	/* active */
 	--se-active-color: #5cd2e6;
+	--se-active-hover-color: #6de9f5;
 	--se-active-dark-color: #3bb9cd;
 	--se-active-dark2-color: #2a9fb1;
 	--se-active-dark3-color: #5cd2e6;

package/types/core/base/eventManager.d.ts

@@ -382,4 +382,20 @@ declare class EventManager {
 	 * @param {*} range Range object
 	 */
 	__enterScrollTo(this: Omit<EventManager & Partial<import('../../editorInjector').default>, 'eventManager'>, range: any): void;
+	/**
+	 * @private
+	 * @description Focus Event Postprocessing
+	 * @this {EventManagerThis}
+	 * @param {__se__FrameContext} frameContext - frame context object
+	 * @param {Event} event - Event object
+	 */
+	__postFocusEvent(this: Omit<EventManager & Partial<import('../../editorInjector').default>, 'eventManager'>, frameContext: __se__FrameContext, event: Event): void;
+	/**
+	 * @private
+	 * @description Blur Event Postprocessing
+	 * @this {EventManagerThis}
+	 * @param {__se__FrameContext} frameContext - frame context object
+	 * @param {Event} event - Event object
+	 */
+	__postBlurEvent(this: Omit<EventManager & Partial<import('../../editorInjector').default>, 'eventManager'>, frameContext: __se__FrameContext, event: Event): void;
 }

package/types/core/class/char.d.ts

@@ -46,8 +46,9 @@ declare class Char {
 	/**
 	 * @this {CharThis}
 	 * @description Set the char count to charCounter element textContent.
+	 * @param {?__se__FrameContext=} fc Frame context
 	 */
-	display(this: Omit<Char & Partial<import('../../editorInjector').default>, 'char'>): void;
+	display(this: Omit<Char & Partial<import('../../editorInjector').default>, 'char'>, fc?: (__se__FrameContext | null) | undefined): void;
 	/**
 	 * @this {CharThis}
 	 * @description Returns false if char count is greater than "frameOptions.get('charCounter_max')" when "inputText" is added to the current editor.

package/types/core/class/component.d.ts

@@ -67,6 +67,7 @@ declare class Component {
 	_bindClose_touchstart: __se__GlobalEventInfo | void;
 	/** @type {boolean} */
 	__selectionSelected: boolean;
+	__prevent: boolean;
 	/**
 	 * @this {ComponentThis}
 	 * @description Inserts an element and returns it. (Used for elements: table, hr, image, video)

package/types/core/class/format.d.ts

@@ -49,7 +49,7 @@ declare class Format {
 	_formatClosureBlockCheck: any;
 	_formatClosureBrLineCheck: any;
 	_textStyleTagsCheck: RegExp;
-	_brLineBreak: any;
+	_brLineBreak: boolean;
 	/**
 	 * @this {FormatThis}
 	 * @description Replace the line tag of the current selection.
@@ -613,4 +613,11 @@ declare class Format {
 	 * @param {Array|null} styleArray Refer style array
 	 */
 	_sn_resetCommonListCell(this: Omit<Format & Partial<import('../../editorInjector').default>, 'format'>, el: Node, styleArray: any[] | null): boolean;
+	/**
+	 * @private
+	 * @this {FormatThis}
+	 * @description Reset the line break format.
+	 * @param {"line"|"br"} breakFormat options.get('defaultLineBreakFormat')
+	 */
+	__resetBrLineBreak(this: Omit<Format & Partial<import('../../editorInjector').default>, 'format'>, breakFormat: 'line' | 'br'): void;
 }

package/types/core/class/html.d.ts

@@ -419,4 +419,12 @@ declare class HTML {
 	 * @returns {Node} The cleaned node with redundant styles removed.
 	 */
 	_dupleCheck(this: Omit<HTML & Partial<import('../../editorInjector').default>, 'html'>, oNode: Node, parentNode: Node): Node;
+	/**
+	 * @private
+	 * @this {HTMLThis}
+	 * @description Reset autoStyleify options.
+	 * @param {Array.<string>} autoStyleify Styles applied automatically on text input.
+	 * - ex ["bold", "underline", "italic", "strike"]
+	 */
+	__resetAutoStyleify(this: Omit<HTML & Partial<import('../../editorInjector').default>, 'html'>, autoStyleify: Array<string>): void;
 }

package/types/core/class/ui.d.ts

@@ -38,7 +38,7 @@ declare class UI {
 	_toastToggle: number;
 	/**
 	 * @this {UIThis}
-	 * @description Set "options.get('editorStyle')" style.
+	 * @description set editor frame styles.
 	 * - Define the style of the edit area
 	 * - It can also be defined with the "setOptions" method, but the "setEditorStyle" method does not render the editor again.
 	 * @param {string} style Style string

package/types/core/editor.d.ts

@@ -333,10 +333,15 @@ declare class Editor {
 	 */
 	_notHideToolbar: boolean;
 	/**
-	 * @description Variables for controlling focus and blur events
+	 * @description Variables for controlling blur events
 	 * @type {boolean}
 	 */
 	_preventBlur: boolean;
+	/**
+	 * @description Variables for controlling focus events
+	 * @type {boolean}
+	 */
+	_preventFocus: boolean;
 	/**
 	 * @description Variables for controlling selection change events
 	 */
@@ -570,7 +575,7 @@ declare class Editor {
 	__saveCommandButtons(cmdButtons: Map<string, Element>, tray: Element): void;
 	/**
 	 * @private
-	 * @description Caches shortcut keys for commands.
+	 * @description Caches custom(starts with "_") shortcut keys for commands.
 	 */
 	__cachingShortcuts(): void;
 	/**

package/types/core/section/constructor.d.ts

@@ -266,6 +266,13 @@ export function CreateToolBar(
 /**
  * @typedef {EditorBaseOptions & EditorFrameOptions} EditorInitOptions
  */
+/** ------------- [OPTIONS FRAG] ------------- */
+/**
+ * @description For all EditorInitOptions keys, only boolean | null values are allowed.
+ * - 'fixed' → Immutable / null → Resettable.
+ * @type {Partial<Record<keyof EditorInitOptions, "fixed" | true>>}
+ */
+export const OPTION_FRAME_FIXED_FLAG: Partial<Record<keyof EditorInitOptions, 'fixed' | true>>;
 /**
  * @description For all EditorInitOptions keys, only boolean | null values are allowed.
  * - 'fixed' → Immutable / null → Resettable.

package/types/events.d.ts

@@ -8,7 +8,9 @@ declare namespace _default {
 	let onKeyDown: any;
 	let onKeyUp: any;
 	let onFocus: any;
+	let onNativeFocus: any;
 	let onBlur: any;
+	let onNativeBlur: any;
 	let onCopy: any;
 	let onCut: any;
 	let onChange: any;

package/types/helper/converter.d.ts

@@ -44,6 +44,14 @@ export function debounce(func: (...args: any) => void, wait: number): any;
  * @param {Map<*, *>} referenceMap The Map providing the reference values (source).
  */
 export function syncMaps(targetMap: Map<any, any>, referenceMap: Map<any, any>): void;
+/**
+ * @description Merges multiple Map objects into a new Map using spread syntax.
+ * - Entries from later maps in the arguments list will overwrite entries from earlier maps if keys conflict.
+ * - The original maps are not modified.
+ * @param {...Map<*, *>} mapsToMerge - An arbitrary number of Map objects to merge.
+ * @returns {Map<*, *>} A new Map containing all entries from the input maps.
+ */
+export function mergeMaps(...mapsToMerge: Map<any, any>[]): Map<any, any>;
 /**
  * @description Object.values
  * @param {Object<*, *>} obj Object parameter.
@@ -177,6 +185,7 @@ declare namespace converter {
 	export { entityToHTML };
 	export { debounce };
 	export { syncMaps };
+	export { mergeMaps };
 	export { getValues };
 	export { camelToKebabCase };
 	export { kebabToCamelCase };

package/types/helper/index.d.ts

@@ -35,6 +35,7 @@ export const converter: {
 	entityToHTML: typeof import('./converter').entityToHTML;
 	debounce: typeof import('./converter').debounce;
 	syncMaps: typeof import('./converter').syncMaps;
+	mergeMaps: typeof import('./converter').mergeMaps;
 	getValues: typeof import('./converter').getValues;
 	camelToKebabCase: typeof import('./converter').camelToKebabCase;
 	kebabToCamelCase: typeof import('./converter').kebabToCamelCase;

package/types/plugins/dropdown/formatBlock.d.ts

@@ -46,9 +46,9 @@ declare class FormatBlock extends EditorInjector {
 	action(target: HTMLElement): void;
 	/**
 	 * @description Create a header tag, call by "shortcut" class
-	 * - (e.g. shortcuts._h1: ['c+s+49+p~formatBlock.createHeader', ''])
+	 * - (e.g. shortcuts._h1: ['c+s+49+$~formatBlock.applyHeaderByShortcut', ''])
 	 * @param {__se__PluginShortcutInfo} params - Information of the "shortcut" plugin
 	 */
-	createHeader({ keyCode }: __se__PluginShortcutInfo): void;
+	applyHeaderByShortcut({ keyCode }: __se__PluginShortcutInfo): void;
 }
 import EditorInjector from '../../editorInjector';