suneditor 3.0.0-alpha.2 → 3.0.0-alpha.20

package/types/modules/Browser.d.ts

@@ -0,0 +1,326 @@
+export default Browser;
+export type BrowserFile = {
+	/**
+	 * - Source url
+	 */
+	src?: string;
+	/**
+	 * - File name | Folder name
+	 */
+	name?: string;
+	/**
+	 * - Thumbnail url
+	 */
+	thumbnail?: string | undefined;
+	/**
+	 * - Image alt
+	 */
+	alt?: string | undefined;
+	/**
+	 * - Tag name list
+	 */
+	tag?: (Array<string> | string) | undefined;
+	/**
+	 * - Type (image, video, audio, etc.)
+	 */
+	type?: string | undefined;
+	/**
+	 * - Frame name (iframe, video, etc.)
+	 */
+	frame?: string | undefined;
+	/**
+	 * - The folder's contents or an API URL.
+	 */
+	_data?: (BrowserFile | string) | undefined;
+	/**
+	 * - Whether this folder is the default selection.
+	 */
+	default?: boolean | undefined;
+	/**
+	 * - Metadata
+	 */
+	meta?:
+		| {
+				[x: string]: any;
+		  }
+		| undefined;
+};
+export type BrowserParams = {
+	/**
+	 * - File browser window title. Required. Can be overridden in browser.
+	 */
+	title: string;
+	/**
+	 * - Class name of the file browser. Optional. Default: ''.
+	 */
+	className?: string | undefined;
+	/**
+	 * - direct data without server calls
+	 */
+	data?:
+		| (
+				| {
+						[x: string]: any;
+				  }
+				| Array<any>
+		  )
+		| undefined;
+	/**
+	 * - File server url. Required. Can be overridden in browser.
+	 */
+	url?: string | undefined;
+	/**
+	 * - File server http header. Required. Can be overridden in browser.
+	 */
+	headers?:
+		| {
+				[x: string]: string;
+		  }
+		| undefined;
+	/**
+	 * - Function that actions when an item is clicked. Required. Can be overridden in browser.
+	 */
+	selectorHandler: (target: Node) => void;
+	/**
+	 * - Whether to use the search function. Optional. Default: true.
+	 */
+	useSearch?: boolean | undefined;
+	/**
+	 * - File server search url. Optional. Can be overridden in browser.
+	 */
+	searchUrl?: string | undefined;
+	/**
+	 * - File server search http header. Optional. Can be overridden in browser.
+	 */
+	searchUrlHeader?:
+		| {
+				[x: string]: string;
+		  }
+		| undefined;
+	/**
+	 * - Class name of list div. Required. Can be overridden in browser.
+	 */
+	listClass?: string | undefined;
+	/**
+	 * - Function that defines the HTML of a file item. Required. Can be overridden in browser.
+	 */
+	drawItemHandler?: ((item: BrowserFile) => string) | undefined;
+	/**
+	 * - "props" argument to "drawItemHandler" function. Optional. Can be overridden in browser.
+	 */
+	props?: Array<any> | undefined;
+	/**
+	 * - Number of "div.se-file-item-column" to be created. Optional. Can be overridden in browser. Default: 4.
+	 */
+	columnSize?: number | undefined;
+	/**
+	 * - Default thumbnail
+	 */
+	thumbnail?: ((item: BrowserFile) => string) | undefined;
+};
+/**
+ * @typedef {Object} BrowserFile
+ * @property {string} [src=""] - Source url
+ * @property {string} [name=""] - File name | Folder name
+ * @property {string=} thumbnail - Thumbnail url
+ * @property {string=} alt - Image alt
+ * @property {Array<string>|string=} tag - Tag name list
+ * @property {string=} type - Type (image, video, audio, etc.)
+ * @property {string=} frame - Frame name (iframe, video, etc.)
+ * @property {BrowserFile | string=} _data - The folder's contents or an API URL.
+ * @property {boolean=} default - Whether this folder is the default selection.
+ * @property {Object<string, *>=} meta - Metadata
+ */
+/**
+ * @typedef BrowserParams
+ * @property {string} title - File browser window title. Required. Can be overridden in browser.
+ * @property {string=} className - Class name of the file browser. Optional. Default: ''.
+ * @property {Object<string, *>|Array<*>=} data - direct data without server calls
+ * @property {string=} url - File server url. Required. Can be overridden in browser.
+ * @property {Object<string, string>=} headers - File server http header. Required. Can be overridden in browser.
+ * @property {(target: Node) => void} selectorHandler - Function that actions when an item is clicked. Required. Can be overridden in browser.
+ * @property {boolean=} useSearch - Whether to use the search function. Optional. Default: true.
+ * @property {string=} searchUrl - File server search url. Optional. Can be overridden in browser.
+ * @property {Object<string, string>=} searchUrlHeader - File server search http header. Optional. Can be overridden in browser.
+ * @property {string=} listClass - Class name of list div. Required. Can be overridden in browser.
+ * @property {(item: BrowserFile) => string=} drawItemHandler - Function that defines the HTML of a file item. Required. Can be overridden in browser.
+ * @property {Array<*>=} props - "props" argument to "drawItemHandler" function. Optional. Can be overridden in browser.
+ * @property {number=} columnSize - Number of "div.se-file-item-column" to be created. Optional. Can be overridden in browser. Default: 4.
+ * @property {((item: BrowserFile) => string)=} thumbnail - Default thumbnail
+ */
+/**
+ * @class
+ * @description File browser plugin
+ */
+declare class Browser extends CoreInjector {
+	/**
+	 * @constructor
+	 * @param {*} inst The instance object that called the constructor.
+	 * @param {BrowserParams} params Browser options
+	 */
+	constructor(inst: any, params: BrowserParams);
+	useSearch: boolean;
+	kind: any;
+	inst: any;
+	area: HTMLElement;
+	header: HTMLElement;
+	titleArea: HTMLElement;
+	tagArea: HTMLElement;
+	body: HTMLElement;
+	list: HTMLElement;
+	side: HTMLElement;
+	wrapper: HTMLElement;
+	_loading: HTMLElement;
+	title: string;
+	listClass: string;
+	directData:
+		| any[]
+		| {
+				[x: string]: any;
+		  };
+	url: string;
+	urlHeader: {
+		[x: string]: string;
+	};
+	searchUrl: string;
+	searchUrlHeader: {
+		[x: string]: string;
+	};
+	drawItemHandler: any;
+	selectorHandler: (target: Node) => void;
+	columnSize: number;
+	folderDefaultPath: string;
+	closeArrow: string;
+	openArrow: string;
+	icon_folder: string;
+	icon_folder_item: string;
+	icon_item: string;
+	/**
+	 * @type {Array<BrowserFile>}
+	 */
+	items: Array<BrowserFile>;
+	/**
+	 * @type {Object<string, {name: string, meta: Object<string, *>}>}
+	 */
+	folders: {
+		[x: string]: {
+			name: string;
+			meta: {
+				[x: string]: any;
+			};
+		};
+	};
+	/**
+	 * @type {Object<string, {key?: string, name?: string, children?: *}>}
+	 */
+	tree: {
+		[x: string]: {
+			key?: string;
+			name?: string;
+			children?: any;
+		};
+	};
+	/**
+	 * @type {BrowserFile}
+	 */
+	data: BrowserFile;
+	selectedTags: any[];
+	keyword: string;
+	sideInner: HTMLElement;
+	_closeSignal: boolean;
+	_bindClose: any;
+	__globalEventHandler: (e: any) => void;
+	apiManager: ApiManager;
+	sideOpenBtn: HTMLButtonElement;
+	/**
+	 * @description Open a file browser plugin
+	 * @param {Object} [params={}]
+	 * @param {string=} params.listClass - Class name of list div. If not, use "this.listClass".
+	 * @param {string=} params.title - File browser window title. If not, use "this.title".
+	 * @param {string=} params.url - File server url. If not, use "this.url".
+	 * @param {Object<string, string>=} params.urlHeader - File server http header. If not, use "this.urlHeader".
+	 */
+	open(params?: {
+		listClass?: string | undefined;
+		title?: string | undefined;
+		url?: string | undefined;
+		urlHeader?:
+			| {
+					[x: string]: string;
+			  }
+			| undefined;
+	}): void;
+	/**
+	 * @description Close a browser plugin
+	 * - The plugin's "init" method is called.
+	 */
+	close(): void;
+	/**
+	 * @description Search files
+	 * @param {string} keyword - Search keyword
+	 */
+	search(keyword: string): void;
+	/**
+	 * @description Filter items by tag
+	 * @param {Array<BrowserFile>} items - Items to filter
+	 * @returns {Array<BrowserFile>}
+	 */
+	tagfilter(items: Array<BrowserFile>): Array<BrowserFile>;
+	/**
+	 * @description Show file browser loading box
+	 */
+	showBrowserLoading(): void;
+	/**
+	 * @description Close file browser loading box
+	 */
+	closeBrowserLoading(): void;
+	/**
+	 * @private
+	 * @description Fetches the file list from the server.
+	 * @param {string} url - The file server URL.
+	 * @param {Object<string, string>} urlHeader - The HTTP headers for the request.
+	 * @param {boolean} pageLoading - Indicates if this is a paginated request.
+	 */
+	private _drawFileList;
+	/**
+	 * @private
+	 * @description Updates the displayed list of file items.
+	 * @param {Array<BrowserFile>} items - The file items to display.
+	 * @param {boolean} update - Whether to update the tags.
+	 */
+	private _drawListItem;
+	/**
+	 * @private
+	 * @description Adds a global event listener for closing the browser.
+	 */
+	private __addGlobalEvent;
+	/**
+	 * @private
+	 * @description Removes the global event listener for closing the browser.
+	 */
+	private __removeGlobalEvent;
+	/**
+	 * @private
+	 * @description Renders the file items or folder structure from data.
+	 * @param {BrowserFile[]|BrowserFile} data - The data representing the file structure.
+	 * @returns {boolean} True if rendering was successful, false otherwise.
+	 */
+	private __drowItems;
+	/**
+	 * @private
+	 * @description Parses folder data into a structured format.
+	 * @param {BrowserFile} data - The folder data.
+	 * @param {string} [path] - The current path in the folder hierarchy.
+	 */
+	private __parseFolderData;
+	/**
+	 * @private
+	 * @description Creates a nested folder list from parsed data.
+	 * @param {BrowserFile[]|BrowserFile} folderData - The structured folder data.
+	 * @param {HTMLElement} parentElement - The parent element to append folder structure to.
+	 */
+	private __createFolderList;
+	#private;
+}
+import CoreInjector from '../editorInjector/_core';
+import ApiManager from './ApiManager';

package/types/modules/ColorPicker.d.ts

@@ -0,0 +1,131 @@
+export default ColorPicker;
+export type HueSliderParams = import('./HueSlider').HueSliderParams;
+export type HueSliderColor = import('./HueSlider').HueSliderColor;
+export type ColorPickerParams = {
+	/**
+	 * color list
+	 */
+	colorList?:
+		| Array<
+				| string
+				| {
+						value: string;
+						name: string;
+				  }
+		  >
+		| undefined;
+	/**
+	 * Number of colors to be displayed in one line
+	 */
+	splitNum?: number | undefined;
+	/**
+	 * Default color
+	 */
+	defaultColor?: string | undefined;
+	/**
+	 * Disable HEX input
+	 */
+	disableHEXInput?: boolean | undefined;
+	/**
+	 * Disable remove button
+	 */
+	disableRemove?: boolean | undefined;
+	/**
+	 * hue slider options
+	 */
+	hueSliderOptions?: HueSliderParams | undefined;
+};
+/**
+ * @typedef {import('./HueSlider').HueSliderParams} HueSliderParams
+ */
+/**
+ * @typedef {import('./HueSlider').HueSliderColor} HueSliderColor
+ */
+/**
+ * @typedef {Object} ColorPickerParams
+ * @property {Array<string|{value: string, name: string}>=} [colorList=[]] color list
+ * @property {number=} [splitNum=0] Number of colors to be displayed in one line
+ * @property {string=} [defaultColor] Default color
+ * @property {boolean=} [disableHEXInput=false] Disable HEX input
+ * @property {boolean=} [disableRemove=false] Disable remove button
+ * @property {HueSliderParams=} [hueSliderOptions] hue slider options
+ */
+/**
+ * @class
+ * @description Create a color picker element and register for related events. (this.target)
+ * - When calling the color selection, "submit", and "remove" buttons, the "action" method of the instance is called with the "color" value as an argument.
+ */
+declare class ColorPicker extends CoreInjector {
+	/**
+	 * @constructor
+	 * @param {*} inst The instance object that called the constructor.
+	 * @param {string} styles style property ("color", "backgroundColor"..)
+	 * @param {ColorPickerParams} params Color picker options
+	 */
+	constructor(inst: any, styles: string, params: ColorPickerParams);
+	kind: any;
+	inst: any;
+	target: HTMLElement;
+	targetButton: Node;
+	inputElement: HTMLInputElement;
+	styleProperties: string;
+	splitNum: number;
+	defaultColor: string;
+	hueSliderOptions: import('./HueSlider').HueSliderParams;
+	parentDisplay: string;
+	currentColor: string;
+	parentForm: HTMLElement[];
+	colorList: any[] | NodeListOf<Element>;
+	hueSlider: HueSlider;
+	checkedIcon: HTMLElement;
+	parentFormDisplay: any[];
+	/**
+	 * @description Displays or resets the currently selected color at color list.
+	 * @param {Node|string} nodeOrColor Current Selected node
+	 * @param {Node} target target
+	 */
+	init(nodeOrColor: Node | string, target: Node): void;
+	/**
+	 * @description Store color values
+	 * @param {string} hexColorStr Hax color value
+	 */
+	setHexColor(hexColorStr: string): void;
+	/**
+	 * @description Close hue slider
+	 */
+	hueSliderClose(): void;
+	/**
+	 * @private
+	 * @description Set color at input element
+	 * @param {string} hexColorStr Hax color value
+	 */
+	private _setInputText;
+	/**
+	 * @private
+	 * @description Gets color value at color property of node
+	 * @param {Node} node Selected node
+	 * @returns {string}
+	 */
+	private _getColorInNode;
+	/**
+	 * @private
+	 * @description Converts color values of other formats to hex color values and returns.
+	 * @param {string} colorName Color value
+	 * @returns {string}
+	 */
+	private _colorName2hex;
+	/**
+	 * @editorMethod Modules.HueSlider
+	 * @description This method is called when the color is selected in the hue slider.
+	 * @param {HueSliderColor} color - Color object
+	 */
+	hueSliderAction(color: HueSliderColor): void;
+	/**
+	 * @editorMethod Modules.HueSlider
+	 * @description This method is called when the hue slider is closed.
+	 */
+	hueSliderCancelAction(): void;
+	#private;
+}
+import CoreInjector from '../editorInjector/_core';
+import { HueSlider } from '../modules';

package/types/modules/Controller.d.ts

@@ -0,0 +1,231 @@
+export default Controller;
+export type ControllerInfo = {
+	/**
+	 * The controller instance
+	 */
+	inst: any;
+	/**
+	 * The controller position ("bottom"|"top")
+	 */
+	position?: string;
+	/**
+	 * The controller element
+	 */
+	form?: HTMLElement;
+	/**
+	 * The controller target element
+	 */
+	target?: HTMLElement | Range;
+	/**
+	 * If the controller is not in the "carrierWrapper", set it to true.
+	 */
+	notInCarrier?: boolean;
+	/**
+	 * If the target is a Range, set it to true.
+	 */
+	isRangeTarget?: boolean;
+	/**
+	 * If the controller is fixed and should not be closed, set it to true.
+	 */
+	fixed?: boolean;
+};
+export type ControllerParams = {
+	/**
+	 * Controller position
+	 */
+	position?: 'top' | 'bottom';
+	/**
+	 * If the controller is in the WYSIWYG area, set it to true.
+	 */
+	isWWTarget?: boolean | undefined;
+	/**
+	 * Method to be called when the controller is closed.
+	 */
+	initMethod?: (() => void) | undefined;
+	/**
+	 * If true, When the "controller" is opened, buttons without the "se-component-enabled" class are disabled.
+	 */
+	disabled?: boolean | undefined;
+	/**
+	 * The parent "controller" array when "controller" is opened nested.
+	 */
+	parents?: Array<HTMLElement> | undefined;
+	/**
+	 * If true, the parent element is hidden when the controller is opened.
+	 */
+	parentsHide?: boolean | undefined;
+	/**
+	 * If the controller is inside a form, set it to true.
+	 */
+	isInsideForm?: boolean | undefined;
+	/**
+	 * If the controller is outside a form, set it to true.
+	 */
+	isOutsideForm?: boolean | undefined;
+};
+/**
+ * @typedef {Object} ControllerInfo
+ * @property {*} inst The controller instance
+ * @property {string} [position="bottom"] The controller position ("bottom"|"top")
+ * @property {HTMLElement} [form=null] The controller element
+ * @property {HTMLElement|Range} [target=null] The controller target element
+ * @property {boolean} [notInCarrier=false] If the controller is not in the "carrierWrapper", set it to true.
+ * @property {boolean} [isRangeTarget=false] If the target is a Range, set it to true.
+ * @property {boolean} [fixed=false] If the controller is fixed and should not be closed, set it to true.
+ */
+/**
+ * @typedef {Object} ControllerParams
+ * @property {"top"|"bottom"} [position="bottom"] Controller position
+ * @property {boolean=} [isWWTarget=true] If the controller is in the WYSIWYG area, set it to true.
+ * @property {() => void=} [initMethod=null] Method to be called when the controller is closed.
+ * @property {boolean=} [disabled=false] If true, When the "controller" is opened, buttons without the "se-component-enabled" class are disabled.
+ * @property {Array<HTMLElement>=} [parents=[]] The parent "controller" array when "controller" is opened nested.
+ * @property {boolean=} [parentsHide=false] If true, the parent element is hidden when the controller is opened.
+ * @property {boolean=} [isInsideForm=false] If the controller is inside a form, set it to true.
+ * @property {boolean=} [isOutsideForm=false] If the controller is outside a form, set it to true.
+ */
+/**
+ * @class
+ * @description Controller module class that handles the UI and interaction logic for a specific editor controller element.
+ */
+declare class Controller extends EditorInjector {
+	/**
+	 * @constructor
+	 * @param {*} inst The instance object that called the constructor.
+	 * @param {Node} element Controller element
+	 * @param {ControllerParams} params Controller options
+	 * @param {?string=} _name An optional name for the controller key.
+	 */
+	constructor(inst: any, element: Node, params: ControllerParams, _name?: (string | null) | undefined);
+	kind: any;
+	inst: any;
+	form: HTMLFormElement;
+	isOpen: boolean;
+	currentTarget: Node;
+	currentPositionTarget: Node | Range;
+	isWWTarget: boolean;
+	position: 'top' | 'bottom';
+	disabled: boolean;
+	parents: HTMLElement[];
+	parentsHide: boolean;
+	isInsideForm: boolean;
+	isOutsideForm: boolean;
+	_initMethod: () => void;
+	__globalEventHandlers: {
+		keydown: any;
+		mousedown: any;
+	};
+	_bindClose_key: any;
+	_bindClose_mouse: any;
+	/** @type {{left?: number, top?: number, addOfffset?: {left?: number, top?: number}}} */
+	__offset: {
+		left?: number;
+		top?: number;
+		addOfffset?: {
+			left?: number;
+			top?: number;
+		};
+	};
+	__addOffset: {
+		left: number;
+		top: number;
+	};
+	__shadowRootEventForm: HTMLFormElement;
+	__shadowRootEventListener: (e: any) => any;
+	/**
+	 * @description Open a modal plugin
+	 * @param {Node|Range} target Target element
+	 * @param {Node} [positionTarget] Position 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, When the "controller" is opened, buttons without the "se-component-enabled" class are disabled. (default: this.disabled)
+	 * @param {{left?: number, top?: number}=} params.addOffset Additional offset values
+	 */
+	open(
+		target: Node | Range,
+		positionTarget?: Node,
+		{
+			isWWTarget,
+			initMethod,
+			disabled,
+			addOffset
+		}?: {
+			isWWTarget?: boolean | undefined;
+			initMethod?: (() => void) | undefined;
+			disabled?: boolean | undefined;
+			addOffset?:
+				| {
+						left?: number;
+						top?: number;
+				  }
+				| undefined;
+		}
+	): void;
+	/**
+	 * @description Close a modal plugin
+	 * - The plugin's "init" method is called.
+	 * @param {boolean=} force If true, parent controllers are forcibly closed.
+	 */
+	close(force?: boolean | undefined): void;
+	/**
+	 * @description Hide controller
+	 */
+	hide(): void;
+	/**
+	 * @description Show controller
+	 */
+	show(): void;
+	/**
+	 * @description Reset controller position
+	 * @param {Node=} target
+	 */
+	resetPosition(target?: Node | undefined): void;
+	/**
+	 * @private
+	 * @description Show controller at editor area (controller elements, function, "controller target element(@Required)", "controller name(@Required)", etc..)
+	 * @param {HTMLFormElement} form Controller element
+	 * @param {Node|Range} target Controller target element
+	 * @param {boolean} isRangeTarget If the target is a Range, set it to true.
+	 */
+	private _controllerOn;
+	/**
+	 * @private
+	 * @description Hide controller at editor area (link button, image resize button..)
+	 */
+	private _controllerOff;
+	/**
+	 * @private
+	 * @description Specify the position of the controller.
+	 * @param {HTMLElement} controller Controller element.
+	 * @param {Node|Range} refer Element or Range that is the basis of the controller's position.
+	 */
+	private _setControllerPosition;
+	/**
+	 * @private
+	 * @description Adds global event listeners.
+	 * - When the controller is opened
+	 */
+	private __addGlobalEvent;
+	/**
+	 * @private
+	 * @description Removes global event listeners.
+	 * - When the ESC key is pressed, the controller is closed.
+	 */
+	private __removeGlobalEvent;
+	/**
+	 * @private
+	 * @description Checks if the controller is fixed and should not be closed.
+	 * @returns {boolean} True if the controller is fixed.
+	 */
+	private _checkFixed;
+	/**
+	 * @private
+	 * @description Checks if the given target is within a form or controller.
+	 * @param {Node} target The target element.
+	 * @returns {boolean} True if the target is inside a form or controller.
+	 */
+	private _checkForm;
+	#private;
+}
+import EditorInjector from '../editorInjector';