@flogeez/angular-tiptap-editor 0.3.4 → 0.3.6

package/README.md

@@ -229,6 +229,80 @@ Professional image management:
 - **Auto-Compression**: Images automatically compressed (max 1920x1080)
 - **Resizable**: Images can be resized with handles
 - **Bubble Menu**: Context menu for image operations
+- **Custom Upload Handler**: Upload images to your own server instead of base64
+
+#### Custom Image Upload Handler
+
+By default, images are converted to base64 and embedded directly in the HTML content. You can provide a custom upload handler to upload images to your own server (S3, Cloudinary, custom API, etc.) and use the returned URL instead.
+
+The handler can return either an **Observable** or a **Promise**.
+
+#### Using Observable (recommended for Angular)
+
+```typescript
+import { Component, inject } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { map } from 'rxjs/operators';
+import {
+  AngularTiptapEditorComponent,
+  ImageUploadHandler
+} from '@flogeez/angular-tiptap-editor';
+
+@Component({
+  selector: 'app-custom-upload',
+  standalone: true,
+  imports: [AngularTiptapEditorComponent],
+  template: `
+    <angular-tiptap-editor
+      [content]="content"
+      [imageUploadHandler]="uploadHandler"
+      (contentChange)="onContentChange($event)"
+    />
+  `
+})
+export class CustomUploadComponent {
+  private http = inject(HttpClient);
+  content = '';
+
+  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 }))
+    );
+  };
+
+  onContentChange(newContent: string) {
+    this.content = newContent;
+  }
+}
+```
+
+#### 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 };
+};
+```
+
+The `ImageUploadContext` provides:
+- `file`: The original File object
+- `width`: Processed image width
+- `height`: Processed image height
+- `type`: MIME type (e.g., 'image/jpeg')
+- `base64`: Base64 data URL of the processed image (fallback)
+
+The handler must return an `ImageUploadHandlerResult` with at least a `src` property containing the image URL.
+
 
 ### 📝 Word & Character Counting
 
@@ -262,22 +336,24 @@ Open [http://localhost:4200](http://localhost:4200) to view the demo.
 
 #### Inputs
 
-| Input                | Type                  | Default             | Description                  |
-| -------------------- | --------------------- | ------------------- | ---------------------------- |
-| `content`            | `string`              | `""`                | Initial HTML content         |
-| `placeholder`        | `string`              | `"Start typing..."` | Placeholder text             |
-| `locale`             | `'en' \| 'fr'`        | Auto-detect         | Editor language              |
-| `editable`           | `boolean`             | `true`              | Whether editor is editable   |
-| `height`             | `number`              | `undefined`         | Fixed height in pixels       |
-| `maxHeight`          | `number`              | `undefined`         | Maximum height in pixels     |
-| `minHeight`          | `number`              | `200`               | Minimum height in pixels     |
-| `showToolbar`        | `boolean`             | `true`              | Show toolbar                 |
-| `showBubbleMenu`     | `boolean`             | `true`              | Show bubble menu             |
-| `showCharacterCount` | `boolean`             | `true`              | Show character counter       |
-| `showWordCount`      | `boolean`             | `true`              | Show word counter            |
-| `toolbar`            | `ToolbarConfig`       | All enabled         | Toolbar configuration        |
-| `bubbleMenu`         | `BubbleMenuConfig`    | All enabled         | Bubble menu configuration    |
-| `slashCommands`      | `SlashCommandsConfig` | All enabled         | Slash commands configuration |
+| Input                | Type                  | Default             | Description                   |
+| -------------------- | --------------------- | ------------------- | ----------------------------- |
+| `content`            | `string`              | `""`                | Initial HTML content          |
+| `placeholder`        | `string`              | `"Start typing..."` | Placeholder text              |
+| `locale`             | `'en' \| 'fr'`        | Auto-detect         | Editor language               |
+| `editable`           | `boolean`             | `true`              | Whether editor is editable    |
+| `height`             | `number`              | `undefined`         | Fixed height in pixels        |
+| `maxHeight`          | `number`              | `undefined`         | Maximum height in pixels      |
+| `minHeight`          | `number`              | `200`               | Minimum height in pixels      |
+| `showToolbar`        | `boolean`             | `true`              | Show toolbar                  |
+| `showBubbleMenu`     | `boolean`             | `true`              | Show bubble menu              |
+| `showCharacterCount` | `boolean`             | `true`              | Show character counter        |
+| `showWordCount`      | `boolean`             | `true`              | Show word counter             |
+| `toolbar`            | `ToolbarConfig`       | All enabled         | Toolbar configuration         |
+| `bubbleMenu`         | `BubbleMenuConfig`    | All enabled         | Bubble menu configuration     |
+| `slashCommands`      | `SlashCommandsConfig` | All enabled         | Slash commands configuration  |
+| `imageUploadHandler` | `ImageUploadHandler`  | `undefined`         | Custom image upload function  |
+
 
 #### Outputs
 
@@ -446,6 +522,7 @@ Contributions are welcome! Please feel free to submit a Pull Request.
 
 ### Latest Updates
 
+- ✅ **Custom Image Upload Handler**: Upload images to your own server (S3, Cloudinary, etc.)
 - ✅ **Table Support**: Full table management with bubble menus
 - ✅ **Slash Commands**: Intuitive content insertion commands
 - ✅ **Word/Character Count**: Real-time counting with proper pluralization
@@ -454,6 +531,7 @@ Contributions are welcome! Please feel free to submit a Pull Request.
 - ✅ **Office Paste**: Clean pasting from Microsoft Office applications
 - ✅ **Enhanced i18n**: Improved internationalization with better architecture
 
+
 ---
 
 Made with ❤️ by [FloGeez](https://github.com/FloGeez)

package/fesm2022/flogeez-angular-tiptap-editor.mjs

@@ -20,10 +20,10 @@ import TableCell from '@tiptap/extension-table-cell';
 import TableHeader from '@tiptap/extension-table-header';
 import tippy from 'tippy.js';
 import { CellSelection } from '@tiptap/pm/tables';
+import { isObservable, firstValueFrom, concat, defer, of, tap } from 'rxjs';
 import { CommonModule } from '@angular/common';
 import { Plugin as Plugin$1, PluginKey as PluginKey$1 } from 'prosemirror-state';
 import { NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
-import { concat, defer, of, tap } from 'rxjs';
 
 const ResizableImage = Node.create({
     name: "resizableImage",
@@ -1010,6 +1010,23 @@ class ImageService {
         this.isUploading = signal(false);
         this.uploadProgress = signal(0);
         this.uploadMessage = signal("");
+        /**
+         * 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 };
+         * };
+         * ```
+         */
+        this.uploadHandler = null;
         // Référence à l'éditeur pour les mises à jour
         this.currentEditor = null;
     }
@@ -1261,6 +1278,34 @@ class ImageService {
             await new Promise((resolve) => setTimeout(resolve, 200));
             const result = await this.compressImage(file, options?.quality || 0.8, options?.maxWidth || 1920, options?.maxHeight || 1080);
             this.uploadProgress.set(80);
+            // Si un handler personnalisé est défini, l'utiliser pour l'upload
+            if (this.uploadHandler) {
+                this.uploadMessage.set("Upload vers le serveur...");
+                this.forceEditorUpdate();
+                try {
+                    const handlerResponse = this.uploadHandler({
+                        file,
+                        width: result.width || 0,
+                        height: result.height || 0,
+                        type: result.type,
+                        base64: result.src,
+                    });
+                    // Convertir Observable en Promise si nécessaire
+                    const handlerResult = isObservable(handlerResponse)
+                        ? await firstValueFrom(handlerResponse)
+                        : await handlerResponse;
+                    // Remplacer le src base64 par l'URL retournée par le handler
+                    result.src = handlerResult.src;
+                    // Appliquer les overrides optionnels du handler
+                    if (handlerResult.alt) {
+                        result.name = handlerResult.alt;
+                    }
+                }
+                catch (handlerError) {
+                    console.error("Erreur lors de l'upload personnalisé:", handlerError);
+                    throw handlerError;
+                }
+            }
             this.uploadMessage.set(actionMessage);
             this.forceEditorUpdate();
             // Petit délai pour l'action
@@ -4618,6 +4663,7 @@ class AngularTiptapEditorComponent {
         this.enableSlashCommands = input(true);
         this.slashCommandsConfig = input(undefined);
         this.locale = input(undefined);
+        this.autofocus = input(false);
         // Nouveaux inputs pour les bubble menus
         this.showBubbleMenu = input(true);
         this.bubbleMenu = input(DEFAULT_BUBBLE_MENU_CONFIG);
@@ -4627,6 +4673,26 @@ class AngularTiptapEditorComponent {
         this.toolbar = input({});
         // Nouveau input pour la configuration de l'upload d'images
         this.imageUpload = input({});
+        /**
+         * 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" />
+         * ```
+         */
+        this.imageUploadHandler = input(undefined);
         // Nouveaux outputs
         this.contentChange = output();
         this.editorCreated = output();
@@ -4750,6 +4816,11 @@ class AngularTiptapEditorComponent {
                 this.editorCommandsService.setEditable(currentEditor, isEditable);
             }
         });
+        // Effect pour synchroniser le handler d'upload d'images avec le service
+        effect(() => {
+            const handler = this.imageUploadHandler();
+            this.imageService.uploadHandler = handler || null;
+        });
         // Effect pour la détection du survol des tables
         effect(() => {
             const currentEditor = this.editor();
@@ -4827,6 +4898,7 @@ class AngularTiptapEditorComponent {
             extensions,
             content: this.content(),
             editable: this.editable(),
+            autofocus: this.autofocus(),
             onUpdate: ({ editor, transaction }) => {
                 const html = editor.getHTML();
                 this.contentChange.emit(html);
@@ -5005,7 +5077,7 @@ class AngularTiptapEditorComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: AngularTiptapEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: AngularTiptapEditorComponent, isStandalone: true, selector: "angular-tiptap-editor", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, showToolbar: { classPropertyName: "showToolbar", publicName: "showToolbar", isSignal: true, isRequired: false, transformFunction: null }, showCharacterCount: { classPropertyName: "showCharacterCount", publicName: "showCharacterCount", isSignal: true, isRequired: false, transformFunction: null }, maxCharacters: { classPropertyName: "maxCharacters", publicName: "maxCharacters", isSignal: true, isRequired: false, transformFunction: null }, enableOfficePaste: { classPropertyName: "enableOfficePaste", publicName: "enableOfficePaste", isSignal: true, isRequired: false, transformFunction: null }, enableSlashCommands: { classPropertyName: "enableSlashCommands", publicName: "enableSlashCommands", isSignal: true, isRequired: false, transformFunction: null }, slashCommandsConfig: { classPropertyName: "slashCommandsConfig", publicName: "slashCommandsConfig", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, showBubbleMenu: { classPropertyName: "showBubbleMenu", publicName: "showBubbleMenu", isSignal: true, isRequired: false, transformFunction: null }, bubbleMenu: { classPropertyName: "bubbleMenu", publicName: "bubbleMenu", isSignal: true, isRequired: false, transformFunction: null }, showImageBubbleMenu: { classPropertyName: "showImageBubbleMenu", publicName: "showImageBubbleMenu", isSignal: true, isRequired: false, transformFunction: null }, imageBubbleMenu: { classPropertyName: "imageBubbleMenu", publicName: "imageBubbleMenu", isSignal: true, isRequired: false, transformFunction: null }, toolbar: { classPropertyName: "toolbar", publicName: "toolbar", isSignal: true, isRequired: false, transformFunction: null }, imageUpload: { classPropertyName: "imageUpload", publicName: "imageUpload", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { contentChange: "contentChange", editorCreated: "editorCreated", editorUpdate: "editorUpdate", editorFocus: "editorFocus", editorBlur: "editorBlur" }, viewQueries: [{ propertyName: "editorElement", first: true, predicate: ["editorElement"], descendants: true, isSignal: true }], hostDirectives: [{ directive: NoopValueAccessorDirective }], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: AngularTiptapEditorComponent, isStandalone: true, selector: "angular-tiptap-editor", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, showToolbar: { classPropertyName: "showToolbar", publicName: "showToolbar", isSignal: true, isRequired: false, transformFunction: null }, showCharacterCount: { classPropertyName: "showCharacterCount", publicName: "showCharacterCount", isSignal: true, isRequired: false, transformFunction: null }, maxCharacters: { classPropertyName: "maxCharacters", publicName: "maxCharacters", isSignal: true, isRequired: false, transformFunction: null }, enableOfficePaste: { classPropertyName: "enableOfficePaste", publicName: "enableOfficePaste", isSignal: true, isRequired: false, transformFunction: null }, enableSlashCommands: { classPropertyName: "enableSlashCommands", publicName: "enableSlashCommands", isSignal: true, isRequired: false, transformFunction: null }, slashCommandsConfig: { classPropertyName: "slashCommandsConfig", publicName: "slashCommandsConfig", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, showBubbleMenu: { classPropertyName: "showBubbleMenu", publicName: "showBubbleMenu", isSignal: true, isRequired: false, transformFunction: null }, bubbleMenu: { classPropertyName: "bubbleMenu", publicName: "bubbleMenu", isSignal: true, isRequired: false, transformFunction: null }, showImageBubbleMenu: { classPropertyName: "showImageBubbleMenu", publicName: "showImageBubbleMenu", isSignal: true, isRequired: false, transformFunction: null }, imageBubbleMenu: { classPropertyName: "imageBubbleMenu", publicName: "imageBubbleMenu", isSignal: true, isRequired: false, transformFunction: null }, toolbar: { classPropertyName: "toolbar", publicName: "toolbar", isSignal: true, isRequired: false, transformFunction: null }, imageUpload: { classPropertyName: "imageUpload", publicName: "imageUpload", isSignal: true, isRequired: false, transformFunction: null }, imageUploadHandler: { classPropertyName: "imageUploadHandler", publicName: "imageUploadHandler", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { contentChange: "contentChange", editorCreated: "editorCreated", editorUpdate: "editorUpdate", editorFocus: "editorFocus", editorBlur: "editorBlur" }, viewQueries: [{ propertyName: "editorElement", first: true, predicate: ["editorElement"], descendants: true, isSignal: true }], hostDirectives: [{ directive: NoopValueAccessorDirective }], ngImport: i0, template: `
     <div class="tiptap-editor">
       <!-- Toolbar -->
       @if (showToolbar() && editor()) {