@flogeez/angular-tiptap-editor 0.3.1 → 0.3.3

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

@@ -2338,7 +2338,20 @@ class EditorCommandsService {
     }
     // Méthode pour vider le contenu
     clearContent(editor) {
-        editor.chain().focus().clearContent().run();
+        editor.chain().focus().setContent("", true).run(); // ✅ Forcer l'émission de l'événement
+    }
+    // Méthodes de base de l'éditeur
+    focus(editor) {
+        editor.chain().focus().run();
+    }
+    blur(editor) {
+        editor.chain().blur().run();
+    }
+    setContent(editor, content, emitUpdate = true) {
+        editor.chain().focus().setContent(content, emitUpdate).run();
+    }
+    setEditable(editor, editable) {
+        editor.setEditable(editable);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: EditorCommandsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: EditorCommandsService, providedIn: "root" }); }
@@ -3497,7 +3510,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
   `, styles: [".tiptap-toolbar{display:flex;align-items:center;gap:4px;padding:4px 8px;background:#f8f9fa;border-bottom:1px solid #e2e8f0;flex-wrap:wrap;min-height:32px;position:relative}.toolbar-group{display:flex;align-items:center;gap:2px;padding:0 4px}.toolbar-separator{width:1px;height:24px;background:#e2e8f0;margin:0 4px}@media (max-width: 768px){.tiptap-toolbar{padding:6px 8px;gap:2px}.toolbar-group{gap:1px}}@keyframes toolbarSlideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.tiptap-toolbar{animation:toolbarSlideIn .3s cubic-bezier(.4,0,.2,1)}\n"] }]
         }], ctorParameters: () => [{ type: EditorCommandsService }] });
 
-const DEFAULT_SLASH_COMMANDS = [
+const DEFAULT_SLASH_COMMANDS$1 = [
     {
         title: "Titre 1",
         description: "Grand titre de section",
@@ -3634,7 +3647,7 @@ class TiptapSlashCommandsComponent {
     constructor() {
         this.editor = input.required();
         this.config = input({
-            commands: DEFAULT_SLASH_COMMANDS,
+            commands: DEFAULT_SLASH_COMMANDS$1,
         });
         // Output pour l'upload d'image
         this.imageUploadRequested = output();
@@ -3647,7 +3660,7 @@ class TiptapSlashCommandsComponent {
         // Signal pour l'index sélectionné
         this.selectedIndex = signal(0);
         this.commands = computed(() => {
-            const configCommands = this.config().commands || DEFAULT_SLASH_COMMANDS;
+            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") {
@@ -4367,6 +4380,178 @@ 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,
@@ -4436,6 +4621,9 @@ const DEFAULT_CELL_MENU_CONFIG = {
     mergeCells: true,
     splitCell: true,
 };
+const DEFAULT_SLASH_COMMANDS = {
+    commands: [], // Sera rempli par filterSlashCommands
+};
 class AngularTiptapEditorComponent {
     constructor() {
         // Nouveaux inputs avec signal
@@ -4469,12 +4657,18 @@ class AngularTiptapEditorComponent {
         this.editorBlur = output();
         // ViewChild avec signal
         this.editorElement = viewChild.required("editorElement");
-        // Signals pour l'état interne
-        this.editor = signal(null);
-        this.characterCount = signal(0);
-        this.wordCount = signal(0);
-        this.isDragOver = signal(false);
-        this.editorFullyInitialized = signal(false);
+        // Signals privés pour l'état interne
+        this._editor = signal(null);
+        this._characterCount = signal(0);
+        this._wordCount = signal(0);
+        this._isDragOver = signal(false);
+        this._editorFullyInitialized = signal(false);
+        // Accès en lecture seule aux signaux
+        this.editor = this._editor.asReadonly();
+        this.characterCount = this._characterCount.asReadonly();
+        this.wordCount = this._wordCount.asReadonly();
+        this.isDragOver = this._isDragOver.asReadonly();
+        this.editorFullyInitialized = this._editorFullyInitialized.asReadonly();
         // Computed pour les états de l'éditeur
         this.isEditorReady = computed(() => this.editor() !== null);
         // Computed pour la configuration de la toolbar
@@ -4520,12 +4714,21 @@ class AngularTiptapEditorComponent {
             ...this.imageUpload(),
         }));
         // Computed pour la configuration des slash commands
-        this.slashCommandsConfigComputed = computed(() => this.slashCommandsConfig() ?? { commands: undefined });
+        this.slashCommandsConfigComputed = computed(() => {
+            const config = this.slashCommandsConfig();
+            if (config) {
+                return config;
+            }
+            // Configuration par défaut avec toutes les commandes
+            const allCommands = filterSlashCommands(new Set(SLASH_COMMAND_KEYS), this.i18nService);
+            return { commands: allCommands };
+        });
         this._destroyRef = inject(DestroyRef);
         // NgControl pour gérer les FormControls
         this.ngControl = inject(NgControl, { self: true, optional: true });
         this.i18nService = inject(TiptapI18nService);
         this.imageService = inject(ImageService);
+        this.editorCommandsService = inject(EditorCommandsService);
         // Effet pour gérer le changement de langue
         effect(() => {
             const locale = this.locale();
@@ -4566,7 +4769,7 @@ class AngularTiptapEditorComponent {
             const currentEditor = this.editor();
             const isEditable = this.editable();
             if (currentEditor) {
-                currentEditor.setEditable(isEditable);
+                this.editorCommandsService.setEditable(currentEditor, isEditable);
             }
         });
         // Effect pour la détection du survol des tables
@@ -4588,7 +4791,7 @@ class AngularTiptapEditorComponent {
         if (currentEditor) {
             currentEditor.destroy();
         }
-        this.editorFullyInitialized.set(false);
+        this._editorFullyInitialized.set(false);
     }
     initEditor() {
         const extensions = [
@@ -4666,7 +4869,7 @@ class AngularTiptapEditorComponent {
                 // Marquer l'éditeur comme complètement initialisé après un court délai
                 // pour s'assurer que tous les plugins et extensions sont prêts
                 setTimeout(() => {
-                    this.editorFullyInitialized.set(true);
+                    this._editorFullyInitialized.set(true);
                 }, 100);
             },
             onFocus: ({ editor, event }) => {
@@ -4681,13 +4884,13 @@ class AngularTiptapEditorComponent {
             },
         });
         // Stocker la référence de l'éditeur immédiatement
-        this.editor.set(newEditor);
+        this._editor.set(newEditor);
     }
     updateCharacterCount(editor) {
         if (this.showCharacterCount() && editor.storage["characterCount"]) {
             const storage = editor.storage["characterCount"];
-            this.characterCount.set(storage.characters());
-            this.wordCount.set(storage.words());
+            this._characterCount.set(storage.characters());
+            this._wordCount.set(storage.words());
         }
     }
     // Méthodes pour l'upload d'images
@@ -4721,12 +4924,12 @@ class AngularTiptapEditorComponent {
     onDragOver(event) {
         event.preventDefault();
         event.stopPropagation();
-        this.isDragOver.set(true);
+        this._isDragOver.set(true);
     }
     onDrop(event) {
         event.preventDefault();
         event.stopPropagation();
-        this.isDragOver.set(false);
+        this._isDragOver.set(false);
         const files = event.dataTransfer?.files;
         if (files && files.length > 0) {
             const file = files[0];
@@ -4757,22 +4960,33 @@ class AngularTiptapEditorComponent {
         return this.editor()?.getText() || "";
     }
     setContent(content, emitUpdate = true) {
-        this.editor()?.commands.setContent(content, emitUpdate);
+        const editor = this.editor();
+        if (editor) {
+            this.editorCommandsService.setContent(editor, content, emitUpdate);
+        }
     }
     focus() {
-        this.editor()?.commands.focus();
+        const editor = this.editor();
+        if (editor) {
+            this.editorCommandsService.focus(editor);
+        }
     }
     blur() {
-        this.editor()?.commands.blur();
+        const editor = this.editor();
+        if (editor) {
+            this.editorCommandsService.blur(editor);
+        }
     }
     clearContent() {
         const editor = this.editor();
         if (editor) {
-            editor.commands.clearContent();
-            // Mettre à jour les compteurs après avoir vidé le contenu
-            this.updateCharacterCount(editor);
+            this.editorCommandsService.clearContent(editor);
         }
     }
+    // Méthode publique pour obtenir l'éditeur
+    getEditor() {
+        return this.editor();
+    }
     setupFormControlSubscription() {
         const control = this.ngControl?.control;
         if (control) {
@@ -4791,7 +5005,7 @@ class AngularTiptapEditorComponent {
     setDisabledState(isDisabled) {
         const currentEditor = this.editor();
         if (currentEditor) {
-            currentEditor.setEditable(!isDisabled);
+            this.editorCommandsService.setEditable(currentEditor, !isDisabled);
         }
     }
     onEditorClick(event) {
@@ -5000,168 +5214,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
   `, styles: [".tiptap-editor{border:2px solid #e2e8f0;border-radius:8px;background:#fff;overflow:hidden;transition:border-color .2s ease}.tiptap-editor:focus-within{border-color:#3182ce}.tiptap-content{padding:16px;min-height:var(--editor-min-height, 200px);height:var(--editor-height, auto);max-height:var(--editor-max-height, none);overflow-y:var(--editor-overflow, visible);outline:none;position:relative}.tiptap-content.drag-over{background:#f0f8ff;border:2px dashed #3182ce}.character-count{padding:8px 16px;font-size:12px;color:#718096;text-align:right;border-top:1px solid #e2e8f0;background:#f8f9fa}.image-upload-container{position:relative;display:inline-block}:host ::ng-deep .ProseMirror{outline:none;line-height:1.6;color:#2d3748;min-height:100%;height:100%;word-wrap:break-word;overflow-wrap:break-word}:host ::ng-deep .ProseMirror h1{font-size:2em;font-weight:700;margin-top:0;margin-bottom:.5em}:host ::ng-deep .ProseMirror h2{font-size:1.5em;font-weight:700;margin-top:1em;margin-bottom:.5em}:host ::ng-deep .ProseMirror h3{font-size:1.25em;font-weight:700;margin-top:1em;margin-bottom:.5em}:host ::ng-deep .ProseMirror p{margin:.5em 0}:host ::ng-deep .ProseMirror ul,:host ::ng-deep .ProseMirror ol{padding-left:2em;margin:.5em 0}:host ::ng-deep .ProseMirror blockquote{border-left:4px solid #e2e8f0;margin:1em 0;font-style:italic;background:#f8f9fa;padding:.5em 1em;border-radius:0 4px 4px 0}:host ::ng-deep .ProseMirror code{background:#f1f5f9;padding:.2em .4em;border-radius:3px;font-family:Monaco,Consolas,monospace;font-size:.9em}:host ::ng-deep .ProseMirror pre{background:#1a202c;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;margin:1em 0}:host ::ng-deep .ProseMirror pre code{background:none;color:inherit;padding:0}:host ::ng-deep .ProseMirror p.is-editor-empty:first-child:before{content:attr(data-placeholder);color:#a0aec0;pointer-events:none;float:left;height:0}:host ::ng-deep .ProseMirror[contenteditable=false]{pointer-events:none}:host ::ng-deep .ProseMirror[contenteditable=false] img{cursor:default;pointer-events:none}:host ::ng-deep .ProseMirror[contenteditable=false] img:hover{transform:none;box-shadow:0 2px 8px #0000001a}:host ::ng-deep .ProseMirror[contenteditable=false] img.ProseMirror-selectednode{outline:none}:host ::ng-deep .ProseMirror img{position:relative;display:inline-block;max-width:100%;height:auto;cursor:pointer;transition:all .2s ease;border:2px solid transparent;border-radius:8px}:host ::ng-deep .ProseMirror img:hover{border-color:#e2e8f0;box-shadow:0 2px 4px #0000001a}:host ::ng-deep .ProseMirror img.ProseMirror-selectednode{border-color:#3182ce;box-shadow:0 0 0 3px #3182ce1a;transition:all .2s ease}:host ::ng-deep .ProseMirror .tiptap-image{max-width:100%;height:auto;border-radius:16px;box-shadow:0 4px 20px #00000014;margin:.5em 0;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);display:block;filter:brightness(1) contrast(1)}:host ::ng-deep .ProseMirror .tiptap-image:hover{box-shadow:0 8px 30px #0000001f;filter:brightness(1.02) contrast(1.02)}:host ::ng-deep .ProseMirror .tiptap-image.ProseMirror-selectednode{outline:2px solid #6366f1;outline-offset:2px;border-radius:16px;box-shadow:0 0 0 4px #6366f11a}:host ::ng-deep .image-container{margin:.5em 0;text-align:center;border-radius:16px;overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1)}:host ::ng-deep .image-container.image-align-left{text-align:left}:host ::ng-deep .image-container.image-align-center{text-align:center}:host ::ng-deep .image-container.image-align-right{text-align:right}:host ::ng-deep .image-container img{display:inline-block;max-width:100%;height:auto;border-radius:16px}:host ::ng-deep .resizable-image-container{position:relative;display:inline-block;margin:.5em 0}:host ::ng-deep .resize-controls{position:absolute;inset:0;pointer-events:none;z-index:1000}:host ::ng-deep .resize-handle{position:absolute;width:12px;height:12px;background:#3b82f6;border:2px solid white;border-radius:50%;pointer-events:all;cursor:pointer;z-index:1001;transition:all .15s ease;box-shadow:0 2px 6px #0003}:host ::ng-deep .resize-handle:hover{background:#2563eb;box-shadow:0 3px 8px #0000004d}:host ::ng-deep .resize-handle:active{background:#1d4ed8}:host ::ng-deep .resize-handle-n:hover,:host ::ng-deep .resize-handle-s:hover{transform:translate(-50%) scale(1.2)}:host ::ng-deep .resize-handle-w:hover,:host ::ng-deep .resize-handle-e:hover{transform:translateY(-50%) scale(1.2)}:host ::ng-deep .resize-handle-n:active,:host ::ng-deep .resize-handle-s:active{transform:translate(-50%) scale(.9)}:host ::ng-deep .resize-handle-w:active,:host ::ng-deep .resize-handle-e:active{transform:translateY(-50%) scale(.9)}:host ::ng-deep .resize-handle-nw:hover,:host ::ng-deep .resize-handle-ne:hover,:host ::ng-deep .resize-handle-sw:hover,:host ::ng-deep .resize-handle-se:hover{transform:scale(1.2)}:host ::ng-deep .resize-handle-nw:active,:host ::ng-deep .resize-handle-ne:active,:host ::ng-deep .resize-handle-sw:active,:host ::ng-deep .resize-handle-se:active{transform:scale(.9)}:host ::ng-deep .resize-handle-nw{top:0;left:-6px;cursor:nw-resize}:host ::ng-deep .resize-handle-n{top:0;left:50%;transform:translate(-50%);cursor:n-resize}:host ::ng-deep .resize-handle-ne{top:0;right:-6px;cursor:ne-resize}:host ::ng-deep .resize-handle-w{top:50%;left:-6px;transform:translateY(-50%);cursor:w-resize}:host ::ng-deep .resize-handle-e{top:50%;right:-6px;transform:translateY(-50%);cursor:e-resize}:host ::ng-deep .resize-handle-sw{bottom:0;left:-6px;cursor:sw-resize}:host ::ng-deep .resize-handle-s{bottom:0;left:50%;transform:translate(-50%);cursor:s-resize}:host ::ng-deep .resize-handle-se{bottom:0;right:-6px;cursor:se-resize}:host ::ng-deep body.resizing{-webkit-user-select:none;user-select:none;cursor:crosshair}:host ::ng-deep body.resizing .ProseMirror{pointer-events:none}:host ::ng-deep body.resizing .ProseMirror .tiptap-image{pointer-events:none}:host ::ng-deep .image-size-info{position:absolute;bottom:-20px;left:50%;transform:translate(-50%);background:#000c;color:#fff;padding:2px 6px;border-radius:3px;font-size:11px;white-space:nowrap;opacity:0;transition:opacity .2s ease}:host ::ng-deep .image-container:hover .image-size-info{opacity:1}:host ::ng-deep .ProseMirror table{border-collapse:separate;border-spacing:0;margin:0;table-layout:fixed;width:100%;border-radius:8px;overflow:hidden}:host ::ng-deep .ProseMirror table td,:host ::ng-deep .ProseMirror table th{border:none;border-right:1px solid #e2e8f0;border-bottom:1px solid #e2e8f0;box-sizing:border-box;min-width:1em;padding:8px 12px;position:relative;vertical-align:top;background:#fff}:host ::ng-deep .ProseMirror table td:first-child,:host ::ng-deep .ProseMirror table th:first-child{border-left:1px solid #e2e8f0}:host ::ng-deep .ProseMirror table tr:first-child td,:host ::ng-deep .ProseMirror table tr:first-child th{border-top:1px solid #e2e8f0}:host ::ng-deep .ProseMirror table tr:first-child th:first-child{border-top-left-radius:8px}:host ::ng-deep .ProseMirror table tr:first-child th:last-child{border-top-right-radius:8px}:host ::ng-deep .ProseMirror table tr:last-child td:first-child{border-bottom-left-radius:8px}:host ::ng-deep .ProseMirror table tr:last-child td:last-child{border-bottom-right-radius:8px}:host ::ng-deep .ProseMirror table th{background:#f8f9fa;font-weight:600;color:#374151}:host ::ng-deep .ProseMirror table .selectedCell:after{background:#c8c8ff66;content:\"\";inset:0;pointer-events:none;position:absolute;z-index:2}:host ::ng-deep .ProseMirror table .column-resize-handle{position:absolute;right:-2px;top:0;bottom:0;width:4px;background-color:#6366f1;opacity:0;transition:opacity .2s ease}:host ::ng-deep .ProseMirror table:hover .column-resize-handle{opacity:1}:host ::ng-deep .ProseMirror table .column-resize-handle:hover{background-color:#4f46e5}:host ::ng-deep .ProseMirror .tableWrapper{overflow-x:auto;margin:1em 0;border-radius:8px}:host ::ng-deep .ProseMirror .tableWrapper table{margin:0;border-radius:8px;min-width:600px;overflow:hidden}:host ::ng-deep .ProseMirror table p{margin:0}:host ::ng-deep .ProseMirror table .selectedCell{background-color:#6366f11a}:host ::ng-deep .ProseMirror table th{background-color:#f8f9fa;font-weight:600;color:#374151;text-align:left}:host ::ng-deep .ProseMirror table tbody tr:nth-child(2n){background-color:#fafbfc}:host ::ng-deep .ProseMirror table tbody tr:hover{background-color:#f1f5f9}\n"] }]
         }], ctorParameters: () => [] });
 
-/**
- * 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(),
-        },
-    ];
-}
-/**
- * Mapping des clés de commandes pour la compatibilité
- */
-const SLASH_COMMAND_KEYS = {
-    heading1: "heading1",
-    heading2: "heading2",
-    heading3: "heading3",
-    bulletList: "bulletList",
-    orderedList: "orderedList",
-    blockquote: "blockquote",
-    code: "code",
-    image: "image",
-    horizontalRule: "horizontalRule",
-    table: "table",
-};
-
 /*
  * Public API Surface of tiptap-editor
  */
@@ -5171,5 +5223,5 @@ const SLASH_COMMAND_KEYS = {
  * Generated bundle index. Do not edit.
  */
 
-export { AngularTiptapEditorComponent, DEFAULT_BUBBLE_MENU_CONFIG, DEFAULT_CELL_MENU_CONFIG, DEFAULT_IMAGE_BUBBLE_MENU_CONFIG, DEFAULT_SLASH_COMMANDS, DEFAULT_TABLE_MENU_CONFIG, DEFAULT_TOOLBAR_CONFIG, NoopValueAccessorDirective, TiptapI18nService, createI18nSlashCommands };
+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 };
 //# sourceMappingURL=flogeez-angular-tiptap-editor.mjs.map