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

package/types/modules/HueSlider.d.ts

@@ -0,0 +1,136 @@
+export default HueSlider;
+export type ControllerParams_hueSlider = import('../modules/Controller').ControllerParams;
+export type HueSliderColor = {
+	/**
+	 * - HEX color
+	 */
+	hex: string;
+	/**
+	 * - Red color value
+	 */
+	r: number;
+	/**
+	 * - Green color value
+	 */
+	g: number;
+	/**
+	 * - Blue color value
+	 */
+	b: number;
+	/**
+	 * - Hue color value
+	 */
+	h: number;
+	/**
+	 * - Saturation color value
+	 */
+	s: number;
+	/**
+	 * - Lightness color value
+	 */
+	l: number;
+};
+export type HueSliderParams = {
+	/**
+	 * The form element to attach the hue slider.
+	 */
+	form?: Node;
+	/**
+	 * Whether to create a new form element.
+	 */
+	isNewForm?: boolean;
+	/**
+	 * Controller options
+	 */
+	controllerOptions?: ControllerParams_hueSlider;
+};
+/**
+ * @typedef {import('../modules/Controller').ControllerParams} ControllerParams_hueSlider
+ */
+/**
+ * @typedef {Object} HueSliderColor
+ * @property {string} hex - HEX color
+ * @property {number} r - Red color value
+ * @property {number} g - Green color value
+ * @property {number} b - Blue color value
+ * @property {number} h - Hue color value
+ * @property {number} s - Saturation color value
+ * @property {number} l - Lightness color value
+ */
+/**
+ * @typedef {Object} HueSliderParams
+ * @property {Node} [form] The form element to attach the hue slider.
+ * @property {boolean} [isNewForm] Whether to create a new form element.
+ * @property {ControllerParams_hueSlider} [controllerOptions] Controller options
+ */
+/**
+ * @class
+ * @description Create a Hue slider. (only create one at a time)
+ * - When you call the .attach() method, the hue slider is appended to the form element.
+ * It must be called every time it is used.
+ */
+declare class HueSlider {
+	/**
+	 * @constructor
+	 * @param {*} inst The instance object that called the constructor.
+	 * @param {HueSliderParams} [params={}] Hue slider options
+	 * @param {string} [className=""] The class name of the hue slider.
+	 */
+	constructor(inst: any, params?: HueSliderParams, className?: string);
+	editor: any;
+	eventManager: any;
+	inst: any;
+	form: Node;
+	ctx: {
+		wheelX: number;
+		wheelY: number;
+		lightness: number;
+		wheelPointerX: string;
+		wheelPointerY: string;
+		gradientPointerX: string;
+		color: {
+			hex: string;
+			r: number;
+			g: number;
+			b: number;
+			h: number;
+			s: number;
+			l: number;
+		};
+	};
+	isOpen: boolean;
+	controlle: any;
+	__globalMouseDown: any;
+	__globalMouseMove: any;
+	__globalMouseUp: any;
+	controller: Controller;
+	/**
+	 * @description Get the current color information.
+	 * @returns {HueSliderColor} color information
+	 */
+	get(): HueSliderColor;
+	/**
+	 * @description Open the hue slider.
+	 * @param {Node} target The element to attach the hue slider.
+	 */
+	open(target: Node): void;
+	/**
+	 * @description Reset information and close the hue slider.
+	 */
+	off(): void;
+	/**
+	 * @description Close the hue slider. (include off method)
+	 * - Call the instance's hueSliderCancelAction method.
+	 */
+	close(): void;
+	/**
+	 * @description Attach the hue slider to the form element.
+	 * @param {?Node=} form The element to attach the hue slider.
+	 */
+	attach(form?: (Node | null) | undefined): void;
+	/**
+	 * @description Initialize the hue slider information.
+	 */
+	init(): void;
+}
+import Controller from './Controller';

package/types/modules/Modal.d.ts

@@ -0,0 +1,111 @@
+export default Modal;
+/**
+ * @class
+ * @description Modal window module
+ */
+declare class Modal extends CoreInjector {
+	/**
+	 * @description Create a file input tag in the modal window.
+	 * @param {{icons: __se__EditorCore['icons'], lang: __se__EditorCore['lang']}} param0 - icons and language object
+	 * @param {{acceptedFormats: string, allowMultiple}} param1 - options
+	 * - acceptedFormats: "image/*, video/*, audio/*", etc.
+	 * - allowMultiple: true or false
+	 * @returns {string} HTML string
+	 */
+	static CreateFileInput(
+		{
+			icons,
+			lang
+		}: {
+			icons: __se__EditorCore['icons'];
+			lang: __se__EditorCore['lang'];
+		},
+		{
+			acceptedFormats,
+			allowMultiple
+		}: {
+			acceptedFormats: string;
+			allowMultiple: any;
+		}
+	): string;
+	/**
+	 * @description A function called when the contents of "input" have changed and you want to adjust the style.
+	 * @param {Element} wrapper - Modal file input wrapper(.se-flex-input-wrapper)
+	 * @param {FileList|File[]} files - FileList object
+	 */
+	static OnChangeFile(wrapper: Element, files: FileList | File[]): void;
+	/**
+	 * @description Modal window module
+	 * @param {* & {editor: __se__EditorCore}} inst The instance object that called the constructor.
+	 * @param {Element} element Modal element
+	 */
+	constructor(
+		inst: any & {
+			editor: __se__EditorCore;
+		},
+		element: Element
+	);
+	offset: import('../core/class/offset').default;
+	ui: import('../core/class/ui').default;
+	inst: any;
+	kind: any;
+	form: HTMLElement;
+	isUpdate: boolean;
+	/** @type {HTMLInputElement} */
+	focusElement: HTMLInputElement;
+	/** @type {HTMLElement} */
+	_modalArea: HTMLElement;
+	/** @type {HTMLElement} */
+	_modalInner: HTMLElement;
+	_closeListener: any[];
+	_bindClose: any;
+	_onClickEvent: any;
+	_closeSignal: boolean;
+	/** @type {HTMLElement} */
+	_resizeBody: HTMLElement;
+	_currentHandle: HTMLElement;
+	__resizeDir: string;
+	__offetTop: number;
+	__offetLeft: number;
+	__globalEventHandlers: {
+		mousemove: any;
+		mouseup: any;
+	};
+	_bindClose_mousemove: any;
+	_bindClose_mouseup: any;
+	/**
+	 * @description Open a modal plugin
+	 * - The plugin's "init" method is called.
+	 */
+	open(): void;
+	/**
+	 * @description Close a modal plugin
+	 * - The plugin's "init" and "off" method is called.
+	 */
+	close(): void;
+	/**
+	 * @private
+	 * @description Fixes the current controller's display state when the modal is opened or closed.
+	 * @param {boolean} fixed - Whether to fix or unfix the controller.
+	 */
+	private _fixCurrentController;
+	/**
+	 * @private
+	 * @description Saves the current offset position of the modal for resizing calculations.
+	 * @returns {__se__Class_OffsetGlobalInfo} The offset position of the modal.
+	 */
+	private _saveOffset;
+	/**
+	 * @private
+	 * @description Adds global event listeners for resizing the modal.
+	 * @param {string} dir - The direction in which resizing is occurring.
+	 */
+	private __addGlobalEvent;
+	/**
+	 * @private
+	 * @description Removes global event listeners related to modal resizing.
+	 */
+	private __removeGlobalEvent;
+	#private;
+}
+import CoreInjector from '../editorInjector/_core';

package/types/modules/ModalAnchorEditor.d.ts

@@ -0,0 +1,236 @@
+export default ModalAnchorEditor;
+export type RELAttr = {
+	default?: string;
+	check_new_window?: string;
+	check_bookmark?: string;
+};
+export type ModalAnchorEditorParams = {
+	/**
+	 * - Modal title display.
+	 */
+	title?: boolean;
+	/**
+	 * - Create Text to display input.
+	 */
+	textToDisplay?: boolean;
+	/**
+	 * - Default checked value of the "Open in new window" checkbox.
+	 */
+	openNewWindow?: boolean;
+	/**
+	 * - If true, disables the automatic prefixing of the host URL to the value of the link.
+	 */
+	noAutoPrefix?: boolean;
+	/**
+	 * - The "rel" attribute list of anchor tag.
+	 */
+	relList?: Array<string>;
+	/**
+	 * - Default "rel" attributes of anchor tag.
+	 */
+	defaultRel?: RELAttr;
+	/**
+	 * - File upload URL.
+	 */
+	uploadUrl?: string | undefined;
+	/**
+	 * - File upload headers.
+	 */
+	uploadHeaders?:
+		| {
+				[x: string]: string;
+		  }
+		| undefined;
+	/**
+	 * - File upload size limit.
+	 */
+	uploadSizeLimit?: number | undefined;
+	/**
+	 * - File upload single size limit.
+	 */
+	uploadSingleSizeLimit?: number | undefined;
+	/**
+	 * - File upload accepted formats.
+	 */
+	acceptedFormats?: string | undefined;
+	/**
+	 * - If true, enables file upload.
+	 */
+	enableFileUpload?: boolean | undefined;
+};
+/**
+ * @typedef {{default?: string, check_new_window?: string, check_bookmark?: string}} RELAttr
+ */
+/**
+ * @typedef {Object} ModalAnchorEditorParams
+ * @property {boolean} [title=false] - Modal title display.
+ * @property {boolean} [textToDisplay=''] - Create Text to display input.
+ * @property {boolean} [openNewWindow=false] - Default checked value of the "Open in new window" checkbox.
+ * @property {boolean} [noAutoPrefix=false] - If true, disables the automatic prefixing of the host URL to the value of the link.
+ * @property {Array<string>} [relList=[]] - The "rel" attribute list of anchor tag.
+ * @property {RELAttr} [defaultRel={}] - Default "rel" attributes of anchor tag.
+ * @property {string=} uploadUrl - File upload URL.
+ * @property {Object<string, string>=} uploadHeaders - File upload headers.
+ * @property {number=} uploadSizeLimit - File upload size limit.
+ * @property {number=} uploadSingleSizeLimit - File upload single size limit.
+ * @property {string=} acceptedFormats - File upload accepted formats.
+ * @property {boolean=} enableFileUpload - If true, enables file upload.
+ * @example "REL" structure
+    {
+        default: 'nofollow', // Default rel
+        check_new_window: 'noreferrer noopener', // When "open new window" is checked
+        check_bookmark: 'bookmark' // When "bookmark" is checked
+    }
+    If true, disables the automatic prefixing of the host URL to the value of the link.
+ */
+/**
+ * @class
+ * @description Modal form Anchor tag editor
+ * - Use it by inserting it into Modal in a plugin that uses Modal.
+ */
+declare class ModalAnchorEditor extends EditorInjector {
+	/**
+	 * @constructor
+	 * @param {*} inst The instance object that called the constructor.
+	 * @param {Node} modalForm The modal form element
+	 * @param {ModalAnchorEditorParams} params ModalAnchorEditor options
+	 */
+	constructor(inst: any, modalForm: Node, params: ModalAnchorEditorParams);
+	openNewWindow: boolean;
+	relList: string[];
+	defaultRel: RELAttr;
+	noAutoPrefix: boolean;
+	uploadUrl: string;
+	uploadHeaders: {
+		[x: string]: string;
+	};
+	uploadSizeLimit: number;
+	uploadSingleSizeLimit: number;
+	input: HTMLElement;
+	fileManager: FileManager;
+	kink: any;
+	inst: any;
+	modalForm: HTMLElement;
+	host: string;
+	/** @type {HTMLInputElement} */
+	urlInput: HTMLInputElement;
+	/** @type {HTMLInputElement} */
+	displayInput: HTMLInputElement;
+	/** @type {HTMLInputElement} */
+	titleInput: HTMLInputElement;
+	/** @type {HTMLInputElement} */
+	newWindowCheck: HTMLInputElement;
+	/** @type {HTMLInputElement} */
+	downloadCheck: HTMLInputElement;
+	/** @type {HTMLElement} */
+	download: HTMLElement;
+	/** @type {HTMLElement} */
+	preview: HTMLElement;
+	/** @type {HTMLElement} */
+	bookmark: HTMLElement;
+	/** @type {HTMLButtonElement} */
+	bookmarkButton: HTMLButtonElement;
+	currentRel: any[];
+	currentTarget: HTMLAnchorElement;
+	linkValue: string;
+	_change: boolean;
+	_isRel: boolean;
+	/** @type {HTMLButtonElement} */
+	relButton: HTMLButtonElement;
+	/** @type {HTMLElement} */
+	relPreview: HTMLElement;
+	selectMenu_rel: SelectMenu;
+	selectMenu_bookmark: SelectMenu;
+	/**
+	 * @description Initialize.
+	 * - Sets the current anchor element to be edited.
+	 * @param {Node} element Modal target element
+	 */
+	set(element: Node): void;
+	/**
+	 * @description Opens the anchor editor modal and populates it with data.
+	 * @param {boolean} isUpdate - Indicates whether an existing anchor is being updated (`true`) or a new one is being created (`false`).
+	 */
+	on(isUpdate: boolean): void;
+	/**
+	 * @description Creates an anchor (`<a>`) element with the specified attributes.
+	 * @param {boolean} notText - If `true`, the anchor will not contain text content.
+	 * @returns {HTMLElement|null} - The newly created anchor element, or `null` if the URL is empty.
+	 */
+	create(notText: boolean): HTMLElement | null;
+	/**
+	 * @description Resets the ModalAnchorEditor to its initial state.
+	 */
+	init(): void;
+	/**
+	 * @private
+	 * @description Updates the anchor element with new attributes.
+	 * @param {HTMLAnchorElement} anchor - The anchor (`<a>`) element to update.
+	 * @param {string} url - The URL for the anchor's `href` attribute.
+	 * @param {string} displayText - The text to be displayed inside the anchor.
+	 * @param {string} title - The tooltip text (title attribute).
+	 * @param {boolean} notText - If `true`, the anchor will not contain text content.
+	 */
+	private _updateAnchor;
+	/**
+	 * @private
+	 * @description Checks if the given path is an internal bookmark.
+	 * @param {string} path - The URL or anchor link.
+	 * @returns {boolean} - `true` if the path is an internal bookmark, otherwise `false`.
+	 */
+	private _selfPathBookmark;
+	/**
+	 * @private
+	 * @description Updates the `rel` attribute list in the modal and preview.
+	 * @param {string} relAttr - The `rel` attribute string to set.
+	 */
+	private _setRel;
+	/**
+	 * @private
+	 * @description Generates a list of bookmark headers within the editor.
+	 * @param {string} urlValue - The current URL input value.
+	 */
+	private _createBookmarkList;
+	/**
+	 * @private
+	 * @description Updates the preview of the anchor link.
+	 * @param {string} value - The current URL value.
+	 */
+	private _setLinkPreview;
+	/**
+	 * @private
+	 * @description Merges the given `rel` attribute value with the current list.
+	 * @param {string} relAttr - The `rel` attribute to merge.
+	 * @returns {string} - The updated `rel` attribute string.
+	 */
+	private _relMerge;
+	/**
+	 * @private
+	 * @description Removes the specified `rel` attribute from the current list.
+	 * @param {string} relAttr - The `rel` attribute to remove.
+	 * @returns {string} - The updated `rel` attribute string.
+	 */
+	private _relDelete;
+	/**
+	 * @private
+	 * @description Registers a newly uploaded file and sets its URL in the modal form.
+	 * @param {Object<string, *>} response - The response object from the file upload request.
+	 */
+	private _register;
+	/**
+	 * @private
+	 * @description Handles file upload errors.
+	 * @param {Object<string, *>} response - The error response object.
+	 * @returns {Promise<void>}
+	 */
+	private _error;
+	/**
+	 * @description Handles the callback after a file upload completes.
+	 * @param {XMLHttpRequest} xmlHttp - The XMLHttpRequest object containing the response.
+	 */
+	_uploadCallBack(xmlHttp: XMLHttpRequest): void;
+	#private;
+}
+import EditorInjector from '../editorInjector';
+import FileManager from './FileManager';
+import SelectMenu from './SelectMenu';

package/types/modules/SelectMenu.d.ts

@@ -0,0 +1,194 @@
+export default SelectMenu;
+export type SelectMenuParams = {
+	/**
+	 * Position of the select menu, specified as "[left|right]-[middle|top|bottom]" or "[top|bottom]-[center|left|right]"
+	 */
+	position: string;
+	/**
+	 * Flag to determine if the checklist is enabled (true or false)
+	 */
+	checkList?: boolean;
+	/**
+	 * Optional text direction: "rtl" for right-to-left, "ltr" for left-to-right
+	 */
+	dir?: 'rtl' | 'ltr';
+	/**
+	 * Optional split number for horizontal positioning; defines how many items per row
+	 */
+	splitNum?: number;
+	/**
+	 * Optional method to call when the menu is opened
+	 */
+	openMethod?: (() => void) | undefined;
+	/**
+	 * Optional method to call when the menu is closed
+	 */
+	closeMethod?: (() => void) | undefined;
+};
+/**
+ * @typedef {Object} SelectMenuParams
+ * @property {string} position Position of the select menu, specified as "[left|right]-[middle|top|bottom]" or "[top|bottom]-[center|left|right]"
+ * @property {boolean} [checkList=false] Flag to determine if the checklist is enabled (true or false)
+ * @property {"rtl" | "ltr"} [dir="ltr"] Optional text direction: "rtl" for right-to-left, "ltr" for left-to-right
+ * @property {number} [splitNum=0] Optional split number for horizontal positioning; defines how many items per row
+ * @property {() => void=} openMethod Optional method to call when the menu is opened
+ * @property {() => void=} closeMethod Optional method to call when the menu is closed
+ */
+/**
+ * @class
+ * @description Creates a select menu
+ */
+declare class SelectMenu extends CoreInjector {
+	/**
+	 * @constructor
+	 * @param {*} inst The instance object that called the constructor.
+	 * @param {SelectMenuParams} params Select menu options
+	 */
+	constructor(inst: any, params: SelectMenuParams);
+	kink: any;
+	inst: any;
+	form: HTMLElement;
+	items: any[];
+	/** @type {HTMLLIElement[]} */
+	menus: HTMLLIElement[];
+	menuLen: number;
+	index: number;
+	item: any;
+	isOpen: boolean;
+	checkList: boolean;
+	position: string;
+	subPosition: string;
+	_dirPosition: string;
+	_dirSubPosition: string;
+	_textDirDiff: boolean;
+	splitNum: number;
+	horizontal: boolean;
+	openMethod: () => void;
+	closeMethod: () => void;
+	_refer: HTMLElement;
+	_keydownTarget: Window | HTMLInputElement;
+	_selectMethod: (command: string) => void;
+	_bindClose_key: any;
+	_bindClose_mousedown: any;
+	_bindClose_click: any;
+	_closeSignal: boolean;
+	__events: {
+		mousedown: any;
+		mousemove: any;
+		click: any;
+		keydown: any;
+	};
+	__eventHandlers: {
+		mousedown: any;
+		mousemove: any;
+		click: any;
+		keydown: any;
+	};
+	__globalEventHandlers: {
+		keydown: any;
+		mousedown: any;
+		click: any;
+	};
+	/**
+	 * @description Creates the select menu items.
+	 * @param {Array<string>|__se__NodeCollection} items - Command list of selectable items.
+	 * @param {Array<string>|__se__NodeCollection} [menus] - Optional list of menu display elements; defaults to `items`.
+	 */
+	create(items: Array<string> | __se__NodeCollection, menus?: Array<string> | __se__NodeCollection): void;
+	/**
+	 * @description Initializes the select menu and attaches it to a reference element.
+	 * @param {Node} referElement - The element that triggers the select menu.
+	 * @param {(command: string) => void} selectMethod - The function to execute when an item is selected.
+	 * @param {{class?: string, style?: string}} [attr={}] - Additional attributes for the select menu container.
+	 */
+	on(
+		referElement: Node,
+		selectMethod: (command: string) => void,
+		attr?: {
+			class?: string;
+			style?: string;
+		}
+	): void;
+	/**
+	 * @description Select menu open
+	 * @param {?string=} position "[left|right]-[middle|top|bottom] | [top|bottom]-[center|left|right]"
+	 * @param {?string=} onItemQuerySelector The querySelector string of the menu to be activated
+	 */
+	open(position?: (string | null) | undefined, onItemQuerySelector?: (string | null) | undefined): void;
+	/**
+	 * @description Select menu close
+	 */
+	close(): void;
+	/**
+	 * @description Get the index of the selected item
+	 * @param {number} index Item index
+	 * @returns
+	 */
+	getItem(index: number): any;
+	/**
+	 * @description Set the index of the selected item
+	 * @param {number} index Item index
+	 */
+	setItem(index: number): void;
+	/**
+	 * @private
+	 * @description Appends a formatted list of items to the menu.
+	 * @param {string} html - The HTML string representing the menu items.
+	 */
+	private _createFormat;
+	/**
+	 * @private
+	 * @description Resets the menu state and removes event listeners.
+	 */
+	private _init;
+	_onItem: Element;
+	/**
+	 * @private
+	 * @description Moves the selection up or down by a specified number of items.
+	 * @param {number} num - The number of items to move (negative for up, positive for down).
+	 */
+	private _moveItem;
+	/**
+	 * @private
+	 * @description Highlights and selects an item by index.
+	 * @param {number} selectIndex - The index of the item to select.
+	 */
+	private _selectItem;
+	/**
+	 * @private
+	 * @description Sets the position of the select menu relative to the reference element.
+	 * @param {string} position Menu position ("left"|"right") | ("top"|"bottom")
+	 * @param {string} subPosition Sub position ("middle"|"top"|"bottom") | ("center"|"left"|"right")
+	 * @param {string} [onItemQuerySelector] - A query selector string to highlight a specific item.
+	 * @param {boolean} [_re=false] - Whether this is a retry after adjusting the position.
+	 */
+	private _setPosition;
+	/**
+	 * @private
+	 * @description Selects an item and triggers the callback function.
+	 * @param {number} index - The index of the item to select.
+	 */
+	private _select;
+	/**
+	 * @private
+	 * @description Adds event listeners for menu interactions.
+	 */
+	private __addEvents;
+	/**
+	 * @private
+	 * @description Removes event listeners for menu interactions.
+	 */
+	private __removeEvents;
+	/**
+	 * @private
+	 * @description Adds global event listeners for closing the menu.
+	 */
+	private __addGlobalEvent;
+	/**
+	 * @private
+	 * @description Removes global event listeners for closing the menu.
+	 */
+	private __removeGlobalEvent;
+	#private;
+}
+import CoreInjector from '../editorInjector/_core';

package/types/modules/_DragHandle.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @module _DragHandle
+ * @description A module that handles drag and drop events.
+ * - this module is initialize in the `classes/component.js`.
+ */
+export const _DragHandle: Map<string, any>;
+export default _DragHandle;

package/types/modules/index.d.ts

@@ -0,0 +1,26 @@
+declare namespace _default {
+	export { _DragHandle };
+	export { ApiManager };
+	export { ColorPicker };
+	export { Controller };
+	export { Browser };
+	export { FileManager };
+	export { HueSlider };
+	export { Figure };
+	export { Modal };
+	export { ModalAnchorEditor };
+	export { SelectMenu };
+}
+export default _default;
+import _DragHandle from './_DragHandle';
+import ApiManager from './ApiManager';
+import ColorPicker from './ColorPicker';
+import Controller from './Controller';
+import Browser from './Browser';
+import FileManager from './FileManager';
+import HueSlider from './HueSlider';
+import Figure from './Figure';
+import Modal from './Modal';
+import ModalAnchorEditor from './ModalAnchorEditor';
+import SelectMenu from './SelectMenu';
+export { _DragHandle, ApiManager, ColorPicker, Controller, Browser, FileManager, HueSlider, Figure, Modal, ModalAnchorEditor, SelectMenu };