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

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

@@ -0,0 +1,269 @@
+export default Audio_;
+export type AudioInfo_audio = import('../../events').AudioInfo;
+export type AudioPluginOptions = {
+	/**
+	 * - The default width of the audio tag (e.g., "300px").
+	 */
+	defaultWidth?: string;
+	/**
+	 * - The default height of the audio tag (e.g., "150px").
+	 */
+	defaultHeight?: string;
+	/**
+	 * - Whether to create a file input element.
+	 */
+	createFileInput?: boolean;
+	/**
+	 * - Whether to create a URL input element (default is true if file input is not created).
+	 */
+	createUrlInput?: boolean;
+	/**
+	 * - The URL to which files will be uploaded.
+	 */
+	uploadUrl?: string;
+	/**
+	 * - Headers to include in the file upload request.
+	 */
+	uploadHeaders?: {
+		[x: string]: string;
+	};
+	/**
+	 * - The total upload size limit in bytes.
+	 */
+	uploadSizeLimit?: number;
+	/**
+	 * - The single file size limit in bytes.
+	 */
+	uploadSingleSizeLimit?: number;
+	/**
+	 * - Whether to allow multiple file uploads.
+	 */
+	allowMultiple?: boolean;
+	/**
+	 * - Accepted file formats (default is "audio/*").
+	 */
+	acceptedFormats?: string;
+	/**
+	 * - Additional attributes to set on the audio tag.
+	 */
+	audioTagAttributes?: {
+		[x: string]: string;
+	};
+};
+/**
+ * @typedef {import('../../events').AudioInfo} AudioInfo_audio
+ */
+/**
+ * @typedef {Object} AudioPluginOptions
+ * @property {string} [defaultWidth="300px"] - The default width of the audio tag (e.g., "300px").
+ * @property {string} [defaultHeight="150px"] - The default height of the audio tag (e.g., "150px").
+ * @property {boolean} [createFileInput] - Whether to create a file input element.
+ * @property {boolean} [createUrlInput] - Whether to create a URL input element (default is true if file input is not created).
+ * @property {string} [uploadUrl] - The URL to which files will be uploaded.
+ * @property {Object<string, string>} [uploadHeaders] - Headers to include in the file upload request.
+ * @property {number} [uploadSizeLimit] - The total upload size limit in bytes.
+ * @property {number} [uploadSingleSizeLimit] - The single file size limit in bytes.
+ * @property {boolean} [allowMultiple] - Whether to allow multiple file uploads.
+ * @property {string} [acceptedFormats="audio/*"] - Accepted file formats (default is "audio/*").
+ * @property {Object<string, string>} [audioTagAttributes] - Additional attributes to set on the audio tag.
+ */
+/**
+ * @class
+ * @description Audio modal plugin.
+ */
+declare class Audio_ extends EditorInjector {
+	static key: string;
+	static type: string;
+	static className: string;
+	/**
+	 * @this {Audio_}
+	 * @param {HTMLElement} node - The node to check.
+	 * @returns {HTMLElement|null} Returns a node if the node is a valid component.
+	 */
+	static component(this: Audio_, node: HTMLElement): HTMLElement | null;
+	/**
+	 * @constructor
+	 * @param {__se__EditorCore} editor - The root editor instance
+	 * @param {AudioPluginOptions} pluginOptions
+	 */
+	constructor(editor: __se__EditorCore, pluginOptions: AudioPluginOptions);
+	title: any;
+	icon: string;
+	pluginOptions: {
+		defaultWidth: string;
+		defaultHeight: string;
+		createFileInput: boolean;
+		createUrlInput: boolean;
+		uploadUrl: string;
+		uploadHeaders: {
+			[x: string]: string;
+		};
+		uploadSizeLimit: number;
+		uploadSingleSizeLimit: number;
+		allowMultiple: boolean;
+		acceptedFormats: string;
+		audioTagAttributes: {
+			[x: string]: string;
+		};
+	};
+	modal: Modal;
+	controller: Controller;
+	fileManager: FileManager;
+	figure: Figure;
+	/** @type {HTMLElement} */
+	fileModalWrapper: HTMLElement;
+	/** @type {HTMLInputElement} */
+	audioInputFile: HTMLInputElement;
+	/** @type {HTMLInputElement} */
+	audioUrlFile: HTMLInputElement;
+	/** @type {HTMLElement} */
+	preview: HTMLElement;
+	/** @type {HTMLAudioElement} */
+	_element: HTMLAudioElement;
+	defaultWidth: string;
+	defaultHeight: string;
+	urlValue: 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 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 Editor.EventManager
+	 * @description Executes the event function of "paste" or "drop".
+	 * @param {Object} params { frameContext, event, file }
+	 * @param {__se__FrameContext} params.frameContext Frame context
+	 * @param {ClipboardEvent} params.event Event object
+	 * @param {File} params.file File object
+	 * @returns {boolean} - If return false, the file upload will be canceled
+	 */
+	onFilePasteAndDrop({ file }: { frameContext: __se__FrameContext; event: ClipboardEvent; file: File }): boolean;
+	/**
+	 * @editorMethod Modules.Modal
+	 * @description This function is called when a form within a modal window is "submit".
+	 * @returns {Promise<boolean>} Success or failure
+	 */
+	modalAction(): Promise<boolean>;
+	/**
+	 * @editorMethod Modules.Modal
+	 * @description This function is called before the modal window is opened, but before it is closed.
+	 */
+	init(): void;
+	/**
+	 * @editorMethod Modules.Controller
+	 * @description Executes the method that is called when a button is clicked in the "controller".
+	 * @param {HTMLButtonElement} target Target button element
+	 */
+	controllerAction(target: HTMLButtonElement): void;
+	/**
+	 * @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: HTMLAudioElement) => 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: HTMLAudioElement) => 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;
+	/**
+	 * @editorMethod Editor.Component
+	 * @description Method to delete a component of a plugin, called by the "FileManager", "Controller" module.
+	 * @param {HTMLElement=} target Target element, if null current selected element
+	 * @returns {Promise<void>}
+	 */
+	destroy(target?: HTMLElement | undefined): Promise<void>;
+	/**
+	 * @private
+	 * @description Registers uploaded audio files and creates the corresponding audio elements.
+	 * - Iterates through the uploaded files and inserts them into the editor.
+	 * @param {AudioInfo_audio} info - Upload metadata, including `isUpdate` flag and `element`.
+	 * @param {Object<string, *>} response - Server response containing uploaded file details.
+	 */
+	private _register;
+	/**
+	 * @description Create an "audio" component using the provided files.
+	 * @param {FileList|File[]} fileList File object list
+	 * @returns {Promise<boolean>} If return false, the file upload will be canceled
+	 */
+	submitFile(fileList: FileList | File[]): Promise<boolean>;
+	/**
+	 * @description Create an "audio" component using the provided url.
+	 * @param {string} url File url
+	 * @returns {Promise<boolean>}
+	 */
+	submitURL(url: string): Promise<boolean>;
+	/**
+	 * @private
+	 * @description Creates or updates an audio component within the editor.
+	 * - If `isUpdate` is `true`, updates the existing element's `src`.
+	 * - Otherwise, inserts a new audio component with the given file.
+	 * @param {HTMLAudioElement} element - The target audio element.
+	 * @param {string} src - The source URL of the audio file.
+	 * @param {{name: string, size: number}} file - The file metadata (name, size).
+	 * @param {boolean} isUpdate - Whether to update an existing element.
+	 */
+	private _createComp;
+	/**
+	 * @private
+	 * @description Creates a new `<audio>` element with default attributes.
+	 * - Applies width, height, and additional attributes from plugin options.
+	 * @returns {HTMLAudioElement} - The newly created `<audio>` element.
+	 */
+	private _createAudioTag;
+	/**
+	 * @private
+	 * @description Sets attributes on an audio element based on plugin options.
+	 * - Adds the `controls` attribute and applies any custom attributes.
+	 * @param {HTMLElement} element - The `<audio>` element to modify.
+	 */
+	private _setTagAttrs;
+	/**
+	 * @private
+	 * @description Uploads audio files to the server.
+	 * - Sends a request to the configured upload URL and processes the response.
+	 * @param {AudioInfo_audio} info - Upload metadata, including `files` and `isUpdate`.
+	 * @param {FileList|File[]} files - The files to be uploaded.
+	 */
+	private _serverUpload;
+	/**
+	 * @private
+	 * @description Handles errors that occur during the audio upload process.
+	 * - Triggers the `onAudioUploadError` event to allow custom handling of errors.
+	 * - Displays an error message in the editor's UI.
+	 * - Logs the error to the console for debugging.
+	 * @param {Object<string, *>} response - The error response object from the server or upload process.
+	 * @returns {Promise<void>}
+	 */
+	private _error;
+	#private;
+}
+import EditorInjector from '../../editorInjector';
+import { Modal } from '../../modules';
+import { Controller } from '../../modules';
+import { FileManager } from '../../modules';
+import { Figure } from '../../modules';

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

@@ -0,0 +1,246 @@
+export default Drawing;
+export type DrawingPluginOptions = {
+	/**
+	 * - The output format of the drawing. Options: "dataurl", "svg".
+	 */
+	outputFormat?: string;
+	/**
+	 * - Whether to enable format type selection (block vs inline).
+	 */
+	useFormatType?: boolean;
+	/**
+	 * - The default format type, either "block" or "inline".
+	 */
+	defaultFormatType?: string;
+	/**
+	 * - Whether to maintain the chosen format type after drawing.
+	 */
+	keepFormatType?: boolean;
+	/**
+	 * - The width of the drawing line.
+	 */
+	lineWidth?: number;
+	/**
+	 * - Whether to reconnect lines when drawing.
+	 */
+	lineReconnect?: boolean;
+	/**
+	 * - The style of the line cap ("butt", "round", or "square").
+	 */
+	lineCap?: CanvasLineCap;
+	/**
+	 * - The color of the drawing line.
+	 */
+	lineColor?: string;
+	/**
+	 * - Whether the modal form can be resized.
+	 */
+	canResize?: boolean;
+	/**
+	 * - Whether to maintain the aspect ratio when resizing.
+	 */
+	maintainRatio?: boolean;
+	/**
+	 * - The size configuration for the drawing modal form.
+	 */
+	formSize?: {
+		width?: string;
+		height?: string;
+		maxWidth?: string;
+		maxHeight?: string;
+		minWidth?: string;
+		minHeight?: string;
+	};
+};
+/**
+ * @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 {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 {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.
+ * @property {Object} [formSize={}] - The size configuration for the drawing modal form.
+ * @property {string} [formSize.width="750px"] - The width of the modal form.
+ * @property {string} [formSize.height="50vh"] - The height of the modal form.
+ * @property {string} [formSize.maxWidth=""] - The maximum width of the modal form.
+ * @property {string} [formSize.maxHeight=""] - The maximum height of the modal form.
+ * @property {string} [formSize.minWidth="150px"] - The minimum width of the modal form.
+ * @property {string} [formSize.minHeight="100px"] - The minimum height of the modal form.
+ */
+/**
+ * @class
+ * @description Drawing modal plugin.
+ */
+declare class Drawing extends EditorInjector {
+	static key: string;
+	static type: string;
+	static className: string;
+	/**
+	 * @constructor
+	 * @param {__se__EditorCore} editor - The root editor instance
+	 * @param {DrawingPluginOptions} pluginOptions
+	 */
+	constructor(editor: __se__EditorCore, pluginOptions: DrawingPluginOptions);
+	title: any;
+	icon: string;
+	pluginOptions: {
+		outputFormat: string;
+		useFormatType: boolean;
+		defaultFormatType: string;
+		keepFormatType: boolean;
+		lineWidth: number;
+		lineReconnect: boolean;
+		lineCap: CanvasLineCap;
+		lineColor: string;
+		formSize: {
+			/**
+			 * - The width of the modal form.
+			 */
+			width: string;
+			/**
+			 * - The height of the modal form.
+			 */
+			height: string;
+			/**
+			 * - The maximum width of the modal form.
+			 */
+			maxWidth: string;
+			/**
+			 * - The maximum height of the modal form.
+			 */
+			maxHeight: string;
+			/**
+			 * - The minimum width of the modal form.
+			 */
+			minWidth: string;
+			/**
+			 * - The minimum height of the modal form.
+			 */
+			minHeight: string;
+		};
+		canResize: boolean;
+		maintainRatio: boolean;
+	};
+	modal: Modal;
+	as: string;
+	asBlock: Element;
+	asInline: Element;
+	/**
+	 * @type {HTMLCanvasElement}
+	 */
+	canvas: HTMLCanvasElement;
+	ctx: CanvasRenderingContext2D;
+	isDrawing: boolean;
+	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;
+	#private;
+}
+import EditorInjector from '../../editorInjector';
+import { Modal } from '../../modules';