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

package/types/modules/Figure.d.ts

@@ -0,0 +1,517 @@
+export default Figure;
+export type FigureParams = {
+	/**
+	 * Size unit
+	 */
+	sizeUnit?: string;
+	/**
+	 * Auto ratio { current: '00%', default: '00%' }
+	 */
+	autoRatio?: {
+		current: string;
+		default: string;
+	};
+};
+export type FigureInfo = {
+	/**
+	 * Target element (img, iframe, video, audio, table, etc.)
+	 */
+	target: HTMLElement;
+	/**
+	 * Container element (div.se-component|span.se-component.se-inline-component)
+	 */
+	container: HTMLElement;
+	/**
+	 * Cover element (FIGURE|null)
+	 */
+	cover: HTMLElement | null;
+	/**
+	 * Inline cover element (span.se-inline-component)
+	 */
+	inlineCover: HTMLElement | null;
+	/**
+	 * Caption element (FIGCAPTION)
+	 */
+	caption: HTMLElement | null;
+};
+export type FigureTargetInfo = {
+	/**
+	 * Container element (div.se-component|span.se-component.se-inline-component)
+	 */
+	container: HTMLElement;
+	/**
+	 * Cover element (FIGURE|null)
+	 */
+	cover?: (HTMLElement | null) | undefined;
+	/**
+	 * Caption element (FIGCAPTION)
+	 */
+	caption?: (HTMLElement | null) | undefined;
+	/**
+	 * - Alignment of the element.
+	 */
+	align?: string;
+	/**
+	 * - The aspect ratio of the element.
+	 */
+	ratio?: {
+		w: number;
+		h: number;
+	};
+	/**
+	 * - Width of the element.
+	 */
+	w?: string | number;
+	/**
+	 * - Height of the element.
+	 */
+	h?: string | number;
+	/**
+	 * - Top position.
+	 */
+	t?: number;
+	/**
+	 * - Left position.
+	 */
+	l?: number;
+	/**
+	 * - Width, can be a number or 'auto'.
+	 */
+	width: string | number;
+	/**
+	 * - Height, can be a number or 'auto'.
+	 */
+	height: string | number;
+	/**
+	 * - Original width from `naturalWidth` or `offsetWidth`.
+	 */
+	originWidth?: number;
+	/**
+	 * - Original height from `naturalHeight` or `offsetHeight`.
+	 */
+	originHeight?: number;
+};
+/**
+ * "mirror". "rotate", "caption", "revert", "edit", "copy", "remove", "as", "resize_auto,[number]"
+ */
+export type FigureControls = Array<
+	Array<
+		| string
+		| {
+				action: (element: Node, value: string, target: Node) => void;
+				command: string;
+				value: string;
+				title: string;
+				icon: string;
+		  }
+	>
+>;
+/**
+ * @typedef {Object} FigureParams
+ * @property {string} [sizeUnit="px"] Size unit
+ * @property {{ current: string, default: string }} [autoRatio=null] Auto ratio { current: '00%', default: '00%' }
+ */
+/**
+ * @typedef {Object} FigureInfo
+ * @property {HTMLElement} target Target element (img, iframe, video, audio, table, etc.)
+ * @property {HTMLElement} container Container element (div.se-component|span.se-component.se-inline-component)
+ * @property {?HTMLElement} cover Cover element (FIGURE|null)
+ * @property {?HTMLElement} inlineCover Inline cover element (span.se-inline-component)
+ * @property {?HTMLElement} caption Caption element (FIGCAPTION)
+ */
+/**
+ * @typedef {Object} FigureTargetInfo
+ * @property {HTMLElement} container Container element (div.se-component|span.se-component.se-inline-component)
+ * @property {?HTMLElement=} cover Cover element (FIGURE|null)
+ * @property {?HTMLElement=} caption Caption element (FIGCAPTION)
+ * @property {string} [align] - Alignment of the element.
+ * @property {{w:number, h:number}} [ratio] - The aspect ratio of the element.
+ * @property {string|number} [w] - Width of the element.
+ * @property {string|number} [h] - Height of the element.
+ * @property {number} [t] - Top position.
+ * @property {number} [l] - Left position.
+ * @property {string|number} width - Width, can be a number or 'auto'.
+ * @property {string|number} height - Height, can be a number or 'auto'.
+ * @property {number} [originWidth] - Original width from `naturalWidth` or `offsetWidth`.
+ * @property {number} [originHeight] - Original height from `naturalHeight` or `offsetHeight`.
+ */
+/**
+ * @typedef {Array<Array<
+ *   string |
+ *   {
+ *     action: (element: Node, value: string, target: Node) => void,
+ *     command: string,
+ *     value: string,
+ *     title: string,
+ *     icon: string
+ *   }
+ * >>} FigureControls
+ * "mirror". "rotate", "caption", "revert", "edit", "copy", "remove", "as", "resize_auto,[number]"
+ */
+/**
+ * @class
+ * @description Controller module class
+ */
+declare class Figure extends EditorInjector {
+	/**
+	 * @description Create a container for the resizing component and insert the element.
+	 * @param {Node} element Target element
+	 * @param {string=} className Class name of container (fixed: se-component)
+	 * @returns {FigureInfo} {target, container, cover, inlineCover, caption}
+	 */
+	static CreateContainer(element: Node, className?: string | undefined): FigureInfo;
+	/**
+	 * @description Create a container for the inline resizing component and insert the element.
+	 * @param {Node} element Target element
+	 * @param {string} [className] Class name of container (fixed: se-component se-inline-component)
+	 * @returns {FigureInfo} {target, container, cover, inlineCover, caption}
+	 */
+	static CreateInlineContainer(element: Node, className?: string): FigureInfo;
+	/**
+	 * @description Return HTML string of caption(FIGCAPTION) element
+	 * @param {Node} cover Cover element(FIGURE). "CreateContainer().cover"
+	 * @returns {HTMLElement} caption element
+	 */
+	static CreateCaption(cover: Node, text: any): HTMLElement;
+	/**
+	 * @description Get the element's container(.se-component) info.
+	 * @param {Node} element Target element
+	 * @returns {FigureInfo} {target, container, cover, inlineCover, caption}
+	 */
+	static GetContainer(element: Node): FigureInfo;
+	/**
+	 * @description Ratio calculation
+	 * @param {string|number} w Width size
+	 * @param {string|number} h Height size
+	 * @param {?string=} [defaultSizeUnit="px"] Default size unit (default: "px")
+	 * @return {{w: number, h: number}}
+	 */
+	static GetRatio(
+		w: string | number,
+		h: string | number,
+		defaultSizeUnit?: (string | null) | undefined
+	): {
+		w: number;
+		h: number;
+	};
+	/**
+	 * @description Ratio calculation
+	 * @param {string|number} w Width size
+	 * @param {string|number} h Height size
+	 * @param {string} defaultSizeUnit Default size unit (default: "px")
+	 * @param {{w: number, h: number}} ratio Ratio size (Figure.GetRatio)
+	 * @return {{w: string|number, h: string|number}}
+	 */
+	static CalcRatio(
+		w: string | number,
+		h: string | number,
+		defaultSizeUnit: string,
+		ratio: {
+			w: number;
+			h: number;
+		}
+	): {
+		w: string | number;
+		h: string | number;
+	};
+	/**
+	 * @description It is judged whether it is the component[img, iframe, video, audio, table] cover(class="se-component") and table, hr
+	 * @param {Node} element Target element
+	 * @returns {boolean}
+	 */
+	static is(element: Node): boolean;
+	/**
+	 * @constructor
+	 * @param {*} inst The instance object that called the constructor.
+	 * @param {FigureControls} controls Controller button array
+	 * @param {FigureParams} params Figure options
+	 */
+	constructor(inst: any, controls: FigureControls, params: FigureParams);
+	kind: any;
+	_alignIcons: {
+		none: string;
+		left: string;
+		right: string;
+		center: string;
+	};
+	/** @type {Object<string, *>} */
+	_action: {
+		[x: string]: any;
+	};
+	controller: Controller;
+	alignButton: Element;
+	selectMenu_align: SelectMenu;
+	asButton: Element;
+	selectMenu_as: SelectMenu;
+	resizeButton: Element;
+	selectMenu_resize: SelectMenu;
+	inst: any;
+	sizeUnit: string;
+	autoRatio: {
+		current: string;
+		default: string;
+	};
+	isVertical: boolean;
+	percentageButtons: NodeListOf<Element>;
+	captionButton: Element;
+	align: string;
+	as: string;
+	_element: HTMLElement;
+	_cover: HTMLElement;
+	_inlineCover: HTMLElement;
+	_container: HTMLElement;
+	_caption: any;
+	_width: string;
+	_height: string;
+	_resize_w: number;
+	_resize_h: number;
+	_element_w: number;
+	_element_h: number;
+	_element_l: number;
+	_element_t: number;
+	_resizeClientX: number;
+	_resizeClientY: number;
+	_resize_direction: string;
+	_floatClassStr: string;
+	__preventSizechange: boolean;
+	__revertSize: {
+		w: string;
+		h: string;
+	};
+	/** @type {{left?: number, top?: number}} */
+	__offset: {
+		left?: number;
+		top?: number;
+	};
+	__offContainer: any;
+	__containerResizing: any;
+	__containerResizingOff: any;
+	__containerResizingESC: any;
+	__onContainerEvent: any;
+	__offContainerEvent: any;
+	__onResizeESCEvent: __se__GlobalEventInfo;
+	__fileManagerInfo: boolean;
+	/**
+	 * @description Close the figure's controller
+	 */
+	close(): void;
+	/**
+	 * @description Open the figure's controller
+	 * @param {Node} targetNode Target element
+	 * @param {Object} params params
+	 * @param {boolean} [params.nonResizing=false] Do not display the resizing button
+	 * @param {boolean} [params.nonSizeInfo=false] Do not display the size information
+	 * @param {boolean} [params.nonBorder=false] Do not display the selected style line
+	 * @param {boolean} [params.figureTarget=false] If true, the target is a figure element
+	 * @param {boolean} [params.__fileManagerInfo=false] If true, the file manager is called
+	 * @returns {FigureTargetInfo|undefined} figure target info
+	 */
+	open(
+		targetNode: Node,
+		{
+			nonResizing,
+			nonSizeInfo,
+			nonBorder,
+			figureTarget,
+			__fileManagerInfo
+		}: {
+			nonResizing?: boolean;
+			nonSizeInfo?: boolean;
+			nonBorder?: boolean;
+			figureTarget?: boolean;
+			__fileManagerInfo?: boolean;
+		}
+	): FigureTargetInfo | undefined;
+	/**
+	 * @description Hide the controller
+	 */
+	controllerHide(): void;
+	/**
+	 * @description Hide the controller
+	 */
+	controllerShow(): void;
+	/**
+	 * @description Open the figure's controller
+	 * @param {Node} target Target element
+	 * @param {Object} [params={}] params
+	 * @param {boolean=} params.isWWTarget If the controller is in the WYSIWYG area, set it to true.
+	 * @param {() => void=} params.initMethod Method to be called when the controller is closed.
+	 * @param {boolean=} params.disabled If true, the controller is disabled.
+	 * @param {{left: number, top: number}=} params.addOffset Additional offset values
+	 */
+	controllerOpen(
+		target: Node,
+		params?: {
+			isWWTarget?: boolean | undefined;
+			initMethod?: (() => void) | undefined;
+			disabled?: boolean | undefined;
+			addOffset?:
+				| {
+						left: number;
+						top: number;
+				  }
+				| undefined;
+		}
+	): void;
+	/**
+	 * @description Set the element's container size
+	 * @param {string|number} w Width size
+	 * @param {string|number} h Height size
+	 */
+	setSize(w: string | number, h: string | number): void;
+	/**
+	 * @description Gets the Figure size
+	 * @param {?Node=} targetNode Target element, default is the current element
+	 * @returns {{w: string, h: string}}
+	 */
+	getSize(targetNode?: (Node | null) | undefined): {
+		w: string;
+		h: string;
+	};
+	/**
+	 * @description Align the container.
+	 * @param {?Node} targetNode Target element
+	 * @param {string} align "none"|"left"|"center"|"right"
+	 */
+	setAlign(targetNode: Node | null, align: string): void;
+	/**
+	 * @description As style[block, inline] the component
+	 * @param {?Node} targetNode Target element
+	 * @param {"block"|"inline"} formatStyle Format style
+	 */
+	convertAsFormat(targetNode: Node | null, formatStyle: 'block' | 'inline'): void;
+	/**
+	 * @private
+	 * @description Handles format conversion (block/inline) for the figure component and applies size changes.
+	 * @param {FigureInfo} figureinfo {target, container, cover, inlineCover, caption}
+	 * @param {string|number} w Width value.
+	 * @param {string|number} h Height value.
+	 */
+	private _asFormatChange;
+	/**
+	 * @description Controller button action
+	 * @param {HTMLButtonElement} target Target button element
+	 * @returns
+	 */
+	controllerAction(target: HTMLButtonElement): void;
+	/**
+	 * @description Inspect the figure component format and change it to the correct format.
+	 * @param {Node} container - The container element of the figure component.
+	 * @param {Node} originEl - The original element of the figure component.
+	 * @param {Node} anchorCover - The anchor cover element of the figure component.
+	 * @param {import('./FileManager').default} [fileManagerInst=null] - FileManager module instance, if used.
+	 */
+	retainFigureFormat(container: Node, originEl: Node, anchorCover: Node, fileManagerInst?: import('./FileManager').default): void;
+	/**
+	 * @description Initialize the transform style (rotation) of the element.
+	 * @param {?Node=} node Target element, default is the current element
+	 */
+	deleteTransform(node?: (Node | null) | undefined): void;
+	/**
+	 * @description Set the transform style (rotation) of the element.
+	 * @param {Node} node Target element
+	 * @param {?string|number} width Element's width size
+	 * @param {?string|number} height Element's height size
+	 */
+	setTransform(node: Node, width: (string | number) | null, height: (string | number) | null, deg: any): void;
+	/**
+	 * @private
+	 * @description Sets figure component properties such as cover, container, caption, and alignment.
+	 * @param {FigureInfo} figureInfo - {target, container, cover, inlineCover, caption}
+	 */
+	private _setFigureInfo;
+	/**
+	 * @private
+	 * @description Applies rotation transformation to the target element.
+	 * @param {HTMLElement} element Target element.
+	 * @param {number} r Rotation degree.
+	 * @param {number} x X-axis rotation value.
+	 * @param {number} y Y-axis rotation value.
+	 */
+	private _setRotate;
+	/**
+	 * @private
+	 * @description Applies size adjustments to the figure element.
+	 * @param {string|number} w Width value.
+	 * @param {string|number} h Height value.
+	 * @param {string} direction Resize direction.
+	 */
+	private _applySize;
+	/**
+	 * @private
+	 * @description Sets padding-bottom for cover elements based on width and height.
+	 * @param {string} w Width value.
+	 * @param {string} h Height value.
+	 */
+	private __setCoverPaddingBottom;
+	/**
+	 * @private
+	 * @description Sets the figure element to its auto size.
+	 */
+	private _setAutoSize;
+	/**
+	 * @private
+	 * @description Sets the figure element's size in percentage.
+	 * @param {string|number} w Width percentage.
+	 * @param {string|number} h Height percentage.
+	 */
+	private _setPercentSize;
+	/**
+	 * @private
+	 * @description Deletes percentage-based sizing from the figure element.
+	 */
+	private _deletePercentSize;
+	/**
+	 * @private
+	 * @description Reverts the figure element to its previously saved size.
+	 */
+	private _setRevert;
+	/**
+	 * @private
+	 * @description Updates the figure's alignment icon.
+	 */
+	private _setAlignIcon;
+	/**
+	 * @private
+	 * @description Updates the figure's block/inline format icon.
+	 */
+	private _setAsIcon;
+	/**
+	 * @private
+	 * @description Saves the current size of the figure component.
+	 */
+	private _saveCurrentSize;
+	/**
+	 * @private
+	 * @description Adjusts the position of the caption within the figure.
+	 * @param {HTMLElement} element Target element.
+	 */
+	private _setCaptionPosition;
+	/**
+	 * @private
+	 * @description Removes the margin top property from the figure caption.
+	 * @param {HTMLElement} element Target element.
+	 */
+	private _deleteCaptionPosition;
+	/**
+	 * @private
+	 * @description Displays or hides the resize handles of the figure component.
+	 * @param {boolean} display Whether to display resize handles.
+	 */
+	private _displayResizeHandles;
+	/**
+	 * @private
+	 * @description Removes the resize event listeners.
+	 */
+	private _offResizeEvent;
+	/**
+	 * @private
+	 * @description Sets up drag event handling for the figure component.
+	 * @param {Node} figureMain The main figure container element.
+	 */
+	private _setDragEvent;
+	#private;
+}
+import EditorInjector from '../editorInjector';
+import { Controller } from '../modules';
+import { SelectMenu } from '../modules';

package/types/modules/FileManager.d.ts

@@ -0,0 +1,202 @@
+export default FileManager;
+export type FileStateInfo = {
+	/**
+	 * File source
+	 */
+	src: string;
+	/**
+	 * File index
+	 */
+	index: number;
+	/**
+	 * File name
+	 */
+	name: string;
+	/**
+	 * File size
+	 */
+	size: number;
+};
+export type FileStateParams = {
+	/**
+	 * - The root editor instance
+	 */
+	editor: __se__EditorCore;
+	/**
+	 * File element
+	 */
+	element: Node;
+	/**
+	 * File index
+	 */
+	index: number;
+	/**
+	 * File state ("create"|"update"|"delete")
+	 */
+	state: string;
+	/**
+	 * File information
+	 */
+	info: FileStateInfo;
+	/**
+	 * Remaining file count
+	 */
+	remainingFilesCount: number;
+	/**
+	 * Plugin name
+	 */
+	pluginName: string;
+};
+export type FileManagerParams = {
+	/**
+	 * The query selector used to find file elements in the editor
+	 */
+	query: string;
+	/**
+	 * A function to handle the loaded file information
+	 */
+	loadHandler?: ((params: Array<FileStateInfo>) => void) | undefined;
+	/**
+	 * A function to handle file-related events
+	 */
+	eventHandler?: ((info: FileStateParams) => void) | undefined;
+};
+/**
+ * @typedef {Object} FileStateInfo
+ * @property {string} src File source
+ * @property {number} index File index
+ * @property {string} name File name
+ * @property {number} size File size
+ */
+/**
+ * @typedef {Object} FileStateParams
+ * @property {__se__EditorCore} editor - The root editor instance
+ * @property {Node} element File element
+ * @property {number} index File index
+ * @property {string} state File state ("create"|"update"|"delete")
+ * @property {FileStateInfo} info File information
+ * @property {number} remainingFilesCount Remaining file count
+ * @property {string} pluginName Plugin name
+ */
+/**
+ * @typedef {Object} FileManagerParams
+ * @property {string} query The query selector used to find file elements in the editor
+ * @property {(params: Array<FileStateInfo>) => void=} loadHandler A function to handle the loaded file information
+ * @property {(info: FileStateParams) => void=} eventHandler A function to handle file-related events
+ */
+/**
+ * @class
+ * @description This module manages the file information of the editor.
+ */
+declare class FileManager extends CoreInjector {
+	/**
+	 * @constructor
+	 * @param {*} inst The instance object that called the constructor.
+	 * @param {FileManagerParams} params FileManager options
+	 */
+	constructor(inst: any, params: FileManagerParams);
+	ui: import('../core/class/ui').default;
+	kind: any;
+	inst: any;
+	component: any;
+	query: string;
+	loadHandler: (params: Array<FileStateInfo>) => void;
+	eventHandler: (info: FileStateParams) => void;
+	infoList: any[];
+	infoIndex: number;
+	uploadFileLength: number;
+	__updateTags: any[];
+	apiManager: ApiManager;
+	/**
+	 * @description Upload the file to the server.
+	 * @param {string} uploadUrl Upload server url
+	 * @param {?Object<string, string>} uploadHeader Request header
+	 * @param {FileList|File[]|{formData: FormData, size: number}} data FormData in body or Files array
+	 * @param {?(xmlHttp: XMLHttpRequest) => boolean=} callBack Success call back function
+	 * @param {?(res: *, xmlHttp: XMLHttpRequest) => string=} errorCallBack Error call back function
+	 */
+	upload(
+		uploadUrl: string,
+		uploadHeader: {
+			[x: string]: string;
+		} | null,
+		data:
+			| FileList
+			| File[]
+			| {
+					formData: FormData;
+					size: number;
+			  },
+		callBack?: (((xmlHttp: XMLHttpRequest) => boolean) | null) | undefined,
+		errorCallBack?: (((res: any, xmlHttp: XMLHttpRequest) => string) | null) | undefined
+	): void;
+	/**
+	 * @description Upload the file to the server.
+	 * @param {string} uploadUrl Upload server url
+	 * @param {?Object<string, string>} uploadHeader Request header
+	 * @param {FileList|File[]|{formData: FormData, size: number}} data FormData in body or Files array
+	 * @returns {Promise<XMLHttpRequest>}
+	 */
+	asyncUpload(
+		uploadUrl: string,
+		uploadHeader: {
+			[x: string]: string;
+		} | null,
+		data:
+			| FileList
+			| File[]
+			| {
+					formData: FormData;
+					size: number;
+			  }
+	): Promise<XMLHttpRequest>;
+	/**
+	 * @description Set the file information to the element.
+	 * @param {Node} element File information element
+	 * @param {Object} params
+	 * @param {string} params.name File name
+	 * @param {number} params.size File size
+	 * @returns
+	 */
+	setFileData(
+		element: Node,
+		{
+			name,
+			size
+		}: {
+			name: string;
+			size: number;
+		}
+	): void;
+	/**
+	 * @private
+	 * @description Create info object of file and add it to "infoList"
+	 * @param {HTMLMediaElement} element
+	 * @param {{name: string, size: number}|null} file File information
+	 */
+	private _setInfo;
+	/**
+	 * @description Gets the sum of the sizes of the currently saved files.
+	 * @returns {number} Size
+	 */
+	getSize(): number;
+	/**
+	 * @private
+	 * @description Checke the file's information and modify the tag that does not fit the format.
+	 * @param {boolean} loaded Whether the editor is loaded
+	 */
+	private _checkInfo;
+	/**
+	 * @private
+	 * @description Reset info object and "infoList = []", "infoIndex = 0"
+	 */
+	private _resetInfo;
+	/**
+	 * @private
+	 * @description Delete info object at "infoList"
+	 * @param {number} index index of info object infoList[].index)
+	 */
+	private _deleteInfo;
+}
+import CoreInjector from '../editorInjector/_core';
+import ApiManager from './ApiManager';