@flogeez/angular-tiptap-editor 0.2.7 → 0.3.2

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, output, Component, signal, computed, Injectable, inject, effect, ViewChild, Directive, viewChild, DestroyRef } from '@angular/core';
+import { input, output, Component, computed, effect, ViewChild, signal, Injectable, inject, Directive, viewChild, 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';
@@ -14,7 +14,13 @@ import Highlight from '@tiptap/extension-highlight';
 import OfficePaste from '@intevation/tiptap-extension-office-paste';
 import { Plugin, PluginKey } from '@tiptap/pm/state';
 import { DecorationSet, Decoration } from '@tiptap/pm/view';
+import Table from '@tiptap/extension-table';
+import TableRow from '@tiptap/extension-table-row';
+import TableCell from '@tiptap/extension-table-cell';
+import TableHeader from '@tiptap/extension-table-header';
 import tippy from 'tippy.js';
+import { CellSelection } from '@tiptap/pm/tables';
+import { CommonModule } from '@angular/common';
 import { Plugin as Plugin$1, PluginKey as PluginKey$1 } from 'prosemirror-state';
 import { NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
 import { concat, defer, of, tap } from 'rxjs';
@@ -488,6 +494,30 @@ const UploadProgress = Extension.create({
     },
 });
 
+const TableExtension = Extension.create({
+    name: "tableExtension",
+    addExtensions() {
+        return [
+            Table.configure({
+                resizable: true,
+                handleWidth: 5,
+                cellMinWidth: 100,
+            }),
+            TableRow,
+            TableHeader.configure({
+                HTMLAttributes: {
+                    class: "table-header",
+                },
+            }),
+            TableCell.configure({
+                HTMLAttributes: {
+                    class: "table-cell",
+                },
+            }),
+        ];
+    },
+});
+
 class TiptapButtonComponent {
     constructor() {
         // Inputs
@@ -562,6 +592,393 @@ 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
+    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;
+                console.log("TextBubbleMenu - updateMenu:", {
+                    hasTextSelection,
+                    isImageSelected,
+                    isTableCellSelected,
+                    hasCellSelection,
+                    selectionType: selection.constructor.name,
+                    selectionEmpty: selection.empty,
+                    from,
+                    to,
+                });
+                // 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)
+                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 selection = window.getSelection();
+        if (!selection || selection.rangeCount === 0) {
+            return new DOMRect(0, 0, 0, 0);
+        }
+        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();
+        }
+    }
+    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 }], 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");
@@ -1011,31 +1428,396 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
                 }]
         }] });
 
-const ENGLISH_TRANSLATIONS = {
-    toolbar: {
-        bold: "Bold",
-        italic: "Italic",
-        underline: "Underline",
-        strike: "Strikethrough",
-        code: "Code",
-        superscript: "Superscript",
-        subscript: "Subscript",
-        highlight: "Highlight",
-        heading1: "Heading 1",
-        heading2: "Heading 2",
-        heading3: "Heading 3",
-        bulletList: "Bullet List",
-        orderedList: "Ordered List",
-        blockquote: "Blockquote",
-        alignLeft: "Align Left",
-        alignCenter: "Align Center",
+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",
+        italic: "Italic",
+        underline: "Underline",
+        strike: "Strikethrough",
+        code: "Code",
+        superscript: "Superscript",
+        subscript: "Subscript",
+        highlight: "Highlight",
+        heading1: "Heading 1",
+        heading2: "Heading 2",
+        heading3: "Heading 3",
+        bulletList: "Bullet List",
+        orderedList: "Ordered List",
+        blockquote: "Blockquote",
+        alignLeft: "Align Left",
+        alignCenter: "Align Center",
         alignRight: "Align Right",
         alignJustify: "Align Justify",
         link: "Add Link",
         image: "Add Image",
         horizontalRule: "Horizontal Rule",
+        table: "Insert Table",
         undo: "Undo",
         redo: "Redo",
+        clear: "Clear",
     },
     bubbleMenu: {
         bold: "Bold",
@@ -1100,6 +1882,24 @@ const ENGLISH_TRANSLATIONS = {
             description: "Add a horizontal line",
             keywords: ["hr", "horizontal", "rule", "line", "separator"],
         },
+        table: {
+            title: "Table",
+            description: "Insert a table",
+            keywords: ["table", "grid", "data", "rows", "columns"],
+        },
+    },
+    table: {
+        addRowBefore: "Add row before",
+        addRowAfter: "Add row after",
+        deleteRow: "Delete row",
+        addColumnBefore: "Add column before",
+        addColumnAfter: "Add column after",
+        deleteColumn: "Delete column",
+        deleteTable: "Delete table",
+        toggleHeaderRow: "Toggle header row",
+        toggleHeaderColumn: "Toggle header column",
+        mergeCells: "Merge cells",
+        splitCell: "Split cell",
     },
     imageUpload: {
         selectImage: "Select Image",
@@ -1119,8 +1919,8 @@ const ENGLISH_TRANSLATIONS = {
     },
     editor: {
         placeholder: "Start typing...",
-        characters: "characters",
-        words: "words",
+        character: "character",
+        word: "word",
         imageLoadError: "Error loading image",
         linkPrompt: "Enter link URL",
         linkUrlPrompt: "Enter URL",
@@ -1161,8 +1961,10 @@ const FRENCH_TRANSLATIONS = {
         link: "Ajouter un lien",
         image: "Ajouter une image",
         horizontalRule: "Ligne horizontale",
+        table: "Insérer un tableau",
         undo: "Annuler",
         redo: "Refaire",
+        clear: "Vider",
     },
     bubbleMenu: {
         bold: "Gras",
@@ -1227,6 +2029,33 @@ const FRENCH_TRANSLATIONS = {
             description: "Ajouter une ligne de séparation",
             keywords: ["hr", "horizontal", "rule", "ligne", "séparation"],
         },
+        table: {
+            title: "Tableau",
+            description: "Insérer un tableau",
+            keywords: [
+                "table",
+                "tableau",
+                "grid",
+                "grille",
+                "data",
+                "données",
+                "rows",
+                "colonnes",
+            ],
+        },
+    },
+    table: {
+        addRowBefore: "Ajouter une ligne avant",
+        addRowAfter: "Ajouter une ligne après",
+        deleteRow: "Supprimer la ligne",
+        addColumnBefore: "Ajouter une colonne avant",
+        addColumnAfter: "Ajouter une colonne après",
+        deleteColumn: "Supprimer la colonne",
+        deleteTable: "Supprimer le tableau",
+        toggleHeaderRow: "Basculer ligne d'en-tête",
+        toggleHeaderColumn: "Basculer colonne d'en-tête",
+        mergeCells: "Fusionner les cellules",
+        splitCell: "Diviser la cellule",
     },
     imageUpload: {
         selectImage: "Sélectionner une image",
@@ -1246,8 +2075,8 @@ const FRENCH_TRANSLATIONS = {
     },
     editor: {
         placeholder: "Commencez à écrire...",
-        characters: "caractères",
-        words: "mots",
+        character: "caractère",
+        word: "mot",
         imageLoadError: "Erreur de chargement de l'image",
         linkPrompt: "Entrez l'URL du lien",
         linkUrlPrompt: "Entrez l'URL",
@@ -1280,6 +2109,7 @@ class TiptapI18nService {
         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);
@@ -1301,1004 +2131,251 @@ class TiptapI18nService {
             [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 EditorCommandsService {
-    // Méthodes pour vérifier l'état actif
-    isActive(editor, name, attributes) {
-        return editor.isActive(name, attributes);
-    }
-    // Méthodes pour vérifier si une commande peut être exécutée
-    canExecute(editor, command) {
-        if (!editor)
-            return false;
-        switch (command) {
-            case "toggleBold":
-                return editor.can().chain().focus().toggleBold().run();
-            case "toggleItalic":
-                return editor.can().chain().focus().toggleItalic().run();
-            case "toggleStrike":
-                return editor.can().chain().focus().toggleStrike().run();
-            case "toggleCode":
-                return editor.can().chain().focus().toggleCode().run();
-            case "toggleUnderline":
-                return editor.can().chain().focus().toggleUnderline().run();
-            case "toggleSuperscript":
-                return editor.can().chain().focus().toggleSuperscript().run();
-            case "toggleSubscript":
-                return editor.can().chain().focus().toggleSubscript().run();
-            case "setTextAlign":
-                return editor.can().chain().focus().setTextAlign("left").run();
-            case "toggleLink":
-                return editor.can().chain().focus().toggleLink({ href: "" }).run();
-            case "insertHorizontalRule":
-                return editor.can().chain().focus().setHorizontalRule().run();
-            case "toggleHighlight":
-                return editor.can().chain().focus().toggleHighlight().run();
-            case "undo":
-                return editor.can().chain().focus().undo().run();
-            case "redo":
-                return editor.can().chain().focus().redo().run();
-            default:
-                return false;
-        }
-    }
-    // Méthodes pour exécuter les commandes
-    toggleBold(editor) {
-        editor.chain().focus().toggleBold().run();
-    }
-    toggleItalic(editor) {
-        editor.chain().focus().toggleItalic().run();
-    }
-    toggleStrike(editor) {
-        editor.chain().focus().toggleStrike().run();
-    }
-    toggleCode(editor) {
-        editor.chain().focus().toggleCode().run();
-    }
-    toggleHeading(editor, level) {
-        editor.chain().focus().toggleHeading({ level }).run();
-    }
-    toggleBulletList(editor) {
-        editor.chain().focus().toggleBulletList().run();
-    }
-    toggleOrderedList(editor) {
-        editor.chain().focus().toggleOrderedList().run();
-    }
-    toggleBlockquote(editor) {
-        editor.chain().focus().toggleBlockquote().run();
-    }
-    undo(editor) {
-        editor.chain().focus().undo().run();
-    }
-    redo(editor) {
-        editor.chain().focus().redo().run();
-    }
-    // Nouvelles méthodes pour les formatages supplémentaires
-    toggleUnderline(editor) {
-        editor.chain().focus().toggleUnderline().run();
-    }
-    toggleSuperscript(editor) {
-        editor.chain().focus().toggleSuperscript().run();
-    }
-    toggleSubscript(editor) {
-        editor.chain().focus().toggleSubscript().run();
-    }
-    setTextAlign(editor, alignment) {
-        editor.chain().focus().setTextAlign(alignment).run();
-    }
-    toggleLink(editor, url) {
-        if (url) {
-            editor.chain().focus().toggleLink({ href: url }).run();
-        }
-        else {
-            // Si pas d'URL fournie, on demande à l'utilisateur
-            const href = window.prompt("URL du lien:");
-            if (href) {
-                editor.chain().focus().toggleLink({ href }).run();
-            }
-        }
-    }
-    insertHorizontalRule(editor) {
-        editor.chain().focus().setHorizontalRule().run();
-    }
-    toggleHighlight(editor, color) {
-        if (color) {
-            editor.chain().focus().toggleHighlight({ color }).run();
-        }
-        else {
-            editor.chain().focus().toggleHighlight().run();
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: EditorCommandsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: EditorCommandsService, providedIn: "root" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: EditorCommandsService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: "root",
-                }]
-        }] });
-
-class TiptapToolbarComponent {
-    constructor(editorCommands) {
-        this.editorCommands = editorCommands;
-        this.editor = input.required();
-        this.config = input.required();
-        // Outputs pour les événements d'image
-        this.imageUploaded = output();
-        this.imageError = output();
-        this.imageService = inject(ImageService);
-        this.i18nService = inject(TiptapI18nService);
-        // Computed values pour les traductions
-        this.t = this.i18nService.toolbar;
-    }
-    isActive(name, attributes) {
-        return this.editorCommands.isActive(this.editor(), name, attributes);
-    }
-    canExecute(command) {
-        return this.editorCommands.canExecute(this.editor(), command);
-    }
-    toggleBold() {
-        this.editorCommands.toggleBold(this.editor());
-    }
-    toggleItalic() {
-        this.editorCommands.toggleItalic(this.editor());
-    }
-    toggleStrike() {
-        this.editorCommands.toggleStrike(this.editor());
-    }
-    toggleCode() {
-        this.editorCommands.toggleCode(this.editor());
-    }
-    toggleHeading(level) {
-        this.editorCommands.toggleHeading(this.editor(), level);
-    }
-    toggleBulletList() {
-        this.editorCommands.toggleBulletList(this.editor());
+            },
+        }));
     }
-    toggleOrderedList() {
-        this.editorCommands.toggleOrderedList(this.editor());
+    detectBrowserLanguage() {
+        const browserLang = navigator.language.toLowerCase();
+        if (browserLang.startsWith("fr")) {
+            this._currentLocale.set("fr");
+        }
+        else {
+            this._currentLocale.set("en");
+        }
     }
-    toggleBlockquote() {
-        this.editorCommands.toggleBlockquote(this.editor());
+    // Méthodes utilitaires pour les composants
+    getToolbarTitle(key) {
+        return this.translations().toolbar[key];
     }
-    undo() {
-        this.editorCommands.undo(this.editor());
+    getBubbleMenuTitle(key) {
+        return this.translations().bubbleMenu[key];
     }
-    redo() {
-        this.editorCommands.redo(this.editor());
+    getSlashCommand(key) {
+        return this.translations().slashCommands[key];
     }
-    // Nouvelles méthodes pour les formatages supplémentaires
-    toggleUnderline() {
-        this.editorCommands.toggleUnderline(this.editor());
+    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 EditorCommandsService {
+    // Méthodes pour vérifier l'état actif
+    isActive(editor, name, attributes) {
+        return editor.isActive(name, attributes);
     }
-    toggleSuperscript() {
-        this.editorCommands.toggleSuperscript(this.editor());
+    // Méthodes pour vérifier si une commande peut être exécutée
+    canExecute(editor, command) {
+        if (!editor)
+            return false;
+        switch (command) {
+            case "toggleBold":
+                return editor.can().chain().focus().toggleBold().run();
+            case "toggleItalic":
+                return editor.can().chain().focus().toggleItalic().run();
+            case "toggleStrike":
+                return editor.can().chain().focus().toggleStrike().run();
+            case "toggleCode":
+                return editor.can().chain().focus().toggleCode().run();
+            case "toggleUnderline":
+                return editor.can().chain().focus().toggleUnderline().run();
+            case "toggleSuperscript":
+                return editor.can().chain().focus().toggleSuperscript().run();
+            case "toggleSubscript":
+                return editor.can().chain().focus().toggleSubscript().run();
+            case "setTextAlign":
+                return editor.can().chain().focus().setTextAlign("left").run();
+            case "toggleLink":
+                return editor.can().chain().focus().toggleLink({ href: "" }).run();
+            case "insertHorizontalRule":
+                return editor.can().chain().focus().setHorizontalRule().run();
+            case "toggleHighlight":
+                return editor.can().chain().focus().toggleHighlight().run();
+            case "undo":
+                return editor.can().chain().focus().undo().run();
+            case "redo":
+                return editor.can().chain().focus().redo().run();
+            case "insertTable":
+                return editor.can().chain().focus().insertTable().run();
+            case "addColumnBefore":
+                return editor.can().chain().focus().addColumnBefore().run();
+            case "addColumnAfter":
+                return editor.can().chain().focus().addColumnAfter().run();
+            case "deleteColumn":
+                return editor.can().chain().focus().deleteColumn().run();
+            case "addRowBefore":
+                return editor.can().chain().focus().addRowBefore().run();
+            case "addRowAfter":
+                return editor.can().chain().focus().addRowAfter().run();
+            case "deleteRow":
+                return editor.can().chain().focus().deleteRow().run();
+            case "deleteTable":
+                return editor.can().chain().focus().deleteTable().run();
+            case "mergeCells":
+                return editor.can().chain().focus().mergeCells().run();
+            case "splitCell":
+                return editor.can().chain().focus().splitCell().run();
+            case "toggleHeaderColumn":
+                return editor.can().chain().focus().toggleHeaderColumn().run();
+            case "toggleHeaderRow":
+                return editor.can().chain().focus().toggleHeaderRow().run();
+            case "toggleHeaderCell":
+                return editor.can().chain().focus().toggleHeaderCell().run();
+            default:
+                return false;
+        }
     }
-    toggleSubscript() {
-        this.editorCommands.toggleSubscript(this.editor());
+    // Méthodes pour exécuter les commandes
+    toggleBold(editor) {
+        editor.chain().focus().toggleBold().run();
     }
-    setTextAlign(alignment) {
-        this.editorCommands.setTextAlign(this.editor(), alignment);
+    toggleItalic(editor) {
+        editor.chain().focus().toggleItalic().run();
     }
-    toggleLink() {
-        this.editorCommands.toggleLink(this.editor());
+    toggleStrike(editor) {
+        editor.chain().focus().toggleStrike().run();
     }
-    insertHorizontalRule() {
-        this.editorCommands.insertHorizontalRule(this.editor());
+    toggleCode(editor) {
+        editor.chain().focus().toggleCode().run();
     }
-    toggleHighlight() {
-        this.editorCommands.toggleHighlight(this.editor());
+    toggleHeading(editor, level) {
+        editor.chain().focus().toggleHeading({ level }).run();
     }
-    // Méthode pour insérer une image
-    async insertImage() {
-        try {
-            await this.imageService.selectAndUploadImage(this.editor());
-        }
-        catch (error) {
-            console.error("Erreur lors de l'upload d'image:", error);
-            this.imageError.emit("Erreur lors de l'upload d'image");
-        }
+    toggleBulletList(editor) {
+        editor.chain().focus().toggleBulletList().run();
     }
-    // Méthodes pour les événements d'image (conservées pour compatibilité)
-    onImageSelected(result) {
-        this.imageUploaded.emit(result);
+    toggleOrderedList(editor) {
+        editor.chain().focus().toggleOrderedList().run();
     }
-    onImageError(error) {
-        this.imageError.emit(error);
+    toggleBlockquote(editor) {
+        editor.chain().focus().toggleBlockquote().run();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapToolbarComponent, deps: [{ token: EditorCommandsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: TiptapToolbarComponent, isStandalone: true, selector: "tiptap-toolbar", inputs: { editor: { classPropertyName: "editor", publicName: "editor", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { imageUploaded: "imageUploaded", imageError: "imageError" }, ngImport: i0, template: `
-    <div class="tiptap-toolbar">
-      @if (config().bold) {
-      <tiptap-button
-        icon="format_bold"
-        [title]="t().bold"
-        [active]="isActive('bold')"
-        [disabled]="!canExecute('toggleBold')"
-        (onClick)="toggleBold()"
-      />
-      } @if (config().italic) {
-      <tiptap-button
-        icon="format_italic"
-        [title]="t().italic"
-        [active]="isActive('italic')"
-        [disabled]="!canExecute('toggleItalic')"
-        (onClick)="toggleItalic()"
-      />
-      } @if (config().underline) {
-      <tiptap-button
-        icon="format_underlined"
-        [title]="t().underline"
-        [active]="isActive('underline')"
-        [disabled]="!canExecute('toggleUnderline')"
-        (onClick)="toggleUnderline()"
-      />
-      } @if (config().strike) {
-      <tiptap-button
-        icon="strikethrough_s"
-        [title]="t().strike"
-        [active]="isActive('strike')"
-        [disabled]="!canExecute('toggleStrike')"
-        (onClick)="toggleStrike()"
-      />
-      } @if (config().code) {
-      <tiptap-button
-        icon="code"
-        [title]="t().code"
-        [active]="isActive('code')"
-        [disabled]="!canExecute('toggleCode')"
-        (onClick)="toggleCode()"
-      />
-      } @if (config().superscript) {
-      <tiptap-button
-        icon="superscript"
-        [title]="t().superscript"
-        [active]="isActive('superscript')"
-        [disabled]="!canExecute('toggleSuperscript')"
-        (onClick)="toggleSuperscript()"
-      />
-      } @if (config().subscript) {
-      <tiptap-button
-        icon="subscript"
-        [title]="t().subscript"
-        [active]="isActive('subscript')"
-        [disabled]="!canExecute('toggleSubscript')"
-        (onClick)="toggleSubscript()"
-      />
-      } @if (config().highlight) {
-      <tiptap-button
-        icon="highlight"
-        [title]="t().highlight"
-        [active]="isActive('highlight')"
-        [disabled]="!canExecute('toggleHighlight')"
-        (onClick)="toggleHighlight()"
-      />
-      } @if (config().separator && (config().heading1 || config().heading2 ||
-      config().heading3)) {
-      <tiptap-separator />
-      } @if (config().heading1) {
-      <tiptap-button
-        icon="format_h1"
-        [title]="t().heading1"
-        variant="text"
-        [active]="isActive('heading', { level: 1 })"
-        (onClick)="toggleHeading(1)"
-      />
-      } @if (config().heading2) {
-      <tiptap-button
-        icon="format_h2"
-        [title]="t().heading2"
-        variant="text"
-        [active]="isActive('heading', { level: 2 })"
-        (onClick)="toggleHeading(2)"
-      />
-      } @if (config().heading3) {
-      <tiptap-button
-        icon="format_h3"
-        [title]="t().heading3"
-        variant="text"
-        [active]="isActive('heading', { level: 3 })"
-        (onClick)="toggleHeading(3)"
-      />
-      } @if (config().separator && (config().bulletList || config().orderedList
-      || config().blockquote)) {
-      <tiptap-separator />
-      } @if (config().bulletList) {
-      <tiptap-button
-        icon="format_list_bulleted"
-        [title]="t().bulletList"
-        [active]="isActive('bulletList')"
-        (onClick)="toggleBulletList()"
-      />
-      } @if (config().orderedList) {
-      <tiptap-button
-        icon="format_list_numbered"
-        [title]="t().orderedList"
-        [active]="isActive('orderedList')"
-        (onClick)="toggleOrderedList()"
-      />
-      } @if (config().blockquote) {
-      <tiptap-button
-        icon="format_quote"
-        [title]="t().blockquote"
-        [active]="isActive('blockquote')"
-        (onClick)="toggleBlockquote()"
-      />
-      } @if (config().separator && (config().alignLeft || config().alignCenter
-      || config().alignRight || config().alignJustify)) {
-      <tiptap-separator />
-      } @if (config().alignLeft) {
-      <tiptap-button
-        icon="format_align_left"
-        [title]="t().alignLeft"
-        [active]="isActive('textAlign', { textAlign: 'left' })"
-        (onClick)="setTextAlign('left')"
-      />
-      } @if (config().alignCenter) {
-      <tiptap-button
-        icon="format_align_center"
-        [title]="t().alignCenter"
-        [active]="isActive('textAlign', { textAlign: 'center' })"
-        (onClick)="setTextAlign('center')"
-      />
-      } @if (config().alignRight) {
-      <tiptap-button
-        icon="format_align_right"
-        [title]="t().alignRight"
-        [active]="isActive('textAlign', { textAlign: 'right' })"
-        (onClick)="setTextAlign('right')"
-      />
-      } @if (config().alignJustify) {
-      <tiptap-button
-        icon="format_align_justify"
-        [title]="t().alignJustify"
-        [active]="isActive('textAlign', { textAlign: 'justify' })"
-        (onClick)="setTextAlign('justify')"
-      />
-      } @if (config().separator && (config().link || config().horizontalRule)) {
-      <tiptap-separator />
-      } @if (config().link) {
-      <tiptap-button
-        icon="link"
-        [title]="t().link"
-        [active]="isActive('link')"
-        (onClick)="toggleLink()"
-      />
-      } @if (config().horizontalRule) {
-      <tiptap-button
-        icon="horizontal_rule"
-        [title]="t().horizontalRule"
-        (onClick)="insertHorizontalRule()"
-      />
-      } @if (config().separator && config().image) {
-      <tiptap-separator />
-      } @if (config().image) {
-      <tiptap-button
-        icon="image"
-        [title]="t().image"
-        (onClick)="insertImage()"
-      />
-      } @if (config().separator && (config().undo || config().redo)) {
-      <tiptap-separator />
-      } @if (config().undo) {
-      <tiptap-button
-        icon="undo"
-        [title]="t().undo"
-        [disabled]="!canExecute('undo')"
-        (onClick)="undo()"
-      />
-      } @if (config().redo) {
-      <tiptap-button
-        icon="redo"
-        [title]="t().redo"
-        [disabled]="!canExecute('redo')"
-        (onClick)="redo()"
-      />
-      }
-    </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"] }] }); }
-}
-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: `
-    <div class="tiptap-toolbar">
-      @if (config().bold) {
-      <tiptap-button
-        icon="format_bold"
-        [title]="t().bold"
-        [active]="isActive('bold')"
-        [disabled]="!canExecute('toggleBold')"
-        (onClick)="toggleBold()"
-      />
-      } @if (config().italic) {
-      <tiptap-button
-        icon="format_italic"
-        [title]="t().italic"
-        [active]="isActive('italic')"
-        [disabled]="!canExecute('toggleItalic')"
-        (onClick)="toggleItalic()"
-      />
-      } @if (config().underline) {
-      <tiptap-button
-        icon="format_underlined"
-        [title]="t().underline"
-        [active]="isActive('underline')"
-        [disabled]="!canExecute('toggleUnderline')"
-        (onClick)="toggleUnderline()"
-      />
-      } @if (config().strike) {
-      <tiptap-button
-        icon="strikethrough_s"
-        [title]="t().strike"
-        [active]="isActive('strike')"
-        [disabled]="!canExecute('toggleStrike')"
-        (onClick)="toggleStrike()"
-      />
-      } @if (config().code) {
-      <tiptap-button
-        icon="code"
-        [title]="t().code"
-        [active]="isActive('code')"
-        [disabled]="!canExecute('toggleCode')"
-        (onClick)="toggleCode()"
-      />
-      } @if (config().superscript) {
-      <tiptap-button
-        icon="superscript"
-        [title]="t().superscript"
-        [active]="isActive('superscript')"
-        [disabled]="!canExecute('toggleSuperscript')"
-        (onClick)="toggleSuperscript()"
-      />
-      } @if (config().subscript) {
-      <tiptap-button
-        icon="subscript"
-        [title]="t().subscript"
-        [active]="isActive('subscript')"
-        [disabled]="!canExecute('toggleSubscript')"
-        (onClick)="toggleSubscript()"
-      />
-      } @if (config().highlight) {
-      <tiptap-button
-        icon="highlight"
-        [title]="t().highlight"
-        [active]="isActive('highlight')"
-        [disabled]="!canExecute('toggleHighlight')"
-        (onClick)="toggleHighlight()"
-      />
-      } @if (config().separator && (config().heading1 || config().heading2 ||
-      config().heading3)) {
-      <tiptap-separator />
-      } @if (config().heading1) {
-      <tiptap-button
-        icon="format_h1"
-        [title]="t().heading1"
-        variant="text"
-        [active]="isActive('heading', { level: 1 })"
-        (onClick)="toggleHeading(1)"
-      />
-      } @if (config().heading2) {
-      <tiptap-button
-        icon="format_h2"
-        [title]="t().heading2"
-        variant="text"
-        [active]="isActive('heading', { level: 2 })"
-        (onClick)="toggleHeading(2)"
-      />
-      } @if (config().heading3) {
-      <tiptap-button
-        icon="format_h3"
-        [title]="t().heading3"
-        variant="text"
-        [active]="isActive('heading', { level: 3 })"
-        (onClick)="toggleHeading(3)"
-      />
-      } @if (config().separator && (config().bulletList || config().orderedList
-      || config().blockquote)) {
-      <tiptap-separator />
-      } @if (config().bulletList) {
-      <tiptap-button
-        icon="format_list_bulleted"
-        [title]="t().bulletList"
-        [active]="isActive('bulletList')"
-        (onClick)="toggleBulletList()"
-      />
-      } @if (config().orderedList) {
-      <tiptap-button
-        icon="format_list_numbered"
-        [title]="t().orderedList"
-        [active]="isActive('orderedList')"
-        (onClick)="toggleOrderedList()"
-      />
-      } @if (config().blockquote) {
-      <tiptap-button
-        icon="format_quote"
-        [title]="t().blockquote"
-        [active]="isActive('blockquote')"
-        (onClick)="toggleBlockquote()"
-      />
-      } @if (config().separator && (config().alignLeft || config().alignCenter
-      || config().alignRight || config().alignJustify)) {
-      <tiptap-separator />
-      } @if (config().alignLeft) {
-      <tiptap-button
-        icon="format_align_left"
-        [title]="t().alignLeft"
-        [active]="isActive('textAlign', { textAlign: 'left' })"
-        (onClick)="setTextAlign('left')"
-      />
-      } @if (config().alignCenter) {
-      <tiptap-button
-        icon="format_align_center"
-        [title]="t().alignCenter"
-        [active]="isActive('textAlign', { textAlign: 'center' })"
-        (onClick)="setTextAlign('center')"
-      />
-      } @if (config().alignRight) {
-      <tiptap-button
-        icon="format_align_right"
-        [title]="t().alignRight"
-        [active]="isActive('textAlign', { textAlign: 'right' })"
-        (onClick)="setTextAlign('right')"
-      />
-      } @if (config().alignJustify) {
-      <tiptap-button
-        icon="format_align_justify"
-        [title]="t().alignJustify"
-        [active]="isActive('textAlign', { textAlign: 'justify' })"
-        (onClick)="setTextAlign('justify')"
-      />
-      } @if (config().separator && (config().link || config().horizontalRule)) {
-      <tiptap-separator />
-      } @if (config().link) {
-      <tiptap-button
-        icon="link"
-        [title]="t().link"
-        [active]="isActive('link')"
-        (onClick)="toggleLink()"
-      />
-      } @if (config().horizontalRule) {
-      <tiptap-button
-        icon="horizontal_rule"
-        [title]="t().horizontalRule"
-        (onClick)="insertHorizontalRule()"
-      />
-      } @if (config().separator && config().image) {
-      <tiptap-separator />
-      } @if (config().image) {
-      <tiptap-button
-        icon="image"
-        [title]="t().image"
-        (onClick)="insertImage()"
-      />
-      } @if (config().separator && (config().undo || config().redo)) {
-      <tiptap-separator />
-      } @if (config().undo) {
-      <tiptap-button
-        icon="undo"
-        [title]="t().undo"
-        [disabled]="!canExecute('undo')"
-        (onClick)="undo()"
-      />
-      } @if (config().redo) {
-      <tiptap-button
-        icon="redo"
-        [title]="t().redo"
-        [disabled]="!canExecute('redo')"
-        (onClick)="redo()"
-      />
-      }
-    </div>
-  `, 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"] }]
-        }], ctorParameters: () => [{ type: EditorCommandsService }] });
-
-class TiptapImageUploadComponent {
-    constructor() {
-        // Inputs
-        this.config = input({
-            maxSize: 5, // 5MB par défaut
-            maxWidth: 1920, // largeur max par défaut
-            maxHeight: 1080, // hauteur max par défaut
-            allowedTypes: ["image/jpeg", "image/png", "image/gif", "image/webp"],
-            enableDragDrop: true,
-            showPreview: true,
-            multiple: false,
-            compressImages: true,
-            quality: 0.8,
-        });
-        // Outputs
-        this.imageSelected = output();
-        this.error = output();
-        // Signals internes
-        this.isDragOver = signal(false);
-        this.isUploading = signal(false);
-        this.uploadProgress = signal(0);
-        this.previewImage = signal(null);
-        this.previewInfo = signal("");
-        this.errorMessage = signal(null);
-        // Computed
-        this.acceptedTypes = computed(() => {
-            const types = this.config().allowedTypes || ["image/*"];
-            return types.join(",");
-        });
+    undo(editor) {
+        editor.chain().focus().undo().run();
     }
-    triggerFileInput() {
-        const input = document.querySelector('input[type="file"]');
-        if (input) {
-            input.click();
-        }
+    redo(editor) {
+        editor.chain().focus().redo().run();
     }
-    onFileSelected(event) {
-        const input = event.target;
-        const files = input.files;
-        if (files && files.length > 0) {
-            this.processFiles(Array.from(files));
-        }
-        // Reset input
-        input.value = "";
+    // Nouvelles méthodes pour les formatages supplémentaires
+    toggleUnderline(editor) {
+        editor.chain().focus().toggleUnderline().run();
     }
-    onDragOver(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        this.isDragOver.set(true);
+    toggleSuperscript(editor) {
+        editor.chain().focus().toggleSuperscript().run();
     }
-    onDrop(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        this.isDragOver.set(false);
-        const files = event.dataTransfer?.files;
-        if (files && files.length > 0) {
-            this.processFiles(Array.from(files));
-        }
+    toggleSubscript(editor) {
+        editor.chain().focus().toggleSubscript().run();
     }
-    onDragLeave(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        this.isDragOver.set(false);
+    setTextAlign(editor, alignment) {
+        editor.chain().focus().setTextAlign(alignment).run();
     }
-    processFiles(files) {
-        const config = this.config();
-        const maxSize = (config.maxSize || 5) * 1024 * 1024; // Convertir en bytes
-        const allowedTypes = config.allowedTypes || ["image/*"];
-        // Vérifier le nombre de fichiers
-        if (!config.multiple && files.length > 1) {
-            this.showError("Veuillez sélectionner une seule image");
-            return;
+    toggleLink(editor, url) {
+        if (url) {
+            editor.chain().focus().toggleLink({ href: url }).run();
         }
-        // Traiter chaque fichier
-        files.forEach((file) => {
-            // Vérifier le type
-            if (!this.isValidFileType(file, allowedTypes)) {
-                this.showError(`Type de fichier non supporté: ${file.name}`);
-                return;
-            }
-            // Vérifier la taille
-            if (file.size > maxSize) {
-                this.showError(`Fichier trop volumineux: ${file.name} (max ${config.maxSize}MB)`);
-                return;
+        else {
+            // Si pas d'URL fournie, on demande à l'utilisateur
+            const href = window.prompt("URL du lien:");
+            if (href) {
+                editor.chain().focus().toggleLink({ href }).run();
             }
-            // Traiter l'image avec compression si nécessaire
-            this.processImage(file);
-        });
+        }
     }
-    isValidFileType(file, allowedTypes) {
-        if (allowedTypes.includes("image/*")) {
-            return file.type.startsWith("image/");
+    insertHorizontalRule(editor) {
+        editor.chain().focus().setHorizontalRule().run();
+    }
+    toggleHighlight(editor, color) {
+        if (color) {
+            editor.chain().focus().toggleHighlight({ color }).run();
+        }
+        else {
+            editor.chain().focus().toggleHighlight().run();
         }
-        return allowedTypes.includes(file.type);
     }
-    processImage(file) {
-        this.isUploading.set(true);
-        this.uploadProgress.set(10);
-        const config = this.config();
-        const originalSize = file.size;
-        // Créer un canvas pour la compression
-        const canvas = document.createElement("canvas");
-        const ctx = canvas.getContext("2d");
-        const img = new Image();
-        img.onload = () => {
-            this.uploadProgress.set(30);
-            // Vérifier les dimensions
-            const maxWidth = config.maxWidth || 1920;
-            const maxHeight = config.maxHeight || 1080;
-            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);
-            this.uploadProgress.set(70);
-            // Convertir en base64 avec compression
-            const quality = config.quality || 0.8;
-            const mimeType = file.type;
-            canvas.toBlob((blob) => {
-                this.uploadProgress.set(90);
-                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: originalSize,
-                            };
-                            // Afficher la prévisualisation si activée
-                            if (config.showPreview) {
-                                this.previewImage.set(base64);
-                                this.previewInfo.set(`${result.width}×${result.height} • ${this.formatFileSize(blob.size)}`);
-                            }
-                            // Émettre l'événement
-                            this.imageSelected.emit(result);
-                            this.clearError();
-                        }
-                        this.uploadProgress.set(100);
-                        setTimeout(() => {
-                            this.isUploading.set(false);
-                            this.uploadProgress.set(0);
-                        }, 500);
-                    };
-                    reader.readAsDataURL(blob);
-                }
-                else {
-                    this.showError("Erreur lors de la compression de l'image");
-                    this.isUploading.set(false);
-                    this.uploadProgress.set(0);
-                }
-            }, mimeType, quality);
-        };
-        img.onerror = () => {
-            this.showError("Erreur lors du chargement de l'image");
-            this.isUploading.set(false);
-            this.uploadProgress.set(0);
-        };
-        img.src = URL.createObjectURL(file);
+    // Table commands
+    insertTable(editor, rows = 3, cols = 3) {
+        editor.chain().focus().insertTable({ rows, cols }).run();
     }
-    formatFileSize(bytes) {
-        if (bytes === 0)
-            return "0 B";
-        const k = 1024;
-        const sizes = ["B", "KB", "MB", "GB"];
-        const i = Math.floor(Math.log(bytes) / Math.log(k));
-        return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + " " + sizes[i];
+    addColumnBefore(editor) {
+        editor.chain().focus().addColumnBefore().run();
     }
-    showError(message) {
-        this.errorMessage.set(message);
-        this.error.emit(message);
-        this.isUploading.set(false);
-        this.uploadProgress.set(0);
-        // Auto-clear après 5 secondes
-        setTimeout(() => {
-            this.clearError();
-        }, 5000);
+    addColumnAfter(editor) {
+        editor.chain().focus().addColumnAfter().run();
     }
-    clearError() {
-        this.errorMessage.set(null);
+    deleteColumn(editor) {
+        editor.chain().focus().deleteColumn().run();
     }
-    clearPreview() {
-        this.previewImage.set(null);
-        this.previewInfo.set("");
+    addRowBefore(editor) {
+        editor.chain().focus().addRowBefore().run();
     }
-    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"] }] }); }
+    addRowAfter(editor) {
+        editor.chain().focus().addRowAfter().run();
+    }
+    deleteRow(editor) {
+        editor.chain().focus().deleteRow().run();
+    }
+    deleteTable(editor) {
+        editor.chain().focus().deleteTable().run();
+    }
+    mergeCells(editor) {
+        editor.chain().focus().mergeCells().run();
+    }
+    splitCell(editor) {
+        editor.chain().focus().splitCell().run();
+    }
+    toggleHeaderColumn(editor) {
+        editor.chain().focus().toggleHeaderColumn().run();
+    }
+    toggleHeaderRow(editor) {
+        editor.chain().focus().toggleHeaderRow().run();
+    }
+    toggleHeaderCell(editor) {
+        editor.chain().focus().toggleHeaderCell().run();
+    }
+    // Méthode pour vider le contenu
+    clearContent(editor) {
+        editor.chain().focus().setContent("", true).run(); // ✅ Forcer l'émission de l'événement
+    }
+    // Méthodes de base de l'éditeur
+    focus(editor) {
+        editor.chain().focus().run();
+    }
+    blur(editor) {
+        editor.chain().blur().run();
+    }
+    setContent(editor, content, emitUpdate = true) {
+        editor.chain().focus().setContent(content, emitUpdate).run();
+    }
+    setEditable(editor, editable) {
+        editor.setEditable(editable);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: EditorCommandsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: EditorCommandsService, providedIn: "root" }); }
 }
-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>
-  `, 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"] }]
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: EditorCommandsService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: "root",
+                }]
         }] });
 
-class TiptapBubbleMenuComponent {
-    // Effect comme propriété de classe pour éviter l'erreur d'injection context
+class TiptapTableBubbleMenuComponent {
     constructor() {
+        // Inputs
         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.config = input({});
+        // Services
+        this.i18nService = inject(TiptapI18nService);
+        this.commandsService = inject(EditorCommandsService);
+        // Tippy instance
         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(),
-        }));
+        // Signaux
+        this.i18n = this.i18nService;
         this.updateMenu = () => {
             // Debounce pour éviter les appels trop fréquents
             if (this.updateTimeout) {
@@ -2308,14 +2385,25 @@ class TiptapBubbleMenuComponent {
                 const ed = this.editor();
                 if (!ed)
                     return;
+                const isTableSelected = ed.isActive("table") ||
+                    ed.isActive("tableCell") ||
+                    ed.isActive("tableHeader");
+                // Vérifier s'il y a une sélection de cellules (priorité au menu de cellules)
                 const { from, to } = ed.state.selection;
-                const hasTextSelection = from !== to;
-                const isImageSelected = ed.isActive("image") || ed.isActive("resizableImage");
-                // Ne montrer le menu texte que si :
-                // - Il y a une sélection de texte
-                // - Aucune image n'est sélectionnée (priorité aux images)
-                // - L'éditeur est éditable
-                const shouldShow = hasTextSelection && !isImageSelected && ed.isEditable;
+                const hasCellSelection = from !== to;
+                const isTableCell = ed.isActive("tableCell") || ed.isActive("tableHeader");
+                // Vérifier si la sélection traverse plusieurs cellules
+                const selectionSize = to - from;
+                const hasMultiCellSelection = hasCellSelection && selectionSize > 1;
+                // Ne montrer le menu de table que si :
+                // 1. Une table est sélectionnée
+                // 2. L'éditeur est éditable
+                // 3. Il n'y a PAS de sélection de cellules (priorité au menu de cellules)
+                // 4. Il n'y a PAS de sélection multi-cellules
+                const shouldShow = isTableSelected &&
+                    ed.isEditable &&
+                    !(hasCellSelection && isTableCell) &&
+                    !hasMultiCellSelection;
                 if (shouldShow) {
                     this.showTippy();
                 }
@@ -2330,57 +2418,41 @@ class TiptapBubbleMenuComponent {
                 this.hideTippy();
             }, 100);
         };
+        // Effet pour mettre à jour le menu quand l'éditeur change
         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
+            const editor = this.editor();
+            if (editor) {
+                // Nettoyer les anciens listeners
+                editor.off("selectionUpdate", this.updateMenu);
+                editor.off("focus", this.updateMenu);
+                editor.off("blur", this.handleBlur);
+                // Ajouter les nouveaux listeners
+                editor.on("selectionUpdate", this.updateMenu);
+                editor.on("focus", this.updateMenu);
+                editor.on("blur", this.handleBlur);
+            }
         });
     }
     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);
+        const editor = this.editor();
+        if (editor) {
+            // Nettoyer les événements
+            editor.off("selectionUpdate", this.updateMenu);
+            editor.off("focus", this.updateMenu);
+            editor.off("blur", this.handleBlur);
         }
-        // Nettoyer Tippy
         if (this.tippyInstance) {
             this.tippyInstance.destroy();
-            this.tippyInstance = null;
+        }
+        if (this.updateTimeout) {
+            clearTimeout(this.updateTimeout);
         }
     }
     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();
-        }
+        const menuElement = this.menuElement.nativeElement;
         // Créer l'instance Tippy
         this.tippyInstance = tippy(document.body, {
             content: menuElement,
@@ -2390,13 +2462,13 @@ class TiptapBubbleMenuComponent {
             interactive: true,
             arrow: false,
             offset: [0, 8],
+            maxWidth: "none",
             hideOnClick: false,
             onShow: (instance) => {
                 // S'assurer que les autres menus sont fermés
                 this.hideOtherMenus();
             },
-            getReferenceClientRect: () => this.getSelectionRect(),
-            // Améliorer le positionnement avec scroll
+            getReferenceClientRect: () => this.getTableRect(),
             popperOptions: {
                 modifiers: [
                     {
@@ -2418,257 +2490,275 @@ class TiptapBubbleMenuComponent {
         // Maintenant que Tippy est initialisé, faire un premier check
         this.updateMenu();
     }
-    getSelectionRect() {
-        const selection = window.getSelection();
-        if (!selection || selection.rangeCount === 0) {
+    getTableRect() {
+        const ed = this.editor();
+        if (!ed)
             return new DOMRect(0, 0, 0, 0);
+        // Méthode 1: Utiliser coordsAtPos (méthode native ProseMirror)
+        const { from } = ed.state.selection;
+        const coords = ed.view.coordsAtPos(from);
+        // Trouver la table qui contient cette position
+        const editorElement = ed.view.dom;
+        const tables = Array.from(editorElement.querySelectorAll("table"));
+        for (let i = 0; i < tables.length; i++) {
+            const table = tables[i];
+            try {
+                const tableRect = table.getBoundingClientRect();
+                // Vérifier si la position ProseMirror est dans cette table
+                const isInside = coords.left >= tableRect.left &&
+                    coords.left <= tableRect.right &&
+                    coords.top >= tableRect.top &&
+                    coords.top <= tableRect.bottom;
+                if (isInside) {
+                    return tableRect;
+                }
+            }
+            catch (error) {
+                continue;
+            }
         }
-        const range = selection.getRangeAt(0);
-        return range.getBoundingClientRect();
+        // Fallback : utiliser la méthode DOM si ProseMirror échoue
+        const selection = window.getSelection();
+        if (selection && selection.rangeCount > 0) {
+            const range = selection.getRangeAt(0);
+            const rect = range.getBoundingClientRect();
+            if (rect.width > 0 && rect.height > 0) {
+                return rect;
+            }
+        }
+        // Dernier fallback : première table
+        if (tables.length > 0) {
+            return tables[0].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.getSelectionRect(),
-        });
-        this.tippyInstance.show();
-    }
-    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 }], 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"] }] }); }
+            return;
+        // Mettre à jour la position
+        this.tippyInstance.setProps({
+            getReferenceClientRect: () => this.getTableRect(),
+        });
+        this.tippyInstance.show();
+    }
+    hideTippy() {
+        if (!this.tippyInstance)
+            return;
+        this.tippyInstance.hide();
+    }
+    // Actions de lignes
+    addRowBefore() {
+        this.commandsService.addRowBefore(this.editor());
+    }
+    addRowAfter() {
+        this.commandsService.addRowAfter(this.editor());
+    }
+    deleteRow() {
+        this.commandsService.deleteRow(this.editor());
+    }
+    // Actions de colonnes
+    addColumnBefore() {
+        this.commandsService.addColumnBefore(this.editor());
+    }
+    addColumnAfter() {
+        this.commandsService.addColumnAfter(this.editor());
+    }
+    deleteColumn() {
+        this.commandsService.deleteColumn(this.editor());
+    }
+    // Actions de headers
+    toggleHeaderRow() {
+        this.commandsService.toggleHeaderRow(this.editor());
+    }
+    toggleHeaderColumn() {
+        this.commandsService.toggleHeaderColumn(this.editor());
+    }
+    // Actions de table
+    deleteTable() {
+        this.commandsService.deleteTable(this.editor());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapTableBubbleMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: TiptapTableBubbleMenuComponent, isStandalone: true, selector: "tiptap-table-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: "menuElement", first: true, predicate: ["menuElement"], descendants: true, static: true }], ngImport: i0, template: `
+    <div #menuElement class="bubble-menu">
+      <!-- Actions de lignes -->
+      @if (config().addRowBefore !== false) {
+      <tiptap-button
+        icon="add_row_above"
+        title="{{ i18n.table().addRowBefore }}"
+        (click)="addRowBefore()"
+      ></tiptap-button>
+      } @if (config().addRowAfter !== false) {
+      <tiptap-button
+        icon="add_row_below"
+        title="{{ i18n.table().addRowAfter }}"
+        (click)="addRowAfter()"
+      ></tiptap-button>
+      } @if (config().deleteRow !== false) {
+      <tiptap-button
+        icon="delete"
+        title="{{ i18n.table().deleteRow }}"
+        variant="danger"
+        (click)="deleteRow()"
+      ></tiptap-button>
+      } @if (config().separator !== false) {
+      <tiptap-separator></tiptap-separator>
+      }
+
+      <!-- Actions de colonnes -->
+      @if (config().addColumnBefore !== false) {
+      <tiptap-button
+        icon="add_column_left"
+        title="{{ i18n.table().addColumnBefore }}"
+        (click)="addColumnBefore()"
+      ></tiptap-button>
+      } @if (config().addColumnAfter !== false) {
+      <tiptap-button
+        icon="add_column_right"
+        title="{{ i18n.table().addColumnAfter }}"
+        (click)="addColumnAfter()"
+      ></tiptap-button>
+      } @if (config().deleteColumn !== false) {
+      <tiptap-button
+        icon="delete"
+        title="{{ i18n.table().deleteColumn }}"
+        variant="danger"
+        (click)="deleteColumn()"
+      ></tiptap-button>
+      } @if (config().separator !== false) {
+      <tiptap-separator></tiptap-separator>
+      }
+
+      <!-- Actions de cellules -->
+      @if (config().toggleHeaderRow !== false) {
+      <tiptap-button
+        icon="toolbar"
+        title="{{ i18n.table().toggleHeaderRow }}"
+        (click)="toggleHeaderRow()"
+      ></tiptap-button>
+      } @if (config().toggleHeaderColumn !== false) {
+      <tiptap-button
+        icon="dock_to_right"
+        title="{{ i18n.table().toggleHeaderColumn }}"
+        (click)="toggleHeaderColumn()"
+      ></tiptap-button>
+      } @if (config().separator !== false && config().deleteTable !== false) {
+      <tiptap-separator></tiptap-separator>
+      }
+
+      <!-- Actions de table -->
+      @if (config().deleteTable !== false) {
+      <tiptap-button
+        icon="delete_forever"
+        title="{{ i18n.table().deleteTable }}"
+        variant="danger"
+        (click)="deleteTable()"
+      ></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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapBubbleMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapTableBubbleMenuComponent, 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>
+            args: [{ selector: "tiptap-table-bubble-menu", standalone: true, imports: [CommonModule, TiptapButtonComponent, TiptapSeparatorComponent], template: `
+    <div #menuElement class="bubble-menu">
+      <!-- Actions de lignes -->
+      @if (config().addRowBefore !== false) {
+      <tiptap-button
+        icon="add_row_above"
+        title="{{ i18n.table().addRowBefore }}"
+        (click)="addRowBefore()"
+      ></tiptap-button>
+      } @if (config().addRowAfter !== false) {
+      <tiptap-button
+        icon="add_row_below"
+        title="{{ i18n.table().addRowAfter }}"
+        (click)="addRowAfter()"
+      ></tiptap-button>
+      } @if (config().deleteRow !== false) {
+      <tiptap-button
+        icon="delete"
+        title="{{ i18n.table().deleteRow }}"
+        variant="danger"
+        (click)="deleteRow()"
+      ></tiptap-button>
+      } @if (config().separator !== false) {
+      <tiptap-separator></tiptap-separator>
+      }
+
+      <!-- Actions de colonnes -->
+      @if (config().addColumnBefore !== false) {
+      <tiptap-button
+        icon="add_column_left"
+        title="{{ i18n.table().addColumnBefore }}"
+        (click)="addColumnBefore()"
+      ></tiptap-button>
+      } @if (config().addColumnAfter !== false) {
+      <tiptap-button
+        icon="add_column_right"
+        title="{{ i18n.table().addColumnAfter }}"
+        (click)="addColumnAfter()"
+      ></tiptap-button>
+      } @if (config().deleteColumn !== false) {
+      <tiptap-button
+        icon="delete"
+        title="{{ i18n.table().deleteColumn }}"
+        variant="danger"
+        (click)="deleteColumn()"
+      ></tiptap-button>
+      } @if (config().separator !== false) {
+      <tiptap-separator></tiptap-separator>
+      }
+
+      <!-- Actions de cellules -->
+      @if (config().toggleHeaderRow !== false) {
+      <tiptap-button
+        icon="toolbar"
+        title="{{ i18n.table().toggleHeaderRow }}"
+        (click)="toggleHeaderRow()"
+      ></tiptap-button>
+      } @if (config().toggleHeaderColumn !== false) {
+      <tiptap-button
+        icon="dock_to_right"
+        title="{{ i18n.table().toggleHeaderColumn }}"
+        (click)="toggleHeaderColumn()"
+      ></tiptap-button>
+      } @if (config().separator !== false && config().deleteTable !== false) {
+      <tiptap-separator></tiptap-separator>
+      }
+
+      <!-- Actions de table -->
+      @if (config().deleteTable !== false) {
+      <tiptap-button
+        icon="delete_forever"
+        title="{{ i18n.table().deleteTable }}"
+        variant="danger"
+        (click)="deleteTable()"
+      ></tiptap-button>
+      }
+    </div>
   ` }]
-        }], ctorParameters: () => [], propDecorators: { menuRef: [{
+        }], ctorParameters: () => [], propDecorators: { menuElement: [{
                 type: ViewChild,
-                args: ["menuRef", { static: false }]
+                args: ["menuElement", { static: true }]
             }] } });
 
-class TiptapImageBubbleMenuComponent {
+class TiptapCellBubbleMenuComponent {
     constructor() {
+        // Inputs
         this.editor = input.required();
-        this.config = input({
-            changeImage: true,
-            resizeSmall: true,
-            resizeMedium: true,
-            resizeLarge: true,
-            resizeOriginal: true,
-            deleteImage: true,
-            separator: true,
-        });
+        this.config = input({});
+        // Services
+        this.i18nService = inject(TiptapI18nService);
+        this.commandsService = inject(EditorCommandsService);
+        // Tippy instance
         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);
-        });
+        // Signaux
+        this.i18n = this.i18nService;
+        this.isSingleCellSelected = false;
         this.updateMenu = () => {
             // Debounce pour éviter les appels trop fréquents
             if (this.updateTimeout) {
@@ -2678,14 +2768,33 @@ class TiptapImageBubbleMenuComponent {
                 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;
+                const { selection } = ed.state;
+                const { from, to } = selection;
+                // Détecter spécifiquement la sélection de CELLULES (pas de texte)
+                const hasCellSelection = selection instanceof CellSelection;
+                // Une seule cellule si ancre et tête pointent vers la même cellule
+                this.isSingleCellSelected =
+                    hasCellSelection &&
+                        selection.$anchorCell.pos ===
+                            selection.$headCell.pos;
+                const hasTextSelection = !selection.empty && !(selection instanceof CellSelection);
+                const isTableCell = ed.isActive("tableCell") || ed.isActive("tableHeader");
+                console.log("CellBubbleMenu - updateMenu:", {
+                    hasCellSelection,
+                    isSingleCellSelected: this.isSingleCellSelected,
+                    hasTextSelection,
+                    isTableCell,
+                    selectionEmpty: selection.empty,
+                    selectionType: selection.constructor.name,
+                    from,
+                    to,
+                    isEditable: ed.isEditable,
+                });
+                // Le menu de cellule ne s'affiche QUE pour les sélections de cellules multiples
+                // (pas pour la sélection de texte dans une cellule)
+                const shouldShow = hasCellSelection && isTableCell && ed.isEditable;
                 if (shouldShow) {
+                    console.log("CellBubbleMenu - Affichage du menu de cellules");
                     this.showTippy();
                 }
                 else {
@@ -2699,57 +2808,41 @@ class TiptapImageBubbleMenuComponent {
                 this.hideTippy();
             }, 100);
         };
+        // Effet pour mettre à jour le menu quand l'éditeur change
         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
+            const editor = this.editor();
+            if (editor) {
+                // Nettoyer les anciens listeners
+                editor.off("selectionUpdate", this.updateMenu);
+                editor.off("focus", this.updateMenu);
+                editor.off("blur", this.handleBlur);
+                // Ajouter les nouveaux listeners
+                editor.on("selectionUpdate", this.updateMenu);
+                editor.on("focus", this.updateMenu);
+                editor.on("blur", this.handleBlur);
+            }
         });
     }
     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);
+        const editor = this.editor();
+        if (editor) {
+            // Nettoyer les événements
+            editor.off("selectionUpdate", this.updateMenu);
+            editor.off("focus", this.updateMenu);
+            editor.off("blur", this.handleBlur);
         }
-        // Nettoyer Tippy
         if (this.tippyInstance) {
             this.tippyInstance.destroy();
-            this.tippyInstance = null;
+        }
+        if (this.updateTimeout) {
+            clearTimeout(this.updateTimeout);
         }
     }
     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();
-        }
+        const menuElement = this.menuElement.nativeElement;
         // Créer l'instance Tippy
         this.tippyInstance = tippy(document.body, {
             content: menuElement,
@@ -2764,8 +2857,7 @@ class TiptapImageBubbleMenuComponent {
                 // S'assurer que les autres menus sont fermés
                 this.hideOtherMenus();
             },
-            getReferenceClientRect: () => this.getImageRect(),
-            // Améliorer le positionnement avec scroll
+            getReferenceClientRect: () => this.getCellRect(),
             popperOptions: {
                 modifiers: [
                     {
@@ -2787,218 +2879,636 @@ class TiptapImageBubbleMenuComponent {
         // Maintenant que Tippy est initialisé, faire un premier check
         this.updateMenu();
     }
-    getImageRect() {
+    getCellRect() {
         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();
+        // Détecter la sélection de cellules
+        const { from, to } = ed.state.selection;
+        const hasCellSelection = from !== to;
+        if (!hasCellSelection) {
+            return new DOMRect(0, 0, 0, 0);
         }
-        return new DOMRect(0, 0, 0, 0);
+        // Obtenir les coordonnées de la sélection
+        const coords = ed.view.coordsAtPos(from);
+        const endCoords = ed.view.coordsAtPos(to);
+        // Créer un rectangle englobant la sélection
+        const rect = new DOMRect(Math.min(coords.left, endCoords.left), Math.min(coords.top, endCoords.top), Math.abs(endCoords.left - coords.left), Math.abs(endCoords.top - coords.top));
+        return rect;
     }
     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
+        // Masquer tous les autres menus quand le menu de cellules est actif
+        this.hideTableMenu();
+        this.hideTextBubbleMenu();
     }
     showTippy() {
         if (!this.tippyInstance)
             return;
+        // Masquer les autres menus avant d'afficher le menu de cellules
+        this.hideTableMenu();
+        this.hideTextBubbleMenu();
         // Mettre à jour la position
         this.tippyInstance.setProps({
-            getReferenceClientRect: () => this.getImageRect(),
+            getReferenceClientRect: () => this.getCellRect(),
         });
         this.tippyInstance.show();
     }
-    hideTippy() {
-        if (this.tippyInstance) {
-            this.tippyInstance.hide();
+    hideTableMenu() {
+        // Masquer le menu de table quand le menu de cellules est actif
+        const tableMenu = document.querySelector("tiptap-table-bubble-menu");
+        if (tableMenu) {
+            const tippyInstance = tableMenu._tippy;
+            if (tippyInstance) {
+                tippyInstance.hide();
+            }
+        }
+        // Alternative : masquer via l'élément Angular
+        const tableMenuComponent = document.querySelector("tiptap-table-bubble-menu");
+        if (tableMenuComponent && tableMenuComponent.hideTippy) {
+            tableMenuComponent.hideTippy();
         }
     }
-    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;
+    hideTextBubbleMenu() {
+        // Masquer le menu de texte (bubble menu général) quand le menu de cellules est actif
+        const textMenu = document.querySelector("tiptap-bubble-menu");
+        if (textMenu) {
+            const tippyInstance = textMenu._tippy;
+            if (tippyInstance) {
+                tippyInstance.hide();
+            }
+        }
+        // Alternative : masquer via l'élément Angular
+        const textMenuComponent = document.querySelector("tiptap-bubble-menu");
+        if (textMenuComponent && textMenuComponent.hideTippy) {
+            textMenuComponent.hideTippy();
         }
     }
-    async changeImage() {
-        const ed = this.editor();
-        if (!ed)
+    hideTippy() {
+        if (!this.tippyInstance)
             return;
+        this.tippyInstance.hide();
+    }
+    // Actions spécifiques aux cellules
+    mergeCells() {
+        this.commandsService.mergeCells(this.editor());
+    }
+    splitCell() {
+        this.commandsService.splitCell(this.editor());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapCellBubbleMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: TiptapCellBubbleMenuComponent, isStandalone: true, selector: "tiptap-cell-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: "menuElement", first: true, predicate: ["menuElement"], descendants: true, static: true }], ngImport: i0, template: `
+    <div #menuElement class="bubble-menu">
+      <!-- Actions spécifiques aux cellules -->
+      @if (config().mergeCells !== false && !isSingleCellSelected) {
+      <tiptap-button
+        icon="cell_merge"
+        title="{{ i18n.table().mergeCells }}"
+        (click)="mergeCells()"
+      ></tiptap-button>
+      } @if (config().splitCell !== false && isSingleCellSelected) {
+      <tiptap-button
+        icon="split_scene"
+        title="{{ i18n.table().splitCell }}"
+        (click)="splitCell()"
+      ></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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapCellBubbleMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "tiptap-cell-bubble-menu", standalone: true, imports: [CommonModule, TiptapButtonComponent], template: `
+    <div #menuElement class="bubble-menu">
+      <!-- Actions spécifiques aux cellules -->
+      @if (config().mergeCells !== false && !isSingleCellSelected) {
+      <tiptap-button
+        icon="cell_merge"
+        title="{{ i18n.table().mergeCells }}"
+        (click)="mergeCells()"
+      ></tiptap-button>
+      } @if (config().splitCell !== false && isSingleCellSelected) {
+      <tiptap-button
+        icon="split_scene"
+        title="{{ i18n.table().splitCell }}"
+        (click)="splitCell()"
+      ></tiptap-button>
+      }
+    </div>
+  ` }]
+        }], ctorParameters: () => [], propDecorators: { menuElement: [{
+                type: ViewChild,
+                args: ["menuElement", { static: true }]
+            }] } });
+
+class TiptapToolbarComponent {
+    constructor(editorCommands) {
+        this.editorCommands = editorCommands;
+        this.editor = input.required();
+        this.config = input.required();
+        // Outputs pour les événements d'image
+        this.imageUploaded = output();
+        this.imageError = output();
+        this.imageService = inject(ImageService);
+        this.i18nService = inject(TiptapI18nService);
+        // Computed values pour les traductions
+        this.t = this.i18nService.toolbar;
+    }
+    isActive(name, attributes) {
+        return this.editorCommands.isActive(this.editor(), name, attributes);
+    }
+    canExecute(command) {
+        return this.editorCommands.canExecute(this.editor(), command);
+    }
+    toggleBold() {
+        this.editorCommands.toggleBold(this.editor());
+    }
+    toggleItalic() {
+        this.editorCommands.toggleItalic(this.editor());
+    }
+    toggleStrike() {
+        this.editorCommands.toggleStrike(this.editor());
+    }
+    toggleCode() {
+        this.editorCommands.toggleCode(this.editor());
+    }
+    toggleHeading(level) {
+        this.editorCommands.toggleHeading(this.editor(), level);
+    }
+    toggleBulletList() {
+        this.editorCommands.toggleBulletList(this.editor());
+    }
+    toggleOrderedList() {
+        this.editorCommands.toggleOrderedList(this.editor());
+    }
+    toggleBlockquote() {
+        this.editorCommands.toggleBlockquote(this.editor());
+    }
+    undo() {
+        this.editorCommands.undo(this.editor());
+    }
+    redo() {
+        this.editorCommands.redo(this.editor());
+    }
+    // Nouvelles méthodes pour les formatages supplémentaires
+    toggleUnderline() {
+        this.editorCommands.toggleUnderline(this.editor());
+    }
+    toggleSuperscript() {
+        this.editorCommands.toggleSuperscript(this.editor());
+    }
+    toggleSubscript() {
+        this.editorCommands.toggleSubscript(this.editor());
+    }
+    setTextAlign(alignment) {
+        this.editorCommands.setTextAlign(this.editor(), alignment);
+    }
+    toggleLink() {
+        this.editorCommands.toggleLink(this.editor());
+    }
+    insertHorizontalRule() {
+        this.editorCommands.insertHorizontalRule(this.editor());
+    }
+    toggleHighlight() {
+        this.editorCommands.toggleHighlight(this.editor());
+    }
+    // Méthode pour insérer un tableau
+    insertTable() {
+        this.editorCommands.insertTable(this.editor());
+    }
+    // Méthode pour insérer une image
+    async insertImage() {
         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/*",
-            });
+            await this.imageService.selectAndUploadImage(this.editor());
         }
         catch (error) {
-            console.error("Erreur lors du changement d'image:", error);
+            console.error("Erreur lors de l'upload d'image:", error);
+            this.imageError.emit("Erreur lors de l'upload d'image");
         }
     }
-    deleteImage() {
-        const ed = this.editor();
-        if (ed) {
-            ed.chain().focus().deleteSelection().run();
-        }
+    // Méthode pour vider le contenu
+    clearContent() {
+        this.editorCommands.clearContent(this.editor());
     }
-    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"] }] }); }
+    // Méthodes pour les événements d'image (conservées pour compatibilité)
+    onImageSelected(result) {
+        this.imageUploaded.emit(result);
+    }
+    onImageError(error) {
+        this.imageError.emit(error);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapToolbarComponent, deps: [{ token: EditorCommandsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: TiptapToolbarComponent, isStandalone: true, selector: "tiptap-toolbar", inputs: { editor: { classPropertyName: "editor", publicName: "editor", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { imageUploaded: "imageUploaded", imageError: "imageError" }, ngImport: i0, template: `
+    <div class="tiptap-toolbar">
+      @if (config().bold) {
+      <tiptap-button
+        icon="format_bold"
+        [title]="t().bold"
+        [active]="isActive('bold')"
+        [disabled]="!canExecute('toggleBold')"
+        (onClick)="toggleBold()"
+      />
+      } @if (config().italic) {
+      <tiptap-button
+        icon="format_italic"
+        [title]="t().italic"
+        [active]="isActive('italic')"
+        [disabled]="!canExecute('toggleItalic')"
+        (onClick)="toggleItalic()"
+      />
+      } @if (config().underline) {
+      <tiptap-button
+        icon="format_underlined"
+        [title]="t().underline"
+        [active]="isActive('underline')"
+        [disabled]="!canExecute('toggleUnderline')"
+        (onClick)="toggleUnderline()"
+      />
+      } @if (config().strike) {
+      <tiptap-button
+        icon="strikethrough_s"
+        [title]="t().strike"
+        [active]="isActive('strike')"
+        [disabled]="!canExecute('toggleStrike')"
+        (onClick)="toggleStrike()"
+      />
+      } @if (config().code) {
+      <tiptap-button
+        icon="code"
+        [title]="t().code"
+        [active]="isActive('code')"
+        [disabled]="!canExecute('toggleCode')"
+        (onClick)="toggleCode()"
+      />
+      } @if (config().superscript) {
+      <tiptap-button
+        icon="superscript"
+        [title]="t().superscript"
+        [active]="isActive('superscript')"
+        [disabled]="!canExecute('toggleSuperscript')"
+        (onClick)="toggleSuperscript()"
+      />
+      } @if (config().subscript) {
+      <tiptap-button
+        icon="subscript"
+        [title]="t().subscript"
+        [active]="isActive('subscript')"
+        [disabled]="!canExecute('toggleSubscript')"
+        (onClick)="toggleSubscript()"
+      />
+      } @if (config().highlight) {
+      <tiptap-button
+        icon="highlight"
+        [title]="t().highlight"
+        [active]="isActive('highlight')"
+        [disabled]="!canExecute('toggleHighlight')"
+        (onClick)="toggleHighlight()"
+      />
+      } @if (config().separator && (config().heading1 || config().heading2 ||
+      config().heading3)) {
+      <tiptap-separator />
+      } @if (config().heading1) {
+      <tiptap-button
+        icon="format_h1"
+        [title]="t().heading1"
+        variant="text"
+        [active]="isActive('heading', { level: 1 })"
+        (onClick)="toggleHeading(1)"
+      />
+      } @if (config().heading2) {
+      <tiptap-button
+        icon="format_h2"
+        [title]="t().heading2"
+        variant="text"
+        [active]="isActive('heading', { level: 2 })"
+        (onClick)="toggleHeading(2)"
+      />
+      } @if (config().heading3) {
+      <tiptap-button
+        icon="format_h3"
+        [title]="t().heading3"
+        variant="text"
+        [active]="isActive('heading', { level: 3 })"
+        (onClick)="toggleHeading(3)"
+      />
+      } @if (config().separator && (config().bulletList || config().orderedList
+      || config().blockquote)) {
+      <tiptap-separator />
+      } @if (config().bulletList) {
+      <tiptap-button
+        icon="format_list_bulleted"
+        [title]="t().bulletList"
+        [active]="isActive('bulletList')"
+        (onClick)="toggleBulletList()"
+      />
+      } @if (config().orderedList) {
+      <tiptap-button
+        icon="format_list_numbered"
+        [title]="t().orderedList"
+        [active]="isActive('orderedList')"
+        (onClick)="toggleOrderedList()"
+      />
+      } @if (config().blockquote) {
+      <tiptap-button
+        icon="format_quote"
+        [title]="t().blockquote"
+        [active]="isActive('blockquote')"
+        (onClick)="toggleBlockquote()"
+      />
+      } @if (config().separator && (config().alignLeft || config().alignCenter
+      || config().alignRight || config().alignJustify)) {
+      <tiptap-separator />
+      } @if (config().alignLeft) {
+      <tiptap-button
+        icon="format_align_left"
+        [title]="t().alignLeft"
+        [active]="isActive('textAlign', { textAlign: 'left' })"
+        (onClick)="setTextAlign('left')"
+      />
+      } @if (config().alignCenter) {
+      <tiptap-button
+        icon="format_align_center"
+        [title]="t().alignCenter"
+        [active]="isActive('textAlign', { textAlign: 'center' })"
+        (onClick)="setTextAlign('center')"
+      />
+      } @if (config().alignRight) {
+      <tiptap-button
+        icon="format_align_right"
+        [title]="t().alignRight"
+        [active]="isActive('textAlign', { textAlign: 'right' })"
+        (onClick)="setTextAlign('right')"
+      />
+      } @if (config().alignJustify) {
+      <tiptap-button
+        icon="format_align_justify"
+        [title]="t().alignJustify"
+        [active]="isActive('textAlign', { textAlign: 'justify' })"
+        (onClick)="setTextAlign('justify')"
+      />
+      } @if (config().separator && (config().link || config().horizontalRule)) {
+      <tiptap-separator />
+      } @if (config().link) {
+      <tiptap-button
+        icon="link"
+        [title]="t().link"
+        [active]="isActive('link')"
+        (onClick)="toggleLink()"
+      />
+      } @if (config().horizontalRule) {
+      <tiptap-button
+        icon="horizontal_rule"
+        [title]="t().horizontalRule"
+        (onClick)="insertHorizontalRule()"
+      />
+      } @if (config().table) {
+      <tiptap-button
+        icon="table_view"
+        [title]="t().table"
+        (onClick)="insertTable()"
+      />
+      } @if (config().separator && config().image) {
+      <tiptap-separator />
+      } @if (config().image) {
+      <tiptap-button
+        icon="image"
+        [title]="t().image"
+        (onClick)="insertImage()"
+      />
+      } @if (config().separator && (config().undo || config().redo)) {
+      <tiptap-separator />
+      } @if (config().undo) {
+      <tiptap-button
+        icon="undo"
+        [title]="t().undo"
+        [disabled]="!canExecute('undo')"
+        (onClick)="undo()"
+      />
+      } @if (config().redo) {
+      <tiptap-button
+        icon="redo"
+        [title]="t().redo"
+        [disabled]="!canExecute('redo')"
+        (onClick)="redo()"
+      />
+      } @if (config().separator && config().clear) {
+      <tiptap-separator />
+      } @if (config().clear) {
+      <tiptap-button
+        icon="delete"
+        [title]="t().clear"
+        (onClick)="clearContent()"
+      />
+      }
+    </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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapImageBubbleMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapToolbarComponent, 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 }]
-            }] } });
+            args: [{ selector: "tiptap-toolbar", standalone: true, imports: [TiptapButtonComponent, TiptapSeparatorComponent], template: `
+    <div class="tiptap-toolbar">
+      @if (config().bold) {
+      <tiptap-button
+        icon="format_bold"
+        [title]="t().bold"
+        [active]="isActive('bold')"
+        [disabled]="!canExecute('toggleBold')"
+        (onClick)="toggleBold()"
+      />
+      } @if (config().italic) {
+      <tiptap-button
+        icon="format_italic"
+        [title]="t().italic"
+        [active]="isActive('italic')"
+        [disabled]="!canExecute('toggleItalic')"
+        (onClick)="toggleItalic()"
+      />
+      } @if (config().underline) {
+      <tiptap-button
+        icon="format_underlined"
+        [title]="t().underline"
+        [active]="isActive('underline')"
+        [disabled]="!canExecute('toggleUnderline')"
+        (onClick)="toggleUnderline()"
+      />
+      } @if (config().strike) {
+      <tiptap-button
+        icon="strikethrough_s"
+        [title]="t().strike"
+        [active]="isActive('strike')"
+        [disabled]="!canExecute('toggleStrike')"
+        (onClick)="toggleStrike()"
+      />
+      } @if (config().code) {
+      <tiptap-button
+        icon="code"
+        [title]="t().code"
+        [active]="isActive('code')"
+        [disabled]="!canExecute('toggleCode')"
+        (onClick)="toggleCode()"
+      />
+      } @if (config().superscript) {
+      <tiptap-button
+        icon="superscript"
+        [title]="t().superscript"
+        [active]="isActive('superscript')"
+        [disabled]="!canExecute('toggleSuperscript')"
+        (onClick)="toggleSuperscript()"
+      />
+      } @if (config().subscript) {
+      <tiptap-button
+        icon="subscript"
+        [title]="t().subscript"
+        [active]="isActive('subscript')"
+        [disabled]="!canExecute('toggleSubscript')"
+        (onClick)="toggleSubscript()"
+      />
+      } @if (config().highlight) {
+      <tiptap-button
+        icon="highlight"
+        [title]="t().highlight"
+        [active]="isActive('highlight')"
+        [disabled]="!canExecute('toggleHighlight')"
+        (onClick)="toggleHighlight()"
+      />
+      } @if (config().separator && (config().heading1 || config().heading2 ||
+      config().heading3)) {
+      <tiptap-separator />
+      } @if (config().heading1) {
+      <tiptap-button
+        icon="format_h1"
+        [title]="t().heading1"
+        variant="text"
+        [active]="isActive('heading', { level: 1 })"
+        (onClick)="toggleHeading(1)"
+      />
+      } @if (config().heading2) {
+      <tiptap-button
+        icon="format_h2"
+        [title]="t().heading2"
+        variant="text"
+        [active]="isActive('heading', { level: 2 })"
+        (onClick)="toggleHeading(2)"
+      />
+      } @if (config().heading3) {
+      <tiptap-button
+        icon="format_h3"
+        [title]="t().heading3"
+        variant="text"
+        [active]="isActive('heading', { level: 3 })"
+        (onClick)="toggleHeading(3)"
+      />
+      } @if (config().separator && (config().bulletList || config().orderedList
+      || config().blockquote)) {
+      <tiptap-separator />
+      } @if (config().bulletList) {
+      <tiptap-button
+        icon="format_list_bulleted"
+        [title]="t().bulletList"
+        [active]="isActive('bulletList')"
+        (onClick)="toggleBulletList()"
+      />
+      } @if (config().orderedList) {
+      <tiptap-button
+        icon="format_list_numbered"
+        [title]="t().orderedList"
+        [active]="isActive('orderedList')"
+        (onClick)="toggleOrderedList()"
+      />
+      } @if (config().blockquote) {
+      <tiptap-button
+        icon="format_quote"
+        [title]="t().blockquote"
+        [active]="isActive('blockquote')"
+        (onClick)="toggleBlockquote()"
+      />
+      } @if (config().separator && (config().alignLeft || config().alignCenter
+      || config().alignRight || config().alignJustify)) {
+      <tiptap-separator />
+      } @if (config().alignLeft) {
+      <tiptap-button
+        icon="format_align_left"
+        [title]="t().alignLeft"
+        [active]="isActive('textAlign', { textAlign: 'left' })"
+        (onClick)="setTextAlign('left')"
+      />
+      } @if (config().alignCenter) {
+      <tiptap-button
+        icon="format_align_center"
+        [title]="t().alignCenter"
+        [active]="isActive('textAlign', { textAlign: 'center' })"
+        (onClick)="setTextAlign('center')"
+      />
+      } @if (config().alignRight) {
+      <tiptap-button
+        icon="format_align_right"
+        [title]="t().alignRight"
+        [active]="isActive('textAlign', { textAlign: 'right' })"
+        (onClick)="setTextAlign('right')"
+      />
+      } @if (config().alignJustify) {
+      <tiptap-button
+        icon="format_align_justify"
+        [title]="t().alignJustify"
+        [active]="isActive('textAlign', { textAlign: 'justify' })"
+        (onClick)="setTextAlign('justify')"
+      />
+      } @if (config().separator && (config().link || config().horizontalRule)) {
+      <tiptap-separator />
+      } @if (config().link) {
+      <tiptap-button
+        icon="link"
+        [title]="t().link"
+        [active]="isActive('link')"
+        (onClick)="toggleLink()"
+      />
+      } @if (config().horizontalRule) {
+      <tiptap-button
+        icon="horizontal_rule"
+        [title]="t().horizontalRule"
+        (onClick)="insertHorizontalRule()"
+      />
+      } @if (config().table) {
+      <tiptap-button
+        icon="table_view"
+        [title]="t().table"
+        (onClick)="insertTable()"
+      />
+      } @if (config().separator && config().image) {
+      <tiptap-separator />
+      } @if (config().image) {
+      <tiptap-button
+        icon="image"
+        [title]="t().image"
+        (onClick)="insertImage()"
+      />
+      } @if (config().separator && (config().undo || config().redo)) {
+      <tiptap-separator />
+      } @if (config().undo) {
+      <tiptap-button
+        icon="undo"
+        [title]="t().undo"
+        [disabled]="!canExecute('undo')"
+        (onClick)="undo()"
+      />
+      } @if (config().redo) {
+      <tiptap-button
+        icon="redo"
+        [title]="t().redo"
+        [disabled]="!canExecute('redo')"
+        (onClick)="redo()"
+      />
+      } @if (config().separator && config().clear) {
+      <tiptap-separator />
+      } @if (config().clear) {
+      <tiptap-button
+        icon="delete"
+        [title]="t().clear"
+        (onClick)="clearContent()"
+      />
+      }
+    </div>
+  `, 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"] }]
+        }], ctorParameters: () => [{ type: EditorCommandsService }] });
 
 const DEFAULT_SLASH_COMMANDS = [
     {
@@ -3448,54 +3958,400 @@ class TiptapSlashCommandsComponent {
             plugins: [keyboardPlugin, ...ed.view.state.plugins],
         }));
     }
-    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) {
+    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>
+  `, 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>
+  `, 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,
+                args: ["menuRef", { static: false }]
+            }] } });
+
+// Main component
+
+class TiptapImageUploadComponent {
+    constructor() {
+        // Inputs
+        this.config = input({
+            maxSize: 5, // 5MB par défaut
+            maxWidth: 1920, // largeur max par défaut
+            maxHeight: 1080, // hauteur max par défaut
+            allowedTypes: ["image/jpeg", "image/png", "image/gif", "image/webp"],
+            enableDragDrop: true,
+            showPreview: true,
+            multiple: false,
+            compressImages: true,
+            quality: 0.8,
+        });
+        // Outputs
+        this.imageSelected = output();
+        this.error = output();
+        // Signals internes
+        this.isDragOver = signal(false);
+        this.isUploading = signal(false);
+        this.uploadProgress = signal(0);
+        this.previewImage = signal(null);
+        this.previewInfo = signal("");
+        this.errorMessage = signal(null);
+        // Computed
+        this.acceptedTypes = computed(() => {
+            const types = this.config().allowedTypes || ["image/*"];
+            return types.join(",");
+        });
+    }
+    triggerFileInput() {
+        const input = document.querySelector('input[type="file"]');
+        if (input) {
+            input.click();
+        }
+    }
+    onFileSelected(event) {
+        const input = event.target;
+        const files = input.files;
+        if (files && files.length > 0) {
+            this.processFiles(Array.from(files));
+        }
+        // Reset input
+        input.value = "";
+    }
+    onDragOver(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.isDragOver.set(true);
+    }
+    onDrop(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.isDragOver.set(false);
+        const files = event.dataTransfer?.files;
+        if (files && files.length > 0) {
+            this.processFiles(Array.from(files));
+        }
+    }
+    onDragLeave(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.isDragOver.set(false);
+    }
+    processFiles(files) {
+        const config = this.config();
+        const maxSize = (config.maxSize || 5) * 1024 * 1024; // Convertir en bytes
+        const allowedTypes = config.allowedTypes || ["image/*"];
+        // Vérifier le nombre de fichiers
+        if (!config.multiple && files.length > 1) {
+            this.showError("Veuillez sélectionner une seule image");
+            return;
+        }
+        // Traiter chaque fichier
+        files.forEach((file) => {
+            // Vérifier le type
+            if (!this.isValidFileType(file, allowedTypes)) {
+                this.showError(`Type de fichier non supporté: ${file.name}`);
+                return;
+            }
+            // Vérifier la taille
+            if (file.size > maxSize) {
+                this.showError(`Fichier trop volumineux: ${file.name} (max ${config.maxSize}MB)`);
+                return;
+            }
+            // Traiter l'image avec compression si nécessaire
+            this.processImage(file);
+        });
+    }
+    isValidFileType(file, allowedTypes) {
+        if (allowedTypes.includes("image/*")) {
+            return file.type.startsWith("image/");
+        }
+        return allowedTypes.includes(file.type);
+    }
+    processImage(file) {
+        this.isUploading.set(true);
+        this.uploadProgress.set(10);
+        const config = this.config();
+        const originalSize = file.size;
+        // Créer un canvas pour la compression
+        const canvas = document.createElement("canvas");
+        const ctx = canvas.getContext("2d");
+        const img = new Image();
+        img.onload = () => {
+            this.uploadProgress.set(30);
+            // Vérifier les dimensions
+            const maxWidth = config.maxWidth || 1920;
+            const maxHeight = config.maxHeight || 1080;
+            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);
+            this.uploadProgress.set(70);
+            // Convertir en base64 avec compression
+            const quality = config.quality || 0.8;
+            const mimeType = file.type;
+            canvas.toBlob((blob) => {
+                this.uploadProgress.set(90);
+                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: originalSize,
+                            };
+                            // Afficher la prévisualisation si activée
+                            if (config.showPreview) {
+                                this.previewImage.set(base64);
+                                this.previewInfo.set(`${result.width}×${result.height} • ${this.formatFileSize(blob.size)}`);
+                            }
+                            // Émettre l'événement
+                            this.imageSelected.emit(result);
+                            this.clearError();
+                        }
+                        this.uploadProgress.set(100);
+                        setTimeout(() => {
+                            this.isUploading.set(false);
+                            this.uploadProgress.set(0);
+                        }, 500);
+                    };
+                    reader.readAsDataURL(blob);
+                }
+                else {
+                    this.showError("Erreur lors de la compression de l'image");
+                    this.isUploading.set(false);
+                    this.uploadProgress.set(0);
+                }
+            }, mimeType, quality);
+        };
+        img.onerror = () => {
+            this.showError("Erreur lors du chargement de l'image");
+            this.isUploading.set(false);
+            this.uploadProgress.set(0);
+        };
+        img.src = URL.createObjectURL(file);
+    }
+    formatFileSize(bytes) {
+        if (bytes === 0)
+            return "0 B";
+        const k = 1024;
+        const sizes = ["B", "KB", "MB", "GB"];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + " " + sizes[i];
+    }
+    showError(message) {
+        this.errorMessage.set(message);
+        this.error.emit(message);
+        this.isUploading.set(false);
+        this.uploadProgress.set(0);
+        // Auto-clear après 5 secondes
+        setTimeout(() => {
+            this.clearError();
+        }, 5000);
+    }
+    clearError() {
+        this.errorMessage.set(null);
+    }
+    clearPreview() {
+        this.previewImage.set(null);
+        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="slash-command-item"
-        [class.selected]="$index === selectedIndex()"
-        (click)="executeCommand(command)"
-        (mouseenter)="selectedIndex.set($index)"
+        class="drag-overlay"
+        (dragover)="onDragOver($event)"
+        (drop)="onDrop($event)"
+        (dragleave)="onDragLeave($event)"
       >
-        <div class="slash-command-icon">
-          <span class="material-symbols-outlined">{{ command.icon }}</span>
+        <div class="drag-content">
+          <span class="material-symbols-outlined">cloud_upload</span>
+          <p>Déposez votre image ici</p>
         </div>
-        <div class="slash-command-content">
-          <div class="slash-command-title">{{ command.title }}</div>
-          <div class="slash-command-description">{{ command.description }}</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: [".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"] }); }
+  `, 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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapSlashCommandsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapImageUploadComponent, decorators: [{
             type: Component,
-            args: [{ selector: "tiptap-slash-commands", standalone: true, template: `
-    <div #menuRef class="slash-commands-menu">
-      @for (command of filteredCommands(); track command.title) {
+            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="slash-command-item"
-        [class.selected]="$index === selectedIndex()"
-        (click)="executeCommand(command)"
-        (mouseenter)="selectedIndex.set($index)"
+        class="drag-overlay"
+        (dragover)="onDragOver($event)"
+        (drop)="onDrop($event)"
+        (dragleave)="onDragLeave($event)"
       >
-        <div class="slash-command-icon">
-          <span class="material-symbols-outlined">{{ command.icon }}</span>
+        <div class="drag-content">
+          <span class="material-symbols-outlined">cloud_upload</span>
+          <p>Déposez votre image ici</p>
         </div>
-        <div class="slash-command-content">
-          <div class="slash-command-title">{{ command.title }}</div>
-          <div class="slash-command-description">{{ command.description }}</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: [".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,
-                args: ["menuRef", { static: false }]
-            }] } });
+  `, 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"] }]
+        }] });
 
 class NoopValueAccessorDirective {
     writeValue(obj) { }
@@ -3547,8 +4403,10 @@ const DEFAULT_TOOLBAR_CONFIG = {
     link: true,
     image: true,
     horizontalRule: true,
+    table: true,
     undo: true,
     redo: true,
+    clear: false, // Désactivé par défaut (opt-in)
     separator: true,
 };
 // Configuration par défaut du bubble menu
@@ -3574,6 +4432,23 @@ const DEFAULT_IMAGE_BUBBLE_MENU_CONFIG = {
     deleteImage: true,
     separator: true,
 };
+// Configuration par défaut du menu de table
+const DEFAULT_TABLE_MENU_CONFIG = {
+    addRowBefore: true,
+    addRowAfter: true,
+    deleteRow: true,
+    addColumnBefore: true,
+    addColumnAfter: true,
+    deleteColumn: true,
+    toggleHeaderRow: true,
+    toggleHeaderColumn: true,
+    deleteTable: true,
+    separator: true,
+};
+const DEFAULT_CELL_MENU_CONFIG = {
+    mergeCells: true,
+    splitCell: true,
+};
 class AngularTiptapEditorComponent {
     constructor() {
         // Nouveaux inputs avec signal
@@ -3607,11 +4482,18 @@ class AngularTiptapEditorComponent {
         this.editorBlur = output();
         // ViewChild avec signal
         this.editorElement = viewChild.required("editorElement");
-        // Signals pour l'état interne
-        this.editor = signal(null);
-        this.characterCountData = signal(null);
-        this.isDragOver = signal(false);
-        this.editorFullyInitialized = signal(false);
+        // Signals privés pour l'état interne
+        this._editor = signal(null);
+        this._characterCount = signal(0);
+        this._wordCount = signal(0);
+        this._isDragOver = signal(false);
+        this._editorFullyInitialized = signal(false);
+        // Accès en lecture seule aux signaux
+        this.editor = this._editor.asReadonly();
+        this.characterCount = this._characterCount.asReadonly();
+        this.wordCount = this._wordCount.asReadonly();
+        this.isDragOver = this._isDragOver.asReadonly();
+        this.editorFullyInitialized = this._editorFullyInitialized.asReadonly();
         // Computed pour les états de l'éditeur
         this.isEditorReady = computed(() => this.editor() !== null);
         // Computed pour la configuration de la toolbar
@@ -3626,6 +4508,23 @@ class AngularTiptapEditorComponent {
         this.imageBubbleMenuConfig = computed(() => Object.keys(this.imageBubbleMenu()).length === 0
             ? DEFAULT_IMAGE_BUBBLE_MENU_CONFIG
             : { ...DEFAULT_IMAGE_BUBBLE_MENU_CONFIG, ...this.imageBubbleMenu() });
+        // Computed pour la configuration du bubble menu table
+        this.tableBubbleMenuConfig = computed(() => ({
+            addRowBefore: true,
+            addRowAfter: true,
+            deleteRow: true,
+            addColumnBefore: true,
+            addColumnAfter: true,
+            deleteColumn: true,
+            deleteTable: true,
+            toggleHeaderRow: true,
+            toggleHeaderColumn: true,
+        }));
+        // Computed pour la configuration du menu de cellules
+        this.cellBubbleMenuConfig = computed(() => ({
+            mergeCells: true,
+            splitCell: true,
+        }));
         // Computed pour la configuration de l'upload d'images
         this.imageUploadConfig = computed(() => ({
             maxSize: 5,
@@ -3646,6 +4545,7 @@ class AngularTiptapEditorComponent {
         this.ngControl = inject(NgControl, { self: true, optional: true });
         this.i18nService = inject(TiptapI18nService);
         this.imageService = inject(ImageService);
+        this.editorCommandsService = inject(EditorCommandsService);
         // Effet pour gérer le changement de langue
         effect(() => {
             const locale = this.locale();
@@ -3686,9 +4586,16 @@ class AngularTiptapEditorComponent {
             const currentEditor = this.editor();
             const isEditable = this.editable();
             if (currentEditor) {
-                currentEditor.setEditable(isEditable);
+                this.editorCommandsService.setEditable(currentEditor, isEditable);
             }
         });
+        // Effect pour la détection du survol des tables
+        effect(() => {
+            const currentEditor = this.editor();
+            if (!currentEditor)
+                return;
+            // Table hover detection supprimée car remplacée par le menu bubble
+        });
     }
     ngAfterViewInit() {
         // La vue est déjà complètement initialisée dans ngAfterViewInit
@@ -3701,7 +4608,7 @@ class AngularTiptapEditorComponent {
         if (currentEditor) {
             currentEditor.destroy();
         }
-        this.editorFullyInitialized.set(false);
+        this._editorFullyInitialized.set(false);
     }
     initEditor() {
         const extensions = [
@@ -3739,6 +4646,7 @@ class AngularTiptapEditorComponent {
                 uploadProgress: () => this.imageService.uploadProgress(),
                 uploadMessage: () => this.imageService.uploadMessage(),
             }),
+            TableExtension,
         ];
         // Ajouter l'extension Office Paste si activée
         if (this.enableOfficePaste()) {
@@ -3778,7 +4686,7 @@ class AngularTiptapEditorComponent {
                 // Marquer l'éditeur comme complètement initialisé après un court délai
                 // pour s'assurer que tous les plugins et extensions sont prêts
                 setTimeout(() => {
-                    this.editorFullyInitialized.set(true);
+                    this._editorFullyInitialized.set(true);
                 }, 100);
             },
             onFocus: ({ editor, event }) => {
@@ -3793,15 +4701,13 @@ class AngularTiptapEditorComponent {
             },
         });
         // Stocker la référence de l'éditeur immédiatement
-        this.editor.set(newEditor);
+        this._editor.set(newEditor);
     }
     updateCharacterCount(editor) {
         if (this.showCharacterCount() && editor.storage["characterCount"]) {
             const storage = editor.storage["characterCount"];
-            this.characterCountData.set({
-                characters: storage.characters(),
-                words: storage.words(),
-            });
+            this._characterCount.set(storage.characters());
+            this._wordCount.set(storage.words());
         }
     }
     // Méthodes pour l'upload d'images
@@ -3835,12 +4741,12 @@ class AngularTiptapEditorComponent {
     onDragOver(event) {
         event.preventDefault();
         event.stopPropagation();
-        this.isDragOver.set(true);
+        this._isDragOver.set(true);
     }
     onDrop(event) {
         event.preventDefault();
         event.stopPropagation();
-        this.isDragOver.set(false);
+        this._isDragOver.set(false);
         const files = event.dataTransfer?.files;
         if (files && files.length > 0) {
             const file = files[0];
@@ -3871,16 +4777,32 @@ class AngularTiptapEditorComponent {
         return this.editor()?.getText() || "";
     }
     setContent(content, emitUpdate = true) {
-        this.editor()?.commands.setContent(content, emitUpdate);
+        const editor = this.editor();
+        if (editor) {
+            this.editorCommandsService.setContent(editor, content, emitUpdate);
+        }
     }
     focus() {
-        this.editor()?.commands.focus();
+        const editor = this.editor();
+        if (editor) {
+            this.editorCommandsService.focus(editor);
+        }
     }
     blur() {
-        this.editor()?.commands.blur();
+        const editor = this.editor();
+        if (editor) {
+            this.editorCommandsService.blur(editor);
+        }
     }
     clearContent() {
-        this.editor()?.commands.clearContent();
+        const editor = this.editor();
+        if (editor) {
+            this.editorCommandsService.clearContent(editor);
+        }
+    }
+    // Méthode publique pour obtenir l'éditeur
+    getEditor() {
+        return this.editor();
     }
     setupFormControlSubscription() {
         const control = this.ngControl?.control;
@@ -3900,7 +4822,7 @@ class AngularTiptapEditorComponent {
     setDisabledState(isDisabled) {
         const currentEditor = this.editor();
         if (currentEditor) {
-            currentEditor.setEditable(!isDisabled);
+            this.editorCommandsService.setEditable(currentEditor, !isDisabled);
         }
     }
     onEditorClick(event) {
@@ -3975,19 +4897,40 @@ class AngularTiptapEditorComponent {
       ></tiptap-slash-commands>
       }
 
+      <!-- Table Menu -->
+      @if (editor()) {
+      <tiptap-table-bubble-menu
+        [editor]="editor()!"
+        [config]="tableBubbleMenuConfig()"
+        [style.display]="editorFullyInitialized() ? 'block' : 'none'"
+      ></tiptap-table-bubble-menu>
+      }
+
+      <!-- Cell Menu -->
+      @if (editor()) {
+      <tiptap-cell-bubble-menu
+        [editor]="editor()!"
+        [config]="cellBubbleMenuConfig()"
+        [style.display]="editorFullyInitialized() ? 'block' : 'none'"
+      ></tiptap-cell-bubble-menu>
+      }
+
+      <!-- Table Edit Button - Supprimé car remplacé par le menu bubble -->
+
       <!-- Compteur de caractères -->
-      @if (showCharacterCount() && characterCountData()) {
+      @if (showCharacterCount()) {
       <div class="character-count">
-        {{ characterCountData()?.characters }}
-        {{ i18nService.editor().characters }},
-        {{ characterCountData()?.words }} {{ i18nService.editor().words }} @if
-        (maxCharacters()) { /
+        {{ characterCount() }}
+        {{ i18nService.editor().character
+        }}{{ characterCount() > 1 ? "s" : "" }}, {{ wordCount() }}
+        {{ i18nService.editor().word }}{{ wordCount() > 1 ? "s" : "" }}
+        @if (maxCharacters()) { /
         {{ maxCharacters() }}
         }
       </div>
       }
     </div>
-  `, isInline: true, styles: [".tiptap-editor{border:2px solid #e2e8f0;border-radius:8px;background:#fff;box-shadow:0 2px 4px #0000001a;overflow:hidden;transition:border-color .2s ease}.tiptap-editor:focus-within{border-color:#3182ce;box-shadow:0 0 0 3px #3182ce1a}.tiptap-content{padding:16px;min-height:var(--editor-min-height, 200px);height:var(--editor-height, auto);max-height:var(--editor-max-height, none);overflow-y:var(--editor-overflow, visible);outline:none;position:relative}.tiptap-content.drag-over{background:#f0f8ff;border:2px dashed #3182ce}.character-count{padding:8px 16px;font-size:12px;color:#718096;text-align:right;border-top:1px solid #e2e8f0;background:#f8f9fa}.image-upload-container{position:relative;display:inline-block}:host ::ng-deep .ProseMirror{outline:none;line-height:1.6;color:#2d3748;min-height:100%;height:100%;word-wrap:break-word;overflow-wrap:break-word}:host ::ng-deep .ProseMirror h1{font-size:2em;font-weight:700;margin-top:0;margin-bottom:.5em}:host ::ng-deep .ProseMirror h2{font-size:1.5em;font-weight:700;margin-top:1em;margin-bottom:.5em}:host ::ng-deep .ProseMirror h3{font-size:1.25em;font-weight:700;margin-top:1em;margin-bottom:.5em}:host ::ng-deep .ProseMirror p{margin:.5em 0}:host ::ng-deep .ProseMirror ul,:host ::ng-deep .ProseMirror ol{padding-left:2em;margin:.5em 0}:host ::ng-deep .ProseMirror blockquote{border-left:4px solid #e2e8f0;margin:1em 0;font-style:italic;background:#f8f9fa;padding:.5em 1em;border-radius:0 4px 4px 0}:host ::ng-deep .ProseMirror code{background:#f1f5f9;padding:.2em .4em;border-radius:3px;font-family:Monaco,Consolas,monospace;font-size:.9em}:host ::ng-deep .ProseMirror pre{background:#1a202c;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;margin:1em 0}:host ::ng-deep .ProseMirror pre code{background:none;color:inherit;padding:0}:host ::ng-deep .ProseMirror p.is-editor-empty:first-child:before{content:attr(data-placeholder);color:#a0aec0;pointer-events:none;float:left;height:0}:host ::ng-deep .ProseMirror[contenteditable=false]{pointer-events:none}:host ::ng-deep .ProseMirror[contenteditable=false] img{cursor:default;pointer-events:none}:host ::ng-deep .ProseMirror[contenteditable=false] img:hover{transform:none;box-shadow:0 2px 8px #0000001a}:host ::ng-deep .ProseMirror[contenteditable=false] img.ProseMirror-selectednode{outline:none}:host ::ng-deep .ProseMirror img{position:relative;display:inline-block;max-width:100%;height:auto;cursor:pointer;transition:all .2s ease;border:2px solid transparent;border-radius:8px}:host ::ng-deep .ProseMirror img:hover{border-color:#e2e8f0;box-shadow:0 2px 4px #0000001a}:host ::ng-deep .ProseMirror img.ProseMirror-selectednode{border-color:#3182ce;box-shadow:0 0 0 3px #3182ce1a;transition:all .2s ease}:host ::ng-deep .ProseMirror .tiptap-image{max-width:100%;height:auto;border-radius:16px;box-shadow:0 4px 20px #00000014;margin:.5em 0;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);display:block;filter:brightness(1) contrast(1)}:host ::ng-deep .ProseMirror .tiptap-image:hover{box-shadow:0 8px 30px #0000001f;filter:brightness(1.02) contrast(1.02)}:host ::ng-deep .ProseMirror .tiptap-image.ProseMirror-selectednode{outline:2px solid #6366f1;outline-offset:2px;border-radius:16px;box-shadow:0 0 0 4px #6366f11a}:host ::ng-deep .image-container{margin:.5em 0;text-align:center;border-radius:16px;overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1)}:host ::ng-deep .image-container.image-align-left{text-align:left}:host ::ng-deep .image-container.image-align-center{text-align:center}:host ::ng-deep .image-container.image-align-right{text-align:right}:host ::ng-deep .image-container img{display:inline-block;max-width:100%;height:auto;border-radius:16px}:host ::ng-deep .resizable-image-container{position:relative;display:inline-block;margin:.5em 0}:host ::ng-deep .resize-controls{position:absolute;inset:0;pointer-events:none;z-index:1000}:host ::ng-deep .resize-handle{position:absolute;width:12px;height:12px;background:#3b82f6;border:2px solid white;border-radius:50%;pointer-events:all;cursor:pointer;z-index:1001;transition:all .15s ease;box-shadow:0 2px 6px #0003}:host ::ng-deep .resize-handle:hover{background:#2563eb;box-shadow:0 3px 8px #0000004d}:host ::ng-deep .resize-handle:active{background:#1d4ed8}:host ::ng-deep .resize-handle-n:hover,:host ::ng-deep .resize-handle-s:hover{transform:translate(-50%) scale(1.2)}:host ::ng-deep .resize-handle-w:hover,:host ::ng-deep .resize-handle-e:hover{transform:translateY(-50%) scale(1.2)}:host ::ng-deep .resize-handle-n:active,:host ::ng-deep .resize-handle-s:active{transform:translate(-50%) scale(.9)}:host ::ng-deep .resize-handle-w:active,:host ::ng-deep .resize-handle-e:active{transform:translateY(-50%) scale(.9)}:host ::ng-deep .resize-handle-nw:hover,:host ::ng-deep .resize-handle-ne:hover,:host ::ng-deep .resize-handle-sw:hover,:host ::ng-deep .resize-handle-se:hover{transform:scale(1.2)}:host ::ng-deep .resize-handle-nw:active,:host ::ng-deep .resize-handle-ne:active,:host ::ng-deep .resize-handle-sw:active,:host ::ng-deep .resize-handle-se:active{transform:scale(.9)}:host ::ng-deep .resize-handle-nw{top:0;left:-6px;cursor:nw-resize}:host ::ng-deep .resize-handle-n{top:0;left:50%;transform:translate(-50%);cursor:n-resize}:host ::ng-deep .resize-handle-ne{top:0;right:-6px;cursor:ne-resize}:host ::ng-deep .resize-handle-w{top:50%;left:-6px;transform:translateY(-50%);cursor:w-resize}:host ::ng-deep .resize-handle-e{top:50%;right:-6px;transform:translateY(-50%);cursor:e-resize}:host ::ng-deep .resize-handle-sw{bottom:0;left:-6px;cursor:sw-resize}:host ::ng-deep .resize-handle-s{bottom:0;left:50%;transform:translate(-50%);cursor:s-resize}:host ::ng-deep .resize-handle-se{bottom:0;right:-6px;cursor:se-resize}:host ::ng-deep body.resizing{-webkit-user-select:none;user-select:none;cursor:crosshair}:host ::ng-deep body.resizing .ProseMirror{pointer-events:none}:host ::ng-deep body.resizing .ProseMirror .tiptap-image{pointer-events:none}:host ::ng-deep .image-size-info{position:absolute;bottom:-20px;left:50%;transform:translate(-50%);background:#000c;color:#fff;padding:2px 6px;border-radius:3px;font-size:11px;white-space:nowrap;opacity:0;transition:opacity .2s ease}:host ::ng-deep .image-container:hover .image-size-info{opacity:1}\n"], dependencies: [{ kind: "component", type: TiptapToolbarComponent, selector: "tiptap-toolbar", inputs: ["editor", "config"], outputs: ["imageUploaded", "imageError"] }, { kind: "component", type: TiptapImageUploadComponent, selector: "tiptap-image-upload", inputs: ["config"], outputs: ["imageSelected", "error"] }, { kind: "component", type: TiptapBubbleMenuComponent, selector: "tiptap-bubble-menu", inputs: ["editor", "config"] }, { kind: "component", type: TiptapImageBubbleMenuComponent, selector: "tiptap-image-bubble-menu", inputs: ["editor", "config"] }, { kind: "component", type: TiptapSlashCommandsComponent, selector: "tiptap-slash-commands", inputs: ["editor", "config"], outputs: ["imageUploadRequested"] }] }); }
+  `, isInline: true, styles: [".tiptap-editor{border:2px solid #e2e8f0;border-radius:8px;background:#fff;overflow:hidden;transition:border-color .2s ease}.tiptap-editor:focus-within{border-color:#3182ce}.tiptap-content{padding:16px;min-height:var(--editor-min-height, 200px);height:var(--editor-height, auto);max-height:var(--editor-max-height, none);overflow-y:var(--editor-overflow, visible);outline:none;position:relative}.tiptap-content.drag-over{background:#f0f8ff;border:2px dashed #3182ce}.character-count{padding:8px 16px;font-size:12px;color:#718096;text-align:right;border-top:1px solid #e2e8f0;background:#f8f9fa}.image-upload-container{position:relative;display:inline-block}:host ::ng-deep .ProseMirror{outline:none;line-height:1.6;color:#2d3748;min-height:100%;height:100%;word-wrap:break-word;overflow-wrap:break-word}:host ::ng-deep .ProseMirror h1{font-size:2em;font-weight:700;margin-top:0;margin-bottom:.5em}:host ::ng-deep .ProseMirror h2{font-size:1.5em;font-weight:700;margin-top:1em;margin-bottom:.5em}:host ::ng-deep .ProseMirror h3{font-size:1.25em;font-weight:700;margin-top:1em;margin-bottom:.5em}:host ::ng-deep .ProseMirror p{margin:.5em 0}:host ::ng-deep .ProseMirror ul,:host ::ng-deep .ProseMirror ol{padding-left:2em;margin:.5em 0}:host ::ng-deep .ProseMirror blockquote{border-left:4px solid #e2e8f0;margin:1em 0;font-style:italic;background:#f8f9fa;padding:.5em 1em;border-radius:0 4px 4px 0}:host ::ng-deep .ProseMirror code{background:#f1f5f9;padding:.2em .4em;border-radius:3px;font-family:Monaco,Consolas,monospace;font-size:.9em}:host ::ng-deep .ProseMirror pre{background:#1a202c;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;margin:1em 0}:host ::ng-deep .ProseMirror pre code{background:none;color:inherit;padding:0}:host ::ng-deep .ProseMirror p.is-editor-empty:first-child:before{content:attr(data-placeholder);color:#a0aec0;pointer-events:none;float:left;height:0}:host ::ng-deep .ProseMirror[contenteditable=false]{pointer-events:none}:host ::ng-deep .ProseMirror[contenteditable=false] img{cursor:default;pointer-events:none}:host ::ng-deep .ProseMirror[contenteditable=false] img:hover{transform:none;box-shadow:0 2px 8px #0000001a}:host ::ng-deep .ProseMirror[contenteditable=false] img.ProseMirror-selectednode{outline:none}:host ::ng-deep .ProseMirror img{position:relative;display:inline-block;max-width:100%;height:auto;cursor:pointer;transition:all .2s ease;border:2px solid transparent;border-radius:8px}:host ::ng-deep .ProseMirror img:hover{border-color:#e2e8f0;box-shadow:0 2px 4px #0000001a}:host ::ng-deep .ProseMirror img.ProseMirror-selectednode{border-color:#3182ce;box-shadow:0 0 0 3px #3182ce1a;transition:all .2s ease}:host ::ng-deep .ProseMirror .tiptap-image{max-width:100%;height:auto;border-radius:16px;box-shadow:0 4px 20px #00000014;margin:.5em 0;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);display:block;filter:brightness(1) contrast(1)}:host ::ng-deep .ProseMirror .tiptap-image:hover{box-shadow:0 8px 30px #0000001f;filter:brightness(1.02) contrast(1.02)}:host ::ng-deep .ProseMirror .tiptap-image.ProseMirror-selectednode{outline:2px solid #6366f1;outline-offset:2px;border-radius:16px;box-shadow:0 0 0 4px #6366f11a}:host ::ng-deep .image-container{margin:.5em 0;text-align:center;border-radius:16px;overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1)}:host ::ng-deep .image-container.image-align-left{text-align:left}:host ::ng-deep .image-container.image-align-center{text-align:center}:host ::ng-deep .image-container.image-align-right{text-align:right}:host ::ng-deep .image-container img{display:inline-block;max-width:100%;height:auto;border-radius:16px}:host ::ng-deep .resizable-image-container{position:relative;display:inline-block;margin:.5em 0}:host ::ng-deep .resize-controls{position:absolute;inset:0;pointer-events:none;z-index:1000}:host ::ng-deep .resize-handle{position:absolute;width:12px;height:12px;background:#3b82f6;border:2px solid white;border-radius:50%;pointer-events:all;cursor:pointer;z-index:1001;transition:all .15s ease;box-shadow:0 2px 6px #0003}:host ::ng-deep .resize-handle:hover{background:#2563eb;box-shadow:0 3px 8px #0000004d}:host ::ng-deep .resize-handle:active{background:#1d4ed8}:host ::ng-deep .resize-handle-n:hover,:host ::ng-deep .resize-handle-s:hover{transform:translate(-50%) scale(1.2)}:host ::ng-deep .resize-handle-w:hover,:host ::ng-deep .resize-handle-e:hover{transform:translateY(-50%) scale(1.2)}:host ::ng-deep .resize-handle-n:active,:host ::ng-deep .resize-handle-s:active{transform:translate(-50%) scale(.9)}:host ::ng-deep .resize-handle-w:active,:host ::ng-deep .resize-handle-e:active{transform:translateY(-50%) scale(.9)}:host ::ng-deep .resize-handle-nw:hover,:host ::ng-deep .resize-handle-ne:hover,:host ::ng-deep .resize-handle-sw:hover,:host ::ng-deep .resize-handle-se:hover{transform:scale(1.2)}:host ::ng-deep .resize-handle-nw:active,:host ::ng-deep .resize-handle-ne:active,:host ::ng-deep .resize-handle-sw:active,:host ::ng-deep .resize-handle-se:active{transform:scale(.9)}:host ::ng-deep .resize-handle-nw{top:0;left:-6px;cursor:nw-resize}:host ::ng-deep .resize-handle-n{top:0;left:50%;transform:translate(-50%);cursor:n-resize}:host ::ng-deep .resize-handle-ne{top:0;right:-6px;cursor:ne-resize}:host ::ng-deep .resize-handle-w{top:50%;left:-6px;transform:translateY(-50%);cursor:w-resize}:host ::ng-deep .resize-handle-e{top:50%;right:-6px;transform:translateY(-50%);cursor:e-resize}:host ::ng-deep .resize-handle-sw{bottom:0;left:-6px;cursor:sw-resize}:host ::ng-deep .resize-handle-s{bottom:0;left:50%;transform:translate(-50%);cursor:s-resize}:host ::ng-deep .resize-handle-se{bottom:0;right:-6px;cursor:se-resize}:host ::ng-deep body.resizing{-webkit-user-select:none;user-select:none;cursor:crosshair}:host ::ng-deep body.resizing .ProseMirror{pointer-events:none}:host ::ng-deep body.resizing .ProseMirror .tiptap-image{pointer-events:none}:host ::ng-deep .image-size-info{position:absolute;bottom:-20px;left:50%;transform:translate(-50%);background:#000c;color:#fff;padding:2px 6px;border-radius:3px;font-size:11px;white-space:nowrap;opacity:0;transition:opacity .2s ease}:host ::ng-deep .image-container:hover .image-size-info{opacity:1}:host ::ng-deep .ProseMirror table{border-collapse:separate;border-spacing:0;margin:0;table-layout:fixed;width:100%;border-radius:8px;overflow:hidden}:host ::ng-deep .ProseMirror table td,:host ::ng-deep .ProseMirror table th{border:none;border-right:1px solid #e2e8f0;border-bottom:1px solid #e2e8f0;box-sizing:border-box;min-width:1em;padding:8px 12px;position:relative;vertical-align:top;background:#fff}:host ::ng-deep .ProseMirror table td:first-child,:host ::ng-deep .ProseMirror table th:first-child{border-left:1px solid #e2e8f0}:host ::ng-deep .ProseMirror table tr:first-child td,:host ::ng-deep .ProseMirror table tr:first-child th{border-top:1px solid #e2e8f0}:host ::ng-deep .ProseMirror table tr:first-child th:first-child{border-top-left-radius:8px}:host ::ng-deep .ProseMirror table tr:first-child th:last-child{border-top-right-radius:8px}:host ::ng-deep .ProseMirror table tr:last-child td:first-child{border-bottom-left-radius:8px}:host ::ng-deep .ProseMirror table tr:last-child td:last-child{border-bottom-right-radius:8px}:host ::ng-deep .ProseMirror table th{background:#f8f9fa;font-weight:600;color:#374151}:host ::ng-deep .ProseMirror table .selectedCell:after{background:#c8c8ff66;content:\"\";inset:0;pointer-events:none;position:absolute;z-index:2}:host ::ng-deep .ProseMirror table .column-resize-handle{position:absolute;right:-2px;top:0;bottom:0;width:4px;background-color:#6366f1;opacity:0;transition:opacity .2s ease}:host ::ng-deep .ProseMirror table:hover .column-resize-handle{opacity:1}:host ::ng-deep .ProseMirror table .column-resize-handle:hover{background-color:#4f46e5}:host ::ng-deep .ProseMirror .tableWrapper{overflow-x:auto;margin:1em 0;border-radius:8px}:host ::ng-deep .ProseMirror .tableWrapper table{margin:0;border-radius:8px;min-width:600px;overflow:hidden}:host ::ng-deep .ProseMirror table p{margin:0}:host ::ng-deep .ProseMirror table .selectedCell{background-color:#6366f11a}:host ::ng-deep .ProseMirror table th{background-color:#f8f9fa;font-weight:600;color:#374151;text-align:left}:host ::ng-deep .ProseMirror table tbody tr:nth-child(2n){background-color:#fafbfc}:host ::ng-deep .ProseMirror table tbody tr:hover{background-color:#f1f5f9}\n"], dependencies: [{ kind: "component", type: TiptapToolbarComponent, selector: "tiptap-toolbar", inputs: ["editor", "config"], outputs: ["imageUploaded", "imageError"] }, { kind: "component", type: TiptapImageUploadComponent, selector: "tiptap-image-upload", inputs: ["config"], outputs: ["imageSelected", "error"] }, { kind: "component", type: TiptapBubbleMenuComponent, selector: "tiptap-bubble-menu", inputs: ["editor", "config"] }, { kind: "component", type: TiptapImageBubbleMenuComponent, selector: "tiptap-image-bubble-menu", inputs: ["editor", "config"] }, { kind: "component", type: TiptapTableBubbleMenuComponent, selector: "tiptap-table-bubble-menu", inputs: ["editor", "config"] }, { kind: "component", type: TiptapCellBubbleMenuComponent, selector: "tiptap-cell-bubble-menu", inputs: ["editor", "config"] }, { kind: "component", type: TiptapSlashCommandsComponent, selector: "tiptap-slash-commands", inputs: ["editor", "config"], outputs: ["imageUploadRequested"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: AngularTiptapEditorComponent, decorators: [{
             type: Component,
@@ -3996,6 +4939,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
                         TiptapImageUploadComponent,
                         TiptapBubbleMenuComponent,
                         TiptapImageBubbleMenuComponent,
+                        TiptapTableBubbleMenuComponent,
+                        TiptapCellBubbleMenuComponent,
                         TiptapSlashCommandsComponent,
                     ], template: `
     <div class="tiptap-editor">
@@ -4050,21 +4995,57 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
       ></tiptap-slash-commands>
       }
 
+      <!-- Table Menu -->
+      @if (editor()) {
+      <tiptap-table-bubble-menu
+        [editor]="editor()!"
+        [config]="tableBubbleMenuConfig()"
+        [style.display]="editorFullyInitialized() ? 'block' : 'none'"
+      ></tiptap-table-bubble-menu>
+      }
+
+      <!-- Cell Menu -->
+      @if (editor()) {
+      <tiptap-cell-bubble-menu
+        [editor]="editor()!"
+        [config]="cellBubbleMenuConfig()"
+        [style.display]="editorFullyInitialized() ? 'block' : 'none'"
+      ></tiptap-cell-bubble-menu>
+      }
+
+      <!-- Table Edit Button - Supprimé car remplacé par le menu bubble -->
+
       <!-- Compteur de caractères -->
-      @if (showCharacterCount() && characterCountData()) {
+      @if (showCharacterCount()) {
       <div class="character-count">
-        {{ characterCountData()?.characters }}
-        {{ i18nService.editor().characters }},
-        {{ characterCountData()?.words }} {{ i18nService.editor().words }} @if
-        (maxCharacters()) { /
+        {{ characterCount() }}
+        {{ i18nService.editor().character
+        }}{{ characterCount() > 1 ? "s" : "" }}, {{ wordCount() }}
+        {{ i18nService.editor().word }}{{ wordCount() > 1 ? "s" : "" }}
+        @if (maxCharacters()) { /
         {{ maxCharacters() }}
         }
       </div>
       }
     </div>
-  `, styles: [".tiptap-editor{border:2px solid #e2e8f0;border-radius:8px;background:#fff;box-shadow:0 2px 4px #0000001a;overflow:hidden;transition:border-color .2s ease}.tiptap-editor:focus-within{border-color:#3182ce;box-shadow:0 0 0 3px #3182ce1a}.tiptap-content{padding:16px;min-height:var(--editor-min-height, 200px);height:var(--editor-height, auto);max-height:var(--editor-max-height, none);overflow-y:var(--editor-overflow, visible);outline:none;position:relative}.tiptap-content.drag-over{background:#f0f8ff;border:2px dashed #3182ce}.character-count{padding:8px 16px;font-size:12px;color:#718096;text-align:right;border-top:1px solid #e2e8f0;background:#f8f9fa}.image-upload-container{position:relative;display:inline-block}:host ::ng-deep .ProseMirror{outline:none;line-height:1.6;color:#2d3748;min-height:100%;height:100%;word-wrap:break-word;overflow-wrap:break-word}:host ::ng-deep .ProseMirror h1{font-size:2em;font-weight:700;margin-top:0;margin-bottom:.5em}:host ::ng-deep .ProseMirror h2{font-size:1.5em;font-weight:700;margin-top:1em;margin-bottom:.5em}:host ::ng-deep .ProseMirror h3{font-size:1.25em;font-weight:700;margin-top:1em;margin-bottom:.5em}:host ::ng-deep .ProseMirror p{margin:.5em 0}:host ::ng-deep .ProseMirror ul,:host ::ng-deep .ProseMirror ol{padding-left:2em;margin:.5em 0}:host ::ng-deep .ProseMirror blockquote{border-left:4px solid #e2e8f0;margin:1em 0;font-style:italic;background:#f8f9fa;padding:.5em 1em;border-radius:0 4px 4px 0}:host ::ng-deep .ProseMirror code{background:#f1f5f9;padding:.2em .4em;border-radius:3px;font-family:Monaco,Consolas,monospace;font-size:.9em}:host ::ng-deep .ProseMirror pre{background:#1a202c;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;margin:1em 0}:host ::ng-deep .ProseMirror pre code{background:none;color:inherit;padding:0}:host ::ng-deep .ProseMirror p.is-editor-empty:first-child:before{content:attr(data-placeholder);color:#a0aec0;pointer-events:none;float:left;height:0}:host ::ng-deep .ProseMirror[contenteditable=false]{pointer-events:none}:host ::ng-deep .ProseMirror[contenteditable=false] img{cursor:default;pointer-events:none}:host ::ng-deep .ProseMirror[contenteditable=false] img:hover{transform:none;box-shadow:0 2px 8px #0000001a}:host ::ng-deep .ProseMirror[contenteditable=false] img.ProseMirror-selectednode{outline:none}:host ::ng-deep .ProseMirror img{position:relative;display:inline-block;max-width:100%;height:auto;cursor:pointer;transition:all .2s ease;border:2px solid transparent;border-radius:8px}:host ::ng-deep .ProseMirror img:hover{border-color:#e2e8f0;box-shadow:0 2px 4px #0000001a}:host ::ng-deep .ProseMirror img.ProseMirror-selectednode{border-color:#3182ce;box-shadow:0 0 0 3px #3182ce1a;transition:all .2s ease}:host ::ng-deep .ProseMirror .tiptap-image{max-width:100%;height:auto;border-radius:16px;box-shadow:0 4px 20px #00000014;margin:.5em 0;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);display:block;filter:brightness(1) contrast(1)}:host ::ng-deep .ProseMirror .tiptap-image:hover{box-shadow:0 8px 30px #0000001f;filter:brightness(1.02) contrast(1.02)}:host ::ng-deep .ProseMirror .tiptap-image.ProseMirror-selectednode{outline:2px solid #6366f1;outline-offset:2px;border-radius:16px;box-shadow:0 0 0 4px #6366f11a}:host ::ng-deep .image-container{margin:.5em 0;text-align:center;border-radius:16px;overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1)}:host ::ng-deep .image-container.image-align-left{text-align:left}:host ::ng-deep .image-container.image-align-center{text-align:center}:host ::ng-deep .image-container.image-align-right{text-align:right}:host ::ng-deep .image-container img{display:inline-block;max-width:100%;height:auto;border-radius:16px}:host ::ng-deep .resizable-image-container{position:relative;display:inline-block;margin:.5em 0}:host ::ng-deep .resize-controls{position:absolute;inset:0;pointer-events:none;z-index:1000}:host ::ng-deep .resize-handle{position:absolute;width:12px;height:12px;background:#3b82f6;border:2px solid white;border-radius:50%;pointer-events:all;cursor:pointer;z-index:1001;transition:all .15s ease;box-shadow:0 2px 6px #0003}:host ::ng-deep .resize-handle:hover{background:#2563eb;box-shadow:0 3px 8px #0000004d}:host ::ng-deep .resize-handle:active{background:#1d4ed8}:host ::ng-deep .resize-handle-n:hover,:host ::ng-deep .resize-handle-s:hover{transform:translate(-50%) scale(1.2)}:host ::ng-deep .resize-handle-w:hover,:host ::ng-deep .resize-handle-e:hover{transform:translateY(-50%) scale(1.2)}:host ::ng-deep .resize-handle-n:active,:host ::ng-deep .resize-handle-s:active{transform:translate(-50%) scale(.9)}:host ::ng-deep .resize-handle-w:active,:host ::ng-deep .resize-handle-e:active{transform:translateY(-50%) scale(.9)}:host ::ng-deep .resize-handle-nw:hover,:host ::ng-deep .resize-handle-ne:hover,:host ::ng-deep .resize-handle-sw:hover,:host ::ng-deep .resize-handle-se:hover{transform:scale(1.2)}:host ::ng-deep .resize-handle-nw:active,:host ::ng-deep .resize-handle-ne:active,:host ::ng-deep .resize-handle-sw:active,:host ::ng-deep .resize-handle-se:active{transform:scale(.9)}:host ::ng-deep .resize-handle-nw{top:0;left:-6px;cursor:nw-resize}:host ::ng-deep .resize-handle-n{top:0;left:50%;transform:translate(-50%);cursor:n-resize}:host ::ng-deep .resize-handle-ne{top:0;right:-6px;cursor:ne-resize}:host ::ng-deep .resize-handle-w{top:50%;left:-6px;transform:translateY(-50%);cursor:w-resize}:host ::ng-deep .resize-handle-e{top:50%;right:-6px;transform:translateY(-50%);cursor:e-resize}:host ::ng-deep .resize-handle-sw{bottom:0;left:-6px;cursor:sw-resize}:host ::ng-deep .resize-handle-s{bottom:0;left:50%;transform:translate(-50%);cursor:s-resize}:host ::ng-deep .resize-handle-se{bottom:0;right:-6px;cursor:se-resize}:host ::ng-deep body.resizing{-webkit-user-select:none;user-select:none;cursor:crosshair}:host ::ng-deep body.resizing .ProseMirror{pointer-events:none}:host ::ng-deep body.resizing .ProseMirror .tiptap-image{pointer-events:none}:host ::ng-deep .image-size-info{position:absolute;bottom:-20px;left:50%;transform:translate(-50%);background:#000c;color:#fff;padding:2px 6px;border-radius:3px;font-size:11px;white-space:nowrap;opacity:0;transition:opacity .2s ease}:host ::ng-deep .image-container:hover .image-size-info{opacity:1}\n"] }]
+  `, styles: [".tiptap-editor{border:2px solid #e2e8f0;border-radius:8px;background:#fff;overflow:hidden;transition:border-color .2s ease}.tiptap-editor:focus-within{border-color:#3182ce}.tiptap-content{padding:16px;min-height:var(--editor-min-height, 200px);height:var(--editor-height, auto);max-height:var(--editor-max-height, none);overflow-y:var(--editor-overflow, visible);outline:none;position:relative}.tiptap-content.drag-over{background:#f0f8ff;border:2px dashed #3182ce}.character-count{padding:8px 16px;font-size:12px;color:#718096;text-align:right;border-top:1px solid #e2e8f0;background:#f8f9fa}.image-upload-container{position:relative;display:inline-block}:host ::ng-deep .ProseMirror{outline:none;line-height:1.6;color:#2d3748;min-height:100%;height:100%;word-wrap:break-word;overflow-wrap:break-word}:host ::ng-deep .ProseMirror h1{font-size:2em;font-weight:700;margin-top:0;margin-bottom:.5em}:host ::ng-deep .ProseMirror h2{font-size:1.5em;font-weight:700;margin-top:1em;margin-bottom:.5em}:host ::ng-deep .ProseMirror h3{font-size:1.25em;font-weight:700;margin-top:1em;margin-bottom:.5em}:host ::ng-deep .ProseMirror p{margin:.5em 0}:host ::ng-deep .ProseMirror ul,:host ::ng-deep .ProseMirror ol{padding-left:2em;margin:.5em 0}:host ::ng-deep .ProseMirror blockquote{border-left:4px solid #e2e8f0;margin:1em 0;font-style:italic;background:#f8f9fa;padding:.5em 1em;border-radius:0 4px 4px 0}:host ::ng-deep .ProseMirror code{background:#f1f5f9;padding:.2em .4em;border-radius:3px;font-family:Monaco,Consolas,monospace;font-size:.9em}:host ::ng-deep .ProseMirror pre{background:#1a202c;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;margin:1em 0}:host ::ng-deep .ProseMirror pre code{background:none;color:inherit;padding:0}:host ::ng-deep .ProseMirror p.is-editor-empty:first-child:before{content:attr(data-placeholder);color:#a0aec0;pointer-events:none;float:left;height:0}:host ::ng-deep .ProseMirror[contenteditable=false]{pointer-events:none}:host ::ng-deep .ProseMirror[contenteditable=false] img{cursor:default;pointer-events:none}:host ::ng-deep .ProseMirror[contenteditable=false] img:hover{transform:none;box-shadow:0 2px 8px #0000001a}:host ::ng-deep .ProseMirror[contenteditable=false] img.ProseMirror-selectednode{outline:none}:host ::ng-deep .ProseMirror img{position:relative;display:inline-block;max-width:100%;height:auto;cursor:pointer;transition:all .2s ease;border:2px solid transparent;border-radius:8px}:host ::ng-deep .ProseMirror img:hover{border-color:#e2e8f0;box-shadow:0 2px 4px #0000001a}:host ::ng-deep .ProseMirror img.ProseMirror-selectednode{border-color:#3182ce;box-shadow:0 0 0 3px #3182ce1a;transition:all .2s ease}:host ::ng-deep .ProseMirror .tiptap-image{max-width:100%;height:auto;border-radius:16px;box-shadow:0 4px 20px #00000014;margin:.5em 0;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);display:block;filter:brightness(1) contrast(1)}:host ::ng-deep .ProseMirror .tiptap-image:hover{box-shadow:0 8px 30px #0000001f;filter:brightness(1.02) contrast(1.02)}:host ::ng-deep .ProseMirror .tiptap-image.ProseMirror-selectednode{outline:2px solid #6366f1;outline-offset:2px;border-radius:16px;box-shadow:0 0 0 4px #6366f11a}:host ::ng-deep .image-container{margin:.5em 0;text-align:center;border-radius:16px;overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1)}:host ::ng-deep .image-container.image-align-left{text-align:left}:host ::ng-deep .image-container.image-align-center{text-align:center}:host ::ng-deep .image-container.image-align-right{text-align:right}:host ::ng-deep .image-container img{display:inline-block;max-width:100%;height:auto;border-radius:16px}:host ::ng-deep .resizable-image-container{position:relative;display:inline-block;margin:.5em 0}:host ::ng-deep .resize-controls{position:absolute;inset:0;pointer-events:none;z-index:1000}:host ::ng-deep .resize-handle{position:absolute;width:12px;height:12px;background:#3b82f6;border:2px solid white;border-radius:50%;pointer-events:all;cursor:pointer;z-index:1001;transition:all .15s ease;box-shadow:0 2px 6px #0003}:host ::ng-deep .resize-handle:hover{background:#2563eb;box-shadow:0 3px 8px #0000004d}:host ::ng-deep .resize-handle:active{background:#1d4ed8}:host ::ng-deep .resize-handle-n:hover,:host ::ng-deep .resize-handle-s:hover{transform:translate(-50%) scale(1.2)}:host ::ng-deep .resize-handle-w:hover,:host ::ng-deep .resize-handle-e:hover{transform:translateY(-50%) scale(1.2)}:host ::ng-deep .resize-handle-n:active,:host ::ng-deep .resize-handle-s:active{transform:translate(-50%) scale(.9)}:host ::ng-deep .resize-handle-w:active,:host ::ng-deep .resize-handle-e:active{transform:translateY(-50%) scale(.9)}:host ::ng-deep .resize-handle-nw:hover,:host ::ng-deep .resize-handle-ne:hover,:host ::ng-deep .resize-handle-sw:hover,:host ::ng-deep .resize-handle-se:hover{transform:scale(1.2)}:host ::ng-deep .resize-handle-nw:active,:host ::ng-deep .resize-handle-ne:active,:host ::ng-deep .resize-handle-sw:active,:host ::ng-deep .resize-handle-se:active{transform:scale(.9)}:host ::ng-deep .resize-handle-nw{top:0;left:-6px;cursor:nw-resize}:host ::ng-deep .resize-handle-n{top:0;left:50%;transform:translate(-50%);cursor:n-resize}:host ::ng-deep .resize-handle-ne{top:0;right:-6px;cursor:ne-resize}:host ::ng-deep .resize-handle-w{top:50%;left:-6px;transform:translateY(-50%);cursor:w-resize}:host ::ng-deep .resize-handle-e{top:50%;right:-6px;transform:translateY(-50%);cursor:e-resize}:host ::ng-deep .resize-handle-sw{bottom:0;left:-6px;cursor:sw-resize}:host ::ng-deep .resize-handle-s{bottom:0;left:50%;transform:translate(-50%);cursor:s-resize}:host ::ng-deep .resize-handle-se{bottom:0;right:-6px;cursor:se-resize}:host ::ng-deep body.resizing{-webkit-user-select:none;user-select:none;cursor:crosshair}:host ::ng-deep body.resizing .ProseMirror{pointer-events:none}:host ::ng-deep body.resizing .ProseMirror .tiptap-image{pointer-events:none}:host ::ng-deep .image-size-info{position:absolute;bottom:-20px;left:50%;transform:translate(-50%);background:#000c;color:#fff;padding:2px 6px;border-radius:3px;font-size:11px;white-space:nowrap;opacity:0;transition:opacity .2s ease}:host ::ng-deep .image-container:hover .image-size-info{opacity:1}:host ::ng-deep .ProseMirror table{border-collapse:separate;border-spacing:0;margin:0;table-layout:fixed;width:100%;border-radius:8px;overflow:hidden}:host ::ng-deep .ProseMirror table td,:host ::ng-deep .ProseMirror table th{border:none;border-right:1px solid #e2e8f0;border-bottom:1px solid #e2e8f0;box-sizing:border-box;min-width:1em;padding:8px 12px;position:relative;vertical-align:top;background:#fff}:host ::ng-deep .ProseMirror table td:first-child,:host ::ng-deep .ProseMirror table th:first-child{border-left:1px solid #e2e8f0}:host ::ng-deep .ProseMirror table tr:first-child td,:host ::ng-deep .ProseMirror table tr:first-child th{border-top:1px solid #e2e8f0}:host ::ng-deep .ProseMirror table tr:first-child th:first-child{border-top-left-radius:8px}:host ::ng-deep .ProseMirror table tr:first-child th:last-child{border-top-right-radius:8px}:host ::ng-deep .ProseMirror table tr:last-child td:first-child{border-bottom-left-radius:8px}:host ::ng-deep .ProseMirror table tr:last-child td:last-child{border-bottom-right-radius:8px}:host ::ng-deep .ProseMirror table th{background:#f8f9fa;font-weight:600;color:#374151}:host ::ng-deep .ProseMirror table .selectedCell:after{background:#c8c8ff66;content:\"\";inset:0;pointer-events:none;position:absolute;z-index:2}:host ::ng-deep .ProseMirror table .column-resize-handle{position:absolute;right:-2px;top:0;bottom:0;width:4px;background-color:#6366f1;opacity:0;transition:opacity .2s ease}:host ::ng-deep .ProseMirror table:hover .column-resize-handle{opacity:1}:host ::ng-deep .ProseMirror table .column-resize-handle:hover{background-color:#4f46e5}:host ::ng-deep .ProseMirror .tableWrapper{overflow-x:auto;margin:1em 0;border-radius:8px}:host ::ng-deep .ProseMirror .tableWrapper table{margin:0;border-radius:8px;min-width:600px;overflow:hidden}:host ::ng-deep .ProseMirror table p{margin:0}:host ::ng-deep .ProseMirror table .selectedCell{background-color:#6366f11a}:host ::ng-deep .ProseMirror table th{background-color:#f8f9fa;font-weight:600;color:#374151;text-align:left}:host ::ng-deep .ProseMirror table tbody tr:nth-child(2n){background-color:#fafbfc}:host ::ng-deep .ProseMirror table tbody tr:hover{background-color:#f1f5f9}\n"] }]
         }], ctorParameters: () => [] });
 
+/**
+ * Clés des commandes dans l'ordre de création
+ */
+const SLASH_COMMAND_KEYS = [
+    "heading1",
+    "heading2",
+    "heading3",
+    "bulletList",
+    "orderedList",
+    "blockquote",
+    "code",
+    "image",
+    "horizontalRule",
+    "table",
+];
 /**
  * Factory function pour créer les slash commands traduits
  */
@@ -4202,22 +5183,28 @@ function createI18nSlashCommands(i18nService) {
             keywords: slashCommands.horizontalRule.keywords,
             command: (editor) => editor.chain().focus().setHorizontalRule().run(),
         },
+        {
+            title: slashCommands.table.title,
+            description: slashCommands.table.description,
+            icon: "table_view",
+            keywords: slashCommands.table.keywords,
+            command: (editor) => editor.chain().focus().insertTable({ rows: 3, cols: 3 }).run(),
+        },
     ];
 }
 /**
- * Mapping des clés de commandes pour la compatibilité
+ * Fonction utilitaire pour filtrer les slash commands selon les commandes actives
+ * Utilise le service i18n injecté en interne
  */
-const SLASH_COMMAND_KEYS = {
-    heading1: "heading1",
-    heading2: "heading2",
-    heading3: "heading3",
-    bulletList: "bulletList",
-    orderedList: "orderedList",
-    blockquote: "blockquote",
-    code: "code",
-    image: "image",
-    horizontalRule: "horizontalRule",
-};
+function filterSlashCommands(activeCommands) {
+    // Injecter le service i18n en interne
+    const i18nService = inject(TiptapI18nService);
+    const allCommands = createI18nSlashCommands(i18nService);
+    return allCommands.filter((command, index) => {
+        const commandKey = SLASH_COMMAND_KEYS[index];
+        return commandKey && activeCommands.has(commandKey);
+    });
+}
 
 /*
  * Public API Surface of tiptap-editor
@@ -4228,5 +5215,5 @@ const SLASH_COMMAND_KEYS = {
  * Generated bundle index. Do not edit.
  */
 
-export { AngularTiptapEditorComponent, DEFAULT_BUBBLE_MENU_CONFIG, DEFAULT_IMAGE_BUBBLE_MENU_CONFIG, DEFAULT_SLASH_COMMANDS, DEFAULT_TOOLBAR_CONFIG, NoopValueAccessorDirective, TiptapI18nService, createI18nSlashCommands };
+export { AngularTiptapEditorComponent, DEFAULT_BUBBLE_MENU_CONFIG, DEFAULT_CELL_MENU_CONFIG, DEFAULT_IMAGE_BUBBLE_MENU_CONFIG, DEFAULT_SLASH_COMMANDS, DEFAULT_TABLE_MENU_CONFIG, DEFAULT_TOOLBAR_CONFIG, EditorCommandsService, ImageService, NoopValueAccessorDirective, SLASH_COMMAND_KEYS, TiptapI18nService, createI18nSlashCommands, filterSlashCommands };
 //# sourceMappingURL=flogeez-angular-tiptap-editor.mjs.map