@flogeez/angular-tiptap-editor 0.3.4 → 0.3.6

package/index.d.ts

@@ -1,6 +1,7 @@
 import { Editor } from '@tiptap/core';
 import * as _angular_core from '@angular/core';
 import { AfterViewInit, OnDestroy, ElementRef } from '@angular/core';
+import { Observable } from 'rxjs';
 import { ControlValueAccessor } from '@angular/forms';
 
 type SupportedLocale = "en" | "fr";
@@ -393,6 +394,64 @@ interface ResizeOptions {
     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 {
     selectedImage: _angular_core.WritableSignal<ImageData | null>;
     isImageSelected: _angular_core.Signal<boolean>;
@@ -400,6 +459,23 @@ declare class ImageService {
     isUploading: _angular_core.WritableSignal<boolean>;
     uploadProgress: _angular_core.WritableSignal<number>;
     uploadMessage: _angular_core.WritableSignal<string>;
+    /**
+     * Custom upload handler for images.
+     * When set, this handler will be called instead of the default base64 conversion.
+     * This allows users to implement their own image storage logic.
+     *
+     * @example
+     * ```typescript
+     * imageService.uploadHandler = async (context) => {
+     *   const formData = new FormData();
+     *   formData.append('image', context.file);
+     *   const response = await fetch('/api/upload', { method: 'POST', body: formData });
+     *   const data = await response.json();
+     *   return { src: data.url };
+     * };
+     * ```
+     */
+    uploadHandler: ImageUploadHandler | null;
     private currentEditor;
     selectImage(editor: Editor): void;
     clearSelection(): void;
@@ -592,12 +668,33 @@ declare class AngularTiptapEditorComponent implements AfterViewInit, OnDestroy {
     enableSlashCommands: _angular_core.InputSignal<boolean>;
     slashCommandsConfig: _angular_core.InputSignal<SlashCommandsConfig | undefined>;
     locale: _angular_core.InputSignal<SupportedLocale | undefined>;
+    autofocus: _angular_core.InputSignal<number | boolean | "end" | "start" | "all">;
     showBubbleMenu: _angular_core.InputSignal<boolean>;
     bubbleMenu: _angular_core.InputSignal<Partial<BubbleMenuConfig>>;
     showImageBubbleMenu: _angular_core.InputSignal<boolean>;
     imageBubbleMenu: _angular_core.InputSignal<Partial<ImageBubbleMenuConfig>>;
     toolbar: _angular_core.InputSignal<Partial<ToolbarConfig>>;
     imageUpload: _angular_core.InputSignal<Partial<any>>;
+    /**
+     * Custom handler for image uploads.
+     * When provided, images will be processed through this handler instead of being converted to base64.
+     * This allows you to upload images to your own server/storage and use the returned URL.
+     *
+     * @example
+     * ```typescript
+     * myUploadHandler: ImageUploadHandler = async (context) => {
+     *   const formData = new FormData();
+     *   formData.append('image', context.file);
+     *   const response = await fetch('/api/upload', { method: 'POST', body: formData });
+     *   const data = await response.json();
+     *   return { src: data.imageUrl };
+     * };
+     *
+     * // In template:
+     * // <angular-tiptap-editor [imageUploadHandler]="myUploadHandler" />
+     * ```
+     */
+    imageUploadHandler: _angular_core.InputSignal<ImageUploadHandler | undefined>;
     contentChange: _angular_core.OutputEmitterRef<string>;
     editorCreated: _angular_core.OutputEmitterRef<Editor>;
     editorUpdate: _angular_core.OutputEmitterRef<{
@@ -682,7 +779,7 @@ declare class AngularTiptapEditorComponent implements AfterViewInit, OnDestroy {
     setDisabledState(isDisabled: boolean): void;
     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; }; "minHeight": { "alias": "minHeight"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "showToolbar": { "alias": "showToolbar"; "required": false; "isSignal": true; }; "showCharacterCount": { "alias": "showCharacterCount"; "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; }; "slashCommandsConfig": { "alias": "slashCommandsConfig"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "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; }; "imageUpload": { "alias": "imageUpload"; "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, { "content": { "alias": "content"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "editable": { "alias": "editable"; "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; }; "showToolbar": { "alias": "showToolbar"; "required": false; "isSignal": true; }; "showCharacterCount": { "alias": "showCharacterCount"; "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; }; "slashCommandsConfig": { "alias": "slashCommandsConfig"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "autofocus": { "alias": "autofocus"; "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; }; "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: {}; }]>;
 }
 
 /**
@@ -705,4 +802,4 @@ type HeightConfig = {
 };
 
 export { AngularTiptapEditorComponent, DEFAULT_BUBBLE_MENU_CONFIG, DEFAULT_CELL_MENU_CONFIG, DEFAULT_IMAGE_BUBBLE_MENU_CONFIG, DEFAULT_SLASH_COMMANDS, DEFAULT_TABLE_MENU_CONFIG, DEFAULT_TOOLBAR_CONFIG, EditorCommandsService, ImageService, NoopValueAccessorDirective, SLASH_COMMAND_KEYS, TiptapI18nService, createI18nSlashCommands, filterSlashCommands };
-export type { BubbleMenuConfig, CellBubbleMenuConfig, HeightConfig, ImageBubbleMenuConfig, ImageData, ImageUploadResult, ResizeOptions, SlashCommandItem, SlashCommandsConfig, SupportedLocale, TableBubbleMenuConfig, TiptapTranslations, ToolbarConfig };
+export type { BubbleMenuConfig, CellBubbleMenuConfig, HeightConfig, ImageBubbleMenuConfig, ImageData, ImageUploadContext, ImageUploadHandler, ImageUploadHandlerResult, ImageUploadResult, ResizeOptions, SlashCommandItem, SlashCommandsConfig, SupportedLocale, TableBubbleMenuConfig, TiptapTranslations, ToolbarConfig };

package/package.json

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