@flogeez/angular-tiptap-editor 0.4.0 → 0.5.0

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

@@ -361,9 +361,9 @@ const UploadProgress = Extension.create({
                     max-width: 400px;
                   }
                   .upload-skeleton {
-                    background: #f8f9fa;
-                    border: 2px dashed #e2e8f0;
-                    border-radius: 8px;
+                    background: var(--ate-surface-secondary);
+                    border: 2px dashed var(--ate-border-color);
+                    border-radius: var(--ate-border-radius);
                     padding: 16px;
                     display: flex;
                     align-items: center;
@@ -372,8 +372,8 @@ const UploadProgress = Extension.create({
                     animation: pulse 2s infinite;
                   }
                   @keyframes pulse {
-                    0%, 100% { background-color: #f8f9fa; }
-                    50% { background-color: #f1f5f9; }
+                    0%, 100% { background-color: var(--ate-surface-secondary); }
+                    50% { background-color: var(--ate-surface-tertiary); }
                   }
                   .upload-content {
                     display: flex;
@@ -388,9 +388,9 @@ const UploadProgress = Extension.create({
                     justify-content: center;
                     width: 48px;
                     height: 48px;
-                    background: #e6f3ff;
+                    background: var(--ate-primary-light);
                     border-radius: 50%;
-                    color: #3182ce;
+                    color: var(--ate-primary);
                   }
                   .upload-icon .material-symbols-outlined {
                     font-size: 24px;
@@ -411,25 +411,25 @@ const UploadProgress = Extension.create({
                   }
                   .upload-message {
                     font-size: 14px;
-                    color: #4a5568;
+                    color: var(--ate-text);
                     font-weight: 500;
                   }
                   .progress-bar {
                     width: 100%;
                     height: 6px;
-                    background: #e2e8f0;
+                    background: var(--ate-border-color);
                     border-radius: 3px;
                     overflow: hidden;
                   }
                   .progress-fill {
                     height: 100%;
-                    background: linear-gradient(90deg, #3182ce, #4299e1);
+                    background: var(--ate-primary);
                     border-radius: 3px;
                     transition: width 0.3s ease;
                   }
                   .progress-text {
                     font-size: 12px;
-                    color: #718096;
+                    color: var(--ate-text-secondary);
                     font-weight: 500;
                   }
                 `;
@@ -548,6 +548,7 @@ class TiptapButtonComponent {
       [class.small]="size() === 'small'"
       [class.medium]="size() === 'medium'"
       [class.large]="size() === 'large'"
+      [class.has-custom-color]="!!color()"
       [disabled]="disabled()"
       [style.color]="color()"
       [attr.title]="title()"
@@ -564,7 +565,7 @@ class TiptapButtonComponent {
       >
       <ng-content></ng-content>
     </button>
-  `, isInline: true, 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"] }); }
+  `, isInline: true, styles: [".tiptap-button{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;background:transparent;border-radius:var(--ate-border-radius, 8px);cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);color:var(--ate-toolbar-button-color, var(--ate-text-secondary));position:relative;overflow:hidden}.tiptap-button:before{content:\"\";position:absolute;inset:0;background:var(--ate-primary);opacity:0;transition:opacity .2s ease;border-radius:var(--ate-border-radius, 8px)}.tiptap-button:hover:not(.has-custom-color){color:var(--ate-toolbar-button-active-color, var(--ate-primary));background:var(--ate-toolbar-button-hover-background, transparent);transform:translateY(-1px)}.tiptap-button.has-custom-color:hover{background:var(--ate-toolbar-button-hover-background, transparent);transform:translateY(-1px)}.tiptap-button:hover:before{opacity:.1}.tiptap-button:active{transform:translateY(0)}.tiptap-button.is-active:not(.has-custom-color){color:var(--ate-toolbar-button-active-color, var(--ate-primary));background:var(--ate-toolbar-button-active-background, var(--ate-primary-light))}.tiptap-button.is-active.has-custom-color{background:var(--ate-toolbar-button-active-background, var(--ate-primary-light))}.tiptap-button:disabled{opacity:.4;cursor:not-allowed;pointer-events:none}.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;gap:8px}.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:var(--ate-border);transform:scale(1.1)}.tiptap-button.color-button.is-active{border-color:var(--ate-primary);box-shadow:0 0 0 2px var(--ate-primary-light)}.tiptap-button.danger{color:var(--ate-error-color, #ef4444)}.tiptap-button.danger:hover{background:var(--ate-error-bg, rgba(239, 68, 68, .1))}.tiptap-button.danger:before{background:var(--ate-error-color, #ef4444)}.tiptap-button.small{width:24px;height:24px}.tiptap-button.medium{width:32px;height:32px}.tiptap-button.large{width:40px;height:40px}@keyframes pulse{0%,to{box-shadow:0 0 0 0 var(--ate-primary-light-alpha)}50%{box-shadow:0 0 0 4px transparent}}.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"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapButtonComponent, decorators: [{
             type: Component,
@@ -578,6 +579,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
       [class.small]="size() === 'small'"
       [class.medium]="size() === 'medium'"
       [class.large]="size() === 'large'"
+      [class.has-custom-color]="!!color()"
       [disabled]="disabled()"
       [style.color]="color()"
       [attr.title]="title()"
@@ -594,7 +596,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
       >
       <ng-content></ng-content>
     </button>
-  `, 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"] }]
+  `, styles: [".tiptap-button{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;background:transparent;border-radius:var(--ate-border-radius, 8px);cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);color:var(--ate-toolbar-button-color, var(--ate-text-secondary));position:relative;overflow:hidden}.tiptap-button:before{content:\"\";position:absolute;inset:0;background:var(--ate-primary);opacity:0;transition:opacity .2s ease;border-radius:var(--ate-border-radius, 8px)}.tiptap-button:hover:not(.has-custom-color){color:var(--ate-toolbar-button-active-color, var(--ate-primary));background:var(--ate-toolbar-button-hover-background, transparent);transform:translateY(-1px)}.tiptap-button.has-custom-color:hover{background:var(--ate-toolbar-button-hover-background, transparent);transform:translateY(-1px)}.tiptap-button:hover:before{opacity:.1}.tiptap-button:active{transform:translateY(0)}.tiptap-button.is-active:not(.has-custom-color){color:var(--ate-toolbar-button-active-color, var(--ate-primary));background:var(--ate-toolbar-button-active-background, var(--ate-primary-light))}.tiptap-button.is-active.has-custom-color{background:var(--ate-toolbar-button-active-background, var(--ate-primary-light))}.tiptap-button:disabled{opacity:.4;cursor:not-allowed;pointer-events:none}.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;gap:8px}.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:var(--ate-border);transform:scale(1.1)}.tiptap-button.color-button.is-active{border-color:var(--ate-primary);box-shadow:0 0 0 2px var(--ate-primary-light)}.tiptap-button.danger{color:var(--ate-error-color, #ef4444)}.tiptap-button.danger:hover{background:var(--ate-error-bg, rgba(239, 68, 68, .1))}.tiptap-button.danger:before{background:var(--ate-error-color, #ef4444)}.tiptap-button.small{width:24px;height:24px}.tiptap-button.medium{width:32px;height:32px}.tiptap-button.large{width:40px;height:40px}@keyframes pulse{0%,to{box-shadow:0 0 0 0 var(--ate-primary-light-alpha)}50%{box-shadow:0 0 0 4px transparent}}.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 ColorPickerService {
@@ -658,7 +660,19 @@ class ColorPickerService {
         if (found)
             return found;
         const attrs = editor.getAttributes("textStyle") || {};
-        return attrs.color ? this.normalizeColor(attrs.color) : "#000000";
+        if (attrs.color)
+            return this.normalizeColor(attrs.color);
+        // Dynamic fallback: get current computed text color from editor's DOM
+        try {
+            if (typeof window !== "undefined" && editor.view?.dom) {
+                const computedColor = window.getComputedStyle(editor.view.dom).color;
+                return this.normalizeColor(computedColor);
+            }
+        }
+        catch (e) {
+            // Fail silently and use basic fallback
+        }
+        return "#000000";
     }
     /**
      * Check if a color is explicitly applied on the selection.
@@ -856,6 +870,7 @@ const ENGLISH_TRANSLATIONS = {
     },
     imageUpload: {
         selectImage: "Select Image",
+        loadError: "Error loading image",
         uploadingImage: "Uploading image...",
         uploadProgress: "Upload Progress",
         uploadError: "Upload Error",
@@ -869,12 +884,20 @@ const ENGLISH_TRANSLATIONS = {
         resizeMedium: "Medium",
         resizeLarge: "Large",
         resizeOriginal: "Original",
+        resizing: "Resizing...",
+        compressing: "Compressing...",
+        compressionError: "Error during compression",
+        validating: "Validating file...",
+        uploadingToServer: "Uploading to server...",
+        replacingImage: "Replacing image...",
+        insertingImage: "Inserting into editor...",
+        noFileSelected: "No image file selected",
+        selectionCancelled: "Selection cancelled",
     },
     editor: {
         placeholder: "Start typing...",
         character: "character",
         word: "word",
-        imageLoadError: "Error loading image",
         linkPrompt: "Enter link URL",
         linkUrlPrompt: "Enter URL",
         confirmDelete: "Are you sure you want to delete this?",
@@ -1014,6 +1037,7 @@ const FRENCH_TRANSLATIONS = {
     },
     imageUpload: {
         selectImage: "Sélectionner une image",
+        loadError: "Erreur de chargement de l'image",
         uploadingImage: "Téléchargement de l'image...",
         uploadProgress: "Progression du téléchargement",
         uploadError: "Erreur de téléchargement",
@@ -1027,12 +1051,20 @@ const FRENCH_TRANSLATIONS = {
         resizeMedium: "Moyen",
         resizeLarge: "Grand",
         resizeOriginal: "Original",
+        resizing: "Redimensionnement...",
+        compressing: "Compression...",
+        compressionError: "Erreur lors de la compression",
+        validating: "Validation du fichier...",
+        uploadingToServer: "Upload vers le serveur...",
+        replacingImage: "Remplacement de l'image...",
+        insertingImage: "Insertion dans l'éditeur...",
+        noFileSelected: "Aucun fichier image sélectionné",
+        selectionCancelled: "Sélection annulée",
     },
     editor: {
         placeholder: "Commencez à écrire...",
         character: "caractère",
         word: "mot",
-        imageLoadError: "Erreur de chargement de l'image",
         linkPrompt: "Entrez l'URL du lien",
         linkUrlPrompt: "Entrez l'URL",
         confirmDelete: "Êtes-vous sûr de vouloir supprimer ceci ?",
@@ -1132,7 +1164,9 @@ class TiptapTextColorPickerComponent {
         this.editorChange = signal(0);
         this.currentColor = computed(() => {
             this.editorChange();
-            return (this.previewColor() ?? this.colorPickerSvc.getCurrentColor(this.editor()));
+            if (this.previewColor())
+                return this.previewColor();
+            return this.colorPickerSvc.getCurrentColor(this.editor());
         });
         this.hasColorApplied = computed(() => {
             this.editorChange();
@@ -1252,7 +1286,7 @@ class TiptapTextColorPickerComponent {
       <tiptap-button
         icon="format_color_text"
         [title]="t().textColor"
-        [color]="hasColorApplied() ? currentColor() : undefined"
+        [color]="hasColorApplied() ? currentColor() : 'var(--ate-text)'"
         (onClick)="triggerPicker()"
       >
         <input
@@ -1287,7 +1321,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
       <tiptap-button
         icon="format_color_text"
         [title]="t().textColor"
-        [color]="hasColorApplied() ? currentColor() : undefined"
+        [color]="hasColorApplied() ? currentColor() : 'var(--ate-text)'"
         (onClick)="triggerPicker()"
       >
         <input
@@ -1325,6 +1359,8 @@ class TiptapBubbleMenuComponent {
     }
     // Effect comme propriété de classe pour éviter l'erreur d'injection context
     constructor() {
+        this.i18nService = inject(TiptapI18nService);
+        this.t = this.i18nService.bubbleMenu;
         this.editor = input.required();
         this.config = input({
             bold: true,
@@ -1356,8 +1392,6 @@ class TiptapBubbleMenuComponent {
             separator: true,
             ...this.config(),
         }));
-        this.i18nService = inject(TiptapI18nService);
-        this.t = this.i18nService.bubbleMenu;
         this.updateMenu = () => {
             // Debounce pour éviter les appels trop fréquents
             if (this.updateTimeout) {
@@ -1461,7 +1495,10 @@ class TiptapBubbleMenuComponent {
             content: menuElement,
             trigger: "manual",
             placement: "top-start",
-            appendTo: () => document.body,
+            appendTo: (ref) => {
+                const host = this.editor().options.element.closest("angular-tiptap-editor");
+                return host || document.body;
+            },
             interactive: true,
             arrow: false,
             offset: [0, 8],
@@ -1573,7 +1610,7 @@ class TiptapBubbleMenuComponent {
                 ed.chain().focus().toggleHighlight().run();
                 break;
             case "link":
-                const href = window.prompt("URL du lien:");
+                const href = window.prompt(this.i18nService.editor().linkPrompt);
                 if (href) {
                     ed.chain().focus().toggleLink({ href }).run();
                 }
@@ -1768,7 +1805,7 @@ class TiptapSeparatorComponent {
       [class.medium]="size() === 'medium'"
       [class.large]="size() === 'large'"
     ></div>
-  `, isInline: true, styles: [".tiptap-separator{background-color:#e2e8f0;margin:0}.tiptap-separator.vertical{width:1px;height:24px;margin:0 8px}.tiptap-separator.horizontal{height:1px;width:100%;margin:8px 0}.tiptap-separator.small.vertical{height:16px;margin:0 4px}.tiptap-separator.small.horizontal{margin:4px 0}.tiptap-separator.medium.vertical{height:24px;margin:0 8px}.tiptap-separator.medium.horizontal{margin:8px 0}.tiptap-separator.large.vertical{height:32px;margin:0 12px}.tiptap-separator.large.horizontal{margin:12px 0}\n"] }); }
+  `, isInline: true, styles: [".tiptap-separator{background-color:var(--ate-border, #e2e8f0);margin:0}.tiptap-separator.vertical{width:1px;height:24px;margin:0 8px}.tiptap-separator.horizontal{height:1px;width:100%;margin:8px 0}.tiptap-separator.small.vertical{height:16px;margin:0 4px}.tiptap-separator.small.horizontal{margin:4px 0}.tiptap-separator.medium.vertical{height:24px;margin:0 8px}.tiptap-separator.medium.horizontal{margin:8px 0}.tiptap-separator.large.vertical{height:32px;margin:0 12px}.tiptap-separator.large.horizontal{margin:12px 0}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapSeparatorComponent, decorators: [{
             type: Component,
@@ -1781,7 +1818,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
       [class.medium]="size() === 'medium'"
       [class.large]="size() === 'large'"
     ></div>
-  `, styles: [".tiptap-separator{background-color:#e2e8f0;margin:0}.tiptap-separator.vertical{width:1px;height:24px;margin:0 8px}.tiptap-separator.horizontal{height:1px;width:100%;margin:8px 0}.tiptap-separator.small.vertical{height:16px;margin:0 4px}.tiptap-separator.small.horizontal{margin:4px 0}.tiptap-separator.medium.vertical{height:24px;margin:0 8px}.tiptap-separator.medium.horizontal{margin:8px 0}.tiptap-separator.large.vertical{height:32px;margin:0 12px}.tiptap-separator.large.horizontal{margin:12px 0}\n"] }]
+  `, styles: [".tiptap-separator{background-color:var(--ate-border, #e2e8f0);margin:0}.tiptap-separator.vertical{width:1px;height:24px;margin:0 8px}.tiptap-separator.horizontal{height:1px;width:100%;margin:8px 0}.tiptap-separator.small.vertical{height:16px;margin:0 4px}.tiptap-separator.small.horizontal{margin:4px 0}.tiptap-separator.medium.vertical{height:24px;margin:0 8px}.tiptap-separator.medium.horizontal{margin:8px 0}.tiptap-separator.large.vertical{height:32px;margin:0 12px}.tiptap-separator.large.horizontal{margin:12px 0}\n"] }]
         }] });
 
 class ImageService {
@@ -1789,7 +1826,10 @@ class ImageService {
         // Signals pour l'état des images
         this.selectedImage = signal(null);
         this.isImageSelected = computed(() => this.selectedImage() !== null);
+        // Resizing signals
         this.isResizing = signal(false);
+        this.i18n = inject(TiptapI18nService);
+        this.t = this.i18n.imageUpload;
         // Signaux pour l'upload
         this.isUploading = signal(false);
         this.uploadProgress = signal(0);
@@ -1947,7 +1987,7 @@ class ImageService {
                 resolve({ width: img.naturalWidth, height: img.naturalHeight });
             };
             img.onerror = () => {
-                reject(new Error("Impossible de charger l'image"));
+                reject(new Error(this.t().loadError));
             };
             img.src = src;
         });
@@ -1968,12 +2008,12 @@ class ImageService {
     // Validation des images
     validateImage(file, maxSize = 5 * 1024 * 1024) {
         if (!file.type.startsWith("image/")) {
-            return { valid: false, error: "Le fichier doit être une image" };
+            return { valid: false, error: this.t().invalidFileType };
         }
         if (file.size > maxSize) {
             return {
                 valid: false,
-                error: `L'image est trop volumineuse (max ${maxSize / 1024 / 1024}MB)`,
+                error: `${this.t().imageTooLarge} (max ${maxSize / 1024 / 1024}MB)`,
             };
         }
         return { valid: true };
@@ -1988,7 +2028,7 @@ class ImageService {
                 // Mise à jour du progrès
                 if (this.isUploading()) {
                     this.uploadProgress.set(40);
-                    this.uploadMessage.set("Redimensionnement...");
+                    this.uploadMessage.set(this.t().resizing);
                     this.forceEditorUpdate();
                 }
                 let { width, height } = img;
@@ -2005,7 +2045,7 @@ class ImageService {
                 // Mise à jour du progrès
                 if (this.isUploading()) {
                     this.uploadProgress.set(60);
-                    this.uploadMessage.set("Compression...");
+                    this.uploadMessage.set(this.t().compressing);
                     this.forceEditorUpdate();
                 }
                 // Convertir en base64 avec compression
@@ -2027,17 +2067,17 @@ class ImageService {
                                 resolve(result);
                             }
                             else {
-                                reject(new Error("Erreur lors de la compression"));
+                                reject(new Error(this.t().compressionError));
                             }
                         };
                         reader.readAsDataURL(blob);
                     }
                     else {
-                        reject(new Error("Erreur lors de la compression"));
+                        reject(new Error(this.t().compressionError));
                     }
                 }, file.type, quality);
             };
-            img.onerror = () => reject(new Error("Erreur lors du chargement de l'image"));
+            img.onerror = () => reject(new Error(this.t().loadError));
             img.src = URL.createObjectURL(file);
         });
     }
@@ -2048,7 +2088,7 @@ class ImageService {
             this.currentEditor = editor;
             this.isUploading.set(true);
             this.uploadProgress.set(0);
-            this.uploadMessage.set("Validation du fichier...");
+            this.uploadMessage.set(this.t().validating);
             this.forceEditorUpdate();
             // Validation
             const validation = this.validateImage(file);
@@ -2056,7 +2096,7 @@ class ImageService {
                 throw new Error(validation.error);
             }
             this.uploadProgress.set(20);
-            this.uploadMessage.set("Compression en cours...");
+            this.uploadMessage.set(this.t().compressing);
             this.forceEditorUpdate();
             // Petit délai pour permettre à l'utilisateur de voir la progression
             await new Promise((resolve) => setTimeout(resolve, 200));
@@ -2064,7 +2104,7 @@ class ImageService {
             this.uploadProgress.set(80);
             // Si un handler personnalisé est défini, l'utiliser pour l'upload
             if (this.uploadHandler) {
-                this.uploadMessage.set("Upload vers le serveur...");
+                this.uploadMessage.set(this.t().uploadingToServer);
                 this.forceEditorUpdate();
                 try {
                     const handlerResponse = this.uploadHandler({
@@ -2086,7 +2126,7 @@ class ImageService {
                     }
                 }
                 catch (handlerError) {
-                    console.error("Erreur lors de l'upload personnalisé:", handlerError);
+                    console.error(this.t().uploadError, handlerError);
                     throw handlerError;
                 }
             }
@@ -2109,7 +2149,7 @@ class ImageService {
             this.uploadMessage.set("");
             this.forceEditorUpdate();
             this.currentEditor = null;
-            console.error("Erreur lors de l'upload d'image:", error);
+            console.error(this.t().uploadError, error);
             throw error;
         }
     }
@@ -2123,7 +2163,7 @@ class ImageService {
                 width: result.width,
                 height: result.height,
             });
-        }, "Insertion dans l'éditeur...", options);
+        }, this.t().insertingImage, options);
     }
     // Méthode pour forcer la mise à jour de l'éditeur
     forceEditorUpdate() {
@@ -2152,13 +2192,13 @@ class ImageService {
                     }
                 }
                 else {
-                    reject(new Error("Aucun fichier image sélectionné"));
+                    reject(new Error(this.t().noFileSelected));
                 }
                 document.body.removeChild(input);
             });
             input.addEventListener("cancel", () => {
                 document.body.removeChild(input);
-                reject(new Error("Sélection annulée"));
+                reject(new Error(this.t().selectionCancelled));
             });
             document.body.appendChild(input);
             input.click();
@@ -2180,60 +2220,28 @@ class ImageService {
         try {
             // Supprimer visuellement l'ancienne image immédiatement
             editor.chain().focus().deleteSelection().run();
-            // Stocker la référence à l'éditeur
-            this.currentEditor = editor;
-            this.isUploading.set(true);
-            this.uploadProgress.set(0);
-            this.uploadMessage.set("Validation du fichier...");
-            this.forceEditorUpdate();
-            // Validation
-            const validation = this.validateImage(file);
-            if (!validation.valid) {
-                throw new Error(validation.error);
-            }
-            this.uploadProgress.set(20);
-            this.uploadMessage.set("Compression en cours...");
-            this.forceEditorUpdate();
-            // Petit délai pour permettre à l'utilisateur de voir la progression
-            await new Promise((resolve) => setTimeout(resolve, 200));
-            const result = await this.compressImage(file, options?.quality || 0.8, options?.maxWidth || 1920, options?.maxHeight || 1080);
-            this.uploadProgress.set(80);
-            this.uploadMessage.set("Remplacement de l'image...");
-            this.forceEditorUpdate();
-            // Petit délai pour le remplacement
-            await new Promise((resolve) => setTimeout(resolve, 100));
-            // Insérer la nouvelle image à la position actuelle
-            this.insertImage(editor, {
-                src: result.src,
-                alt: result.name,
-                title: `${result.name} (${result.width}×${result.height})`,
-                width: result.width,
-                height: result.height,
-            });
-            // L'image est remplacée, maintenant on peut cacher l'indicateur
-            this.isUploading.set(false);
-            this.uploadProgress.set(0);
-            this.uploadMessage.set("");
-            this.forceEditorUpdate();
-            this.currentEditor = null;
+            await this.uploadImageWithProgress(editor, file, (editor, result) => {
+                this.insertImage(editor, {
+                    src: result.src,
+                    alt: result.name,
+                    title: `${result.name} (${result.width}×${result.height})`,
+                    width: result.width,
+                    height: result.height,
+                });
+            }, this.t().replacingImage, options);
         }
         catch (error) {
-            // En cas d'erreur, restaurer l'image originale
+            // En cas d'erreur, restaurer l'image originale si elle existait
             if (backupImage["src"]) {
                 this.insertImage(editor, {
                     src: backupImage["src"],
-                    alt: backupImage["alt"],
-                    title: backupImage["title"],
+                    alt: backupImage["alt"] || "",
+                    title: backupImage["title"] || "",
                     width: backupImage["width"],
                     height: backupImage["height"],
                 });
             }
-            this.isUploading.set(false);
-            this.uploadProgress.set(0);
-            this.uploadMessage.set("");
-            this.forceEditorUpdate();
-            this.currentEditor = null;
-            console.error("Erreur lors du remplacement d'image:", error);
+            console.error("Error during image replacement:", error);
             throw error;
         }
     }
@@ -2249,6 +2257,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
 
 class TiptapImageBubbleMenuComponent {
     constructor() {
+        this.i18nService = inject(TiptapI18nService);
+        this.t = this.i18nService.imageUpload;
         this.editor = input.required();
         this.config = input({
             changeImage: true,
@@ -2289,8 +2299,6 @@ class TiptapImageBubbleMenuComponent {
                 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
@@ -2365,7 +2373,10 @@ class TiptapImageBubbleMenuComponent {
             content: menuElement,
             trigger: "manual",
             placement: "top-start",
-            appendTo: () => document.body,
+            appendTo: (ref) => {
+                const host = this.editor().options.element.closest("angular-tiptap-editor");
+                return host || document.body;
+            },
             interactive: true,
             arrow: false,
             offset: [0, 8],
@@ -2492,7 +2503,7 @@ class TiptapImageBubbleMenuComponent {
             });
         }
         catch (error) {
-            console.error("Erreur lors du changement d'image:", error);
+            console.error(this.i18nService.imageUpload().uploadError, error);
         }
     }
     deleteImage() {
@@ -2507,7 +2518,7 @@ class TiptapImageBubbleMenuComponent {
       @if (imageBubbleMenuConfig().changeImage) {
       <tiptap-button
         icon="drive_file_rename_outline"
-        title="Changer l'image"
+        [title]="t().changeImage"
         (click)="onCommand('changeImage', $event)"
       ></tiptap-button>
       } @if (imageBubbleMenuConfig().separator && hasResizeButtons()) {
@@ -2516,27 +2527,27 @@ class TiptapImageBubbleMenuComponent {
       <tiptap-button
         icon="crop_square"
         iconSize="small"
-        title="Petite (300×200)"
+        [title]="t().resizeSmall"
         (click)="onCommand('resizeSmall', $event)"
       ></tiptap-button>
       } @if (imageBubbleMenuConfig().resizeMedium) {
       <tiptap-button
         icon="crop_square"
         iconSize="medium"
-        title="Moyenne (500×350)"
+        [title]="t().resizeMedium"
         (click)="onCommand('resizeMedium', $event)"
       ></tiptap-button>
       } @if (imageBubbleMenuConfig().resizeLarge) {
       <tiptap-button
         icon="crop_square"
         iconSize="large"
-        title="Grande (800×600)"
+        [title]="t().resizeLarge"
         (click)="onCommand('resizeLarge', $event)"
       ></tiptap-button>
       } @if (imageBubbleMenuConfig().resizeOriginal) {
       <tiptap-button
         icon="photo_size_select_actual"
-        title="Taille originale"
+        [title]="t().resizeOriginal"
         (click)="onCommand('resizeOriginal', $event)"
       ></tiptap-button>
       } @if (imageBubbleMenuConfig().separator &&
@@ -2545,7 +2556,7 @@ class TiptapImageBubbleMenuComponent {
       } @if (imageBubbleMenuConfig().deleteImage) {
       <tiptap-button
         icon="delete"
-        title="Supprimer l'image"
+        [title]="t().deleteImage"
         variant="danger"
         (click)="onCommand('deleteImage', $event)"
       ></tiptap-button>
@@ -2560,7 +2571,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
       @if (imageBubbleMenuConfig().changeImage) {
       <tiptap-button
         icon="drive_file_rename_outline"
-        title="Changer l'image"
+        [title]="t().changeImage"
         (click)="onCommand('changeImage', $event)"
       ></tiptap-button>
       } @if (imageBubbleMenuConfig().separator && hasResizeButtons()) {
@@ -2569,27 +2580,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
       <tiptap-button
         icon="crop_square"
         iconSize="small"
-        title="Petite (300×200)"
+        [title]="t().resizeSmall"
         (click)="onCommand('resizeSmall', $event)"
       ></tiptap-button>
       } @if (imageBubbleMenuConfig().resizeMedium) {
       <tiptap-button
         icon="crop_square"
         iconSize="medium"
-        title="Moyenne (500×350)"
+        [title]="t().resizeMedium"
         (click)="onCommand('resizeMedium', $event)"
       ></tiptap-button>
       } @if (imageBubbleMenuConfig().resizeLarge) {
       <tiptap-button
         icon="crop_square"
         iconSize="large"
-        title="Grande (800×600)"
+        [title]="t().resizeLarge"
         (click)="onCommand('resizeLarge', $event)"
       ></tiptap-button>
       } @if (imageBubbleMenuConfig().resizeOriginal) {
       <tiptap-button
         icon="photo_size_select_actual"
-        title="Taille originale"
+        [title]="t().resizeOriginal"
         (click)="onCommand('resizeOriginal', $event)"
       ></tiptap-button>
       } @if (imageBubbleMenuConfig().separator &&
@@ -2598,7 +2609,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
       } @if (imageBubbleMenuConfig().deleteImage) {
       <tiptap-button
         icon="delete"
-        title="Supprimer l'image"
+        [title]="t().deleteImage"
         variant="danger"
         (click)="onCommand('deleteImage', $event)"
       ></tiptap-button>
@@ -2785,7 +2796,7 @@ class EditorCommandsService {
     }
     // Méthode pour vider le contenu
     clearContent(editor) {
-        editor.chain().focus().setContent("", true).run(); // ✅ Forcer l'émission de l'événement
+        editor.commands.setContent("", true);
     }
     // Méthodes de base de l'éditeur
     focus(editor) {
@@ -2795,11 +2806,14 @@ class EditorCommandsService {
         editor.chain().blur().run();
     }
     setContent(editor, content, emitUpdate = true) {
-        editor.chain().focus().setContent(content, emitUpdate).run();
+        editor.commands.setContent(content, emitUpdate);
     }
     setEditable(editor, editable) {
         editor.setEditable(editable);
     }
+    insertContent(editor, content) {
+        editor.chain().focus().insertContent(content).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" }); }
 }
@@ -2822,7 +2836,7 @@ class TiptapTableBubbleMenuComponent {
         this.tippyInstance = null;
         this.updateTimeout = null;
         // Signaux
-        this.i18n = this.i18nService;
+        this.t = this.i18nService.table;
         this.updateMenu = () => {
             // Debounce pour éviter les appels trop fréquents
             if (this.updateTimeout) {
@@ -2904,8 +2918,11 @@ class TiptapTableBubbleMenuComponent {
         this.tippyInstance = tippy(document.body, {
             content: menuElement,
             trigger: "manual",
-            placement: "top-start",
-            appendTo: () => document.body,
+            placement: "bottom-start",
+            appendTo: (ref) => {
+                const host = this.editor().options.element.closest("angular-tiptap-editor");
+                return host || document.body;
+            },
             interactive: true,
             arrow: false,
             offset: [0, 8],
@@ -3034,19 +3051,19 @@ class TiptapTableBubbleMenuComponent {
       @if (config().addRowBefore !== false) {
       <tiptap-button
         icon="add_row_above"
-        title="{{ i18n.table().addRowBefore }}"
+        title="{{ t().addRowBefore }}"
         (click)="addRowBefore()"
       ></tiptap-button>
       } @if (config().addRowAfter !== false) {
       <tiptap-button
         icon="add_row_below"
-        title="{{ i18n.table().addRowAfter }}"
+        title="{{ t().addRowAfter }}"
         (click)="addRowAfter()"
       ></tiptap-button>
       } @if (config().deleteRow !== false) {
       <tiptap-button
         icon="delete"
-        title="{{ i18n.table().deleteRow }}"
+        title="{{ t().deleteRow }}"
         variant="danger"
         (click)="deleteRow()"
       ></tiptap-button>
@@ -3058,19 +3075,19 @@ class TiptapTableBubbleMenuComponent {
       @if (config().addColumnBefore !== false) {
       <tiptap-button
         icon="add_column_left"
-        title="{{ i18n.table().addColumnBefore }}"
+        title="{{ t().addColumnBefore }}"
         (click)="addColumnBefore()"
       ></tiptap-button>
       } @if (config().addColumnAfter !== false) {
       <tiptap-button
         icon="add_column_right"
-        title="{{ i18n.table().addColumnAfter }}"
+        title="{{ t().addColumnAfter }}"
         (click)="addColumnAfter()"
       ></tiptap-button>
       } @if (config().deleteColumn !== false) {
       <tiptap-button
         icon="delete"
-        title="{{ i18n.table().deleteColumn }}"
+        title="{{ t().deleteColumn }}"
         variant="danger"
         (click)="deleteColumn()"
       ></tiptap-button>
@@ -3082,13 +3099,13 @@ class TiptapTableBubbleMenuComponent {
       @if (config().toggleHeaderRow !== false) {
       <tiptap-button
         icon="toolbar"
-        title="{{ i18n.table().toggleHeaderRow }}"
+        title="{{ t().toggleHeaderRow }}"
         (click)="toggleHeaderRow()"
       ></tiptap-button>
       } @if (config().toggleHeaderColumn !== false) {
       <tiptap-button
         icon="dock_to_right"
-        title="{{ i18n.table().toggleHeaderColumn }}"
+        title="{{ t().toggleHeaderColumn }}"
         (click)="toggleHeaderColumn()"
       ></tiptap-button>
       } @if (config().separator !== false && config().deleteTable !== false) {
@@ -3099,7 +3116,7 @@ class TiptapTableBubbleMenuComponent {
       @if (config().deleteTable !== false) {
       <tiptap-button
         icon="delete_forever"
-        title="{{ i18n.table().deleteTable }}"
+        title="{{ t().deleteTable }}"
         variant="danger"
         (click)="deleteTable()"
       ></tiptap-button>
@@ -3115,19 +3132,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
       @if (config().addRowBefore !== false) {
       <tiptap-button
         icon="add_row_above"
-        title="{{ i18n.table().addRowBefore }}"
+        title="{{ t().addRowBefore }}"
         (click)="addRowBefore()"
       ></tiptap-button>
       } @if (config().addRowAfter !== false) {
       <tiptap-button
         icon="add_row_below"
-        title="{{ i18n.table().addRowAfter }}"
+        title="{{ t().addRowAfter }}"
         (click)="addRowAfter()"
       ></tiptap-button>
       } @if (config().deleteRow !== false) {
       <tiptap-button
         icon="delete"
-        title="{{ i18n.table().deleteRow }}"
+        title="{{ t().deleteRow }}"
         variant="danger"
         (click)="deleteRow()"
       ></tiptap-button>
@@ -3139,19 +3156,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
       @if (config().addColumnBefore !== false) {
       <tiptap-button
         icon="add_column_left"
-        title="{{ i18n.table().addColumnBefore }}"
+        title="{{ t().addColumnBefore }}"
         (click)="addColumnBefore()"
       ></tiptap-button>
       } @if (config().addColumnAfter !== false) {
       <tiptap-button
         icon="add_column_right"
-        title="{{ i18n.table().addColumnAfter }}"
+        title="{{ t().addColumnAfter }}"
         (click)="addColumnAfter()"
       ></tiptap-button>
       } @if (config().deleteColumn !== false) {
       <tiptap-button
         icon="delete"
-        title="{{ i18n.table().deleteColumn }}"
+        title="{{ t().deleteColumn }}"
         variant="danger"
         (click)="deleteColumn()"
       ></tiptap-button>
@@ -3163,13 +3180,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
       @if (config().toggleHeaderRow !== false) {
       <tiptap-button
         icon="toolbar"
-        title="{{ i18n.table().toggleHeaderRow }}"
+        title="{{ t().toggleHeaderRow }}"
         (click)="toggleHeaderRow()"
       ></tiptap-button>
       } @if (config().toggleHeaderColumn !== false) {
       <tiptap-button
         icon="dock_to_right"
-        title="{{ i18n.table().toggleHeaderColumn }}"
+        title="{{ t().toggleHeaderColumn }}"
         (click)="toggleHeaderColumn()"
       ></tiptap-button>
       } @if (config().separator !== false && config().deleteTable !== false) {
@@ -3180,7 +3197,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
       @if (config().deleteTable !== false) {
       <tiptap-button
         icon="delete_forever"
-        title="{{ i18n.table().deleteTable }}"
+        title="{{ t().deleteTable }}"
         variant="danger"
         (click)="deleteTable()"
       ></tiptap-button>
@@ -3283,7 +3300,10 @@ class TiptapCellBubbleMenuComponent {
             content: menuElement,
             trigger: "manual",
             placement: "top-start",
-            appendTo: () => document.body,
+            appendTo: (ref) => {
+                const host = this.editor().options.element.closest("angular-tiptap-editor");
+                return host || document.body;
+            },
             interactive: true,
             arrow: false,
             offset: [0, 8],
@@ -3440,6 +3460,7 @@ class TiptapToolbarComponent {
         this.editorCommands = editorCommands;
         this.editor = input.required();
         this.config = input.required();
+        this.imageUpload = input({});
         // Outputs pour les événements d'image
         this.imageUploaded = output();
         this.imageError = output();
@@ -3513,11 +3534,17 @@ class TiptapToolbarComponent {
     // Méthode pour insérer une image
     async insertImage() {
         try {
-            await this.imageService.selectAndUploadImage(this.editor());
+            const config = this.imageUpload() || {};
+            await this.imageService.selectAndUploadImage(this.editor(), {
+                quality: config.quality,
+                maxWidth: config.maxWidth,
+                maxHeight: config.maxHeight,
+                accept: config.allowedTypes?.join(',')
+            });
         }
         catch (error) {
-            console.error("Erreur lors de l'upload d'image:", error);
-            this.imageError.emit("Erreur lors de l'upload d'image");
+            console.error(this.i18nService.imageUpload().uploadError, error);
+            this.imageError.emit(this.i18nService.imageUpload().uploadError);
         }
     }
     // Méthode pour vider le contenu
@@ -3532,7 +3559,7 @@ class TiptapToolbarComponent {
         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: `
+    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 }, imageUpload: { classPropertyName: "imageUpload", publicName: "imageUpload", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { imageUploaded: "imageUploaded", imageError: "imageError" }, ngImport: i0, template: `
     <div class="tiptap-toolbar">
       @if (config().bold) {
       <tiptap-button
@@ -3607,7 +3634,6 @@ class TiptapToolbarComponent {
       <tiptap-button
         icon="format_h1"
         [title]="t().heading1"
-        variant="text"
         [active]="isActive('heading', { level: 1 })"
         (onClick)="toggleHeading(1)"
       />
@@ -3615,7 +3641,6 @@ class TiptapToolbarComponent {
       <tiptap-button
         icon="format_h2"
         [title]="t().heading2"
-        variant="text"
         [active]="isActive('heading', { level: 2 })"
         (onClick)="toggleHeading(2)"
       />
@@ -3623,7 +3648,6 @@ class TiptapToolbarComponent {
       <tiptap-button
         icon="format_h3"
         [title]="t().heading3"
-        variant="text"
         [active]="isActive('heading', { level: 3 })"
         (onClick)="toggleHeading(3)"
       />
@@ -3737,7 +3761,7 @@ class TiptapToolbarComponent {
       />
       }
     </div>
-  `, isInline: true, styles: [".tiptap-toolbar{display:flex;align-items:center;gap:4px;padding:4px 8px;background:#f8f9fa;border-bottom:1px solid #e2e8f0;flex-wrap:wrap;min-height:32px;position:relative}.toolbar-group{display:flex;align-items:center;gap:2px;padding:0 4px}.toolbar-separator{width:1px;height:24px;background:#e2e8f0;margin:0 4px}@media (max-width: 768px){.tiptap-toolbar{padding:6px 8px;gap:2px}.toolbar-group{gap:1px}}@keyframes toolbarSlideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.tiptap-toolbar{animation:toolbarSlideIn .3s cubic-bezier(.4,0,.2,1)}\n"], dependencies: [{ kind: "component", type: TiptapButtonComponent, selector: "tiptap-button", inputs: ["icon", "title", "active", "disabled", "color", "variant", "size", "iconSize"], outputs: ["onClick"] }, { kind: "component", type: TiptapSeparatorComponent, selector: "tiptap-separator", inputs: ["orientation", "size"] }, { kind: "component", type: TiptapTextColorPickerComponent, selector: "tiptap-text-color-picker", inputs: ["editor"], outputs: ["interactionChange", "requestUpdate"] }] }); }
+  `, isInline: true, styles: [".tiptap-toolbar{display:flex;align-items:center;gap:4px;padding:4px 8px;background:var(--ate-toolbar-background);border-bottom:1px solid var(--ate-toolbar-border-color);flex-wrap:wrap;min-height:32px;position:relative;-webkit-backdrop-filter:blur(var(--ate-menu-blur, 16px));backdrop-filter:blur(var(--ate-menu-blur, 16px))}.toolbar-group{display:flex;align-items:center;gap:2px;padding:0 4px}.toolbar-separator{width:1px;height:24px;background:var(--ate-toolbar-border-color);margin:0 4px}@media (max-width: 768px){.tiptap-toolbar{padding:6px 8px;gap:2px}.toolbar-group{gap:1px}}@keyframes toolbarSlideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.tiptap-toolbar{animation:toolbarSlideIn .3s cubic-bezier(.4,0,.2,1)}\n"], dependencies: [{ kind: "component", type: TiptapButtonComponent, selector: "tiptap-button", inputs: ["icon", "title", "active", "disabled", "color", "variant", "size", "iconSize"], outputs: ["onClick"] }, { kind: "component", type: TiptapSeparatorComponent, selector: "tiptap-separator", inputs: ["orientation", "size"] }, { kind: "component", type: TiptapTextColorPickerComponent, selector: "tiptap-text-color-picker", inputs: ["editor"], outputs: ["interactionChange", "requestUpdate"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapToolbarComponent, decorators: [{
             type: Component,
@@ -3820,7 +3844,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
       <tiptap-button
         icon="format_h1"
         [title]="t().heading1"
-        variant="text"
         [active]="isActive('heading', { level: 1 })"
         (onClick)="toggleHeading(1)"
       />
@@ -3828,7 +3851,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
       <tiptap-button
         icon="format_h2"
         [title]="t().heading2"
-        variant="text"
         [active]="isActive('heading', { level: 2 })"
         (onClick)="toggleHeading(2)"
       />
@@ -3836,7 +3858,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
       <tiptap-button
         icon="format_h3"
         [title]="t().heading3"
-        variant="text"
         [active]="isActive('heading', { level: 3 })"
         (onClick)="toggleHeading(3)"
       />
@@ -3950,152 +3971,150 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
       />
       }
     </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"] }]
+  `, styles: [".tiptap-toolbar{display:flex;align-items:center;gap:4px;padding:4px 8px;background:var(--ate-toolbar-background);border-bottom:1px solid var(--ate-toolbar-border-color);flex-wrap:wrap;min-height:32px;position:relative;-webkit-backdrop-filter:blur(var(--ate-menu-blur, 16px));backdrop-filter:blur(var(--ate-menu-blur, 16px))}.toolbar-group{display:flex;align-items:center;gap:2px;padding:0 4px}.toolbar-separator{width:1px;height:24px;background:var(--ate-toolbar-border-color);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$1 = [
-    {
-        title: "Titre 1",
-        description: "Grand titre de section",
-        icon: "format_h1",
-        keywords: ["heading", "h1", "titre", "title", "1"],
-        command: (editor) => editor.chain().focus().toggleHeading({ level: 1 }).run(),
-    },
-    {
-        title: "Titre 2",
-        description: "Titre de sous-section",
-        icon: "format_h2",
-        keywords: ["heading", "h2", "titre", "title", "2"],
-        command: (editor) => editor.chain().focus().toggleHeading({ level: 2 }).run(),
-    },
-    {
-        title: "Titre 3",
-        description: "Petit titre",
-        icon: "format_h3",
-        keywords: ["heading", "h3", "titre", "title", "3"],
-        command: (editor) => editor.chain().focus().toggleHeading({ level: 3 }).run(),
-    },
-    {
-        title: "Liste à puces",
-        description: "Créer une liste à puces",
-        icon: "format_list_bulleted",
-        keywords: ["bullet", "list", "liste", "puces", "ul"],
-        command: (editor) => editor.chain().focus().toggleBulletList().run(),
-    },
-    {
-        title: "Liste numérotée",
-        description: "Créer une liste numérotée",
-        icon: "format_list_numbered",
-        keywords: ["numbered", "list", "liste", "numérotée", "ol", "ordered"],
-        command: (editor) => editor.chain().focus().toggleOrderedList().run(),
-    },
-    {
-        title: "Citation",
-        description: "Ajouter une citation",
-        icon: "format_quote",
-        keywords: ["quote", "blockquote", "citation"],
-        command: (editor) => editor.chain().focus().toggleBlockquote().run(),
-    },
-    {
-        title: "Code",
-        description: "Bloc de code",
-        icon: "code",
-        keywords: ["code", "codeblock", "pre"],
-        command: (editor) => editor.chain().focus().toggleCodeBlock().run(),
-    },
-    {
-        title: "Image",
-        description: "Insérer une image",
-        icon: "image",
-        keywords: ["image", "photo", "picture", "img"],
-        command: (editor) => {
-            // Créer un input file temporaire pour sélectionner une image
-            const input = document.createElement("input");
-            input.type = "file";
-            input.accept = "image/*";
-            input.style.display = "none";
-            input.addEventListener("change", async (e) => {
-                const file = e.target.files?.[0];
-                if (file && file.type.startsWith("image/")) {
-                    try {
-                        // Utiliser la méthode de compression unifiée
-                        const canvas = document.createElement("canvas");
-                        const ctx = canvas.getContext("2d");
-                        const img = new Image();
-                        img.onload = () => {
-                            // Vérifier les dimensions (max 1920x1080)
-                            const maxWidth = 1920;
-                            const 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);
-                            // Convertir en base64 avec compression
-                            canvas.toBlob((blob) => {
-                                if (blob) {
-                                    const reader = new FileReader();
-                                    reader.onload = (e) => {
-                                        const base64 = e.target?.result;
-                                        if (base64) {
-                                            // Utiliser setResizableImage avec toutes les propriétés
-                                            editor
-                                                .chain()
-                                                .focus()
-                                                .setResizableImage({
-                                                src: base64,
-                                                alt: file.name,
-                                                title: `${file.name} (${Math.round(width)}×${Math.round(height)})`,
-                                                width: Math.round(width),
-                                                height: Math.round(height),
-                                            })
-                                                .run();
-                                        }
-                                    };
-                                    reader.readAsDataURL(blob);
-                                }
-                            }, file.type, 0.8 // qualité de compression
-                            );
-                        };
-                        img.onerror = () => {
-                            console.error("Erreur lors du chargement de l'image");
-                        };
-                        img.src = URL.createObjectURL(file);
-                    }
-                    catch (error) {
-                        console.error("Erreur lors de l'upload:", error);
-                    }
-                }
-                document.body.removeChild(input);
-            });
-            document.body.appendChild(input);
-            input.click();
-        },
-    },
-    {
-        title: "Ligne horizontale",
-        description: "Ajouter une ligne de séparation",
-        icon: "horizontal_rule",
-        keywords: ["hr", "horizontal", "rule", "ligne", "séparation"],
-        command: (editor) => editor.chain().focus().setHorizontalRule().run(),
-    },
+/**
+ * Clés des commandes natives dans l'ordre d'affichage
+ */
+const SLASH_COMMAND_KEYS = [
+    "heading1",
+    "heading2",
+    "heading3",
+    "bulletList",
+    "orderedList",
+    "blockquote",
+    "code",
+    "image",
+    "horizontalRule",
+    "table",
 ];
+/**
+ * Configuration par défaut : toutes les commandes natives sont activées
+ */
+const DEFAULT_SLASH_COMMANDS_CONFIG = {
+    heading1: true,
+    heading2: true,
+    heading3: true,
+    bulletList: true,
+    orderedList: true,
+    blockquote: true,
+    code: true,
+    image: true,
+    horizontalRule: true,
+    table: true,
+};
+/**
+ * Factory pour créer les commandes natives avec leurs traductions et leur logique d'exécution.
+ * Utilise les services de l'éditeur pour garantir une cohérence de comportement.
+ */
+function createDefaultSlashCommands(i18n, commands, images, imageOptions) {
+    const t = i18n.slashCommands();
+    return [
+        {
+            title: t.heading1.title,
+            description: t.heading1.description,
+            icon: "format_h1",
+            keywords: t.heading1.keywords,
+            command: (editor) => commands.toggleHeading(editor, 1),
+        },
+        {
+            title: t.heading2.title,
+            description: t.heading2.description,
+            icon: "format_h2",
+            keywords: t.heading2.keywords,
+            command: (editor) => commands.toggleHeading(editor, 2),
+        },
+        {
+            title: t.heading3.title,
+            description: t.heading3.description,
+            icon: "format_h3",
+            keywords: t.heading3.keywords,
+            command: (editor) => commands.toggleHeading(editor, 3),
+        },
+        {
+            title: t.bulletList.title,
+            description: t.bulletList.description,
+            icon: "format_list_bulleted",
+            keywords: t.bulletList.keywords,
+            command: (editor) => commands.toggleBulletList(editor),
+        },
+        {
+            title: t.orderedList.title,
+            description: t.orderedList.description,
+            icon: "format_list_numbered",
+            keywords: t.orderedList.keywords,
+            command: (editor) => commands.toggleOrderedList(editor),
+        },
+        {
+            title: t.blockquote.title,
+            description: t.blockquote.description,
+            icon: "format_quote",
+            keywords: t.blockquote.keywords,
+            command: (editor) => commands.toggleBlockquote(editor),
+        },
+        {
+            title: t.code.title,
+            description: t.code.description,
+            icon: "code",
+            keywords: t.code.keywords,
+            command: (editor) => commands.toggleCode(editor),
+        },
+        {
+            title: t.image.title,
+            description: t.image.description,
+            icon: "image",
+            keywords: t.image.keywords,
+            command: (editor) => images.selectAndUploadImage(editor, {
+                quality: imageOptions?.quality,
+                maxWidth: imageOptions?.maxWidth,
+                maxHeight: imageOptions?.maxHeight,
+                accept: imageOptions?.allowedTypes?.join(',')
+            }),
+        },
+        {
+            title: t.horizontalRule.title,
+            description: t.horizontalRule.description,
+            icon: "horizontal_rule",
+            keywords: t.horizontalRule.keywords,
+            command: (editor) => commands.insertHorizontalRule(editor),
+        },
+        {
+            title: t.table.title,
+            description: t.table.description,
+            icon: "table_view",
+            keywords: t.table.keywords,
+            command: (editor) => commands.insertTable(editor),
+        },
+    ];
+}
+/**
+ * Filtre et assemble les commandes selon la configuration fournie.
+ */
+function filterSlashCommands(config, i18n, commands, images, imageOptions) {
+    const allNatives = createDefaultSlashCommands(i18n, commands, images, imageOptions);
+    const activeConfig = { ...DEFAULT_SLASH_COMMANDS_CONFIG, ...config };
+    const filtered = allNatives.filter((_, index) => {
+        const key = SLASH_COMMAND_KEYS[index];
+        return key && activeConfig[key] !== false;
+    });
+    if (config.custom && Array.isArray(config.custom)) {
+        return [...filtered, ...config.custom];
+    }
+    return filtered;
+}
+
+// La définition des commandes par défaut est maintenant centralisée dans src/lib/config/i18n-slash-commands.ts
 class TiptapSlashCommandsComponent {
     constructor() {
+        this.i18nService = inject(TiptapI18nService);
         this.editor = input.required();
-        this.config = input({
-            commands: DEFAULT_SLASH_COMMANDS$1,
-        });
+        this.config = input(undefined);
         // Output pour l'upload d'image
         this.imageUploadRequested = output();
         this.tippyInstance = null;
         this.imageService = inject(ImageService);
+        this.editorCommands = inject(EditorCommandsService);
         // État local
         this.isActive = false;
         this.currentQuery = signal("");
@@ -4103,32 +4122,12 @@ class TiptapSlashCommandsComponent {
         // Signal pour l'index sélectionné
         this.selectedIndex = signal(0);
         this.commands = computed(() => {
-            const configCommands = this.config().commands || DEFAULT_SLASH_COMMANDS$1;
-            // Remplacer la commande image par une version qui utilise l'output
-            return configCommands.map((command) => {
-                if (command.icon === "image") {
-                    return {
-                        ...command,
-                        command: (editor) => {
-                            // Créer un input file temporaire
-                            const input = document.createElement("input");
-                            input.type = "file";
-                            input.accept = "image/*";
-                            input.style.display = "none";
-                            input.addEventListener("change", (e) => {
-                                const file = e.target.files?.[0];
-                                if (file && file.type.startsWith("image/")) {
-                                    this.imageUploadRequested.emit(file);
-                                }
-                                document.body.removeChild(input);
-                            });
-                            document.body.appendChild(input);
-                            input.click();
-                        },
-                    };
-                }
-                return command;
-            });
+            const config = this.config();
+            if (config && config.commands) {
+                return config.commands;
+            }
+            // Fallback vers les commandes natives par défaut
+            return createDefaultSlashCommands(this.i18nService, this.editorCommands, this.imageService);
         });
         this.filteredCommands = computed(() => {
             const query = this.currentQuery().toLowerCase();
@@ -4265,7 +4264,11 @@ class TiptapSlashCommandsComponent {
             content: menuElement,
             trigger: "manual",
             placement: "bottom-start",
-            appendTo: () => document.body,
+            appendTo: (ref) => {
+                // Toujours essayer de remonter jusqu'au host de l'éditeur pour hériter des variables CSS
+                const host = this.editor().options.element.closest("angular-tiptap-editor");
+                return host || document.body;
+            },
             interactive: true,
             arrow: false,
             offset: [0, 8],
@@ -4304,7 +4307,7 @@ class TiptapSlashCommandsComponent {
             return new DOMRect(coords.left, coords.top, 0, coords.bottom - coords.top);
         }
         catch (error) {
-            console.warn("Erreur lors du calcul des coordonnées:", error);
+            console.warn("Error calculating coordinates:", error);
             // Fallback sur window.getSelection
             const selection = window.getSelection();
             if (!selection || selection.rangeCount === 0) {
@@ -4337,14 +4340,18 @@ class TiptapSlashCommandsComponent {
         const ed = this.editor();
         if (!ed || !this.slashRange)
             return;
-        // Supprimer le texte slash
+        // Supprimer le texte slash ("/")
         const { tr } = ed.state;
         tr.delete(this.slashRange.from, this.slashRange.to);
         ed.view.dispatch(tr);
-        // Cacher le menu
+        // Cacher le menu immédiatement
         this.hideTippy();
-        // Exécuter la commande
+        this.isActive = false;
+        // Redonner le focus à l'éditeur et exécuter la commande
+        // On utilise un micro-délai pour s'assurer que le DOM ProseMirror est stable
+        // après la suppression du texte "/"
         setTimeout(() => {
+            ed.commands.focus();
             command.command(ed);
         }, 10);
     }
@@ -4408,7 +4415,7 @@ class TiptapSlashCommandsComponent {
       <div
         class="slash-command-item"
         [class.selected]="$index === selectedIndex()"
-        (click)="executeCommand(command)"
+        (mousedown)="executeCommand(command); $event.preventDefault(); $event.stopPropagation()"
         (mouseenter)="selectedIndex.set($index)"
       >
         <div class="slash-command-icon">
@@ -4421,7 +4428,7 @@ class TiptapSlashCommandsComponent {
       </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: [".slash-commands-menu{background:var(--ate-menu-bg);-webkit-backdrop-filter:blur(var(--ate-menu-blur, 16px));backdrop-filter:blur(var(--ate-menu-blur, 16px));border:1px solid var(--ate-menu-border);border-radius:var(--ate-border-radius, 12px);box-shadow:var(--ate-menu-shadow);padding:6px;max-height:320px;overflow-y:auto;min-width:280px;outline:none;animation:slashMenuFadeIn .2s cubic-bezier(0,0,.2,1);scrollbar-width:thin;scrollbar-color:var(--ate-scrollbar-thumb) var(--ate-scrollbar-track)}.slash-commands-menu::-webkit-scrollbar{width:var(--ate-scrollbar-width)}.slash-commands-menu::-webkit-scrollbar-track{background:var(--ate-scrollbar-track)}.slash-commands-menu::-webkit-scrollbar-thumb{background:var(--ate-scrollbar-thumb);border:3px solid transparent;background-clip:content-box;border-radius:10px}.slash-commands-menu::-webkit-scrollbar-thumb:hover{background:var(--ate-scrollbar-thumb-hover);background-clip:content-box}@keyframes slashMenuFadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.slash-command-item{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:var(--ate-border-radius, 8px);cursor:pointer;transition:all .15s ease;border:var(--ate-border-width, 1px) solid transparent;outline:none;margin-bottom:2px}.slash-command-item:last-child{margin-bottom:0}.slash-command-item:hover{background:var(--ate-surface-secondary)}.slash-command-item.selected{background:var(--ate-primary-light);border-color:var(--ate-primary-light-alpha)}.slash-command-icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:var(--ate-surface-tertiary);border-radius:var(--ate-border-radius, 8px);color:var(--ate-primary);flex-shrink:0;transition:all .15s ease}.slash-command-item.selected .slash-command-icon{background:var(--ate-primary);color:var(--ate-primary-contrast, #ffffff)}.slash-command-icon .material-symbols-outlined{font-size:18px}.slash-command-content{flex:1;min-width:0}.slash-command-title{font-weight:500;color:var(--ate-text);font-size:14px;margin-bottom:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.slash-command-description{color:var(--ate-text-secondary);font-size:11px;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,
@@ -4431,7 +4438,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
       <div
         class="slash-command-item"
         [class.selected]="$index === selectedIndex()"
-        (click)="executeCommand(command)"
+        (mousedown)="executeCommand(command); $event.preventDefault(); $event.stopPropagation()"
         (mouseenter)="selectedIndex.set($index)"
       >
         <div class="slash-command-icon">
@@ -4444,7 +4451,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
       </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"] }]
+  `, styles: [".slash-commands-menu{background:var(--ate-menu-bg);-webkit-backdrop-filter:blur(var(--ate-menu-blur, 16px));backdrop-filter:blur(var(--ate-menu-blur, 16px));border:1px solid var(--ate-menu-border);border-radius:var(--ate-border-radius, 12px);box-shadow:var(--ate-menu-shadow);padding:6px;max-height:320px;overflow-y:auto;min-width:280px;outline:none;animation:slashMenuFadeIn .2s cubic-bezier(0,0,.2,1);scrollbar-width:thin;scrollbar-color:var(--ate-scrollbar-thumb) var(--ate-scrollbar-track)}.slash-commands-menu::-webkit-scrollbar{width:var(--ate-scrollbar-width)}.slash-commands-menu::-webkit-scrollbar-track{background:var(--ate-scrollbar-track)}.slash-commands-menu::-webkit-scrollbar-thumb{background:var(--ate-scrollbar-thumb);border:3px solid transparent;background-clip:content-box;border-radius:10px}.slash-commands-menu::-webkit-scrollbar-thumb:hover{background:var(--ate-scrollbar-thumb-hover);background-clip:content-box}@keyframes slashMenuFadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.slash-command-item{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:var(--ate-border-radius, 8px);cursor:pointer;transition:all .15s ease;border:var(--ate-border-width, 1px) solid transparent;outline:none;margin-bottom:2px}.slash-command-item:last-child{margin-bottom:0}.slash-command-item:hover{background:var(--ate-surface-secondary)}.slash-command-item.selected{background:var(--ate-primary-light);border-color:var(--ate-primary-light-alpha)}.slash-command-icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:var(--ate-surface-tertiary);border-radius:var(--ate-border-radius, 8px);color:var(--ate-primary);flex-shrink:0;transition:all .15s ease}.slash-command-item.selected .slash-command-icon{background:var(--ate-primary);color:var(--ate-primary-contrast, #ffffff)}.slash-command-icon .material-symbols-outlined{font-size:18px}.slash-command-content{flex:1;min-width:0}.slash-command-title{font-weight:500;color:var(--ate-text);font-size:14px;margin-bottom:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.slash-command-description{color:var(--ate-text-secondary);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
         }], ctorParameters: () => [], propDecorators: { menuRef: [{
                 type: ViewChild,
                 args: ["menuRef", { static: false }]
@@ -4452,350 +4459,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
 
 // 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="drag-overlay"
-        (dragover)="onDragOver($event)"
-        (drop)="onDrop($event)"
-        (dragleave)="onDragLeave($event)"
-      >
-        <div class="drag-content">
-          <span class="material-symbols-outlined">cloud_upload</span>
-          <p>Déposez votre image ici</p>
-        </div>
-      </div>
-      }
-
-      <!-- Barre de progression -->
-      @if (isUploading() && uploadProgress() > 0) {
-      <div class="upload-progress">
-        <div class="progress-bar">
-          <div class="progress-fill" [style.width.%]="uploadProgress()"></div>
-        </div>
-        <div class="progress-text">{{ uploadProgress() }}%</div>
-      </div>
-      }
-
-      <!-- Prévisualisation -->
-      @if (config().showPreview && previewImage()) {
-      <div class="image-preview">
-        <img [src]="previewImage()" alt="Prévisualisation" />
-        <div class="preview-info">
-          <span>{{ previewInfo() }}</span>
-        </div>
-        <button
-          class="preview-close"
-          (click)="clearPreview()"
-          title="Fermer la prévisualisation"
-        >
-          <span class="material-symbols-outlined">close</span>
-        </button>
-      </div>
-      }
-
-      <!-- Messages d'erreur -->
-      @if (errorMessage()) {
-      <div class="error-message">
-        <span class="material-symbols-outlined">error</span>
-        {{ errorMessage() }}
-      </div>
-      }
-    </div>
-  `, isInline: true, styles: [".image-upload-container{position:relative;display:inline-block}.drag-overlay{position:fixed;inset:0;background:#3182ce1a;border:2px dashed #3182ce;border-radius:6px;display:flex;align-items:center;justify-content:center;z-index:1000;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.drag-content{text-align:center;color:#3182ce;font-weight:600}.drag-content .material-symbols-outlined{font-size:48px;margin-bottom:16px}.drag-content p{margin:0;font-size:18px}.upload-progress{position:absolute;top:100%;left:0;background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:12px;margin-top:8px;z-index:100;min-width:200px;box-shadow:0 4px 12px #00000026}.progress-bar{width:100%;height:6px;background:#e2e8f0;border-radius:3px;overflow:hidden;margin-bottom:8px}.progress-fill{height:100%;background:#3182ce;border-radius:3px;transition:width .3s ease}.progress-text{font-size:12px;color:#4a5568;text-align:center}.image-preview{position:absolute;top:100%;left:0;background:#fff;border:1px solid #e2e8f0;border-radius:8px;box-shadow:0 4px 12px #00000026;padding:8px;margin-top:8px;z-index:100;min-width:200px}.image-preview img{max-width:200px;max-height:150px;border-radius:4px;display:block}.preview-info{margin-top:8px;font-size:11px;color:#718096;text-align:center}.preview-close{position:absolute;top:4px;right:4px;background:#000000b3;color:#fff;border:none;border-radius:50%;width:24px;height:24px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px}.preview-close:hover{background:#000000e6}.error-message{position:absolute;top:100%;left:0;background:#fed7d7;color:#c53030;border:1px solid #feb2b2;border-radius:6px;padding:8px 12px;margin-top:8px;font-size:12px;display:flex;align-items:center;gap:6px;z-index:100;min-width:200px}.error-message .material-symbols-outlined{font-size:16px}\n"], dependencies: [{ kind: "component", type: TiptapButtonComponent, selector: "tiptap-button", inputs: ["icon", "title", "active", "disabled", "color", "variant", "size", "iconSize"], outputs: ["onClick"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapImageUploadComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "tiptap-image-upload", standalone: true, imports: [TiptapButtonComponent], template: `
-    <div class="image-upload-container">
-      <!-- Bouton d'upload -->
-      <tiptap-button
-        icon="image"
-        title="Ajouter une image"
-        [disabled]="isUploading()"
-        (onClick)="triggerFileInput()"
-      />
-
-      <!-- Input file caché -->
-      <input
-        #fileInput
-        type="file"
-        [accept]="acceptedTypes()"
-        [multiple]="config().multiple"
-        (change)="onFileSelected($event)"
-        style="display: none;"
-      />
-
-      <!-- Zone de drag & drop -->
-      @if (config().enableDragDrop && isDragOver()) {
-      <div
-        class="drag-overlay"
-        (dragover)="onDragOver($event)"
-        (drop)="onDrop($event)"
-        (dragleave)="onDragLeave($event)"
-      >
-        <div class="drag-content">
-          <span class="material-symbols-outlined">cloud_upload</span>
-          <p>Déposez votre image ici</p>
-        </div>
-      </div>
-      }
-
-      <!-- Barre de progression -->
-      @if (isUploading() && uploadProgress() > 0) {
-      <div class="upload-progress">
-        <div class="progress-bar">
-          <div class="progress-fill" [style.width.%]="uploadProgress()"></div>
-        </div>
-        <div class="progress-text">{{ uploadProgress() }}%</div>
-      </div>
-      }
-
-      <!-- Prévisualisation -->
-      @if (config().showPreview && previewImage()) {
-      <div class="image-preview">
-        <img [src]="previewImage()" alt="Prévisualisation" />
-        <div class="preview-info">
-          <span>{{ previewInfo() }}</span>
-        </div>
-        <button
-          class="preview-close"
-          (click)="clearPreview()"
-          title="Fermer la prévisualisation"
-        >
-          <span class="material-symbols-outlined">close</span>
-        </button>
-      </div>
-      }
-
-      <!-- Messages d'erreur -->
-      @if (errorMessage()) {
-      <div class="error-message">
-        <span class="material-symbols-outlined">error</span>
-        {{ errorMessage() }}
-      </div>
-      }
-    </div>
-  `, 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) { }
     registerOnChange(fn) { }
@@ -4823,178 +4486,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
                 }]
         }] });
 
-/**
- * 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
- */
-function createI18nSlashCommands(i18nService) {
-    const slashCommands = i18nService.slashCommands();
-    return [
-        {
-            title: slashCommands.heading1.title,
-            description: slashCommands.heading1.description,
-            icon: "format_h1",
-            keywords: slashCommands.heading1.keywords,
-            command: (editor) => editor.chain().focus().toggleHeading({ level: 1 }).run(),
-        },
-        {
-            title: slashCommands.heading2.title,
-            description: slashCommands.heading2.description,
-            icon: "format_h2",
-            keywords: slashCommands.heading2.keywords,
-            command: (editor) => editor.chain().focus().toggleHeading({ level: 2 }).run(),
-        },
-        {
-            title: slashCommands.heading3.title,
-            description: slashCommands.heading3.description,
-            icon: "format_h3",
-            keywords: slashCommands.heading3.keywords,
-            command: (editor) => editor.chain().focus().toggleHeading({ level: 3 }).run(),
-        },
-        {
-            title: slashCommands.bulletList.title,
-            description: slashCommands.bulletList.description,
-            icon: "format_list_bulleted",
-            keywords: slashCommands.bulletList.keywords,
-            command: (editor) => editor.chain().focus().toggleBulletList().run(),
-        },
-        {
-            title: slashCommands.orderedList.title,
-            description: slashCommands.orderedList.description,
-            icon: "format_list_numbered",
-            keywords: slashCommands.orderedList.keywords,
-            command: (editor) => editor.chain().focus().toggleOrderedList().run(),
-        },
-        {
-            title: slashCommands.blockquote.title,
-            description: slashCommands.blockquote.description,
-            icon: "format_quote",
-            keywords: slashCommands.blockquote.keywords,
-            command: (editor) => editor.chain().focus().toggleBlockquote().run(),
-        },
-        {
-            title: slashCommands.code.title,
-            description: slashCommands.code.description,
-            icon: "code",
-            keywords: slashCommands.code.keywords,
-            command: (editor) => editor.chain().focus().toggleCodeBlock().run(),
-        },
-        {
-            title: slashCommands.image.title,
-            description: slashCommands.image.description,
-            icon: "image",
-            keywords: slashCommands.image.keywords,
-            command: (editor) => {
-                // Créer un input file temporaire pour sélectionner une image
-                const input = document.createElement("input");
-                input.type = "file";
-                input.accept = "image/*";
-                input.style.display = "none";
-                input.addEventListener("change", async (e) => {
-                    const file = e.target.files?.[0];
-                    if (file && file.type.startsWith("image/")) {
-                        try {
-                            // Utiliser la méthode de compression unifiée
-                            const canvas = document.createElement("canvas");
-                            const ctx = canvas.getContext("2d");
-                            const img = new Image();
-                            img.onload = () => {
-                                // Vérifier les dimensions (max 1920x1080)
-                                const maxWidth = 1920;
-                                const 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);
-                                // Convertir en base64 avec compression
-                                canvas.toBlob((blob) => {
-                                    if (blob) {
-                                        const reader = new FileReader();
-                                        reader.onload = (e) => {
-                                            const base64 = e.target?.result;
-                                            if (base64) {
-                                                // Utiliser setResizableImage avec toutes les propriétés
-                                                editor
-                                                    .chain()
-                                                    .focus()
-                                                    .setResizableImage({
-                                                    src: base64,
-                                                    alt: file.name,
-                                                    title: `${file.name} (${Math.round(width)}×${Math.round(height)})`,
-                                                    width: Math.round(width),
-                                                    height: Math.round(height),
-                                                })
-                                                    .run();
-                                            }
-                                        };
-                                        reader.readAsDataURL(blob);
-                                    }
-                                }, file.type, 0.8 // qualité de compression
-                                );
-                            };
-                            img.onerror = () => {
-                                console.error(i18nService.editor().imageLoadError);
-                            };
-                            img.src = URL.createObjectURL(file);
-                        }
-                        catch (error) {
-                            console.error("Error uploading image:", error);
-                        }
-                    }
-                    document.body.removeChild(input);
-                });
-                document.body.appendChild(input);
-                input.click();
-            },
-        },
-        {
-            title: slashCommands.horizontalRule.title,
-            description: slashCommands.horizontalRule.description,
-            icon: "horizontal_rule",
-            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(),
-        },
-    ];
-}
-/**
- * Fonction utilitaire pour filtrer les slash commands selon les commandes actives
- */
-function filterSlashCommands(activeCommands, i18nService) {
-    const allCommands = createI18nSlashCommands(i18nService);
-    return allCommands.filter((command, index) => {
-        const commandKey = SLASH_COMMAND_KEYS[index];
-        return commandKey && activeCommands.has(commandKey);
-    });
-}
-
 // Configuration par défaut de la toolbar
 const DEFAULT_TOOLBAR_CONFIG = {
     bold: true,
@@ -5066,9 +4557,7 @@ const DEFAULT_CELL_MENU_CONFIG = {
     mergeCells: true,
     splitCell: true,
 };
-const DEFAULT_SLASH_COMMANDS = {
-    commands: [], // Sera rempli par filterSlashCommands
-};
+// La configuration des slash commands est gérée dynamiquement via slashCommandsConfigComputed
 class AngularTiptapEditorComponent {
     constructor() {
         this.content = input("");
@@ -5083,7 +4572,8 @@ class AngularTiptapEditorComponent {
         this.maxCharacters = input(undefined);
         this.enableOfficePaste = input(true);
         this.enableSlashCommands = input(true);
-        this.slashCommandsConfig = input(undefined);
+        this.slashCommands = input({});
+        this.customSlashCommands = input(undefined);
         this.locale = input(undefined);
         this.autofocus = input(false);
         this.tiptapExtensions = input([]);
@@ -5183,13 +4673,15 @@ class AngularTiptapEditorComponent {
         }));
         // Computed pour la configuration des slash commands
         this.slashCommandsConfigComputed = computed(() => {
-            const config = this.slashCommandsConfig();
-            if (config) {
-                return config;
+            const customConfig = this.customSlashCommands();
+            if (customConfig) {
+                return customConfig;
             }
-            // Configuration par défaut avec toutes les commandes
-            const allCommands = filterSlashCommands(new Set(SLASH_COMMAND_KEYS), this.i18nService);
-            return { commands: allCommands };
+            // Utilise l'utilitaire filterSlashCommands qui gère maintenant 
+            // les défauts, le filtrage et l'ajout de commandes personnalisées
+            return {
+                commands: filterSlashCommands(this.slashCommands(), this.i18nService, this.editorCommandsService, this.imageService, this.imageUploadConfig()),
+            };
         });
         this._destroyRef = inject(DestroyRef);
         // NgControl pour gérer les FormControls
@@ -5386,22 +4878,6 @@ class AngularTiptapEditorComponent {
             this._wordCount.set(storage.words());
         }
     }
-    // Méthodes pour l'upload d'images
-    onImageUploaded(result) {
-        const currentEditor = this.editor();
-        if (currentEditor) {
-            this.imageService.insertImage(currentEditor, {
-                src: result.src,
-                alt: result.name,
-                title: `${result.name} (${result.width}×${result.height})`,
-                width: result.width,
-                height: result.height,
-            });
-        }
-    }
-    onImageUploadError(error) {
-        // Ici vous pourriez afficher une notification à l'utilisateur
-    }
     // Gestion de l'upload d'image depuis les slash commands
     async onSlashCommandImageUpload(file) {
         const currentEditor = this.editor();
@@ -5435,7 +4911,12 @@ class AngularTiptapEditorComponent {
         const currentEditor = this.editor();
         if (currentEditor) {
             try {
-                await this.imageService.uploadAndInsertImage(currentEditor, file);
+                const config = this.imageUploadConfig();
+                await this.imageService.uploadAndInsertImage(currentEditor, file, {
+                    quality: config.quality,
+                    maxWidth: config.maxWidth,
+                    maxHeight: config.maxHeight
+                });
             }
             catch (error) {
                 // Gérer l'erreur silencieusement ou afficher une notification
@@ -5520,19 +5001,15 @@ class AngularTiptapEditorComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: AngularTiptapEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: AngularTiptapEditorComponent, isStandalone: true, selector: "angular-tiptap-editor", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, fillContainer: { classPropertyName: "fillContainer", publicName: "fillContainer", isSignal: true, isRequired: false, transformFunction: null }, showToolbar: { classPropertyName: "showToolbar", publicName: "showToolbar", isSignal: true, isRequired: false, transformFunction: null }, showCharacterCount: { classPropertyName: "showCharacterCount", publicName: "showCharacterCount", isSignal: true, isRequired: false, transformFunction: null }, maxCharacters: { classPropertyName: "maxCharacters", publicName: "maxCharacters", isSignal: true, isRequired: false, transformFunction: null }, enableOfficePaste: { classPropertyName: "enableOfficePaste", publicName: "enableOfficePaste", isSignal: true, isRequired: false, transformFunction: null }, enableSlashCommands: { classPropertyName: "enableSlashCommands", publicName: "enableSlashCommands", isSignal: true, isRequired: false, transformFunction: null }, slashCommandsConfig: { classPropertyName: "slashCommandsConfig", publicName: "slashCommandsConfig", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, tiptapExtensions: { classPropertyName: "tiptapExtensions", publicName: "tiptapExtensions", isSignal: true, isRequired: false, transformFunction: null }, tiptapOptions: { classPropertyName: "tiptapOptions", publicName: "tiptapOptions", isSignal: true, isRequired: false, transformFunction: null }, showBubbleMenu: { classPropertyName: "showBubbleMenu", publicName: "showBubbleMenu", isSignal: true, isRequired: false, transformFunction: null }, bubbleMenu: { classPropertyName: "bubbleMenu", publicName: "bubbleMenu", isSignal: true, isRequired: false, transformFunction: null }, showImageBubbleMenu: { classPropertyName: "showImageBubbleMenu", publicName: "showImageBubbleMenu", isSignal: true, isRequired: false, transformFunction: null }, imageBubbleMenu: { classPropertyName: "imageBubbleMenu", publicName: "imageBubbleMenu", isSignal: true, isRequired: false, transformFunction: null }, toolbar: { classPropertyName: "toolbar", publicName: "toolbar", isSignal: true, isRequired: false, transformFunction: null }, imageUpload: { classPropertyName: "imageUpload", publicName: "imageUpload", isSignal: true, isRequired: false, transformFunction: null }, imageUploadHandler: { classPropertyName: "imageUploadHandler", publicName: "imageUploadHandler", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { contentChange: "contentChange", editorCreated: "editorCreated", editorUpdate: "editorUpdate", editorFocus: "editorFocus", editorBlur: "editorBlur" }, host: { properties: { "class.fill-container": "fillContainer()" } }, viewQueries: [{ propertyName: "editorElement", first: true, predicate: ["editorElement"], descendants: true, isSignal: true }], hostDirectives: [{ directive: NoopValueAccessorDirective }], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: AngularTiptapEditorComponent, isStandalone: true, selector: "angular-tiptap-editor", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, fillContainer: { classPropertyName: "fillContainer", publicName: "fillContainer", isSignal: true, isRequired: false, transformFunction: null }, showToolbar: { classPropertyName: "showToolbar", publicName: "showToolbar", isSignal: true, isRequired: false, transformFunction: null }, showCharacterCount: { classPropertyName: "showCharacterCount", publicName: "showCharacterCount", isSignal: true, isRequired: false, transformFunction: null }, maxCharacters: { classPropertyName: "maxCharacters", publicName: "maxCharacters", isSignal: true, isRequired: false, transformFunction: null }, enableOfficePaste: { classPropertyName: "enableOfficePaste", publicName: "enableOfficePaste", isSignal: true, isRequired: false, transformFunction: null }, enableSlashCommands: { classPropertyName: "enableSlashCommands", publicName: "enableSlashCommands", isSignal: true, isRequired: false, transformFunction: null }, slashCommands: { classPropertyName: "slashCommands", publicName: "slashCommands", isSignal: true, isRequired: false, transformFunction: null }, customSlashCommands: { classPropertyName: "customSlashCommands", publicName: "customSlashCommands", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, tiptapExtensions: { classPropertyName: "tiptapExtensions", publicName: "tiptapExtensions", isSignal: true, isRequired: false, transformFunction: null }, tiptapOptions: { classPropertyName: "tiptapOptions", publicName: "tiptapOptions", isSignal: true, isRequired: false, transformFunction: null }, showBubbleMenu: { classPropertyName: "showBubbleMenu", publicName: "showBubbleMenu", isSignal: true, isRequired: false, transformFunction: null }, bubbleMenu: { classPropertyName: "bubbleMenu", publicName: "bubbleMenu", isSignal: true, isRequired: false, transformFunction: null }, showImageBubbleMenu: { classPropertyName: "showImageBubbleMenu", publicName: "showImageBubbleMenu", isSignal: true, isRequired: false, transformFunction: null }, imageBubbleMenu: { classPropertyName: "imageBubbleMenu", publicName: "imageBubbleMenu", isSignal: true, isRequired: false, transformFunction: null }, toolbar: { classPropertyName: "toolbar", publicName: "toolbar", isSignal: true, isRequired: false, transformFunction: null }, imageUpload: { classPropertyName: "imageUpload", publicName: "imageUpload", isSignal: true, isRequired: false, transformFunction: null }, imageUploadHandler: { classPropertyName: "imageUploadHandler", publicName: "imageUploadHandler", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { contentChange: "contentChange", editorCreated: "editorCreated", editorUpdate: "editorUpdate", editorFocus: "editorFocus", editorBlur: "editorBlur" }, host: { properties: { "class.fill-container": "fillContainer()" } }, viewQueries: [{ propertyName: "editorElement", first: true, predicate: ["editorElement"], descendants: true, isSignal: true }], hostDirectives: [{ directive: NoopValueAccessorDirective }], ngImport: i0, template: `
     <div class="tiptap-editor" [class.fill-container]="fillContainer()">
       <!-- Toolbar -->
       @if (showToolbar() && editor()) {
-      <tiptap-toolbar [editor]="editor()!" [config]="toolbarConfig()">
-        <div image-upload class="image-upload-container">
-          <tiptap-image-upload
-            [config]="imageUploadConfig()"
-            (imageSelected)="onImageUploaded($event)"
-            (error)="onImageUploadError($event)"
-          />
-        </div>
-      </tiptap-toolbar>
+      <tiptap-toolbar 
+        [editor]="editor()!" 
+        [config]="toolbarConfig()"
+        [imageUpload]="imageUploadConfig()"
+      />
       }
 
       <!-- Contenu de l'éditeur -->
@@ -5591,8 +5068,6 @@ class AngularTiptapEditorComponent {
       ></tiptap-cell-bubble-menu>
       }
 
-      <!-- Table Edit Button - Supprimé car remplacé par le menu bubble -->
-
       <!-- Compteur de caractères -->
       @if (showCharacterCount()) {
       <div class="character-count">
@@ -5606,7 +5081,7 @@ class AngularTiptapEditorComponent {
       </div>
       }
     </div>
-  `, isInline: true, styles: [":host(.fill-container){display:block;height:100%}.tiptap-editor{border:2px solid #e2e8f0;border-radius:8px;background:#fff;overflow:hidden;transition:border-color .2s ease}.tiptap-editor.fill-container{display:flex;flex-direction:column;height:100%}.tiptap-editor.fill-container .tiptap-content{flex:1;min-height:0;overflow-y:auto}.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"] }] }); }
+  `, isInline: true, styles: [":host{--ate-primary: #2563eb;--ate-primary-contrast: #ffffff;--ate-primary-light: color-mix(in srgb, var(--ate-primary), transparent 90%);--ate-primary-lighter: color-mix(in srgb, var(--ate-primary), transparent 95%);--ate-primary-light-alpha: color-mix(in srgb, var(--ate-primary), transparent 85%);--ate-surface: #ffffff;--ate-surface-secondary: #f8f9fa;--ate-surface-tertiary: #f1f5f9;--ate-text: #2d3748;--ate-text-secondary: #64748b;--ate-text-muted: #a0aec0;--ate-border: #e2e8f0;--ate-highlight-bg: #fef08a;--ate-highlight-color: #854d0e;--ate-button-hover: #f1f5f9;--ate-button-active: #e2e8f0;--ate-menu-bg: rgba(255, 255, 255, .98);--ate-menu-border: var(--ate-border);--ate-menu-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--ate-menu-blur: 16px;--ate-error-color: #c53030;--ate-error-bg: #fed7d7;--ate-error-border: #feb2b2;--ate-border-color: var(--ate-border);--ate-border-width: 2px;--ate-border-radius: 8px;--ate-focus-color: var(--ate-primary);--ate-background: var(--ate-surface);--ate-text-color: var(--ate-text);--ate-placeholder-color: var(--ate-text-muted);--ate-line-height: 1.6;--ate-content-padding: 16px;--ate-toolbar-background: var(--ate-surface-secondary);--ate-toolbar-border-color: var(--ate-border);--ate-toolbar-button-color: var(--ate-text-secondary);--ate-toolbar-button-hover-background: transparent;--ate-toolbar-button-active-background: var(--ate-primary-light);--ate-toolbar-button-active-color: var(--ate-primary);--ate-counter-color: var(--ate-text-secondary);--ate-counter-background: var(--ate-surface-secondary);--ate-counter-border-color: var(--ate-border);--ate-drag-background: #f0f8ff;--ate-drag-border-color: var(--ate-primary);--ate-blockquote-border-color: var(--ate-border);--ate-blockquote-background: var(--ate-surface-secondary);--ate-code-background: var(--ate-surface-secondary);--ate-code-color: var(--ate-text);--ate-code-block-background: #181825;--ate-code-block-color: #e2e8f0;--ate-code-border-color: var(--ate-border);--ate-code-block-border-color: var(--ate-border);--ate-image-border-radius: 8px;--ate-image-selected-color: var(--ate-primary);--ate-scrollbar-width: 10px;--ate-scrollbar-thumb: var(--ate-border);--ate-scrollbar-thumb-hover: var(--ate-text-muted);--ate-scrollbar-track: transparent;--ate-table-border-color: var(--ate-border);--ate-table-header-background: var(--ate-surface-secondary);--ate-table-header-color: var(--ate-text);--ate-table-cell-background: var(--ate-surface);--ate-table-cell-selected-background: var(--ate-primary-light);--ate-table-resize-handle-color: var(--ate-primary);--ate-table-row-hover-background: var(--ate-primary-lighter)}:host(.dark),:host([data-theme=\"dark\"]){--ate-primary: #3b82f6;--ate-primary-contrast: #ffffff;--ate-primary-light: color-mix(in srgb, var(--ate-primary), transparent 85%);--ate-primary-lighter: color-mix(in srgb, var(--ate-primary), transparent 92%);--ate-primary-light-alpha: color-mix(in srgb, var(--ate-primary), transparent 80%);--ate-surface: #020617;--ate-surface-secondary: #0f172a;--ate-surface-tertiary: #1e293b;--ate-text: #f8fafc;--ate-text-secondary: #94a3b8;--ate-text-muted: #64748b;--ate-border: #1e293b;--ate-highlight-bg: #854d0e;--ate-highlight-color: #fef08a;--ate-button-hover: #1e293b;--ate-button-active: #0f172a;--ate-menu-bg: rgba(15, 23, 42, .95);--ate-menu-border: rgba(255, 255, 255, .1);--ate-menu-shadow: 0 20px 25px -5px rgba(0, 0, 0, .3), 0 10px 10px -5px rgba(0, 0, 0, .2);--ate-menu-blur: 16px;--ate-error-color: #f87171;--ate-error-bg: #450a0a;--ate-error-border: #7f1d1d;--ate-drag-background: var(--ate-surface-tertiary);--ate-drag-border-color: var(--ate-primary);--ate-blockquote-border-color: var(--ate-primary);--ate-toolbar-button-active-background: var(--ate-primary-light);--ate-toolbar-button-active-color: var(--ate-primary);--ate-button-hover: var(--ate-surface-tertiary);--ate-button-active: var(--ate-surface-secondary);--ate-scrollbar-thumb: var(--ate-surface-tertiary);--ate-scrollbar-thumb-hover: var(--ate-text-muted)}:host(.fill-container){display:block;height:100%}.tiptap-editor{border:var(--ate-border-width) solid var(--ate-border-color);border-radius:var(--ate-border-radius);background:var(--ate-background);overflow:hidden;transition:border-color .2s ease}.tiptap-editor.fill-container{display:flex;flex-direction:column;height:100%}.tiptap-editor.fill-container .tiptap-content{flex:1;min-height:0;overflow-y:auto}.tiptap-editor:focus-within{border-color:var(--ate-focus-color)}.tiptap-content{padding:var(--ate-content-padding);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;scrollbar-width:thin;scrollbar-color:var(--ate-scrollbar-thumb) var(--ate-scrollbar-track)}.tiptap-content::-webkit-scrollbar{width:var(--ate-scrollbar-width);height:var(--ate-scrollbar-width)}.tiptap-content::-webkit-scrollbar-track{background:var(--ate-scrollbar-track)}.tiptap-content::-webkit-scrollbar-thumb{background:var(--ate-scrollbar-thumb);border:3px solid transparent;background-clip:content-box;border-radius:10px}.tiptap-content::-webkit-scrollbar-thumb:hover{background:var(--ate-scrollbar-thumb-hover);background-clip:content-box}.tiptap-content.drag-over{background:var(--ate-drag-background);border:2px dashed var(--ate-drag-border-color)}.character-count{padding:8px var(--ate-content-padding);font-size:12px;color:var(--ate-counter-color);text-align:right;border-top:1px solid var(--ate-counter-border-color);background:var(--ate-counter-background)}:host ::ng-deep .ProseMirror{outline:none;line-height:var(--ate-line-height);color:var(--ate-text-color);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 var(--ate-blockquote-border-color);margin:1em 0;font-style:italic;background:var(--ate-blockquote-background);padding:.5em 1em;border-radius:0 4px 4px 0}:host ::ng-deep .ProseMirror code{background:var(--ate-code-background);color:var(--ate-code-color);border:1px solid var(--ate-code-border-color);padding:.2em .4em;border-radius:3px;font-family:Monaco,Consolas,monospace;font-size:.9em}:host ::ng-deep .ProseMirror pre{background:var(--ate-code-block-background);color:var(--ate-code-block-color);border:1px solid var(--ate-code-block-border-color);padding:1em;border-radius:6px;overflow-x:auto;margin:1em 0}:host ::ng-deep .ProseMirror pre code{background:none;color:inherit;border:none;padding:0}:host ::ng-deep .ProseMirror p.is-editor-empty:first-child:before{content:attr(data-placeholder);color:var(--ate-placeholder-color);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:var(--ate-image-border-radius)}:host ::ng-deep .ProseMirror img:hover{border-color:var(--ate-border-color);box-shadow:0 2px 4px #0000001a}:host ::ng-deep .ProseMirror img.ProseMirror-selectednode{border-color:var(--ate-image-selected-color);box-shadow:0 0 0 3px var(--ate-primary-light-alpha);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 var(--ate-primary);outline-offset:2px;border-radius:16px;box-shadow:0 0 0 4px var(--ate-primary-light-alpha)}: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:var(--ate-primary);border:2px solid var(--ate-surface);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:var(--ate-primary);box-shadow:0 3px 8px #0000004d}:host ::ng-deep .resize-handle:active{background:var(--ate-primary)}: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 var(--ate-table-border-color);border-bottom:1px solid var(--ate-table-border-color);box-sizing:border-box;min-width:1em;padding:8px 12px;position:relative;vertical-align:top;text-align:left}:host ::ng-deep .ProseMirror table td{background:var(--ate-table-cell-background)}:host ::ng-deep .ProseMirror table td:first-child,:host ::ng-deep .ProseMirror table th:first-child{border-left:1px solid var(--ate-table-border-color)}:host ::ng-deep .ProseMirror table tr:first-child td,:host ::ng-deep .ProseMirror table tr:first-child th{border-top:1px solid var(--ate-table-border-color)}: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:var(--ate-table-header-background);font-weight:600;color:var(--ate-table-header-color)}:host ::ng-deep .ProseMirror table .selectedCell:after{background:var(--ate-table-cell-selected-background);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:var(--ate-table-resize-handle-color);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:var(--ate-focus-color)}: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 tbody tr:hover td{background-color:var(--ate-table-row-hover-background)}\n"], dependencies: [{ kind: "component", type: TiptapToolbarComponent, selector: "tiptap-toolbar", inputs: ["editor", "config", "imageUpload"], outputs: ["imageUploaded", "imageError"] }, { 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,
@@ -5614,7 +5089,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
                         '[class.fill-container]': 'fillContainer()',
                     }, imports: [
                         TiptapToolbarComponent,
-                        TiptapImageUploadComponent,
                         TiptapBubbleMenuComponent,
                         TiptapImageBubbleMenuComponent,
                         TiptapTableBubbleMenuComponent,
@@ -5624,15 +5098,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
     <div class="tiptap-editor" [class.fill-container]="fillContainer()">
       <!-- Toolbar -->
       @if (showToolbar() && editor()) {
-      <tiptap-toolbar [editor]="editor()!" [config]="toolbarConfig()">
-        <div image-upload class="image-upload-container">
-          <tiptap-image-upload
-            [config]="imageUploadConfig()"
-            (imageSelected)="onImageUploaded($event)"
-            (error)="onImageUploadError($event)"
-          />
-        </div>
-      </tiptap-toolbar>
+      <tiptap-toolbar 
+        [editor]="editor()!" 
+        [config]="toolbarConfig()"
+        [imageUpload]="imageUploadConfig()"
+      />
       }
 
       <!-- Contenu de l'éditeur -->
@@ -5691,8 +5161,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
       ></tiptap-cell-bubble-menu>
       }
 
-      <!-- Table Edit Button - Supprimé car remplacé par le menu bubble -->
-
       <!-- Compteur de caractères -->
       @if (showCharacterCount()) {
       <div class="character-count">
@@ -5706,7 +5174,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
       </div>
       }
     </div>
-  `, styles: [":host(.fill-container){display:block;height:100%}.tiptap-editor{border:2px solid #e2e8f0;border-radius:8px;background:#fff;overflow:hidden;transition:border-color .2s ease}.tiptap-editor.fill-container{display:flex;flex-direction:column;height:100%}.tiptap-editor.fill-container .tiptap-content{flex:1;min-height:0;overflow-y:auto}.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"] }]
+  `, styles: [":host{--ate-primary: #2563eb;--ate-primary-contrast: #ffffff;--ate-primary-light: color-mix(in srgb, var(--ate-primary), transparent 90%);--ate-primary-lighter: color-mix(in srgb, var(--ate-primary), transparent 95%);--ate-primary-light-alpha: color-mix(in srgb, var(--ate-primary), transparent 85%);--ate-surface: #ffffff;--ate-surface-secondary: #f8f9fa;--ate-surface-tertiary: #f1f5f9;--ate-text: #2d3748;--ate-text-secondary: #64748b;--ate-text-muted: #a0aec0;--ate-border: #e2e8f0;--ate-highlight-bg: #fef08a;--ate-highlight-color: #854d0e;--ate-button-hover: #f1f5f9;--ate-button-active: #e2e8f0;--ate-menu-bg: rgba(255, 255, 255, .98);--ate-menu-border: var(--ate-border);--ate-menu-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--ate-menu-blur: 16px;--ate-error-color: #c53030;--ate-error-bg: #fed7d7;--ate-error-border: #feb2b2;--ate-border-color: var(--ate-border);--ate-border-width: 2px;--ate-border-radius: 8px;--ate-focus-color: var(--ate-primary);--ate-background: var(--ate-surface);--ate-text-color: var(--ate-text);--ate-placeholder-color: var(--ate-text-muted);--ate-line-height: 1.6;--ate-content-padding: 16px;--ate-toolbar-background: var(--ate-surface-secondary);--ate-toolbar-border-color: var(--ate-border);--ate-toolbar-button-color: var(--ate-text-secondary);--ate-toolbar-button-hover-background: transparent;--ate-toolbar-button-active-background: var(--ate-primary-light);--ate-toolbar-button-active-color: var(--ate-primary);--ate-counter-color: var(--ate-text-secondary);--ate-counter-background: var(--ate-surface-secondary);--ate-counter-border-color: var(--ate-border);--ate-drag-background: #f0f8ff;--ate-drag-border-color: var(--ate-primary);--ate-blockquote-border-color: var(--ate-border);--ate-blockquote-background: var(--ate-surface-secondary);--ate-code-background: var(--ate-surface-secondary);--ate-code-color: var(--ate-text);--ate-code-block-background: #181825;--ate-code-block-color: #e2e8f0;--ate-code-border-color: var(--ate-border);--ate-code-block-border-color: var(--ate-border);--ate-image-border-radius: 8px;--ate-image-selected-color: var(--ate-primary);--ate-scrollbar-width: 10px;--ate-scrollbar-thumb: var(--ate-border);--ate-scrollbar-thumb-hover: var(--ate-text-muted);--ate-scrollbar-track: transparent;--ate-table-border-color: var(--ate-border);--ate-table-header-background: var(--ate-surface-secondary);--ate-table-header-color: var(--ate-text);--ate-table-cell-background: var(--ate-surface);--ate-table-cell-selected-background: var(--ate-primary-light);--ate-table-resize-handle-color: var(--ate-primary);--ate-table-row-hover-background: var(--ate-primary-lighter)}:host(.dark),:host([data-theme=\"dark\"]){--ate-primary: #3b82f6;--ate-primary-contrast: #ffffff;--ate-primary-light: color-mix(in srgb, var(--ate-primary), transparent 85%);--ate-primary-lighter: color-mix(in srgb, var(--ate-primary), transparent 92%);--ate-primary-light-alpha: color-mix(in srgb, var(--ate-primary), transparent 80%);--ate-surface: #020617;--ate-surface-secondary: #0f172a;--ate-surface-tertiary: #1e293b;--ate-text: #f8fafc;--ate-text-secondary: #94a3b8;--ate-text-muted: #64748b;--ate-border: #1e293b;--ate-highlight-bg: #854d0e;--ate-highlight-color: #fef08a;--ate-button-hover: #1e293b;--ate-button-active: #0f172a;--ate-menu-bg: rgba(15, 23, 42, .95);--ate-menu-border: rgba(255, 255, 255, .1);--ate-menu-shadow: 0 20px 25px -5px rgba(0, 0, 0, .3), 0 10px 10px -5px rgba(0, 0, 0, .2);--ate-menu-blur: 16px;--ate-error-color: #f87171;--ate-error-bg: #450a0a;--ate-error-border: #7f1d1d;--ate-drag-background: var(--ate-surface-tertiary);--ate-drag-border-color: var(--ate-primary);--ate-blockquote-border-color: var(--ate-primary);--ate-toolbar-button-active-background: var(--ate-primary-light);--ate-toolbar-button-active-color: var(--ate-primary);--ate-button-hover: var(--ate-surface-tertiary);--ate-button-active: var(--ate-surface-secondary);--ate-scrollbar-thumb: var(--ate-surface-tertiary);--ate-scrollbar-thumb-hover: var(--ate-text-muted)}:host(.fill-container){display:block;height:100%}.tiptap-editor{border:var(--ate-border-width) solid var(--ate-border-color);border-radius:var(--ate-border-radius);background:var(--ate-background);overflow:hidden;transition:border-color .2s ease}.tiptap-editor.fill-container{display:flex;flex-direction:column;height:100%}.tiptap-editor.fill-container .tiptap-content{flex:1;min-height:0;overflow-y:auto}.tiptap-editor:focus-within{border-color:var(--ate-focus-color)}.tiptap-content{padding:var(--ate-content-padding);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;scrollbar-width:thin;scrollbar-color:var(--ate-scrollbar-thumb) var(--ate-scrollbar-track)}.tiptap-content::-webkit-scrollbar{width:var(--ate-scrollbar-width);height:var(--ate-scrollbar-width)}.tiptap-content::-webkit-scrollbar-track{background:var(--ate-scrollbar-track)}.tiptap-content::-webkit-scrollbar-thumb{background:var(--ate-scrollbar-thumb);border:3px solid transparent;background-clip:content-box;border-radius:10px}.tiptap-content::-webkit-scrollbar-thumb:hover{background:var(--ate-scrollbar-thumb-hover);background-clip:content-box}.tiptap-content.drag-over{background:var(--ate-drag-background);border:2px dashed var(--ate-drag-border-color)}.character-count{padding:8px var(--ate-content-padding);font-size:12px;color:var(--ate-counter-color);text-align:right;border-top:1px solid var(--ate-counter-border-color);background:var(--ate-counter-background)}:host ::ng-deep .ProseMirror{outline:none;line-height:var(--ate-line-height);color:var(--ate-text-color);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 var(--ate-blockquote-border-color);margin:1em 0;font-style:italic;background:var(--ate-blockquote-background);padding:.5em 1em;border-radius:0 4px 4px 0}:host ::ng-deep .ProseMirror code{background:var(--ate-code-background);color:var(--ate-code-color);border:1px solid var(--ate-code-border-color);padding:.2em .4em;border-radius:3px;font-family:Monaco,Consolas,monospace;font-size:.9em}:host ::ng-deep .ProseMirror pre{background:var(--ate-code-block-background);color:var(--ate-code-block-color);border:1px solid var(--ate-code-block-border-color);padding:1em;border-radius:6px;overflow-x:auto;margin:1em 0}:host ::ng-deep .ProseMirror pre code{background:none;color:inherit;border:none;padding:0}:host ::ng-deep .ProseMirror p.is-editor-empty:first-child:before{content:attr(data-placeholder);color:var(--ate-placeholder-color);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:var(--ate-image-border-radius)}:host ::ng-deep .ProseMirror img:hover{border-color:var(--ate-border-color);box-shadow:0 2px 4px #0000001a}:host ::ng-deep .ProseMirror img.ProseMirror-selectednode{border-color:var(--ate-image-selected-color);box-shadow:0 0 0 3px var(--ate-primary-light-alpha);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 var(--ate-primary);outline-offset:2px;border-radius:16px;box-shadow:0 0 0 4px var(--ate-primary-light-alpha)}: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:var(--ate-primary);border:2px solid var(--ate-surface);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:var(--ate-primary);box-shadow:0 3px 8px #0000004d}:host ::ng-deep .resize-handle:active{background:var(--ate-primary)}: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 var(--ate-table-border-color);border-bottom:1px solid var(--ate-table-border-color);box-sizing:border-box;min-width:1em;padding:8px 12px;position:relative;vertical-align:top;text-align:left}:host ::ng-deep .ProseMirror table td{background:var(--ate-table-cell-background)}:host ::ng-deep .ProseMirror table td:first-child,:host ::ng-deep .ProseMirror table th:first-child{border-left:1px solid var(--ate-table-border-color)}:host ::ng-deep .ProseMirror table tr:first-child td,:host ::ng-deep .ProseMirror table tr:first-child th{border-top:1px solid var(--ate-table-border-color)}: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:var(--ate-table-header-background);font-weight:600;color:var(--ate-table-header-color)}:host ::ng-deep .ProseMirror table .selectedCell:after{background:var(--ate-table-cell-selected-background);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:var(--ate-table-resize-handle-color);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:var(--ate-focus-color)}: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 tbody tr:hover td{background-color:var(--ate-table-row-hover-background)}\n"] }]
         }], ctorParameters: () => [] });
 
 /*
@@ -5718,5 +5186,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AngularTiptapEditorComponent, DEFAULT_BUBBLE_MENU_CONFIG, DEFAULT_CELL_MENU_CONFIG, DEFAULT_IMAGE_BUBBLE_MENU_CONFIG, DEFAULT_SLASH_COMMANDS$1 as DEFAULT_SLASH_COMMANDS, DEFAULT_TABLE_MENU_CONFIG, DEFAULT_TOOLBAR_CONFIG, EditorCommandsService, ImageService, NoopValueAccessorDirective, SLASH_COMMAND_KEYS, TiptapI18nService, createI18nSlashCommands, filterSlashCommands };
+export { AngularTiptapEditorComponent, DEFAULT_BUBBLE_MENU_CONFIG, DEFAULT_CELL_MENU_CONFIG, DEFAULT_IMAGE_BUBBLE_MENU_CONFIG, DEFAULT_SLASH_COMMANDS_CONFIG, DEFAULT_TABLE_MENU_CONFIG, DEFAULT_TOOLBAR_CONFIG, EditorCommandsService, ImageService, NoopValueAccessorDirective, SLASH_COMMAND_KEYS, TiptapI18nService, createDefaultSlashCommands, filterSlashCommands };
 //# sourceMappingURL=flogeez-angular-tiptap-editor.mjs.map