@flogeez/angular-tiptap-editor 2.0.2 → 2.1.0

package/index.d.ts

@@ -158,6 +158,8 @@ interface TiptapTranslations {
         linkPrompt: string;
         linkUrlPrompt: string;
         confirmDelete: string;
+        toggleEdit: string;
+        viewMode: string;
     };
     common: {
         cancel: string;
@@ -330,6 +332,8 @@ declare class TiptapI18nService {
         linkPrompt: string;
         linkUrlPrompt: string;
         confirmDelete: string;
+        toggleEdit: string;
+        viewMode: string;
     }>;
     readonly common: _angular_core.Signal<{
         cancel: string;
@@ -406,151 +410,6 @@ interface CustomSlashCommands {
     commands?: SlashCommandItem[];
 }
 
-interface ImageData {
-    src: string;
-    alt?: string;
-    title?: string;
-    width?: number;
-    height?: number;
-}
-interface ImageUploadResult {
-    src: string;
-    name: string;
-    size: number;
-    type: string;
-    width?: number;
-    height?: number;
-    originalSize?: number;
-}
-interface ResizeOptions {
-    width?: number;
-    height?: number;
-    maintainAspectRatio?: boolean;
-}
-/**
- * Context passed to the image upload handler containing information about the image
- */
-interface ImageUploadContext {
-    /** Original file being uploaded */
-    file: File;
-    /** Width of the processed image */
-    width: number;
-    /** Height of the processed image */
-    height: number;
-    /** MIME type of the image */
-    type: string;
-    /** Base64 data URL of the processed image (after compression/resize) */
-    base64: string;
-}
-/**
- * Result expected from a custom image upload handler.
- * Must contain at least the `src` property with the image URL.
- */
-interface ImageUploadHandlerResult {
-    /** URL of the uploaded image (can be a remote URL or any string) */
-    src: string;
-    /** Optional custom alt text */
-    alt?: string;
-    /** Optional custom title */
-    title?: string;
-}
-/**
- * Custom handler function for image uploads.
- * Allows users to implement their own image storage logic (e.g., upload to S3, Cloudinary, etc.)
- *
- * Can return either a Promise or an Observable (Angular-friendly).
- *
- * @param context - Context containing the image file and metadata
- * @returns Promise or Observable resolving to ImageUploadHandlerResult
- *
- * @example Using Promise (async/await)
- * ```typescript
- * uploadHandler: ImageUploadHandler = async (ctx) => {
- *   const formData = new FormData();
- *   formData.append('image', ctx.file);
- *   const result = await firstValueFrom(this.http.post<{url: string}>('/api/upload', formData));
- *   return { src: result.url };
- * };
- * ```
- *
- * @example Using Observable (Angular HttpClient)
- * ```typescript
- * uploadHandler: ImageUploadHandler = (ctx) => {
- *   const formData = new FormData();
- *   formData.append('image', ctx.file);
- *   return this.http.post<{url: string}>('/api/upload', formData).pipe(
- *     map(result => ({ src: result.url }))
- *   );
- * };
- * ```
- */
-type ImageUploadHandler = (context: ImageUploadContext) => Promise<ImageUploadHandlerResult> | Observable<ImageUploadHandlerResult>;
-declare class ImageService {
-    /** Signals for image state */
-    selectedImage: _angular_core.WritableSignal<ImageData | null>;
-    isImageSelected: _angular_core.Signal<boolean>;
-    /** Resizing state */
-    isResizing: _angular_core.WritableSignal<boolean>;
-    private i18n;
-    private readonly t;
-    /** Upload state signals */
-    isUploading: _angular_core.WritableSignal<boolean>;
-    uploadProgress: _angular_core.WritableSignal<number>;
-    uploadMessage: _angular_core.WritableSignal<string>;
-    /**
-     * Custom upload handler.
-     * If set, this handler replaces the default base64 conversion.
-     */
-    uploadHandler: ImageUploadHandler | null;
-    private currentEditor;
-    /** Select and track an image from the editor */
-    selectImage(editor: Editor): void;
-    clearSelection(): void;
-    /** Insert a new image and ensure it's selected */
-    insertImage(editor: Editor, imageData: ImageData): void;
-    /** Update attributes of the currently active image */
-    updateImageAttributes(editor: Editor, attributes: Partial<ImageData>): void;
-    /** Resize image with optional aspect ratio maintenance */
-    resizeImage(editor: Editor, options: ResizeOptions): void;
-    /** Predetermined resize helpers used by UI */
-    resizeImageToSmall(editor: Editor): void;
-    resizeImageToMedium(editor: Editor): void;
-    resizeImageToLarge(editor: Editor): void;
-    resizeImageToOriginal(editor: Editor): void;
-    /** Get current image dimensions */
-    getImageDimensions(editor: Editor): {
-        width: number;
-        height: number;
-    } | null;
-    /** Remove the selected image */
-    deleteImage(editor: Editor): void;
-    private updateSelectedImage;
-    /** Validate file type and size */
-    validateImage(file: File, maxSize?: number): {
-        valid: boolean;
-        error?: string;
-    };
-    /** Compress and process image on client side */
-    compressImage(file: File, quality?: number, maxWidth?: number, maxHeight?: number): Promise<ImageUploadResult>;
-    /** Core upload logic with progress tracking */
-    private uploadImageWithProgress;
-    private resetUploadState;
-    /** Main entry point for file upload and insertion */
-    uploadAndInsertImage(editor: Editor, file: File, options?: Record<string, any>): Promise<void>;
-    /** Trigger an editor transaction to force decoration update */
-    private forceEditorUpdate;
-    /** Generic helper to open file picker and process selection */
-    private selectFileAndProcess;
-    /** Select file and upload as new image */
-    selectAndUploadImage(editor: Editor, options?: Record<string, any>): Promise<void>;
-    /** Select file and replace currently selected image */
-    selectAndReplaceImage(editor: Editor, options?: Record<string, any>): Promise<void>;
-    /** Internal helper used by replacement logic */
-    uploadAndReplaceImage(editor: Editor, file: File, options?: Record<string, any>): Promise<void>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ImageService, never>;
-    static ɵprov: _angular_core.ɵɵInjectableDeclaration<ImageService>;
-}
-
 type StateCalculator = (editor: Editor) => Partial<{
     [K in keyof EditorStateSnapshot]: EditorStateSnapshot[K] extends object ? Partial<EditorStateSnapshot[K]> : EditorStateSnapshot[K];
 }>;
@@ -660,6 +519,110 @@ interface EditorStateSnapshot {
 }
 declare const INITIAL_EDITOR_STATE: EditorStateSnapshot;
 
+interface ImageData {
+    src: string;
+    alt?: string;
+    title?: string;
+    width?: number;
+    height?: number;
+}
+interface ImageUploadResult {
+    src: string;
+    name: string;
+    size: number;
+    type: string;
+    width?: number;
+    height?: number;
+    originalSize?: number;
+}
+interface ResizeOptions {
+    width?: number;
+    height?: number;
+    maintainAspectRatio?: boolean;
+}
+interface ImageUploadOptions {
+    quality?: number;
+    maxWidth?: number;
+    maxHeight?: number;
+    maxSize?: number;
+    allowedTypes?: string[];
+}
+/**
+ * Context passed to the image upload handler containing information about the image
+ */
+interface ImageUploadContext {
+    /** Original file being uploaded */
+    file: File;
+    /** Width of the processed image */
+    width: number;
+    /** Height of the processed image */
+    height: number;
+    /** MIME type of the image */
+    type: string;
+    /** Base64 data URL of the processed image (after compression/resize) */
+    base64: string;
+}
+/**
+ * Result expected from a custom image upload handler.
+ * Must contain at least the `src` property with the image URL.
+ */
+interface ImageUploadHandlerResult {
+    /** URL of the uploaded image (can be a remote URL or any string) */
+    src: string;
+    /** Optional custom alt text */
+    alt?: string;
+    /** Optional custom title */
+    title?: string;
+}
+/**
+ * Custom handler function for image uploads.
+ * Allows users to implement their own image storage logic (e.g., upload to S3, Cloudinary, etc.)
+ *
+ * Can return either a Promise or an Observable (Angular-friendly).
+ *
+ * @param context - Context containing the image file and metadata
+ * @returns Promise or Observable resolving to ImageUploadHandlerResult
+ *
+ * @example Using Promise (async/await)
+ * ```typescript
+ * uploadHandler: ImageUploadHandler = async (ctx) => {
+ *   const formData = new FormData();
+ *   formData.append('image', ctx.file);
+ *   const result = await firstValueFrom(this.http.post<{url: string}>('/api/upload', formData));
+ *   return { src: result.url };
+ * };
+ * ```
+ *
+ * @example Using Observable (Angular HttpClient)
+ * ```typescript
+ * uploadHandler: ImageUploadHandler = (ctx) => {
+ *   const formData = new FormData();
+ *   formData.append('image', ctx.file);
+ *   return this.http.post<{url: string}>('/api/upload', formData).pipe(
+ *     map(result => ({ src: result.url }))
+ *   );
+ * };
+ * ```
+ */
+type ImageUploadHandler = (context: ImageUploadContext) => Promise<ImageUploadHandlerResult> | Observable<ImageUploadHandlerResult>;
+/**
+ * Interface dedicated to image upload configuration.
+ */
+interface AteImageUploadConfig {
+    /** Callback function to handle upload (Promise or Observable) */
+    handler?: ImageUploadHandler;
+    /** Compression quality (0 to 1) */
+    quality?: number;
+    /** Maximum allowed width in pixels */
+    maxWidth?: number;
+    /** Maximum allowed height in pixels */
+    maxHeight?: number;
+    /** Maximum allowed size in MB */
+    maxSize?: number;
+    /** Accepted file types (e.g., ['image/jpeg', 'image/png']) */
+    allowedTypes?: string[];
+}
+
 declare class EditorCommandsService {
     private imageService;
     private colorPickerSvc;
@@ -723,17 +686,8 @@ declare class EditorCommandsService {
     setContent(editor: Editor, content: string, emitUpdate?: boolean): void;
     setEditable(editor: Editor, editable: boolean): void;
     insertContent(editor: Editor, content: string): void;
-    insertImage(editor: Editor, options?: {
-        quality?: number;
-        maxWidth?: number;
-        maxHeight?: number;
-        accept?: string;
-    }): Promise<void>;
-    uploadImage(editor: Editor, file: File, options?: {
-        quality?: number;
-        maxWidth?: number;
-        maxHeight?: number;
-    }): Promise<void>;
+    insertImage(editor: Editor, options?: ImageUploadOptions): Promise<void>;
+    uploadImage(editor: Editor, file: File, options?: ImageUploadOptions): Promise<void>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<EditorCommandsService, never>;
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<EditorCommandsService>;
 }
@@ -849,6 +803,77 @@ interface CellBubbleMenuConfig {
     splitCell?: boolean;
 }
 
+/**
+ * Global configuration interface for Angular Tiptap Editor.
+ * Uses a flat structure for common settings and objects for complex configurations.
+ */
+interface AteEditorConfig {
+    /** Editor theme: light, dark, or system auto-detection */
+    theme?: "light" | "dark" | "auto";
+    /** Display mode: classic or seamless (no borders/background) */
+    mode?: "classic" | "seamless";
+    /** Editor height (e.g., '300px', 'auto') */
+    height?: string;
+    /** Focus position on initialization */
+    autofocus?: "start" | "end" | "all" | boolean | number;
+    /** Placeholder text displayed when the editor is empty */
+    placeholder?: string;
+    /** Initial editing state (if false, the editor is read-only) */
+    editable?: boolean;
+    /** Minimum editor height (e.g., '200px') */
+    minHeight?: string;
+    /** Maximum editor height (e.g., '500px') */
+    maxHeight?: string;
+    /** If true, the editor takes 100% of the parent container's height */
+    fillContainer?: boolean;
+    /** Disabled state (often used with forms) */
+    disabled?: boolean;
+    /** Editor locale (overrides the global i18n service) */
+    locale?: string;
+    /** Enable browser spellcheck */
+    spellcheck?: boolean;
+    /** Enable smart cleanup when pasting from Office/Word */
+    enableOfficePaste?: boolean;
+    /** Show or hide the toolbar */
+    showToolbar?: boolean;
+    /** Show or hide the footer (counters area) */
+    showFooter?: boolean;
+    /** Show or hide the character count */
+    showCharacterCount?: boolean;
+    /** Show or hide the word count */
+    showWordCount?: boolean;
+    /** Show or hide the read-only/edit toggle button */
+    showEditToggle?: boolean;
+    /** Show or hide the text context menu */
+    showBubbleMenu?: boolean;
+    /** Show or hide the image context menu */
+    showImageBubbleMenu?: boolean;
+    /** Show or hide the table menu */
+    showTableMenu?: boolean;
+    /** Show or hide the cell menu */
+    showCellMenu?: boolean;
+    /** Enable or disable slash commands (/) */
+    enableSlashCommands?: boolean;
+    /** Maximum number of characters allowed */
+    maxCharacters?: number;
+    /** Detailed toolbar configuration (items, groups) */
+    toolbar?: ToolbarConfig;
+    /** Text context menu configuration */
+    bubbleMenu?: BubbleMenuConfig;
+    /** Image context menu configuration */
+    imageBubbleMenu?: ImageBubbleMenuConfig;
+    /** Table context menu configuration */
+    tableBubbleMenu?: TableBubbleMenuConfig;
+    /** Cell context menu configuration */
+    cellBubbleMenu?: CellBubbleMenuConfig;
+    /** Slash commands configuration (/) */
+    slashCommands?: SlashCommandsConfig;
+    /** If true, shows the floating toolbar on focus */
+    floatingToolbar?: boolean;
+    /** Technical configuration for image uploads */
+    imageUpload?: AteImageUploadConfig;
+}
+
 declare class NoopValueAccessorDirective implements ControlValueAccessor {
     writeValue(obj: any): void;
     registerOnChange(fn: any): void;
@@ -858,6 +883,8 @@ declare class NoopValueAccessorDirective implements ControlValueAccessor {
 }
 
 declare class AngularTiptapEditorComponent implements AfterViewInit, OnDestroy {
+    /** Configuration globale de l'éditeur */
+    config: _angular_core.InputSignal<AteEditorConfig>;
     content: _angular_core.InputSignal<string>;
     placeholder: _angular_core.InputSignal<string>;
     editable: _angular_core.InputSignal<boolean>;
@@ -879,6 +906,8 @@ declare class AngularTiptapEditorComponent implements AfterViewInit, OnDestroy {
     autofocus: _angular_core.InputSignal<number | boolean | "start" | "end" | "all">;
     seamless: _angular_core.InputSignal<boolean>;
     floatingToolbar: _angular_core.InputSignal<boolean>;
+    showEditToggle: _angular_core.InputSignal<boolean>;
+    spellcheck: _angular_core.InputSignal<boolean>;
     tiptapExtensions: _angular_core.InputSignal<(Node<any, any> | Mark<any, any> | Extension<any, any>)[]>;
     tiptapOptions: _angular_core.InputSignal<Partial<EditorOptions>>;
     showBubbleMenu: _angular_core.InputSignal<boolean>;
@@ -894,7 +923,7 @@ declare class AngularTiptapEditorComponent implements AfterViewInit, OnDestroy {
      * Additionnal state calculators to extend the reactive editor state.
      */
     stateCalculators: _angular_core.InputSignal<StateCalculator[]>;
-    imageUpload: _angular_core.InputSignal<Partial<any>>;
+    imageUpload: _angular_core.InputSignal<Partial<ImageUploadOptions>>;
     /**
      * Custom handler for image uploads.
      * When provided, images will be processed through this handler instead of being converted to base64.
@@ -929,6 +958,7 @@ declare class AngularTiptapEditorComponent implements AfterViewInit, OnDestroy {
         editor: Editor;
         event: FocusEvent;
     }>;
+    editableChange: _angular_core.OutputEmitterRef<boolean>;
     editorElement: _angular_core.Signal<ElementRef<any>>;
     hideBubbleMenus(): void;
     showBubbleMenus(): void;
@@ -947,13 +977,38 @@ declare class AngularTiptapEditorComponent implements AfterViewInit, OnDestroy {
     readonly isFormControlDisabled: _angular_core.Signal<boolean>;
     readonly mergedDisabled: _angular_core.Signal<boolean>;
     isEditorReady: _angular_core.Signal<boolean>;
-    toolbarConfig: _angular_core.Signal<ToolbarConfig>;
-    bubbleMenuConfig: _angular_core.Signal<BubbleMenuConfig>;
-    imageBubbleMenuConfig: _angular_core.Signal<ImageBubbleMenuConfig>;
-    tableBubbleMenuConfig: _angular_core.Signal<TableBubbleMenuConfig>;
-    cellBubbleMenuConfig: _angular_core.Signal<CellBubbleMenuConfig>;
-    imageUploadConfig: _angular_core.Signal<{
+    readonly finalSeamless: _angular_core.Signal<boolean>;
+    readonly finalPlaceholder: _angular_core.Signal<string>;
+    readonly finalFillContainer: _angular_core.Signal<boolean>;
+    readonly finalShowFooter: _angular_core.Signal<boolean>;
+    readonly finalShowEditToggle: _angular_core.Signal<boolean>;
+    readonly finalHeight: _angular_core.Signal<string | undefined>;
+    readonly finalMinHeight: _angular_core.Signal<string | undefined>;
+    readonly finalMaxHeight: _angular_core.Signal<string | undefined>;
+    readonly finalSpellcheck: _angular_core.Signal<boolean>;
+    readonly finalEnableOfficePaste: _angular_core.Signal<boolean>;
+    readonly finalShowToolbar: _angular_core.Signal<boolean>;
+    readonly finalToolbarConfig: _angular_core.Signal<ToolbarConfig>;
+    readonly finalFloatingToolbar: _angular_core.Signal<boolean>;
+    readonly finalShowBubbleMenu: _angular_core.Signal<boolean>;
+    readonly finalBubbleMenuConfig: _angular_core.Signal<BubbleMenuConfig>;
+    readonly finalShowImageBubbleMenu: _angular_core.Signal<boolean>;
+    readonly finalImageBubbleMenuConfig: _angular_core.Signal<ImageBubbleMenuConfig>;
+    readonly finalShowTableBubbleMenu: _angular_core.Signal<boolean>;
+    readonly finalTableBubbleMenuConfig: _angular_core.Signal<TableBubbleMenuConfig>;
+    readonly finalShowCellBubbleMenu: _angular_core.Signal<boolean>;
+    readonly finalCellBubbleMenuConfig: _angular_core.Signal<CellBubbleMenuConfig>;
+    readonly finalEnableSlashCommands: _angular_core.Signal<boolean>;
+    readonly finalSlashCommandsConfig: _angular_core.Signal<CustomSlashCommands>;
+    readonly finalAutofocus: _angular_core.Signal<number | boolean | "start" | "end" | "all">;
+    readonly finalMaxCharacters: _angular_core.Signal<number | undefined>;
+    readonly finalShowCharacterCount: _angular_core.Signal<boolean>;
+    readonly finalShowWordCount: _angular_core.Signal<boolean>;
+    readonly finalLocale: _angular_core.Signal<SupportedLocale>;
+    readonly finalImageUploadConfig: _angular_core.Signal<{
         maxSize: number;
+        handler?: ImageUploadHandler;
+        quality: number;
         maxWidth: number;
         maxHeight: number;
         allowedTypes: string[];
@@ -961,9 +1016,8 @@ declare class AngularTiptapEditorComponent implements AfterViewInit, OnDestroy {
         showPreview: boolean;
         multiple: boolean;
         compressImages: boolean;
-        quality: number;
     }>;
-    slashCommandsConfigComputed: _angular_core.Signal<CustomSlashCommands>;
+    readonly finalImageUploadHandler: _angular_core.Signal<ImageUploadHandler | undefined>;
     readonly currentTranslations: _angular_core.Signal<_flogeez_angular_tiptap_editor.TiptapTranslations>;
     private _destroyRef;
     private ngControl;
@@ -974,6 +1028,7 @@ declare class AngularTiptapEditorComponent implements AfterViewInit, OnDestroy {
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     private initEditor;
+    toggleEditMode(event: Event): void;
     private updateCharacterCount;
     onDragOver(event: DragEvent): void;
     onDrop(event: DragEvent): void;
@@ -989,7 +1044,76 @@ declare class AngularTiptapEditorComponent implements AfterViewInit, OnDestroy {
     private setupFormControlSubscription;
     onEditorClick(event: MouseEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AngularTiptapEditorComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AngularTiptapEditorComponent, "angular-tiptap-editor", never, { "content": { "alias": "content"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "editable": { "alias": "editable"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "minHeight": { "alias": "minHeight"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "fillContainer": { "alias": "fillContainer"; "required": false; "isSignal": true; }; "showToolbar": { "alias": "showToolbar"; "required": false; "isSignal": true; }; "showFooter": { "alias": "showFooter"; "required": false; "isSignal": true; }; "showCharacterCount": { "alias": "showCharacterCount"; "required": false; "isSignal": true; }; "showWordCount": { "alias": "showWordCount"; "required": false; "isSignal": true; }; "maxCharacters": { "alias": "maxCharacters"; "required": false; "isSignal": true; }; "enableOfficePaste": { "alias": "enableOfficePaste"; "required": false; "isSignal": true; }; "enableSlashCommands": { "alias": "enableSlashCommands"; "required": false; "isSignal": true; }; "slashCommands": { "alias": "slashCommands"; "required": false; "isSignal": true; }; "customSlashCommands": { "alias": "customSlashCommands"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "autofocus": { "alias": "autofocus"; "required": false; "isSignal": true; }; "seamless": { "alias": "seamless"; "required": false; "isSignal": true; }; "floatingToolbar": { "alias": "floatingToolbar"; "required": false; "isSignal": true; }; "tiptapExtensions": { "alias": "tiptapExtensions"; "required": false; "isSignal": true; }; "tiptapOptions": { "alias": "tiptapOptions"; "required": false; "isSignal": true; }; "showBubbleMenu": { "alias": "showBubbleMenu"; "required": false; "isSignal": true; }; "bubbleMenu": { "alias": "bubbleMenu"; "required": false; "isSignal": true; }; "showImageBubbleMenu": { "alias": "showImageBubbleMenu"; "required": false; "isSignal": true; }; "imageBubbleMenu": { "alias": "imageBubbleMenu"; "required": false; "isSignal": true; }; "toolbar": { "alias": "toolbar"; "required": false; "isSignal": true; }; "showTableBubbleMenu": { "alias": "showTableBubbleMenu"; "required": false; "isSignal": true; }; "tableBubbleMenu": { "alias": "tableBubbleMenu"; "required": false; "isSignal": true; }; "showCellBubbleMenu": { "alias": "showCellBubbleMenu"; "required": false; "isSignal": true; }; "cellBubbleMenu": { "alias": "cellBubbleMenu"; "required": false; "isSignal": true; }; "stateCalculators": { "alias": "stateCalculators"; "required": false; "isSignal": true; }; "imageUpload": { "alias": "imageUpload"; "required": false; "isSignal": true; }; "imageUploadHandler": { "alias": "imageUploadHandler"; "required": false; "isSignal": true; }; }, { "contentChange": "contentChange"; "editorCreated": "editorCreated"; "editorUpdate": "editorUpdate"; "editorFocus": "editorFocus"; "editorBlur": "editorBlur"; }, never, never, true, [{ directive: typeof NoopValueAccessorDirective; inputs: {}; outputs: {}; }]>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AngularTiptapEditorComponent, "angular-tiptap-editor", never, { "config": { "alias": "config"; "required": false; "isSignal": true; }; "content": { "alias": "content"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "editable": { "alias": "editable"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "minHeight": { "alias": "minHeight"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "fillContainer": { "alias": "fillContainer"; "required": false; "isSignal": true; }; "showToolbar": { "alias": "showToolbar"; "required": false; "isSignal": true; }; "showFooter": { "alias": "showFooter"; "required": false; "isSignal": true; }; "showCharacterCount": { "alias": "showCharacterCount"; "required": false; "isSignal": true; }; "showWordCount": { "alias": "showWordCount"; "required": false; "isSignal": true; }; "maxCharacters": { "alias": "maxCharacters"; "required": false; "isSignal": true; }; "enableOfficePaste": { "alias": "enableOfficePaste"; "required": false; "isSignal": true; }; "enableSlashCommands": { "alias": "enableSlashCommands"; "required": false; "isSignal": true; }; "slashCommands": { "alias": "slashCommands"; "required": false; "isSignal": true; }; "customSlashCommands": { "alias": "customSlashCommands"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "autofocus": { "alias": "autofocus"; "required": false; "isSignal": true; }; "seamless": { "alias": "seamless"; "required": false; "isSignal": true; }; "floatingToolbar": { "alias": "floatingToolbar"; "required": false; "isSignal": true; }; "showEditToggle": { "alias": "showEditToggle"; "required": false; "isSignal": true; }; "spellcheck": { "alias": "spellcheck"; "required": false; "isSignal": true; }; "tiptapExtensions": { "alias": "tiptapExtensions"; "required": false; "isSignal": true; }; "tiptapOptions": { "alias": "tiptapOptions"; "required": false; "isSignal": true; }; "showBubbleMenu": { "alias": "showBubbleMenu"; "required": false; "isSignal": true; }; "bubbleMenu": { "alias": "bubbleMenu"; "required": false; "isSignal": true; }; "showImageBubbleMenu": { "alias": "showImageBubbleMenu"; "required": false; "isSignal": true; }; "imageBubbleMenu": { "alias": "imageBubbleMenu"; "required": false; "isSignal": true; }; "toolbar": { "alias": "toolbar"; "required": false; "isSignal": true; }; "showTableBubbleMenu": { "alias": "showTableBubbleMenu"; "required": false; "isSignal": true; }; "tableBubbleMenu": { "alias": "tableBubbleMenu"; "required": false; "isSignal": true; }; "showCellBubbleMenu": { "alias": "showCellBubbleMenu"; "required": false; "isSignal": true; }; "cellBubbleMenu": { "alias": "cellBubbleMenu"; "required": false; "isSignal": true; }; "stateCalculators": { "alias": "stateCalculators"; "required": false; "isSignal": true; }; "imageUpload": { "alias": "imageUpload"; "required": false; "isSignal": true; }; "imageUploadHandler": { "alias": "imageUploadHandler"; "required": false; "isSignal": true; }; }, { "contentChange": "contentChange"; "editorCreated": "editorCreated"; "editorUpdate": "editorUpdate"; "editorFocus": "editorFocus"; "editorBlur": "editorBlur"; "editableChange": "editableChange"; }, never, never, true, [{ directive: typeof NoopValueAccessorDirective; inputs: {}; outputs: {}; }]>;
+}
+
+declare class ImageService {
+    /** Signals for image state */
+    selectedImage: _angular_core.WritableSignal<ImageData | null>;
+    isImageSelected: _angular_core.Signal<boolean>;
+    /** Resizing state */
+    isResizing: _angular_core.WritableSignal<boolean>;
+    private i18n;
+    private readonly t;
+    /** Upload state signals */
+    isUploading: _angular_core.WritableSignal<boolean>;
+    uploadProgress: _angular_core.WritableSignal<number>;
+    uploadMessage: _angular_core.WritableSignal<string>;
+    /**
+     * Custom upload handler.
+     * If set, this handler replaces the default base64 conversion.
+     */
+    uploadHandler: ImageUploadHandler | null;
+    private currentEditor;
+    /** Select and track an image from the editor */
+    selectImage(editor: Editor): void;
+    clearSelection(): void;
+    /** Insert a new image and ensure it's selected */
+    insertImage(editor: Editor, imageData: ImageData): void;
+    /** Update attributes of the currently active image */
+    updateImageAttributes(editor: Editor, attributes: Partial<ImageData>): void;
+    /** Resize image with optional aspect ratio maintenance */
+    resizeImage(editor: Editor, options: ResizeOptions): void;
+    /** Predetermined resize helpers used by UI */
+    resizeImageToSmall(editor: Editor): void;
+    resizeImageToMedium(editor: Editor): void;
+    resizeImageToLarge(editor: Editor): void;
+    resizeImageToOriginal(editor: Editor): void;
+    /** Get current image dimensions */
+    getImageDimensions(editor: Editor): {
+        width: number;
+        height: number;
+    } | null;
+    /** Remove the selected image */
+    deleteImage(editor: Editor): void;
+    private updateSelectedImage;
+    /** Validate file type and size */
+    validateImage(file: File, options?: {
+        maxSize?: number;
+        allowedTypes?: string[];
+    }): {
+        valid: boolean;
+        error?: string;
+    };
+    /** Compress and process image on client side */
+    compressImage(file: File, quality?: number, maxWidth?: number, maxHeight?: number): Promise<ImageUploadResult>;
+    /** Core upload logic with progress tracking */
+    private uploadImageWithProgress;
+    private resetUploadState;
+    /** Main entry point for file upload and insertion */
+    uploadAndInsertImage(editor: Editor, file: File, options?: ImageUploadOptions): Promise<void>;
+    /** Trigger an editor transaction to force decoration update */
+    private forceEditorUpdate;
+    /** Generic helper to open file picker and process selection */
+    private selectFileAndProcess;
+    /** Select file and upload as new image */
+    selectAndUploadImage(editor: Editor, options?: ImageUploadOptions): Promise<void>;
+    /** Select file and replace currently selected image */
+    selectAndReplaceImage(editor: Editor, options?: ImageUploadOptions): Promise<void>;
+    /** Internal helper used by replacement logic */
+    uploadAndReplaceImage(editor: Editor, file: File, options?: ImageUploadOptions): Promise<void>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ImageService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<ImageService>;
 }
 
 interface ColorPickerSelection {
@@ -1121,4 +1245,4 @@ declare const DEFAULT_TABLE_MENU_CONFIG: TableBubbleMenuConfig;
 declare const DEFAULT_CELL_MENU_CONFIG: CellBubbleMenuConfig;
 
 export { AngularTiptapEditorComponent, ColorPickerService, DEFAULT_BUBBLE_MENU_CONFIG, DEFAULT_CELL_MENU_CONFIG, DEFAULT_IMAGE_BUBBLE_MENU_CONFIG, DEFAULT_SLASH_COMMANDS_CONFIG, DEFAULT_TABLE_MENU_CONFIG, DEFAULT_TOOLBAR_CONFIG, DiscoveryCalculator, EditorCommandsService, INITIAL_EDITOR_STATE, ImageCalculator, ImageService, LinkService, MarksCalculator, NoopValueAccessorDirective, SLASH_COMMAND_KEYS, SelectionCalculator, StructureCalculator, TableCalculator, TiptapI18nService, createDefaultSlashCommands, filterSlashCommands };
-export type { BubbleMenuConfig, CellBubbleMenuConfig, ColorEditMode, ColorPickerSelection, CustomSlashCommands, EditorStateSnapshot, ImageBubbleMenuConfig, ImageData, ImageUploadContext, ImageUploadHandler, ImageUploadHandlerResult, ImageUploadResult, ResizeOptions, SlashCommandItem, SlashCommandKey, SlashCommandsConfig, StateCalculator, SupportedLocale, TableBubbleMenuConfig, TiptapTranslations, ToolbarConfig };
+export type { AteEditorConfig, AteImageUploadConfig, BubbleMenuConfig, CellBubbleMenuConfig, ColorEditMode, ColorPickerSelection, CustomSlashCommands, EditorStateSnapshot, ImageBubbleMenuConfig, ImageData, ImageUploadContext, ImageUploadHandler, ImageUploadHandlerResult, ImageUploadOptions, ImageUploadResult, ResizeOptions, SlashCommandItem, SlashCommandKey, SlashCommandsConfig, StateCalculator, SupportedLocale, TableBubbleMenuConfig, TiptapTranslations, ToolbarConfig };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flogeez/angular-tiptap-editor",
-  "version": "2.0.2",
+  "version": "2.1.0",
   "description": "A modern, customizable rich-text editor for Angular (18+), built with Tiptap and featuring complete internationalization support",
   "keywords": [
     "angular",