@flogeez/angular-tiptap-editor 0.3.7 → 0.4.0

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, output, Component, computed, effect, ViewChild, signal, Injectable, inject, Directive, viewChild, DestroyRef } from '@angular/core';
+import { input, output, Component, Injectable, signal, computed, viewChild, inject, effect, ViewChild, Directive, DestroyRef } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { Node, nodeInputRule, mergeAttributes, Extension, Editor } from '@tiptap/core';
 import StarterKit from '@tiptap/starter-kit';
@@ -11,6 +11,8 @@ import Subscript from '@tiptap/extension-subscript';
 import TextAlign from '@tiptap/extension-text-align';
 import Link from '@tiptap/extension-link';
 import Highlight from '@tiptap/extension-highlight';
+import TextStyle from '@tiptap/extension-text-style';
+import Color from '@tiptap/extension-color';
 import OfficePaste from '@intevation/tiptap-extension-office-paste';
 import { Plugin, PluginKey } from '@tiptap/pm/state';
 import { DecorationSet, Decoration } from '@tiptap/pm/view';
@@ -525,6 +527,7 @@ class TiptapButtonComponent {
         this.title = input.required();
         this.active = input(false);
         this.disabled = input(false);
+        this.color = input();
         this.variant = input("default");
         this.size = input("medium");
         this.iconSize = input("medium");
@@ -535,7 +538,7 @@ class TiptapButtonComponent {
         event.preventDefault();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.0", type: TiptapButtonComponent, isStandalone: true, selector: "tiptap-button", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.0", type: TiptapButtonComponent, isStandalone: true, selector: "tiptap-button", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
     <button
       class="tiptap-button"
       [class.is-active]="active()"
@@ -546,6 +549,7 @@ class TiptapButtonComponent {
       [class.medium]="size() === 'medium'"
       [class.large]="size() === 'large'"
       [disabled]="disabled()"
+      [style.color]="color()"
       [attr.title]="title()"
       (mousedown)="onMouseDown($event)"
       (click)="onClick.emit($event)"
@@ -575,6 +579,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
       [class.medium]="size() === 'medium'"
       [class.large]="size() === 'large'"
       [disabled]="disabled()"
+      [style.color]="color()"
       [attr.title]="title()"
       (mousedown)="onMouseDown($event)"
       (click)="onClick.emit($event)"
@@ -592,1240 +597,151 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
   `, styles: [".tiptap-button{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;background:transparent;border-radius:8px;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);color:#64748b;position:relative;overflow:hidden}.tiptap-button:before{content:\"\";position:absolute;inset:0;background:linear-gradient(135deg,#6366f1,#8b5cf6);opacity:0;transition:opacity .2s ease;border-radius:8px}.tiptap-button:hover{color:#6366f1;transform:translateY(-1px)}.tiptap-button:hover:before{opacity:.1}.tiptap-button:active{transform:translateY(0)}.tiptap-button.is-active{color:#6366f1;background:#6366f11a}.tiptap-button.is-active:before{opacity:.15}.tiptap-button.is-active:hover{background:#6366f126}.tiptap-button:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.tiptap-button:disabled:hover{transform:none;color:#64748b}.tiptap-button:disabled:before{opacity:0}.tiptap-button .material-symbols-outlined{font-size:20px;position:relative;z-index:1}.tiptap-button .material-symbols-outlined.icon-small{font-size:16px}.tiptap-button .material-symbols-outlined.icon-medium{font-size:20px}.tiptap-button .material-symbols-outlined.icon-large{font-size:24px}.tiptap-button.text-button{width:auto;padding:0 12px;font-size:14px;font-weight:500}.tiptap-button.color-button{width:28px;height:28px;border-radius:50%;border:2px solid transparent;transition:all .2s ease}.tiptap-button.color-button:hover{border-color:#e2e8f0;transform:scale(1.1)}.tiptap-button.color-button.is-active{border-color:#6366f1;box-shadow:0 0 0 2px #6366f133}.tiptap-button.primary{background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff}.tiptap-button.primary:hover{background:linear-gradient(135deg,#5b21b6,#7c3aed);color:#fff}.tiptap-button.secondary{background:#f1f5f9;color:#64748b}.tiptap-button.secondary:hover{background:#e2e8f0;color:#475569}.tiptap-button.danger{color:#ef4444}.tiptap-button.danger:hover{color:#dc2626;background:#ef44441a}.tiptap-button.danger:before{background:linear-gradient(135deg,#ef4444,#dc2626)}.tiptap-button.small{width:24px;height:24px}.tiptap-button.medium{width:32px;height:32px}.tiptap-button.large{width:40px;height:40px}.tiptap-button.has-badge{position:relative}.tiptap-button .badge{position:absolute;top:-4px;right:-4px;background:#ef4444;color:#fff;font-size:10px;padding:2px 4px;border-radius:8px;min-width:16px;text-align:center;line-height:1}.tiptap-button.has-tooltip{position:relative}.tiptap-button .tooltip{position:absolute;bottom:-30px;left:50%;transform:translate(-50%);background:#000c;color:#fff;padding:4px 8px;border-radius:4px;font-size:12px;white-space:nowrap;opacity:0;visibility:hidden;transition:all .2s ease;z-index:1000}.tiptap-button:hover .tooltip{opacity:1;visibility:visible}@keyframes pulse{0%,to{box-shadow:0 0 #6366f166}50%{box-shadow:0 0 0 4px #6366f100}}.tiptap-button.is-active.pulse{animation:pulse 2s infinite}@media (max-width: 768px){.tiptap-button{width:32px;height:32px}.tiptap-button .material-symbols-outlined{font-size:18px}.tiptap-button.text-button{padding:0 8px;font-size:13px}}\n"] }]
         }] });
 
-class TiptapBubbleMenuComponent {
-    // Effect comme propriété de classe pour éviter l'erreur d'injection context
+class ColorPickerService {
     constructor() {
-        this.editor = input.required();
-        this.config = input({
-            bold: true,
-            italic: true,
-            underline: true,
-            strike: true,
-            code: true,
-            superscript: false,
-            subscript: false,
-            highlight: true,
-            link: true,
-            separator: true,
-        });
-        this.tippyInstance = null;
-        this.updateTimeout = null;
-        this.bubbleMenuConfig = computed(() => ({
-            bold: true,
-            italic: true,
-            underline: true,
-            strike: true,
-            code: true,
-            superscript: false,
-            subscript: false,
-            highlight: true,
-            link: true,
-            separator: true,
-            ...this.config(),
-        }));
-        this.updateMenu = () => {
-            // Debounce pour éviter les appels trop fréquents
-            if (this.updateTimeout) {
-                clearTimeout(this.updateTimeout);
-            }
-            this.updateTimeout = setTimeout(() => {
-                const ed = this.editor();
-                if (!ed)
-                    return;
-                const { selection } = ed.state;
-                const { from, to } = selection;
-                const hasTextSelection = from !== to && !(selection instanceof CellSelection);
-                const isImageSelected = ed.isActive("image") || ed.isActive("resizableImage");
-                const isTableCellSelected = ed.isActive("tableCell") || ed.isActive("tableHeader");
-                const hasCellSelection = selection instanceof CellSelection;
-                // Ne montrer le menu texte que si :
-                // - Il y a une sélection de texte (pas une sélection de cellules multiples)
-                // - Aucune image n'est sélectionnée (priorité aux images)
-                // - Ce n'est pas une sélection de cellules multiples (CellSelection)
-                // - L'éditeur est éditable
-                // Note: Le texte dans une cellule est autorisé (isTableCellSelected peut être true)
-                const shouldShow = hasTextSelection &&
-                    !isImageSelected &&
-                    !hasCellSelection &&
-                    ed.isEditable;
-                if (shouldShow) {
-                    this.showTippy();
-                }
-                else {
-                    this.hideTippy();
-                }
-            }, 10);
-        };
-        this.handleBlur = () => {
-            // Masquer le menu quand l'éditeur perd le focus
-            setTimeout(() => {
-                this.hideTippy();
-            }, 100);
-        };
-        effect(() => {
-            const ed = this.editor();
-            if (!ed)
+        this.storedSelection = null;
+    }
+    /**
+     * Find the first explicitly applied color within a selection.
+     */
+    findFirstAppliedColor(editor, selection) {
+        const { from, to } = selection;
+        let found = null;
+        editor.state.doc.nodesBetween(from, to, (node) => {
+            if (found)
+                return false;
+            if (!node.isText)
                 return;
-            // Nettoyer les anciens listeners
-            ed.off("selectionUpdate", this.updateMenu);
-            ed.off("transaction", this.updateMenu);
-            ed.off("focus", this.updateMenu);
-            ed.off("blur", this.handleBlur);
-            // Ajouter les nouveaux listeners
-            ed.on("selectionUpdate", this.updateMenu);
-            ed.on("transaction", this.updateMenu);
-            ed.on("focus", this.updateMenu);
-            ed.on("blur", this.handleBlur);
-            // Ne pas appeler updateMenu() ici pour éviter l'affichage prématuré
-            // Il sera appelé automatiquement quand l'éditeur sera prêt
-        });
-    }
-    ngOnInit() {
-        // Initialiser Tippy de manière synchrone après que le component soit ready
-        this.initTippy();
-    }
-    ngOnDestroy() {
-        const ed = this.editor();
-        if (ed) {
-            ed.off("selectionUpdate", this.updateMenu);
-            ed.off("transaction", this.updateMenu);
-            ed.off("focus", this.updateMenu);
-            ed.off("blur", this.handleBlur);
-        }
-        // Nettoyer les timeouts
-        if (this.updateTimeout) {
-            clearTimeout(this.updateTimeout);
-        }
-        // Nettoyer Tippy
-        if (this.tippyInstance) {
-            this.tippyInstance.destroy();
-            this.tippyInstance = null;
-        }
-    }
-    initTippy() {
-        // Attendre que l'élément soit disponible
-        if (!this.menuRef?.nativeElement) {
-            setTimeout(() => this.initTippy(), 50);
+            const textStyleMark = node.marks.find((m) => m.type.name === "textStyle");
+            const color = textStyleMark?.attrs?.color;
+            if (color) {
+                found = this.normalizeColor(color);
+                return false;
+            }
             return;
+        });
+        return found;
+    }
+    /**
+     * Capture current editor selection.
+     */
+    captureSelection(editor) {
+        const sel = {
+            from: editor.state.selection.from,
+            to: editor.state.selection.to,
+        };
+        this.storedSelection = sel;
+    }
+    /**
+     * Get last captured selection for an editor (if any).
+     */
+    getStoredSelection() {
+        return this.storedSelection;
+    }
+    /**
+     * To be called when color picking is done (picker closes).
+     */
+    done() {
+        this.storedSelection = null;
+    }
+    /**
+     * Get the current text color for the selection.
+     * If multiple colors are present, returns the first found.
+     */
+    getCurrentColor(editor, selection) {
+        const sel = selection ??
+            {
+                from: editor.state.selection.from,
+                to: editor.state.selection.to,
+            };
+        const found = this.findFirstAppliedColor(editor, sel);
+        if (found)
+            return found;
+        const attrs = editor.getAttributes("textStyle") || {};
+        return attrs.color ? this.normalizeColor(attrs.color) : "#000000";
+    }
+    /**
+     * Check if a color is explicitly applied on the selection.
+     */
+    hasColorApplied(editor, selection) {
+        const sel = selection ??
+            {
+                from: editor.state.selection.from,
+                to: editor.state.selection.to,
+            };
+        const { from, to } = sel;
+        if (from === to) {
+            const attrs = editor.getAttributes("textStyle") || {};
+            return !!attrs.color;
         }
-        const menuElement = this.menuRef.nativeElement;
-        // S'assurer qu'il n'y a pas déjà une instance
-        if (this.tippyInstance) {
-            this.tippyInstance.destroy();
+        const found = this.findFirstAppliedColor(editor, sel);
+        if (found)
+            return true;
+        const attrs = editor.getAttributes("textStyle") || {};
+        return !!attrs.color;
+    }
+    /**
+     * Normalize color values so they can be used by <input type="color">.
+     */
+    normalizeColor(color) {
+        if (color.startsWith("#"))
+            return color;
+        const rgbMatch = color
+            .trim()
+            .match(/^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)(?:\s*,\s*([0-9.]+))?\s*\)$/i);
+        if (!rgbMatch)
+            return "#000000";
+        const r = Math.max(0, Math.min(255, parseInt(rgbMatch[1], 10)));
+        const g = Math.max(0, Math.min(255, parseInt(rgbMatch[2], 10)));
+        const b = Math.max(0, Math.min(255, parseInt(rgbMatch[3], 10)));
+        return ("#" +
+            [r, g, b]
+                .map((n) => n.toString(16).padStart(2, "0"))
+                .join("")
+                .toLowerCase());
+    }
+    /**
+     * Apply a color to the current selection.
+     */
+    applyColor(editor, color, options = {}) {
+        const sel = this.getStoredSelection() ?? editor.state.selection;
+        const { addToHistory = true } = options;
+        let chain = editor.chain().focus();
+        if (sel) {
+            chain = chain.setTextSelection(sel);
         }
-        // Créer l'instance Tippy
-        this.tippyInstance = tippy(document.body, {
-            content: menuElement,
-            trigger: "manual",
-            placement: "top-start",
-            appendTo: () => document.body,
-            interactive: true,
-            arrow: false,
-            offset: [0, 8],
-            hideOnClick: false,
-            onShow: (instance) => {
-                // S'assurer que les autres menus sont fermés
-                this.hideOtherMenus();
-            },
-            getReferenceClientRect: () => this.getSelectionRect(),
-            // Améliorer le positionnement avec scroll
-            popperOptions: {
-                modifiers: [
-                    {
-                        name: "preventOverflow",
-                        options: {
-                            boundary: "viewport",
-                            padding: 8,
-                        },
-                    },
-                    {
-                        name: "flip",
-                        options: {
-                            fallbackPlacements: ["bottom-start", "top-end", "bottom-end"],
-                        },
-                    },
-                ],
-            },
-        });
-        // Maintenant que Tippy est initialisé, faire un premier check
-        this.updateMenu();
-    }
-    getSelectionRect() {
-        const selection = window.getSelection();
-        if (!selection || selection.rangeCount === 0) {
-            return new DOMRect(0, 0, 0, 0);
+        chain.setColor(color);
+        if (!addToHistory) {
+            chain.setMeta("addToHistory", false);
         }
-        const range = selection.getRangeAt(0);
-        return range.getBoundingClientRect();
-    }
-    hideOtherMenus() {
-        // Cette méthode peut être étendue pour fermer d'autres menus si nécessaire
-        // Pour l'instant, elle sert de placeholder pour une future coordination entre menus
-    }
-    showTippy() {
-        if (!this.tippyInstance)
-            return;
-        // Mettre à jour la position
-        this.tippyInstance.setProps({
-            getReferenceClientRect: () => this.getSelectionRect(),
-        });
-        this.tippyInstance.show();
-    }
-    hideTippy() {
-        if (this.tippyInstance) {
-            this.tippyInstance.hide();
+        chain.run();
+    }
+    /**
+     * Unset color on the current selection.
+     */
+    unsetColor(editor, options = {}) {
+        const sel = this.getStoredSelection() ?? editor.state.selection;
+        const { addToHistory = true } = options;
+        let chain = editor.chain().focus();
+        if (sel) {
+            chain = chain.setTextSelection(sel);
         }
-    }
-    isActive(mark) {
-        const ed = this.editor();
-        return ed?.isActive(mark) || false;
-    }
-    onCommand(command, event) {
-        event.preventDefault();
-        const ed = this.editor();
-        if (!ed)
-            return;
-        switch (command) {
-            case "bold":
-                ed.chain().focus().toggleBold().run();
-                break;
-            case "italic":
-                ed.chain().focus().toggleItalic().run();
-                break;
-            case "underline":
-                ed.chain().focus().toggleUnderline().run();
-                break;
-            case "strike":
-                ed.chain().focus().toggleStrike().run();
-                break;
-            case "code":
-                ed.chain().focus().toggleCode().run();
-                break;
-            case "superscript":
-                ed.chain().focus().toggleSuperscript().run();
-                break;
-            case "subscript":
-                ed.chain().focus().toggleSubscript().run();
-                break;
-            case "highlight":
-                ed.chain().focus().toggleHighlight().run();
-                break;
-            case "link":
-                const href = window.prompt("URL du lien:");
-                if (href) {
-                    ed.chain().focus().toggleLink({ href }).run();
-                }
-                break;
+        chain.unsetColor();
+        if (!addToHistory) {
+            chain.setMeta("addToHistory", false);
         }
+        chain.run();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapBubbleMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: TiptapBubbleMenuComponent, isStandalone: true, selector: "tiptap-bubble-menu", inputs: { editor: { classPropertyName: "editor", publicName: "editor", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "menuRef", first: true, predicate: ["menuRef"], descendants: true }], ngImport: i0, template: `
-    <div #menuRef class="bubble-menu">
-      @if (bubbleMenuConfig().bold) {
-      <tiptap-button
-        icon="format_bold"
-        title="Gras"
-        [active]="isActive('bold')"
-        (click)="onCommand('bold', $event)"
-      ></tiptap-button>
-      } @if (bubbleMenuConfig().italic) {
-      <tiptap-button
-        icon="format_italic"
-        title="Italique"
-        [active]="isActive('italic')"
-        (click)="onCommand('italic', $event)"
-      ></tiptap-button>
-      } @if (bubbleMenuConfig().underline) {
-      <tiptap-button
-        icon="format_underlined"
-        title="Souligné"
-        [active]="isActive('underline')"
-        (click)="onCommand('underline', $event)"
-      ></tiptap-button>
-      } @if (bubbleMenuConfig().strike) {
-      <tiptap-button
-        icon="strikethrough_s"
-        title="Barré"
-        [active]="isActive('strike')"
-        (click)="onCommand('strike', $event)"
-      ></tiptap-button>
-      } @if (bubbleMenuConfig().superscript) {
-      <tiptap-button
-        icon="superscript"
-        title="Exposant"
-        [active]="isActive('superscript')"
-        (click)="onCommand('superscript', $event)"
-      ></tiptap-button>
-      } @if (bubbleMenuConfig().subscript) {
-      <tiptap-button
-        icon="subscript"
-        title="Indice"
-        [active]="isActive('subscript')"
-        (click)="onCommand('subscript', $event)"
-      ></tiptap-button>
-      } @if (bubbleMenuConfig().highlight) {
-      <tiptap-button
-        icon="highlight"
-        title="Surbrillance"
-        [active]="isActive('highlight')"
-        (click)="onCommand('highlight', $event)"
-      ></tiptap-button>
-      } @if (bubbleMenuConfig().separator && (bubbleMenuConfig().code ||
-      bubbleMenuConfig().link)) {
-      <div class="tiptap-separator"></div>
-      } @if (bubbleMenuConfig().code) {
-      <tiptap-button
-        icon="code"
-        title="Code"
-        [active]="isActive('code')"
-        (click)="onCommand('code', $event)"
-      ></tiptap-button>
-      } @if (bubbleMenuConfig().link) {
-      <tiptap-button
-        icon="link"
-        title="Lien"
-        [active]="isActive('link')"
-        (click)="onCommand('link', $event)"
-      ></tiptap-button>
-      }
-    </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: TiptapButtonComponent, selector: "tiptap-button", inputs: ["icon", "title", "active", "disabled", "variant", "size", "iconSize"], outputs: ["onClick"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapBubbleMenuComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "tiptap-bubble-menu", standalone: true, imports: [TiptapButtonComponent], template: `
-    <div #menuRef class="bubble-menu">
-      @if (bubbleMenuConfig().bold) {
-      <tiptap-button
-        icon="format_bold"
-        title="Gras"
-        [active]="isActive('bold')"
-        (click)="onCommand('bold', $event)"
-      ></tiptap-button>
-      } @if (bubbleMenuConfig().italic) {
-      <tiptap-button
-        icon="format_italic"
-        title="Italique"
-        [active]="isActive('italic')"
-        (click)="onCommand('italic', $event)"
-      ></tiptap-button>
-      } @if (bubbleMenuConfig().underline) {
-      <tiptap-button
-        icon="format_underlined"
-        title="Souligné"
-        [active]="isActive('underline')"
-        (click)="onCommand('underline', $event)"
-      ></tiptap-button>
-      } @if (bubbleMenuConfig().strike) {
-      <tiptap-button
-        icon="strikethrough_s"
-        title="Barré"
-        [active]="isActive('strike')"
-        (click)="onCommand('strike', $event)"
-      ></tiptap-button>
-      } @if (bubbleMenuConfig().superscript) {
-      <tiptap-button
-        icon="superscript"
-        title="Exposant"
-        [active]="isActive('superscript')"
-        (click)="onCommand('superscript', $event)"
-      ></tiptap-button>
-      } @if (bubbleMenuConfig().subscript) {
-      <tiptap-button
-        icon="subscript"
-        title="Indice"
-        [active]="isActive('subscript')"
-        (click)="onCommand('subscript', $event)"
-      ></tiptap-button>
-      } @if (bubbleMenuConfig().highlight) {
-      <tiptap-button
-        icon="highlight"
-        title="Surbrillance"
-        [active]="isActive('highlight')"
-        (click)="onCommand('highlight', $event)"
-      ></tiptap-button>
-      } @if (bubbleMenuConfig().separator && (bubbleMenuConfig().code ||
-      bubbleMenuConfig().link)) {
-      <div class="tiptap-separator"></div>
-      } @if (bubbleMenuConfig().code) {
-      <tiptap-button
-        icon="code"
-        title="Code"
-        [active]="isActive('code')"
-        (click)="onCommand('code', $event)"
-      ></tiptap-button>
-      } @if (bubbleMenuConfig().link) {
-      <tiptap-button
-        icon="link"
-        title="Lien"
-        [active]="isActive('link')"
-        (click)="onCommand('link', $event)"
-      ></tiptap-button>
-      }
-    </div>
-  ` }]
-        }], ctorParameters: () => [], propDecorators: { menuRef: [{
-                type: ViewChild,
-                args: ["menuRef", { static: false }]
-            }] } });
-
-class TiptapSeparatorComponent {
-    constructor() {
-        this.orientation = input("vertical");
-        this.size = input("medium");
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapSeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.0", type: TiptapSeparatorComponent, isStandalone: true, selector: "tiptap-separator", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <div
-      class="tiptap-separator"
-      [class.vertical]="orientation() === 'vertical'"
-      [class.horizontal]="orientation() === 'horizontal'"
-      [class.small]="size() === 'small'"
-      [class.medium]="size() === 'medium'"
-      [class.large]="size() === 'large'"
-    ></div>
-  `, isInline: true, styles: [".tiptap-separator{background-color:#e2e8f0;margin:0}.tiptap-separator.vertical{width:1px;height:24px;margin:0 8px}.tiptap-separator.horizontal{height:1px;width:100%;margin:8px 0}.tiptap-separator.small.vertical{height:16px;margin:0 4px}.tiptap-separator.small.horizontal{margin:4px 0}.tiptap-separator.medium.vertical{height:24px;margin:0 8px}.tiptap-separator.medium.horizontal{margin:8px 0}.tiptap-separator.large.vertical{height:32px;margin:0 12px}.tiptap-separator.large.horizontal{margin:12px 0}\n"] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ColorPickerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ColorPickerService, providedIn: "root" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapSeparatorComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "tiptap-separator", standalone: true, template: `
-    <div
-      class="tiptap-separator"
-      [class.vertical]="orientation() === 'vertical'"
-      [class.horizontal]="orientation() === 'horizontal'"
-      [class.small]="size() === 'small'"
-      [class.medium]="size() === 'medium'"
-      [class.large]="size() === 'large'"
-    ></div>
-  `, styles: [".tiptap-separator{background-color:#e2e8f0;margin:0}.tiptap-separator.vertical{width:1px;height:24px;margin:0 8px}.tiptap-separator.horizontal{height:1px;width:100%;margin:8px 0}.tiptap-separator.small.vertical{height:16px;margin:0 4px}.tiptap-separator.small.horizontal{margin:4px 0}.tiptap-separator.medium.vertical{height:24px;margin:0 8px}.tiptap-separator.medium.horizontal{margin:8px 0}.tiptap-separator.large.vertical{height:32px;margin:0 12px}.tiptap-separator.large.horizontal{margin:12px 0}\n"] }]
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ColorPickerService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: "root",
+                }]
         }] });
 
-class ImageService {
-    constructor() {
-        // Signals pour l'état des images
-        this.selectedImage = signal(null);
-        this.isImageSelected = computed(() => this.selectedImage() !== null);
-        this.isResizing = signal(false);
-        // Signaux pour l'upload
-        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;
-    }
-    // Méthodes pour la gestion des images
-    selectImage(editor) {
-        if (editor.isActive("resizableImage")) {
-            const attrs = editor.getAttributes("resizableImage");
-            this.selectedImage.set({
-                src: attrs["src"],
-                alt: attrs["alt"],
-                title: attrs["title"],
-                width: attrs["width"],
-                height: attrs["height"],
-            });
-        }
-        else {
-            this.selectedImage.set(null);
-        }
-    }
-    clearSelection() {
-        this.selectedImage.set(null);
-    }
-    // Méthodes pour manipuler les images
-    insertImage(editor, imageData) {
-        editor.chain().focus().setResizableImage(imageData).run();
-    }
-    updateImageAttributes(editor, attributes) {
-        if (editor.isActive("resizableImage")) {
-            editor
-                .chain()
-                .focus()
-                .updateAttributes("resizableImage", attributes)
-                .run();
-            this.updateSelectedImage(attributes);
-        }
-    }
-    // Nouvelles méthodes pour le redimensionnement
-    resizeImage(editor, options) {
-        if (!editor.isActive("resizableImage"))
-            return;
-        const currentAttrs = editor.getAttributes("resizableImage");
-        let newWidth = options.width;
-        let newHeight = options.height;
-        // Maintenir le ratio d'aspect si demandé
-        if (options.maintainAspectRatio !== false &&
-            currentAttrs["width"] &&
-            currentAttrs["height"]) {
-            const aspectRatio = currentAttrs["width"] / currentAttrs["height"];
-            if (newWidth && !newHeight) {
-                newHeight = Math.round(newWidth / aspectRatio);
-            }
-            else if (newHeight && !newWidth) {
-                newWidth = Math.round(newHeight * aspectRatio);
-            }
-        }
-        // Appliquer des limites minimales
-        if (newWidth)
-            newWidth = Math.max(50, newWidth);
-        if (newHeight)
-            newHeight = Math.max(50, newHeight);
-        this.updateImageAttributes(editor, {
-            width: newWidth,
-            height: newHeight,
-        });
-    }
-    // Méthodes pour redimensionner par pourcentage
-    resizeImageByPercentage(editor, percentage) {
-        if (!editor.isActive("resizableImage"))
-            return;
-        const currentAttrs = editor.getAttributes("resizableImage");
-        if (!currentAttrs["width"] || !currentAttrs["height"])
-            return;
-        const newWidth = Math.round(currentAttrs["width"] * (percentage / 100));
-        const newHeight = Math.round(currentAttrs["height"] * (percentage / 100));
-        this.resizeImage(editor, { width: newWidth, height: newHeight });
-    }
-    // Méthodes pour redimensionner à des tailles prédéfinies
-    resizeImageToSmall(editor) {
-        this.resizeImage(editor, {
-            width: 300,
-            height: 200,
-            maintainAspectRatio: true,
-        });
-    }
-    resizeImageToMedium(editor) {
-        this.resizeImage(editor, {
-            width: 500,
-            height: 350,
-            maintainAspectRatio: true,
-        });
-    }
-    resizeImageToLarge(editor) {
-        this.resizeImage(editor, {
-            width: 800,
-            height: 600,
-            maintainAspectRatio: true,
-        });
-    }
-    resizeImageToOriginal(editor) {
-        if (!editor.isActive("resizableImage"))
-            return;
-        const img = new Image();
-        img.onload = () => {
-            this.resizeImage(editor, {
-                width: img.naturalWidth,
-                height: img.naturalHeight,
-            });
-        };
-        img.src = editor.getAttributes("resizableImage")["src"];
-    }
-    // Méthode pour redimensionner librement (sans maintenir le ratio)
-    resizeImageFreely(editor, width, height) {
-        this.resizeImage(editor, {
-            width,
-            height,
-            maintainAspectRatio: false,
-        });
-    }
-    // Méthode pour obtenir les dimensions actuelles de l'image
-    getImageDimensions(editor) {
-        if (!editor.isActive("resizableImage"))
-            return null;
-        const attrs = editor.getAttributes("resizableImage");
-        return {
-            width: attrs["width"] || 0,
-            height: attrs["height"] || 0,
-        };
-    }
-    // Méthode pour obtenir les dimensions naturelles de l'image
-    getNaturalImageDimensions(src) {
-        return new Promise((resolve, reject) => {
-            const img = new Image();
-            img.onload = () => {
-                resolve({ width: img.naturalWidth, height: img.naturalHeight });
-            };
-            img.onerror = () => {
-                reject(new Error("Impossible de charger l'image"));
-            };
-            img.src = src;
-        });
-    }
-    deleteImage(editor) {
-        if (editor.isActive("resizableImage")) {
-            editor.chain().focus().deleteSelection().run();
-            this.clearSelection();
-        }
-    }
-    // Méthodes utilitaires
-    updateSelectedImage(attributes) {
-        const current = this.selectedImage();
-        if (current) {
-            this.selectedImage.set({ ...current, ...attributes });
-        }
-    }
-    // Validation des images
-    validateImage(file, maxSize = 5 * 1024 * 1024) {
-        if (!file.type.startsWith("image/")) {
-            return { valid: false, error: "Le fichier doit être une image" };
-        }
-        if (file.size > maxSize) {
-            return {
-                valid: false,
-                error: `L'image est trop volumineuse (max ${maxSize / 1024 / 1024}MB)`,
-            };
-        }
-        return { valid: true };
-    }
-    // Compression d'image
-    async compressImage(file, quality = 0.8, maxWidth = 1920, maxHeight = 1080) {
-        return new Promise((resolve, reject) => {
-            const canvas = document.createElement("canvas");
-            const ctx = canvas.getContext("2d");
-            const img = new Image();
-            img.onload = () => {
-                // Mise à jour du progrès
-                if (this.isUploading()) {
-                    this.uploadProgress.set(40);
-                    this.uploadMessage.set("Redimensionnement...");
-                    this.forceEditorUpdate();
-                }
-                let { width, height } = img;
-                // Redimensionner si nécessaire
-                if (width > maxWidth || height > maxHeight) {
-                    const ratio = Math.min(maxWidth / width, maxHeight / height);
-                    width *= ratio;
-                    height *= ratio;
-                }
-                canvas.width = width;
-                canvas.height = height;
-                // Dessiner l'image redimensionnée
-                ctx?.drawImage(img, 0, 0, width, height);
-                // Mise à jour du progrès
-                if (this.isUploading()) {
-                    this.uploadProgress.set(60);
-                    this.uploadMessage.set("Compression...");
-                    this.forceEditorUpdate();
-                }
-                // Convertir en base64 avec compression
-                canvas.toBlob((blob) => {
-                    if (blob) {
-                        const reader = new FileReader();
-                        reader.onload = (e) => {
-                            const base64 = e.target?.result;
-                            if (base64) {
-                                const result = {
-                                    src: base64,
-                                    name: file.name,
-                                    size: blob.size,
-                                    type: file.type,
-                                    width: Math.round(width),
-                                    height: Math.round(height),
-                                    originalSize: file.size,
-                                };
-                                resolve(result);
-                            }
-                            else {
-                                reject(new Error("Erreur lors de la compression"));
-                            }
-                        };
-                        reader.readAsDataURL(blob);
-                    }
-                    else {
-                        reject(new Error("Erreur lors de la compression"));
-                    }
-                }, file.type, quality);
-            };
-            img.onerror = () => reject(new Error("Erreur lors du chargement de l'image"));
-            img.src = URL.createObjectURL(file);
-        });
-    }
-    // Méthode privée générique pour uploader avec progression
-    async uploadImageWithProgress(editor, file, insertionStrategy, actionMessage, options) {
-        try {
-            // Stocker la référence à l'éditeur
-            this.currentEditor = editor;
-            this.isUploading.set(true);
-            this.uploadProgress.set(0);
-            this.uploadMessage.set("Validation du fichier...");
-            this.forceEditorUpdate();
-            // Validation
-            const validation = this.validateImage(file);
-            if (!validation.valid) {
-                throw new Error(validation.error);
-            }
-            this.uploadProgress.set(20);
-            this.uploadMessage.set("Compression en cours...");
-            this.forceEditorUpdate();
-            // Petit délai pour permettre à l'utilisateur de voir la progression
-            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
-            await new Promise((resolve) => setTimeout(resolve, 100));
-            // Exécuter la stratégie d'insertion
-            insertionStrategy(editor, result);
-            // L'action est terminée, maintenant on peut cacher l'indicateur
-            this.isUploading.set(false);
-            this.uploadProgress.set(0);
-            this.uploadMessage.set("");
-            this.forceEditorUpdate();
-            this.currentEditor = null;
-        }
-        catch (error) {
-            this.isUploading.set(false);
-            this.uploadProgress.set(0);
-            this.uploadMessage.set("");
-            this.forceEditorUpdate();
-            this.currentEditor = null;
-            console.error("Erreur lors de l'upload d'image:", error);
-            throw error;
-        }
-    }
-    // Méthode unifiée pour uploader et insérer une image
-    async uploadAndInsertImage(editor, file, options) {
-        return this.uploadImageWithProgress(editor, file, (editor, result) => {
-            this.insertImage(editor, {
-                src: result.src,
-                alt: result.name,
-                title: `${result.name} (${result.width}×${result.height})`,
-                width: result.width,
-                height: result.height,
-            });
-        }, "Insertion dans l'éditeur...", options);
-    }
-    // Méthode pour forcer la mise à jour de l'éditeur
-    forceEditorUpdate() {
-        if (this.currentEditor) {
-            // Déclencher une transaction vide pour forcer la mise à jour des décorations
-            const { tr } = this.currentEditor.state;
-            this.currentEditor.view.dispatch(tr);
-        }
-    }
-    // Méthode privée générique pour créer un sélecteur de fichier
-    async selectFileAndProcess(editor, uploadMethod, options) {
-        return new Promise((resolve, reject) => {
-            const input = document.createElement("input");
-            input.type = "file";
-            input.accept = options?.accept || "image/*";
-            input.style.display = "none";
-            input.addEventListener("change", async (e) => {
-                const file = e.target.files?.[0];
-                if (file && file.type.startsWith("image/")) {
-                    try {
-                        await uploadMethod(editor, file, options);
-                        resolve();
-                    }
-                    catch (error) {
-                        reject(error);
-                    }
-                }
-                else {
-                    reject(new Error("Aucun fichier image sélectionné"));
-                }
-                document.body.removeChild(input);
-            });
-            input.addEventListener("cancel", () => {
-                document.body.removeChild(input);
-                reject(new Error("Sélection annulée"));
-            });
-            document.body.appendChild(input);
-            input.click();
-        });
-    }
-    // Méthode pour créer un sélecteur de fichier et uploader une image
-    async selectAndUploadImage(editor, options) {
-        return this.selectFileAndProcess(editor, this.uploadAndInsertImage.bind(this), options);
-    }
-    // Méthode pour sélectionner et remplacer une image existante
-    async selectAndReplaceImage(editor, options) {
-        return this.selectFileAndProcess(editor, this.uploadAndReplaceImage.bind(this), options);
-    }
-    // Méthode pour remplacer une image existante avec indicateur de progression
-    async uploadAndReplaceImage(editor, file, options) {
-        // Sauvegarder les attributs de l'image actuelle pour restauration en cas d'échec
-        const currentImageAttrs = editor.getAttributes("resizableImage");
-        const backupImage = { ...currentImageAttrs };
-        try {
-            // Supprimer visuellement l'ancienne image immédiatement
-            editor.chain().focus().deleteSelection().run();
-            // Stocker la référence à l'éditeur
-            this.currentEditor = editor;
-            this.isUploading.set(true);
-            this.uploadProgress.set(0);
-            this.uploadMessage.set("Validation du fichier...");
-            this.forceEditorUpdate();
-            // Validation
-            const validation = this.validateImage(file);
-            if (!validation.valid) {
-                throw new Error(validation.error);
-            }
-            this.uploadProgress.set(20);
-            this.uploadMessage.set("Compression en cours...");
-            this.forceEditorUpdate();
-            // Petit délai pour permettre à l'utilisateur de voir la progression
-            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);
-            this.uploadMessage.set("Remplacement de l'image...");
-            this.forceEditorUpdate();
-            // Petit délai pour le remplacement
-            await new Promise((resolve) => setTimeout(resolve, 100));
-            // Insérer la nouvelle image à la position actuelle
-            this.insertImage(editor, {
-                src: result.src,
-                alt: result.name,
-                title: `${result.name} (${result.width}×${result.height})`,
-                width: result.width,
-                height: result.height,
-            });
-            // L'image est remplacée, maintenant on peut cacher l'indicateur
-            this.isUploading.set(false);
-            this.uploadProgress.set(0);
-            this.uploadMessage.set("");
-            this.forceEditorUpdate();
-            this.currentEditor = null;
-        }
-        catch (error) {
-            // En cas d'erreur, restaurer l'image originale
-            if (backupImage["src"]) {
-                this.insertImage(editor, {
-                    src: backupImage["src"],
-                    alt: backupImage["alt"],
-                    title: backupImage["title"],
-                    width: backupImage["width"],
-                    height: backupImage["height"],
-                });
-            }
-            this.isUploading.set(false);
-            this.uploadProgress.set(0);
-            this.uploadMessage.set("");
-            this.forceEditorUpdate();
-            this.currentEditor = null;
-            console.error("Erreur lors du remplacement d'image:", error);
-            throw error;
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ImageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ImageService, providedIn: "root" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ImageService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: "root",
-                }]
-        }] });
-
-class TiptapImageBubbleMenuComponent {
-    constructor() {
-        this.editor = input.required();
-        this.config = input({
-            changeImage: true,
-            resizeSmall: true,
-            resizeMedium: true,
-            resizeLarge: true,
-            resizeOriginal: true,
-            deleteImage: true,
-            separator: true,
-        });
-        this.tippyInstance = null;
-        this.imageService = inject(ImageService);
-        this.updateTimeout = null;
-        this.imageBubbleMenuConfig = computed(() => ({
-            changeImage: true,
-            resizeSmall: true,
-            resizeMedium: true,
-            resizeLarge: true,
-            resizeOriginal: true,
-            deleteImage: true,
-            separator: true,
-            ...this.config(),
-        }));
-        this.hasResizeButtons = computed(() => {
-            const config = this.imageBubbleMenuConfig();
-            return (config.resizeSmall ||
-                config.resizeMedium ||
-                config.resizeLarge ||
-                config.resizeOriginal);
-        });
-        this.updateMenu = () => {
-            // Debounce pour éviter les appels trop fréquents
-            if (this.updateTimeout) {
-                clearTimeout(this.updateTimeout);
-            }
-            this.updateTimeout = setTimeout(() => {
-                const ed = this.editor();
-                if (!ed)
-                    return;
-                const isImageSelected = ed.isActive("resizableImage") || ed.isActive("image");
-                const { from, to } = ed.state.selection;
-                const hasTextSelection = from !== to;
-                // Ne montrer le menu image que si :
-                // - Une image est sélectionnée
-                // - L'éditeur est éditable
-                const shouldShow = isImageSelected && ed.isEditable;
-                if (shouldShow) {
-                    this.showTippy();
-                }
-                else {
-                    this.hideTippy();
-                }
-            }, 10);
-        };
-        this.handleBlur = () => {
-            // Masquer le menu quand l'éditeur perd le focus
-            setTimeout(() => {
-                this.hideTippy();
-            }, 100);
-        };
-        effect(() => {
-            const ed = this.editor();
-            if (!ed)
-                return;
-            // Nettoyer les anciens listeners
-            ed.off("selectionUpdate", this.updateMenu);
-            ed.off("transaction", this.updateMenu);
-            ed.off("focus", this.updateMenu);
-            ed.off("blur", this.handleBlur);
-            // Ajouter les nouveaux listeners
-            ed.on("selectionUpdate", this.updateMenu);
-            ed.on("transaction", this.updateMenu);
-            ed.on("focus", this.updateMenu);
-            ed.on("blur", this.handleBlur);
-            // Ne pas appeler updateMenu() ici pour éviter l'affichage prématuré
-            // Il sera appelé automatiquement quand l'éditeur sera prêt
-        });
-    }
-    ngOnInit() {
-        // Initialiser Tippy de manière synchrone après que le component soit ready
-        this.initTippy();
-    }
-    ngOnDestroy() {
-        const ed = this.editor();
-        if (ed) {
-            ed.off("selectionUpdate", this.updateMenu);
-            ed.off("transaction", this.updateMenu);
-            ed.off("focus", this.updateMenu);
-            ed.off("blur", this.handleBlur);
-        }
-        // Nettoyer les timeouts
-        if (this.updateTimeout) {
-            clearTimeout(this.updateTimeout);
-        }
-        // Nettoyer Tippy
-        if (this.tippyInstance) {
-            this.tippyInstance.destroy();
-            this.tippyInstance = null;
-        }
-    }
-    initTippy() {
-        // Attendre que l'élément soit disponible
-        if (!this.menuRef?.nativeElement) {
-            setTimeout(() => this.initTippy(), 50);
-            return;
-        }
-        const menuElement = this.menuRef.nativeElement;
-        // S'assurer qu'il n'y a pas déjà une instance
-        if (this.tippyInstance) {
-            this.tippyInstance.destroy();
-        }
-        // Créer l'instance Tippy
-        this.tippyInstance = tippy(document.body, {
-            content: menuElement,
-            trigger: "manual",
-            placement: "top-start",
-            appendTo: () => document.body,
-            interactive: true,
-            arrow: false,
-            offset: [0, 8],
-            hideOnClick: false,
-            onShow: (instance) => {
-                // S'assurer que les autres menus sont fermés
-                this.hideOtherMenus();
-            },
-            getReferenceClientRect: () => this.getImageRect(),
-            // Améliorer le positionnement avec scroll
-            popperOptions: {
-                modifiers: [
-                    {
-                        name: "preventOverflow",
-                        options: {
-                            boundary: "viewport",
-                            padding: 8,
-                        },
-                    },
-                    {
-                        name: "flip",
-                        options: {
-                            fallbackPlacements: ["bottom-start", "top-end", "bottom-end"],
-                        },
-                    },
-                ],
-            },
-        });
-        // Maintenant que Tippy est initialisé, faire un premier check
-        this.updateMenu();
-    }
-    getImageRect() {
-        const ed = this.editor();
-        if (!ed)
-            return new DOMRect(0, 0, 0, 0);
-        // Trouver l'image sélectionnée dans le DOM
-        const { from } = ed.state.selection;
-        // Fonction pour trouver toutes les images dans l'éditeur
-        const getAllImages = () => {
-            const editorElement = ed.view.dom;
-            return Array.from(editorElement.querySelectorAll("img"));
-        };
-        // Fonction pour trouver l'image à la position spécifique
-        const findImageAtPosition = () => {
-            const allImages = getAllImages();
-            for (const img of allImages) {
-                try {
-                    // Obtenir la position ProseMirror de cette image
-                    const imgPos = ed.view.posAtDOM(img, 0);
-                    // Vérifier si cette image correspond à la position sélectionnée
-                    if (Math.abs(imgPos - from) <= 1) {
-                        return img;
-                    }
-                }
-                catch (error) {
-                    // Continuer si on ne peut pas obtenir la position de cette image
-                    continue;
-                }
-            }
-            return null;
-        };
-        // Chercher l'image à la position exacte
-        const imageElement = findImageAtPosition();
-        if (imageElement) {
-            return imageElement.getBoundingClientRect();
-        }
-        return new DOMRect(0, 0, 0, 0);
-    }
-    hideOtherMenus() {
-        // Cette méthode peut être étendue pour fermer d'autres menus si nécessaire
-        // Pour l'instant, elle sert de placeholder pour une future coordination entre menus
-    }
-    showTippy() {
-        if (!this.tippyInstance)
-            return;
-        // Mettre à jour la position
-        this.tippyInstance.setProps({
-            getReferenceClientRect: () => this.getImageRect(),
-        });
-        this.tippyInstance.show();
-    }
-    hideTippy() {
-        if (this.tippyInstance) {
-            this.tippyInstance.hide();
-        }
-    }
-    onCommand(command, event) {
-        event.preventDefault();
-        const ed = this.editor();
-        if (!ed)
-            return;
-        switch (command) {
-            case "changeImage":
-                this.changeImage();
-                break;
-            case "resizeSmall":
-                this.imageService.resizeImageToSmall(ed);
-                break;
-            case "resizeMedium":
-                this.imageService.resizeImageToMedium(ed);
-                break;
-            case "resizeLarge":
-                this.imageService.resizeImageToLarge(ed);
-                break;
-            case "resizeOriginal":
-                this.imageService.resizeImageToOriginal(ed);
-                break;
-            case "deleteImage":
-                this.deleteImage();
-                break;
-        }
-    }
-    async changeImage() {
-        const ed = this.editor();
-        if (!ed)
-            return;
-        try {
-            // Utiliser la méthode spécifique pour remplacer une image existante
-            await this.imageService.selectAndReplaceImage(ed, {
-                quality: 0.8,
-                maxWidth: 1920,
-                maxHeight: 1080,
-                accept: "image/*",
-            });
-        }
-        catch (error) {
-            console.error("Erreur lors du changement d'image:", error);
-        }
-    }
-    deleteImage() {
-        const ed = this.editor();
-        if (ed) {
-            ed.chain().focus().deleteSelection().run();
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapImageBubbleMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: TiptapImageBubbleMenuComponent, isStandalone: true, selector: "tiptap-image-bubble-menu", inputs: { editor: { classPropertyName: "editor", publicName: "editor", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "menuRef", first: true, predicate: ["menuRef"], descendants: true }], ngImport: i0, template: `
-    <div #menuRef class="bubble-menu">
-      @if (imageBubbleMenuConfig().changeImage) {
-      <tiptap-button
-        icon="drive_file_rename_outline"
-        title="Changer l'image"
-        (click)="onCommand('changeImage', $event)"
-      ></tiptap-button>
-      } @if (imageBubbleMenuConfig().separator && hasResizeButtons()) {
-      <tiptap-separator></tiptap-separator>
-      } @if (imageBubbleMenuConfig().resizeSmall) {
-      <tiptap-button
-        icon="crop_square"
-        iconSize="small"
-        title="Petite (300×200)"
-        (click)="onCommand('resizeSmall', $event)"
-      ></tiptap-button>
-      } @if (imageBubbleMenuConfig().resizeMedium) {
-      <tiptap-button
-        icon="crop_square"
-        iconSize="medium"
-        title="Moyenne (500×350)"
-        (click)="onCommand('resizeMedium', $event)"
-      ></tiptap-button>
-      } @if (imageBubbleMenuConfig().resizeLarge) {
-      <tiptap-button
-        icon="crop_square"
-        iconSize="large"
-        title="Grande (800×600)"
-        (click)="onCommand('resizeLarge', $event)"
-      ></tiptap-button>
-      } @if (imageBubbleMenuConfig().resizeOriginal) {
-      <tiptap-button
-        icon="photo_size_select_actual"
-        title="Taille originale"
-        (click)="onCommand('resizeOriginal', $event)"
-      ></tiptap-button>
-      } @if (imageBubbleMenuConfig().separator &&
-      imageBubbleMenuConfig().deleteImage) {
-      <tiptap-separator></tiptap-separator>
-      } @if (imageBubbleMenuConfig().deleteImage) {
-      <tiptap-button
-        icon="delete"
-        title="Supprimer l'image"
-        variant="danger"
-        (click)="onCommand('deleteImage', $event)"
-      ></tiptap-button>
-      }
-    </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: TiptapButtonComponent, selector: "tiptap-button", inputs: ["icon", "title", "active", "disabled", "variant", "size", "iconSize"], outputs: ["onClick"] }, { kind: "component", type: TiptapSeparatorComponent, selector: "tiptap-separator", inputs: ["orientation", "size"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapImageBubbleMenuComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "tiptap-image-bubble-menu", standalone: true, imports: [TiptapButtonComponent, TiptapSeparatorComponent], template: `
-    <div #menuRef class="bubble-menu">
-      @if (imageBubbleMenuConfig().changeImage) {
-      <tiptap-button
-        icon="drive_file_rename_outline"
-        title="Changer l'image"
-        (click)="onCommand('changeImage', $event)"
-      ></tiptap-button>
-      } @if (imageBubbleMenuConfig().separator && hasResizeButtons()) {
-      <tiptap-separator></tiptap-separator>
-      } @if (imageBubbleMenuConfig().resizeSmall) {
-      <tiptap-button
-        icon="crop_square"
-        iconSize="small"
-        title="Petite (300×200)"
-        (click)="onCommand('resizeSmall', $event)"
-      ></tiptap-button>
-      } @if (imageBubbleMenuConfig().resizeMedium) {
-      <tiptap-button
-        icon="crop_square"
-        iconSize="medium"
-        title="Moyenne (500×350)"
-        (click)="onCommand('resizeMedium', $event)"
-      ></tiptap-button>
-      } @if (imageBubbleMenuConfig().resizeLarge) {
-      <tiptap-button
-        icon="crop_square"
-        iconSize="large"
-        title="Grande (800×600)"
-        (click)="onCommand('resizeLarge', $event)"
-      ></tiptap-button>
-      } @if (imageBubbleMenuConfig().resizeOriginal) {
-      <tiptap-button
-        icon="photo_size_select_actual"
-        title="Taille originale"
-        (click)="onCommand('resizeOriginal', $event)"
-      ></tiptap-button>
-      } @if (imageBubbleMenuConfig().separator &&
-      imageBubbleMenuConfig().deleteImage) {
-      <tiptap-separator></tiptap-separator>
-      } @if (imageBubbleMenuConfig().deleteImage) {
-      <tiptap-button
-        icon="delete"
-        title="Supprimer l'image"
-        variant="danger"
-        (click)="onCommand('deleteImage', $event)"
-      ></tiptap-button>
-      }
-    </div>
-  ` }]
-        }], ctorParameters: () => [], propDecorators: { menuRef: [{
-                type: ViewChild,
-                args: ["menuRef", { static: false }]
-            }] } });
-
 const ENGLISH_TRANSLATIONS = {
     toolbar: {
         bold: "Bold",
@@ -1853,6 +769,7 @@ const ENGLISH_TRANSLATIONS = {
         undo: "Undo",
         redo: "Redo",
         clear: "Clear",
+        textColor: "Text Color",
     },
     bubbleMenu: {
         bold: "Bold",
@@ -1863,6 +780,7 @@ const ENGLISH_TRANSLATIONS = {
         superscript: "Superscript",
         subscript: "Subscript",
         highlight: "Highlight",
+        textColor: "Text Color",
         link: "Link",
         addLink: "Add Link",
         editLink: "Edit Link",
@@ -2000,6 +918,7 @@ const FRENCH_TRANSLATIONS = {
         undo: "Annuler",
         redo: "Refaire",
         clear: "Vider",
+        textColor: "Couleur texte",
     },
     bubbleMenu: {
         bold: "Gras",
@@ -2010,6 +929,7 @@ const FRENCH_TRANSLATIONS = {
         superscript: "Exposant",
         subscript: "Indice",
         highlight: "Surligner",
+        textColor: "Couleur texte",
         link: "Lien",
         addLink: "Ajouter un lien",
         editLink: "Modifier le lien",
@@ -2131,72 +1051,1564 @@ const FRENCH_TRANSLATIONS = {
 };
 class TiptapI18nService {
     constructor() {
-        this._currentLocale = signal("en");
-        this._translations = signal({
-            en: ENGLISH_TRANSLATIONS,
-            fr: FRENCH_TRANSLATIONS,
+        this._currentLocale = signal("en");
+        this._translations = signal({
+            en: ENGLISH_TRANSLATIONS,
+            fr: FRENCH_TRANSLATIONS,
+        });
+        // Signaux publics
+        this.currentLocale = this._currentLocale.asReadonly();
+        this.translations = computed(() => this._translations()[this._currentLocale()]);
+        // Méthodes de traduction rapides
+        this.t = computed(() => this.translations());
+        this.toolbar = computed(() => this.translations().toolbar);
+        this.bubbleMenu = computed(() => this.translations().bubbleMenu);
+        this.slashCommands = computed(() => this.translations().slashCommands);
+        this.table = computed(() => this.translations().table);
+        this.imageUpload = computed(() => this.translations().imageUpload);
+        this.editor = computed(() => this.translations().editor);
+        this.common = computed(() => this.translations().common);
+        // Détecter automatiquement la langue du navigateur
+        this.detectBrowserLanguage();
+    }
+    setLocale(locale) {
+        this._currentLocale.set(locale);
+    }
+    autoDetectLocale() {
+        this.detectBrowserLanguage();
+    }
+    getSupportedLocales() {
+        return Object.keys(this._translations());
+    }
+    addTranslations(locale, translations) {
+        this._translations.update((current) => ({
+            ...current,
+            [locale]: {
+                ...current[locale],
+                ...translations,
+            },
+        }));
+    }
+    detectBrowserLanguage() {
+        const browserLang = navigator.language.toLowerCase();
+        if (browserLang.startsWith("fr")) {
+            this._currentLocale.set("fr");
+        }
+        else {
+            this._currentLocale.set("en");
+        }
+    }
+    // Méthodes utilitaires pour les composants
+    getToolbarTitle(key) {
+        return this.translations().toolbar[key];
+    }
+    getBubbleMenuTitle(key) {
+        return this.translations().bubbleMenu[key];
+    }
+    getSlashCommand(key) {
+        return this.translations().slashCommands[key];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapI18nService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapI18nService, providedIn: "root" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapI18nService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: "root",
+                }]
+        }], ctorParameters: () => [] });
+
+class TiptapTextColorPickerComponent {
+    constructor() {
+        this.editor = input.required();
+        this.interactionChange = output();
+        this.requestUpdate = output();
+        this.colorInputRef = viewChild("colorInput");
+        this.colorPickerSvc = inject(ColorPickerService);
+        this.i18nService = inject(TiptapI18nService);
+        this.t = this.i18nService.toolbar;
+        this.previewColor = signal(null);
+        this.isPicking = signal(false);
+        this.editorChange = signal(0);
+        this.currentColor = computed(() => {
+            this.editorChange();
+            return (this.previewColor() ?? this.colorPickerSvc.getCurrentColor(this.editor()));
+        });
+        this.hasColorApplied = computed(() => {
+            this.editorChange();
+            return this.previewColor()
+                ? true
+                : this.colorPickerSvc.hasColorApplied(this.editor());
+        });
+        this._syncEffect = void effect(() => {
+            const el = this.colorInputRef()?.nativeElement;
+            if (!el)
+                return;
+            el.value = this.currentColor();
+        });
+        effect(() => {
+            const ed = this.editor();
+            if (!ed)
+                return;
+            const update = () => this.notifyEditorChange();
+            ed.on("transaction", update);
+            ed.on("selectionUpdate", update);
+            ed.on("focus", update);
+            return () => {
+                ed.off("transaction", update);
+                ed.off("selectionUpdate", update);
+                ed.off("focus", update);
+            };
+        });
+    }
+    /**
+     * Notify Angular that the editor state should be re-read.
+     */
+    notifyEditorChange() {
+        this.editorChange.update((v) => v + 1);
+    }
+    /**
+     * Keep the native <input type="color"> in sync with selection changes.
+     */
+    syncColorInputValue() {
+        this.previewColor.set(null);
+        this.isPicking.set(false);
+        // Reason: force recomputation from editor selection when bubble menu re-opens.
+        this.notifyEditorChange();
+    }
+    /**
+     * Programmatically click the hidden color input.
+     */
+    triggerPicker() {
+        this.colorInputRef()?.nativeElement.click();
+    }
+    /**
+     * Preserve selection while interacting with native color input.
+     */
+    onColorMouseDown(event) {
+        event.stopPropagation();
+        this.colorPickerSvc.captureSelection(this.editor());
+        this.isPicking.set(true);
+        this.interactionChange.emit(true);
+    }
+    /**
+     * Called when the native color picker is closed.
+     */
+    onColorPickerClose() {
+        this.previewColor.set(null);
+        this.isPicking.set(false);
+        // Commit the final color to history
+        const inputEl = this.colorInputRef()?.nativeElement;
+        if (inputEl) {
+            this.colorPickerSvc.applyColor(this.editor(), inputEl.value, {
+                addToHistory: true,
+            });
+        }
+        this.colorPickerSvc.done();
+        this.interactionChange.emit(false);
+        this.requestUpdate.emit();
+    }
+    /**
+     * Apply selected color.
+     */
+    onColorInput(event) {
+        const inputEl = event.target;
+        const color = inputEl.value;
+        // Update the UI immediately while the user drags in the native picker.
+        this.previewColor.set(this.colorPickerSvc.normalizeColor(color));
+        // Live preview WITHOUT history pollution
+        this.colorPickerSvc.applyColor(this.editor(), color, {
+            addToHistory: false,
+        });
+        this.requestUpdate.emit();
+    }
+    /**
+     * Prevent opening the native picker when clicking the clear badge.
+     */
+    onClearBadgeMouseDown(event) {
+        event.preventDefault();
+        event.stopPropagation();
+    }
+    /**
+     * Clear color via the badge.
+     */
+    onClearBadgeClick(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.previewColor.set(null);
+        this.isPicking.set(false);
+        this.colorPickerSvc.unsetColor(this.editor());
+        this.requestUpdate.emit();
+    }
+    /**
+     * Called when the color picker is done interacting.
+     */
+    done() {
+        this.colorPickerSvc.done();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapTextColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: TiptapTextColorPickerComponent, isStandalone: true, selector: "tiptap-text-color-picker", inputs: { editor: { classPropertyName: "editor", publicName: "editor", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { interactionChange: "interactionChange", requestUpdate: "requestUpdate" }, viewQueries: [{ propertyName: "colorInputRef", first: true, predicate: ["colorInput"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div class="text-color-picker-container">
+      <tiptap-button
+        icon="format_color_text"
+        [title]="t().textColor"
+        [color]="hasColorApplied() ? currentColor() : undefined"
+        (onClick)="triggerPicker()"
+      >
+        <input
+          #colorInput
+          type="color"
+          [value]="currentColor()"
+          (mousedown)="onColorMouseDown($event)"
+          (input)="onColorInput($event)"
+          (change)="onColorPickerClose()"
+          (blur)="onColorPickerClose()"
+        />
+      </tiptap-button>
+
+      @if (hasColorApplied()) {
+      <button
+        class="btn-clear-badge"
+        type="button"
+        [title]="t().clear"
+        (mousedown)="onClearBadgeMouseDown($event)"
+        (click)="onClearBadgeClick($event)"
+      >
+        <span class="material-symbols-outlined">close</span>
+      </button>
+      }
+    </div>
+  `, isInline: true, styles: [".text-color-picker-container{position:relative;display:inline-flex;align-items:center}.text-color-picker-container tiptap-button{position:relative}.btn-clear-badge{position:absolute;top:-4px;right:-4px;width:14px;height:14px;padding:0;border:none;border-radius:999px;background:#0f172abf;color:#fff;display:flex;align-items:center;justify-content:center;z-index:10;opacity:0;pointer-events:none;transition:opacity .12s ease}.text-color-picker-container:hover .btn-clear-badge{opacity:1;pointer-events:auto}.btn-clear-badge .material-symbols-outlined{font-size:10px;line-height:1}input[type=color]{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;z-index:5}\n"], dependencies: [{ kind: "component", type: TiptapButtonComponent, selector: "tiptap-button", inputs: ["icon", "title", "active", "disabled", "color", "variant", "size", "iconSize"], outputs: ["onClick"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapTextColorPickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "tiptap-text-color-picker", standalone: true, imports: [TiptapButtonComponent], template: `
+    <div class="text-color-picker-container">
+      <tiptap-button
+        icon="format_color_text"
+        [title]="t().textColor"
+        [color]="hasColorApplied() ? currentColor() : undefined"
+        (onClick)="triggerPicker()"
+      >
+        <input
+          #colorInput
+          type="color"
+          [value]="currentColor()"
+          (mousedown)="onColorMouseDown($event)"
+          (input)="onColorInput($event)"
+          (change)="onColorPickerClose()"
+          (blur)="onColorPickerClose()"
+        />
+      </tiptap-button>
+
+      @if (hasColorApplied()) {
+      <button
+        class="btn-clear-badge"
+        type="button"
+        [title]="t().clear"
+        (mousedown)="onClearBadgeMouseDown($event)"
+        (click)="onClearBadgeClick($event)"
+      >
+        <span class="material-symbols-outlined">close</span>
+      </button>
+      }
+    </div>
+  `, styles: [".text-color-picker-container{position:relative;display:inline-flex;align-items:center}.text-color-picker-container tiptap-button{position:relative}.btn-clear-badge{position:absolute;top:-4px;right:-4px;width:14px;height:14px;padding:0;border:none;border-radius:999px;background:#0f172abf;color:#fff;display:flex;align-items:center;justify-content:center;z-index:10;opacity:0;pointer-events:none;transition:opacity .12s ease}.text-color-picker-container:hover .btn-clear-badge{opacity:1;pointer-events:auto}.btn-clear-badge .material-symbols-outlined{font-size:10px;line-height:1}input[type=color]{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;z-index:5}\n"] }]
+        }], ctorParameters: () => [] });
+
+class TiptapBubbleMenuComponent {
+    /**
+     * Keep bubble menu visible while the native color picker steals focus.
+     */
+    onColorPickerInteractionChange(isInteracting) {
+        this.isColorPickerInteracting = isInteracting;
+    }
+    // Effect comme propriété de classe pour éviter l'erreur d'injection context
+    constructor() {
+        this.editor = input.required();
+        this.config = input({
+            bold: true,
+            italic: true,
+            underline: true,
+            strike: true,
+            code: true,
+            superscript: false,
+            subscript: false,
+            highlight: true,
+            textColor: false,
+            link: true,
+            separator: true,
+        });
+        this.tippyInstance = null;
+        this.updateTimeout = null;
+        this.isColorPickerInteracting = false;
+        this.bubbleMenuConfig = computed(() => ({
+            bold: true,
+            italic: true,
+            underline: true,
+            strike: true,
+            code: true,
+            superscript: false,
+            subscript: false,
+            highlight: true,
+            textColor: false,
+            link: true,
+            separator: true,
+            ...this.config(),
+        }));
+        this.i18nService = inject(TiptapI18nService);
+        this.t = this.i18nService.bubbleMenu;
+        this.updateMenu = () => {
+            // Debounce pour éviter les appels trop fréquents
+            if (this.updateTimeout) {
+                clearTimeout(this.updateTimeout);
+            }
+            this.updateTimeout = setTimeout(() => {
+                const ed = this.editor();
+                if (!ed)
+                    return;
+                if (!this.isColorPickerInteracting && this.textColorPicker) {
+                    this.textColorPicker.done();
+                }
+                const { selection } = ed.state;
+                const { from, to } = selection;
+                const hasTextSelection = from !== to && !(selection instanceof CellSelection);
+                const isImageSelected = ed.isActive("image") || ed.isActive("resizableImage");
+                const isTableCellSelected = ed.isActive("tableCell") || ed.isActive("tableHeader");
+                const hasCellSelection = selection instanceof CellSelection;
+                // Ne montrer le menu texte que si :
+                // - Il y a une sélection de texte (pas une sélection de cellules multiples)
+                // - Aucune image n'est sélectionnée (priorité aux images)
+                // - Ce n'est pas une sélection de cellules multiples (CellSelection)
+                // - L'éditeur est éditable
+                // Note: Le texte dans une cellule est autorisé (isTableCellSelected peut être true)
+                const shouldShow = hasTextSelection &&
+                    !isImageSelected &&
+                    !hasCellSelection &&
+                    ed.isEditable;
+                if (shouldShow) {
+                    this.showTippy();
+                }
+                else {
+                    if (!this.isColorPickerInteracting) {
+                        this.hideTippy();
+                    }
+                }
+            }, 10);
+        };
+        this.handleBlur = () => {
+            // Masquer le menu quand l'éditeur perd le focus
+            setTimeout(() => {
+                if (!this.isColorPickerInteracting && this.textColorPicker) {
+                    this.textColorPicker.done();
+                    this.hideTippy();
+                }
+            }, 100);
+        };
+        effect(() => {
+            const ed = this.editor();
+            if (!ed)
+                return;
+            // Nettoyer les anciens listeners
+            ed.off("selectionUpdate", this.updateMenu);
+            ed.off("transaction", this.updateMenu);
+            ed.off("focus", this.updateMenu);
+            ed.off("blur", this.handleBlur);
+            // Ajouter les nouveaux listeners
+            ed.on("selectionUpdate", this.updateMenu);
+            ed.on("transaction", this.updateMenu);
+            ed.on("focus", this.updateMenu);
+            ed.on("blur", this.handleBlur);
+            // Ne pas appeler updateMenu() ici pour éviter l'affichage prématuré
+            // Il sera appelé automatiquement quand l'éditeur sera prêt
+        });
+    }
+    ngOnInit() {
+        // Initialiser Tippy de manière synchrone après que le component soit ready
+        this.initTippy();
+    }
+    ngOnDestroy() {
+        const ed = this.editor();
+        if (ed) {
+            ed.off("selectionUpdate", this.updateMenu);
+            ed.off("transaction", this.updateMenu);
+            ed.off("focus", this.updateMenu);
+            ed.off("blur", this.handleBlur);
+        }
+        // Nettoyer les timeouts
+        if (this.updateTimeout) {
+            clearTimeout(this.updateTimeout);
+        }
+        // Nettoyer Tippy
+        if (this.tippyInstance) {
+            this.tippyInstance.destroy();
+            this.tippyInstance = null;
+        }
+    }
+    initTippy() {
+        // Attendre que l'élément soit disponible
+        if (!this.menuRef?.nativeElement) {
+            setTimeout(() => this.initTippy(), 50);
+            return;
+        }
+        const menuElement = this.menuRef.nativeElement;
+        // S'assurer qu'il n'y a pas déjà une instance
+        if (this.tippyInstance) {
+            this.tippyInstance.destroy();
+        }
+        // Créer l'instance Tippy
+        this.tippyInstance = tippy(document.body, {
+            content: menuElement,
+            trigger: "manual",
+            placement: "top-start",
+            appendTo: () => document.body,
+            interactive: true,
+            arrow: false,
+            offset: [0, 8],
+            hideOnClick: false,
+            onShow: (instance) => {
+                // S'assurer que les autres menus sont fermés
+                this.hideOtherMenus();
+            },
+            getReferenceClientRect: () => this.getSelectionRect(),
+            // Améliorer le positionnement avec scroll
+            popperOptions: {
+                modifiers: [
+                    {
+                        name: "preventOverflow",
+                        options: {
+                            boundary: "viewport",
+                            padding: 8,
+                        },
+                    },
+                    {
+                        name: "flip",
+                        options: {
+                            fallbackPlacements: ["bottom-start", "top-end", "bottom-end"],
+                        },
+                    },
+                ],
+            },
+        });
+        // Maintenant que Tippy est initialisé, faire un premier check
+        this.updateMenu();
+    }
+    getSelectionRect() {
+        const ed = this.editor();
+        if (!ed)
+            return new DOMRect(0, 0, 0, 0);
+        const { from, to } = ed.state.selection;
+        if (from === to)
+            return new DOMRect(0, 0, 0, 0);
+        // 1. Try native selection for multi-line accuracy
+        const selection = window.getSelection();
+        if (selection && selection.rangeCount > 0) {
+            const range = selection.getRangeAt(0);
+            const rect = range.getBoundingClientRect();
+            // Ensure the rect is valid and belongs to the editor
+            if (rect.width > 0 && rect.height > 0) {
+                return rect;
+            }
+        }
+        // 2. Fallback to Tiptap coordinates for precision (single line / edge cases)
+        const start = ed.view.coordsAtPos(from);
+        const end = ed.view.coordsAtPos(to);
+        const top = Math.min(start.top, end.top);
+        const bottom = Math.max(start.bottom, end.bottom);
+        const left = Math.min(start.left, end.left);
+        const right = Math.max(start.right, end.right);
+        return new DOMRect(left, top, right - left, bottom - top);
+    }
+    hideOtherMenus() {
+        // Cette méthode peut être étendue pour fermer d'autres menus si nécessaire
+        // Pour l'instant, elle sert de placeholder pour une future coordination entre menus
+    }
+    showTippy() {
+        if (!this.tippyInstance)
+            return;
+        // Mettre à jour la position
+        this.tippyInstance.setProps({
+            getReferenceClientRect: () => this.getSelectionRect(),
+        });
+        this.tippyInstance.show();
+        this.textColorPicker?.syncColorInputValue();
+    }
+    hideTippy() {
+        if (this.tippyInstance) {
+            this.tippyInstance.hide();
+        }
+    }
+    isActive(mark) {
+        const ed = this.editor();
+        return ed?.isActive(mark) || false;
+    }
+    onCommand(command, event) {
+        event.preventDefault();
+        const ed = this.editor();
+        if (!ed)
+            return;
+        switch (command) {
+            case "bold":
+                ed.chain().focus().toggleBold().run();
+                break;
+            case "italic":
+                ed.chain().focus().toggleItalic().run();
+                break;
+            case "underline":
+                ed.chain().focus().toggleUnderline().run();
+                break;
+            case "strike":
+                ed.chain().focus().toggleStrike().run();
+                break;
+            case "code":
+                ed.chain().focus().toggleCode().run();
+                break;
+            case "superscript":
+                ed.chain().focus().toggleSuperscript().run();
+                break;
+            case "subscript":
+                ed.chain().focus().toggleSubscript().run();
+                break;
+            case "highlight":
+                ed.chain().focus().toggleHighlight().run();
+                break;
+            case "link":
+                const href = window.prompt("URL du lien:");
+                if (href) {
+                    ed.chain().focus().toggleLink({ href }).run();
+                }
+                break;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapBubbleMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: TiptapBubbleMenuComponent, isStandalone: true, selector: "tiptap-bubble-menu", inputs: { editor: { classPropertyName: "editor", publicName: "editor", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "menuRef", first: true, predicate: ["menuRef"], descendants: true }, { propertyName: "textColorPicker", first: true, predicate: ["textColorPicker"], descendants: true }], ngImport: i0, template: `
+    <div #menuRef class="bubble-menu">
+      @if (bubbleMenuConfig().bold) {
+      <tiptap-button
+        icon="format_bold"
+        [title]="t().bold"
+        [active]="isActive('bold')"
+        (click)="onCommand('bold', $event)"
+      ></tiptap-button>
+      } @if (bubbleMenuConfig().italic) {
+      <tiptap-button
+        icon="format_italic"
+        [title]="t().italic"
+        [active]="isActive('italic')"
+        (click)="onCommand('italic', $event)"
+      ></tiptap-button>
+      } @if (bubbleMenuConfig().underline) {
+      <tiptap-button
+        icon="format_underlined"
+        [title]="t().underline"
+        [active]="isActive('underline')"
+        (click)="onCommand('underline', $event)"
+      ></tiptap-button>
+      } @if (bubbleMenuConfig().strike) {
+      <tiptap-button
+        icon="strikethrough_s"
+        [title]="t().strike"
+        [active]="isActive('strike')"
+        (click)="onCommand('strike', $event)"
+      ></tiptap-button>
+      } @if (bubbleMenuConfig().superscript) {
+      <tiptap-button
+        icon="superscript"
+        [title]="t().superscript"
+        [active]="isActive('superscript')"
+        (click)="onCommand('superscript', $event)"
+      ></tiptap-button>
+      } @if (bubbleMenuConfig().subscript) {
+      <tiptap-button
+        icon="subscript"
+        [title]="t().subscript"
+        [active]="isActive('subscript')"
+        (click)="onCommand('subscript', $event)"
+      ></tiptap-button>
+      } @if (bubbleMenuConfig().highlight) {
+      <tiptap-button
+        icon="highlight"
+        [title]="t().highlight"
+        [active]="isActive('highlight')"
+        (click)="onCommand('highlight', $event)"
+      ></tiptap-button>
+      } @if (bubbleMenuConfig().textColor) {
+      <tiptap-text-color-picker
+        #textColorPicker
+        [editor]="editor()"
+        (interactionChange)="onColorPickerInteractionChange($event)"
+        (requestUpdate)="updateMenu()"
+      />
+      } @if (bubbleMenuConfig().separator && (bubbleMenuConfig().code ||
+      bubbleMenuConfig().link)) {
+      <div class="tiptap-separator"></div>
+      } @if (bubbleMenuConfig().code) {
+      <tiptap-button
+        icon="code"
+        [title]="t().code"
+        [active]="isActive('code')"
+        (click)="onCommand('code', $event)"
+      ></tiptap-button>
+      } @if (bubbleMenuConfig().link) {
+      <tiptap-button
+        icon="link"
+        [title]="t().link"
+        [active]="isActive('link')"
+        (click)="onCommand('link', $event)"
+      ></tiptap-button>
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "component", type: TiptapButtonComponent, selector: "tiptap-button", inputs: ["icon", "title", "active", "disabled", "color", "variant", "size", "iconSize"], outputs: ["onClick"] }, { kind: "component", type: TiptapTextColorPickerComponent, selector: "tiptap-text-color-picker", inputs: ["editor"], outputs: ["interactionChange", "requestUpdate"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapBubbleMenuComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "tiptap-bubble-menu",
+                    standalone: true,
+                    imports: [TiptapButtonComponent, TiptapTextColorPickerComponent],
+                    template: `
+    <div #menuRef class="bubble-menu">
+      @if (bubbleMenuConfig().bold) {
+      <tiptap-button
+        icon="format_bold"
+        [title]="t().bold"
+        [active]="isActive('bold')"
+        (click)="onCommand('bold', $event)"
+      ></tiptap-button>
+      } @if (bubbleMenuConfig().italic) {
+      <tiptap-button
+        icon="format_italic"
+        [title]="t().italic"
+        [active]="isActive('italic')"
+        (click)="onCommand('italic', $event)"
+      ></tiptap-button>
+      } @if (bubbleMenuConfig().underline) {
+      <tiptap-button
+        icon="format_underlined"
+        [title]="t().underline"
+        [active]="isActive('underline')"
+        (click)="onCommand('underline', $event)"
+      ></tiptap-button>
+      } @if (bubbleMenuConfig().strike) {
+      <tiptap-button
+        icon="strikethrough_s"
+        [title]="t().strike"
+        [active]="isActive('strike')"
+        (click)="onCommand('strike', $event)"
+      ></tiptap-button>
+      } @if (bubbleMenuConfig().superscript) {
+      <tiptap-button
+        icon="superscript"
+        [title]="t().superscript"
+        [active]="isActive('superscript')"
+        (click)="onCommand('superscript', $event)"
+      ></tiptap-button>
+      } @if (bubbleMenuConfig().subscript) {
+      <tiptap-button
+        icon="subscript"
+        [title]="t().subscript"
+        [active]="isActive('subscript')"
+        (click)="onCommand('subscript', $event)"
+      ></tiptap-button>
+      } @if (bubbleMenuConfig().highlight) {
+      <tiptap-button
+        icon="highlight"
+        [title]="t().highlight"
+        [active]="isActive('highlight')"
+        (click)="onCommand('highlight', $event)"
+      ></tiptap-button>
+      } @if (bubbleMenuConfig().textColor) {
+      <tiptap-text-color-picker
+        #textColorPicker
+        [editor]="editor()"
+        (interactionChange)="onColorPickerInteractionChange($event)"
+        (requestUpdate)="updateMenu()"
+      />
+      } @if (bubbleMenuConfig().separator && (bubbleMenuConfig().code ||
+      bubbleMenuConfig().link)) {
+      <div class="tiptap-separator"></div>
+      } @if (bubbleMenuConfig().code) {
+      <tiptap-button
+        icon="code"
+        [title]="t().code"
+        [active]="isActive('code')"
+        (click)="onCommand('code', $event)"
+      ></tiptap-button>
+      } @if (bubbleMenuConfig().link) {
+      <tiptap-button
+        icon="link"
+        [title]="t().link"
+        [active]="isActive('link')"
+        (click)="onCommand('link', $event)"
+      ></tiptap-button>
+      }
+    </div>
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { menuRef: [{
+                type: ViewChild,
+                args: ["menuRef", { static: false }]
+            }], textColorPicker: [{
+                type: ViewChild,
+                args: ["textColorPicker", { static: false }]
+            }] } });
+
+class TiptapSeparatorComponent {
+    constructor() {
+        this.orientation = input("vertical");
+        this.size = input("medium");
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapSeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.0", type: TiptapSeparatorComponent, isStandalone: true, selector: "tiptap-separator", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div
+      class="tiptap-separator"
+      [class.vertical]="orientation() === 'vertical'"
+      [class.horizontal]="orientation() === 'horizontal'"
+      [class.small]="size() === 'small'"
+      [class.medium]="size() === 'medium'"
+      [class.large]="size() === 'large'"
+    ></div>
+  `, isInline: true, styles: [".tiptap-separator{background-color:#e2e8f0;margin:0}.tiptap-separator.vertical{width:1px;height:24px;margin:0 8px}.tiptap-separator.horizontal{height:1px;width:100%;margin:8px 0}.tiptap-separator.small.vertical{height:16px;margin:0 4px}.tiptap-separator.small.horizontal{margin:4px 0}.tiptap-separator.medium.vertical{height:24px;margin:0 8px}.tiptap-separator.medium.horizontal{margin:8px 0}.tiptap-separator.large.vertical{height:32px;margin:0 12px}.tiptap-separator.large.horizontal{margin:12px 0}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapSeparatorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "tiptap-separator", standalone: true, template: `
+    <div
+      class="tiptap-separator"
+      [class.vertical]="orientation() === 'vertical'"
+      [class.horizontal]="orientation() === 'horizontal'"
+      [class.small]="size() === 'small'"
+      [class.medium]="size() === 'medium'"
+      [class.large]="size() === 'large'"
+    ></div>
+  `, styles: [".tiptap-separator{background-color:#e2e8f0;margin:0}.tiptap-separator.vertical{width:1px;height:24px;margin:0 8px}.tiptap-separator.horizontal{height:1px;width:100%;margin:8px 0}.tiptap-separator.small.vertical{height:16px;margin:0 4px}.tiptap-separator.small.horizontal{margin:4px 0}.tiptap-separator.medium.vertical{height:24px;margin:0 8px}.tiptap-separator.medium.horizontal{margin:8px 0}.tiptap-separator.large.vertical{height:32px;margin:0 12px}.tiptap-separator.large.horizontal{margin:12px 0}\n"] }]
+        }] });
+
+class ImageService {
+    constructor() {
+        // Signals pour l'état des images
+        this.selectedImage = signal(null);
+        this.isImageSelected = computed(() => this.selectedImage() !== null);
+        this.isResizing = signal(false);
+        // Signaux pour l'upload
+        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;
+    }
+    // Méthodes pour la gestion des images
+    selectImage(editor) {
+        if (editor.isActive("resizableImage")) {
+            const attrs = editor.getAttributes("resizableImage");
+            this.selectedImage.set({
+                src: attrs["src"],
+                alt: attrs["alt"],
+                title: attrs["title"],
+                width: attrs["width"],
+                height: attrs["height"],
+            });
+        }
+        else {
+            this.selectedImage.set(null);
+        }
+    }
+    clearSelection() {
+        this.selectedImage.set(null);
+    }
+    // Méthodes pour manipuler les images
+    insertImage(editor, imageData) {
+        editor.chain().focus().setResizableImage(imageData).run();
+    }
+    updateImageAttributes(editor, attributes) {
+        if (editor.isActive("resizableImage")) {
+            editor
+                .chain()
+                .focus()
+                .updateAttributes("resizableImage", attributes)
+                .run();
+            this.updateSelectedImage(attributes);
+        }
+    }
+    // Nouvelles méthodes pour le redimensionnement
+    resizeImage(editor, options) {
+        if (!editor.isActive("resizableImage"))
+            return;
+        const currentAttrs = editor.getAttributes("resizableImage");
+        let newWidth = options.width;
+        let newHeight = options.height;
+        // Maintenir le ratio d'aspect si demandé
+        if (options.maintainAspectRatio !== false &&
+            currentAttrs["width"] &&
+            currentAttrs["height"]) {
+            const aspectRatio = currentAttrs["width"] / currentAttrs["height"];
+            if (newWidth && !newHeight) {
+                newHeight = Math.round(newWidth / aspectRatio);
+            }
+            else if (newHeight && !newWidth) {
+                newWidth = Math.round(newHeight * aspectRatio);
+            }
+        }
+        // Appliquer des limites minimales
+        if (newWidth)
+            newWidth = Math.max(50, newWidth);
+        if (newHeight)
+            newHeight = Math.max(50, newHeight);
+        this.updateImageAttributes(editor, {
+            width: newWidth,
+            height: newHeight,
+        });
+    }
+    // Méthodes pour redimensionner par pourcentage
+    resizeImageByPercentage(editor, percentage) {
+        if (!editor.isActive("resizableImage"))
+            return;
+        const currentAttrs = editor.getAttributes("resizableImage");
+        if (!currentAttrs["width"] || !currentAttrs["height"])
+            return;
+        const newWidth = Math.round(currentAttrs["width"] * (percentage / 100));
+        const newHeight = Math.round(currentAttrs["height"] * (percentage / 100));
+        this.resizeImage(editor, { width: newWidth, height: newHeight });
+    }
+    // Méthodes pour redimensionner à des tailles prédéfinies
+    resizeImageToSmall(editor) {
+        this.resizeImage(editor, {
+            width: 300,
+            height: 200,
+            maintainAspectRatio: true,
+        });
+    }
+    resizeImageToMedium(editor) {
+        this.resizeImage(editor, {
+            width: 500,
+            height: 350,
+            maintainAspectRatio: true,
+        });
+    }
+    resizeImageToLarge(editor) {
+        this.resizeImage(editor, {
+            width: 800,
+            height: 600,
+            maintainAspectRatio: true,
+        });
+    }
+    resizeImageToOriginal(editor) {
+        if (!editor.isActive("resizableImage"))
+            return;
+        const img = new Image();
+        img.onload = () => {
+            this.resizeImage(editor, {
+                width: img.naturalWidth,
+                height: img.naturalHeight,
+            });
+        };
+        img.src = editor.getAttributes("resizableImage")["src"];
+    }
+    // Méthode pour redimensionner librement (sans maintenir le ratio)
+    resizeImageFreely(editor, width, height) {
+        this.resizeImage(editor, {
+            width,
+            height,
+            maintainAspectRatio: false,
+        });
+    }
+    // Méthode pour obtenir les dimensions actuelles de l'image
+    getImageDimensions(editor) {
+        if (!editor.isActive("resizableImage"))
+            return null;
+        const attrs = editor.getAttributes("resizableImage");
+        return {
+            width: attrs["width"] || 0,
+            height: attrs["height"] || 0,
+        };
+    }
+    // Méthode pour obtenir les dimensions naturelles de l'image
+    getNaturalImageDimensions(src) {
+        return new Promise((resolve, reject) => {
+            const img = new Image();
+            img.onload = () => {
+                resolve({ width: img.naturalWidth, height: img.naturalHeight });
+            };
+            img.onerror = () => {
+                reject(new Error("Impossible de charger l'image"));
+            };
+            img.src = src;
+        });
+    }
+    deleteImage(editor) {
+        if (editor.isActive("resizableImage")) {
+            editor.chain().focus().deleteSelection().run();
+            this.clearSelection();
+        }
+    }
+    // Méthodes utilitaires
+    updateSelectedImage(attributes) {
+        const current = this.selectedImage();
+        if (current) {
+            this.selectedImage.set({ ...current, ...attributes });
+        }
+    }
+    // Validation des images
+    validateImage(file, maxSize = 5 * 1024 * 1024) {
+        if (!file.type.startsWith("image/")) {
+            return { valid: false, error: "Le fichier doit être une image" };
+        }
+        if (file.size > maxSize) {
+            return {
+                valid: false,
+                error: `L'image est trop volumineuse (max ${maxSize / 1024 / 1024}MB)`,
+            };
+        }
+        return { valid: true };
+    }
+    // Compression d'image
+    async compressImage(file, quality = 0.8, maxWidth = 1920, maxHeight = 1080) {
+        return new Promise((resolve, reject) => {
+            const canvas = document.createElement("canvas");
+            const ctx = canvas.getContext("2d");
+            const img = new Image();
+            img.onload = () => {
+                // Mise à jour du progrès
+                if (this.isUploading()) {
+                    this.uploadProgress.set(40);
+                    this.uploadMessage.set("Redimensionnement...");
+                    this.forceEditorUpdate();
+                }
+                let { width, height } = img;
+                // Redimensionner si nécessaire
+                if (width > maxWidth || height > maxHeight) {
+                    const ratio = Math.min(maxWidth / width, maxHeight / height);
+                    width *= ratio;
+                    height *= ratio;
+                }
+                canvas.width = width;
+                canvas.height = height;
+                // Dessiner l'image redimensionnée
+                ctx?.drawImage(img, 0, 0, width, height);
+                // Mise à jour du progrès
+                if (this.isUploading()) {
+                    this.uploadProgress.set(60);
+                    this.uploadMessage.set("Compression...");
+                    this.forceEditorUpdate();
+                }
+                // Convertir en base64 avec compression
+                canvas.toBlob((blob) => {
+                    if (blob) {
+                        const reader = new FileReader();
+                        reader.onload = (e) => {
+                            const base64 = e.target?.result;
+                            if (base64) {
+                                const result = {
+                                    src: base64,
+                                    name: file.name,
+                                    size: blob.size,
+                                    type: file.type,
+                                    width: Math.round(width),
+                                    height: Math.round(height),
+                                    originalSize: file.size,
+                                };
+                                resolve(result);
+                            }
+                            else {
+                                reject(new Error("Erreur lors de la compression"));
+                            }
+                        };
+                        reader.readAsDataURL(blob);
+                    }
+                    else {
+                        reject(new Error("Erreur lors de la compression"));
+                    }
+                }, file.type, quality);
+            };
+            img.onerror = () => reject(new Error("Erreur lors du chargement de l'image"));
+            img.src = URL.createObjectURL(file);
+        });
+    }
+    // Méthode privée générique pour uploader avec progression
+    async uploadImageWithProgress(editor, file, insertionStrategy, actionMessage, options) {
+        try {
+            // Stocker la référence à l'éditeur
+            this.currentEditor = editor;
+            this.isUploading.set(true);
+            this.uploadProgress.set(0);
+            this.uploadMessage.set("Validation du fichier...");
+            this.forceEditorUpdate();
+            // Validation
+            const validation = this.validateImage(file);
+            if (!validation.valid) {
+                throw new Error(validation.error);
+            }
+            this.uploadProgress.set(20);
+            this.uploadMessage.set("Compression en cours...");
+            this.forceEditorUpdate();
+            // Petit délai pour permettre à l'utilisateur de voir la progression
+            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
+            await new Promise((resolve) => setTimeout(resolve, 100));
+            // Exécuter la stratégie d'insertion
+            insertionStrategy(editor, result);
+            // L'action est terminée, maintenant on peut cacher l'indicateur
+            this.isUploading.set(false);
+            this.uploadProgress.set(0);
+            this.uploadMessage.set("");
+            this.forceEditorUpdate();
+            this.currentEditor = null;
+        }
+        catch (error) {
+            this.isUploading.set(false);
+            this.uploadProgress.set(0);
+            this.uploadMessage.set("");
+            this.forceEditorUpdate();
+            this.currentEditor = null;
+            console.error("Erreur lors de l'upload d'image:", error);
+            throw error;
+        }
+    }
+    // Méthode unifiée pour uploader et insérer une image
+    async uploadAndInsertImage(editor, file, options) {
+        return this.uploadImageWithProgress(editor, file, (editor, result) => {
+            this.insertImage(editor, {
+                src: result.src,
+                alt: result.name,
+                title: `${result.name} (${result.width}×${result.height})`,
+                width: result.width,
+                height: result.height,
+            });
+        }, "Insertion dans l'éditeur...", options);
+    }
+    // Méthode pour forcer la mise à jour de l'éditeur
+    forceEditorUpdate() {
+        if (this.currentEditor) {
+            // Déclencher une transaction vide pour forcer la mise à jour des décorations
+            const { tr } = this.currentEditor.state;
+            this.currentEditor.view.dispatch(tr);
+        }
+    }
+    // Méthode privée générique pour créer un sélecteur de fichier
+    async selectFileAndProcess(editor, uploadMethod, options) {
+        return new Promise((resolve, reject) => {
+            const input = document.createElement("input");
+            input.type = "file";
+            input.accept = options?.accept || "image/*";
+            input.style.display = "none";
+            input.addEventListener("change", async (e) => {
+                const file = e.target.files?.[0];
+                if (file && file.type.startsWith("image/")) {
+                    try {
+                        await uploadMethod(editor, file, options);
+                        resolve();
+                    }
+                    catch (error) {
+                        reject(error);
+                    }
+                }
+                else {
+                    reject(new Error("Aucun fichier image sélectionné"));
+                }
+                document.body.removeChild(input);
+            });
+            input.addEventListener("cancel", () => {
+                document.body.removeChild(input);
+                reject(new Error("Sélection annulée"));
+            });
+            document.body.appendChild(input);
+            input.click();
+        });
+    }
+    // Méthode pour créer un sélecteur de fichier et uploader une image
+    async selectAndUploadImage(editor, options) {
+        return this.selectFileAndProcess(editor, this.uploadAndInsertImage.bind(this), options);
+    }
+    // Méthode pour sélectionner et remplacer une image existante
+    async selectAndReplaceImage(editor, options) {
+        return this.selectFileAndProcess(editor, this.uploadAndReplaceImage.bind(this), options);
+    }
+    // Méthode pour remplacer une image existante avec indicateur de progression
+    async uploadAndReplaceImage(editor, file, options) {
+        // Sauvegarder les attributs de l'image actuelle pour restauration en cas d'échec
+        const currentImageAttrs = editor.getAttributes("resizableImage");
+        const backupImage = { ...currentImageAttrs };
+        try {
+            // Supprimer visuellement l'ancienne image immédiatement
+            editor.chain().focus().deleteSelection().run();
+            // Stocker la référence à l'éditeur
+            this.currentEditor = editor;
+            this.isUploading.set(true);
+            this.uploadProgress.set(0);
+            this.uploadMessage.set("Validation du fichier...");
+            this.forceEditorUpdate();
+            // Validation
+            const validation = this.validateImage(file);
+            if (!validation.valid) {
+                throw new Error(validation.error);
+            }
+            this.uploadProgress.set(20);
+            this.uploadMessage.set("Compression en cours...");
+            this.forceEditorUpdate();
+            // Petit délai pour permettre à l'utilisateur de voir la progression
+            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);
+            this.uploadMessage.set("Remplacement de l'image...");
+            this.forceEditorUpdate();
+            // Petit délai pour le remplacement
+            await new Promise((resolve) => setTimeout(resolve, 100));
+            // Insérer la nouvelle image à la position actuelle
+            this.insertImage(editor, {
+                src: result.src,
+                alt: result.name,
+                title: `${result.name} (${result.width}×${result.height})`,
+                width: result.width,
+                height: result.height,
+            });
+            // L'image est remplacée, maintenant on peut cacher l'indicateur
+            this.isUploading.set(false);
+            this.uploadProgress.set(0);
+            this.uploadMessage.set("");
+            this.forceEditorUpdate();
+            this.currentEditor = null;
+        }
+        catch (error) {
+            // En cas d'erreur, restaurer l'image originale
+            if (backupImage["src"]) {
+                this.insertImage(editor, {
+                    src: backupImage["src"],
+                    alt: backupImage["alt"],
+                    title: backupImage["title"],
+                    width: backupImage["width"],
+                    height: backupImage["height"],
+                });
+            }
+            this.isUploading.set(false);
+            this.uploadProgress.set(0);
+            this.uploadMessage.set("");
+            this.forceEditorUpdate();
+            this.currentEditor = null;
+            console.error("Erreur lors du remplacement d'image:", error);
+            throw error;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ImageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ImageService, providedIn: "root" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ImageService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: "root",
+                }]
+        }] });
+
+class TiptapImageBubbleMenuComponent {
+    constructor() {
+        this.editor = input.required();
+        this.config = input({
+            changeImage: true,
+            resizeSmall: true,
+            resizeMedium: true,
+            resizeLarge: true,
+            resizeOriginal: true,
+            deleteImage: true,
+            separator: true,
+        });
+        this.tippyInstance = null;
+        this.imageService = inject(ImageService);
+        this.updateTimeout = null;
+        this.imageBubbleMenuConfig = computed(() => ({
+            changeImage: true,
+            resizeSmall: true,
+            resizeMedium: true,
+            resizeLarge: true,
+            resizeOriginal: true,
+            deleteImage: true,
+            separator: true,
+            ...this.config(),
+        }));
+        this.hasResizeButtons = computed(() => {
+            const config = this.imageBubbleMenuConfig();
+            return (config.resizeSmall ||
+                config.resizeMedium ||
+                config.resizeLarge ||
+                config.resizeOriginal);
+        });
+        this.updateMenu = () => {
+            // Debounce pour éviter les appels trop fréquents
+            if (this.updateTimeout) {
+                clearTimeout(this.updateTimeout);
+            }
+            this.updateTimeout = setTimeout(() => {
+                const ed = this.editor();
+                if (!ed)
+                    return;
+                const isImageSelected = ed.isActive("resizableImage") || ed.isActive("image");
+                const { from, to } = ed.state.selection;
+                const hasTextSelection = from !== to;
+                // Ne montrer le menu image que si :
+                // - Une image est sélectionnée
+                // - L'éditeur est éditable
+                const shouldShow = isImageSelected && ed.isEditable;
+                if (shouldShow) {
+                    this.showTippy();
+                }
+                else {
+                    this.hideTippy();
+                }
+            }, 10);
+        };
+        this.handleBlur = () => {
+            // Masquer le menu quand l'éditeur perd le focus
+            setTimeout(() => {
+                this.hideTippy();
+            }, 100);
+        };
+        effect(() => {
+            const ed = this.editor();
+            if (!ed)
+                return;
+            // Nettoyer les anciens listeners
+            ed.off("selectionUpdate", this.updateMenu);
+            ed.off("transaction", this.updateMenu);
+            ed.off("focus", this.updateMenu);
+            ed.off("blur", this.handleBlur);
+            // Ajouter les nouveaux listeners
+            ed.on("selectionUpdate", this.updateMenu);
+            ed.on("transaction", this.updateMenu);
+            ed.on("focus", this.updateMenu);
+            ed.on("blur", this.handleBlur);
+            // Ne pas appeler updateMenu() ici pour éviter l'affichage prématuré
+            // Il sera appelé automatiquement quand l'éditeur sera prêt
         });
-        // Signaux publics
-        this.currentLocale = this._currentLocale.asReadonly();
-        this.translations = computed(() => this._translations()[this._currentLocale()]);
-        // Méthodes de traduction rapides
-        this.t = computed(() => this.translations());
-        this.toolbar = computed(() => this.translations().toolbar);
-        this.bubbleMenu = computed(() => this.translations().bubbleMenu);
-        this.slashCommands = computed(() => this.translations().slashCommands);
-        this.table = computed(() => this.translations().table);
-        this.imageUpload = computed(() => this.translations().imageUpload);
-        this.editor = computed(() => this.translations().editor);
-        this.common = computed(() => this.translations().common);
-        // Détecter automatiquement la langue du navigateur
-        this.detectBrowserLanguage();
-    }
-    setLocale(locale) {
-        this._currentLocale.set(locale);
     }
-    autoDetectLocale() {
-        this.detectBrowserLanguage();
+    ngOnInit() {
+        // Initialiser Tippy de manière synchrone après que le component soit ready
+        this.initTippy();
     }
-    getSupportedLocales() {
-        return Object.keys(this._translations());
+    ngOnDestroy() {
+        const ed = this.editor();
+        if (ed) {
+            ed.off("selectionUpdate", this.updateMenu);
+            ed.off("transaction", this.updateMenu);
+            ed.off("focus", this.updateMenu);
+            ed.off("blur", this.handleBlur);
+        }
+        // Nettoyer les timeouts
+        if (this.updateTimeout) {
+            clearTimeout(this.updateTimeout);
+        }
+        // Nettoyer Tippy
+        if (this.tippyInstance) {
+            this.tippyInstance.destroy();
+            this.tippyInstance = null;
+        }
     }
-    addTranslations(locale, translations) {
-        this._translations.update((current) => ({
-            ...current,
-            [locale]: {
-                ...current[locale],
-                ...translations,
+    initTippy() {
+        // Attendre que l'élément soit disponible
+        if (!this.menuRef?.nativeElement) {
+            setTimeout(() => this.initTippy(), 50);
+            return;
+        }
+        const menuElement = this.menuRef.nativeElement;
+        // S'assurer qu'il n'y a pas déjà une instance
+        if (this.tippyInstance) {
+            this.tippyInstance.destroy();
+        }
+        // Créer l'instance Tippy
+        this.tippyInstance = tippy(document.body, {
+            content: menuElement,
+            trigger: "manual",
+            placement: "top-start",
+            appendTo: () => document.body,
+            interactive: true,
+            arrow: false,
+            offset: [0, 8],
+            hideOnClick: false,
+            onShow: (instance) => {
+                // S'assurer que les autres menus sont fermés
+                this.hideOtherMenus();
             },
-        }));
+            getReferenceClientRect: () => this.getImageRect(),
+            // Améliorer le positionnement avec scroll
+            popperOptions: {
+                modifiers: [
+                    {
+                        name: "preventOverflow",
+                        options: {
+                            boundary: "viewport",
+                            padding: 8,
+                        },
+                    },
+                    {
+                        name: "flip",
+                        options: {
+                            fallbackPlacements: ["bottom-start", "top-end", "bottom-end"],
+                        },
+                    },
+                ],
+            },
+        });
+        // Maintenant que Tippy est initialisé, faire un premier check
+        this.updateMenu();
+    }
+    getImageRect() {
+        const ed = this.editor();
+        if (!ed)
+            return new DOMRect(0, 0, 0, 0);
+        // Trouver l'image sélectionnée dans le DOM
+        const { from } = ed.state.selection;
+        // Fonction pour trouver toutes les images dans l'éditeur
+        const getAllImages = () => {
+            const editorElement = ed.view.dom;
+            return Array.from(editorElement.querySelectorAll("img"));
+        };
+        // Fonction pour trouver l'image à la position spécifique
+        const findImageAtPosition = () => {
+            const allImages = getAllImages();
+            for (const img of allImages) {
+                try {
+                    // Obtenir la position ProseMirror de cette image
+                    const imgPos = ed.view.posAtDOM(img, 0);
+                    // Vérifier si cette image correspond à la position sélectionnée
+                    if (Math.abs(imgPos - from) <= 1) {
+                        return img;
+                    }
+                }
+                catch (error) {
+                    // Continuer si on ne peut pas obtenir la position de cette image
+                    continue;
+                }
+            }
+            return null;
+        };
+        // Chercher l'image à la position exacte
+        const imageElement = findImageAtPosition();
+        if (imageElement) {
+            return imageElement.getBoundingClientRect();
+        }
+        return new DOMRect(0, 0, 0, 0);
+    }
+    hideOtherMenus() {
+        // Cette méthode peut être étendue pour fermer d'autres menus si nécessaire
+        // Pour l'instant, elle sert de placeholder pour une future coordination entre menus
+    }
+    showTippy() {
+        if (!this.tippyInstance)
+            return;
+        // Mettre à jour la position
+        this.tippyInstance.setProps({
+            getReferenceClientRect: () => this.getImageRect(),
+        });
+        this.tippyInstance.show();
     }
-    detectBrowserLanguage() {
-        const browserLang = navigator.language.toLowerCase();
-        if (browserLang.startsWith("fr")) {
-            this._currentLocale.set("fr");
-        }
-        else {
-            this._currentLocale.set("en");
+    hideTippy() {
+        if (this.tippyInstance) {
+            this.tippyInstance.hide();
         }
     }
-    // Méthodes utilitaires pour les composants
-    getToolbarTitle(key) {
-        return this.translations().toolbar[key];
+    onCommand(command, event) {
+        event.preventDefault();
+        const ed = this.editor();
+        if (!ed)
+            return;
+        switch (command) {
+            case "changeImage":
+                this.changeImage();
+                break;
+            case "resizeSmall":
+                this.imageService.resizeImageToSmall(ed);
+                break;
+            case "resizeMedium":
+                this.imageService.resizeImageToMedium(ed);
+                break;
+            case "resizeLarge":
+                this.imageService.resizeImageToLarge(ed);
+                break;
+            case "resizeOriginal":
+                this.imageService.resizeImageToOriginal(ed);
+                break;
+            case "deleteImage":
+                this.deleteImage();
+                break;
+        }
     }
-    getBubbleMenuTitle(key) {
-        return this.translations().bubbleMenu[key];
+    async changeImage() {
+        const ed = this.editor();
+        if (!ed)
+            return;
+        try {
+            // Utiliser la méthode spécifique pour remplacer une image existante
+            await this.imageService.selectAndReplaceImage(ed, {
+                quality: 0.8,
+                maxWidth: 1920,
+                maxHeight: 1080,
+                accept: "image/*",
+            });
+        }
+        catch (error) {
+            console.error("Erreur lors du changement d'image:", error);
+        }
     }
-    getSlashCommand(key) {
-        return this.translations().slashCommands[key];
+    deleteImage() {
+        const ed = this.editor();
+        if (ed) {
+            ed.chain().focus().deleteSelection().run();
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapI18nService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapI18nService, providedIn: "root" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapImageBubbleMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: TiptapImageBubbleMenuComponent, isStandalone: true, selector: "tiptap-image-bubble-menu", inputs: { editor: { classPropertyName: "editor", publicName: "editor", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "menuRef", first: true, predicate: ["menuRef"], descendants: true }], ngImport: i0, template: `
+    <div #menuRef class="bubble-menu">
+      @if (imageBubbleMenuConfig().changeImage) {
+      <tiptap-button
+        icon="drive_file_rename_outline"
+        title="Changer l'image"
+        (click)="onCommand('changeImage', $event)"
+      ></tiptap-button>
+      } @if (imageBubbleMenuConfig().separator && hasResizeButtons()) {
+      <tiptap-separator></tiptap-separator>
+      } @if (imageBubbleMenuConfig().resizeSmall) {
+      <tiptap-button
+        icon="crop_square"
+        iconSize="small"
+        title="Petite (300×200)"
+        (click)="onCommand('resizeSmall', $event)"
+      ></tiptap-button>
+      } @if (imageBubbleMenuConfig().resizeMedium) {
+      <tiptap-button
+        icon="crop_square"
+        iconSize="medium"
+        title="Moyenne (500×350)"
+        (click)="onCommand('resizeMedium', $event)"
+      ></tiptap-button>
+      } @if (imageBubbleMenuConfig().resizeLarge) {
+      <tiptap-button
+        icon="crop_square"
+        iconSize="large"
+        title="Grande (800×600)"
+        (click)="onCommand('resizeLarge', $event)"
+      ></tiptap-button>
+      } @if (imageBubbleMenuConfig().resizeOriginal) {
+      <tiptap-button
+        icon="photo_size_select_actual"
+        title="Taille originale"
+        (click)="onCommand('resizeOriginal', $event)"
+      ></tiptap-button>
+      } @if (imageBubbleMenuConfig().separator &&
+      imageBubbleMenuConfig().deleteImage) {
+      <tiptap-separator></tiptap-separator>
+      } @if (imageBubbleMenuConfig().deleteImage) {
+      <tiptap-button
+        icon="delete"
+        title="Supprimer l'image"
+        variant="danger"
+        (click)="onCommand('deleteImage', $event)"
+      ></tiptap-button>
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "component", type: TiptapButtonComponent, selector: "tiptap-button", inputs: ["icon", "title", "active", "disabled", "color", "variant", "size", "iconSize"], outputs: ["onClick"] }, { kind: "component", type: TiptapSeparatorComponent, selector: "tiptap-separator", inputs: ["orientation", "size"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapI18nService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: "root",
-                }]
-        }], ctorParameters: () => [] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapImageBubbleMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "tiptap-image-bubble-menu", standalone: true, imports: [TiptapButtonComponent, TiptapSeparatorComponent], template: `
+    <div #menuRef class="bubble-menu">
+      @if (imageBubbleMenuConfig().changeImage) {
+      <tiptap-button
+        icon="drive_file_rename_outline"
+        title="Changer l'image"
+        (click)="onCommand('changeImage', $event)"
+      ></tiptap-button>
+      } @if (imageBubbleMenuConfig().separator && hasResizeButtons()) {
+      <tiptap-separator></tiptap-separator>
+      } @if (imageBubbleMenuConfig().resizeSmall) {
+      <tiptap-button
+        icon="crop_square"
+        iconSize="small"
+        title="Petite (300×200)"
+        (click)="onCommand('resizeSmall', $event)"
+      ></tiptap-button>
+      } @if (imageBubbleMenuConfig().resizeMedium) {
+      <tiptap-button
+        icon="crop_square"
+        iconSize="medium"
+        title="Moyenne (500×350)"
+        (click)="onCommand('resizeMedium', $event)"
+      ></tiptap-button>
+      } @if (imageBubbleMenuConfig().resizeLarge) {
+      <tiptap-button
+        icon="crop_square"
+        iconSize="large"
+        title="Grande (800×600)"
+        (click)="onCommand('resizeLarge', $event)"
+      ></tiptap-button>
+      } @if (imageBubbleMenuConfig().resizeOriginal) {
+      <tiptap-button
+        icon="photo_size_select_actual"
+        title="Taille originale"
+        (click)="onCommand('resizeOriginal', $event)"
+      ></tiptap-button>
+      } @if (imageBubbleMenuConfig().separator &&
+      imageBubbleMenuConfig().deleteImage) {
+      <tiptap-separator></tiptap-separator>
+      } @if (imageBubbleMenuConfig().deleteImage) {
+      <tiptap-button
+        icon="delete"
+        title="Supprimer l'image"
+        variant="danger"
+        (click)="onCommand('deleteImage', $event)"
+      ></tiptap-button>
+      }
+    </div>
+  ` }]
+        }], ctorParameters: () => [], propDecorators: { menuRef: [{
+                type: ViewChild,
+                args: ["menuRef", { static: false }]
+            }] } });
 
 class EditorCommandsService {
     // Méthodes pour vérifier l'état actif
@@ -2693,7 +3105,7 @@ class TiptapTableBubbleMenuComponent {
       ></tiptap-button>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: TiptapButtonComponent, selector: "tiptap-button", inputs: ["icon", "title", "active", "disabled", "variant", "size", "iconSize"], outputs: ["onClick"] }, { kind: "component", type: TiptapSeparatorComponent, selector: "tiptap-separator", inputs: ["orientation", "size"] }] }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: TiptapButtonComponent, selector: "tiptap-button", inputs: ["icon", "title", "active", "disabled", "color", "variant", "size", "iconSize"], outputs: ["onClick"] }, { kind: "component", type: TiptapSeparatorComponent, selector: "tiptap-separator", inputs: ["orientation", "size"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapTableBubbleMenuComponent, decorators: [{
             type: Component,
@@ -2996,7 +3408,7 @@ class TiptapCellBubbleMenuComponent {
       ></tiptap-button>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: TiptapButtonComponent, selector: "tiptap-button", inputs: ["icon", "title", "active", "disabled", "variant", "size", "iconSize"], outputs: ["onClick"] }] }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: TiptapButtonComponent, selector: "tiptap-button", inputs: ["icon", "title", "active", "disabled", "color", "variant", "size", "iconSize"], outputs: ["onClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapCellBubbleMenuComponent, decorators: [{
             type: Component,
@@ -3186,6 +3598,8 @@ class TiptapToolbarComponent {
         [disabled]="!canExecute('toggleHighlight')"
         (onClick)="toggleHighlight()"
       />
+      } @if (config().textColor) {
+      <tiptap-text-color-picker [editor]="editor()" />
       } @if (config().separator && (config().heading1 || config().heading2 ||
       config().heading3)) {
       <tiptap-separator />
@@ -3323,11 +3737,15 @@ class TiptapToolbarComponent {
       />
       }
     </div>
-  `, isInline: true, styles: [".tiptap-toolbar{display:flex;align-items:center;gap:4px;padding:4px 8px;background:#f8f9fa;border-bottom:1px solid #e2e8f0;flex-wrap:wrap;min-height:32px;position:relative}.toolbar-group{display:flex;align-items:center;gap:2px;padding:0 4px}.toolbar-separator{width:1px;height:24px;background:#e2e8f0;margin:0 4px}@media (max-width: 768px){.tiptap-toolbar{padding:6px 8px;gap:2px}.toolbar-group{gap:1px}}@keyframes toolbarSlideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.tiptap-toolbar{animation:toolbarSlideIn .3s cubic-bezier(.4,0,.2,1)}\n"], dependencies: [{ kind: "component", type: TiptapButtonComponent, selector: "tiptap-button", inputs: ["icon", "title", "active", "disabled", "variant", "size", "iconSize"], outputs: ["onClick"] }, { kind: "component", type: TiptapSeparatorComponent, selector: "tiptap-separator", inputs: ["orientation", "size"] }] }); }
+  `, isInline: true, styles: [".tiptap-toolbar{display:flex;align-items:center;gap:4px;padding:4px 8px;background:#f8f9fa;border-bottom:1px solid #e2e8f0;flex-wrap:wrap;min-height:32px;position:relative}.toolbar-group{display:flex;align-items:center;gap:2px;padding:0 4px}.toolbar-separator{width:1px;height:24px;background:#e2e8f0;margin:0 4px}@media (max-width: 768px){.tiptap-toolbar{padding:6px 8px;gap:2px}.toolbar-group{gap:1px}}@keyframes toolbarSlideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.tiptap-toolbar{animation:toolbarSlideIn .3s cubic-bezier(.4,0,.2,1)}\n"], dependencies: [{ kind: "component", type: TiptapButtonComponent, selector: "tiptap-button", inputs: ["icon", "title", "active", "disabled", "color", "variant", "size", "iconSize"], outputs: ["onClick"] }, { kind: "component", type: TiptapSeparatorComponent, selector: "tiptap-separator", inputs: ["orientation", "size"] }, { kind: "component", type: TiptapTextColorPickerComponent, selector: "tiptap-text-color-picker", inputs: ["editor"], outputs: ["interactionChange", "requestUpdate"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapToolbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: "tiptap-toolbar", standalone: true, imports: [TiptapButtonComponent, TiptapSeparatorComponent], template: `
+            args: [{ selector: "tiptap-toolbar", standalone: true, imports: [
+                        TiptapButtonComponent,
+                        TiptapSeparatorComponent,
+                        TiptapTextColorPickerComponent,
+                    ], template: `
     <div class="tiptap-toolbar">
       @if (config().bold) {
       <tiptap-button
@@ -3393,6 +3811,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
         [disabled]="!canExecute('toggleHighlight')"
         (onClick)="toggleHighlight()"
       />
+      } @if (config().textColor) {
+      <tiptap-text-color-picker [editor]="editor()" />
       } @if (config().separator && (config().heading1 || config().heading2 ||
       config().heading3)) {
       <tiptap-separator />
@@ -3982,48 +4402,48 @@ class TiptapSlashCommandsComponent {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapSlashCommandsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: TiptapSlashCommandsComponent, isStandalone: true, selector: "tiptap-slash-commands", inputs: { editor: { classPropertyName: "editor", publicName: "editor", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { imageUploadRequested: "imageUploadRequested" }, viewQueries: [{ propertyName: "menuRef", first: true, predicate: ["menuRef"], descendants: true }], ngImport: i0, template: `
-    <div #menuRef class="slash-commands-menu">
-      @for (command of filteredCommands(); track command.title) {
-      <div
-        class="slash-command-item"
-        [class.selected]="$index === selectedIndex()"
-        (click)="executeCommand(command)"
-        (mouseenter)="selectedIndex.set($index)"
-      >
-        <div class="slash-command-icon">
-          <span class="material-symbols-outlined">{{ command.icon }}</span>
-        </div>
-        <div class="slash-command-content">
-          <div class="slash-command-title">{{ command.title }}</div>
-          <div class="slash-command-description">{{ command.description }}</div>
-        </div>
-      </div>
-      }
-    </div>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: TiptapSlashCommandsComponent, isStandalone: true, selector: "tiptap-slash-commands", inputs: { editor: { classPropertyName: "editor", publicName: "editor", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { imageUploadRequested: "imageUploadRequested" }, viewQueries: [{ propertyName: "menuRef", first: true, predicate: ["menuRef"], descendants: true }], ngImport: i0, template: `
+    <div #menuRef class="slash-commands-menu">
+      @for (command of filteredCommands(); track command.title) {
+      <div
+        class="slash-command-item"
+        [class.selected]="$index === selectedIndex()"
+        (click)="executeCommand(command)"
+        (mouseenter)="selectedIndex.set($index)"
+      >
+        <div class="slash-command-icon">
+          <span class="material-symbols-outlined">{{ command.icon }}</span>
+        </div>
+        <div class="slash-command-content">
+          <div class="slash-command-title">{{ command.title }}</div>
+          <div class="slash-command-description">{{ command.description }}</div>
+        </div>
+      </div>
+      }
+    </div>
   `, isInline: true, styles: [".slash-commands-menu{background:#fff;border:1px solid #e2e8f0;border-radius:8px;box-shadow:0 4px 12px #00000026;padding:8px;max-height:300px;overflow-y:auto;min-width:280px;outline:none}.slash-command-item{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:6px;cursor:pointer;transition:all .2s ease;border:2px solid transparent;outline:none}.slash-command-item:hover{background:#f1f5f9;border-color:#e2e8f0}.slash-command-item.selected{background:#e6f3ff;border-color:#3182ce;box-shadow:0 0 0 1px #3182ce}.slash-command-item:focus{outline:2px solid #3182ce;outline-offset:2px}.slash-command-icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:#f8f9fa;border-radius:6px;color:#3182ce;flex-shrink:0}.slash-command-icon .material-symbols-outlined{font-size:18px}.slash-command-content{flex:1;min-width:0}.slash-command-title{font-weight:600;color:#2d3748;font-size:14px;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.slash-command-description{color:#718096;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapSlashCommandsComponent, decorators: [{
             type: Component,
-            args: [{ selector: "tiptap-slash-commands", standalone: true, template: `
-    <div #menuRef class="slash-commands-menu">
-      @for (command of filteredCommands(); track command.title) {
-      <div
-        class="slash-command-item"
-        [class.selected]="$index === selectedIndex()"
-        (click)="executeCommand(command)"
-        (mouseenter)="selectedIndex.set($index)"
-      >
-        <div class="slash-command-icon">
-          <span class="material-symbols-outlined">{{ command.icon }}</span>
-        </div>
-        <div class="slash-command-content">
-          <div class="slash-command-title">{{ command.title }}</div>
-          <div class="slash-command-description">{{ command.description }}</div>
-        </div>
-      </div>
-      }
-    </div>
+            args: [{ selector: "tiptap-slash-commands", standalone: true, template: `
+    <div #menuRef class="slash-commands-menu">
+      @for (command of filteredCommands(); track command.title) {
+      <div
+        class="slash-command-item"
+        [class.selected]="$index === selectedIndex()"
+        (click)="executeCommand(command)"
+        (mouseenter)="selectedIndex.set($index)"
+      >
+        <div class="slash-command-icon">
+          <span class="material-symbols-outlined">{{ command.icon }}</span>
+        </div>
+        <div class="slash-command-content">
+          <div class="slash-command-title">{{ command.title }}</div>
+          <div class="slash-command-description">{{ command.description }}</div>
+        </div>
+      </div>
+      }
+    </div>
   `, styles: [".slash-commands-menu{background:#fff;border:1px solid #e2e8f0;border-radius:8px;box-shadow:0 4px 12px #00000026;padding:8px;max-height:300px;overflow-y:auto;min-width:280px;outline:none}.slash-command-item{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:6px;cursor:pointer;transition:all .2s ease;border:2px solid transparent;outline:none}.slash-command-item:hover{background:#f1f5f9;border-color:#e2e8f0}.slash-command-item.selected{background:#e6f3ff;border-color:#3182ce;box-shadow:0 0 0 1px #3182ce}.slash-command-item:focus{outline:2px solid #3182ce;outline-offset:2px}.slash-command-icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:#f8f9fa;border-radius:6px;color:#3182ce;flex-shrink:0}.slash-command-icon .material-symbols-outlined{font-size:18px}.slash-command-content{flex:1;min-width:0}.slash-command-title{font-weight:600;color:#2d3748;font-size:14px;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.slash-command-description{color:#718096;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
         }], ctorParameters: () => [], propDecorators: { menuRef: [{
                 type: ViewChild,
@@ -4229,150 +4649,150 @@ class TiptapImageUploadComponent {
         this.previewInfo.set("");
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapImageUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: TiptapImageUploadComponent, isStandalone: true, selector: "tiptap-image-upload", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { imageSelected: "imageSelected", error: "error" }, ngImport: i0, template: `
-    <div class="image-upload-container">
-      <!-- Bouton d'upload -->
-      <tiptap-button
-        icon="image"
-        title="Ajouter une image"
-        [disabled]="isUploading()"
-        (onClick)="triggerFileInput()"
-      />
-
-      <!-- Input file caché -->
-      <input
-        #fileInput
-        type="file"
-        [accept]="acceptedTypes()"
-        [multiple]="config().multiple"
-        (change)="onFileSelected($event)"
-        style="display: none;"
-      />
-
-      <!-- Zone de drag & drop -->
-      @if (config().enableDragDrop && isDragOver()) {
-      <div
-        class="drag-overlay"
-        (dragover)="onDragOver($event)"
-        (drop)="onDrop($event)"
-        (dragleave)="onDragLeave($event)"
-      >
-        <div class="drag-content">
-          <span class="material-symbols-outlined">cloud_upload</span>
-          <p>Déposez votre image ici</p>
-        </div>
-      </div>
-      }
-
-      <!-- Barre de progression -->
-      @if (isUploading() && uploadProgress() > 0) {
-      <div class="upload-progress">
-        <div class="progress-bar">
-          <div class="progress-fill" [style.width.%]="uploadProgress()"></div>
-        </div>
-        <div class="progress-text">{{ uploadProgress() }}%</div>
-      </div>
-      }
-
-      <!-- Prévisualisation -->
-      @if (config().showPreview && previewImage()) {
-      <div class="image-preview">
-        <img [src]="previewImage()" alt="Prévisualisation" />
-        <div class="preview-info">
-          <span>{{ previewInfo() }}</span>
-        </div>
-        <button
-          class="preview-close"
-          (click)="clearPreview()"
-          title="Fermer la prévisualisation"
-        >
-          <span class="material-symbols-outlined">close</span>
-        </button>
-      </div>
-      }
-
-      <!-- Messages d'erreur -->
-      @if (errorMessage()) {
-      <div class="error-message">
-        <span class="material-symbols-outlined">error</span>
-        {{ errorMessage() }}
-      </div>
-      }
-    </div>
-  `, isInline: true, styles: [".image-upload-container{position:relative;display:inline-block}.drag-overlay{position:fixed;inset:0;background:#3182ce1a;border:2px dashed #3182ce;border-radius:6px;display:flex;align-items:center;justify-content:center;z-index:1000;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.drag-content{text-align:center;color:#3182ce;font-weight:600}.drag-content .material-symbols-outlined{font-size:48px;margin-bottom:16px}.drag-content p{margin:0;font-size:18px}.upload-progress{position:absolute;top:100%;left:0;background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:12px;margin-top:8px;z-index:100;min-width:200px;box-shadow:0 4px 12px #00000026}.progress-bar{width:100%;height:6px;background:#e2e8f0;border-radius:3px;overflow:hidden;margin-bottom:8px}.progress-fill{height:100%;background:#3182ce;border-radius:3px;transition:width .3s ease}.progress-text{font-size:12px;color:#4a5568;text-align:center}.image-preview{position:absolute;top:100%;left:0;background:#fff;border:1px solid #e2e8f0;border-radius:8px;box-shadow:0 4px 12px #00000026;padding:8px;margin-top:8px;z-index:100;min-width:200px}.image-preview img{max-width:200px;max-height:150px;border-radius:4px;display:block}.preview-info{margin-top:8px;font-size:11px;color:#718096;text-align:center}.preview-close{position:absolute;top:4px;right:4px;background:#000000b3;color:#fff;border:none;border-radius:50%;width:24px;height:24px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px}.preview-close:hover{background:#000000e6}.error-message{position:absolute;top:100%;left:0;background:#fed7d7;color:#c53030;border:1px solid #feb2b2;border-radius:6px;padding:8px 12px;margin-top:8px;font-size:12px;display:flex;align-items:center;gap:6px;z-index:100;min-width:200px}.error-message .material-symbols-outlined{font-size:16px}\n"], dependencies: [{ kind: "component", type: TiptapButtonComponent, selector: "tiptap-button", inputs: ["icon", "title", "active", "disabled", "variant", "size", "iconSize"], outputs: ["onClick"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: TiptapImageUploadComponent, isStandalone: true, selector: "tiptap-image-upload", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { imageSelected: "imageSelected", error: "error" }, ngImport: i0, template: `
+    <div class="image-upload-container">
+      <!-- Bouton d'upload -->
+      <tiptap-button
+        icon="image"
+        title="Ajouter une image"
+        [disabled]="isUploading()"
+        (onClick)="triggerFileInput()"
+      />
+
+      <!-- Input file caché -->
+      <input
+        #fileInput
+        type="file"
+        [accept]="acceptedTypes()"
+        [multiple]="config().multiple"
+        (change)="onFileSelected($event)"
+        style="display: none;"
+      />
+
+      <!-- Zone de drag & drop -->
+      @if (config().enableDragDrop && isDragOver()) {
+      <div
+        class="drag-overlay"
+        (dragover)="onDragOver($event)"
+        (drop)="onDrop($event)"
+        (dragleave)="onDragLeave($event)"
+      >
+        <div class="drag-content">
+          <span class="material-symbols-outlined">cloud_upload</span>
+          <p>Déposez votre image ici</p>
+        </div>
+      </div>
+      }
+
+      <!-- Barre de progression -->
+      @if (isUploading() && uploadProgress() > 0) {
+      <div class="upload-progress">
+        <div class="progress-bar">
+          <div class="progress-fill" [style.width.%]="uploadProgress()"></div>
+        </div>
+        <div class="progress-text">{{ uploadProgress() }}%</div>
+      </div>
+      }
+
+      <!-- Prévisualisation -->
+      @if (config().showPreview && previewImage()) {
+      <div class="image-preview">
+        <img [src]="previewImage()" alt="Prévisualisation" />
+        <div class="preview-info">
+          <span>{{ previewInfo() }}</span>
+        </div>
+        <button
+          class="preview-close"
+          (click)="clearPreview()"
+          title="Fermer la prévisualisation"
+        >
+          <span class="material-symbols-outlined">close</span>
+        </button>
+      </div>
+      }
+
+      <!-- Messages d'erreur -->
+      @if (errorMessage()) {
+      <div class="error-message">
+        <span class="material-symbols-outlined">error</span>
+        {{ errorMessage() }}
+      </div>
+      }
+    </div>
+  `, isInline: true, styles: [".image-upload-container{position:relative;display:inline-block}.drag-overlay{position:fixed;inset:0;background:#3182ce1a;border:2px dashed #3182ce;border-radius:6px;display:flex;align-items:center;justify-content:center;z-index:1000;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.drag-content{text-align:center;color:#3182ce;font-weight:600}.drag-content .material-symbols-outlined{font-size:48px;margin-bottom:16px}.drag-content p{margin:0;font-size:18px}.upload-progress{position:absolute;top:100%;left:0;background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:12px;margin-top:8px;z-index:100;min-width:200px;box-shadow:0 4px 12px #00000026}.progress-bar{width:100%;height:6px;background:#e2e8f0;border-radius:3px;overflow:hidden;margin-bottom:8px}.progress-fill{height:100%;background:#3182ce;border-radius:3px;transition:width .3s ease}.progress-text{font-size:12px;color:#4a5568;text-align:center}.image-preview{position:absolute;top:100%;left:0;background:#fff;border:1px solid #e2e8f0;border-radius:8px;box-shadow:0 4px 12px #00000026;padding:8px;margin-top:8px;z-index:100;min-width:200px}.image-preview img{max-width:200px;max-height:150px;border-radius:4px;display:block}.preview-info{margin-top:8px;font-size:11px;color:#718096;text-align:center}.preview-close{position:absolute;top:4px;right:4px;background:#000000b3;color:#fff;border:none;border-radius:50%;width:24px;height:24px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px}.preview-close:hover{background:#000000e6}.error-message{position:absolute;top:100%;left:0;background:#fed7d7;color:#c53030;border:1px solid #feb2b2;border-radius:6px;padding:8px 12px;margin-top:8px;font-size:12px;display:flex;align-items:center;gap:6px;z-index:100;min-width:200px}.error-message .material-symbols-outlined{font-size:16px}\n"], dependencies: [{ kind: "component", type: TiptapButtonComponent, selector: "tiptap-button", inputs: ["icon", "title", "active", "disabled", "color", "variant", "size", "iconSize"], outputs: ["onClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapImageUploadComponent, decorators: [{
             type: Component,
-            args: [{ selector: "tiptap-image-upload", standalone: true, imports: [TiptapButtonComponent], template: `
-    <div class="image-upload-container">
-      <!-- Bouton d'upload -->
-      <tiptap-button
-        icon="image"
-        title="Ajouter une image"
-        [disabled]="isUploading()"
-        (onClick)="triggerFileInput()"
-      />
-
-      <!-- Input file caché -->
-      <input
-        #fileInput
-        type="file"
-        [accept]="acceptedTypes()"
-        [multiple]="config().multiple"
-        (change)="onFileSelected($event)"
-        style="display: none;"
-      />
-
-      <!-- Zone de drag & drop -->
-      @if (config().enableDragDrop && isDragOver()) {
-      <div
-        class="drag-overlay"
-        (dragover)="onDragOver($event)"
-        (drop)="onDrop($event)"
-        (dragleave)="onDragLeave($event)"
-      >
-        <div class="drag-content">
-          <span class="material-symbols-outlined">cloud_upload</span>
-          <p>Déposez votre image ici</p>
-        </div>
-      </div>
-      }
-
-      <!-- Barre de progression -->
-      @if (isUploading() && uploadProgress() > 0) {
-      <div class="upload-progress">
-        <div class="progress-bar">
-          <div class="progress-fill" [style.width.%]="uploadProgress()"></div>
-        </div>
-        <div class="progress-text">{{ uploadProgress() }}%</div>
-      </div>
-      }
-
-      <!-- Prévisualisation -->
-      @if (config().showPreview && previewImage()) {
-      <div class="image-preview">
-        <img [src]="previewImage()" alt="Prévisualisation" />
-        <div class="preview-info">
-          <span>{{ previewInfo() }}</span>
-        </div>
-        <button
-          class="preview-close"
-          (click)="clearPreview()"
-          title="Fermer la prévisualisation"
-        >
-          <span class="material-symbols-outlined">close</span>
-        </button>
-      </div>
-      }
-
-      <!-- Messages d'erreur -->
-      @if (errorMessage()) {
-      <div class="error-message">
-        <span class="material-symbols-outlined">error</span>
-        {{ errorMessage() }}
-      </div>
-      }
-    </div>
+            args: [{ selector: "tiptap-image-upload", standalone: true, imports: [TiptapButtonComponent], template: `
+    <div class="image-upload-container">
+      <!-- Bouton d'upload -->
+      <tiptap-button
+        icon="image"
+        title="Ajouter une image"
+        [disabled]="isUploading()"
+        (onClick)="triggerFileInput()"
+      />
+
+      <!-- Input file caché -->
+      <input
+        #fileInput
+        type="file"
+        [accept]="acceptedTypes()"
+        [multiple]="config().multiple"
+        (change)="onFileSelected($event)"
+        style="display: none;"
+      />
+
+      <!-- Zone de drag & drop -->
+      @if (config().enableDragDrop && isDragOver()) {
+      <div
+        class="drag-overlay"
+        (dragover)="onDragOver($event)"
+        (drop)="onDrop($event)"
+        (dragleave)="onDragLeave($event)"
+      >
+        <div class="drag-content">
+          <span class="material-symbols-outlined">cloud_upload</span>
+          <p>Déposez votre image ici</p>
+        </div>
+      </div>
+      }
+
+      <!-- Barre de progression -->
+      @if (isUploading() && uploadProgress() > 0) {
+      <div class="upload-progress">
+        <div class="progress-bar">
+          <div class="progress-fill" [style.width.%]="uploadProgress()"></div>
+        </div>
+        <div class="progress-text">{{ uploadProgress() }}%</div>
+      </div>
+      }
+
+      <!-- Prévisualisation -->
+      @if (config().showPreview && previewImage()) {
+      <div class="image-preview">
+        <img [src]="previewImage()" alt="Prévisualisation" />
+        <div class="preview-info">
+          <span>{{ previewInfo() }}</span>
+        </div>
+        <button
+          class="preview-close"
+          (click)="clearPreview()"
+          title="Fermer la prévisualisation"
+        >
+          <span class="material-symbols-outlined">close</span>
+        </button>
+      </div>
+      }
+
+      <!-- Messages d'erreur -->
+      @if (errorMessage()) {
+      <div class="error-message">
+        <span class="material-symbols-outlined">error</span>
+        {{ errorMessage() }}
+      </div>
+      }
+    </div>
   `, styles: [".image-upload-container{position:relative;display:inline-block}.drag-overlay{position:fixed;inset:0;background:#3182ce1a;border:2px dashed #3182ce;border-radius:6px;display:flex;align-items:center;justify-content:center;z-index:1000;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.drag-content{text-align:center;color:#3182ce;font-weight:600}.drag-content .material-symbols-outlined{font-size:48px;margin-bottom:16px}.drag-content p{margin:0;font-size:18px}.upload-progress{position:absolute;top:100%;left:0;background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:12px;margin-top:8px;z-index:100;min-width:200px;box-shadow:0 4px 12px #00000026}.progress-bar{width:100%;height:6px;background:#e2e8f0;border-radius:3px;overflow:hidden;margin-bottom:8px}.progress-fill{height:100%;background:#3182ce;border-radius:3px;transition:width .3s ease}.progress-text{font-size:12px;color:#4a5568;text-align:center}.image-preview{position:absolute;top:100%;left:0;background:#fff;border:1px solid #e2e8f0;border-radius:8px;box-shadow:0 4px 12px #00000026;padding:8px;margin-top:8px;z-index:100;min-width:200px}.image-preview img{max-width:200px;max-height:150px;border-radius:4px;display:block}.preview-info{margin-top:8px;font-size:11px;color:#718096;text-align:center}.preview-close{position:absolute;top:4px;right:4px;background:#000000b3;color:#fff;border:none;border-radius:50%;width:24px;height:24px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px}.preview-close:hover{background:#000000e6}.error-message{position:absolute;top:100%;left:0;background:#fed7d7;color:#c53030;border:1px solid #feb2b2;border-radius:6px;padding:8px 12px;margin-top:8px;font-size:12px;display:flex;align-items:center;gap:6px;z-index:100;min-width:200px}.error-message .material-symbols-outlined{font-size:16px}\n"] }]
         }] });
 
@@ -4602,6 +5022,7 @@ const DEFAULT_TOOLBAR_CONFIG = {
     undo: true,
     redo: true,
     clear: false, // Désactivé par défaut (opt-in)
+    textColor: true,
     separator: true,
 };
 // Configuration par défaut du bubble menu
@@ -4614,6 +5035,7 @@ const DEFAULT_BUBBLE_MENU_CONFIG = {
     superscript: false,
     subscript: false,
     highlight: true,
+    textColor: true,
     link: true,
     separator: true,
 };
@@ -4664,6 +5086,8 @@ class AngularTiptapEditorComponent {
         this.slashCommandsConfig = input(undefined);
         this.locale = input(undefined);
         this.autofocus = input(false);
+        this.tiptapExtensions = input([]);
+        this.tiptapOptions = input({});
         // Nouveaux inputs pour les bubble menus
         this.showBubbleMenu = input(true);
         this.bubbleMenu = input(DEFAULT_BUBBLE_MENU_CONFIG);
@@ -4845,6 +5269,10 @@ class AngularTiptapEditorComponent {
     initEditor() {
         const extensions = [
             StarterKit,
+            TextStyle,
+            Color.configure({
+                types: ["textStyle"],
+            }),
             Placeholder.configure({
                 placeholder: this.placeholder() || this.i18nService.editor().placeholder,
             }),
@@ -4893,7 +5321,22 @@ class AngularTiptapEditorComponent {
                 limit: this.maxCharacters(),
             }));
         }
+        // Allow addition of custom extensions, but avoid duplicates by filtering by name
+        const customExtensions = this.tiptapExtensions();
+        if (customExtensions.length > 0) {
+            const existingNames = new Set(extensions
+                .map((ext) => ext?.name)
+                .filter((name) => !!name));
+            const filteredCustom = customExtensions.filter((ext) => {
+                const name = ext?.name;
+                return !name || !existingNames.has(name);
+            });
+            extensions.push(...filteredCustom);
+        }
+        // Also allow any tiptap user options
+        const userOptions = this.tiptapOptions();
         const newEditor = new Editor({
+            ...userOptions,
             element: this.editorElement().nativeElement,
             extensions,
             content: this.content(),
@@ -5077,7 +5520,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 }, fillContainer: { classPropertyName: "fillContainer", publicName: "fillContainer", 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" }, host: { properties: { "class.fill-container": "fillContainer()" } }, 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 }, fillContainer: { classPropertyName: "fillContainer", publicName: "fillContainer", 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 }, tiptapExtensions: { classPropertyName: "tiptapExtensions", publicName: "tiptapExtensions", isSignal: true, isRequired: false, transformFunction: null }, tiptapOptions: { classPropertyName: "tiptapOptions", publicName: "tiptapOptions", 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" }, host: { properties: { "class.fill-container": "fillContainer()" } }, viewQueries: [{ propertyName: "editorElement", first: true, predicate: ["editorElement"], descendants: true, isSignal: true }], hostDirectives: [{ directive: NoopValueAccessorDirective }], ngImport: i0, template: `
     <div class="tiptap-editor" [class.fill-container]="fillContainer()">
       <!-- Toolbar -->
       @if (showToolbar() && editor()) {