suneditor 3.0.0-beta.9 → 3.0.0-rc.2

package/types/plugins/modal/drawing.d.ts

@@ -1,15 +1,16 @@
+import type {} from '../../typedef';
 export default Drawing;
 export type DrawingPluginOptions = {
 	/**
-	 * - The output format of the drawing. Options: "dataurl", "svg".
+	 * - The output format of the drawing. Options: `"dataurl"`, `"svg"`.
 	 */
 	outputFormat?: string;
 	/**
-	 * - Whether to enable format type selection (block vs inline).
+	 * - Whether to enable format type selection (`block` vs `inline`).
 	 */
 	useFormatType?: boolean;
 	/**
-	 * - The default format type, either "block" or "inline".
+	 * - The default format type, either `"block"` or `"inline"`.
 	 */
 	defaultFormatType?: string;
 	/**
@@ -25,7 +26,7 @@ export type DrawingPluginOptions = {
 	 */
 	lineReconnect?: boolean;
 	/**
-	 * - The style of the line cap ("butt", "round", or "square").
+	 * - The style of the line cap (`"butt"`, `"round"`, or `"square"`).
 	 */
 	lineCap?: CanvasLineCap;
 	/**
@@ -54,13 +55,13 @@ export type DrawingPluginOptions = {
 };
 /**
  * @typedef {Object} DrawingPluginOptions
- * @property {string} [outputFormat="dataurl"] - The output format of the drawing. Options: "dataurl", "svg".
- * @property {boolean} [useFormatType=false] - Whether to enable format type selection (block vs inline).
- * @property {string} [defaultFormatType="block"] - The default format type, either "block" or "inline".
+ * @property {string} [outputFormat="dataurl"] - The output format of the drawing. Options: `"dataurl"`, `"svg"`.
+ * @property {boolean} [useFormatType=false] - Whether to enable format type selection (`block` vs `inline`).
+ * @property {string} [defaultFormatType="block"] - The default format type, either `"block"` or `"inline"`.
  * @property {boolean} [keepFormatType=false] - Whether to maintain the chosen format type after drawing.
  * @property {number} [lineWidth=5] - The width of the drawing line.
  * @property {boolean} [lineReconnect=false] - Whether to reconnect lines when drawing.
- * @property {CanvasLineCap} [lineCap="round"] - The style of the line cap ("butt", "round", or "square").
+ * @property {CanvasLineCap} [lineCap="round"] - The style of the line cap (`"butt"`, `"round"`, or `"square"`).
  * @property {string} [lineColor=""] - The color of the drawing line.
  * @property {boolean} [canResize=true] - Whether the modal form can be resized.
  * @property {boolean} [maintainRatio=true] - Whether to maintain the aspect ratio when resizing.
@@ -76,18 +77,14 @@ export type DrawingPluginOptions = {
  * @class
  * @description Drawing modal plugin.
  */
-declare class Drawing extends EditorInjector {
-	static key: string;
-	static type: string;
-	static className: string;
+declare class Drawing extends PluginModal {
 	/**
 	 * @constructor
-	 * @param {__se__EditorCore} editor - The root editor instance
+	 * @param {SunEditor.Kernel} editor - The core kernel
 	 * @param {DrawingPluginOptions} pluginOptions
 	 */
-	constructor(editor: __se__EditorCore, pluginOptions: DrawingPluginOptions);
+	constructor(editor: SunEditor.Kernel, pluginOptions: DrawingPluginOptions);
 	title: any;
-	icon: string;
 	pluginOptions: {
 		outputFormat: string;
 		useFormatType: boolean;
@@ -139,108 +136,9 @@ declare class Drawing extends EditorInjector {
 	points: any[];
 	paths: any[];
 	resizeObserver: ResizeObserver;
-	__events: {
-		mousedown: any;
-		mousemove: any;
-		mouseup: any;
-		mouseleave: any;
-		mouseenter: any;
-	};
-	__eventsRegister: {
-		mousedown: any;
-		mousemove: any;
-		mouseup: any;
-		mouseleave: any;
-		mouseenter: any;
-	};
-	__eventNameMap: {
-		mousedown: string;
-		mousemove: string;
-		mouseup: string;
-		mouseleave: string;
-		mouseenter: string;
-	};
-	/**
-	 * @editorMethod Modules.Modal
-	 * @description Executes the method that is called when a "Modal" module's is opened.
-	 */
-	open(): void;
-	/**
-	 * @editorMethod Modules.Modal
-	 * @description Executes the method that is called when a plugin's "modal" is closed.
-	 */
-	off(): void;
-	/**
-	 * @editorMethod Modules.Modal
-	 * @description This function is called when a form within a modal window is "submit".
-	 * @returns {boolean} Success or failure
-	 */
-	modalAction(): boolean;
-	/**
-	 * @private
-	 * @description Initializes the drawing canvas, sets up event listeners, and configures resize handling.
-	 */
-	private _initDrawing;
-	/**
-	 * @private
-	 * @description Destroys the drawing canvas, removes event listeners, and clears stored drawing data.
-	 */
-	private _destroyDrawing;
-	/**
-	 * @private
-	 * @description Configures the drawing context (canvas settings like line width, color, etc.).
-	 */
-	private _setCtx;
-	/**
-	 * @private
-	 * @description Draws the current stroke based on collected points.
-	 */
-	private _draw;
-	/**
-	 * @private
-	 * @description Redraws all stored paths onto the canvas.
-	 */
-	private _drawAll;
-	/**
-	 * @private
-	 * @description Adjusts all stored paths to fit new canvas dimensions after a resize event.
-	 * @param {number} prevWidth - The previous width of the canvas.
-	 * @param {number} prevHeight - The previous height of the canvas.
-	 * @param {number} newWidth - The new width of the canvas.
-	 * @param {number} newHeight - The new height of the canvas.
-	 */
-	private _adjustPathsToNewDimensions;
-	/**
-	 * @private
-	 * @description Clears the canvas and resets stored drawing paths.
-	 */
-	private _clearCanvas;
-	/**
-	 * @private
-	 * @description Generates an SVG representation of the drawn content.
-	 * @returns {*} The generated SVG element.
-	 */
-	private _getSVG;
-	/**
-	 * @private
-	 * @description Converts the SVG element into a downloadable file.
-	 * @returns {FileList} A FileList containing the generated SVG file.
-	 */
-	private _getSVGFileList;
-	/**
-	 * @private
-	 * @description Retrieves touch coordinates relative to the canvas.
-	 * @param {TouchEvent} e - The touch event.
-	 * @returns {{x: number, y: number}} An object containing the x and y coordinates.
-	 */
-	private _getCanvasTouchPointer;
-	/**
-	 * @private
-	 * @description Activates either block or inline format mode for inserted drawings.
-	 * @param {boolean} isInline - Whether the drawing should be inserted as an inline element.
-	 */
-	private _activeAsInline;
+	modalOff(isUpdate: boolean): void;
+	modalAction(): Promise<boolean>;
 	#private;
 }
-import EditorInjector from '../../editorInjector';
-import { Modal } from '../../modules';
+import { PluginModal } from '../../interfaces';
+import { Modal } from '../../modules/contract';

package/types/plugins/modal/embed.d.ts

@@ -1,6 +1,5 @@
+import type {} from '../../typedef';
 export default Embed;
-export type ProcessInfo_embed = import('../../events').ProcessInfo;
-export type FigureControls_embed = import('../../modules/Figure').FigureControls;
 export type EmbedPluginOptions = {
 	/**
 	 * - Whether the embed element can be resized.
@@ -41,7 +40,7 @@ export type EmbedPluginOptions = {
 	 */
 	uploadSingleSizeLimit?: number;
 	/**
-	 * - Additional attributes to set on the iframe tag.
+	 * - Additional attributes to set on the `IFRAME` tag.
 	 */
 	iframeTagAttributes?: {
 		[x: string]: string;
@@ -89,14 +88,16 @@ export type EmbedPluginOptions = {
 	/**
 	 * - Figure controls.
 	 */
-	controls?: FigureControls_embed;
+	controls?: SunEditor.Module.Figure.Controls;
+	/**
+	 * - Component insertion behavior for selection and cursor placement. [default: `options.get('componentInsertBehavior')`]
+	 * - `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.
+	 */
+	insertBehavior?: SunEditor.ComponentInsertType;
 };
-/**
- * @typedef {import('../../events').ProcessInfo} ProcessInfo_embed
- */
-/**
- * @typedef {import('../../modules/Figure').FigureControls} FigureControls_embed
- */
 /**
  * @typedef {Object} EmbedPluginOptions
  * @property {boolean} [canResize=true] - Whether the embed element can be resized.
@@ -108,7 +109,7 @@ export type EmbedPluginOptions = {
  * @property {Object<string, string>} [uploadHeaders] - Headers to include in file upload requests.
  * @property {number} [uploadSizeLimit] - The total file upload size limit in bytes.
  * @property {number} [uploadSingleSizeLimit] - The single file upload size limit in bytes.
- * @property {Object<string, string>} [iframeTagAttributes] - Additional attributes to set on the iframe tag.
+ * @property {Object<string, string>} [iframeTagAttributes] - Additional attributes to set on the `IFRAME` tag.
  * @property {string} [query_youtube] - YouTube query parameter.
  * @property {string} [query_vimeo] - Vimeo query parameter.
  * @property {Array<RegExp>} [urlPatterns] - Additional URL patterns for embed.
@@ -131,31 +132,39 @@ export type EmbedPluginOptions = {
  *   },
  *   // Additional services...
  * }
- * @property {FigureControls_embed} [controls] - Figure controls.
+ * @property {SunEditor.Module.Figure.Controls} [controls] - Figure controls.
+ * @property {SunEditor.ComponentInsertType} [insertBehavior] - Component insertion behavior for selection and cursor placement. [default: `options.get('componentInsertBehavior')`]
+ * - `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.
  */
 /**
  * @class
  * @description Embed modal plugin.
- * - This plugin provides a modal interface for embedding external content (e.g., videos, iframes) into the editor.
+ * - This plugin provides a modal interface for embedding external content (e.g., videos, `IFRAME` elements) into the editor.
  */
-declare class Embed extends EditorInjector {
-	static key: string;
-	static type: string;
-	static className: string;
+declare class Embed extends PluginModal {
 	/**
-	 * @this {Embed}
 	 * @param {HTMLElement} node - The node to check.
 	 * @returns {HTMLElement|null} Returns a node if the node is a valid component.
 	 */
-	static component(this: Embed, node: HTMLElement): HTMLElement | null;
+	static component(node: HTMLElement): HTMLElement | null;
+	/**
+	 * @description Checks if the given URL matches any of the defined URL patterns.
+	 * @param {string} url - The URL to check.
+	 * @returns {boolean} `true` if the URL matches a known pattern; otherwise, `false`.
+	 */
+	static #checkContentType(url: string): boolean;
+	/** @type {Array<RegExp>} */
+	static #urlPatterns: Array<RegExp>;
 	/**
 	 * @constructor
-	 * @param {__se__EditorCore} editor - The root editor instance
+	 * @param {SunEditor.Kernel} editor - The core kernel
 	 * @param {EmbedPluginOptions} pluginOptions
 	 */
-	constructor(editor: __se__EditorCore, pluginOptions: EmbedPluginOptions);
+	constructor(editor: SunEditor.Kernel, pluginOptions: EmbedPluginOptions);
 	title: any;
-	icon: string;
 	pluginOptions: {
 		canResize: boolean;
 		showHeightInput: boolean;
@@ -173,6 +182,7 @@ declare class Embed extends EditorInjector {
 		};
 		query_youtube: string;
 		query_vimeo: string;
+		insertBehavior: SunEditor.ComponentInsertType;
 	};
 	modal: Modal;
 	figure: Figure;
@@ -180,26 +190,10 @@ declare class Embed extends EditorInjector {
 	embedInput: HTMLInputElement;
 	focusElement: HTMLInputElement;
 	previewSrc: HTMLElement;
-	_linkValue: string;
-	_align: string;
-	_defaultSizeX: string;
-	_defaultSizeY: string;
 	sizeUnit: string;
 	proportion: HTMLInputElement;
 	inputX: HTMLInputElement;
 	inputY: HTMLInputElement;
-	_element: any;
-	_cover: HTMLElement;
-	_container: any;
-	_ratio: {
-		w: number;
-		h: number;
-	};
-	_origin_w: string;
-	_origin_h: string;
-	_resizing: boolean;
-	_onlyPercentage: boolean;
-	_nonResizing: boolean;
 	query: {
 		facebook: {
 			pattern: RegExp;
@@ -237,82 +231,21 @@ declare class Embed extends EditorInjector {
 			tag: string;
 		};
 	};
-	urlPatterns: RegExp[];
-	/**
-	 * @editorMethod Modules.Modal
-	 * @description Executes the method that is called when a "Modal" module's is opened.
-	 */
-	open(): void;
-	/**
-	 * @editorMethod Modules.Controller(Figure)
-	 * @description Executes the method that is called when a target component is edited.
-	 */
-	edit(): void;
-	/**
-	 * @editorMethod Modules.Modal
-	 * @description Executes the method that is called when a plugin's modal is opened.
-	 * @param {boolean} isUpdate "Indicates whether the modal is for editing an existing component (true) or registering a new one (false)."
-	 */
-	on(isUpdate: boolean): void;
-	/**
-	 * @editorMethod Modules.Modal
-	 * @description This function is called when a form within a modal window is "submit".
-	 * @returns {Promise<boolean>} Success / failure
-	 */
-	modalAction(): Promise<boolean>;
-	/**
-	 * @editorMethod Editor.core
-	 * @description This method is used to validate and preserve the format of the component within the editor.
-	 * - It ensures that the structure and attributes of the element are maintained and secure.
-	 * - The method checks if the element is already wrapped in a valid container and updates its attributes if necessary.
-	 * - If the element isn't properly contained, a new container is created to retain the format.
-	 * @returns {{query: string, method: (element: HTMLIFrameElement) => void}} The format retention object containing the query and method to process the element.
-	 * - query: The selector query to identify the relevant elements (in this case, 'audio').
-	 * - method:The function to execute on the element to validate and preserve its format.
-	 * - The function takes the element as an argument, checks if it is contained correctly, and applies necessary adjustments.
-	 */
 	retainFormat(): {
 		query: string;
-		method: (element: HTMLIFrameElement) => void;
+		method: (element: HTMLElement) => void;
 	};
-	/**
-	 * @editorMethod Modules.Modal
-	 * @description This function is called before the modal window is opened, but before it is closed.
-	 */
-	init(): void;
-	/**
-	 * @editorMethod Editor.Component
-	 * @description Executes the method that is called when a component of a plugin is selected.
-	 * @param {HTMLElement} target Target component element
-	 */
-	select(target: HTMLElement): void;
-	/**
-	 * @private
-	 * @description Prepares the component for selection.
-	 * - Ensures that the controller is properly positioned and initialized.
-	 * - Prevents duplicate event handling if the component is already selected.
-	 * @param {HTMLElement} target - The selected element.
-	 */
-	private _ready;
-	_caption: HTMLElement;
-	/**
-	 * @editorMethod Editor.Component
-	 * @description Method to delete a component of a plugin, called by the "FileManager", "Controller" module.
-	 * @param {HTMLElement} target Target element
-	 * @returns {Promise<void>}
-	 */
-	destroy(target: HTMLElement): Promise<void>;
-	/**
-	 * @description Checks if the given URL matches any of the defined URL patterns.
-	 * @param {string} url - The URL to check.
-	 * @returns {boolean} True if the URL matches a known pattern; otherwise, false.
-	 */
-	checkContentType(url: string): boolean;
+	modalOn(isUpdate: boolean): void;
+	modalAction(): Promise<boolean>;
+	modalInit(): void;
+	componentSelect(target: HTMLElement): void | boolean;
+	componentEdit(target: HTMLElement): void;
+	componentDestroy(target: HTMLElement): Promise<void>;
 	/**
 	 * @description Finds and processes the URL for embedding by matching it against known service patterns.
 	 * @param {string} url - The original URL.
-	 * @returns {{origin: string, url: string, tag: string}|null} An object containing the original URL, the processed URL, and the tag type (e.g., 'iframe'),
-	 * or null if no matching pattern is found.
+	 * @returns {{origin: string, url: string, tag: string}|null} An object containing the original URL, the processed URL, and the tag type (e.g., `iframe`),
+	 * or `null` if no matching pattern is found.
 	 */
 	findProcessUrl(url: string): {
 		origin: string;
@@ -323,65 +256,12 @@ declare class Embed extends EditorInjector {
 	 * @description Processes the provided source (URL or embed code) and submits it for embedding.
 	 * - It parses the input, triggers any necessary events, and creates or updates the embed component.
 	 * @param {string} [src] - The embed source. If not provided, uses the internally stored link value.
-	 * @returns {Promise<boolean>} A promise that resolves to true on success or false on failure.
+	 * @returns {Promise<boolean>} A promise that resolves to `true` on success or `false` on failure.
 	 */
 	submitSRC(src?: string): Promise<boolean>;
-	/**
-	 * @private
-	 * @description Creates an iframe element for embedding external content.
-	 * @returns {HTMLIFrameElement} The created iframe element.
-	 */
-	private _createIframeTag;
-	/**
-	 * @private
-	 * @description Creates an blockquote element for embedding external content.
-	 * @returns {HTMLElement} The created iframe element.
-	 */
-	private _createEmbedTag;
-	/**
-	 * @private
-	 * @description Creates an embed component (iframe or blockquote) and inserts it into the editor.
-	 * @param {?ProcessInfo_embed} process - Processed embed information.
-	 * @param {?string} src - The source URL.
-	 * @param {?Node[]} children - The embed elements.
-	 * @param {string} width - The width of the embed component.
-	 * @param {string} height - The height of the embed component.
-	 * @param {string} align - The alignment of the embed component.
-	 * @param {boolean} isUpdate - Whether this is an update to an existing embed component.
-	 */
-	private _create;
-	/**
-	 * @private
-	 * @description Updates an existing embed component within the editor.
-	 * @param {HTMLIFrameElement} oFrame - The existing embed element to be updated.
-	 */
-	private _update;
-	/**
-	 * @private
-	 * @description Applies width and height to the embed component.
-	 * @param {string|number} w - The width to apply.
-	 * @param {string|number} h - The height to apply.
-	 */
-	private _applySize;
-	/**
-	 * @private
-	 * @description Retrieves embed component size and alignment information.
-	 * @returns {{inputWidth: string, inputHeight: string, align: string, isUpdate: boolean, element: Element}} An object containing
-	 * - inputWidth : The width of the embed component.
-	 * - inputHeight : The height of the embed component.
-	 * - align : The alignment of the embed component.
-	 * - isUpdate : Whether the component is being updated.
-	 * - element : The target element.
-	 */
-	private _getInfo;
-	/**
-	 * @private
-	 * @description Sets default attributes for an iframe element.
-	 * @param {HTMLIFrameElement} element - The iframe element to modify.
-	 */
-	private _setIframeAttrs;
+	_caption: HTMLElement;
 	#private;
 }
-import EditorInjector from '../../editorInjector';
-import { Modal } from '../../modules';
-import { Figure } from '../../modules';
+import { PluginModal } from '../../interfaces';
+import { Modal } from '../../modules/contract';
+import { Figure } from '../../modules/contract';