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

package/types/plugins/modal/image/index.d.ts

@@ -0,0 +1,281 @@
+import type {} from '../../../typedef';
+export default Image_;
+export type ImagePluginOptions = {
+	/**
+	 * - Whether the image element can be resized.
+	 */
+	canResize?: boolean;
+	/**
+	 * - Whether to display the height input field.
+	 */
+	showHeightInput?: boolean;
+	/**
+	 * - The default width of the image. If a number is provided, `"px"` will be appended.
+	 */
+	defaultWidth?: string;
+	/**
+	 * - The default height of the image. If a number is provided, `"px"` will be appended.
+	 */
+	defaultHeight?: string;
+	/**
+	 * - Whether to allow only percentage-based sizing.
+	 */
+	percentageOnlySize?: boolean;
+	/**
+	 * - Whether to create a file input element for image uploads.
+	 */
+	createFileInput?: boolean;
+	/**
+	 * - Whether to create a URL input element for image insertion.
+	 */
+	createUrlInput?: boolean;
+	/**
+	 * - The URL endpoint for image file uploads.
+	 */
+	uploadUrl?: string;
+	/**
+	 * - Additional headers to include in the file upload request.
+	 */
+	uploadHeaders?: {
+		[x: string]: string;
+	};
+	/**
+	 * - The total upload size limit in bytes.
+	 */
+	uploadSizeLimit?: number;
+	/**
+	 * - The single file upload size limit in bytes.
+	 */
+	uploadSingleSizeLimit?: number;
+	/**
+	 * - Whether multiple image uploads are allowed.
+	 */
+	allowMultiple?: boolean;
+	/**
+	 * - The accepted file formats for image uploads.
+	 */
+	acceptedFormats?: string;
+	/**
+	 * - Whether to enable format type selection (`block` or `inline`).
+	 */
+	useFormatType?: boolean;
+	/**
+	 * - The default image format type (`"block"` or `"inline"`).
+	 */
+	defaultFormatType?: 'block' | 'inline';
+	/**
+	 * - Whether to retain the chosen format type after image insertion.
+	 */
+	keepFormatType?: boolean;
+	/**
+	 * - Whether to enable file uploads for linked images.
+	 */
+	linkEnableFileUpload?: boolean;
+	/**
+	 * - Figure controls.
+	 */
+	controls?: SunEditor.Module.Figure.Controls;
+	/**
+	 * - Component insertion behavior for selection and cursor placement. [default: `options.get('componentInsertBehavior')`]
+	 * - For inline components: places the cursor near the inserted component or selects it if no nearby range is available.
+	 * - For block components: executes behavior based on `selectMode`:
+	 * - `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;
+};
+export type ImageState = {
+	/**
+	 * - Size unit (`'px'` or `'%'`)
+	 */
+	sizeUnit: string;
+	/**
+	 * - Whether only percentage sizing is allowed
+	 */
+	onlyPercentage: boolean;
+	/**
+	 * - Image production index for batch operations
+	 */
+	produceIndex: number;
+};
+/**
+ * @typedef {Object} ImagePluginOptions
+ * @property {boolean} [canResize=true] - Whether the image element can be resized.
+ * @property {boolean} [showHeightInput=true] - Whether to display the height input field.
+ * @property {string} [defaultWidth="auto"] - The default width of the image. If a number is provided, `"px"` will be appended.
+ * @property {string} [defaultHeight="auto"] - The default height of the image. If a number is provided, `"px"` will be appended.
+ * @property {boolean} [percentageOnlySize=false] - Whether to allow only percentage-based sizing.
+ * @property {boolean} [createFileInput=true] - Whether to create a file input element for image uploads.
+ * @property {boolean} [createUrlInput=true] - Whether to create a URL input element for image insertion.
+ * @property {string} [uploadUrl] - The URL endpoint for image file uploads.
+ * @property {Object<string, string>} [uploadHeaders] - Additional headers to include in the file upload request.
+ * @property {number} [uploadSizeLimit] - The total upload size limit in bytes.
+ * @property {number} [uploadSingleSizeLimit] - The single file upload size limit in bytes.
+ * @property {boolean} [allowMultiple=false] - Whether multiple image uploads are allowed.
+ * @property {string} [acceptedFormats="image/*"] - The accepted file formats for image uploads.
+ * @property {boolean} [useFormatType=true] - Whether to enable format type selection (`block` or `inline`).
+ * @property {'block'|'inline'} [defaultFormatType="block"] - The default image format type (`"block"` or `"inline"`).
+ * @property {boolean} [keepFormatType=false] - Whether to retain the chosen format type after image insertion.
+ * @property {boolean} [linkEnableFileUpload] - Whether to enable file uploads for linked images.
+ * @property {SunEditor.Module.Figure.Controls} [controls] - Figure controls.
+ * @property {SunEditor.ComponentInsertType} [insertBehavior] - Component insertion behavior for selection and cursor placement. [default: `options.get('componentInsertBehavior')`]
+ * - For inline components: places the cursor near the inserted component or selects it if no nearby range is available.
+ * - For block components: executes behavior based on `selectMode`:
+ * - `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.
+ */
+/**
+ * @typedef {Object} ImageState
+ * @property {string} sizeUnit - Size unit (`'px'` or `'%'`)
+ * @property {boolean} onlyPercentage - Whether only percentage sizing is allowed
+ * @property {number} produceIndex - Image production index for batch operations
+ */
+/**
+ * @class
+ * @description Image plugin.
+ * - This plugin provides image insertion functionality within the editor, supporting both file upload and URL input.
+ */
+declare class Image_ extends PluginModal {
+	/**
+	 * @param {Element} node - The node to check.
+	 * @returns {Element|null} Returns a node if the node is a valid component.
+	 */
+	static component(node: Element): Element | null;
+	/**
+	 * @constructor
+	 * @param {SunEditor.Kernel} editor - The core kernel
+	 * @param {ImagePluginOptions} pluginOptions
+	 */
+	constructor(editor: SunEditor.Kernel, pluginOptions: ImagePluginOptions);
+	title: any;
+	pluginOptions: {
+		canResize: boolean;
+		showHeightInput: boolean;
+		defaultWidth: string;
+		defaultHeight: string;
+		percentageOnlySize: boolean;
+		createFileInput: boolean;
+		createUrlInput: boolean;
+		uploadUrl: string;
+		uploadHeaders: {
+			[x: string]: string;
+		};
+		uploadSizeLimit: number;
+		uploadSingleSizeLimit: number;
+		allowMultiple: boolean;
+		acceptedFormats: string;
+		useFormatType: boolean;
+		defaultFormatType: 'block' | 'inline';
+		keepFormatType: boolean;
+		insertBehavior: SunEditor.ComponentInsertType;
+	};
+	alignForm: HTMLElement;
+	anchor: ModalAnchorEditor;
+	modal: Modal;
+	figure: Figure;
+	fileManager: FileManager;
+	/** @type {ImageState} */
+	state: ImageState;
+	fileModalWrapper: HTMLElement;
+	imgInputFile: HTMLInputElement;
+	imgUrlFile: HTMLInputElement;
+	focusElement: HTMLInputElement;
+	altText: HTMLInputElement;
+	captionCheckEl: HTMLInputElement;
+	captionEl: HTMLElement;
+	previewSrc: HTMLElement;
+	as: 'block' | 'inline';
+	sizeService: ImageSizeService;
+	uploadService: ImageUploadService;
+	asBlock: HTMLButtonElement;
+	asInline: HTMLButtonElement;
+	/**
+	 * @template {keyof ImageState} K
+	 * @param {K} key
+	 * @param {ImageState[K]} value
+	 */
+	setState<K extends keyof ImageState>(key: K, value: ImageState[K]): void;
+	retainFormat(): {
+		query: string;
+		method: (element: HTMLElement) => void;
+	};
+	onFilePasteAndDrop(params: SunEditor.HookParams.FilePasteDrop): void;
+	modalOn(isUpdate: boolean): void;
+	modalAction(): Promise<boolean>;
+	modalInit(): void;
+	componentSelect(target: HTMLElement): void | boolean;
+	componentEdit(target: HTMLElement): void;
+	componentDestroy(target: HTMLElement): Promise<void>;
+	/**
+	 * @description Create an `image` 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 `image` component using the provided url.
+	 * @param {string} url File url
+	 * @returns {Promise<boolean>} If return `false`, the file upload will be canceled
+	 */
+	submitURL(url: string): Promise<boolean>;
+	/**
+	 * @description Creates a new image component, wraps it in a figure container with an optional anchor,
+	 * - applies size and alignment settings, and inserts it into the editor.
+	 * @param {string} src - The URL of the image to be inserted.
+	 * @param {?Node} anchor - An optional anchor element to wrap the image. If provided, a clone is used.
+	 * @param {string} width - The width value to be applied to the image.
+	 * @param {string} height - The height value to be applied to the image.
+	 * @param {string} align - The alignment setting for the image (e.g., 'left', 'center', 'right').
+	 * @param {{name: string, size: number}} file - File metadata associated with the image
+	 * @param {string} alt - The alternative text for the image.
+	 * @param {boolean} isLast - Indicates whether this is the last file in the batch (used for scroll and insert actions).
+	 */
+	create(
+		src: string,
+		anchor: Node | null,
+		width: string,
+		height: string,
+		align: string,
+		file: {
+			name: string;
+			size: number;
+		},
+		alt: string,
+		isLast: boolean,
+	): void;
+	/**
+	 * @description Creates a new inline image component, wraps it in an inline figure container with an optional anchor,
+	 * - applies size settings, and inserts it into the editor.
+	 * @param {string} src - The URL of the image to be inserted.
+	 * @param {?Node} anchor - An optional anchor element to wrap the image. If provided, a clone is used.
+	 * @param {string} width - The width value to be applied to the image.
+	 * @param {string} height - The height value to be applied to the image.
+	 * @param {{name: string, size: number}} file - File metadata associated with the image
+	 * @param {string} alt - The alternative text for the image.
+	 * @param {boolean} isLast - Indicates whether this is the last file in the batch (used for scroll and insert actions).
+	 */
+	createInline(
+		src: string,
+		anchor: Node | null,
+		width: string,
+		height: string,
+		file: {
+			name: string;
+			size: number;
+		},
+		alt: string,
+		isLast: boolean,
+	): void;
+	#private;
+}
+import { PluginModal } from '../../../interfaces';
+import { Modal } from '../../../modules/contract';
+import { Figure } from '../../../modules/contract';
+import { FileManager } from '../../../modules/manager';
+import { ModalAnchorEditor } from '../../../modules/ui';
+import ImageSizeService from './services/image.size';
+import ImageUploadService from './services/image.upload';

package/types/plugins/modal/image/render/image.html.d.ts

@@ -0,0 +1,45 @@
+import type {} from '../../../../typedef';
+/**
+ * @typedef {Object} ModalReturns_image
+ * @property {HTMLElement} html
+ * @property {HTMLElement} alignForm
+ * @property {HTMLElement} fileModalWrapper
+ * @property {HTMLInputElement} imgInputFile
+ * @property {HTMLInputElement} imgUrlFile
+ * @property {HTMLInputElement} altText
+ * @property {HTMLInputElement} captionCheckEl
+ * @property {HTMLElement} previewSrc
+ * @property {HTMLElement} tabs
+ * @property {HTMLButtonElement} galleryButton
+ * @property {HTMLInputElement} proportion
+ * @property {HTMLInputElement} inputX
+ * @property {HTMLInputElement} inputY
+ * @property {HTMLButtonElement} revertBtn
+ * @property {HTMLButtonElement} asBlock
+ * @property {HTMLButtonElement} asInline
+ * @property {HTMLButtonElement} fileRemoveBtn
+ *
+ * @param {SunEditor.Deps} $
+ * @param {*} pluginOptions
+ * @returns {ModalReturns_image}
+ */
+export function CreateHTML_modal({ lang, icons, plugins }: SunEditor.Deps, pluginOptions: any): ModalReturns_image;
+export type ModalReturns_image = {
+	html: HTMLElement;
+	alignForm: HTMLElement;
+	fileModalWrapper: HTMLElement;
+	imgInputFile: HTMLInputElement;
+	imgUrlFile: HTMLInputElement;
+	altText: HTMLInputElement;
+	captionCheckEl: HTMLInputElement;
+	previewSrc: HTMLElement;
+	tabs: HTMLElement;
+	galleryButton: HTMLButtonElement;
+	proportion: HTMLInputElement;
+	inputX: HTMLInputElement;
+	inputY: HTMLInputElement;
+	revertBtn: HTMLButtonElement;
+	asBlock: HTMLButtonElement;
+	asInline: HTMLButtonElement;
+	fileRemoveBtn: HTMLButtonElement;
+};

package/types/plugins/modal/image/services/image.size.d.ts

@@ -0,0 +1,55 @@
+import type {} from '../../../../typedef';
+/**
+ * @class ImageSizeService
+ * @description Handles image resizing, proportion calculations, and size input management.
+ */
+export class ImageSizeService {
+	/**
+	 * @param {import('../index').default} main - The main Image_ plugin instance.
+	 * @param {import('../render/image.html').ModalReturns_image} modalEl - Modal element
+	 */
+	constructor(main: import('../index').default, modalEl: import('../render/image.html').ModalReturns_image);
+	/**
+	 * @description Sets the width and height input values.
+	 * @param {string} w - Width value
+	 * @param {string} h - Height value
+	 */
+	setInputSize(w: string, h: string): void;
+	/**
+	 * @description Gets the current width and height input values.
+	 * @returns {{w: string, h: string}}
+	 */
+	getInputSize(): {
+		w: string;
+		h: string;
+	};
+	/**
+	 * @description Sets the original width and height of the image.
+	 * @param {string} w - Original width
+	 * @param {string} h - Original height
+	 */
+	setOriginSize(w: string, h: string): void;
+	/**
+	 * @description Applies the specified width and height to the image.
+	 * @param {string} w - Image width.
+	 * @param {string} h - Image height.
+	 */
+	applySize(w: string, h: string): void;
+	/**
+	 * @description Called when the modal is opened. Resets size inputs to default.
+	 */
+	on(): void;
+	/**
+	 * @description Prepares the size inputs and proportion state when an image is selected.
+	 * @param {SunEditor.Module.Figure.TargetInfo} figureInfo - Figure size information
+	 * @param {string} w - Current width
+	 * @param {string} h - Current height
+	 */
+	ready(figureInfo: SunEditor.Module.Figure.TargetInfo, w: string, h: string): void;
+	/**
+	 * @description Initializes the size service state.
+	 */
+	init(): void;
+	#private;
+}
+export default ImageSizeService;

package/types/plugins/modal/image/services/image.upload.d.ts

@@ -0,0 +1,24 @@
+import type {} from '../../../../typedef';
+/**
+ * @class ImageUploadService
+ * @description Handles image upload operations including file upload, URL upload, and `Base64` conversion.
+ */
+export class ImageUploadService {
+	/**
+	 * @param {import('../index').default} main - The main Image_ plugin instance.
+	 */
+	constructor(main: import('../index').default);
+	_base64RenderIndex: number;
+	/**
+	 * @description Uploads the image to the server.
+	 * @param {SunEditor.EventParams.ImageInfo} info - Image upload info.
+	 */
+	serverUpload(info: SunEditor.EventParams.ImageInfo): void;
+	/**
+	 * @description Handles image upload via URL.
+	 * @param {*} info - Image information.
+	 */
+	urlUpload(info: any): void;
+	#private;
+}
+export default ImageUploadService;

package/types/plugins/modal/image/shared/image.constants.d.ts

@@ -0,0 +1,17 @@
+import type {} from '../../../../typedef';
+/**
+ * @description Image plugin constants
+ */
+export const DEFAULT_SVG_SIZE: '30%';
+export namespace SIZE_UNIT {
+	let PERCENTAGE: string;
+	let PIXEL: string;
+}
+/**
+ * @type {{ BLOCK: 'block', INLINE: 'inline' }}
+ */
+export const FORMAT_TYPE: {
+	BLOCK: 'block';
+	INLINE: 'inline';
+};
+export const DEFAULT_ACCEPTED_FORMATS: 'image/*';

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

@@ -1,13 +1,6 @@
+import type {} from '../../typedef';
 export default Link;
-export type LinkPluginOptions = {
-	/**
-	 * - Whether to display the link text.
-	 */
-	textToDisplay?: boolean;
-	/**
-	 * - Whether to display the link title.
-	 */
-	title?: boolean;
+export type LinkOptions = {
 	/**
 	 * - The URL endpoint for file uploads.
 	 */
@@ -31,99 +24,86 @@ export type LinkPluginOptions = {
 	 */
 	acceptedFormats?: string;
 };
+export type LinkPluginOptions = Omit<LinkOptions & import('../../modules/ui/ModalAnchorEditor').ModalAnchorEditorParams, ''>;
 /**
- * @typedef {Object} LinkPluginOptions
- * @property {boolean} [textToDisplay=true] - Whether to display the link text.
- * @property {boolean} [title=true] - Whether to display the link title.
+ * @typedef {Object} LinkOptions
  * @property {string} [uploadUrl] - The URL endpoint for file uploads.
  * @property {Object<string, string>} [uploadHeaders] - Additional headers for 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 {string} [acceptedFormats] - Accepted file formats for link uploads.
  */
+/**
+ * @typedef {Omit<LinkOptions & import('../../modules/ui/ModalAnchorEditor').ModalAnchorEditorParams, ''>} LinkPluginOptions
+ */
 /**
  * @class
  * @description Link plugin.
  * - This plugin provides link insertion and editing functionality within the editor.
  * - It also supports file uploads if an upload URL is provided.
  */
-declare class Link extends EditorInjector {
-	static key: string;
-	static type: string;
-	static className: string;
+declare class Link extends PluginModal {
 	/**
 	 * @constructor
-	 * @param {__se__EditorCore} editor - The root editor instance
+	 * @param {SunEditor.Kernel} editor - The core kernel
 	 * @param {LinkPluginOptions} pluginOptions
 	 */
-	constructor(editor: __se__EditorCore, pluginOptions: LinkPluginOptions);
+	constructor(editor: SunEditor.Kernel, pluginOptions: LinkPluginOptions);
 	title: any;
-	icon: string;
+	target: HTMLAnchorElement;
 	isUpdateState: boolean;
 	pluginOptions: {
 		uploadUrl: string;
 		uploadHeaders: {
 			[x: string]: string;
+		} & {
+			[x: string]: string;
 		};
 		uploadSizeLimit: number;
 		uploadSingleSizeLimit: number;
 		acceptedFormats: string;
 		enableFileUpload: boolean;
 		/**
-		 * - Whether to display the link text.
+		 * - Modal title display.
+		 */
+		title?: boolean;
+		/**
+		 * - Create Text to display input.
 		 */
 		textToDisplay?: boolean;
 		/**
-		 * - Whether to display the link title.
+		 * - Default checked value of the "Open in new window" checkbox.
 		 */
-		title?: boolean;
+		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?: {
+			default?: string;
+			check_new_window?: string;
+			check_bookmark?: string;
+		};
 	};
 	anchor: ModalAnchorEditor;
 	modal: Modal;
 	controller: Controller;
-	/**
-	 * @editorMethod Editor.EventManager
-	 * @description Executes the method that is called whenever the cursor position changes.
-	 * @param {?HTMLElement=} element - Node element where the cursor is currently located
-	 * @returns {boolean} - Whether the plugin is active
-	 * - If it returns "undefined", it will no longer be called in this scope.
-	 */
-	active(element?: (HTMLElement | null) | undefined): boolean;
-	/**
-	 * @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 Modules.Modal
-	 * @description This function is called when a form within a modal window is "submit".
-	 * @returns {boolean} Success or failure
-	 */
-	modalAction(): 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
-	 */
+	active(element: HTMLElement | null, target: HTMLElement | null): boolean | void;
+	modalOn(isUpdate: boolean): void;
+	modalAction(): Promise<boolean>;
+	modalInit(): void;
 	controllerAction(target: HTMLButtonElement): void;
-	/**
-	 * @editorMethod Modules.Controller
-	 * @description This function is called before the "controller" before it is closed.
-	 */
-	close(): void;
+	controllerClose(): void;
+	#private;
 }
-import EditorInjector from '../../editorInjector';
-import { ModalAnchorEditor } from '../../modules';
-import { Modal } from '../../modules';
-import { Controller } from '../../modules';
+import { PluginModal } from '../../interfaces';
+import { Modal } from '../../modules/contract';
+import { Controller } from '../../modules/contract';
+import { ModalAnchorEditor } from '../../modules/ui';