@flogeez/angular-tiptap-editor 0.1.0

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

@@ -0,0 +1,4240 @@
+import * as i0 from '@angular/core';
+import { input, output, Component, signal, computed, Injectable, inject, effect, ViewChild, viewChild, forwardRef } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { Node, nodeInputRule, mergeAttributes, Extension, Editor } from '@tiptap/core';
+import StarterKit from '@tiptap/starter-kit';
+import Placeholder from '@tiptap/extension-placeholder';
+import CharacterCount from '@tiptap/extension-character-count';
+import Underline from '@tiptap/extension-underline';
+import Superscript from '@tiptap/extension-superscript';
+import Subscript from '@tiptap/extension-subscript';
+import TextAlign from '@tiptap/extension-text-align';
+import Link from '@tiptap/extension-link';
+import Highlight from '@tiptap/extension-highlight';
+import OfficePaste from '@intevation/tiptap-extension-office-paste';
+import { Plugin, PluginKey } from '@tiptap/pm/state';
+import { DecorationSet, Decoration } from '@tiptap/pm/view';
+import tippy from 'tippy.js';
+import { Plugin as Plugin$1, PluginKey as PluginKey$1 } from 'prosemirror-state';
+
+const ResizableImage = Node.create({
+    name: "resizableImage",
+    addOptions() {
+        return {
+            inline: false,
+            allowBase64: false,
+            HTMLAttributes: {},
+        };
+    },
+    inline() {
+        return this.options.inline;
+    },
+    group() {
+        return this.options.inline ? "inline" : "block";
+    },
+    draggable: true,
+    addAttributes() {
+        return {
+            src: {
+                default: null,
+            },
+            alt: {
+                default: null,
+            },
+            title: {
+                default: null,
+            },
+            width: {
+                default: null,
+                parseHTML: (element) => {
+                    const width = element.getAttribute("width");
+                    return width ? parseInt(width, 10) : null;
+                },
+                renderHTML: (attributes) => {
+                    if (!attributes["width"]) {
+                        return {};
+                    }
+                    return {
+                        width: attributes["width"],
+                    };
+                },
+            },
+            height: {
+                default: null,
+                parseHTML: (element) => {
+                    const height = element.getAttribute("height");
+                    return height ? parseInt(height, 10) : null;
+                },
+                renderHTML: (attributes) => {
+                    if (!attributes["height"]) {
+                        return {};
+                    }
+                    return {
+                        height: attributes["height"],
+                    };
+                },
+            },
+        };
+    },
+    parseHTML() {
+        return [
+            {
+                tag: "img[src]",
+            },
+        ];
+    },
+    renderHTML({ HTMLAttributes }) {
+        return [
+            "img",
+            mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
+        ];
+    },
+    addCommands() {
+        return {
+            setResizableImage: (options) => ({ commands }) => {
+                return commands.insertContent({
+                    type: this.name,
+                    attrs: options,
+                });
+            },
+            updateResizableImage: (options) => ({ commands }) => {
+                return commands.updateAttributes(this.name, options);
+            },
+        };
+    },
+    addInputRules() {
+        return [
+            nodeInputRule({
+                find: /!\[(.+|:?)]\((\S+)(?:(?:\s+)["'](\S+)["'])?\)/,
+                type: this.type,
+                getAttributes: (match) => {
+                    const [, alt, src, title] = match;
+                    return { src, alt, title };
+                },
+            }),
+        ];
+    },
+    addNodeView() {
+        return ({ node, getPos, editor }) => {
+            const container = document.createElement("div");
+            container.className = "resizable-image-container";
+            container.style.position = "relative";
+            container.style.display = "inline-block";
+            const img = document.createElement("img");
+            img.src = node.attrs["src"];
+            img.alt = node.attrs["alt"] || "";
+            img.title = node.attrs["title"] || "";
+            img.className = "tiptap-image";
+            if (node.attrs["width"])
+                img.width = node.attrs["width"];
+            if (node.attrs["height"])
+                img.height = node.attrs["height"];
+            img.parentNode?.insertBefore(container, img);
+            container.appendChild(img);
+            // Ajouter les contrôles de redimensionnement modernes
+            const resizeControls = document.createElement("div");
+            resizeControls.className = "resize-controls";
+            resizeControls.style.display = "none";
+            // Créer les 8 poignées pour un redimensionnement complet
+            const handles = ["nw", "n", "ne", "w", "e", "sw", "s", "se"];
+            handles.forEach((direction) => {
+                const handle = document.createElement("div");
+                handle.className = `resize-handle resize-handle-${direction}`;
+                handle.setAttribute("data-direction", direction);
+                resizeControls.appendChild(handle);
+            });
+            // Attacher les contrôles au conteneur
+            container.appendChild(resizeControls);
+            // Variables pour le redimensionnement
+            let isResizing = false;
+            let startX = 0;
+            let startY = 0;
+            let startWidth = 0;
+            let startHeight = 0;
+            let aspectRatio = 1;
+            // Calculer le ratio d'aspect
+            img.onload = () => {
+                aspectRatio = img.naturalWidth / img.naturalHeight;
+            };
+            // Gestion du redimensionnement
+            const handleMouseDown = (e, direction) => {
+                e.preventDefault();
+                e.stopPropagation();
+                isResizing = true;
+                startX = e.clientX;
+                startY = e.clientY;
+                // Utiliser les dimensions actuelles de l'image au lieu des dimensions initiales
+                startWidth =
+                    parseInt(img.getAttribute("width") || "0") ||
+                        node.attrs["width"] ||
+                        img.naturalWidth;
+                startHeight =
+                    parseInt(img.getAttribute("height") || "0") ||
+                        node.attrs["height"] ||
+                        img.naturalHeight;
+                // Ajouter la classe de redimensionnement au body
+                document.body.classList.add("resizing");
+                const handleMouseMove = (e) => {
+                    if (!isResizing)
+                        return;
+                    const deltaX = e.clientX - startX;
+                    const deltaY = e.clientY - startY;
+                    let newWidth = startWidth;
+                    let newHeight = startHeight;
+                    // Redimensionnement selon la direction
+                    switch (direction) {
+                        case "e":
+                            newWidth = startWidth + deltaX;
+                            newHeight = newWidth / aspectRatio;
+                            break;
+                        case "w":
+                            newWidth = startWidth - deltaX;
+                            newHeight = newWidth / aspectRatio;
+                            break;
+                        case "s":
+                            newHeight = startHeight + deltaY;
+                            newWidth = newHeight * aspectRatio;
+                            break;
+                        case "n":
+                            newHeight = startHeight - deltaY;
+                            newWidth = newHeight * aspectRatio;
+                            break;
+                        case "se":
+                            newWidth = startWidth + deltaX;
+                            newHeight = startHeight + deltaY;
+                            break;
+                        case "sw":
+                            newWidth = startWidth - deltaX;
+                            newHeight = startHeight + deltaY;
+                            break;
+                        case "ne":
+                            newWidth = startWidth + deltaX;
+                            newHeight = startHeight - deltaY;
+                            break;
+                        case "nw":
+                            newWidth = startWidth - deltaX;
+                            newHeight = startHeight - deltaY;
+                            break;
+                    }
+                    // Limites
+                    newWidth = Math.max(50, Math.min(2000, newWidth));
+                    newHeight = Math.max(50, Math.min(2000, newHeight));
+                    // Mettre à jour directement les attributs de l'image
+                    img.setAttribute("width", Math.round(newWidth).toString());
+                    img.setAttribute("height", Math.round(newHeight).toString());
+                };
+                const handleMouseUp = () => {
+                    isResizing = false;
+                    document.body.classList.remove("resizing");
+                    // Mettre à jour le nœud Tiptap avec les nouvelles dimensions
+                    if (typeof getPos === "function") {
+                        const finalWidth = parseInt(img.getAttribute("width") || "0");
+                        const finalHeight = parseInt(img.getAttribute("height") || "0");
+                        if (finalWidth && finalHeight) {
+                            editor.commands.updateAttributes("resizableImage", {
+                                width: finalWidth,
+                                height: finalHeight,
+                            });
+                        }
+                    }
+                    document.removeEventListener("mousemove", handleMouseMove);
+                    document.removeEventListener("mouseup", handleMouseUp);
+                };
+                document.addEventListener("mousemove", handleMouseMove);
+                document.addEventListener("mouseup", handleMouseUp);
+            };
+            // Ajouter les événements aux poignées
+            resizeControls.addEventListener("mousedown", (e) => {
+                const target = e.target;
+                if (target.classList.contains("resize-handle")) {
+                    const direction = target.getAttribute("data-direction");
+                    if (direction) {
+                        handleMouseDown(e, direction);
+                    }
+                }
+            });
+            // Gestion des événements
+            img.addEventListener("click", () => {
+                // Masquer tous les autres contrôles
+                document.querySelectorAll(".resize-controls").forEach((control) => {
+                    control.style.display = "none";
+                });
+                // Afficher les contrôles de cette image
+                resizeControls.style.display = "block";
+                img.classList.add("selected");
+            });
+            // Masquer les contrôles quand on clique ailleurs
+            document.addEventListener("click", (e) => {
+                const target = e.target;
+                if (target &&
+                    !img.contains(target) &&
+                    !resizeControls.contains(target)) {
+                    resizeControls.style.display = "none";
+                    img.classList.remove("selected");
+                }
+            });
+            return {
+                dom: container,
+                update: (updatedNode) => {
+                    if (updatedNode.type.name !== "resizableImage")
+                        return false;
+                    img.src = updatedNode.attrs["src"];
+                    img.alt = updatedNode.attrs["alt"] || "";
+                    img.title = updatedNode.attrs["title"] || "";
+                    if (updatedNode.attrs["width"])
+                        img.width = updatedNode.attrs["width"];
+                    if (updatedNode.attrs["height"])
+                        img.height = updatedNode.attrs["height"];
+                    return true;
+                },
+            };
+        };
+    },
+});
+
+const UploadProgress = Extension.create({
+    name: "uploadProgress",
+    addOptions() {
+        return {
+            isUploading: () => false,
+            uploadProgress: () => 0,
+            uploadMessage: () => "",
+        };
+    },
+    addProseMirrorPlugins() {
+        const options = this.options;
+        return [
+            new Plugin({
+                key: new PluginKey("uploadProgress"),
+                state: {
+                    init() {
+                        return {
+                            decorations: DecorationSet.empty,
+                            isUploading: false,
+                            uploadPosition: null,
+                        };
+                    },
+                    apply: (tr, state) => {
+                        const isUploading = options.isUploading();
+                        // Si l'upload commence, sauvegarder la position
+                        if (isUploading && !state.isUploading) {
+                            const uploadPosition = tr.selection.from;
+                            const uploadProgress = options.uploadProgress();
+                            const uploadMessage = options.uploadMessage();
+                            // Créer un élément de progression
+                            const uploadElement = document.createElement("div");
+                            uploadElement.className = "upload-progress-widget";
+                            uploadElement.innerHTML = `
+                <div class="upload-skeleton">
+                  <div class="upload-content">
+                    <div class="upload-icon">
+                      <span class="material-symbols-outlined spinning">image</span>
+                    </div>
+                    <div class="upload-info">
+                      <div class="upload-message">${uploadMessage}</div>
+                      <div class="progress-bar">
+                        <div class="progress-fill" style="width: ${uploadProgress}%"></div>
+                      </div>
+                      <div class="progress-text">${uploadProgress}%</div>
+                    </div>
+                  </div>
+                </div>
+              `;
+                            // Ajouter les styles si pas déjà fait
+                            if (!document.querySelector("#upload-progress-styles")) {
+                                const style = document.createElement("style");
+                                style.id = "upload-progress-styles";
+                                style.textContent = `
+                  .upload-progress-widget {
+                    display: block;
+                    margin: 8px 0;
+                    max-width: 400px;
+                  }
+                  .upload-skeleton {
+                    background: #f8f9fa;
+                    border: 2px dashed #e2e8f0;
+                    border-radius: 8px;
+                    padding: 16px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    min-height: 120px;
+                    animation: pulse 2s infinite;
+                  }
+                  @keyframes pulse {
+                    0%, 100% { background-color: #f8f9fa; }
+                    50% { background-color: #f1f5f9; }
+                  }
+                  .upload-content {
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                    gap: 12px;
+                    text-align: center;
+                  }
+                  .upload-icon {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    width: 48px;
+                    height: 48px;
+                    background: #e6f3ff;
+                    border-radius: 50%;
+                    color: #3182ce;
+                  }
+                  .upload-icon .material-symbols-outlined {
+                    font-size: 24px;
+                  }
+                  .spinning {
+                    animation: spin 1s linear infinite;
+                  }
+                  @keyframes spin {
+                    from { transform: rotate(0deg); }
+                    to { transform: rotate(360deg); }
+                  }
+                  .upload-info {
+                    display: flex;
+                    flex-direction: column;
+                    gap: 8px;
+                    width: 100%;
+                    max-width: 200px;
+                  }
+                  .upload-message {
+                    font-size: 14px;
+                    color: #4a5568;
+                    font-weight: 500;
+                  }
+                  .progress-bar {
+                    width: 100%;
+                    height: 6px;
+                    background: #e2e8f0;
+                    border-radius: 3px;
+                    overflow: hidden;
+                  }
+                  .progress-fill {
+                    height: 100%;
+                    background: linear-gradient(90deg, #3182ce, #4299e1);
+                    border-radius: 3px;
+                    transition: width 0.3s ease;
+                  }
+                  .progress-text {
+                    font-size: 12px;
+                    color: #718096;
+                    font-weight: 500;
+                  }
+                `;
+                                document.head.appendChild(style);
+                            }
+                            // Créer une décoration widget à la position sauvegardée
+                            const decoration = Decoration.widget(uploadPosition, uploadElement, {
+                                side: 1,
+                                key: "upload-progress",
+                            });
+                            return {
+                                decorations: DecorationSet.create(tr.doc, [decoration]),
+                                isUploading: true,
+                                uploadPosition,
+                            };
+                        }
+                        // Si l'upload continue, mettre à jour le contenu
+                        if (isUploading &&
+                            state.isUploading &&
+                            state.uploadPosition !== null) {
+                            const uploadProgress = options.uploadProgress();
+                            const uploadMessage = options.uploadMessage();
+                            // Mettre à jour le contenu de l'élément existant
+                            const existingElement = document.querySelector(".upload-progress-widget");
+                            if (existingElement) {
+                                existingElement.innerHTML = `
+                  <div class="upload-skeleton">
+                    <div class="upload-content">
+                      <div class="upload-icon">
+                        <span class="material-symbols-outlined spinning">image</span>
+                      </div>
+                      <div class="upload-info">
+                        <div class="upload-message">${uploadMessage}</div>
+                        <div class="progress-bar">
+                          <div class="progress-fill" style="width: ${uploadProgress}%"></div>
+                        </div>
+                        <div class="progress-text">${uploadProgress}%</div>
+                      </div>
+                    </div>
+                  </div>
+                `;
+                            }
+                            return state; // Garder les décorations existantes
+                        }
+                        // Si l'upload se termine, supprimer les décorations
+                        if (!isUploading && state.isUploading) {
+                            return {
+                                decorations: DecorationSet.empty,
+                                isUploading: false,
+                                uploadPosition: null,
+                            };
+                        }
+                        return state;
+                    },
+                },
+                props: {
+                    decorations(state) {
+                        const pluginState = this.getState(state);
+                        return pluginState ? pluginState.decorations : DecorationSet.empty;
+                    },
+                },
+            }),
+        ];
+    },
+});
+
+class TiptapButtonComponent {
+    constructor() {
+        // Inputs
+        this.icon = input.required();
+        this.title = input.required();
+        this.active = input(false);
+        this.disabled = input(false);
+        this.variant = input("default");
+        this.size = input("medium");
+        this.iconSize = input("medium");
+        // Outputs
+        this.onClick = output();
+    }
+    onMouseDown(event) {
+        event.preventDefault();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.0", type: TiptapButtonComponent, isStandalone: true, selector: "tiptap-button", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
+    <button
+      class="tiptap-button"
+      [class.is-active]="active()"
+      [class.is-disabled]="disabled()"
+      [class.text-button]="variant() === 'text'"
+      [class.danger]="variant() === 'danger'"
+      [class.small]="size() === 'small'"
+      [class.medium]="size() === 'medium'"
+      [class.large]="size() === 'large'"
+      [disabled]="disabled()"
+      [attr.title]="title()"
+      (mousedown)="onMouseDown($event)"
+      (click)="onClick.emit($event)"
+      type="button"
+    >
+      <span
+        class="material-symbols-outlined"
+        [class.icon-small]="iconSize() === 'small'"
+        [class.icon-medium]="iconSize() === 'medium'"
+        [class.icon-large]="iconSize() === 'large'"
+        >{{ icon() }}</span
+      >
+      <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"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "tiptap-button", standalone: true, template: `
+    <button
+      class="tiptap-button"
+      [class.is-active]="active()"
+      [class.is-disabled]="disabled()"
+      [class.text-button]="variant() === 'text'"
+      [class.danger]="variant() === 'danger'"
+      [class.small]="size() === 'small'"
+      [class.medium]="size() === 'medium'"
+      [class.large]="size() === 'large'"
+      [disabled]="disabled()"
+      [attr.title]="title()"
+      (mousedown)="onMouseDown($event)"
+      (click)="onClick.emit($event)"
+      type="button"
+    >
+      <span
+        class="material-symbols-outlined"
+        [class.icon-small]="iconSize() === 'small'"
+        [class.icon-medium]="iconSize() === 'medium'"
+        [class.icon-large]="iconSize() === 'large'"
+        >{{ icon() }}</span
+      >
+      <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"] }]
+        }] });
+
+class TiptapSeparatorComponent {
+    constructor() {
+        this.orientation = input("vertical");
+        this.size = input("medium");
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapSeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.0", type: TiptapSeparatorComponent, isStandalone: true, selector: "tiptap-separator", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div
+      class="tiptap-separator"
+      [class.vertical]="orientation() === 'vertical'"
+      [class.horizontal]="orientation() === 'horizontal'"
+      [class.small]="size() === 'small'"
+      [class.medium]="size() === 'medium'"
+      [class.large]="size() === 'large'"
+    ></div>
+  `, isInline: true, styles: [".tiptap-separator{background-color:#e2e8f0;margin:0}.tiptap-separator.vertical{width:1px;height:24px;margin:0 8px}.tiptap-separator.horizontal{height:1px;width:100%;margin:8px 0}.tiptap-separator.small.vertical{height:16px;margin:0 4px}.tiptap-separator.small.horizontal{margin:4px 0}.tiptap-separator.medium.vertical{height:24px;margin:0 8px}.tiptap-separator.medium.horizontal{margin:8px 0}.tiptap-separator.large.vertical{height:32px;margin:0 12px}.tiptap-separator.large.horizontal{margin:12px 0}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapSeparatorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "tiptap-separator", standalone: true, template: `
+    <div
+      class="tiptap-separator"
+      [class.vertical]="orientation() === 'vertical'"
+      [class.horizontal]="orientation() === 'horizontal'"
+      [class.small]="size() === 'small'"
+      [class.medium]="size() === 'medium'"
+      [class.large]="size() === 'large'"
+    ></div>
+  `, styles: [".tiptap-separator{background-color:#e2e8f0;margin:0}.tiptap-separator.vertical{width:1px;height:24px;margin:0 8px}.tiptap-separator.horizontal{height:1px;width:100%;margin:8px 0}.tiptap-separator.small.vertical{height:16px;margin:0 4px}.tiptap-separator.small.horizontal{margin:4px 0}.tiptap-separator.medium.vertical{height:24px;margin:0 8px}.tiptap-separator.medium.horizontal{margin:8px 0}.tiptap-separator.large.vertical{height:32px;margin:0 12px}.tiptap-separator.large.horizontal{margin:12px 0}\n"] }]
+        }] });
+
+class ImageService {
+    constructor() {
+        // Signals pour l'état des images
+        this.selectedImage = signal(null);
+        this.isImageSelected = computed(() => this.selectedImage() !== null);
+        this.isResizing = signal(false);
+        // Signaux pour l'upload
+        this.isUploading = signal(false);
+        this.uploadProgress = signal(0);
+        this.uploadMessage = signal("");
+        // Référence à l'éditeur pour les mises à jour
+        this.currentEditor = null;
+    }
+    // Méthodes pour la gestion des images
+    selectImage(editor) {
+        if (editor.isActive("resizableImage")) {
+            const attrs = editor.getAttributes("resizableImage");
+            this.selectedImage.set({
+                src: attrs["src"],
+                alt: attrs["alt"],
+                title: attrs["title"],
+                width: attrs["width"],
+                height: attrs["height"],
+            });
+        }
+        else {
+            this.selectedImage.set(null);
+        }
+    }
+    clearSelection() {
+        this.selectedImage.set(null);
+    }
+    // Méthodes pour manipuler les images
+    insertImage(editor, imageData) {
+        editor.chain().focus().setResizableImage(imageData).run();
+    }
+    updateImageAttributes(editor, attributes) {
+        if (editor.isActive("resizableImage")) {
+            editor
+                .chain()
+                .focus()
+                .updateAttributes("resizableImage", attributes)
+                .run();
+            this.updateSelectedImage(attributes);
+        }
+    }
+    // Nouvelles méthodes pour le redimensionnement
+    resizeImage(editor, options) {
+        if (!editor.isActive("resizableImage"))
+            return;
+        const currentAttrs = editor.getAttributes("resizableImage");
+        let newWidth = options.width;
+        let newHeight = options.height;
+        // Maintenir le ratio d'aspect si demandé
+        if (options.maintainAspectRatio !== false &&
+            currentAttrs["width"] &&
+            currentAttrs["height"]) {
+            const aspectRatio = currentAttrs["width"] / currentAttrs["height"];
+            if (newWidth && !newHeight) {
+                newHeight = Math.round(newWidth / aspectRatio);
+            }
+            else if (newHeight && !newWidth) {
+                newWidth = Math.round(newHeight * aspectRatio);
+            }
+        }
+        // Appliquer des limites minimales
+        if (newWidth)
+            newWidth = Math.max(50, newWidth);
+        if (newHeight)
+            newHeight = Math.max(50, newHeight);
+        this.updateImageAttributes(editor, {
+            width: newWidth,
+            height: newHeight,
+        });
+    }
+    // Méthodes pour redimensionner par pourcentage
+    resizeImageByPercentage(editor, percentage) {
+        if (!editor.isActive("resizableImage"))
+            return;
+        const currentAttrs = editor.getAttributes("resizableImage");
+        if (!currentAttrs["width"] || !currentAttrs["height"])
+            return;
+        const newWidth = Math.round(currentAttrs["width"] * (percentage / 100));
+        const newHeight = Math.round(currentAttrs["height"] * (percentage / 100));
+        this.resizeImage(editor, { width: newWidth, height: newHeight });
+    }
+    // Méthodes pour redimensionner à des tailles prédéfinies
+    resizeImageToSmall(editor) {
+        this.resizeImage(editor, {
+            width: 300,
+            height: 200,
+            maintainAspectRatio: true,
+        });
+    }
+    resizeImageToMedium(editor) {
+        this.resizeImage(editor, {
+            width: 500,
+            height: 350,
+            maintainAspectRatio: true,
+        });
+    }
+    resizeImageToLarge(editor) {
+        this.resizeImage(editor, {
+            width: 800,
+            height: 600,
+            maintainAspectRatio: true,
+        });
+    }
+    resizeImageToOriginal(editor) {
+        if (!editor.isActive("resizableImage"))
+            return;
+        const img = new Image();
+        img.onload = () => {
+            this.resizeImage(editor, {
+                width: img.naturalWidth,
+                height: img.naturalHeight,
+            });
+        };
+        img.src = editor.getAttributes("resizableImage")["src"];
+    }
+    // Méthode pour redimensionner librement (sans maintenir le ratio)
+    resizeImageFreely(editor, width, height) {
+        this.resizeImage(editor, {
+            width,
+            height,
+            maintainAspectRatio: false,
+        });
+    }
+    // Méthode pour obtenir les dimensions actuelles de l'image
+    getImageDimensions(editor) {
+        if (!editor.isActive("resizableImage"))
+            return null;
+        const attrs = editor.getAttributes("resizableImage");
+        return {
+            width: attrs["width"] || 0,
+            height: attrs["height"] || 0,
+        };
+    }
+    // Méthode pour obtenir les dimensions naturelles de l'image
+    getNaturalImageDimensions(src) {
+        return new Promise((resolve, reject) => {
+            const img = new Image();
+            img.onload = () => {
+                resolve({ width: img.naturalWidth, height: img.naturalHeight });
+            };
+            img.onerror = () => {
+                reject(new Error("Impossible de charger l'image"));
+            };
+            img.src = src;
+        });
+    }
+    deleteImage(editor) {
+        if (editor.isActive("resizableImage")) {
+            editor.chain().focus().deleteSelection().run();
+            this.clearSelection();
+        }
+    }
+    // Méthodes utilitaires
+    updateSelectedImage(attributes) {
+        const current = this.selectedImage();
+        if (current) {
+            this.selectedImage.set({ ...current, ...attributes });
+        }
+    }
+    // Validation des images
+    validateImage(file, maxSize = 5 * 1024 * 1024) {
+        if (!file.type.startsWith("image/")) {
+            return { valid: false, error: "Le fichier doit être une image" };
+        }
+        if (file.size > maxSize) {
+            return {
+                valid: false,
+                error: `L'image est trop volumineuse (max ${maxSize / 1024 / 1024}MB)`,
+            };
+        }
+        return { valid: true };
+    }
+    // Compression d'image
+    async compressImage(file, quality = 0.8, maxWidth = 1920, maxHeight = 1080) {
+        return new Promise((resolve, reject) => {
+            const canvas = document.createElement("canvas");
+            const ctx = canvas.getContext("2d");
+            const img = new Image();
+            img.onload = () => {
+                // Mise à jour du progrès
+                if (this.isUploading()) {
+                    this.uploadProgress.set(40);
+                    this.uploadMessage.set("Redimensionnement...");
+                    this.forceEditorUpdate();
+                }
+                let { width, height } = img;
+                // Redimensionner si nécessaire
+                if (width > maxWidth || height > maxHeight) {
+                    const ratio = Math.min(maxWidth / width, maxHeight / height);
+                    width *= ratio;
+                    height *= ratio;
+                }
+                canvas.width = width;
+                canvas.height = height;
+                // Dessiner l'image redimensionnée
+                ctx?.drawImage(img, 0, 0, width, height);
+                // Mise à jour du progrès
+                if (this.isUploading()) {
+                    this.uploadProgress.set(60);
+                    this.uploadMessage.set("Compression...");
+                    this.forceEditorUpdate();
+                }
+                // Convertir en base64 avec compression
+                canvas.toBlob((blob) => {
+                    if (blob) {
+                        const reader = new FileReader();
+                        reader.onload = (e) => {
+                            const base64 = e.target?.result;
+                            if (base64) {
+                                const result = {
+                                    src: base64,
+                                    name: file.name,
+                                    size: blob.size,
+                                    type: file.type,
+                                    width: Math.round(width),
+                                    height: Math.round(height),
+                                    originalSize: file.size,
+                                };
+                                resolve(result);
+                            }
+                            else {
+                                reject(new Error("Erreur lors de la compression"));
+                            }
+                        };
+                        reader.readAsDataURL(blob);
+                    }
+                    else {
+                        reject(new Error("Erreur lors de la compression"));
+                    }
+                }, file.type, quality);
+            };
+            img.onerror = () => reject(new Error("Erreur lors du chargement de l'image"));
+            img.src = URL.createObjectURL(file);
+        });
+    }
+    // Méthode privée générique pour uploader avec progression
+    async uploadImageWithProgress(editor, file, insertionStrategy, actionMessage, options) {
+        try {
+            // Stocker la référence à l'éditeur
+            this.currentEditor = editor;
+            this.isUploading.set(true);
+            this.uploadProgress.set(0);
+            this.uploadMessage.set("Validation du fichier...");
+            this.forceEditorUpdate();
+            // Validation
+            const validation = this.validateImage(file);
+            if (!validation.valid) {
+                throw new Error(validation.error);
+            }
+            this.uploadProgress.set(20);
+            this.uploadMessage.set("Compression en cours...");
+            this.forceEditorUpdate();
+            // Petit délai pour permettre à l'utilisateur de voir la progression
+            await new Promise((resolve) => setTimeout(resolve, 200));
+            const result = await this.compressImage(file, options?.quality || 0.8, options?.maxWidth || 1920, options?.maxHeight || 1080);
+            this.uploadProgress.set(80);
+            this.uploadMessage.set(actionMessage);
+            this.forceEditorUpdate();
+            // Petit délai pour l'action
+            await new Promise((resolve) => setTimeout(resolve, 100));
+            // Exécuter la stratégie d'insertion
+            insertionStrategy(editor, result);
+            // L'action est terminée, maintenant on peut cacher l'indicateur
+            this.isUploading.set(false);
+            this.uploadProgress.set(0);
+            this.uploadMessage.set("");
+            this.forceEditorUpdate();
+            this.currentEditor = null;
+        }
+        catch (error) {
+            this.isUploading.set(false);
+            this.uploadProgress.set(0);
+            this.uploadMessage.set("");
+            this.forceEditorUpdate();
+            this.currentEditor = null;
+            console.error("Erreur lors de l'upload d'image:", error);
+            throw error;
+        }
+    }
+    // Méthode unifiée pour uploader et insérer une image
+    async uploadAndInsertImage(editor, file, options) {
+        return this.uploadImageWithProgress(editor, file, (editor, result) => {
+            this.insertImage(editor, {
+                src: result.src,
+                alt: result.name,
+                title: `${result.name} (${result.width}×${result.height})`,
+                width: result.width,
+                height: result.height,
+            });
+        }, "Insertion dans l'éditeur...", options);
+    }
+    // Méthode pour forcer la mise à jour de l'éditeur
+    forceEditorUpdate() {
+        if (this.currentEditor) {
+            // Déclencher une transaction vide pour forcer la mise à jour des décorations
+            const { tr } = this.currentEditor.state;
+            this.currentEditor.view.dispatch(tr);
+        }
+    }
+    // Méthode privée générique pour créer un sélecteur de fichier
+    async selectFileAndProcess(editor, uploadMethod, options) {
+        return new Promise((resolve, reject) => {
+            const input = document.createElement("input");
+            input.type = "file";
+            input.accept = options?.accept || "image/*";
+            input.style.display = "none";
+            input.addEventListener("change", async (e) => {
+                const file = e.target.files?.[0];
+                if (file && file.type.startsWith("image/")) {
+                    try {
+                        await uploadMethod(editor, file, options);
+                        resolve();
+                    }
+                    catch (error) {
+                        reject(error);
+                    }
+                }
+                else {
+                    reject(new Error("Aucun fichier image sélectionné"));
+                }
+                document.body.removeChild(input);
+            });
+            input.addEventListener("cancel", () => {
+                document.body.removeChild(input);
+                reject(new Error("Sélection annulée"));
+            });
+            document.body.appendChild(input);
+            input.click();
+        });
+    }
+    // Méthode pour créer un sélecteur de fichier et uploader une image
+    async selectAndUploadImage(editor, options) {
+        return this.selectFileAndProcess(editor, this.uploadAndInsertImage.bind(this), options);
+    }
+    // Méthode pour sélectionner et remplacer une image existante
+    async selectAndReplaceImage(editor, options) {
+        return this.selectFileAndProcess(editor, this.uploadAndReplaceImage.bind(this), options);
+    }
+    // Méthode pour remplacer une image existante avec indicateur de progression
+    async uploadAndReplaceImage(editor, file, options) {
+        // Sauvegarder les attributs de l'image actuelle pour restauration en cas d'échec
+        const currentImageAttrs = editor.getAttributes("resizableImage");
+        const backupImage = { ...currentImageAttrs };
+        try {
+            // Supprimer visuellement l'ancienne image immédiatement
+            editor.chain().focus().deleteSelection().run();
+            // Stocker la référence à l'éditeur
+            this.currentEditor = editor;
+            this.isUploading.set(true);
+            this.uploadProgress.set(0);
+            this.uploadMessage.set("Validation du fichier...");
+            this.forceEditorUpdate();
+            // Validation
+            const validation = this.validateImage(file);
+            if (!validation.valid) {
+                throw new Error(validation.error);
+            }
+            this.uploadProgress.set(20);
+            this.uploadMessage.set("Compression en cours...");
+            this.forceEditorUpdate();
+            // Petit délai pour permettre à l'utilisateur de voir la progression
+            await new Promise((resolve) => setTimeout(resolve, 200));
+            const result = await this.compressImage(file, options?.quality || 0.8, options?.maxWidth || 1920, options?.maxHeight || 1080);
+            this.uploadProgress.set(80);
+            this.uploadMessage.set("Remplacement de l'image...");
+            this.forceEditorUpdate();
+            // Petit délai pour le remplacement
+            await new Promise((resolve) => setTimeout(resolve, 100));
+            // Insérer la nouvelle image à la position actuelle
+            this.insertImage(editor, {
+                src: result.src,
+                alt: result.name,
+                title: `${result.name} (${result.width}×${result.height})`,
+                width: result.width,
+                height: result.height,
+            });
+            // L'image est remplacée, maintenant on peut cacher l'indicateur
+            this.isUploading.set(false);
+            this.uploadProgress.set(0);
+            this.uploadMessage.set("");
+            this.forceEditorUpdate();
+            this.currentEditor = null;
+        }
+        catch (error) {
+            // En cas d'erreur, restaurer l'image originale
+            if (backupImage["src"]) {
+                this.insertImage(editor, {
+                    src: backupImage["src"],
+                    alt: backupImage["alt"],
+                    title: backupImage["title"],
+                    width: backupImage["width"],
+                    height: backupImage["height"],
+                });
+            }
+            this.isUploading.set(false);
+            this.uploadProgress.set(0);
+            this.uploadMessage.set("");
+            this.forceEditorUpdate();
+            this.currentEditor = null;
+            console.error("Erreur lors du remplacement d'image:", error);
+            throw error;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ImageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ImageService, providedIn: "root" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ImageService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: "root",
+                }]
+        }] });
+
+const ENGLISH_TRANSLATIONS = {
+    toolbar: {
+        bold: "Bold",
+        italic: "Italic",
+        underline: "Underline",
+        strike: "Strikethrough",
+        code: "Code",
+        superscript: "Superscript",
+        subscript: "Subscript",
+        highlight: "Highlight",
+        heading1: "Heading 1",
+        heading2: "Heading 2",
+        heading3: "Heading 3",
+        bulletList: "Bullet List",
+        orderedList: "Ordered List",
+        blockquote: "Blockquote",
+        alignLeft: "Align Left",
+        alignCenter: "Align Center",
+        alignRight: "Align Right",
+        alignJustify: "Align Justify",
+        link: "Add Link",
+        image: "Add Image",
+        horizontalRule: "Horizontal Rule",
+        undo: "Undo",
+        redo: "Redo",
+    },
+    bubbleMenu: {
+        bold: "Bold",
+        italic: "Italic",
+        underline: "Underline",
+        strike: "Strikethrough",
+        code: "Code",
+        superscript: "Superscript",
+        subscript: "Subscript",
+        highlight: "Highlight",
+        link: "Link",
+        addLink: "Add Link",
+        editLink: "Edit Link",
+        removeLink: "Remove Link",
+        linkUrl: "Link URL",
+        linkText: "Link Text",
+        openLink: "Open Link",
+    },
+    slashCommands: {
+        heading1: {
+            title: "Heading 1",
+            description: "Large section heading",
+            keywords: ["heading", "h1", "title", "1", "header"],
+        },
+        heading2: {
+            title: "Heading 2",
+            description: "Medium section heading",
+            keywords: ["heading", "h2", "title", "2", "header"],
+        },
+        heading3: {
+            title: "Heading 3",
+            description: "Small section heading",
+            keywords: ["heading", "h3", "title", "3", "header"],
+        },
+        bulletList: {
+            title: "Bullet List",
+            description: "Create a bullet list",
+            keywords: ["bullet", "list", "ul", "unordered"],
+        },
+        orderedList: {
+            title: "Ordered List",
+            description: "Create an ordered list",
+            keywords: ["ordered", "list", "ol", "numbered"],
+        },
+        blockquote: {
+            title: "Blockquote",
+            description: "Add a blockquote",
+            keywords: ["quote", "blockquote", "citation"],
+        },
+        code: {
+            title: "Code Block",
+            description: "Add a code block",
+            keywords: ["code", "codeblock", "pre", "programming"],
+        },
+        image: {
+            title: "Image",
+            description: "Insert an image",
+            keywords: ["image", "photo", "picture", "img"],
+        },
+        horizontalRule: {
+            title: "Horizontal Rule",
+            description: "Add a horizontal line",
+            keywords: ["hr", "horizontal", "rule", "line", "separator"],
+        },
+    },
+    imageUpload: {
+        selectImage: "Select Image",
+        uploadingImage: "Uploading image...",
+        uploadProgress: "Upload Progress",
+        uploadError: "Upload Error",
+        uploadSuccess: "Upload Success",
+        imageTooLarge: "Image too large",
+        invalidFileType: "Invalid file type",
+        dragDropText: "Drag and drop images here",
+        changeImage: "Change Image",
+        deleteImage: "Delete Image",
+        resizeSmall: "Small",
+        resizeMedium: "Medium",
+        resizeLarge: "Large",
+        resizeOriginal: "Original",
+    },
+    editor: {
+        placeholder: "Start typing...",
+        characters: "characters",
+        words: "words",
+        imageLoadError: "Error loading image",
+        linkPrompt: "Enter link URL",
+        linkUrlPrompt: "Enter URL",
+        confirmDelete: "Are you sure you want to delete this?",
+    },
+    common: {
+        cancel: "Cancel",
+        confirm: "Confirm",
+        apply: "Apply",
+        delete: "Delete",
+        save: "Save",
+        close: "Close",
+        loading: "Loading",
+        error: "Error",
+        success: "Success",
+    },
+};
+const FRENCH_TRANSLATIONS = {
+    toolbar: {
+        bold: "Gras",
+        italic: "Italique",
+        underline: "Souligné",
+        strike: "Barré",
+        code: "Code",
+        superscript: "Exposant",
+        subscript: "Indice",
+        highlight: "Surligner",
+        heading1: "Titre 1",
+        heading2: "Titre 2",
+        heading3: "Titre 3",
+        bulletList: "Liste à puces",
+        orderedList: "Liste numérotée",
+        blockquote: "Citation",
+        alignLeft: "Aligner à gauche",
+        alignCenter: "Centrer",
+        alignRight: "Aligner à droite",
+        alignJustify: "Justifier",
+        link: "Ajouter un lien",
+        image: "Ajouter une image",
+        horizontalRule: "Ligne horizontale",
+        undo: "Annuler",
+        redo: "Refaire",
+    },
+    bubbleMenu: {
+        bold: "Gras",
+        italic: "Italique",
+        underline: "Souligné",
+        strike: "Barré",
+        code: "Code",
+        superscript: "Exposant",
+        subscript: "Indice",
+        highlight: "Surligner",
+        link: "Lien",
+        addLink: "Ajouter un lien",
+        editLink: "Modifier le lien",
+        removeLink: "Supprimer le lien",
+        linkUrl: "URL du lien",
+        linkText: "Texte du lien",
+        openLink: "Ouvrir le lien",
+    },
+    slashCommands: {
+        heading1: {
+            title: "Titre 1",
+            description: "Grand titre de section",
+            keywords: ["heading", "h1", "titre", "title", "1", "header"],
+        },
+        heading2: {
+            title: "Titre 2",
+            description: "Titre de sous-section",
+            keywords: ["heading", "h2", "titre", "title", "2", "header"],
+        },
+        heading3: {
+            title: "Titre 3",
+            description: "Petit titre",
+            keywords: ["heading", "h3", "titre", "title", "3", "header"],
+        },
+        bulletList: {
+            title: "Liste à puces",
+            description: "Créer une liste à puces",
+            keywords: ["bullet", "list", "liste", "puces", "ul"],
+        },
+        orderedList: {
+            title: "Liste numérotée",
+            description: "Créer une liste numérotée",
+            keywords: ["numbered", "list", "liste", "numérotée", "ol", "ordered"],
+        },
+        blockquote: {
+            title: "Citation",
+            description: "Ajouter une citation",
+            keywords: ["quote", "blockquote", "citation"],
+        },
+        code: {
+            title: "Bloc de code",
+            description: "Ajouter un bloc de code",
+            keywords: ["code", "codeblock", "pre", "programmation"],
+        },
+        image: {
+            title: "Image",
+            description: "Insérer une image",
+            keywords: ["image", "photo", "picture", "img"],
+        },
+        horizontalRule: {
+            title: "Ligne horizontale",
+            description: "Ajouter une ligne de séparation",
+            keywords: ["hr", "horizontal", "rule", "ligne", "séparation"],
+        },
+    },
+    imageUpload: {
+        selectImage: "Sélectionner une image",
+        uploadingImage: "Téléchargement de l'image...",
+        uploadProgress: "Progression du téléchargement",
+        uploadError: "Erreur de téléchargement",
+        uploadSuccess: "Téléchargement réussi",
+        imageTooLarge: "Image trop volumineuse",
+        invalidFileType: "Type de fichier invalide",
+        dragDropText: "Glissez et déposez des images ici",
+        changeImage: "Changer l'image",
+        deleteImage: "Supprimer l'image",
+        resizeSmall: "Petit",
+        resizeMedium: "Moyen",
+        resizeLarge: "Grand",
+        resizeOriginal: "Original",
+    },
+    editor: {
+        placeholder: "Commencez à écrire...",
+        characters: "caractères",
+        words: "mots",
+        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 ?",
+    },
+    common: {
+        cancel: "Annuler",
+        confirm: "Confirmer",
+        apply: "Appliquer",
+        delete: "Supprimer",
+        save: "Sauvegarder",
+        close: "Fermer",
+        loading: "Chargement",
+        error: "Erreur",
+        success: "Succès",
+    },
+};
+class TiptapI18nService {
+    constructor() {
+        this._currentLocale = signal("en");
+        this._translations = signal({
+            en: ENGLISH_TRANSLATIONS,
+            fr: FRENCH_TRANSLATIONS,
+        });
+        // Signaux publics
+        this.currentLocale = this._currentLocale.asReadonly();
+        this.translations = computed(() => this._translations()[this._currentLocale()]);
+        // Méthodes de traduction rapides
+        this.t = computed(() => this.translations());
+        this.toolbar = computed(() => this.translations().toolbar);
+        this.bubbleMenu = computed(() => this.translations().bubbleMenu);
+        this.slashCommands = computed(() => this.translations().slashCommands);
+        this.imageUpload = computed(() => this.translations().imageUpload);
+        this.editor = computed(() => this.translations().editor);
+        this.common = computed(() => this.translations().common);
+        // Détecter automatiquement la langue du navigateur
+        this.detectBrowserLanguage();
+    }
+    setLocale(locale) {
+        this._currentLocale.set(locale);
+    }
+    autoDetectLocale() {
+        this.detectBrowserLanguage();
+    }
+    getSupportedLocales() {
+        return Object.keys(this._translations());
+    }
+    addTranslations(locale, translations) {
+        this._translations.update((current) => ({
+            ...current,
+            [locale]: {
+                ...current[locale],
+                ...translations,
+            },
+        }));
+    }
+    detectBrowserLanguage() {
+        const browserLang = navigator.language.toLowerCase();
+        if (browserLang.startsWith("fr")) {
+            this._currentLocale.set("fr");
+        }
+        else {
+            this._currentLocale.set("en");
+        }
+    }
+    // Méthodes utilitaires pour les composants
+    getToolbarTitle(key) {
+        return this.translations().toolbar[key];
+    }
+    getBubbleMenuTitle(key) {
+        return this.translations().bubbleMenu[key];
+    }
+    getSlashCommand(key) {
+        return this.translations().slashCommands[key];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapI18nService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapI18nService, providedIn: "root" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapI18nService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: "root",
+                }]
+        }], ctorParameters: () => [] });
+
+class EditorCommandsService {
+    // Méthodes pour vérifier l'état actif
+    isActive(editor, name, attributes) {
+        return editor.isActive(name, attributes);
+    }
+    // Méthodes pour vérifier si une commande peut être exécutée
+    canExecute(editor, command) {
+        if (!editor)
+            return false;
+        switch (command) {
+            case "toggleBold":
+                return editor.can().chain().focus().toggleBold().run();
+            case "toggleItalic":
+                return editor.can().chain().focus().toggleItalic().run();
+            case "toggleStrike":
+                return editor.can().chain().focus().toggleStrike().run();
+            case "toggleCode":
+                return editor.can().chain().focus().toggleCode().run();
+            case "toggleUnderline":
+                return editor.can().chain().focus().toggleUnderline().run();
+            case "toggleSuperscript":
+                return editor.can().chain().focus().toggleSuperscript().run();
+            case "toggleSubscript":
+                return editor.can().chain().focus().toggleSubscript().run();
+            case "setTextAlign":
+                return editor.can().chain().focus().setTextAlign("left").run();
+            case "toggleLink":
+                return editor.can().chain().focus().toggleLink({ href: "" }).run();
+            case "insertHorizontalRule":
+                return editor.can().chain().focus().setHorizontalRule().run();
+            case "toggleHighlight":
+                return editor.can().chain().focus().toggleHighlight().run();
+            case "undo":
+                return editor.can().chain().focus().undo().run();
+            case "redo":
+                return editor.can().chain().focus().redo().run();
+            default:
+                return false;
+        }
+    }
+    // Méthodes pour exécuter les commandes
+    toggleBold(editor) {
+        editor.chain().focus().toggleBold().run();
+    }
+    toggleItalic(editor) {
+        editor.chain().focus().toggleItalic().run();
+    }
+    toggleStrike(editor) {
+        editor.chain().focus().toggleStrike().run();
+    }
+    toggleCode(editor) {
+        editor.chain().focus().toggleCode().run();
+    }
+    toggleHeading(editor, level) {
+        editor.chain().focus().toggleHeading({ level }).run();
+    }
+    toggleBulletList(editor) {
+        editor.chain().focus().toggleBulletList().run();
+    }
+    toggleOrderedList(editor) {
+        editor.chain().focus().toggleOrderedList().run();
+    }
+    toggleBlockquote(editor) {
+        editor.chain().focus().toggleBlockquote().run();
+    }
+    undo(editor) {
+        editor.chain().focus().undo().run();
+    }
+    redo(editor) {
+        editor.chain().focus().redo().run();
+    }
+    // Nouvelles méthodes pour les formatages supplémentaires
+    toggleUnderline(editor) {
+        editor.chain().focus().toggleUnderline().run();
+    }
+    toggleSuperscript(editor) {
+        editor.chain().focus().toggleSuperscript().run();
+    }
+    toggleSubscript(editor) {
+        editor.chain().focus().toggleSubscript().run();
+    }
+    setTextAlign(editor, alignment) {
+        editor.chain().focus().setTextAlign(alignment).run();
+    }
+    toggleLink(editor, url) {
+        if (url) {
+            editor.chain().focus().toggleLink({ href: url }).run();
+        }
+        else {
+            // Si pas d'URL fournie, on demande à l'utilisateur
+            const href = window.prompt("URL du lien:");
+            if (href) {
+                editor.chain().focus().toggleLink({ href }).run();
+            }
+        }
+    }
+    insertHorizontalRule(editor) {
+        editor.chain().focus().setHorizontalRule().run();
+    }
+    toggleHighlight(editor, color) {
+        if (color) {
+            editor.chain().focus().toggleHighlight({ color }).run();
+        }
+        else {
+            editor.chain().focus().toggleHighlight().run();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: EditorCommandsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: EditorCommandsService, providedIn: "root" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: EditorCommandsService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: "root",
+                }]
+        }] });
+
+class TiptapToolbarComponent {
+    constructor(editorCommands) {
+        this.editorCommands = editorCommands;
+        this.editor = input.required();
+        this.config = input.required();
+        // Outputs pour les événements d'image
+        this.imageUploaded = output();
+        this.imageError = output();
+        this.imageService = inject(ImageService);
+        this.i18nService = inject(TiptapI18nService);
+        // Computed values pour les traductions
+        this.t = this.i18nService.toolbar;
+    }
+    isActive(name, attributes) {
+        return this.editorCommands.isActive(this.editor(), name, attributes);
+    }
+    canExecute(command) {
+        return this.editorCommands.canExecute(this.editor(), command);
+    }
+    toggleBold() {
+        this.editorCommands.toggleBold(this.editor());
+    }
+    toggleItalic() {
+        this.editorCommands.toggleItalic(this.editor());
+    }
+    toggleStrike() {
+        this.editorCommands.toggleStrike(this.editor());
+    }
+    toggleCode() {
+        this.editorCommands.toggleCode(this.editor());
+    }
+    toggleHeading(level) {
+        this.editorCommands.toggleHeading(this.editor(), level);
+    }
+    toggleBulletList() {
+        this.editorCommands.toggleBulletList(this.editor());
+    }
+    toggleOrderedList() {
+        this.editorCommands.toggleOrderedList(this.editor());
+    }
+    toggleBlockquote() {
+        this.editorCommands.toggleBlockquote(this.editor());
+    }
+    undo() {
+        this.editorCommands.undo(this.editor());
+    }
+    redo() {
+        this.editorCommands.redo(this.editor());
+    }
+    // Nouvelles méthodes pour les formatages supplémentaires
+    toggleUnderline() {
+        this.editorCommands.toggleUnderline(this.editor());
+    }
+    toggleSuperscript() {
+        this.editorCommands.toggleSuperscript(this.editor());
+    }
+    toggleSubscript() {
+        this.editorCommands.toggleSubscript(this.editor());
+    }
+    setTextAlign(alignment) {
+        this.editorCommands.setTextAlign(this.editor(), alignment);
+    }
+    toggleLink() {
+        this.editorCommands.toggleLink(this.editor());
+    }
+    insertHorizontalRule() {
+        this.editorCommands.insertHorizontalRule(this.editor());
+    }
+    toggleHighlight() {
+        this.editorCommands.toggleHighlight(this.editor());
+    }
+    // Méthode pour insérer une image
+    async insertImage() {
+        try {
+            await this.imageService.selectAndUploadImage(this.editor());
+        }
+        catch (error) {
+            console.error("Erreur lors de l'upload d'image:", error);
+            this.imageError.emit("Erreur lors de l'upload d'image");
+        }
+    }
+    // Méthodes pour les événements d'image (conservées pour compatibilité)
+    onImageSelected(result) {
+        this.imageUploaded.emit(result);
+    }
+    onImageError(error) {
+        this.imageError.emit(error);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapToolbarComponent, deps: [{ token: EditorCommandsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: TiptapToolbarComponent, isStandalone: true, selector: "tiptap-toolbar", inputs: { editor: { classPropertyName: "editor", publicName: "editor", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { imageUploaded: "imageUploaded", imageError: "imageError" }, ngImport: i0, template: `
+    <div class="tiptap-toolbar">
+      @if (config().bold) {
+      <tiptap-button
+        icon="format_bold"
+        [title]="t().bold"
+        [active]="isActive('bold')"
+        [disabled]="!canExecute('toggleBold')"
+        (onClick)="toggleBold()"
+      />
+      } @if (config().italic) {
+      <tiptap-button
+        icon="format_italic"
+        [title]="t().italic"
+        [active]="isActive('italic')"
+        [disabled]="!canExecute('toggleItalic')"
+        (onClick)="toggleItalic()"
+      />
+      } @if (config().underline) {
+      <tiptap-button
+        icon="format_underlined"
+        [title]="t().underline"
+        [active]="isActive('underline')"
+        [disabled]="!canExecute('toggleUnderline')"
+        (onClick)="toggleUnderline()"
+      />
+      } @if (config().strike) {
+      <tiptap-button
+        icon="strikethrough_s"
+        [title]="t().strike"
+        [active]="isActive('strike')"
+        [disabled]="!canExecute('toggleStrike')"
+        (onClick)="toggleStrike()"
+      />
+      } @if (config().code) {
+      <tiptap-button
+        icon="code"
+        [title]="t().code"
+        [active]="isActive('code')"
+        [disabled]="!canExecute('toggleCode')"
+        (onClick)="toggleCode()"
+      />
+      } @if (config().superscript) {
+      <tiptap-button
+        icon="superscript"
+        [title]="t().superscript"
+        [active]="isActive('superscript')"
+        [disabled]="!canExecute('toggleSuperscript')"
+        (onClick)="toggleSuperscript()"
+      />
+      } @if (config().subscript) {
+      <tiptap-button
+        icon="subscript"
+        [title]="t().subscript"
+        [active]="isActive('subscript')"
+        [disabled]="!canExecute('toggleSubscript')"
+        (onClick)="toggleSubscript()"
+      />
+      } @if (config().highlight) {
+      <tiptap-button
+        icon="highlight"
+        [title]="t().highlight"
+        [active]="isActive('highlight')"
+        [disabled]="!canExecute('toggleHighlight')"
+        (onClick)="toggleHighlight()"
+      />
+      } @if (config().separator && (config().heading1 || config().heading2 ||
+      config().heading3)) {
+      <tiptap-separator />
+      } @if (config().heading1) {
+      <tiptap-button
+        icon="format_h1"
+        [title]="t().heading1"
+        variant="text"
+        [active]="isActive('heading', { level: 1 })"
+        (onClick)="toggleHeading(1)"
+      />
+      } @if (config().heading2) {
+      <tiptap-button
+        icon="format_h2"
+        [title]="t().heading2"
+        variant="text"
+        [active]="isActive('heading', { level: 2 })"
+        (onClick)="toggleHeading(2)"
+      />
+      } @if (config().heading3) {
+      <tiptap-button
+        icon="format_h3"
+        [title]="t().heading3"
+        variant="text"
+        [active]="isActive('heading', { level: 3 })"
+        (onClick)="toggleHeading(3)"
+      />
+      } @if (config().separator && (config().bulletList || config().orderedList
+      || config().blockquote)) {
+      <tiptap-separator />
+      } @if (config().bulletList) {
+      <tiptap-button
+        icon="format_list_bulleted"
+        [title]="t().bulletList"
+        [active]="isActive('bulletList')"
+        (onClick)="toggleBulletList()"
+      />
+      } @if (config().orderedList) {
+      <tiptap-button
+        icon="format_list_numbered"
+        [title]="t().orderedList"
+        [active]="isActive('orderedList')"
+        (onClick)="toggleOrderedList()"
+      />
+      } @if (config().blockquote) {
+      <tiptap-button
+        icon="format_quote"
+        [title]="t().blockquote"
+        [active]="isActive('blockquote')"
+        (onClick)="toggleBlockquote()"
+      />
+      } @if (config().separator && (config().alignLeft || config().alignCenter
+      || config().alignRight || config().alignJustify)) {
+      <tiptap-separator />
+      } @if (config().alignLeft) {
+      <tiptap-button
+        icon="format_align_left"
+        [title]="t().alignLeft"
+        [active]="isActive('textAlign', { textAlign: 'left' })"
+        (onClick)="setTextAlign('left')"
+      />
+      } @if (config().alignCenter) {
+      <tiptap-button
+        icon="format_align_center"
+        [title]="t().alignCenter"
+        [active]="isActive('textAlign', { textAlign: 'center' })"
+        (onClick)="setTextAlign('center')"
+      />
+      } @if (config().alignRight) {
+      <tiptap-button
+        icon="format_align_right"
+        [title]="t().alignRight"
+        [active]="isActive('textAlign', { textAlign: 'right' })"
+        (onClick)="setTextAlign('right')"
+      />
+      } @if (config().alignJustify) {
+      <tiptap-button
+        icon="format_align_justify"
+        [title]="t().alignJustify"
+        [active]="isActive('textAlign', { textAlign: 'justify' })"
+        (onClick)="setTextAlign('justify')"
+      />
+      } @if (config().separator && (config().link || config().horizontalRule)) {
+      <tiptap-separator />
+      } @if (config().link) {
+      <tiptap-button
+        icon="link"
+        [title]="t().link"
+        [active]="isActive('link')"
+        (onClick)="toggleLink()"
+      />
+      } @if (config().horizontalRule) {
+      <tiptap-button
+        icon="horizontal_rule"
+        [title]="t().horizontalRule"
+        (onClick)="insertHorizontalRule()"
+      />
+      } @if (config().separator && config().image) {
+      <tiptap-separator />
+      } @if (config().image) {
+      <tiptap-button
+        icon="image"
+        [title]="t().image"
+        (onClick)="insertImage()"
+      />
+      } @if (config().separator && (config().undo || config().redo)) {
+      <tiptap-separator />
+      } @if (config().undo) {
+      <tiptap-button
+        icon="undo"
+        [title]="t().undo"
+        [disabled]="!canExecute('undo')"
+        (onClick)="undo()"
+      />
+      } @if (config().redo) {
+      <tiptap-button
+        icon="redo"
+        [title]="t().redo"
+        [disabled]="!canExecute('redo')"
+        (onClick)="redo()"
+      />
+      }
+    </div>
+  `, isInline: true, styles: [".tiptap-toolbar{display:flex;align-items:center;gap:4px;padding:4px 8px;background:#f8f9fa;border-bottom:1px solid #e2e8f0;flex-wrap:wrap;min-height:32px;position:relative}.toolbar-group{display:flex;align-items:center;gap:2px;padding:0 4px}.toolbar-separator{width:1px;height:24px;background:#e2e8f0;margin:0 4px}@media (max-width: 768px){.tiptap-toolbar{padding:6px 8px;gap:2px}.toolbar-group{gap:1px}}@keyframes toolbarSlideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.tiptap-toolbar{animation:toolbarSlideIn .3s cubic-bezier(.4,0,.2,1)}\n"], dependencies: [{ kind: "component", type: TiptapButtonComponent, selector: "tiptap-button", inputs: ["icon", "title", "active", "disabled", "variant", "size", "iconSize"], outputs: ["onClick"] }, { kind: "component", type: TiptapSeparatorComponent, selector: "tiptap-separator", inputs: ["orientation", "size"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapToolbarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "tiptap-toolbar", standalone: true, imports: [TiptapButtonComponent, TiptapSeparatorComponent], template: `
+    <div class="tiptap-toolbar">
+      @if (config().bold) {
+      <tiptap-button
+        icon="format_bold"
+        [title]="t().bold"
+        [active]="isActive('bold')"
+        [disabled]="!canExecute('toggleBold')"
+        (onClick)="toggleBold()"
+      />
+      } @if (config().italic) {
+      <tiptap-button
+        icon="format_italic"
+        [title]="t().italic"
+        [active]="isActive('italic')"
+        [disabled]="!canExecute('toggleItalic')"
+        (onClick)="toggleItalic()"
+      />
+      } @if (config().underline) {
+      <tiptap-button
+        icon="format_underlined"
+        [title]="t().underline"
+        [active]="isActive('underline')"
+        [disabled]="!canExecute('toggleUnderline')"
+        (onClick)="toggleUnderline()"
+      />
+      } @if (config().strike) {
+      <tiptap-button
+        icon="strikethrough_s"
+        [title]="t().strike"
+        [active]="isActive('strike')"
+        [disabled]="!canExecute('toggleStrike')"
+        (onClick)="toggleStrike()"
+      />
+      } @if (config().code) {
+      <tiptap-button
+        icon="code"
+        [title]="t().code"
+        [active]="isActive('code')"
+        [disabled]="!canExecute('toggleCode')"
+        (onClick)="toggleCode()"
+      />
+      } @if (config().superscript) {
+      <tiptap-button
+        icon="superscript"
+        [title]="t().superscript"
+        [active]="isActive('superscript')"
+        [disabled]="!canExecute('toggleSuperscript')"
+        (onClick)="toggleSuperscript()"
+      />
+      } @if (config().subscript) {
+      <tiptap-button
+        icon="subscript"
+        [title]="t().subscript"
+        [active]="isActive('subscript')"
+        [disabled]="!canExecute('toggleSubscript')"
+        (onClick)="toggleSubscript()"
+      />
+      } @if (config().highlight) {
+      <tiptap-button
+        icon="highlight"
+        [title]="t().highlight"
+        [active]="isActive('highlight')"
+        [disabled]="!canExecute('toggleHighlight')"
+        (onClick)="toggleHighlight()"
+      />
+      } @if (config().separator && (config().heading1 || config().heading2 ||
+      config().heading3)) {
+      <tiptap-separator />
+      } @if (config().heading1) {
+      <tiptap-button
+        icon="format_h1"
+        [title]="t().heading1"
+        variant="text"
+        [active]="isActive('heading', { level: 1 })"
+        (onClick)="toggleHeading(1)"
+      />
+      } @if (config().heading2) {
+      <tiptap-button
+        icon="format_h2"
+        [title]="t().heading2"
+        variant="text"
+        [active]="isActive('heading', { level: 2 })"
+        (onClick)="toggleHeading(2)"
+      />
+      } @if (config().heading3) {
+      <tiptap-button
+        icon="format_h3"
+        [title]="t().heading3"
+        variant="text"
+        [active]="isActive('heading', { level: 3 })"
+        (onClick)="toggleHeading(3)"
+      />
+      } @if (config().separator && (config().bulletList || config().orderedList
+      || config().blockquote)) {
+      <tiptap-separator />
+      } @if (config().bulletList) {
+      <tiptap-button
+        icon="format_list_bulleted"
+        [title]="t().bulletList"
+        [active]="isActive('bulletList')"
+        (onClick)="toggleBulletList()"
+      />
+      } @if (config().orderedList) {
+      <tiptap-button
+        icon="format_list_numbered"
+        [title]="t().orderedList"
+        [active]="isActive('orderedList')"
+        (onClick)="toggleOrderedList()"
+      />
+      } @if (config().blockquote) {
+      <tiptap-button
+        icon="format_quote"
+        [title]="t().blockquote"
+        [active]="isActive('blockquote')"
+        (onClick)="toggleBlockquote()"
+      />
+      } @if (config().separator && (config().alignLeft || config().alignCenter
+      || config().alignRight || config().alignJustify)) {
+      <tiptap-separator />
+      } @if (config().alignLeft) {
+      <tiptap-button
+        icon="format_align_left"
+        [title]="t().alignLeft"
+        [active]="isActive('textAlign', { textAlign: 'left' })"
+        (onClick)="setTextAlign('left')"
+      />
+      } @if (config().alignCenter) {
+      <tiptap-button
+        icon="format_align_center"
+        [title]="t().alignCenter"
+        [active]="isActive('textAlign', { textAlign: 'center' })"
+        (onClick)="setTextAlign('center')"
+      />
+      } @if (config().alignRight) {
+      <tiptap-button
+        icon="format_align_right"
+        [title]="t().alignRight"
+        [active]="isActive('textAlign', { textAlign: 'right' })"
+        (onClick)="setTextAlign('right')"
+      />
+      } @if (config().alignJustify) {
+      <tiptap-button
+        icon="format_align_justify"
+        [title]="t().alignJustify"
+        [active]="isActive('textAlign', { textAlign: 'justify' })"
+        (onClick)="setTextAlign('justify')"
+      />
+      } @if (config().separator && (config().link || config().horizontalRule)) {
+      <tiptap-separator />
+      } @if (config().link) {
+      <tiptap-button
+        icon="link"
+        [title]="t().link"
+        [active]="isActive('link')"
+        (onClick)="toggleLink()"
+      />
+      } @if (config().horizontalRule) {
+      <tiptap-button
+        icon="horizontal_rule"
+        [title]="t().horizontalRule"
+        (onClick)="insertHorizontalRule()"
+      />
+      } @if (config().separator && config().image) {
+      <tiptap-separator />
+      } @if (config().image) {
+      <tiptap-button
+        icon="image"
+        [title]="t().image"
+        (onClick)="insertImage()"
+      />
+      } @if (config().separator && (config().undo || config().redo)) {
+      <tiptap-separator />
+      } @if (config().undo) {
+      <tiptap-button
+        icon="undo"
+        [title]="t().undo"
+        [disabled]="!canExecute('undo')"
+        (onClick)="undo()"
+      />
+      } @if (config().redo) {
+      <tiptap-button
+        icon="redo"
+        [title]="t().redo"
+        [disabled]="!canExecute('redo')"
+        (onClick)="redo()"
+      />
+      }
+    </div>
+  `, styles: [".tiptap-toolbar{display:flex;align-items:center;gap:4px;padding:4px 8px;background:#f8f9fa;border-bottom:1px solid #e2e8f0;flex-wrap:wrap;min-height:32px;position:relative}.toolbar-group{display:flex;align-items:center;gap:2px;padding:0 4px}.toolbar-separator{width:1px;height:24px;background:#e2e8f0;margin:0 4px}@media (max-width: 768px){.tiptap-toolbar{padding:6px 8px;gap:2px}.toolbar-group{gap:1px}}@keyframes toolbarSlideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.tiptap-toolbar{animation:toolbarSlideIn .3s cubic-bezier(.4,0,.2,1)}\n"] }]
+        }], ctorParameters: () => [{ type: EditorCommandsService }] });
+
+class TiptapImageUploadComponent {
+    constructor() {
+        // Inputs
+        this.config = input({
+            maxSize: 5, // 5MB par défaut
+            maxWidth: 1920, // largeur max par défaut
+            maxHeight: 1080, // hauteur max par défaut
+            allowedTypes: ["image/jpeg", "image/png", "image/gif", "image/webp"],
+            enableDragDrop: true,
+            showPreview: true,
+            multiple: false,
+            compressImages: true,
+            quality: 0.8,
+        });
+        // Outputs
+        this.imageSelected = output();
+        this.error = output();
+        // Signals internes
+        this.isDragOver = signal(false);
+        this.isUploading = signal(false);
+        this.uploadProgress = signal(0);
+        this.previewImage = signal(null);
+        this.previewInfo = signal("");
+        this.errorMessage = signal(null);
+        // Computed
+        this.acceptedTypes = computed(() => {
+            const types = this.config().allowedTypes || ["image/*"];
+            return types.join(",");
+        });
+    }
+    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", "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 TiptapBubbleMenuComponent {
+    // Effect comme propriété de classe pour éviter l'erreur d'injection context
+    constructor() {
+        this.editor = input.required();
+        this.config = input({
+            bold: true,
+            italic: true,
+            underline: true,
+            strike: true,
+            code: true,
+            superscript: false,
+            subscript: false,
+            highlight: true,
+            link: true,
+            separator: true,
+        });
+        this.tippyInstance = null;
+        this.updateTimeout = null;
+        this.bubbleMenuConfig = computed(() => ({
+            bold: true,
+            italic: true,
+            underline: true,
+            strike: true,
+            code: true,
+            superscript: false,
+            subscript: false,
+            highlight: true,
+            link: true,
+            separator: true,
+            ...this.config(),
+        }));
+        this.updateMenu = () => {
+            // Debounce pour éviter les appels trop fréquents
+            if (this.updateTimeout) {
+                clearTimeout(this.updateTimeout);
+            }
+            this.updateTimeout = setTimeout(() => {
+                const ed = this.editor();
+                if (!ed)
+                    return;
+                const { from, to } = ed.state.selection;
+                const hasTextSelection = from !== to;
+                const isImageSelected = ed.isActive("image") || ed.isActive("resizableImage");
+                // Ne montrer le menu texte que si :
+                // - Il y a une sélection de texte
+                // - Aucune image n'est sélectionnée (priorité aux images)
+                // - L'éditeur est éditable
+                const shouldShow = hasTextSelection && !isImageSelected && ed.isEditable;
+                if (shouldShow) {
+                    this.showTippy();
+                }
+                else {
+                    this.hideTippy();
+                }
+            }, 10);
+        };
+        this.handleBlur = () => {
+            // Masquer le menu quand l'éditeur perd le focus
+            setTimeout(() => {
+                this.hideTippy();
+            }, 100);
+        };
+        effect(() => {
+            const ed = this.editor();
+            if (!ed)
+                return;
+            // Nettoyer les anciens listeners
+            ed.off("selectionUpdate", this.updateMenu);
+            ed.off("transaction", this.updateMenu);
+            ed.off("focus", this.updateMenu);
+            ed.off("blur", this.handleBlur);
+            // Ajouter les nouveaux listeners
+            ed.on("selectionUpdate", this.updateMenu);
+            ed.on("transaction", this.updateMenu);
+            ed.on("focus", this.updateMenu);
+            ed.on("blur", this.handleBlur);
+            // Ne pas appeler updateMenu() ici pour éviter l'affichage prématuré
+            // Il sera appelé automatiquement quand l'éditeur sera prêt
+        });
+    }
+    ngOnInit() {
+        // Initialiser Tippy de manière synchrone après que le component soit ready
+        this.initTippy();
+    }
+    ngOnDestroy() {
+        const ed = this.editor();
+        if (ed) {
+            ed.off("selectionUpdate", this.updateMenu);
+            ed.off("transaction", this.updateMenu);
+            ed.off("focus", this.updateMenu);
+            ed.off("blur", this.handleBlur);
+        }
+        // Nettoyer les timeouts
+        if (this.updateTimeout) {
+            clearTimeout(this.updateTimeout);
+        }
+        // Nettoyer Tippy
+        if (this.tippyInstance) {
+            this.tippyInstance.destroy();
+            this.tippyInstance = null;
+        }
+    }
+    initTippy() {
+        // Attendre que l'élément soit disponible
+        if (!this.menuRef?.nativeElement) {
+            setTimeout(() => this.initTippy(), 50);
+            return;
+        }
+        const menuElement = this.menuRef.nativeElement;
+        // S'assurer qu'il n'y a pas déjà une instance
+        if (this.tippyInstance) {
+            this.tippyInstance.destroy();
+        }
+        // Créer l'instance Tippy
+        this.tippyInstance = tippy(document.body, {
+            content: menuElement,
+            trigger: "manual",
+            placement: "top-start",
+            appendTo: () => document.body,
+            interactive: true,
+            arrow: false,
+            offset: [0, 8],
+            hideOnClick: false,
+            onShow: (instance) => {
+                // S'assurer que les autres menus sont fermés
+                this.hideOtherMenus();
+            },
+            getReferenceClientRect: () => this.getSelectionRect(),
+            // Améliorer le positionnement avec scroll
+            popperOptions: {
+                modifiers: [
+                    {
+                        name: "preventOverflow",
+                        options: {
+                            boundary: "viewport",
+                            padding: 8,
+                        },
+                    },
+                    {
+                        name: "flip",
+                        options: {
+                            fallbackPlacements: ["bottom-start", "top-end", "bottom-end"],
+                        },
+                    },
+                ],
+            },
+        });
+        // Maintenant que Tippy est initialisé, faire un premier check
+        this.updateMenu();
+    }
+    getSelectionRect() {
+        const selection = window.getSelection();
+        if (!selection || selection.rangeCount === 0) {
+            return new DOMRect(0, 0, 0, 0);
+        }
+        const range = selection.getRangeAt(0);
+        return range.getBoundingClientRect();
+    }
+    hideOtherMenus() {
+        // Cette méthode peut être étendue pour fermer d'autres menus si nécessaire
+        // Pour l'instant, elle sert de placeholder pour une future coordination entre menus
+    }
+    showTippy() {
+        if (!this.tippyInstance)
+            return;
+        // Mettre à jour la position
+        this.tippyInstance.setProps({
+            getReferenceClientRect: () => this.getSelectionRect(),
+        });
+        this.tippyInstance.show();
+    }
+    hideTippy() {
+        if (this.tippyInstance) {
+            this.tippyInstance.hide();
+        }
+    }
+    isActive(mark) {
+        const ed = this.editor();
+        return ed?.isActive(mark) || false;
+    }
+    onCommand(command, event) {
+        event.preventDefault();
+        const ed = this.editor();
+        if (!ed)
+            return;
+        switch (command) {
+            case "bold":
+                ed.chain().focus().toggleBold().run();
+                break;
+            case "italic":
+                ed.chain().focus().toggleItalic().run();
+                break;
+            case "underline":
+                ed.chain().focus().toggleUnderline().run();
+                break;
+            case "strike":
+                ed.chain().focus().toggleStrike().run();
+                break;
+            case "code":
+                ed.chain().focus().toggleCode().run();
+                break;
+            case "superscript":
+                ed.chain().focus().toggleSuperscript().run();
+                break;
+            case "subscript":
+                ed.chain().focus().toggleSubscript().run();
+                break;
+            case "highlight":
+                ed.chain().focus().toggleHighlight().run();
+                break;
+            case "link":
+                const href = window.prompt("URL du lien:");
+                if (href) {
+                    ed.chain().focus().toggleLink({ href }).run();
+                }
+                break;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapBubbleMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: TiptapBubbleMenuComponent, isStandalone: true, selector: "tiptap-bubble-menu", inputs: { editor: { classPropertyName: "editor", publicName: "editor", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "menuRef", first: true, predicate: ["menuRef"], descendants: true }], ngImport: i0, template: `
+    <div #menuRef class="bubble-menu">
+      @if (bubbleMenuConfig().bold) {
+      <tiptap-button
+        icon="format_bold"
+        title="Gras"
+        [active]="isActive('bold')"
+        (click)="onCommand('bold', $event)"
+      ></tiptap-button>
+      } @if (bubbleMenuConfig().italic) {
+      <tiptap-button
+        icon="format_italic"
+        title="Italique"
+        [active]="isActive('italic')"
+        (click)="onCommand('italic', $event)"
+      ></tiptap-button>
+      } @if (bubbleMenuConfig().underline) {
+      <tiptap-button
+        icon="format_underlined"
+        title="Souligné"
+        [active]="isActive('underline')"
+        (click)="onCommand('underline', $event)"
+      ></tiptap-button>
+      } @if (bubbleMenuConfig().strike) {
+      <tiptap-button
+        icon="strikethrough_s"
+        title="Barré"
+        [active]="isActive('strike')"
+        (click)="onCommand('strike', $event)"
+      ></tiptap-button>
+      } @if (bubbleMenuConfig().superscript) {
+      <tiptap-button
+        icon="superscript"
+        title="Exposant"
+        [active]="isActive('superscript')"
+        (click)="onCommand('superscript', $event)"
+      ></tiptap-button>
+      } @if (bubbleMenuConfig().subscript) {
+      <tiptap-button
+        icon="subscript"
+        title="Indice"
+        [active]="isActive('subscript')"
+        (click)="onCommand('subscript', $event)"
+      ></tiptap-button>
+      } @if (bubbleMenuConfig().highlight) {
+      <tiptap-button
+        icon="highlight"
+        title="Surbrillance"
+        [active]="isActive('highlight')"
+        (click)="onCommand('highlight', $event)"
+      ></tiptap-button>
+      } @if (bubbleMenuConfig().separator && (bubbleMenuConfig().code ||
+      bubbleMenuConfig().link)) {
+      <div class="tiptap-separator"></div>
+      } @if (bubbleMenuConfig().code) {
+      <tiptap-button
+        icon="code"
+        title="Code"
+        [active]="isActive('code')"
+        (click)="onCommand('code', $event)"
+      ></tiptap-button>
+      } @if (bubbleMenuConfig().link) {
+      <tiptap-button
+        icon="link"
+        title="Lien"
+        [active]="isActive('link')"
+        (click)="onCommand('link', $event)"
+      ></tiptap-button>
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "component", type: TiptapButtonComponent, selector: "tiptap-button", inputs: ["icon", "title", "active", "disabled", "variant", "size", "iconSize"], outputs: ["onClick"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapBubbleMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "tiptap-bubble-menu", standalone: true, imports: [TiptapButtonComponent], template: `
+    <div #menuRef class="bubble-menu">
+      @if (bubbleMenuConfig().bold) {
+      <tiptap-button
+        icon="format_bold"
+        title="Gras"
+        [active]="isActive('bold')"
+        (click)="onCommand('bold', $event)"
+      ></tiptap-button>
+      } @if (bubbleMenuConfig().italic) {
+      <tiptap-button
+        icon="format_italic"
+        title="Italique"
+        [active]="isActive('italic')"
+        (click)="onCommand('italic', $event)"
+      ></tiptap-button>
+      } @if (bubbleMenuConfig().underline) {
+      <tiptap-button
+        icon="format_underlined"
+        title="Souligné"
+        [active]="isActive('underline')"
+        (click)="onCommand('underline', $event)"
+      ></tiptap-button>
+      } @if (bubbleMenuConfig().strike) {
+      <tiptap-button
+        icon="strikethrough_s"
+        title="Barré"
+        [active]="isActive('strike')"
+        (click)="onCommand('strike', $event)"
+      ></tiptap-button>
+      } @if (bubbleMenuConfig().superscript) {
+      <tiptap-button
+        icon="superscript"
+        title="Exposant"
+        [active]="isActive('superscript')"
+        (click)="onCommand('superscript', $event)"
+      ></tiptap-button>
+      } @if (bubbleMenuConfig().subscript) {
+      <tiptap-button
+        icon="subscript"
+        title="Indice"
+        [active]="isActive('subscript')"
+        (click)="onCommand('subscript', $event)"
+      ></tiptap-button>
+      } @if (bubbleMenuConfig().highlight) {
+      <tiptap-button
+        icon="highlight"
+        title="Surbrillance"
+        [active]="isActive('highlight')"
+        (click)="onCommand('highlight', $event)"
+      ></tiptap-button>
+      } @if (bubbleMenuConfig().separator && (bubbleMenuConfig().code ||
+      bubbleMenuConfig().link)) {
+      <div class="tiptap-separator"></div>
+      } @if (bubbleMenuConfig().code) {
+      <tiptap-button
+        icon="code"
+        title="Code"
+        [active]="isActive('code')"
+        (click)="onCommand('code', $event)"
+      ></tiptap-button>
+      } @if (bubbleMenuConfig().link) {
+      <tiptap-button
+        icon="link"
+        title="Lien"
+        [active]="isActive('link')"
+        (click)="onCommand('link', $event)"
+      ></tiptap-button>
+      }
+    </div>
+  ` }]
+        }], ctorParameters: () => [], propDecorators: { menuRef: [{
+                type: ViewChild,
+                args: ["menuRef", { static: false }]
+            }] } });
+
+class TiptapImageBubbleMenuComponent {
+    constructor() {
+        this.editor = input.required();
+        this.config = input({
+            changeImage: true,
+            resizeSmall: true,
+            resizeMedium: true,
+            resizeLarge: true,
+            resizeOriginal: true,
+            deleteImage: true,
+            separator: true,
+        });
+        this.tippyInstance = null;
+        this.imageService = inject(ImageService);
+        this.updateTimeout = null;
+        this.imageBubbleMenuConfig = computed(() => ({
+            changeImage: true,
+            resizeSmall: true,
+            resizeMedium: true,
+            resizeLarge: true,
+            resizeOriginal: true,
+            deleteImage: true,
+            separator: true,
+            ...this.config(),
+        }));
+        this.hasResizeButtons = computed(() => {
+            const config = this.imageBubbleMenuConfig();
+            return (config.resizeSmall ||
+                config.resizeMedium ||
+                config.resizeLarge ||
+                config.resizeOriginal);
+        });
+        this.updateMenu = () => {
+            // Debounce pour éviter les appels trop fréquents
+            if (this.updateTimeout) {
+                clearTimeout(this.updateTimeout);
+            }
+            this.updateTimeout = setTimeout(() => {
+                const ed = this.editor();
+                if (!ed)
+                    return;
+                const isImageSelected = ed.isActive("resizableImage") || ed.isActive("image");
+                const { from, to } = ed.state.selection;
+                const hasTextSelection = from !== to;
+                // Ne montrer le menu image que si :
+                // - Une image est sélectionnée
+                // - L'éditeur est éditable
+                const shouldShow = isImageSelected && ed.isEditable;
+                if (shouldShow) {
+                    this.showTippy();
+                }
+                else {
+                    this.hideTippy();
+                }
+            }, 10);
+        };
+        this.handleBlur = () => {
+            // Masquer le menu quand l'éditeur perd le focus
+            setTimeout(() => {
+                this.hideTippy();
+            }, 100);
+        };
+        effect(() => {
+            const ed = this.editor();
+            if (!ed)
+                return;
+            // Nettoyer les anciens listeners
+            ed.off("selectionUpdate", this.updateMenu);
+            ed.off("transaction", this.updateMenu);
+            ed.off("focus", this.updateMenu);
+            ed.off("blur", this.handleBlur);
+            // Ajouter les nouveaux listeners
+            ed.on("selectionUpdate", this.updateMenu);
+            ed.on("transaction", this.updateMenu);
+            ed.on("focus", this.updateMenu);
+            ed.on("blur", this.handleBlur);
+            // Ne pas appeler updateMenu() ici pour éviter l'affichage prématuré
+            // Il sera appelé automatiquement quand l'éditeur sera prêt
+        });
+    }
+    ngOnInit() {
+        // Initialiser Tippy de manière synchrone après que le component soit ready
+        this.initTippy();
+    }
+    ngOnDestroy() {
+        const ed = this.editor();
+        if (ed) {
+            ed.off("selectionUpdate", this.updateMenu);
+            ed.off("transaction", this.updateMenu);
+            ed.off("focus", this.updateMenu);
+            ed.off("blur", this.handleBlur);
+        }
+        // Nettoyer les timeouts
+        if (this.updateTimeout) {
+            clearTimeout(this.updateTimeout);
+        }
+        // Nettoyer Tippy
+        if (this.tippyInstance) {
+            this.tippyInstance.destroy();
+            this.tippyInstance = null;
+        }
+    }
+    initTippy() {
+        // Attendre que l'élément soit disponible
+        if (!this.menuRef?.nativeElement) {
+            setTimeout(() => this.initTippy(), 50);
+            return;
+        }
+        const menuElement = this.menuRef.nativeElement;
+        // S'assurer qu'il n'y a pas déjà une instance
+        if (this.tippyInstance) {
+            this.tippyInstance.destroy();
+        }
+        // Créer l'instance Tippy
+        this.tippyInstance = tippy(document.body, {
+            content: menuElement,
+            trigger: "manual",
+            placement: "top-start",
+            appendTo: () => document.body,
+            interactive: true,
+            arrow: false,
+            offset: [0, 8],
+            hideOnClick: false,
+            onShow: (instance) => {
+                // S'assurer que les autres menus sont fermés
+                this.hideOtherMenus();
+            },
+            getReferenceClientRect: () => this.getImageRect(),
+            // Améliorer le positionnement avec scroll
+            popperOptions: {
+                modifiers: [
+                    {
+                        name: "preventOverflow",
+                        options: {
+                            boundary: "viewport",
+                            padding: 8,
+                        },
+                    },
+                    {
+                        name: "flip",
+                        options: {
+                            fallbackPlacements: ["bottom-start", "top-end", "bottom-end"],
+                        },
+                    },
+                ],
+            },
+        });
+        // Maintenant que Tippy est initialisé, faire un premier check
+        this.updateMenu();
+    }
+    getImageRect() {
+        const ed = this.editor();
+        if (!ed)
+            return new DOMRect(0, 0, 0, 0);
+        // Trouver l'image sélectionnée dans le DOM
+        const { from } = ed.state.selection;
+        // Fonction pour trouver toutes les images dans l'éditeur
+        const getAllImages = () => {
+            const editorElement = ed.view.dom;
+            return Array.from(editorElement.querySelectorAll("img"));
+        };
+        // Fonction pour trouver l'image à la position spécifique
+        const findImageAtPosition = () => {
+            const allImages = getAllImages();
+            for (const img of allImages) {
+                try {
+                    // Obtenir la position ProseMirror de cette image
+                    const imgPos = ed.view.posAtDOM(img, 0);
+                    // Vérifier si cette image correspond à la position sélectionnée
+                    if (Math.abs(imgPos - from) <= 1) {
+                        return img;
+                    }
+                }
+                catch (error) {
+                    // Continuer si on ne peut pas obtenir la position de cette image
+                    continue;
+                }
+            }
+            return null;
+        };
+        // Chercher l'image à la position exacte
+        const imageElement = findImageAtPosition();
+        if (imageElement) {
+            return imageElement.getBoundingClientRect();
+        }
+        return new DOMRect(0, 0, 0, 0);
+    }
+    hideOtherMenus() {
+        // Cette méthode peut être étendue pour fermer d'autres menus si nécessaire
+        // Pour l'instant, elle sert de placeholder pour une future coordination entre menus
+    }
+    showTippy() {
+        if (!this.tippyInstance)
+            return;
+        // Mettre à jour la position
+        this.tippyInstance.setProps({
+            getReferenceClientRect: () => this.getImageRect(),
+        });
+        this.tippyInstance.show();
+    }
+    hideTippy() {
+        if (this.tippyInstance) {
+            this.tippyInstance.hide();
+        }
+    }
+    onCommand(command, event) {
+        event.preventDefault();
+        const ed = this.editor();
+        if (!ed)
+            return;
+        switch (command) {
+            case "changeImage":
+                this.changeImage();
+                break;
+            case "resizeSmall":
+                this.imageService.resizeImageToSmall(ed);
+                break;
+            case "resizeMedium":
+                this.imageService.resizeImageToMedium(ed);
+                break;
+            case "resizeLarge":
+                this.imageService.resizeImageToLarge(ed);
+                break;
+            case "resizeOriginal":
+                this.imageService.resizeImageToOriginal(ed);
+                break;
+            case "deleteImage":
+                this.deleteImage();
+                break;
+        }
+    }
+    async changeImage() {
+        const ed = this.editor();
+        if (!ed)
+            return;
+        try {
+            // Utiliser la méthode spécifique pour remplacer une image existante
+            await this.imageService.selectAndReplaceImage(ed, {
+                quality: 0.8,
+                maxWidth: 1920,
+                maxHeight: 1080,
+                accept: "image/*",
+            });
+        }
+        catch (error) {
+            console.error("Erreur lors du changement d'image:", error);
+        }
+    }
+    deleteImage() {
+        const ed = this.editor();
+        if (ed) {
+            ed.chain().focus().deleteSelection().run();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapImageBubbleMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: TiptapImageBubbleMenuComponent, isStandalone: true, selector: "tiptap-image-bubble-menu", inputs: { editor: { classPropertyName: "editor", publicName: "editor", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "menuRef", first: true, predicate: ["menuRef"], descendants: true }], ngImport: i0, template: `
+    <div #menuRef class="bubble-menu">
+      @if (imageBubbleMenuConfig().changeImage) {
+      <tiptap-button
+        icon="drive_file_rename_outline"
+        title="Changer l'image"
+        (click)="onCommand('changeImage', $event)"
+      ></tiptap-button>
+      } @if (imageBubbleMenuConfig().separator && hasResizeButtons()) {
+      <tiptap-separator></tiptap-separator>
+      } @if (imageBubbleMenuConfig().resizeSmall) {
+      <tiptap-button
+        icon="crop_square"
+        iconSize="small"
+        title="Petite (300×200)"
+        (click)="onCommand('resizeSmall', $event)"
+      ></tiptap-button>
+      } @if (imageBubbleMenuConfig().resizeMedium) {
+      <tiptap-button
+        icon="crop_square"
+        iconSize="medium"
+        title="Moyenne (500×350)"
+        (click)="onCommand('resizeMedium', $event)"
+      ></tiptap-button>
+      } @if (imageBubbleMenuConfig().resizeLarge) {
+      <tiptap-button
+        icon="crop_square"
+        iconSize="large"
+        title="Grande (800×600)"
+        (click)="onCommand('resizeLarge', $event)"
+      ></tiptap-button>
+      } @if (imageBubbleMenuConfig().resizeOriginal) {
+      <tiptap-button
+        icon="photo_size_select_actual"
+        title="Taille originale"
+        (click)="onCommand('resizeOriginal', $event)"
+      ></tiptap-button>
+      } @if (imageBubbleMenuConfig().separator &&
+      imageBubbleMenuConfig().deleteImage) {
+      <tiptap-separator></tiptap-separator>
+      } @if (imageBubbleMenuConfig().deleteImage) {
+      <tiptap-button
+        icon="delete"
+        title="Supprimer l'image"
+        variant="danger"
+        (click)="onCommand('deleteImage', $event)"
+      ></tiptap-button>
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "component", type: TiptapButtonComponent, selector: "tiptap-button", inputs: ["icon", "title", "active", "disabled", "variant", "size", "iconSize"], outputs: ["onClick"] }, { kind: "component", type: TiptapSeparatorComponent, selector: "tiptap-separator", inputs: ["orientation", "size"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapImageBubbleMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "tiptap-image-bubble-menu", standalone: true, imports: [TiptapButtonComponent, TiptapSeparatorComponent], template: `
+    <div #menuRef class="bubble-menu">
+      @if (imageBubbleMenuConfig().changeImage) {
+      <tiptap-button
+        icon="drive_file_rename_outline"
+        title="Changer l'image"
+        (click)="onCommand('changeImage', $event)"
+      ></tiptap-button>
+      } @if (imageBubbleMenuConfig().separator && hasResizeButtons()) {
+      <tiptap-separator></tiptap-separator>
+      } @if (imageBubbleMenuConfig().resizeSmall) {
+      <tiptap-button
+        icon="crop_square"
+        iconSize="small"
+        title="Petite (300×200)"
+        (click)="onCommand('resizeSmall', $event)"
+      ></tiptap-button>
+      } @if (imageBubbleMenuConfig().resizeMedium) {
+      <tiptap-button
+        icon="crop_square"
+        iconSize="medium"
+        title="Moyenne (500×350)"
+        (click)="onCommand('resizeMedium', $event)"
+      ></tiptap-button>
+      } @if (imageBubbleMenuConfig().resizeLarge) {
+      <tiptap-button
+        icon="crop_square"
+        iconSize="large"
+        title="Grande (800×600)"
+        (click)="onCommand('resizeLarge', $event)"
+      ></tiptap-button>
+      } @if (imageBubbleMenuConfig().resizeOriginal) {
+      <tiptap-button
+        icon="photo_size_select_actual"
+        title="Taille originale"
+        (click)="onCommand('resizeOriginal', $event)"
+      ></tiptap-button>
+      } @if (imageBubbleMenuConfig().separator &&
+      imageBubbleMenuConfig().deleteImage) {
+      <tiptap-separator></tiptap-separator>
+      } @if (imageBubbleMenuConfig().deleteImage) {
+      <tiptap-button
+        icon="delete"
+        title="Supprimer l'image"
+        variant="danger"
+        (click)="onCommand('deleteImage', $event)"
+      ></tiptap-button>
+      }
+    </div>
+  ` }]
+        }], ctorParameters: () => [], propDecorators: { menuRef: [{
+                type: ViewChild,
+                args: ["menuRef", { static: false }]
+            }] } });
+
+const DEFAULT_SLASH_COMMANDS = [
+    {
+        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(),
+    },
+];
+class TiptapSlashCommandsComponent {
+    constructor() {
+        this.editor = input.required();
+        this.config = input({
+            commands: DEFAULT_SLASH_COMMANDS,
+        });
+        // Output pour l'upload d'image
+        this.imageUploadRequested = output();
+        this.tippyInstance = null;
+        this.imageService = inject(ImageService);
+        // État local
+        this.isActive = false;
+        this.currentQuery = signal("");
+        this.slashRange = null;
+        // Signal pour l'index sélectionné
+        this.selectedIndex = signal(0);
+        this.commands = computed(() => {
+            const configCommands = this.config().commands || DEFAULT_SLASH_COMMANDS;
+            // 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;
+            });
+        });
+        this.filteredCommands = computed(() => {
+            const query = this.currentQuery().toLowerCase();
+            const commands = this.commands();
+            if (!query) {
+                return commands;
+            }
+            return commands.filter((command) => command.title.toLowerCase().includes(query) ||
+                command.description.toLowerCase().includes(query) ||
+                command.keywords.some((keyword) => keyword.toLowerCase().includes(query)));
+        });
+        this.updateMenu = () => {
+            const ed = this.editor();
+            if (!ed)
+                return;
+            const { from } = ed.state.selection;
+            // Vérifier si on a tapé '/' au début d'une ligne ou après un espace
+            const textBefore = ed.state.doc.textBetween(Math.max(0, from - 20), from, "\n");
+            const slashMatch = textBefore.match(/(?:^|\s)\/([^\/\s]*)$/);
+            if (slashMatch) {
+                const query = slashMatch[1] || "";
+                const wasActive = this.isActive;
+                this.currentQuery.set(query);
+                this.slashRange = {
+                    from: from - slashMatch[0].length + slashMatch[0].indexOf("/"),
+                    to: from,
+                };
+                // Si le menu vient de devenir actif, réinitialiser l'index
+                if (!wasActive) {
+                    this.selectedIndex.set(0);
+                }
+                this.isActive = true;
+                this.showTippy();
+            }
+            else {
+                this.isActive = false;
+                this.hideTippy();
+            }
+        };
+        this.handleBlur = () => {
+            setTimeout(() => this.hideTippy(), 100);
+        };
+        this.handleKeyDown = (event) => {
+            // Ne gérer les touches que si le menu est actif
+            if (!this.isActive || this.filteredCommands().length === 0) {
+                return;
+            }
+            switch (event.key) {
+                case "ArrowDown":
+                    event.preventDefault();
+                    event.stopPropagation();
+                    const nextIndex = (this.selectedIndex() + 1) % this.filteredCommands().length;
+                    this.selectedIndex.set(nextIndex);
+                    this.scrollToSelected();
+                    break;
+                case "ArrowUp":
+                    event.preventDefault();
+                    event.stopPropagation();
+                    const prevIndex = this.selectedIndex() === 0
+                        ? this.filteredCommands().length - 1
+                        : this.selectedIndex() - 1;
+                    this.selectedIndex.set(prevIndex);
+                    this.scrollToSelected();
+                    break;
+                case "Enter":
+                    event.preventDefault();
+                    event.stopPropagation();
+                    const selectedCommand = this.filteredCommands()[this.selectedIndex()];
+                    if (selectedCommand) {
+                        this.executeCommand(selectedCommand);
+                    }
+                    break;
+                case "Escape":
+                    event.preventDefault();
+                    event.stopPropagation();
+                    this.isActive = false;
+                    this.hideTippy();
+                    // Optionnel : supprimer le "/" tapé
+                    const ed = this.editor();
+                    if (ed && this.slashRange) {
+                        const { tr } = ed.state;
+                        tr.delete(this.slashRange.from, this.slashRange.to);
+                        ed.view.dispatch(tr);
+                    }
+                    break;
+            }
+        };
+        effect(() => {
+            const ed = this.editor();
+            if (!ed)
+                return;
+            // Nettoyer les anciens listeners
+            ed.off("selectionUpdate", this.updateMenu);
+            ed.off("transaction", this.updateMenu);
+            ed.off("focus", this.updateMenu);
+            ed.off("blur", this.handleBlur);
+            // Ajouter les nouveaux listeners
+            ed.on("selectionUpdate", this.updateMenu);
+            ed.on("transaction", this.updateMenu);
+            ed.on("focus", this.updateMenu);
+            ed.on("blur", this.handleBlur);
+            // Utiliser le système de plugins ProseMirror pour intercepter les touches
+            this.addKeyboardPlugin(ed);
+            // Ne pas appeler updateMenu() ici pour éviter l'affichage prématuré
+            // Il sera appelé automatiquement quand l'éditeur sera prêt
+        });
+    }
+    ngOnInit() {
+        this.initTippy();
+    }
+    ngOnDestroy() {
+        const ed = this.editor();
+        if (ed) {
+            ed.off("selectionUpdate", this.updateMenu);
+            ed.off("transaction", this.updateMenu);
+            ed.off("focus", this.updateMenu);
+            ed.off("blur", this.handleBlur);
+        }
+        if (this.tippyInstance) {
+            this.tippyInstance.destroy();
+            this.tippyInstance = null;
+        }
+    }
+    initTippy() {
+        if (!this.menuRef?.nativeElement) {
+            setTimeout(() => this.initTippy(), 50);
+            return;
+        }
+        const menuElement = this.menuRef.nativeElement;
+        if (this.tippyInstance) {
+            this.tippyInstance.destroy();
+        }
+        this.tippyInstance = tippy(document.body, {
+            content: menuElement,
+            trigger: "manual",
+            placement: "bottom-start",
+            appendTo: () => document.body,
+            interactive: true,
+            arrow: false,
+            offset: [0, 8],
+            hideOnClick: true,
+            getReferenceClientRect: () => this.getSlashRect(),
+            // Améliorer le positionnement avec scroll
+            popperOptions: {
+                modifiers: [
+                    {
+                        name: "preventOverflow",
+                        options: {
+                            boundary: "viewport",
+                            padding: 8,
+                        },
+                    },
+                    {
+                        name: "flip",
+                        options: {
+                            fallbackPlacements: ["top-start", "bottom-end", "top-end"],
+                        },
+                    },
+                ],
+            },
+        });
+        // Maintenant que Tippy est initialisé, faire un premier check
+        this.updateMenu();
+    }
+    getSlashRect() {
+        const ed = this.editor();
+        if (!ed || !this.slashRange) {
+            return new DOMRect(0, 0, 0, 0);
+        }
+        try {
+            // Utiliser les coordonnées ProseMirror pour plus de précision
+            const coords = ed.view.coordsAtPos(this.slashRange.from);
+            return new DOMRect(coords.left, coords.top, 0, coords.bottom - coords.top);
+        }
+        catch (error) {
+            console.warn("Erreur lors du calcul des coordonnées:", error);
+            // Fallback sur window.getSelection
+            const selection = window.getSelection();
+            if (!selection || selection.rangeCount === 0) {
+                return new DOMRect(0, 0, 0, 0);
+            }
+            const range = selection.getRangeAt(0);
+            return range.getBoundingClientRect();
+        }
+    }
+    scrollToSelected() {
+        // Faire défiler vers l'élément sélectionné
+        if (this.menuRef?.nativeElement) {
+            const selectedItem = this.menuRef.nativeElement.querySelector(".slash-command-item.selected");
+            if (selectedItem) {
+                selectedItem.scrollIntoView({ block: "nearest", behavior: "smooth" });
+            }
+        }
+    }
+    showTippy() {
+        if (this.tippyInstance && this.filteredCommands().length > 0) {
+            this.tippyInstance.show();
+        }
+    }
+    hideTippy() {
+        if (this.tippyInstance) {
+            this.tippyInstance.hide();
+        }
+    }
+    executeCommand(command) {
+        const ed = this.editor();
+        if (!ed || !this.slashRange)
+            return;
+        // Supprimer le texte slash
+        const { tr } = ed.state;
+        tr.delete(this.slashRange.from, this.slashRange.to);
+        ed.view.dispatch(tr);
+        // Cacher le menu
+        this.hideTippy();
+        // Exécuter la commande
+        setTimeout(() => {
+            command.command(ed);
+        }, 10);
+    }
+    addKeyboardPlugin(ed) {
+        // Ajouter un plugin ProseMirror pour intercepter les événements clavier
+        const keyboardPlugin = new Plugin$1({
+            key: new PluginKey$1("slash-commands-keyboard"),
+            props: {
+                handleKeyDown: (view, event) => {
+                    // Ne gérer que si le menu est actif
+                    if (!this.isActive || this.filteredCommands().length === 0) {
+                        return false;
+                    }
+                    switch (event.key) {
+                        case "ArrowDown":
+                            event.preventDefault();
+                            const nextIndex = (this.selectedIndex() + 1) % this.filteredCommands().length;
+                            this.selectedIndex.set(nextIndex);
+                            this.scrollToSelected();
+                            return true;
+                        case "ArrowUp":
+                            event.preventDefault();
+                            const prevIndex = this.selectedIndex() === 0
+                                ? this.filteredCommands().length - 1
+                                : this.selectedIndex() - 1;
+                            this.selectedIndex.set(prevIndex);
+                            this.scrollToSelected();
+                            return true;
+                        case "Enter":
+                            event.preventDefault();
+                            const selectedCommand = this.filteredCommands()[this.selectedIndex()];
+                            if (selectedCommand) {
+                                this.executeCommand(selectedCommand);
+                            }
+                            return true;
+                        case "Escape":
+                            event.preventDefault();
+                            this.isActive = false;
+                            this.hideTippy();
+                            // Supprimer le "/" tapé
+                            if (this.slashRange) {
+                                const { tr } = view.state;
+                                tr.delete(this.slashRange.from, this.slashRange.to);
+                                view.dispatch(tr);
+                            }
+                            return true;
+                    }
+                    return false;
+                },
+            },
+        });
+        // Ajouter le plugin à l'éditeur
+        ed.view.updateState(ed.view.state.reconfigure({
+            plugins: [keyboardPlugin, ...ed.view.state.plugins],
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapSlashCommandsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: TiptapSlashCommandsComponent, isStandalone: true, selector: "tiptap-slash-commands", inputs: { editor: { classPropertyName: "editor", publicName: "editor", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { imageUploadRequested: "imageUploadRequested" }, viewQueries: [{ propertyName: "menuRef", first: true, predicate: ["menuRef"], descendants: true }], ngImport: i0, template: `
+    <div #menuRef class="slash-commands-menu">
+      @for (command of filteredCommands(); track command.title) {
+      <div
+        class="slash-command-item"
+        [class.selected]="$index === selectedIndex()"
+        (click)="executeCommand(command)"
+        (mouseenter)="selectedIndex.set($index)"
+      >
+        <div class="slash-command-icon">
+          <span class="material-symbols-outlined">{{ command.icon }}</span>
+        </div>
+        <div class="slash-command-content">
+          <div class="slash-command-title">{{ command.title }}</div>
+          <div class="slash-command-description">{{ command.description }}</div>
+        </div>
+      </div>
+      }
+    </div>
+  `, isInline: true, styles: [".slash-commands-menu{background:#fff;border:1px solid #e2e8f0;border-radius:8px;box-shadow:0 4px 12px #00000026;padding:8px;max-height:300px;overflow-y:auto;min-width:280px;outline:none}.slash-command-item{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:6px;cursor:pointer;transition:all .2s ease;border:2px solid transparent;outline:none}.slash-command-item:hover{background:#f1f5f9;border-color:#e2e8f0}.slash-command-item.selected{background:#e6f3ff;border-color:#3182ce;box-shadow:0 0 0 1px #3182ce}.slash-command-item:focus{outline:2px solid #3182ce;outline-offset:2px}.slash-command-icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:#f8f9fa;border-radius:6px;color:#3182ce;flex-shrink:0}.slash-command-icon .material-symbols-outlined{font-size:18px}.slash-command-content{flex:1;min-width:0}.slash-command-title{font-weight:600;color:#2d3748;font-size:14px;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.slash-command-description{color:#718096;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapSlashCommandsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "tiptap-slash-commands", standalone: true, template: `
+    <div #menuRef class="slash-commands-menu">
+      @for (command of filteredCommands(); track command.title) {
+      <div
+        class="slash-command-item"
+        [class.selected]="$index === selectedIndex()"
+        (click)="executeCommand(command)"
+        (mouseenter)="selectedIndex.set($index)"
+      >
+        <div class="slash-command-icon">
+          <span class="material-symbols-outlined">{{ command.icon }}</span>
+        </div>
+        <div class="slash-command-content">
+          <div class="slash-command-title">{{ command.title }}</div>
+          <div class="slash-command-description">{{ command.description }}</div>
+        </div>
+      </div>
+      }
+    </div>
+  `, styles: [".slash-commands-menu{background:#fff;border:1px solid #e2e8f0;border-radius:8px;box-shadow:0 4px 12px #00000026;padding:8px;max-height:300px;overflow-y:auto;min-width:280px;outline:none}.slash-command-item{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:6px;cursor:pointer;transition:all .2s ease;border:2px solid transparent;outline:none}.slash-command-item:hover{background:#f1f5f9;border-color:#e2e8f0}.slash-command-item.selected{background:#e6f3ff;border-color:#3182ce;box-shadow:0 0 0 1px #3182ce}.slash-command-item:focus{outline:2px solid #3182ce;outline-offset:2px}.slash-command-icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:#f8f9fa;border-radius:6px;color:#3182ce;flex-shrink:0}.slash-command-icon .material-symbols-outlined{font-size:18px}.slash-command-content{flex:1;min-width:0}.slash-command-title{font-weight:600;color:#2d3748;font-size:14px;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.slash-command-description{color:#718096;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { menuRef: [{
+                type: ViewChild,
+                args: ["menuRef", { static: false }]
+            }] } });
+
+// Configuration par défaut de la toolbar
+const DEFAULT_TOOLBAR_CONFIG = {
+    bold: true,
+    italic: true,
+    underline: true,
+    strike: true,
+    code: true,
+    superscript: false,
+    subscript: false,
+    highlight: true,
+    heading1: true,
+    heading2: true,
+    heading3: true,
+    bulletList: true,
+    orderedList: true,
+    blockquote: true,
+    alignLeft: false,
+    alignCenter: false,
+    alignRight: false,
+    alignJustify: false,
+    link: true,
+    image: true,
+    horizontalRule: true,
+    undo: true,
+    redo: true,
+    separator: true,
+};
+// Configuration par défaut du bubble menu
+const DEFAULT_BUBBLE_MENU_CONFIG = {
+    bold: true,
+    italic: true,
+    underline: true,
+    strike: true,
+    code: true,
+    superscript: false,
+    subscript: false,
+    highlight: true,
+    link: true,
+    separator: true,
+};
+// Configuration par défaut du bubble menu image
+const DEFAULT_IMAGE_BUBBLE_MENU_CONFIG = {
+    changeImage: true,
+    resizeSmall: true,
+    resizeMedium: true,
+    resizeLarge: true,
+    resizeOriginal: true,
+    deleteImage: true,
+    separator: true,
+};
+class AngularTiptapEditorComponent {
+    constructor(imageService) {
+        this.imageService = imageService;
+        // Nouveaux inputs avec signal
+        this.content = input("");
+        this.placeholder = input("");
+        this.editable = input(true);
+        this.minHeight = input(200);
+        this.height = input(undefined);
+        this.maxHeight = input(undefined);
+        this.showToolbar = input(true);
+        this.showCharacterCount = input(true);
+        this.maxCharacters = input(undefined);
+        this.enableOfficePaste = input(true);
+        this.enableSlashCommands = input(true);
+        this.slashCommandsConfig = input(undefined);
+        this.locale = input(undefined);
+        // Nouveaux inputs pour les bubble menus
+        this.showBubbleMenu = input(true);
+        this.bubbleMenu = input(DEFAULT_BUBBLE_MENU_CONFIG);
+        this.showImageBubbleMenu = input(true);
+        this.imageBubbleMenu = input(DEFAULT_IMAGE_BUBBLE_MENU_CONFIG);
+        // Nouveau input pour la configuration de la toolbar
+        this.toolbar = input({});
+        // Nouveau input pour la configuration de l'upload d'images
+        this.imageUpload = input({});
+        // Nouveaux outputs
+        this.contentChange = output();
+        this.editorCreated = output();
+        this.editorUpdate = output();
+        this.editorFocus = output();
+        this.editorBlur = output();
+        // ViewChild avec signal
+        this.editorElement = viewChild.required("editorElement");
+        // Signals pour l'état interne
+        this.editor = signal(null);
+        this.characterCountData = signal(null);
+        this.isDragOver = signal(false);
+        this.editorFullyInitialized = signal(false);
+        // Computed pour les états de l'éditeur
+        this.isEditorReady = computed(() => this.editor() !== null);
+        // Computed pour la configuration de la toolbar
+        this.toolbarConfig = computed(() => {
+            const userConfig = this.toolbar();
+            // Si aucune configuration n'est fournie, utiliser la configuration par défaut
+            if (Object.keys(userConfig).length === 0) {
+                return DEFAULT_TOOLBAR_CONFIG;
+            }
+            // Sinon, utiliser uniquement la configuration fournie par l'utilisateur
+            return userConfig;
+        });
+        // Computed pour la configuration du bubble menu
+        this.bubbleMenuConfig = computed(() => {
+            const userConfig = this.bubbleMenu();
+            // Si aucune configuration n'est fournie, utiliser la configuration par défaut
+            if (Object.keys(userConfig).length === 0) {
+                return DEFAULT_BUBBLE_MENU_CONFIG;
+            }
+            // Sinon, fusionner avec la configuration par défaut
+            return {
+                ...DEFAULT_BUBBLE_MENU_CONFIG,
+                ...userConfig,
+            };
+        });
+        // Computed pour la configuration du bubble menu image
+        this.imageBubbleMenuConfig = computed(() => {
+            const userConfig = this.imageBubbleMenu();
+            // Si aucune configuration n'est fournie, utiliser la configuration par défaut
+            if (Object.keys(userConfig).length === 0) {
+                return DEFAULT_IMAGE_BUBBLE_MENU_CONFIG;
+            }
+            // Sinon, fusionner avec la configuration par défaut
+            return {
+                ...DEFAULT_IMAGE_BUBBLE_MENU_CONFIG,
+                ...userConfig,
+            };
+        });
+        // Computed pour la configuration de l'upload d'images
+        this.imageUploadConfig = computed(() => {
+            const userConfig = this.imageUpload();
+            return {
+                maxSize: 5,
+                maxWidth: 1920,
+                maxHeight: 1080,
+                allowedTypes: ["image/jpeg", "image/png", "image/gif", "image/webp"],
+                enableDragDrop: true,
+                showPreview: true,
+                multiple: false,
+                compressImages: true,
+                quality: 0.8,
+                ...userConfig,
+            };
+        });
+        // Computed pour la configuration des slash commands
+        this.slashCommandsConfigComputed = computed(() => {
+            const userConfig = this.slashCommandsConfig();
+            if (userConfig) {
+                return userConfig;
+            }
+            // Configuration par défaut si aucune n'est fournie
+            return { commands: undefined }; // Le composant utilisera DEFAULT_SLASH_COMMANDS
+        });
+        // ControlValueAccessor implementation
+        this.onChange = (value) => { };
+        this.onTouched = () => { };
+        this.i18nService = inject(TiptapI18nService);
+        // Effet pour gérer le changement de langue
+        effect(() => {
+            const locale = this.locale();
+            if (locale) {
+                this.i18nService.setLocale(locale);
+            }
+        });
+        // Effet pour mettre à jour le contenu de l'éditeur
+        effect(() => {
+            const editor = this.editor();
+            const content = this.content();
+            if (editor && content !== editor.getHTML()) {
+                editor.commands.setContent(content, false);
+            }
+        });
+        // Effet pour mettre à jour les propriétés de hauteur
+        effect(() => {
+            const minHeight = this.minHeight();
+            const height = this.height();
+            const maxHeight = this.maxHeight();
+            const element = this.editorElement()?.nativeElement;
+            // Calculer automatiquement si le scroll est nécessaire
+            const needsScroll = height !== undefined || maxHeight !== undefined;
+            if (element) {
+                element.style.setProperty("--editor-min-height", `${minHeight}px`);
+                element.style.setProperty("--editor-height", height ? `${height}px` : "auto");
+                element.style.setProperty("--editor-max-height", maxHeight ? `${maxHeight}px` : "none");
+                element.style.setProperty("--editor-overflow", needsScroll ? "auto" : "visible");
+            }
+        });
+        // Effect pour surveiller les changements d'édition
+        effect(() => {
+            const currentEditor = this.editor();
+            const isEditable = this.editable();
+            if (currentEditor) {
+                currentEditor.setEditable(isEditable);
+            }
+        });
+    }
+    ngOnInit() {
+        // L'initialisation se fait maintenant dans ngAfterViewInit
+    }
+    ngAfterViewInit() {
+        // Attendre que la vue soit complètement initialisée avant de créer l'éditeur
+        setTimeout(() => {
+            this.initEditor();
+        }, 0);
+    }
+    ngOnDestroy() {
+        const currentEditor = this.editor();
+        if (currentEditor) {
+            currentEditor.destroy();
+        }
+        this.editorFullyInitialized.set(false);
+    }
+    initEditor() {
+        const extensions = [
+            StarterKit,
+            Placeholder.configure({
+                placeholder: this.placeholder() || this.i18nService.editor().placeholder,
+            }),
+            Underline,
+            Superscript,
+            Subscript,
+            TextAlign.configure({
+                types: ["heading", "paragraph"],
+            }),
+            Link.configure({
+                openOnClick: false,
+                HTMLAttributes: {
+                    class: "tiptap-link",
+                },
+            }),
+            Highlight.configure({
+                multicolor: true,
+                HTMLAttributes: {
+                    class: "tiptap-highlight",
+                },
+            }),
+            ResizableImage.configure({
+                inline: false,
+                allowBase64: true,
+                HTMLAttributes: {
+                    class: "tiptap-image",
+                },
+            }),
+            UploadProgress.configure({
+                isUploading: () => this.imageService.isUploading(),
+                uploadProgress: () => this.imageService.uploadProgress(),
+                uploadMessage: () => this.imageService.uploadMessage(),
+            }),
+        ];
+        // Ajouter l'extension Office Paste si activée
+        if (this.enableOfficePaste()) {
+            extensions.push(OfficePaste.configure({
+                // Configuration par défaut pour une meilleure compatibilité
+                transformPastedHTML: true,
+                transformPastedText: true,
+            }));
+        }
+        if (this.showCharacterCount()) {
+            extensions.push(CharacterCount.configure({
+                limit: this.maxCharacters(),
+            }));
+        }
+        const newEditor = new Editor({
+            element: this.editorElement().nativeElement,
+            extensions,
+            content: this.content(),
+            editable: this.editable(),
+            onUpdate: ({ editor, transaction }) => {
+                const html = editor.getHTML();
+                this.contentChange.emit(html);
+                // Defer the onChange call to prevent ExpressionChangedAfterItHasBeenCheckedError
+                Promise.resolve().then(() => {
+                    this.onChange(html);
+                });
+                this.editorUpdate.emit({ editor, transaction });
+                this.updateCharacterCount(editor);
+            },
+            onSelectionUpdate: ({ editor, transaction }) => {
+                // Note: La mise à jour des états des boutons est maintenant gérée par TiptapBubbleMenuComponent
+            },
+            onCreate: ({ editor }) => {
+                this.editor.set(editor);
+                this.editorCreated.emit(editor);
+                this.updateCharacterCount(editor);
+                // 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);
+                }, 100);
+            },
+            onFocus: ({ editor, event }) => {
+                this.editorFocus.emit({ editor, event });
+            },
+            onBlur: ({ editor, event }) => {
+                this.onTouched();
+                this.editorBlur.emit({ editor, event });
+            },
+        });
+    }
+    updateCharacterCount(editor) {
+        if (this.showCharacterCount() && editor.storage["characterCount"]) {
+            const storage = editor.storage["characterCount"];
+            this.characterCountData.set({
+                characters: storage.characters(),
+                words: 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();
+        if (currentEditor) {
+            try {
+                await this.imageService.uploadAndInsertImage(currentEditor, file);
+            }
+            catch (error) {
+                // Gérer l'erreur silencieusement ou afficher une notification
+            }
+        }
+    }
+    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) {
+            const file = files[0];
+            if (file.type.startsWith("image/")) {
+                this.insertImageFromFile(file);
+            }
+        }
+    }
+    async insertImageFromFile(file) {
+        const currentEditor = this.editor();
+        if (currentEditor) {
+            try {
+                await this.imageService.uploadAndInsertImage(currentEditor, file);
+            }
+            catch (error) {
+                // Gérer l'erreur silencieusement ou afficher une notification
+            }
+        }
+    }
+    // Public methods
+    getHTML() {
+        return this.editor()?.getHTML() || "";
+    }
+    getJSON() {
+        return this.editor()?.getJSON();
+    }
+    getText() {
+        return this.editor()?.getText() || "";
+    }
+    setContent(content, emitUpdate = true) {
+        this.editor()?.commands.setContent(content, emitUpdate);
+    }
+    focus() {
+        this.editor()?.commands.focus();
+    }
+    blur() {
+        this.editor()?.commands.blur();
+    }
+    clearContent() {
+        this.editor()?.commands.clearContent();
+    }
+    // ControlValueAccessor methods
+    writeValue(value) {
+        const currentEditor = this.editor();
+        if (currentEditor && value !== currentEditor.getHTML()) {
+            currentEditor.commands.setContent(value || "", false);
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        const currentEditor = this.editor();
+        if (currentEditor) {
+            currentEditor.setEditable(!isDisabled);
+        }
+    }
+    onEditorClick(event) {
+        const editor = this.editor();
+        if (!editor)
+            return;
+        // Vérifier si on clique sur l'élément conteneur et non sur le contenu
+        const target = event.target;
+        const editorElement = this.editorElement()?.nativeElement;
+        if (target === editorElement ||
+            target.classList.contains("tiptap-content")) {
+            // On clique dans l'espace vide, positionner le curseur à la fin
+            setTimeout(() => {
+                const { doc } = editor.state;
+                const endPos = doc.content.size;
+                editor.commands.setTextSelection(endPos);
+                editor.commands.focus();
+            }, 0);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: AngularTiptapEditorComponent, deps: [{ token: ImageService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: AngularTiptapEditorComponent, isStandalone: true, selector: "angular-tiptap-editor", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, showToolbar: { classPropertyName: "showToolbar", publicName: "showToolbar", isSignal: true, isRequired: false, transformFunction: null }, showCharacterCount: { classPropertyName: "showCharacterCount", publicName: "showCharacterCount", isSignal: true, isRequired: false, transformFunction: null }, maxCharacters: { classPropertyName: "maxCharacters", publicName: "maxCharacters", isSignal: true, isRequired: false, transformFunction: null }, enableOfficePaste: { classPropertyName: "enableOfficePaste", publicName: "enableOfficePaste", isSignal: true, isRequired: false, transformFunction: null }, enableSlashCommands: { classPropertyName: "enableSlashCommands", publicName: "enableSlashCommands", isSignal: true, isRequired: false, transformFunction: null }, slashCommandsConfig: { classPropertyName: "slashCommandsConfig", publicName: "slashCommandsConfig", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, showBubbleMenu: { classPropertyName: "showBubbleMenu", publicName: "showBubbleMenu", isSignal: true, isRequired: false, transformFunction: null }, bubbleMenu: { classPropertyName: "bubbleMenu", publicName: "bubbleMenu", isSignal: true, isRequired: false, transformFunction: null }, showImageBubbleMenu: { classPropertyName: "showImageBubbleMenu", publicName: "showImageBubbleMenu", isSignal: true, isRequired: false, transformFunction: null }, imageBubbleMenu: { classPropertyName: "imageBubbleMenu", publicName: "imageBubbleMenu", isSignal: true, isRequired: false, transformFunction: null }, toolbar: { classPropertyName: "toolbar", publicName: "toolbar", isSignal: true, isRequired: false, transformFunction: null }, imageUpload: { classPropertyName: "imageUpload", publicName: "imageUpload", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { contentChange: "contentChange", editorCreated: "editorCreated", editorUpdate: "editorUpdate", editorFocus: "editorFocus", editorBlur: "editorBlur" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => AngularTiptapEditorComponent),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "editorElement", first: true, predicate: ["editorElement"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div class="tiptap-editor">
+      <!-- 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>
+      }
+
+      <!-- Contenu de l'éditeur -->
+      <div
+        #editorElement
+        class="tiptap-content"
+        [class.drag-over]="isDragOver()"
+        (dragover)="onDragOver($event)"
+        (drop)="onDrop($event)"
+        (click)="onEditorClick($event)"
+      ></div>
+
+      <!-- Bubble Menu pour le texte -->
+      @if (showBubbleMenu() && editor()) {
+      <tiptap-bubble-menu
+        [editor]="editor()!"
+        [config]="bubbleMenuConfig()"
+        [style.display]="editorFullyInitialized() ? 'block' : 'none'"
+      ></tiptap-bubble-menu>
+      }
+
+      <!-- Bubble Menu pour les images -->
+      @if (showImageBubbleMenu() && editor()) {
+      <tiptap-image-bubble-menu
+        [editor]="editor()!"
+        [config]="imageBubbleMenuConfig()"
+        [style.display]="editorFullyInitialized() ? 'block' : 'none'"
+      ></tiptap-image-bubble-menu>
+      }
+
+      <!-- Slash Commands -->
+      @if (enableSlashCommands() && editor()) {
+      <tiptap-slash-commands
+        [editor]="editor()!"
+        [config]="slashCommandsConfigComputed()"
+        [style.display]="editorFullyInitialized() ? 'block' : 'none'"
+        (imageUploadRequested)="onSlashCommandImageUpload($event)"
+      ></tiptap-slash-commands>
+      }
+
+      <!-- Compteur de caractères -->
+      @if (showCharacterCount() && characterCountData()) {
+      <div class="character-count">
+        {{ characterCountData()?.characters }}
+        {{ i18nService.editor().characters }},
+        {{ characterCountData()?.words }} {{ i18nService.editor().words }} @if
+        (maxCharacters()) { /
+        {{ maxCharacters() }}
+        }
+      </div>
+      }
+    </div>
+  `, isInline: true, styles: [".tiptap-editor{border:2px solid #e2e8f0;border-radius:8px;background:#fff;box-shadow:0 2px 4px #0000001a;overflow:hidden;transition:border-color .2s ease}.tiptap-editor:focus-within{border-color:#3182ce;box-shadow:0 0 0 3px #3182ce1a}.tiptap-content{padding:16px;min-height:var(--editor-min-height, 200px);height:var(--editor-height, auto);max-height:var(--editor-max-height, none);overflow-y:var(--editor-overflow, visible);outline:none;position:relative}.tiptap-content.drag-over{background:#f0f8ff;border:2px dashed #3182ce}.character-count{padding:8px 16px;font-size:12px;color:#718096;text-align:right;border-top:1px solid #e2e8f0;background:#f8f9fa}.image-upload-container{position:relative;display:inline-block}:host ::ng-deep .ProseMirror{outline:none;line-height:1.6;color:#2d3748;min-height:100%;height:100%;word-wrap:break-word;overflow-wrap:break-word}:host ::ng-deep .ProseMirror h1{font-size:2em;font-weight:700;margin-top:0;margin-bottom:.5em}:host ::ng-deep .ProseMirror h2{font-size:1.5em;font-weight:700;margin-top:1em;margin-bottom:.5em}:host ::ng-deep .ProseMirror h3{font-size:1.25em;font-weight:700;margin-top:1em;margin-bottom:.5em}:host ::ng-deep .ProseMirror p{margin:.5em 0}:host ::ng-deep .ProseMirror ul,:host ::ng-deep .ProseMirror ol{padding-left:2em;margin:.5em 0}:host ::ng-deep .ProseMirror blockquote{border-left:4px solid #e2e8f0;margin:1em 0;font-style:italic;background:#f8f9fa;padding:.5em 1em;border-radius:0 4px 4px 0}:host ::ng-deep .ProseMirror code{background:#f1f5f9;padding:.2em .4em;border-radius:3px;font-family:Monaco,Consolas,monospace;font-size:.9em}:host ::ng-deep .ProseMirror pre{background:#1a202c;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;margin:1em 0}:host ::ng-deep .ProseMirror pre code{background:none;color:inherit;padding:0}:host ::ng-deep .ProseMirror .placeholder{color:#a0aec0;pointer-events:none;height:0}:host ::ng-deep .ProseMirror .placeholder:before{content:attr(data-placeholder);float:left;height:0;pointer-events:none}: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.selected{border-color:#3182ce;box-shadow:0 0 0 3px #3182ce1a;transition:all .2s ease}:host ::ng-deep .ProseMirror .tiptap-image{max-width:100%;height:auto;border-radius:16px;box-shadow:0 4px 20px #00000014;margin:.5em 0;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);display:block;filter:brightness(1) contrast(1)}:host ::ng-deep .ProseMirror .tiptap-image:hover{box-shadow:0 8px 30px #0000001f;filter:brightness(1.02) contrast(1.02)}:host ::ng-deep .ProseMirror .tiptap-image.ProseMirror-selectednode{outline:2px solid #6366f1;outline-offset:2px;border-radius:16px;box-shadow:0 0 0 4px #6366f11a}:host ::ng-deep .image-container{margin:.5em 0;text-align:center;border-radius:16px;overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1)}:host ::ng-deep .image-container.image-align-left{text-align:left}:host ::ng-deep .image-container.image-align-center{text-align:center}:host ::ng-deep .image-container.image-align-right{text-align:right}:host ::ng-deep .image-container img{display:inline-block;max-width:100%;height:auto;border-radius:16px}:host ::ng-deep .resizable-image-container{position:relative;display:inline-block;margin:.5em 0}:host ::ng-deep .resize-controls{position:absolute;inset:0;pointer-events:none;z-index:1000}:host ::ng-deep .resize-handle{position:absolute;width:12px;height:12px;background:#3b82f6;border:2px solid white;border-radius:50%;pointer-events:all;cursor:pointer;z-index:1001;transition:all .15s ease;box-shadow:0 2px 6px #0003}:host ::ng-deep .resize-handle:hover{background:#2563eb;box-shadow:0 3px 8px #0000004d}:host ::ng-deep .resize-handle:active{background:#1d4ed8}:host ::ng-deep .resize-handle-n:hover,:host ::ng-deep .resize-handle-s:hover{transform:translate(-50%) scale(1.2)}:host ::ng-deep .resize-handle-w:hover,:host ::ng-deep .resize-handle-e:hover{transform:translateY(-50%) scale(1.2)}:host ::ng-deep .resize-handle-n:active,:host ::ng-deep .resize-handle-s:active{transform:translate(-50%) scale(.9)}:host ::ng-deep .resize-handle-w:active,:host ::ng-deep .resize-handle-e:active{transform:translateY(-50%) scale(.9)}:host ::ng-deep .resize-handle-nw:hover,:host ::ng-deep .resize-handle-ne:hover,:host ::ng-deep .resize-handle-sw:hover,:host ::ng-deep .resize-handle-se:hover{transform:scale(1.2)}:host ::ng-deep .resize-handle-nw:active,:host ::ng-deep .resize-handle-ne:active,:host ::ng-deep .resize-handle-sw:active,:host ::ng-deep .resize-handle-se:active{transform:scale(.9)}:host ::ng-deep .resize-handle-nw{top:0;left:-6px;cursor:nw-resize}:host ::ng-deep .resize-handle-n{top:0;left:50%;transform:translate(-50%);cursor:n-resize}:host ::ng-deep .resize-handle-ne{top:0;right:-6px;cursor:ne-resize}:host ::ng-deep .resize-handle-w{top:50%;left:-6px;transform:translateY(-50%);cursor:w-resize}:host ::ng-deep .resize-handle-e{top:50%;right:-6px;transform:translateY(-50%);cursor:e-resize}:host ::ng-deep .resize-handle-sw{bottom:0;left:-6px;cursor:sw-resize}:host ::ng-deep .resize-handle-s{bottom:0;left:50%;transform:translate(-50%);cursor:s-resize}:host ::ng-deep .resize-handle-se{bottom:0;right:-6px;cursor:se-resize}:host ::ng-deep body.resizing{-webkit-user-select:none;user-select:none;cursor:crosshair}:host ::ng-deep body.resizing .ProseMirror{pointer-events:none}:host ::ng-deep body.resizing .ProseMirror .tiptap-image{pointer-events:none}:host ::ng-deep .image-size-info{position:absolute;bottom:-20px;left:50%;transform:translate(-50%);background:#000c;color:#fff;padding:2px 6px;border-radius:3px;font-size:11px;white-space:nowrap;opacity:0;transition:opacity .2s ease}:host ::ng-deep .image-container:hover .image-size-info{opacity:1}\n"], dependencies: [{ kind: "component", type: TiptapToolbarComponent, selector: "tiptap-toolbar", inputs: ["editor", "config"], outputs: ["imageUploaded", "imageError"] }, { kind: "component", type: TiptapImageUploadComponent, selector: "tiptap-image-upload", inputs: ["config"], outputs: ["imageSelected", "error"] }, { kind: "component", type: TiptapBubbleMenuComponent, selector: "tiptap-bubble-menu", inputs: ["editor", "config"] }, { kind: "component", type: TiptapImageBubbleMenuComponent, selector: "tiptap-image-bubble-menu", inputs: ["editor", "config"] }, { kind: "component", type: TiptapSlashCommandsComponent, selector: "tiptap-slash-commands", inputs: ["editor", "config"], outputs: ["imageUploadRequested"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: AngularTiptapEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "angular-tiptap-editor", standalone: true, imports: [
+                        TiptapToolbarComponent,
+                        TiptapImageUploadComponent,
+                        TiptapBubbleMenuComponent,
+                        TiptapImageBubbleMenuComponent,
+                        TiptapSlashCommandsComponent,
+                    ], template: `
+    <div class="tiptap-editor">
+      <!-- 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>
+      }
+
+      <!-- Contenu de l'éditeur -->
+      <div
+        #editorElement
+        class="tiptap-content"
+        [class.drag-over]="isDragOver()"
+        (dragover)="onDragOver($event)"
+        (drop)="onDrop($event)"
+        (click)="onEditorClick($event)"
+      ></div>
+
+      <!-- Bubble Menu pour le texte -->
+      @if (showBubbleMenu() && editor()) {
+      <tiptap-bubble-menu
+        [editor]="editor()!"
+        [config]="bubbleMenuConfig()"
+        [style.display]="editorFullyInitialized() ? 'block' : 'none'"
+      ></tiptap-bubble-menu>
+      }
+
+      <!-- Bubble Menu pour les images -->
+      @if (showImageBubbleMenu() && editor()) {
+      <tiptap-image-bubble-menu
+        [editor]="editor()!"
+        [config]="imageBubbleMenuConfig()"
+        [style.display]="editorFullyInitialized() ? 'block' : 'none'"
+      ></tiptap-image-bubble-menu>
+      }
+
+      <!-- Slash Commands -->
+      @if (enableSlashCommands() && editor()) {
+      <tiptap-slash-commands
+        [editor]="editor()!"
+        [config]="slashCommandsConfigComputed()"
+        [style.display]="editorFullyInitialized() ? 'block' : 'none'"
+        (imageUploadRequested)="onSlashCommandImageUpload($event)"
+      ></tiptap-slash-commands>
+      }
+
+      <!-- Compteur de caractères -->
+      @if (showCharacterCount() && characterCountData()) {
+      <div class="character-count">
+        {{ characterCountData()?.characters }}
+        {{ i18nService.editor().characters }},
+        {{ characterCountData()?.words }} {{ i18nService.editor().words }} @if
+        (maxCharacters()) { /
+        {{ maxCharacters() }}
+        }
+      </div>
+      }
+    </div>
+  `, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => AngularTiptapEditorComponent),
+                            multi: true,
+                        },
+                    ], styles: [".tiptap-editor{border:2px solid #e2e8f0;border-radius:8px;background:#fff;box-shadow:0 2px 4px #0000001a;overflow:hidden;transition:border-color .2s ease}.tiptap-editor:focus-within{border-color:#3182ce;box-shadow:0 0 0 3px #3182ce1a}.tiptap-content{padding:16px;min-height:var(--editor-min-height, 200px);height:var(--editor-height, auto);max-height:var(--editor-max-height, none);overflow-y:var(--editor-overflow, visible);outline:none;position:relative}.tiptap-content.drag-over{background:#f0f8ff;border:2px dashed #3182ce}.character-count{padding:8px 16px;font-size:12px;color:#718096;text-align:right;border-top:1px solid #e2e8f0;background:#f8f9fa}.image-upload-container{position:relative;display:inline-block}:host ::ng-deep .ProseMirror{outline:none;line-height:1.6;color:#2d3748;min-height:100%;height:100%;word-wrap:break-word;overflow-wrap:break-word}:host ::ng-deep .ProseMirror h1{font-size:2em;font-weight:700;margin-top:0;margin-bottom:.5em}:host ::ng-deep .ProseMirror h2{font-size:1.5em;font-weight:700;margin-top:1em;margin-bottom:.5em}:host ::ng-deep .ProseMirror h3{font-size:1.25em;font-weight:700;margin-top:1em;margin-bottom:.5em}:host ::ng-deep .ProseMirror p{margin:.5em 0}:host ::ng-deep .ProseMirror ul,:host ::ng-deep .ProseMirror ol{padding-left:2em;margin:.5em 0}:host ::ng-deep .ProseMirror blockquote{border-left:4px solid #e2e8f0;margin:1em 0;font-style:italic;background:#f8f9fa;padding:.5em 1em;border-radius:0 4px 4px 0}:host ::ng-deep .ProseMirror code{background:#f1f5f9;padding:.2em .4em;border-radius:3px;font-family:Monaco,Consolas,monospace;font-size:.9em}:host ::ng-deep .ProseMirror pre{background:#1a202c;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;margin:1em 0}:host ::ng-deep .ProseMirror pre code{background:none;color:inherit;padding:0}:host ::ng-deep .ProseMirror .placeholder{color:#a0aec0;pointer-events:none;height:0}:host ::ng-deep .ProseMirror .placeholder:before{content:attr(data-placeholder);float:left;height:0;pointer-events:none}: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.selected{border-color:#3182ce;box-shadow:0 0 0 3px #3182ce1a;transition:all .2s ease}:host ::ng-deep .ProseMirror .tiptap-image{max-width:100%;height:auto;border-radius:16px;box-shadow:0 4px 20px #00000014;margin:.5em 0;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);display:block;filter:brightness(1) contrast(1)}:host ::ng-deep .ProseMirror .tiptap-image:hover{box-shadow:0 8px 30px #0000001f;filter:brightness(1.02) contrast(1.02)}:host ::ng-deep .ProseMirror .tiptap-image.ProseMirror-selectednode{outline:2px solid #6366f1;outline-offset:2px;border-radius:16px;box-shadow:0 0 0 4px #6366f11a}:host ::ng-deep .image-container{margin:.5em 0;text-align:center;border-radius:16px;overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1)}:host ::ng-deep .image-container.image-align-left{text-align:left}:host ::ng-deep .image-container.image-align-center{text-align:center}:host ::ng-deep .image-container.image-align-right{text-align:right}:host ::ng-deep .image-container img{display:inline-block;max-width:100%;height:auto;border-radius:16px}:host ::ng-deep .resizable-image-container{position:relative;display:inline-block;margin:.5em 0}:host ::ng-deep .resize-controls{position:absolute;inset:0;pointer-events:none;z-index:1000}:host ::ng-deep .resize-handle{position:absolute;width:12px;height:12px;background:#3b82f6;border:2px solid white;border-radius:50%;pointer-events:all;cursor:pointer;z-index:1001;transition:all .15s ease;box-shadow:0 2px 6px #0003}:host ::ng-deep .resize-handle:hover{background:#2563eb;box-shadow:0 3px 8px #0000004d}:host ::ng-deep .resize-handle:active{background:#1d4ed8}:host ::ng-deep .resize-handle-n:hover,:host ::ng-deep .resize-handle-s:hover{transform:translate(-50%) scale(1.2)}:host ::ng-deep .resize-handle-w:hover,:host ::ng-deep .resize-handle-e:hover{transform:translateY(-50%) scale(1.2)}:host ::ng-deep .resize-handle-n:active,:host ::ng-deep .resize-handle-s:active{transform:translate(-50%) scale(.9)}:host ::ng-deep .resize-handle-w:active,:host ::ng-deep .resize-handle-e:active{transform:translateY(-50%) scale(.9)}:host ::ng-deep .resize-handle-nw:hover,:host ::ng-deep .resize-handle-ne:hover,:host ::ng-deep .resize-handle-sw:hover,:host ::ng-deep .resize-handle-se:hover{transform:scale(1.2)}:host ::ng-deep .resize-handle-nw:active,:host ::ng-deep .resize-handle-ne:active,:host ::ng-deep .resize-handle-sw:active,:host ::ng-deep .resize-handle-se:active{transform:scale(.9)}:host ::ng-deep .resize-handle-nw{top:0;left:-6px;cursor:nw-resize}:host ::ng-deep .resize-handle-n{top:0;left:50%;transform:translate(-50%);cursor:n-resize}:host ::ng-deep .resize-handle-ne{top:0;right:-6px;cursor:ne-resize}:host ::ng-deep .resize-handle-w{top:50%;left:-6px;transform:translateY(-50%);cursor:w-resize}:host ::ng-deep .resize-handle-e{top:50%;right:-6px;transform:translateY(-50%);cursor:e-resize}:host ::ng-deep .resize-handle-sw{bottom:0;left:-6px;cursor:sw-resize}:host ::ng-deep .resize-handle-s{bottom:0;left:50%;transform:translate(-50%);cursor:s-resize}:host ::ng-deep .resize-handle-se{bottom:0;right:-6px;cursor:se-resize}:host ::ng-deep body.resizing{-webkit-user-select:none;user-select:none;cursor:crosshair}:host ::ng-deep body.resizing .ProseMirror{pointer-events:none}:host ::ng-deep body.resizing .ProseMirror .tiptap-image{pointer-events:none}:host ::ng-deep .image-size-info{position:absolute;bottom:-20px;left:50%;transform:translate(-50%);background:#000c;color:#fff;padding:2px 6px;border-radius:3px;font-size:11px;white-space:nowrap;opacity:0;transition:opacity .2s ease}:host ::ng-deep .image-container:hover .image-size-info{opacity:1}\n"] }]
+        }], ctorParameters: () => [{ type: ImageService }] });
+
+/**
+ * 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(),
+        },
+    ];
+}
+/**
+ * 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",
+};
+
+/*
+ * Public API Surface of tiptap-editor
+ */
+// Main component - only public component
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AngularTiptapEditorComponent, DEFAULT_BUBBLE_MENU_CONFIG, DEFAULT_IMAGE_BUBBLE_MENU_CONFIG, DEFAULT_SLASH_COMMANDS, DEFAULT_TOOLBAR_CONFIG, TiptapI18nService, createI18nSlashCommands };
+//# sourceMappingURL=flogeez-angular-tiptap-editor.mjs.map