suneditor 3.0.0-beta.3 → 3.0.0-beta.30

package/src/plugins/popup/anchor.js

@@ -22,6 +22,9 @@ class Anchor extends EditorInjector {
 		return dom.check.isAnchor(node) && node.hasAttribute('id') && node.hasAttribute('data-se-anchor') ? node : null;
 	}
 
+	#element;
+	#range;
+
 	/**
 	 * @constructor
 	 * @param {__se__EditorCore} editor - The root editor instance
@@ -36,8 +39,6 @@ class Anchor extends EditorInjector {
 		const parser = new DOMParser();
 		const svgDoc = parser.parseFromString(this.icons.bookmark_anchor, 'image/svg+xml');
 		this.bookmarkIcon = svgDoc.documentElement;
-		this._element = null;
-		this._range = null;
 
 		// controller
 		const controllerSelectEl = CreateHTML_controller_select(this);
@@ -47,6 +48,9 @@ class Anchor extends EditorInjector {
 		const controllerEl = CreateHTML_controller(this);
 		this.inputEl = controllerEl.querySelector('input');
 		this.controller = new Controller(this, controllerEl, { position: 'bottom', disabled: true, parents: [this.controllerSelect.form], parentsHide: true }, Anchor.key);
+
+		this.#element = null;
+		this.#range = null;
 	}
 
 	/**
@@ -54,7 +58,7 @@ class Anchor extends EditorInjector {
 	 * @description Displays a popup and gives focus to the input field.
 	 */
 	show() {
-		this.controller.open((this._range = this.selection.getRange()));
+		this.controller.open((this.#range = this.selection.getRange()));
 		_w.setTimeout(() => {
 			this.inputEl.focus();
 		}, 0);
@@ -66,7 +70,7 @@ class Anchor extends EditorInjector {
 	 * @param {HTMLElement} target Target component element
 	 */
 	select(target) {
-		this._element = target;
+		this.#element = target;
 		this.displayId.textContent = target.getAttribute('id');
 		this.controllerSelect.open(target);
 	}
@@ -76,7 +80,7 @@ class Anchor extends EditorInjector {
 	 * @description Called when a container is deselected.
 	 */
 	deselect() {
-		this._init();
+		this.#init();
 	}
 
 	/**
@@ -87,10 +91,12 @@ class Anchor extends EditorInjector {
 	controllerAction(target) {
 		const command = target.getAttribute('data-command');
 		if (!command) return;
-		const currentElement = this._element;
+		const currentElement = this.#element;
 
 		switch (command) {
 			case 'submit': {
+				this.controller.close();
+
 				if (!currentElement) {
 					const id = this.inputEl.value.trim();
 					if (!id) {
@@ -106,7 +112,7 @@ class Anchor extends EditorInjector {
 						class: 'se-component se-inline-component'
 					});
 
-					this.component.insert(a, { skipCharCount: false, skipSelection: true, skipHistory: false });
+					this.component.insert(a, { insertBehavior: 'none', scrollTo: false });
 
 					const r = this.selection.getNearRange(a);
 					if (r) {
@@ -114,22 +120,22 @@ class Anchor extends EditorInjector {
 					} else {
 						this.component.select(a, Anchor.key);
 					}
-					this._init();
+
+					this.#init();
 				} else {
-					this.controller.close();
 					currentElement.id = this.inputEl.value;
-					this.select(currentElement);
+					this.component.select(currentElement, Anchor.key);
 				}
 
 				break;
 			}
 			case 'cancel': {
 				this.controller.close(!currentElement);
-				if (this._range) {
-					this.selection.setRange(this._range);
+				if (this.#range) {
+					this.selection.setRange(this.#range);
 				}
 
-				this._init();
+				this.#init();
 				if (currentElement) {
 					this.select(currentElement);
 				}
@@ -140,6 +146,7 @@ class Anchor extends EditorInjector {
 				this.inputEl.value = this.displayId.textContent;
 				this.controllerSelect.hide();
 				this.controller.open(currentElement);
+				this.inputEl.focus();
 
 				break;
 			}
@@ -153,7 +160,7 @@ class Anchor extends EditorInjector {
 					this.selection.setRange(r.container, r.offset, r.container, r.offset);
 				}
 
-				this._init();
+				this.#init();
 
 				break;
 			}
@@ -161,13 +168,12 @@ class Anchor extends EditorInjector {
 	}
 
 	/**
-	 * @private
 	 * @description Initializes state variables.
 	 * - called when the popup is closed
 	 */
-	_init() {
-		this._element = null;
-		this._range = null;
+	#init() {
+		this.#element = null;
+		this.#range = null;
 		this.inputEl.value = '';
 		this.displayId.textContent = '';
 	}

package/src/suneditor.js

@@ -1,47 +1,85 @@
 import Editor from './core/editor';
 
-import EditorInjector from './editorInjector';
-import Plugins from './plugins';
-import Langs from './langs';
-import Modules from './modules';
-import Helper from './helper';
+import plugins from './plugins';
+import modules from './modules';
+import helper from './helper';
+import langs from './langs';
 
 /**
  * @module SunEditorExports
  */
+export { plugins, modules, helper, langs };
+
+// ================================================================================================================================
+// === TYPE DEFINITIONS
+// ================================================================================================================================
+
+// [[ editor root ]]
+/**
+ * Editor initialization options.
+ * Used when creating a new editor instance via `SunEditor.create()`.
+ * @typedef {__se__EditorOptions} SunEditorOptions
+ */
 
 /**
- * @typedef {import('./core/section/constructor').EditorFrameOptions} EditorFrameOptions_suneditor
+ * Frame-specific options for multi-root editors.
+ * Each frame can have its own width, height, placeholder, and other frame-level settings.
+ * @typedef {__se__EditorFrameOptions} SunEditorFrameOptions
  */
 
 /**
- * @typedef {import('./core/section/constructor').EditorInitOptions} EditorInitOptions_suneditor
+ * Type definition for the SunEditor instance.
+ * This is the return type of `SunEditor.create()`.
+ * @typedef {__se__EditorCore} SunEditorCore
  */
 
+// [[ component ]]
 /**
- * Editor Injector module, Inject "editor" and basic frequently used objects by calling it with "call(this, editor)".
+ * Information about a component (image, video, table, etc.) in the editor.
+ * Contains properties like target element, plugin name, options, and container references.
+ * @typedef {__se__ComponentInfo} SunEditorComponentInfo
  */
-export { EditorInjector };
 
+// [[ plugin event ]]
 /**
- * Available editor plugins
+ * Parameters passed to plugin mouse event handlers.
+ * Includes the frame context and the mouse event object.
+ * @typedef {__se__PluginMouseEventInfo} SunEditorPluginMouseEvent
  */
-export { Plugins };
 
 /**
- * Editor modules
+ * Parameters passed to plugin keyboard event handlers.
+ * Includes the frame context, keyboard event, current range, and line element.
+ * @typedef {__se__PluginKeyEventInfo} SunEditorPluginKeyEvent
  */
-export { Modules };
 
 /**
- * Language packs for the editor
+ * Parameters passed when a toolbar input value changes.
+ * Includes the target input element, event object, and the new value.
+ * @typedef {__se__PluginToolbarInputChangeEventInfo} SunEditorPluginToolbarInputChange
  */
-export { Langs };
 
 /**
- * Helper functions for the editor
+ * Information passed to shortcut handlers.
+ * Includes range, line element, shortcut info, event object, and key code.
+ * @typedef {__se__PluginShortcutInfo} SunEditorPluginShortcut
  */
-export { Helper };
+
+/**
+ * Parameters passed to plugin paste event handlers.
+ * Includes frame context, clipboard event, cleaned HTML data, and parsed document.
+ * @typedef {__se__PluginPasteParams} SunEditorPluginPaste
+ */
+
+/**
+ * Parameters passed when copying a component.
+ * Includes the clipboard event, cloned container, and component info.
+ * @typedef {__se__PluginCopyComponentParams} SunEditorPluginCopyComponent
+ */
+
+// ================================================================================================================================
+// === SUNEDITOR FACTORY
+// ================================================================================================================================
 
 /**
  * SunEditor Factory Object
@@ -51,8 +89,8 @@ export default {
 	/**
 	 * Returns the create function with preset options.
 	 * If the options overlap, the options of the 'create' function take precedence.
-	 * @param {EditorInitOptions_suneditor} init_options - Initialization options
-	 * @returns {{create: (targets: Element|Object<string, {target: Element, options: EditorFrameOptions_suneditor}>, options: EditorInitOptions_suneditor) => Editor}}}
+	 * @param {SunEditorOptions} init_options - Initialization options
+	 * @returns {{create: (targets: Element|Object<string, {target: Element, options: SunEditorFrameOptions}>, options: SunEditorOptions) => Editor}}}
 	 */
 	init(init_options) {
 		return {
@@ -62,9 +100,12 @@ export default {
 
 	/**
 	 * Creates a new instance of the SunEditor
-	 * @param {Element|Object<string, {target: Element, options: EditorFrameOptions_suneditor}>} target - Target element or multi-root object
-	 * @param {EditorInitOptions_suneditor} options - Initialization options
-	 * @param {EditorInitOptions_suneditor} [_init_options] - Optional preset initialization options
+	 * @param {Element|string|Object<string, {target: Element, options: SunEditorFrameOptions}>} target
+	 * - Element: The direct DOM element to initialize the editor on.
+	 * - string: A CSS selector string. The corresponding element is selected using `document.querySelector`.
+	 * - Object: For multi-root setup. Each key maps to a config with `{target, options}`.
+	 * @param {SunEditorOptions} options - Initialization options
+	 * @param {SunEditorOptions} [_init_options] - Optional preset initialization options
 	 * @returns {Editor} - Instance of the SunEditor
 	 * @throws {Error} If the target element is not provided or is invalid
 	 */
@@ -87,10 +128,14 @@ export default {
 			})();
 		}
 
-		if (!target) throw Error("[SUNEDITOR.create.fail] suneditor requires textarea's element");
+		if (!target) throw Error('[SUNEDITOR.create.fail] The first parameter "target" is missing.');
 
 		const multiTargets = [];
-		if (target.nodeType === 1) {
+		if (typeof target === 'string') {
+			const t = document.querySelector(target);
+			if (!t) throw Error(`[SUNEDITOR.create.fail]-[document.querySelector(${target})] Cannot find target element. Make sure "${target}" is a valid selector and exists in the document.`);
+			multiTargets.push({ key: null, target: t });
+		} else if (target.nodeType === 1) {
 			multiTargets.push({ key: null, target: target });
 		} else {
 			let props;

package/src/typedef.js

@@ -10,16 +10,39 @@
 // --------------------------------------------------------- [Editor] ---------------------------------------------------------------------------------------------------
 /**
  * @typedef {import('./core/editor').default} __se__EditorCore
+ * @typedef {import('./editorInjector').default} __se__EditorInjector
  */
 
+// --------------------------------------------------------- [Options] ---------------------------------------------------------------------------------------------------
 /**
- * @typedef {import('./editorInjector').default} __se__EditorInjector
+ * @typedef {import('./core/config/options').EditorInitOptions} __se__EditorOptions
+ * @typedef {import('./core/config/options').EditorFrameOptions} __se__EditorFrameOptions
+ */
+
+// --------------------------------------------------------- [Context] ---------------------------------------------------------------------------------------------------
+/**
+ * @typedef {import('./core/config/frameContext').FrameContextUtil} __se__FrameContext
+ * @typedef {Map<keyof import('./core/config/context').ContextUtil, *>} __se__Context
  */
 
+// --------------------------------------------------------- [Editor Status] ---------------------------------------------------------------------------------------------------
 /**
- * @typedef {import('./editorInjector/_core').default} __se__CoreInjector
+ * @typedef {Object} __se__EditorStatus
+ * @property {boolean} hasFocus Boolean value of whether the editor has focus
+ * @property {number} tabSize Indent size of tab (4)
+ * @property {number} indentSize Indent size (25)px
+ * @property {number} codeIndentSize Indent size of Code view mode (2)
+ * @property {Array<string>} currentNodes  An element array of the current cursor's node structure
+ * @property {Array<string>} currentNodesMap  An element name array of the current cursor's node structure
+ * @property {number} currentViewportHeight Current visual viewport height size
+ * @property {number} initViewportHeight Height of the initial visual viewport height size
+ * @property {boolean} onSelected Boolean value of whether component is selected
+ * @property {*} rootKey Current root key
+ * @property {Range} _range Current range object
+ * @property {boolean} _onMousedown Mouse down event status
  */
 
+// --------------------------------------------------------- [component] ---------------------------------------------------------------------------------------------------
 /**
  * @typedef {Object} __se__ComponentInfo
  * @property {HTMLElement} target - The target element associated with the component.
@@ -35,17 +58,14 @@
  */
 
 /**
- * @typedef {Object} __se__EditorStatus
- * @property {boolean} hasFocus Boolean value of whether the editor has focus
- * @property {number} tabSize Indent size of tab (4)
- * @property {number} indentSize Indent size (25)px
- * @property {number} codeIndentSize Indent size of Code view mode (2)
- * @property {Array<string>} currentNodes  An element array of the current cursor's node structure
- * @property {Array<string>} currentNodesMap  An element name array of the current cursor's node structure
- * @property {boolean} onSelected Boolean value of whether component is selected
- * @property {number} rootKey Current root key
- * @property {Range} _range Current range object
- * @property {boolean} _onMousedown Mouse down event status
+ * @typedef {"auto"|"select"|"line"|"none"} __se__ComponentInsertBehaviorType
+ * @description Component insertion behavior for selection and cursor placement.
+ * - For inline components: places the cursor near the inserted component or selects it if no nearby range is available.
+ * - For block components: executes behavior based on `selectMode`:
+ *    - `auto`: Move cursor to the next line if possible, otherwise select the component.
+ *    - `select`: Always select the inserted component.
+ *    - `line`: Move cursor to the next line if possible, or create a new line and move there.
+ *    - `none`: Do nothing.
  */
 
 // --------------------------------------------------------- [Event] ---------------------------------------------------------------------------------------------------
@@ -111,20 +131,23 @@
  * @property {__se__ComponentInfo} info Component information
  */
 
-// --------------------------------------------------------- [Context] ---------------------------------------------------------------------------------------------------
+// --------------------------------------------------------- [Options Map] ---------------------------------------------------------------------------------------------------
 /**
- * @typedef {Map<string, *>} __se__FrameOptions
+ * @typedef {import('./core/config/options').FrameOptionsMap} __se__FrameOptions
+ * @typedef {import('./core/config/options').BaseOptionsMap} __se__BaseOptions
  */
 
+// --------------------------------------------------------- [core.class] ---------------------------------------------------------------------------------------------------
 /**
- * @typedef {Map<string, *>} __se__FrameContext
+ * @typedef {import('./core/class/offset').OffsetGlobalInfo} __se__Class_OffsetGlobalInfo
  */
 
+// --------------------------------------------------------- [event.reducer/action] ------------------------------------------------------------------------------------------
 /**
- * @typedef {Map<string, *>} __se__Context
+ * @typedef {import('./core/event/reducers/keydown.reducer').KeydownReducerCtx} __se__EventKeydownCtx
  */
 
-// --------------------------------------------------------- [core.class] ---------------------------------------------------------------------------------------------------
 /**
- * @typedef {import('./core/class/offset').OffsetGlobalInfo} __se__Class_OffsetGlobalInfo
+ * @typedef {import('./core/event/actions').Action[]} __se__EventActions
+ * @typedef {import('./core/event/ports').EventReducerPorts} __se__EventPorts
  */

package/types/assets/icons/defaultIcons.d.ts

@@ -41,6 +41,7 @@ declare namespace _default {
 	export let background_color: string;
 	export let list_bulleted: string;
 	export let list_numbered: string;
+	export let list_checked: string;
 	export let table: string;
 	export let table_header: string;
 	export let table_properties: string;
@@ -134,6 +135,13 @@ declare namespace _default {
 	export let side_menu_item: string;
 	export let side_menu_folder_plus: string;
 	export let alert_outline: string;
+	export let more_media: string;
+	export let more_gallery: string;
+	export let more_folder: string;
+	export let more_list: string;
+	export let more_file: string;
+	export let more_view: string;
+	export let more_page: string;
 	export let more_text: string;
 	export let more_paragraph: string;
 	export let more_plus: string;

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

@@ -32,7 +32,7 @@ declare class Char {
 	 * @this {CharThis}
 	 * @description Get the [content]'s number of characters or binary data size. (frameOptions.get('charCounter_type'))
 	 * - If [content] is undefined, get the current editor's number of characters or binary data size.
-	 * @param {string=} content Content to count. (defalut: this.editor.frameContext.get('wysiwyg'))
+	 * @param {string=} content Content to count. (defalut: this.frameContext.get('wysiwyg'))
 	 * @returns {number}
 	 */
 	getLength(this: Omit<Char & Partial<import('../../editorInjector').default>, 'char'>, content?: string | undefined): number;

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

@@ -63,8 +63,6 @@ declare class Component {
 	_bindClose_keydown: __se__GlobalEventInfo | void;
 	/** @type {__se__GlobalEventInfo|void} */
 	_bindClose_mousedown: __se__GlobalEventInfo | void;
-	/** @type {__se__GlobalEventInfo|void} */
-	_bindClose_touchstart: __se__GlobalEventInfo | void;
 	/** @type {boolean} */
 	__selectionSelected: boolean;
 	__prevent: boolean;
@@ -75,8 +73,10 @@ declare class Component {
 	 * @param {Node} element Element to be inserted
 	 * @param {Object} [options] Options
 	 * @param {boolean} [options.skipCharCount=false] If true, it will be inserted even if "frameOptions.get('charCounter_max')" is exceeded.
-	 * @param {boolean} [options.skipSelection=false] If true, do not automatically select the inserted component.
 	 * @param {boolean} [options.skipHistory=false] If true, do not push to history.
+	 * @param {boolean} [options.scrollTo=true] true : Scroll to the inserted element, false : Do not scroll.
+	 * @param {?__se__ComponentInsertBehaviorType} [options.insertBehavior] If true, do not automatically select the inserted component. [default: options.get('componentInsertBehavior')]
+	 * - If null, noting action is performed after insertion.
 	 * @returns {HTMLElement} The inserted element or new line (for HR)
 	 */
 	insert(
@@ -84,14 +84,24 @@ declare class Component {
 		element: Node,
 		{
 			skipCharCount,
-			skipSelection,
-			skipHistory
+			skipHistory,
+			scrollTo,
+			insertBehavior
 		}?: {
 			skipCharCount?: boolean;
-			skipSelection?: boolean;
 			skipHistory?: boolean;
+			scrollTo?: boolean;
+			insertBehavior?: __se__ComponentInsertBehaviorType | null;
 		}
 	): HTMLElement;
+	/**
+	 * @this {ComponentThis}
+	 * @description Handles post-insertion behavior for a newly created component based on the specified mode.
+	 * @param {Node} container The inserted component element.
+	 * @param {Node|null} [oNode] Optional node to use for selection if the component cannot be selected.
+	 * @param {__se__ComponentInsertBehaviorType} [insertBehavior] Behavior mode after component insertion.
+	 */
+	applyInsertBehavior(this: Omit<Component & Partial<import('../../editorInjector').default>, 'component'>, container: Node, oNode?: Node | null, insertBehavior?: __se__ComponentInsertBehaviorType): void;
 	/**
 	 * @this {ComponentThis}
 	 * @description Gets the file component and that plugin name
@@ -156,7 +166,7 @@ declare class Component {
 	 * - This function is different from the one called when the user presses the "Ctrl + C" key combination.
 	 * @param {Node} container The DOM node to check.
 	 */
-	copy(this: Omit<Component & Partial<import('../../editorInjector').default>, 'component'>, container: Node): void;
+	copy(this: Omit<Component & Partial<import('../../editorInjector').default>, 'component'>, container: Node): Promise<void>;
 	/**
 	 * @private
 	 * @this {ComponentThis}
@@ -173,6 +183,18 @@ declare class Component {
 	 * - This method resets the selection state and hides UI elements related to the component selection.
 	 */
 	__deselect(this: Omit<Component & Partial<import('../../editorInjector').default>, 'component'>): void;
+	/**
+	 * @private
+	 * @this {ComponentThis}
+	 * @description
+	 * Attempts to move the cursor to a valid line after the given container.
+	 * - If a valid next sibling line exists, moves the selection there.
+	 * - If no next sibling exists, creates a new line after the container and moves the selection there.
+	 * - If the next sibling exists but is not a valid line element and cannot create a new line, returns false.
+	 * @param {Node} container The component container element.
+	 * @returns {boolean} Returns true if the selection moved to a line (existing or newly created), otherwise false.
+	 */
+	__moveToNextLineOrAdd(this: Omit<Component & Partial<import('../../editorInjector').default>, 'component'>, container: Node): boolean;
 	/**
 	 * @private
 	 * @this {ComponentThis}