@flogeez/angular-tiptap-editor 2.0.2 → 2.1.0

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

@@ -329,104 +329,104 @@ const UploadProgress = Extension.create({
                             // 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>
+                            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: var(--ate-surface-secondary);
-                    border: 2px dashed var(--ate-border-color);
-                    border-radius: var(--ate-border-radius);
-                    padding: 16px;
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                    min-height: 120px;
-                    animation: pulse 2s infinite;
-                  }
-                  @keyframes pulse {
-                    0%, 100% { background-color: var(--ate-surface-secondary); }
-                    50% { background-color: var(--ate-surface-tertiary); }
-                  }
-                  .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: var(--ate-primary-light);
-                    border-radius: 50%;
-                    color: var(--ate-primary);
-                  }
-                  .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: var(--ate-text);
-                    font-weight: 500;
-                  }
-                  .progress-bar {
-                    width: 100%;
-                    height: 6px;
-                    background: var(--ate-border-color);
-                    border-radius: 3px;
-                    overflow: hidden;
-                  }
-                  .progress-fill {
-                    height: 100%;
-                    background: var(--ate-primary);
-                    border-radius: 3px;
-                    transition: width 0.3s ease;
-                  }
-                  .progress-text {
-                    font-size: 12px;
-                    color: var(--ate-text-secondary);
-                    font-weight: 500;
-                  }
+                                style.textContent = `
+                  .upload-progress-widget {
+                    display: block;
+                    margin: 8px 0;
+                    max-width: 400px;
+                  }
+                  .upload-skeleton {
+                    background: var(--ate-surface-secondary);
+                    border: 2px dashed var(--ate-border-color);
+                    border-radius: var(--ate-border-radius);
+                    padding: 16px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    min-height: 120px;
+                    animation: pulse 2s infinite;
+                  }
+                  @keyframes pulse {
+                    0%, 100% { background-color: var(--ate-surface-secondary); }
+                    50% { background-color: var(--ate-surface-tertiary); }
+                  }
+                  .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: var(--ate-primary-light);
+                    border-radius: 50%;
+                    color: var(--ate-primary);
+                  }
+                  .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: var(--ate-text);
+                    font-weight: 500;
+                  }
+                  .progress-bar {
+                    width: 100%;
+                    height: 6px;
+                    background: var(--ate-border-color);
+                    border-radius: 3px;
+                    overflow: hidden;
+                  }
+                  .progress-fill {
+                    height: 100%;
+                    background: var(--ate-primary);
+                    border-radius: 3px;
+                    transition: width 0.3s ease;
+                  }
+                  .progress-text {
+                    font-size: 12px;
+                    color: var(--ate-text-secondary);
+                    font-weight: 500;
+                  }
                 `;
                                 document.head.appendChild(style);
                             }
@@ -450,21 +450,21 @@ const UploadProgress = Extension.create({
                             // 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>
+                                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
@@ -703,72 +703,72 @@ class TiptapButtonComponent {
         event.preventDefault();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: TiptapButtonComponent, isStandalone: true, selector: "tiptap-button", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, backgroundColor: { classPropertyName: "backgroundColor", publicName: "backgroundColor", 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'"
-      [class.has-custom-color]="!!color()"
-      [class.has-custom-bg]="!!backgroundColor()"
-      [disabled]="disabled()"
-      [style.color]="color()"
-      [style.background-color]="backgroundColor()"
-      [attr.title]="title()"
-      [attr.aria-label]="title()"
-      (mousedown)="onMouseDown($event)"
-      (click)="onClick.emit($event)"
-      type="button"
-    >
-      @if (icon()) {
-        <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>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: TiptapButtonComponent, isStandalone: true, selector: "tiptap-button", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, backgroundColor: { classPropertyName: "backgroundColor", publicName: "backgroundColor", 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'"
+      [class.has-custom-color]="!!color()"
+      [class.has-custom-bg]="!!backgroundColor()"
+      [disabled]="disabled()"
+      [style.color]="color()"
+      [style.background-color]="backgroundColor()"
+      [attr.title]="title()"
+      [attr.aria-label]="title()"
+      (mousedown)="onMouseDown($event)"
+      (click)="onClick.emit($event)"
+      type="button"
+    >
+      @if (icon()) {
+        <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:var(--ate-sub-border-radius, 8px);cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);color:var(--ate-toolbar-button-color, var(--ate-text-secondary));position:relative;overflow:hidden}.tiptap-button:before{content:\"\";position:absolute;inset:0;background:var(--ate-primary);opacity:0;transition:opacity .2s ease;border-radius:var(--ate-sub-border-radius, 8px)}.tiptap-button:hover:not(.has-custom-color){color:var(--ate-toolbar-button-active-color, var(--ate-primary));background:var(--ate-toolbar-button-hover-background, transparent);transform:translateY(-1px)}.tiptap-button.has-custom-color:hover:not(.has-custom-bg){background:var(--ate-toolbar-button-hover-background, transparent);transform:translateY(-1px)}.tiptap-button.has-custom-bg:hover{transform:translateY(-1px);filter:brightness(.9)}.tiptap-button:hover:before{opacity:.1}.tiptap-button:active{transform:translateY(0)}.tiptap-button.is-active:not(.has-custom-color){color:var(--ate-toolbar-button-active-color, var(--ate-primary));background:var(--ate-toolbar-button-active-background, var(--ate-primary-light))}.tiptap-button.is-active.has-custom-color{background:var(--ate-toolbar-button-active-background, var(--ate-primary-light))}.tiptap-button:disabled{opacity:.4;cursor:not-allowed;pointer-events:none}.tiptap-button .material-symbols-outlined{font-size:20px;position:relative;z-index:1}.tiptap-button .material-symbols-outlined.icon-small{font-size:16px}.tiptap-button .material-symbols-outlined.icon-medium{font-size:20px}.tiptap-button .material-symbols-outlined.icon-large{font-size:24px}.tiptap-button.text-button{width:auto;padding:0 12px;font-size:14px;font-weight:500;gap:8px}.tiptap-button.color-button{width:28px;height:28px;border-radius:50%;border:2px solid transparent;transition:all .2s ease}.tiptap-button.color-button:hover{border-color:var(--ate-border);transform:scale(1.1)}.tiptap-button.color-button.is-active{border-color:var(--ate-primary);box-shadow:0 0 0 2px var(--ate-primary-light)}.tiptap-button.danger{color:var(--ate-error-color, #ef4444)}.tiptap-button.danger:hover{color:var(--ate-error-color, #ef4444);background:var(--ate-error-bg, rgba(239, 68, 68, .1))}.tiptap-button.danger:before{background:var(--ate-error-color, #ef4444)}.tiptap-button.small{width:24px;height:24px}.tiptap-button.medium{width:32px;height:32px}.tiptap-button.large{width:40px;height:40px}@keyframes pulse{0%,to{box-shadow:0 0 0 0 var(--ate-primary-light-alpha)}50%{box-shadow:0 0 0 4px transparent}}.tiptap-button.is-active.pulse{animation:pulse 2s infinite}@media (max-width: 768px){.tiptap-button{width:32px;height:32px}.tiptap-button .material-symbols-outlined{font-size:18px}.tiptap-button.text-button{padding:0 8px;font-size:13px}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: "tiptap-button", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, 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'"
-      [class.has-custom-color]="!!color()"
-      [class.has-custom-bg]="!!backgroundColor()"
-      [disabled]="disabled()"
-      [style.color]="color()"
-      [style.background-color]="backgroundColor()"
-      [attr.title]="title()"
-      [attr.aria-label]="title()"
-      (mousedown)="onMouseDown($event)"
-      (click)="onClick.emit($event)"
-      type="button"
-    >
-      @if (icon()) {
-        <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>
+            args: [{ selector: "tiptap-button", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, 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'"
+      [class.has-custom-color]="!!color()"
+      [class.has-custom-bg]="!!backgroundColor()"
+      [disabled]="disabled()"
+      [style.color]="color()"
+      [style.background-color]="backgroundColor()"
+      [attr.title]="title()"
+      [attr.aria-label]="title()"
+      (mousedown)="onMouseDown($event)"
+      (click)="onClick.emit($event)"
+      type="button"
+    >
+      @if (icon()) {
+        <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:var(--ate-sub-border-radius, 8px);cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);color:var(--ate-toolbar-button-color, var(--ate-text-secondary));position:relative;overflow:hidden}.tiptap-button:before{content:\"\";position:absolute;inset:0;background:var(--ate-primary);opacity:0;transition:opacity .2s ease;border-radius:var(--ate-sub-border-radius, 8px)}.tiptap-button:hover:not(.has-custom-color){color:var(--ate-toolbar-button-active-color, var(--ate-primary));background:var(--ate-toolbar-button-hover-background, transparent);transform:translateY(-1px)}.tiptap-button.has-custom-color:hover:not(.has-custom-bg){background:var(--ate-toolbar-button-hover-background, transparent);transform:translateY(-1px)}.tiptap-button.has-custom-bg:hover{transform:translateY(-1px);filter:brightness(.9)}.tiptap-button:hover:before{opacity:.1}.tiptap-button:active{transform:translateY(0)}.tiptap-button.is-active:not(.has-custom-color){color:var(--ate-toolbar-button-active-color, var(--ate-primary));background:var(--ate-toolbar-button-active-background, var(--ate-primary-light))}.tiptap-button.is-active.has-custom-color{background:var(--ate-toolbar-button-active-background, var(--ate-primary-light))}.tiptap-button:disabled{opacity:.4;cursor:not-allowed;pointer-events:none}.tiptap-button .material-symbols-outlined{font-size:20px;position:relative;z-index:1}.tiptap-button .material-symbols-outlined.icon-small{font-size:16px}.tiptap-button .material-symbols-outlined.icon-medium{font-size:20px}.tiptap-button .material-symbols-outlined.icon-large{font-size:24px}.tiptap-button.text-button{width:auto;padding:0 12px;font-size:14px;font-weight:500;gap:8px}.tiptap-button.color-button{width:28px;height:28px;border-radius:50%;border:2px solid transparent;transition:all .2s ease}.tiptap-button.color-button:hover{border-color:var(--ate-border);transform:scale(1.1)}.tiptap-button.color-button.is-active{border-color:var(--ate-primary);box-shadow:0 0 0 2px var(--ate-primary-light)}.tiptap-button.danger{color:var(--ate-error-color, #ef4444)}.tiptap-button.danger:hover{color:var(--ate-error-color, #ef4444);background:var(--ate-error-bg, rgba(239, 68, 68, .1))}.tiptap-button.danger:before{background:var(--ate-error-color, #ef4444)}.tiptap-button.small{width:24px;height:24px}.tiptap-button.medium{width:32px;height:32px}.tiptap-button.large{width:40px;height:40px}@keyframes pulse{0%,to{box-shadow:0 0 0 0 var(--ate-primary-light-alpha)}50%{box-shadow:0 0 0 4px transparent}}.tiptap-button.is-active.pulse{animation:pulse 2s infinite}@media (max-width: 768px){.tiptap-button{width:32px;height:32px}.tiptap-button .material-symbols-outlined{font-size:18px}.tiptap-button.text-button{padding:0 8px;font-size:13px}}\n"] }]
         }] });
 
@@ -778,28 +778,28 @@ class TiptapSeparatorComponent {
         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>
+    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:var(--ate-border, #e2e8f0);margin:0}.tiptap-separator.vertical{width:1px;height:24px;margin:0 8px}.tiptap-separator.horizontal{height:1px;width:100%;margin:8px 0}.tiptap-separator.small.vertical{height:16px;margin:0 4px}.tiptap-separator.small.horizontal{margin:4px 0}.tiptap-separator.medium.vertical{height:24px;margin:0 8px}.tiptap-separator.medium.horizontal{margin:8px 0}.tiptap-separator.large.vertical{height:32px;margin:0 12px}.tiptap-separator.large.horizontal{margin:12px 0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapSeparatorComponent, decorators: [{
             type: Component,
-            args: [{ selector: "tiptap-separator", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, 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>
+            args: [{ selector: "tiptap-separator", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, 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:var(--ate-border, #e2e8f0);margin:0}.tiptap-separator.vertical{width:1px;height:24px;margin:0 8px}.tiptap-separator.horizontal{height:1px;width:100%;margin:8px 0}.tiptap-separator.small.vertical{height:16px;margin:0 4px}.tiptap-separator.small.horizontal{margin:4px 0}.tiptap-separator.medium.vertical{height:24px;margin:0 8px}.tiptap-separator.medium.horizontal{margin:8px 0}.tiptap-separator.large.vertical{height:32px;margin:0 12px}.tiptap-separator.large.horizontal{margin:12px 0}\n"] }]
         }] });
 
@@ -955,6 +955,8 @@ const ENGLISH_TRANSLATIONS = {
         linkPrompt: "Enter link URL",
         linkUrlPrompt: "Enter URL",
         confirmDelete: "Are you sure you want to delete this?",
+        toggleEdit: "Switch to Edit Mode",
+        viewMode: "Switch to View Mode",
     },
     common: {
         cancel: "Cancel",
@@ -1129,6 +1131,8 @@ const FRENCH_TRANSLATIONS = {
         linkPrompt: "Entrez l'URL du lien",
         linkUrlPrompt: "Entrez l'URL",
         confirmDelete: "Êtes-vous sûr de vouloir supprimer ceci ?",
+        toggleEdit: "Passer en mode édition",
+        viewMode: "Passer en mode affichage",
     },
     common: {
         cancel: "Annuler",
@@ -1349,14 +1353,16 @@ class ImageService {
         }
     }
     /** Validate file type and size */
-    validateImage(file, maxSize = 10 * 1024 * 1024) {
-        if (!file.type.startsWith("image/")) {
+    validateImage(file, options) {
+        const maxSize = options?.maxSize || 10 * 1024 * 1024;
+        const allowedTypes = options?.allowedTypes || [];
+        if (allowedTypes.length > 0 && !allowedTypes.includes(file.type)) {
             return { valid: false, error: this.t().invalidFileType };
         }
         if (file.size > maxSize) {
             return {
                 valid: false,
-                error: `${this.t().imageTooLarge} (max ${maxSize / 1024 / 1024}MB)`,
+                error: `${this.t().imageTooLarge} (max ${Math.round(maxSize / 1024 / 1024)}MB)`,
             };
         }
         return { valid: true };
@@ -1419,7 +1425,10 @@ class ImageService {
             this.uploadProgress.set(10);
             this.uploadMessage.set(this.t().validating);
             this.forceEditorUpdate();
-            const validation = this.validateImage(file);
+            const validation = this.validateImage(file, {
+                maxSize: options?.maxSize,
+                allowedTypes: options?.allowedTypes
+            });
             if (!validation.valid)
                 throw new Error(validation.error);
             this.uploadProgress.set(30);
@@ -1495,7 +1504,13 @@ class ImageService {
         return new Promise((resolve, reject) => {
             const input = document.createElement("input");
             input.type = "file";
-            input.accept = options?.['accept'] || "image/*";
+            // Use allowedTypes if provided, otherwise default to image/*
+            if (options?.allowedTypes && options.allowedTypes.length > 0) {
+                input.accept = options.allowedTypes.join(",");
+            }
+            else {
+                input.accept = "image/*";
+            }
             input.style.display = "none";
             input.addEventListener("change", async (e) => {
                 const file = e.target.files?.[0];
@@ -2368,60 +2383,60 @@ class TiptapColorPickerComponent {
         this.colorPickerSvc.close();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: TiptapColorPickerComponent, isStandalone: true, selector: "tiptap-color-picker", inputs: { editor: { classPropertyName: "editor", publicName: "editor", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, anchorToText: { classPropertyName: "anchorToText", publicName: "anchorToText", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <div class="color-picker-wrapper">
-      <div class="color-picker-container" [class.is-highlight]="mode() === 'highlight'">
-        <tiptap-button
-          [icon]="buttonIcon()"
-          [title]="mode() === 'text' ? t().textColor : t().highlight"
-          [color]="buttonTextColor()"
-          [backgroundColor]="buttonBgColor()"
-          [disabled]="disabled() || !state().isEditable"
-          (onClick)="onToggle($event)"
-        />
-
-        @if (hasColorApplied()) {
-        <button
-          class="btn-clear-badge"
-          type="button"
-          [title]="t().clear"
-          [attr.aria-label]="t().clear"
-          (click)="onClear($event)"
-        >
-          <span class="material-symbols-outlined">close</span>
-        </button>
-        }
-      </div>
-    </div>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: TiptapColorPickerComponent, isStandalone: true, selector: "tiptap-color-picker", inputs: { editor: { classPropertyName: "editor", publicName: "editor", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, anchorToText: { classPropertyName: "anchorToText", publicName: "anchorToText", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div class="color-picker-wrapper">
+      <div class="color-picker-container" [class.is-highlight]="mode() === 'highlight'">
+        <tiptap-button
+          [icon]="buttonIcon()"
+          [title]="mode() === 'text' ? t().textColor : t().highlight"
+          [color]="buttonTextColor()"
+          [backgroundColor]="buttonBgColor()"
+          [disabled]="disabled() || !state().isEditable"
+          (onClick)="onToggle($event)"
+        />
+
+        @if (hasColorApplied()) {
+        <button
+          class="btn-clear-badge"
+          type="button"
+          [title]="t().clear"
+          [attr.aria-label]="t().clear"
+          (click)="onClear($event)"
+        >
+          <span class="material-symbols-outlined">close</span>
+        </button>
+        }
+      </div>
+    </div>
   `, isInline: true, styles: [".color-picker-wrapper{position:relative;display:inline-block}.color-picker-container{position:relative;display:inline-flex;align-items:center}.btn-clear-badge{position:absolute;top:-4px;right:-4px;width:14px;height:14px;padding:0;border:none;border-radius:999px;background:#0f172abf;color:#fff;display:flex;align-items:center;justify-content:center;z-index:10;opacity:0;pointer-events:none;transition:opacity .12s ease}.color-picker-container:hover .btn-clear-badge{opacity:1;pointer-events:auto}.btn-clear-badge .material-symbols-outlined{font-size:10px;line-height:1}\n"], dependencies: [{ kind: "component", type: TiptapButtonComponent, selector: "tiptap-button", inputs: ["icon", "title", "active", "disabled", "color", "backgroundColor", "variant", "size", "iconSize"], outputs: ["onClick"] }, { kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapColorPickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: "tiptap-color-picker", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [TiptapButtonComponent, CommonModule], template: `
-    <div class="color-picker-wrapper">
-      <div class="color-picker-container" [class.is-highlight]="mode() === 'highlight'">
-        <tiptap-button
-          [icon]="buttonIcon()"
-          [title]="mode() === 'text' ? t().textColor : t().highlight"
-          [color]="buttonTextColor()"
-          [backgroundColor]="buttonBgColor()"
-          [disabled]="disabled() || !state().isEditable"
-          (onClick)="onToggle($event)"
-        />
-
-        @if (hasColorApplied()) {
-        <button
-          class="btn-clear-badge"
-          type="button"
-          [title]="t().clear"
-          [attr.aria-label]="t().clear"
-          (click)="onClear($event)"
-        >
-          <span class="material-symbols-outlined">close</span>
-        </button>
-        }
-      </div>
-    </div>
+            args: [{ selector: "tiptap-color-picker", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [TiptapButtonComponent, CommonModule], template: `
+    <div class="color-picker-wrapper">
+      <div class="color-picker-container" [class.is-highlight]="mode() === 'highlight'">
+        <tiptap-button
+          [icon]="buttonIcon()"
+          [title]="mode() === 'text' ? t().textColor : t().highlight"
+          [color]="buttonTextColor()"
+          [backgroundColor]="buttonBgColor()"
+          [disabled]="disabled() || !state().isEditable"
+          (onClick)="onToggle($event)"
+        />
+
+        @if (hasColorApplied()) {
+        <button
+          class="btn-clear-badge"
+          type="button"
+          [title]="t().clear"
+          [attr.aria-label]="t().clear"
+          (click)="onClear($event)"
+        >
+          <span class="material-symbols-outlined">close</span>
+        </button>
+        }
+      </div>
+    </div>
   `, styles: [".color-picker-wrapper{position:relative;display:inline-block}.color-picker-container{position:relative;display:inline-flex;align-items:center}.btn-clear-badge{position:absolute;top:-4px;right:-4px;width:14px;height:14px;padding:0;border:none;border-radius:999px;background:#0f172abf;color:#fff;display:flex;align-items:center;justify-content:center;z-index:10;opacity:0;pointer-events:none;transition:opacity .12s ease}.color-picker-container:hover .btn-clear-badge{opacity:1;pointer-events:auto}.btn-clear-badge .material-symbols-outlined{font-size:10px;line-height:1}\n"] }]
         }] });
 
@@ -2443,241 +2458,241 @@ class TiptapToolbarComponent {
         this.editorCommands.execute(editor, command, ...args);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapToolbarComponent, deps: [], 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 }, imageUpload: { classPropertyName: "imageUpload", publicName: "imageUpload", isSignal: true, isRequired: false, transformFunction: null }, floating: { classPropertyName: "floating", publicName: "floating", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <div class="tiptap-toolbar" [class.floating]="floating()">
-      @if (config().bold) {
-      <tiptap-button
-        icon="format_bold"
-        [title]="t().bold"
-        [active]="state().marks.bold"
-        [disabled]="!state().can.toggleBold"
-        (onClick)="onCommand('toggleBold')"
-      />
-      } @if (config().italic) {
-      <tiptap-button
-        icon="format_italic"
-        [title]="t().italic"
-        [active]="state().marks.italic"
-        [disabled]="!state().can.toggleItalic"
-        (onClick)="onCommand('toggleItalic')"
-      />
-      } @if (config().underline) {
-      <tiptap-button
-        icon="format_underlined"
-        [title]="t().underline"
-        [active]="state().marks.underline"
-        [disabled]="!state().can.toggleUnderline"
-        (onClick)="onCommand('toggleUnderline')"
-      />
-      } @if (config().strike) {
-      <tiptap-button
-        icon="strikethrough_s"
-        [title]="t().strike"
-        [active]="state().marks.strike"
-        [disabled]="!state().can.toggleStrike"
-        (onClick)="onCommand('toggleStrike')"
-      />
-      } @if (config().code) {
-      <tiptap-button
-        icon="code"
-        [title]="t().code"
-        [active]="state().marks.code"
-        [disabled]="!state().can.toggleCode"
-        (onClick)="onCommand('toggleCode')"
-      />
-      } @if (config().codeBlock) {
-      <tiptap-button
-        icon="terminal"
-        [title]="t().codeBlock"
-        [active]="state().nodes.isCodeBlock"
-        [disabled]="!state().can.toggleCodeBlock"
-        (onClick)="onCommand('toggleCodeBlock')"
-      />
-      } @if (config().superscript) {
-      <tiptap-button
-        icon="superscript"
-        [title]="t().superscript"
-        [active]="state().marks.superscript"
-        [disabled]="!state().can.toggleSuperscript"
-        (onClick)="onCommand('toggleSuperscript')"
-      />
-      } @if (config().subscript) {
-      <tiptap-button
-        icon="subscript"
-        [title]="t().subscript"
-        [active]="state().marks.subscript"
-        [disabled]="!state().can.toggleSubscript"
-        (onClick)="onCommand('toggleSubscript')"
-      />
-      } @if (config().highlight) {
-      <tiptap-button
-        icon="highlight"
-        [title]="t().highlight"
-        [active]="state().marks.highlight"
-        [disabled]="!state().can.toggleHighlight"
-        (onClick)="onCommand('toggleHighlight')"
-      />
-      } @if (config().highlightPicker) {
-      <tiptap-color-picker 
-        mode="highlight" 
-        [editor]="editor()" 
-        [disabled]="!state().can.setHighlight"
-      />
-      } @if (config().textColor) {
-      <tiptap-color-picker 
-        mode="text" 
-        [editor]="editor()" 
-        [disabled]="!state().can.setColor"
-      />
-      }
-      
-      @if (config().separator && (config().heading1 || config().heading2 || config().heading3)) {
-      <tiptap-separator />
-      } @if (config().heading1) {
-      <tiptap-button
-        icon="format_h1"
-        [title]="t().heading1"
-        [active]="state().nodes.h1"
-        [disabled]="!state().can.toggleHeading1"
-        (onClick)="onCommand('toggleHeading', 1)"
-      />
-      } @if (config().heading2) {
-      <tiptap-button
-        icon="format_h2"
-        [title]="t().heading2"
-        [active]="state().nodes.h2"
-        [disabled]="!state().can.toggleHeading2"
-        (onClick)="onCommand('toggleHeading', 2)"
-      />
-      } @if (config().heading3) {
-      <tiptap-button
-        icon="format_h3"
-        [title]="t().heading3"
-        [active]="state().nodes.h3"
-        [disabled]="!state().can.toggleHeading3"
-        (onClick)="onCommand('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]="state().nodes.isBulletList"
-        [disabled]="!state().can.toggleBulletList"
-        (onClick)="onCommand('toggleBulletList')"
-      />
-      } @if (config().orderedList) {
-      <tiptap-button
-        icon="format_list_numbered"
-        [title]="t().orderedList"
-        [active]="state().nodes.isOrderedList"
-        [disabled]="!state().can.toggleOrderedList"
-        (onClick)="onCommand('toggleOrderedList')"
-      />
-      } @if (config().blockquote) {
-      <tiptap-button
-        icon="format_quote"
-        [title]="t().blockquote"
-        [active]="state().nodes.isBlockquote"
-        [disabled]="!state().can.toggleBlockquote"
-        (onClick)="onCommand('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]="state().nodes.alignLeft"
-        [disabled]="!state().can.setTextAlignLeft"
-        (onClick)="onCommand('setTextAlign', 'left')"
-      />
-      } @if (config().alignCenter) {
-      <tiptap-button
-        icon="format_align_center"
-        [title]="t().alignCenter"
-        [active]="state().nodes.alignCenter"
-        [disabled]="!state().can.setTextAlignCenter"
-        (onClick)="onCommand('setTextAlign', 'center')"
-      />
-      } @if (config().alignRight) {
-      <tiptap-button
-        icon="format_align_right"
-        [title]="t().alignRight"
-        [active]="state().nodes.alignRight"
-        [disabled]="!state().can.setTextAlignRight"
-        (onClick)="onCommand('setTextAlign', 'right')"
-      />
-      } @if (config().alignJustify) {
-      <tiptap-button
-        icon="format_align_justify"
-        [title]="t().alignJustify"
-        [active]="state().nodes.alignJustify"
-        [disabled]="!state().can.setTextAlignJustify"
-        (onClick)="onCommand('setTextAlign', 'justify')"
-      />
-      } @if (config().separator && (config().link || config().horizontalRule)) {
-      <tiptap-separator />
-      } @if (config().link) {
-      <tiptap-button
-        icon="link"
-        [title]="t().link"
-        [active]="state().marks.link"
-        [disabled]="!state().can.toggleLink"
-        (onClick)="onCommand('toggleLink', $event)"
-      />
-      } @if (config().horizontalRule) {
-      <tiptap-button
-        icon="horizontal_rule"
-        [title]="t().horizontalRule"
-        [disabled]="!state().can.insertHorizontalRule"
-        (onClick)="onCommand('insertHorizontalRule')"
-      />
-      } @if (config().table) {
-      <tiptap-button
-        icon="table_view"
-        [title]="t().table"
-        [disabled]="!state().can.insertTable"
-        (onClick)="onCommand('insertTable')"
-      />
-      } @if (config().separator && config().image) {
-      <tiptap-separator />
-      } @if (config().image) {
-      <tiptap-button
-        icon="image"
-        [title]="t().image"
-        [disabled]="!state().can.insertImage"
-        (onClick)="onCommand('insertImage', imageUpload())"
-      />
-      } @if (config().separator && (config().undo || config().redo)) {
-      <tiptap-separator />
-      } @if (config().undo) {
-      <tiptap-button
-        icon="undo"
-        [title]="t().undo"
-        [disabled]="!state().can.undo"
-        (onClick)="onCommand('undo')"
-      />
-      } @if (config().redo) {
-      <tiptap-button
-        icon="redo"
-        [title]="t().redo"
-        [disabled]="!state().can.redo"
-        (onClick)="onCommand('redo')"
-      />
-      } @if (config().separator && config().clear) {
-      <tiptap-separator />
-      } @if (config().clear) {
-      <tiptap-button
-        icon="delete"
-        [title]="t().clear"
-        [disabled]="!state().isEditable"
-        (onClick)="onCommand('clearContent')"
-      />
-      }
-    </div>
-  `, isInline: true, styles: [":host{display:block;transition:opacity .3s ease}:host-context(.floating-toolbar){position:sticky;top:3rem;left:0;right:0;z-index:100;display:flex;height:0;overflow:visible;pointer-events:none;opacity:0}:host-context(.floating-toolbar:focus-within),:host-context(.floating-toolbar:hover){opacity:1}.tiptap-toolbar{display:flex;align-items:center;gap:4px;padding:var(--ate-toolbar-padding);background:var(--ate-toolbar-background);border-bottom:1px solid var(--ate-toolbar-border-color);flex-wrap:wrap;min-height:32px;position:relative;z-index:50;border-top-left-radius:calc(var(--ate-menu-border-radius, 8px) - var(--ate-border-width, 2px));border-top-right-radius:calc(var(--ate-menu-border-radius, 8px) - var(--ate-border-width, 2px))}.tiptap-toolbar.floating{pointer-events:auto;border-radius:var(--ate-menu-border-radius, 8px);border:1px solid var(--ate-menu-border)!important;box-shadow:var(--ate-menu-shadow)!important;background:var(--ate-menu-bg)!important;padding:var(--ate-menu-padding)!important;flex-wrap:nowrap;overflow-x:auto;max-width:95vw;scrollbar-width:none;transform:translateY(0);transition:transform .3s cubic-bezier(.4,0,.2,1)}.tiptap-toolbar.floating::-webkit-scrollbar{display:none}:host-context(.floating-toolbar:focus-within) .tiptap-toolbar.floating,:host-context(.floating-toolbar:hover) .tiptap-toolbar.floating{transform:translateY(-2rem)}@media (max-width: 768px){.tiptap-toolbar{padding:6px 8px;gap:2px}}@keyframes toolbarSlideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.tiptap-toolbar{animation:toolbarSlideIn .3s cubic-bezier(.4,0,.2,1)}\n"], dependencies: [{ kind: "component", type: TiptapButtonComponent, selector: "tiptap-button", inputs: ["icon", "title", "active", "disabled", "color", "backgroundColor", "variant", "size", "iconSize"], outputs: ["onClick"] }, { kind: "component", type: TiptapSeparatorComponent, selector: "tiptap-separator", inputs: ["orientation", "size"] }, { kind: "component", type: TiptapColorPickerComponent, selector: "tiptap-color-picker", inputs: ["editor", "mode", "disabled", "anchorToText"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: TiptapToolbarComponent, isStandalone: true, selector: "tiptap-toolbar", inputs: { editor: { classPropertyName: "editor", publicName: "editor", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, imageUpload: { classPropertyName: "imageUpload", publicName: "imageUpload", isSignal: true, isRequired: false, transformFunction: null }, floating: { classPropertyName: "floating", publicName: "floating", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div class="tiptap-toolbar" [class.floating]="floating()">
+      @if (config().bold) {
+      <tiptap-button
+        icon="format_bold"
+        [title]="t().bold"
+        [active]="state().marks.bold"
+        [disabled]="!state().can.toggleBold"
+        (onClick)="onCommand('toggleBold')"
+      />
+      } @if (config().italic) {
+      <tiptap-button
+        icon="format_italic"
+        [title]="t().italic"
+        [active]="state().marks.italic"
+        [disabled]="!state().can.toggleItalic"
+        (onClick)="onCommand('toggleItalic')"
+      />
+      } @if (config().underline) {
+      <tiptap-button
+        icon="format_underlined"
+        [title]="t().underline"
+        [active]="state().marks.underline"
+        [disabled]="!state().can.toggleUnderline"
+        (onClick)="onCommand('toggleUnderline')"
+      />
+      } @if (config().strike) {
+      <tiptap-button
+        icon="strikethrough_s"
+        [title]="t().strike"
+        [active]="state().marks.strike"
+        [disabled]="!state().can.toggleStrike"
+        (onClick)="onCommand('toggleStrike')"
+      />
+      } @if (config().code) {
+      <tiptap-button
+        icon="code"
+        [title]="t().code"
+        [active]="state().marks.code"
+        [disabled]="!state().can.toggleCode"
+        (onClick)="onCommand('toggleCode')"
+      />
+      } @if (config().codeBlock) {
+      <tiptap-button
+        icon="terminal"
+        [title]="t().codeBlock"
+        [active]="state().nodes.isCodeBlock"
+        [disabled]="!state().can.toggleCodeBlock"
+        (onClick)="onCommand('toggleCodeBlock')"
+      />
+      } @if (config().superscript) {
+      <tiptap-button
+        icon="superscript"
+        [title]="t().superscript"
+        [active]="state().marks.superscript"
+        [disabled]="!state().can.toggleSuperscript"
+        (onClick)="onCommand('toggleSuperscript')"
+      />
+      } @if (config().subscript) {
+      <tiptap-button
+        icon="subscript"
+        [title]="t().subscript"
+        [active]="state().marks.subscript"
+        [disabled]="!state().can.toggleSubscript"
+        (onClick)="onCommand('toggleSubscript')"
+      />
+      } @if (config().highlight) {
+      <tiptap-button
+        icon="highlight"
+        [title]="t().highlight"
+        [active]="state().marks.highlight"
+        [disabled]="!state().can.toggleHighlight"
+        (onClick)="onCommand('toggleHighlight')"
+      />
+      } @if (config().highlightPicker) {
+      <tiptap-color-picker 
+        mode="highlight" 
+        [editor]="editor()" 
+        [disabled]="!state().can.setHighlight"
+      />
+      } @if (config().textColor) {
+      <tiptap-color-picker 
+        mode="text" 
+        [editor]="editor()" 
+        [disabled]="!state().can.setColor"
+      />
+      }
+      
+      @if (config().separator && (config().heading1 || config().heading2 || config().heading3)) {
+      <tiptap-separator />
+      } @if (config().heading1) {
+      <tiptap-button
+        icon="format_h1"
+        [title]="t().heading1"
+        [active]="state().nodes.h1"
+        [disabled]="!state().can.toggleHeading1"
+        (onClick)="onCommand('toggleHeading', 1)"
+      />
+      } @if (config().heading2) {
+      <tiptap-button
+        icon="format_h2"
+        [title]="t().heading2"
+        [active]="state().nodes.h2"
+        [disabled]="!state().can.toggleHeading2"
+        (onClick)="onCommand('toggleHeading', 2)"
+      />
+      } @if (config().heading3) {
+      <tiptap-button
+        icon="format_h3"
+        [title]="t().heading3"
+        [active]="state().nodes.h3"
+        [disabled]="!state().can.toggleHeading3"
+        (onClick)="onCommand('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]="state().nodes.isBulletList"
+        [disabled]="!state().can.toggleBulletList"
+        (onClick)="onCommand('toggleBulletList')"
+      />
+      } @if (config().orderedList) {
+      <tiptap-button
+        icon="format_list_numbered"
+        [title]="t().orderedList"
+        [active]="state().nodes.isOrderedList"
+        [disabled]="!state().can.toggleOrderedList"
+        (onClick)="onCommand('toggleOrderedList')"
+      />
+      } @if (config().blockquote) {
+      <tiptap-button
+        icon="format_quote"
+        [title]="t().blockquote"
+        [active]="state().nodes.isBlockquote"
+        [disabled]="!state().can.toggleBlockquote"
+        (onClick)="onCommand('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]="state().nodes.alignLeft"
+        [disabled]="!state().can.setTextAlignLeft"
+        (onClick)="onCommand('setTextAlign', 'left')"
+      />
+      } @if (config().alignCenter) {
+      <tiptap-button
+        icon="format_align_center"
+        [title]="t().alignCenter"
+        [active]="state().nodes.alignCenter"
+        [disabled]="!state().can.setTextAlignCenter"
+        (onClick)="onCommand('setTextAlign', 'center')"
+      />
+      } @if (config().alignRight) {
+      <tiptap-button
+        icon="format_align_right"
+        [title]="t().alignRight"
+        [active]="state().nodes.alignRight"
+        [disabled]="!state().can.setTextAlignRight"
+        (onClick)="onCommand('setTextAlign', 'right')"
+      />
+      } @if (config().alignJustify) {
+      <tiptap-button
+        icon="format_align_justify"
+        [title]="t().alignJustify"
+        [active]="state().nodes.alignJustify"
+        [disabled]="!state().can.setTextAlignJustify"
+        (onClick)="onCommand('setTextAlign', 'justify')"
+      />
+      } @if (config().separator && (config().link || config().horizontalRule)) {
+      <tiptap-separator />
+      } @if (config().link) {
+      <tiptap-button
+        icon="link"
+        [title]="t().link"
+        [active]="state().marks.link"
+        [disabled]="!state().can.toggleLink"
+        (onClick)="onCommand('toggleLink', $event)"
+      />
+      } @if (config().horizontalRule) {
+      <tiptap-button
+        icon="horizontal_rule"
+        [title]="t().horizontalRule"
+        [disabled]="!state().can.insertHorizontalRule"
+        (onClick)="onCommand('insertHorizontalRule')"
+      />
+      } @if (config().table) {
+      <tiptap-button
+        icon="table_view"
+        [title]="t().table"
+        [disabled]="!state().can.insertTable"
+        (onClick)="onCommand('insertTable')"
+      />
+      } @if (config().separator && config().image) {
+      <tiptap-separator />
+      } @if (config().image) {
+      <tiptap-button
+        icon="image"
+        [title]="t().image"
+        [disabled]="!state().can.insertImage"
+        (onClick)="onCommand('insertImage', imageUpload())"
+      />
+      } @if (config().separator && (config().undo || config().redo)) {
+      <tiptap-separator />
+      } @if (config().undo) {
+      <tiptap-button
+        icon="undo"
+        [title]="t().undo"
+        [disabled]="!state().can.undo"
+        (onClick)="onCommand('undo')"
+      />
+      } @if (config().redo) {
+      <tiptap-button
+        icon="redo"
+        [title]="t().redo"
+        [disabled]="!state().can.redo"
+        (onClick)="onCommand('redo')"
+      />
+      } @if (config().separator && config().clear) {
+      <tiptap-separator />
+      } @if (config().clear) {
+      <tiptap-button
+        icon="delete"
+        [title]="t().clear"
+        [disabled]="!state().isEditable"
+        (onClick)="onCommand('clearContent')"
+      />
+      }
+    </div>
+  `, isInline: true, styles: [":host{display:block;transition:opacity .3s ease}:host-context(.floating-toolbar){position:sticky;top:3rem;left:0;right:0;z-index:100;display:flex;height:0;overflow:visible;pointer-events:none;opacity:0}:host-context(.floating-toolbar:focus-within),:host-context(.floating-toolbar:hover){opacity:1}.tiptap-toolbar{display:flex;align-items:center;gap:4px;padding:var(--ate-toolbar-padding);background:var(--ate-toolbar-background);border-bottom:1px solid var(--ate-toolbar-border-color);flex-wrap:wrap;min-height:32px;position:relative;z-index:50;border-top-left-radius:calc(var(--ate-menu-border-radius, 12px) - var(--ate-border-width, 2px));border-top-right-radius:calc(var(--ate-menu-border-radius, 12px) - var(--ate-border-width, 2px))}.tiptap-toolbar.floating{pointer-events:auto;border-radius:var(--ate-menu-border-radius, 12px);border:1px solid var(--ate-menu-border)!important;box-shadow:var(--ate-menu-shadow)!important;background:var(--ate-menu-bg)!important;padding:var(--ate-menu-padding)!important;flex-wrap:nowrap;overflow-x:auto;max-width:95vw;scrollbar-width:none;transform:translateY(0);transition:transform .3s cubic-bezier(.4,0,.2,1)}.tiptap-toolbar.floating::-webkit-scrollbar{display:none}:host-context(.floating-toolbar:focus-within) .tiptap-toolbar.floating,:host-context(.floating-toolbar:hover) .tiptap-toolbar.floating{transform:translateY(-2rem)}@media (max-width: 768px){.tiptap-toolbar{padding:6px 8px;gap:2px}}@keyframes toolbarSlideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.tiptap-toolbar{animation:toolbarSlideIn .3s cubic-bezier(.4,0,.2,1)}\n"], dependencies: [{ kind: "component", type: TiptapButtonComponent, selector: "tiptap-button", inputs: ["icon", "title", "active", "disabled", "color", "backgroundColor", "variant", "size", "iconSize"], outputs: ["onClick"] }, { kind: "component", type: TiptapSeparatorComponent, selector: "tiptap-separator", inputs: ["orientation", "size"] }, { kind: "component", type: TiptapColorPickerComponent, selector: "tiptap-color-picker", inputs: ["editor", "mode", "disabled", "anchorToText"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapToolbarComponent, decorators: [{
             type: Component,
@@ -2685,241 +2700,241 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
                         TiptapButtonComponent,
                         TiptapSeparatorComponent,
                         TiptapColorPickerComponent,
-                    ], template: `
-    <div class="tiptap-toolbar" [class.floating]="floating()">
-      @if (config().bold) {
-      <tiptap-button
-        icon="format_bold"
-        [title]="t().bold"
-        [active]="state().marks.bold"
-        [disabled]="!state().can.toggleBold"
-        (onClick)="onCommand('toggleBold')"
-      />
-      } @if (config().italic) {
-      <tiptap-button
-        icon="format_italic"
-        [title]="t().italic"
-        [active]="state().marks.italic"
-        [disabled]="!state().can.toggleItalic"
-        (onClick)="onCommand('toggleItalic')"
-      />
-      } @if (config().underline) {
-      <tiptap-button
-        icon="format_underlined"
-        [title]="t().underline"
-        [active]="state().marks.underline"
-        [disabled]="!state().can.toggleUnderline"
-        (onClick)="onCommand('toggleUnderline')"
-      />
-      } @if (config().strike) {
-      <tiptap-button
-        icon="strikethrough_s"
-        [title]="t().strike"
-        [active]="state().marks.strike"
-        [disabled]="!state().can.toggleStrike"
-        (onClick)="onCommand('toggleStrike')"
-      />
-      } @if (config().code) {
-      <tiptap-button
-        icon="code"
-        [title]="t().code"
-        [active]="state().marks.code"
-        [disabled]="!state().can.toggleCode"
-        (onClick)="onCommand('toggleCode')"
-      />
-      } @if (config().codeBlock) {
-      <tiptap-button
-        icon="terminal"
-        [title]="t().codeBlock"
-        [active]="state().nodes.isCodeBlock"
-        [disabled]="!state().can.toggleCodeBlock"
-        (onClick)="onCommand('toggleCodeBlock')"
-      />
-      } @if (config().superscript) {
-      <tiptap-button
-        icon="superscript"
-        [title]="t().superscript"
-        [active]="state().marks.superscript"
-        [disabled]="!state().can.toggleSuperscript"
-        (onClick)="onCommand('toggleSuperscript')"
-      />
-      } @if (config().subscript) {
-      <tiptap-button
-        icon="subscript"
-        [title]="t().subscript"
-        [active]="state().marks.subscript"
-        [disabled]="!state().can.toggleSubscript"
-        (onClick)="onCommand('toggleSubscript')"
-      />
-      } @if (config().highlight) {
-      <tiptap-button
-        icon="highlight"
-        [title]="t().highlight"
-        [active]="state().marks.highlight"
-        [disabled]="!state().can.toggleHighlight"
-        (onClick)="onCommand('toggleHighlight')"
-      />
-      } @if (config().highlightPicker) {
-      <tiptap-color-picker 
-        mode="highlight" 
-        [editor]="editor()" 
-        [disabled]="!state().can.setHighlight"
-      />
-      } @if (config().textColor) {
-      <tiptap-color-picker 
-        mode="text" 
-        [editor]="editor()" 
-        [disabled]="!state().can.setColor"
-      />
-      }
-      
-      @if (config().separator && (config().heading1 || config().heading2 || config().heading3)) {
-      <tiptap-separator />
-      } @if (config().heading1) {
-      <tiptap-button
-        icon="format_h1"
-        [title]="t().heading1"
-        [active]="state().nodes.h1"
-        [disabled]="!state().can.toggleHeading1"
-        (onClick)="onCommand('toggleHeading', 1)"
-      />
-      } @if (config().heading2) {
-      <tiptap-button
-        icon="format_h2"
-        [title]="t().heading2"
-        [active]="state().nodes.h2"
-        [disabled]="!state().can.toggleHeading2"
-        (onClick)="onCommand('toggleHeading', 2)"
-      />
-      } @if (config().heading3) {
-      <tiptap-button
-        icon="format_h3"
-        [title]="t().heading3"
-        [active]="state().nodes.h3"
-        [disabled]="!state().can.toggleHeading3"
-        (onClick)="onCommand('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]="state().nodes.isBulletList"
-        [disabled]="!state().can.toggleBulletList"
-        (onClick)="onCommand('toggleBulletList')"
-      />
-      } @if (config().orderedList) {
-      <tiptap-button
-        icon="format_list_numbered"
-        [title]="t().orderedList"
-        [active]="state().nodes.isOrderedList"
-        [disabled]="!state().can.toggleOrderedList"
-        (onClick)="onCommand('toggleOrderedList')"
-      />
-      } @if (config().blockquote) {
-      <tiptap-button
-        icon="format_quote"
-        [title]="t().blockquote"
-        [active]="state().nodes.isBlockquote"
-        [disabled]="!state().can.toggleBlockquote"
-        (onClick)="onCommand('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]="state().nodes.alignLeft"
-        [disabled]="!state().can.setTextAlignLeft"
-        (onClick)="onCommand('setTextAlign', 'left')"
-      />
-      } @if (config().alignCenter) {
-      <tiptap-button
-        icon="format_align_center"
-        [title]="t().alignCenter"
-        [active]="state().nodes.alignCenter"
-        [disabled]="!state().can.setTextAlignCenter"
-        (onClick)="onCommand('setTextAlign', 'center')"
-      />
-      } @if (config().alignRight) {
-      <tiptap-button
-        icon="format_align_right"
-        [title]="t().alignRight"
-        [active]="state().nodes.alignRight"
-        [disabled]="!state().can.setTextAlignRight"
-        (onClick)="onCommand('setTextAlign', 'right')"
-      />
-      } @if (config().alignJustify) {
-      <tiptap-button
-        icon="format_align_justify"
-        [title]="t().alignJustify"
-        [active]="state().nodes.alignJustify"
-        [disabled]="!state().can.setTextAlignJustify"
-        (onClick)="onCommand('setTextAlign', 'justify')"
-      />
-      } @if (config().separator && (config().link || config().horizontalRule)) {
-      <tiptap-separator />
-      } @if (config().link) {
-      <tiptap-button
-        icon="link"
-        [title]="t().link"
-        [active]="state().marks.link"
-        [disabled]="!state().can.toggleLink"
-        (onClick)="onCommand('toggleLink', $event)"
-      />
-      } @if (config().horizontalRule) {
-      <tiptap-button
-        icon="horizontal_rule"
-        [title]="t().horizontalRule"
-        [disabled]="!state().can.insertHorizontalRule"
-        (onClick)="onCommand('insertHorizontalRule')"
-      />
-      } @if (config().table) {
-      <tiptap-button
-        icon="table_view"
-        [title]="t().table"
-        [disabled]="!state().can.insertTable"
-        (onClick)="onCommand('insertTable')"
-      />
-      } @if (config().separator && config().image) {
-      <tiptap-separator />
-      } @if (config().image) {
-      <tiptap-button
-        icon="image"
-        [title]="t().image"
-        [disabled]="!state().can.insertImage"
-        (onClick)="onCommand('insertImage', imageUpload())"
-      />
-      } @if (config().separator && (config().undo || config().redo)) {
-      <tiptap-separator />
-      } @if (config().undo) {
-      <tiptap-button
-        icon="undo"
-        [title]="t().undo"
-        [disabled]="!state().can.undo"
-        (onClick)="onCommand('undo')"
-      />
-      } @if (config().redo) {
-      <tiptap-button
-        icon="redo"
-        [title]="t().redo"
-        [disabled]="!state().can.redo"
-        (onClick)="onCommand('redo')"
-      />
-      } @if (config().separator && config().clear) {
-      <tiptap-separator />
-      } @if (config().clear) {
-      <tiptap-button
-        icon="delete"
-        [title]="t().clear"
-        [disabled]="!state().isEditable"
-        (onClick)="onCommand('clearContent')"
-      />
-      }
-    </div>
-  `, styles: [":host{display:block;transition:opacity .3s ease}:host-context(.floating-toolbar){position:sticky;top:3rem;left:0;right:0;z-index:100;display:flex;height:0;overflow:visible;pointer-events:none;opacity:0}:host-context(.floating-toolbar:focus-within),:host-context(.floating-toolbar:hover){opacity:1}.tiptap-toolbar{display:flex;align-items:center;gap:4px;padding:var(--ate-toolbar-padding);background:var(--ate-toolbar-background);border-bottom:1px solid var(--ate-toolbar-border-color);flex-wrap:wrap;min-height:32px;position:relative;z-index:50;border-top-left-radius:calc(var(--ate-menu-border-radius, 8px) - var(--ate-border-width, 2px));border-top-right-radius:calc(var(--ate-menu-border-radius, 8px) - var(--ate-border-width, 2px))}.tiptap-toolbar.floating{pointer-events:auto;border-radius:var(--ate-menu-border-radius, 8px);border:1px solid var(--ate-menu-border)!important;box-shadow:var(--ate-menu-shadow)!important;background:var(--ate-menu-bg)!important;padding:var(--ate-menu-padding)!important;flex-wrap:nowrap;overflow-x:auto;max-width:95vw;scrollbar-width:none;transform:translateY(0);transition:transform .3s cubic-bezier(.4,0,.2,1)}.tiptap-toolbar.floating::-webkit-scrollbar{display:none}:host-context(.floating-toolbar:focus-within) .tiptap-toolbar.floating,:host-context(.floating-toolbar:hover) .tiptap-toolbar.floating{transform:translateY(-2rem)}@media (max-width: 768px){.tiptap-toolbar{padding:6px 8px;gap:2px}}@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"] }]
+                    ], template: `
+    <div class="tiptap-toolbar" [class.floating]="floating()">
+      @if (config().bold) {
+      <tiptap-button
+        icon="format_bold"
+        [title]="t().bold"
+        [active]="state().marks.bold"
+        [disabled]="!state().can.toggleBold"
+        (onClick)="onCommand('toggleBold')"
+      />
+      } @if (config().italic) {
+      <tiptap-button
+        icon="format_italic"
+        [title]="t().italic"
+        [active]="state().marks.italic"
+        [disabled]="!state().can.toggleItalic"
+        (onClick)="onCommand('toggleItalic')"
+      />
+      } @if (config().underline) {
+      <tiptap-button
+        icon="format_underlined"
+        [title]="t().underline"
+        [active]="state().marks.underline"
+        [disabled]="!state().can.toggleUnderline"
+        (onClick)="onCommand('toggleUnderline')"
+      />
+      } @if (config().strike) {
+      <tiptap-button
+        icon="strikethrough_s"
+        [title]="t().strike"
+        [active]="state().marks.strike"
+        [disabled]="!state().can.toggleStrike"
+        (onClick)="onCommand('toggleStrike')"
+      />
+      } @if (config().code) {
+      <tiptap-button
+        icon="code"
+        [title]="t().code"
+        [active]="state().marks.code"
+        [disabled]="!state().can.toggleCode"
+        (onClick)="onCommand('toggleCode')"
+      />
+      } @if (config().codeBlock) {
+      <tiptap-button
+        icon="terminal"
+        [title]="t().codeBlock"
+        [active]="state().nodes.isCodeBlock"
+        [disabled]="!state().can.toggleCodeBlock"
+        (onClick)="onCommand('toggleCodeBlock')"
+      />
+      } @if (config().superscript) {
+      <tiptap-button
+        icon="superscript"
+        [title]="t().superscript"
+        [active]="state().marks.superscript"
+        [disabled]="!state().can.toggleSuperscript"
+        (onClick)="onCommand('toggleSuperscript')"
+      />
+      } @if (config().subscript) {
+      <tiptap-button
+        icon="subscript"
+        [title]="t().subscript"
+        [active]="state().marks.subscript"
+        [disabled]="!state().can.toggleSubscript"
+        (onClick)="onCommand('toggleSubscript')"
+      />
+      } @if (config().highlight) {
+      <tiptap-button
+        icon="highlight"
+        [title]="t().highlight"
+        [active]="state().marks.highlight"
+        [disabled]="!state().can.toggleHighlight"
+        (onClick)="onCommand('toggleHighlight')"
+      />
+      } @if (config().highlightPicker) {
+      <tiptap-color-picker 
+        mode="highlight" 
+        [editor]="editor()" 
+        [disabled]="!state().can.setHighlight"
+      />
+      } @if (config().textColor) {
+      <tiptap-color-picker 
+        mode="text" 
+        [editor]="editor()" 
+        [disabled]="!state().can.setColor"
+      />
+      }
+      
+      @if (config().separator && (config().heading1 || config().heading2 || config().heading3)) {
+      <tiptap-separator />
+      } @if (config().heading1) {
+      <tiptap-button
+        icon="format_h1"
+        [title]="t().heading1"
+        [active]="state().nodes.h1"
+        [disabled]="!state().can.toggleHeading1"
+        (onClick)="onCommand('toggleHeading', 1)"
+      />
+      } @if (config().heading2) {
+      <tiptap-button
+        icon="format_h2"
+        [title]="t().heading2"
+        [active]="state().nodes.h2"
+        [disabled]="!state().can.toggleHeading2"
+        (onClick)="onCommand('toggleHeading', 2)"
+      />
+      } @if (config().heading3) {
+      <tiptap-button
+        icon="format_h3"
+        [title]="t().heading3"
+        [active]="state().nodes.h3"
+        [disabled]="!state().can.toggleHeading3"
+        (onClick)="onCommand('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]="state().nodes.isBulletList"
+        [disabled]="!state().can.toggleBulletList"
+        (onClick)="onCommand('toggleBulletList')"
+      />
+      } @if (config().orderedList) {
+      <tiptap-button
+        icon="format_list_numbered"
+        [title]="t().orderedList"
+        [active]="state().nodes.isOrderedList"
+        [disabled]="!state().can.toggleOrderedList"
+        (onClick)="onCommand('toggleOrderedList')"
+      />
+      } @if (config().blockquote) {
+      <tiptap-button
+        icon="format_quote"
+        [title]="t().blockquote"
+        [active]="state().nodes.isBlockquote"
+        [disabled]="!state().can.toggleBlockquote"
+        (onClick)="onCommand('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]="state().nodes.alignLeft"
+        [disabled]="!state().can.setTextAlignLeft"
+        (onClick)="onCommand('setTextAlign', 'left')"
+      />
+      } @if (config().alignCenter) {
+      <tiptap-button
+        icon="format_align_center"
+        [title]="t().alignCenter"
+        [active]="state().nodes.alignCenter"
+        [disabled]="!state().can.setTextAlignCenter"
+        (onClick)="onCommand('setTextAlign', 'center')"
+      />
+      } @if (config().alignRight) {
+      <tiptap-button
+        icon="format_align_right"
+        [title]="t().alignRight"
+        [active]="state().nodes.alignRight"
+        [disabled]="!state().can.setTextAlignRight"
+        (onClick)="onCommand('setTextAlign', 'right')"
+      />
+      } @if (config().alignJustify) {
+      <tiptap-button
+        icon="format_align_justify"
+        [title]="t().alignJustify"
+        [active]="state().nodes.alignJustify"
+        [disabled]="!state().can.setTextAlignJustify"
+        (onClick)="onCommand('setTextAlign', 'justify')"
+      />
+      } @if (config().separator && (config().link || config().horizontalRule)) {
+      <tiptap-separator />
+      } @if (config().link) {
+      <tiptap-button
+        icon="link"
+        [title]="t().link"
+        [active]="state().marks.link"
+        [disabled]="!state().can.toggleLink"
+        (onClick)="onCommand('toggleLink', $event)"
+      />
+      } @if (config().horizontalRule) {
+      <tiptap-button
+        icon="horizontal_rule"
+        [title]="t().horizontalRule"
+        [disabled]="!state().can.insertHorizontalRule"
+        (onClick)="onCommand('insertHorizontalRule')"
+      />
+      } @if (config().table) {
+      <tiptap-button
+        icon="table_view"
+        [title]="t().table"
+        [disabled]="!state().can.insertTable"
+        (onClick)="onCommand('insertTable')"
+      />
+      } @if (config().separator && config().image) {
+      <tiptap-separator />
+      } @if (config().image) {
+      <tiptap-button
+        icon="image"
+        [title]="t().image"
+        [disabled]="!state().can.insertImage"
+        (onClick)="onCommand('insertImage', imageUpload())"
+      />
+      } @if (config().separator && (config().undo || config().redo)) {
+      <tiptap-separator />
+      } @if (config().undo) {
+      <tiptap-button
+        icon="undo"
+        [title]="t().undo"
+        [disabled]="!state().can.undo"
+        (onClick)="onCommand('undo')"
+      />
+      } @if (config().redo) {
+      <tiptap-button
+        icon="redo"
+        [title]="t().redo"
+        [disabled]="!state().can.redo"
+        (onClick)="onCommand('redo')"
+      />
+      } @if (config().separator && config().clear) {
+      <tiptap-separator />
+      } @if (config().clear) {
+      <tiptap-button
+        icon="delete"
+        [title]="t().clear"
+        [disabled]="!state().isEditable"
+        (onClick)="onCommand('clearContent')"
+      />
+      }
+    </div>
+  `, styles: [":host{display:block;transition:opacity .3s ease}:host-context(.floating-toolbar){position:sticky;top:3rem;left:0;right:0;z-index:100;display:flex;height:0;overflow:visible;pointer-events:none;opacity:0}:host-context(.floating-toolbar:focus-within),:host-context(.floating-toolbar:hover){opacity:1}.tiptap-toolbar{display:flex;align-items:center;gap:4px;padding:var(--ate-toolbar-padding);background:var(--ate-toolbar-background);border-bottom:1px solid var(--ate-toolbar-border-color);flex-wrap:wrap;min-height:32px;position:relative;z-index:50;border-top-left-radius:calc(var(--ate-menu-border-radius, 12px) - var(--ate-border-width, 2px));border-top-right-radius:calc(var(--ate-menu-border-radius, 12px) - var(--ate-border-width, 2px))}.tiptap-toolbar.floating{pointer-events:auto;border-radius:var(--ate-menu-border-radius, 12px);border:1px solid var(--ate-menu-border)!important;box-shadow:var(--ate-menu-shadow)!important;background:var(--ate-menu-bg)!important;padding:var(--ate-menu-padding)!important;flex-wrap:nowrap;overflow-x:auto;max-width:95vw;scrollbar-width:none;transform:translateY(0);transition:transform .3s cubic-bezier(.4,0,.2,1)}.tiptap-toolbar.floating::-webkit-scrollbar{display:none}:host-context(.floating-toolbar:focus-within) .tiptap-toolbar.floating,:host-context(.floating-toolbar:hover) .tiptap-toolbar.floating{transform:translateY(-2rem)}@media (max-width: 768px){.tiptap-toolbar{padding:6px 8px;gap:2px}}@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"] }]
         }] });
 
 /**
@@ -3202,96 +3217,96 @@ class TiptapBubbleMenuComponent extends TiptapBaseBubbleMenu {
         // premature closing when clicking between 'sibling' menu instances.
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapBubbleMenuComponent, deps: null, 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: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
-    <div #menuRef class="bubble-menu" (mousedown)="$event.preventDefault()">
-      @if (bubbleMenuConfig().bold) {
-      <tiptap-button
-        icon="format_bold"
-        [title]="t().bold"
-        [active]="state().marks.bold"
-        [disabled]="!state().can.toggleBold"
-        (onClick)="onCommand('toggleBold', $event)"
-      ></tiptap-button>
-      } @if (bubbleMenuConfig().italic) {
-      <tiptap-button
-        icon="format_italic"
-        [title]="t().italic"
-        [active]="state().marks.italic"
-        [disabled]="!state().can.toggleItalic"
-        (onClick)="onCommand('toggleItalic', $event)"
-      ></tiptap-button>
-      } @if (bubbleMenuConfig().underline) {
-      <tiptap-button
-        icon="format_underlined"
-        [title]="t().underline"
-        [active]="state().marks.underline"
-        [disabled]="!state().can.toggleUnderline"
-        (onClick)="onCommand('toggleUnderline', $event)"
-      ></tiptap-button>
-      } @if (bubbleMenuConfig().strike) {
-      <tiptap-button
-        icon="strikethrough_s"
-        [title]="t().strike"
-        [active]="state().marks.strike"
-        [disabled]="!state().can.toggleStrike"
-        (onClick)="onCommand('toggleStrike', $event)"
-      ></tiptap-button>
-      } @if (bubbleMenuConfig().code) {
-      <tiptap-button
-        icon="code"
-        [title]="t().code"
-        [active]="state().marks.code"
-        [disabled]="!state().can.toggleCode"
-        (onClick)="onCommand('toggleCode', $event)"
-      ></tiptap-button>
-      } @if (bubbleMenuConfig().superscript) {
-      <tiptap-button
-        icon="superscript"
-        [title]="t().superscript"
-        [active]="state().marks.superscript"
-        [disabled]="!state().can.toggleSuperscript"
-        (onClick)="onCommand('toggleSuperscript', $event)"
-      ></tiptap-button>
-      } @if (bubbleMenuConfig().subscript) {
-      <tiptap-button
-        icon="subscript"
-        [title]="t().subscript"
-        [active]="state().marks.subscript"
-        [disabled]="!state().can.toggleSubscript"
-        (onClick)="onCommand('toggleSubscript', $event)"
-      ></tiptap-button>
-      } @if (bubbleMenuConfig().highlight) {
-      <tiptap-button
-        icon="highlight"
-        [title]="t().highlight"
-        [active]="state().marks.highlight"
-        [disabled]="!state().can.toggleHighlight"
-        (onClick)="onCommand('toggleHighlight', $event)"
-      ></tiptap-button>
-      } @if (bubbleMenuConfig().highlightPicker) {
-      <tiptap-color-picker
-        mode="highlight"
-        [editor]="editor()"
-        [disabled]="!state().can.setHighlight"
-        [anchorToText]="true"
-      />
-      } @if (bubbleMenuConfig().textColor) {
-      <tiptap-color-picker
-        mode="text"
-        [editor]="editor()"
-        [disabled]="!state().can.setColor"
-        [anchorToText]="true"
-      />
-      } @if (bubbleMenuConfig().link) {
-      <tiptap-button
-        icon="link"
-        [title]="t().link"
-        [active]="state().marks.link"
-        [disabled]="!state().can.toggleLink"
-        (onClick)="onCommand('toggleLink', $event)"
-      ></tiptap-button>
-      }
-    </div>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: TiptapBubbleMenuComponent, isStandalone: true, selector: "tiptap-bubble-menu", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
+    <div #menuRef class="bubble-menu" (mousedown)="$event.preventDefault()">
+      @if (bubbleMenuConfig().bold) {
+      <tiptap-button
+        icon="format_bold"
+        [title]="t().bold"
+        [active]="state().marks.bold"
+        [disabled]="!state().can.toggleBold"
+        (onClick)="onCommand('toggleBold', $event)"
+      ></tiptap-button>
+      } @if (bubbleMenuConfig().italic) {
+      <tiptap-button
+        icon="format_italic"
+        [title]="t().italic"
+        [active]="state().marks.italic"
+        [disabled]="!state().can.toggleItalic"
+        (onClick)="onCommand('toggleItalic', $event)"
+      ></tiptap-button>
+      } @if (bubbleMenuConfig().underline) {
+      <tiptap-button
+        icon="format_underlined"
+        [title]="t().underline"
+        [active]="state().marks.underline"
+        [disabled]="!state().can.toggleUnderline"
+        (onClick)="onCommand('toggleUnderline', $event)"
+      ></tiptap-button>
+      } @if (bubbleMenuConfig().strike) {
+      <tiptap-button
+        icon="strikethrough_s"
+        [title]="t().strike"
+        [active]="state().marks.strike"
+        [disabled]="!state().can.toggleStrike"
+        (onClick)="onCommand('toggleStrike', $event)"
+      ></tiptap-button>
+      } @if (bubbleMenuConfig().code) {
+      <tiptap-button
+        icon="code"
+        [title]="t().code"
+        [active]="state().marks.code"
+        [disabled]="!state().can.toggleCode"
+        (onClick)="onCommand('toggleCode', $event)"
+      ></tiptap-button>
+      } @if (bubbleMenuConfig().superscript) {
+      <tiptap-button
+        icon="superscript"
+        [title]="t().superscript"
+        [active]="state().marks.superscript"
+        [disabled]="!state().can.toggleSuperscript"
+        (onClick)="onCommand('toggleSuperscript', $event)"
+      ></tiptap-button>
+      } @if (bubbleMenuConfig().subscript) {
+      <tiptap-button
+        icon="subscript"
+        [title]="t().subscript"
+        [active]="state().marks.subscript"
+        [disabled]="!state().can.toggleSubscript"
+        (onClick)="onCommand('toggleSubscript', $event)"
+      ></tiptap-button>
+      } @if (bubbleMenuConfig().highlight) {
+      <tiptap-button
+        icon="highlight"
+        [title]="t().highlight"
+        [active]="state().marks.highlight"
+        [disabled]="!state().can.toggleHighlight"
+        (onClick)="onCommand('toggleHighlight', $event)"
+      ></tiptap-button>
+      } @if (bubbleMenuConfig().highlightPicker) {
+      <tiptap-color-picker
+        mode="highlight"
+        [editor]="editor()"
+        [disabled]="!state().can.setHighlight"
+        [anchorToText]="true"
+      />
+      } @if (bubbleMenuConfig().textColor) {
+      <tiptap-color-picker
+        mode="text"
+        [editor]="editor()"
+        [disabled]="!state().can.setColor"
+        [anchorToText]="true"
+      />
+      } @if (bubbleMenuConfig().link) {
+      <tiptap-button
+        icon="link"
+        [title]="t().link"
+        [active]="state().marks.link"
+        [disabled]="!state().can.toggleLink"
+        (onClick)="onCommand('toggleLink', $event)"
+      ></tiptap-button>
+      }
+    </div>
   `, isInline: true, dependencies: [{ kind: "component", type: TiptapButtonComponent, selector: "tiptap-button", inputs: ["icon", "title", "active", "disabled", "color", "backgroundColor", "variant", "size", "iconSize"], outputs: ["onClick"] }, { kind: "component", type: TiptapColorPickerComponent, selector: "tiptap-color-picker", inputs: ["editor", "mode", "disabled", "anchorToText"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapBubbleMenuComponent, decorators: [{
@@ -3304,96 +3319,96 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
                         TiptapButtonComponent,
                         TiptapColorPickerComponent,
                     ],
-                    template: `
-    <div #menuRef class="bubble-menu" (mousedown)="$event.preventDefault()">
-      @if (bubbleMenuConfig().bold) {
-      <tiptap-button
-        icon="format_bold"
-        [title]="t().bold"
-        [active]="state().marks.bold"
-        [disabled]="!state().can.toggleBold"
-        (onClick)="onCommand('toggleBold', $event)"
-      ></tiptap-button>
-      } @if (bubbleMenuConfig().italic) {
-      <tiptap-button
-        icon="format_italic"
-        [title]="t().italic"
-        [active]="state().marks.italic"
-        [disabled]="!state().can.toggleItalic"
-        (onClick)="onCommand('toggleItalic', $event)"
-      ></tiptap-button>
-      } @if (bubbleMenuConfig().underline) {
-      <tiptap-button
-        icon="format_underlined"
-        [title]="t().underline"
-        [active]="state().marks.underline"
-        [disabled]="!state().can.toggleUnderline"
-        (onClick)="onCommand('toggleUnderline', $event)"
-      ></tiptap-button>
-      } @if (bubbleMenuConfig().strike) {
-      <tiptap-button
-        icon="strikethrough_s"
-        [title]="t().strike"
-        [active]="state().marks.strike"
-        [disabled]="!state().can.toggleStrike"
-        (onClick)="onCommand('toggleStrike', $event)"
-      ></tiptap-button>
-      } @if (bubbleMenuConfig().code) {
-      <tiptap-button
-        icon="code"
-        [title]="t().code"
-        [active]="state().marks.code"
-        [disabled]="!state().can.toggleCode"
-        (onClick)="onCommand('toggleCode', $event)"
-      ></tiptap-button>
-      } @if (bubbleMenuConfig().superscript) {
-      <tiptap-button
-        icon="superscript"
-        [title]="t().superscript"
-        [active]="state().marks.superscript"
-        [disabled]="!state().can.toggleSuperscript"
-        (onClick)="onCommand('toggleSuperscript', $event)"
-      ></tiptap-button>
-      } @if (bubbleMenuConfig().subscript) {
-      <tiptap-button
-        icon="subscript"
-        [title]="t().subscript"
-        [active]="state().marks.subscript"
-        [disabled]="!state().can.toggleSubscript"
-        (onClick)="onCommand('toggleSubscript', $event)"
-      ></tiptap-button>
-      } @if (bubbleMenuConfig().highlight) {
-      <tiptap-button
-        icon="highlight"
-        [title]="t().highlight"
-        [active]="state().marks.highlight"
-        [disabled]="!state().can.toggleHighlight"
-        (onClick)="onCommand('toggleHighlight', $event)"
-      ></tiptap-button>
-      } @if (bubbleMenuConfig().highlightPicker) {
-      <tiptap-color-picker
-        mode="highlight"
-        [editor]="editor()"
-        [disabled]="!state().can.setHighlight"
-        [anchorToText]="true"
-      />
-      } @if (bubbleMenuConfig().textColor) {
-      <tiptap-color-picker
-        mode="text"
-        [editor]="editor()"
-        [disabled]="!state().can.setColor"
-        [anchorToText]="true"
-      />
-      } @if (bubbleMenuConfig().link) {
-      <tiptap-button
-        icon="link"
-        [title]="t().link"
-        [active]="state().marks.link"
-        [disabled]="!state().can.toggleLink"
-        (onClick)="onCommand('toggleLink', $event)"
-      ></tiptap-button>
-      }
-    </div>
+                    template: `
+    <div #menuRef class="bubble-menu" (mousedown)="$event.preventDefault()">
+      @if (bubbleMenuConfig().bold) {
+      <tiptap-button
+        icon="format_bold"
+        [title]="t().bold"
+        [active]="state().marks.bold"
+        [disabled]="!state().can.toggleBold"
+        (onClick)="onCommand('toggleBold', $event)"
+      ></tiptap-button>
+      } @if (bubbleMenuConfig().italic) {
+      <tiptap-button
+        icon="format_italic"
+        [title]="t().italic"
+        [active]="state().marks.italic"
+        [disabled]="!state().can.toggleItalic"
+        (onClick)="onCommand('toggleItalic', $event)"
+      ></tiptap-button>
+      } @if (bubbleMenuConfig().underline) {
+      <tiptap-button
+        icon="format_underlined"
+        [title]="t().underline"
+        [active]="state().marks.underline"
+        [disabled]="!state().can.toggleUnderline"
+        (onClick)="onCommand('toggleUnderline', $event)"
+      ></tiptap-button>
+      } @if (bubbleMenuConfig().strike) {
+      <tiptap-button
+        icon="strikethrough_s"
+        [title]="t().strike"
+        [active]="state().marks.strike"
+        [disabled]="!state().can.toggleStrike"
+        (onClick)="onCommand('toggleStrike', $event)"
+      ></tiptap-button>
+      } @if (bubbleMenuConfig().code) {
+      <tiptap-button
+        icon="code"
+        [title]="t().code"
+        [active]="state().marks.code"
+        [disabled]="!state().can.toggleCode"
+        (onClick)="onCommand('toggleCode', $event)"
+      ></tiptap-button>
+      } @if (bubbleMenuConfig().superscript) {
+      <tiptap-button
+        icon="superscript"
+        [title]="t().superscript"
+        [active]="state().marks.superscript"
+        [disabled]="!state().can.toggleSuperscript"
+        (onClick)="onCommand('toggleSuperscript', $event)"
+      ></tiptap-button>
+      } @if (bubbleMenuConfig().subscript) {
+      <tiptap-button
+        icon="subscript"
+        [title]="t().subscript"
+        [active]="state().marks.subscript"
+        [disabled]="!state().can.toggleSubscript"
+        (onClick)="onCommand('toggleSubscript', $event)"
+      ></tiptap-button>
+      } @if (bubbleMenuConfig().highlight) {
+      <tiptap-button
+        icon="highlight"
+        [title]="t().highlight"
+        [active]="state().marks.highlight"
+        [disabled]="!state().can.toggleHighlight"
+        (onClick)="onCommand('toggleHighlight', $event)"
+      ></tiptap-button>
+      } @if (bubbleMenuConfig().highlightPicker) {
+      <tiptap-color-picker
+        mode="highlight"
+        [editor]="editor()"
+        [disabled]="!state().can.setHighlight"
+        [anchorToText]="true"
+      />
+      } @if (bubbleMenuConfig().textColor) {
+      <tiptap-color-picker
+        mode="text"
+        [editor]="editor()"
+        [disabled]="!state().can.setColor"
+        [anchorToText]="true"
+      />
+      } @if (bubbleMenuConfig().link) {
+      <tiptap-button
+        icon="link"
+        [title]="t().link"
+        [active]="state().marks.link"
+        [disabled]="!state().can.toggleLink"
+        (onClick)="onCommand('toggleLink', $event)"
+      ></tiptap-button>
+      }
+    </div>
   `,
                 }]
         }] });
@@ -3412,6 +3427,7 @@ class TiptapImageBubbleMenuComponent extends TiptapBaseBubbleMenu {
             deleteImage: true,
             separator: true,
         });
+        this.imageUpload = input({});
         this.imageBubbleMenuConfig = computed(() => ({
             changeImage: this.config().changeImage ?? true,
             resizeSmall: this.config().resizeSmall ?? true,
@@ -3493,12 +3509,7 @@ class TiptapImageBubbleMenuComponent extends TiptapBaseBubbleMenu {
             return;
         try {
             // Use dedicated method to replace an existing image
-            await this.imageService.selectAndReplaceImage(ed, {
-                quality: 0.8,
-                maxWidth: 1920,
-                maxHeight: 1080,
-                accept: "image/*",
-            });
+            await this.imageService.selectAndReplaceImage(ed, this.imageUpload());
         }
         catch (error) {
             console.error(this.i18nService.imageUpload().uploadError, error);
@@ -3511,55 +3522,55 @@ class TiptapImageBubbleMenuComponent extends TiptapBaseBubbleMenu {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapImageBubbleMenuComponent, deps: null, 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: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
-    <div #menuRef class="bubble-menu" (mousedown)="$event.preventDefault()">
-      @if (imageBubbleMenuConfig().changeImage) {
-      <tiptap-button
-        icon="drive_file_rename_outline"
-        [title]="t().changeImage"
-        (onClick)="onCommand('changeImage', $event)"
-      ></tiptap-button>
-      } @if (imageBubbleMenuConfig().separator && hasResizeButtons()) {
-      <tiptap-separator />
-      } @if (imageBubbleMenuConfig().resizeSmall) {
-      <tiptap-button
-        icon="crop_square"
-        iconSize="small"
-        [title]="t().resizeSmall"
-        (onClick)="onCommand('resizeSmall', $event)"
-      ></tiptap-button>
-      } @if (imageBubbleMenuConfig().resizeMedium) {
-      <tiptap-button
-        icon="crop_square"
-        iconSize="medium"
-        [title]="t().resizeMedium"
-        (onClick)="onCommand('resizeMedium', $event)"
-      ></tiptap-button>
-      } @if (imageBubbleMenuConfig().resizeLarge) {
-      <tiptap-button
-        icon="crop_square"
-        iconSize="large"
-        [title]="t().resizeLarge"
-        (onClick)="onCommand('resizeLarge', $event)"
-      ></tiptap-button>
-      } @if (imageBubbleMenuConfig().resizeOriginal) {
-      <tiptap-button
-        icon="photo_size_select_actual"
-        [title]="t().resizeOriginal"
-        (onClick)="onCommand('resizeOriginal', $event)"
-      ></tiptap-button>
-      } @if (imageBubbleMenuConfig().separator &&
-      imageBubbleMenuConfig().deleteImage) {
-      <tiptap-separator />
-      } @if (imageBubbleMenuConfig().deleteImage) {
-      <tiptap-button
-        icon="delete"
-        [title]="t().deleteImage"
-        variant="danger"
-        (onClick)="onCommand('deleteImage', $event)"
-      ></tiptap-button>
-      }
-    </div>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: TiptapImageBubbleMenuComponent, isStandalone: true, selector: "tiptap-image-bubble-menu", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, imageUpload: { classPropertyName: "imageUpload", publicName: "imageUpload", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
+    <div #menuRef class="bubble-menu" (mousedown)="$event.preventDefault()">
+      @if (imageBubbleMenuConfig().changeImage) {
+      <tiptap-button
+        icon="drive_file_rename_outline"
+        [title]="t().changeImage"
+        (onClick)="onCommand('changeImage', $event)"
+      ></tiptap-button>
+      } @if (imageBubbleMenuConfig().separator && hasResizeButtons()) {
+      <tiptap-separator />
+      } @if (imageBubbleMenuConfig().resizeSmall) {
+      <tiptap-button
+        icon="crop_square"
+        iconSize="small"
+        [title]="t().resizeSmall"
+        (onClick)="onCommand('resizeSmall', $event)"
+      ></tiptap-button>
+      } @if (imageBubbleMenuConfig().resizeMedium) {
+      <tiptap-button
+        icon="crop_square"
+        iconSize="medium"
+        [title]="t().resizeMedium"
+        (onClick)="onCommand('resizeMedium', $event)"
+      ></tiptap-button>
+      } @if (imageBubbleMenuConfig().resizeLarge) {
+      <tiptap-button
+        icon="crop_square"
+        iconSize="large"
+        [title]="t().resizeLarge"
+        (onClick)="onCommand('resizeLarge', $event)"
+      ></tiptap-button>
+      } @if (imageBubbleMenuConfig().resizeOriginal) {
+      <tiptap-button
+        icon="photo_size_select_actual"
+        [title]="t().resizeOriginal"
+        (onClick)="onCommand('resizeOriginal', $event)"
+      ></tiptap-button>
+      } @if (imageBubbleMenuConfig().separator &&
+      imageBubbleMenuConfig().deleteImage) {
+      <tiptap-separator />
+      } @if (imageBubbleMenuConfig().deleteImage) {
+      <tiptap-button
+        icon="delete"
+        [title]="t().deleteImage"
+        variant="danger"
+        (onClick)="onCommand('deleteImage', $event)"
+      ></tiptap-button>
+      }
+    </div>
   `, isInline: true, dependencies: [{ kind: "component", type: TiptapButtonComponent, selector: "tiptap-button", inputs: ["icon", "title", "active", "disabled", "color", "backgroundColor", "variant", "size", "iconSize"], outputs: ["onClick"] }, { kind: "component", type: TiptapSeparatorComponent, selector: "tiptap-separator", inputs: ["orientation", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapImageBubbleMenuComponent, decorators: [{
@@ -3569,55 +3580,55 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [TiptapButtonComponent, TiptapSeparatorComponent],
-                    template: `
-    <div #menuRef class="bubble-menu" (mousedown)="$event.preventDefault()">
-      @if (imageBubbleMenuConfig().changeImage) {
-      <tiptap-button
-        icon="drive_file_rename_outline"
-        [title]="t().changeImage"
-        (onClick)="onCommand('changeImage', $event)"
-      ></tiptap-button>
-      } @if (imageBubbleMenuConfig().separator && hasResizeButtons()) {
-      <tiptap-separator />
-      } @if (imageBubbleMenuConfig().resizeSmall) {
-      <tiptap-button
-        icon="crop_square"
-        iconSize="small"
-        [title]="t().resizeSmall"
-        (onClick)="onCommand('resizeSmall', $event)"
-      ></tiptap-button>
-      } @if (imageBubbleMenuConfig().resizeMedium) {
-      <tiptap-button
-        icon="crop_square"
-        iconSize="medium"
-        [title]="t().resizeMedium"
-        (onClick)="onCommand('resizeMedium', $event)"
-      ></tiptap-button>
-      } @if (imageBubbleMenuConfig().resizeLarge) {
-      <tiptap-button
-        icon="crop_square"
-        iconSize="large"
-        [title]="t().resizeLarge"
-        (onClick)="onCommand('resizeLarge', $event)"
-      ></tiptap-button>
-      } @if (imageBubbleMenuConfig().resizeOriginal) {
-      <tiptap-button
-        icon="photo_size_select_actual"
-        [title]="t().resizeOriginal"
-        (onClick)="onCommand('resizeOriginal', $event)"
-      ></tiptap-button>
-      } @if (imageBubbleMenuConfig().separator &&
-      imageBubbleMenuConfig().deleteImage) {
-      <tiptap-separator />
-      } @if (imageBubbleMenuConfig().deleteImage) {
-      <tiptap-button
-        icon="delete"
-        [title]="t().deleteImage"
-        variant="danger"
-        (onClick)="onCommand('deleteImage', $event)"
-      ></tiptap-button>
-      }
-    </div>
+                    template: `
+    <div #menuRef class="bubble-menu" (mousedown)="$event.preventDefault()">
+      @if (imageBubbleMenuConfig().changeImage) {
+      <tiptap-button
+        icon="drive_file_rename_outline"
+        [title]="t().changeImage"
+        (onClick)="onCommand('changeImage', $event)"
+      ></tiptap-button>
+      } @if (imageBubbleMenuConfig().separator && hasResizeButtons()) {
+      <tiptap-separator />
+      } @if (imageBubbleMenuConfig().resizeSmall) {
+      <tiptap-button
+        icon="crop_square"
+        iconSize="small"
+        [title]="t().resizeSmall"
+        (onClick)="onCommand('resizeSmall', $event)"
+      ></tiptap-button>
+      } @if (imageBubbleMenuConfig().resizeMedium) {
+      <tiptap-button
+        icon="crop_square"
+        iconSize="medium"
+        [title]="t().resizeMedium"
+        (onClick)="onCommand('resizeMedium', $event)"
+      ></tiptap-button>
+      } @if (imageBubbleMenuConfig().resizeLarge) {
+      <tiptap-button
+        icon="crop_square"
+        iconSize="large"
+        [title]="t().resizeLarge"
+        (onClick)="onCommand('resizeLarge', $event)"
+      ></tiptap-button>
+      } @if (imageBubbleMenuConfig().resizeOriginal) {
+      <tiptap-button
+        icon="photo_size_select_actual"
+        [title]="t().resizeOriginal"
+        (onClick)="onCommand('resizeOriginal', $event)"
+      ></tiptap-button>
+      } @if (imageBubbleMenuConfig().separator &&
+      imageBubbleMenuConfig().deleteImage) {
+      <tiptap-separator />
+      } @if (imageBubbleMenuConfig().deleteImage) {
+      <tiptap-button
+        icon="delete"
+        [title]="t().deleteImage"
+        variant="danger"
+        (onClick)="onCommand('deleteImage', $event)"
+      ></tiptap-button>
+      }
+    </div>
   `,
                 }]
         }] });
@@ -3695,94 +3706,94 @@ class TiptapTableBubbleMenuComponent extends TiptapBaseBubbleMenu {
         this.editorCommands.execute(editor, command);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapTableBubbleMenuComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: TiptapTableBubbleMenuComponent, isStandalone: true, selector: "tiptap-table-bubble-menu", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
-    <div #menuRef class="bubble-menu" (mousedown)="$event.preventDefault()">
-      <!-- Row actions -->
-      @if (config().addRowBefore !== false) {
-      <tiptap-button
-        icon="add_row_above"
-        [title]="t().addRowBefore"
-        [disabled]="!state().can.addRowBefore"
-        (onClick)="onCommand('addRowBefore', $event)"
-      ></tiptap-button>
-      } @if (config().addRowAfter !== false) {
-      <tiptap-button
-        icon="add_row_below"
-        [title]="t().addRowAfter"
-        [disabled]="!state().can.addRowAfter"
-        (onClick)="onCommand('addRowAfter', $event)"
-      ></tiptap-button>
-      } @if (config().deleteRow !== false) {
-      <tiptap-button
-        icon="delete"
-        [title]="t().deleteRow"
-        variant="danger"
-        [disabled]="!state().can.deleteRow"
-        (onClick)="onCommand('deleteRow', $event)"
-      ></tiptap-button>
-      } @if (config().separator !== false) {
-      <tiptap-separator />
-      }
-
-      <!-- Column actions -->
-      @if (config().addColumnBefore !== false) {
-      <tiptap-button
-        icon="add_column_left"
-        [title]="t().addColumnBefore"
-        [disabled]="!state().can.addColumnBefore"
-        (onClick)="onCommand('addColumnBefore', $event)"
-      ></tiptap-button>
-      } @if (config().addColumnAfter !== false) {
-      <tiptap-button
-        icon="add_column_right"
-        [title]="t().addColumnAfter"
-        [disabled]="!state().can.addColumnAfter"
-        (onClick)="onCommand('addColumnAfter', $event)"
-      ></tiptap-button>
-      } @if (config().deleteColumn !== false) {
-      <tiptap-button
-        icon="delete"
-        [title]="t().deleteColumn"
-        variant="danger"
-        [disabled]="!state().can.deleteColumn"
-        (onClick)="onCommand('deleteColumn', $event)"
-      ></tiptap-button>
-      } @if (config().separator !== false) {
-      <tiptap-separator />
-      }
-
-      <!-- Cell actions -->
-      @if (config().toggleHeaderRow !== false) {
-      <tiptap-button
-        icon="toolbar"
-        [title]="t().toggleHeaderRow"
-        [active]="state().nodes.isTableHeaderRow"
-        [disabled]="!state().can.toggleHeaderRow"
-        (onClick)="onCommand('toggleHeaderRow', $event)"
-      ></tiptap-button>
-      } @if (config().toggleHeaderColumn !== false) {
-      <tiptap-button
-        icon="dock_to_right"
-        [title]="t().toggleHeaderColumn"
-        [active]="state().nodes.isTableHeaderColumn"
-        [disabled]="!state().can.toggleHeaderColumn"
-        (onClick)="onCommand('toggleHeaderColumn', $event)"
-      ></tiptap-button>
-      } @if (config().separator !== false && config().deleteTable !== false) {
-      <tiptap-separator />
-      }
-
-      <!-- Table actions -->
-      @if (config().deleteTable !== false) {
-      <tiptap-button
-        icon="delete_forever"
-        [title]="t().deleteTable"
-        variant="danger"
-        [disabled]="!state().can.deleteTable"
-        (onClick)="onCommand('deleteTable', $event)"
-      ></tiptap-button>
-      }
-    </div>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: TiptapTableBubbleMenuComponent, isStandalone: true, selector: "tiptap-table-bubble-menu", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
+    <div #menuRef class="bubble-menu" (mousedown)="$event.preventDefault()">
+      <!-- Row actions -->
+      @if (config().addRowBefore !== false) {
+      <tiptap-button
+        icon="add_row_above"
+        [title]="t().addRowBefore"
+        [disabled]="!state().can.addRowBefore"
+        (onClick)="onCommand('addRowBefore', $event)"
+      ></tiptap-button>
+      } @if (config().addRowAfter !== false) {
+      <tiptap-button
+        icon="add_row_below"
+        [title]="t().addRowAfter"
+        [disabled]="!state().can.addRowAfter"
+        (onClick)="onCommand('addRowAfter', $event)"
+      ></tiptap-button>
+      } @if (config().deleteRow !== false) {
+      <tiptap-button
+        icon="delete"
+        [title]="t().deleteRow"
+        variant="danger"
+        [disabled]="!state().can.deleteRow"
+        (onClick)="onCommand('deleteRow', $event)"
+      ></tiptap-button>
+      } @if (config().separator !== false) {
+      <tiptap-separator />
+      }
+
+      <!-- Column actions -->
+      @if (config().addColumnBefore !== false) {
+      <tiptap-button
+        icon="add_column_left"
+        [title]="t().addColumnBefore"
+        [disabled]="!state().can.addColumnBefore"
+        (onClick)="onCommand('addColumnBefore', $event)"
+      ></tiptap-button>
+      } @if (config().addColumnAfter !== false) {
+      <tiptap-button
+        icon="add_column_right"
+        [title]="t().addColumnAfter"
+        [disabled]="!state().can.addColumnAfter"
+        (onClick)="onCommand('addColumnAfter', $event)"
+      ></tiptap-button>
+      } @if (config().deleteColumn !== false) {
+      <tiptap-button
+        icon="delete"
+        [title]="t().deleteColumn"
+        variant="danger"
+        [disabled]="!state().can.deleteColumn"
+        (onClick)="onCommand('deleteColumn', $event)"
+      ></tiptap-button>
+      } @if (config().separator !== false) {
+      <tiptap-separator />
+      }
+
+      <!-- Cell actions -->
+      @if (config().toggleHeaderRow !== false) {
+      <tiptap-button
+        icon="toolbar"
+        [title]="t().toggleHeaderRow"
+        [active]="state().nodes.isTableHeaderRow"
+        [disabled]="!state().can.toggleHeaderRow"
+        (onClick)="onCommand('toggleHeaderRow', $event)"
+      ></tiptap-button>
+      } @if (config().toggleHeaderColumn !== false) {
+      <tiptap-button
+        icon="dock_to_right"
+        [title]="t().toggleHeaderColumn"
+        [active]="state().nodes.isTableHeaderColumn"
+        [disabled]="!state().can.toggleHeaderColumn"
+        (onClick)="onCommand('toggleHeaderColumn', $event)"
+      ></tiptap-button>
+      } @if (config().separator !== false && config().deleteTable !== false) {
+      <tiptap-separator />
+      }
+
+      <!-- Table actions -->
+      @if (config().deleteTable !== false) {
+      <tiptap-button
+        icon="delete_forever"
+        [title]="t().deleteTable"
+        variant="danger"
+        [disabled]="!state().can.deleteTable"
+        (onClick)="onCommand('deleteTable', $event)"
+      ></tiptap-button>
+      }
+    </div>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: TiptapButtonComponent, selector: "tiptap-button", inputs: ["icon", "title", "active", "disabled", "color", "backgroundColor", "variant", "size", "iconSize"], outputs: ["onClick"] }, { kind: "component", type: TiptapSeparatorComponent, selector: "tiptap-separator", inputs: ["orientation", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapTableBubbleMenuComponent, decorators: [{
@@ -3792,94 +3803,94 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [CommonModule, TiptapButtonComponent, TiptapSeparatorComponent],
-                    template: `
-    <div #menuRef class="bubble-menu" (mousedown)="$event.preventDefault()">
-      <!-- Row actions -->
-      @if (config().addRowBefore !== false) {
-      <tiptap-button
-        icon="add_row_above"
-        [title]="t().addRowBefore"
-        [disabled]="!state().can.addRowBefore"
-        (onClick)="onCommand('addRowBefore', $event)"
-      ></tiptap-button>
-      } @if (config().addRowAfter !== false) {
-      <tiptap-button
-        icon="add_row_below"
-        [title]="t().addRowAfter"
-        [disabled]="!state().can.addRowAfter"
-        (onClick)="onCommand('addRowAfter', $event)"
-      ></tiptap-button>
-      } @if (config().deleteRow !== false) {
-      <tiptap-button
-        icon="delete"
-        [title]="t().deleteRow"
-        variant="danger"
-        [disabled]="!state().can.deleteRow"
-        (onClick)="onCommand('deleteRow', $event)"
-      ></tiptap-button>
-      } @if (config().separator !== false) {
-      <tiptap-separator />
-      }
-
-      <!-- Column actions -->
-      @if (config().addColumnBefore !== false) {
-      <tiptap-button
-        icon="add_column_left"
-        [title]="t().addColumnBefore"
-        [disabled]="!state().can.addColumnBefore"
-        (onClick)="onCommand('addColumnBefore', $event)"
-      ></tiptap-button>
-      } @if (config().addColumnAfter !== false) {
-      <tiptap-button
-        icon="add_column_right"
-        [title]="t().addColumnAfter"
-        [disabled]="!state().can.addColumnAfter"
-        (onClick)="onCommand('addColumnAfter', $event)"
-      ></tiptap-button>
-      } @if (config().deleteColumn !== false) {
-      <tiptap-button
-        icon="delete"
-        [title]="t().deleteColumn"
-        variant="danger"
-        [disabled]="!state().can.deleteColumn"
-        (onClick)="onCommand('deleteColumn', $event)"
-      ></tiptap-button>
-      } @if (config().separator !== false) {
-      <tiptap-separator />
-      }
-
-      <!-- Cell actions -->
-      @if (config().toggleHeaderRow !== false) {
-      <tiptap-button
-        icon="toolbar"
-        [title]="t().toggleHeaderRow"
-        [active]="state().nodes.isTableHeaderRow"
-        [disabled]="!state().can.toggleHeaderRow"
-        (onClick)="onCommand('toggleHeaderRow', $event)"
-      ></tiptap-button>
-      } @if (config().toggleHeaderColumn !== false) {
-      <tiptap-button
-        icon="dock_to_right"
-        [title]="t().toggleHeaderColumn"
-        [active]="state().nodes.isTableHeaderColumn"
-        [disabled]="!state().can.toggleHeaderColumn"
-        (onClick)="onCommand('toggleHeaderColumn', $event)"
-      ></tiptap-button>
-      } @if (config().separator !== false && config().deleteTable !== false) {
-      <tiptap-separator />
-      }
-
-      <!-- Table actions -->
-      @if (config().deleteTable !== false) {
-      <tiptap-button
-        icon="delete_forever"
-        [title]="t().deleteTable"
-        variant="danger"
-        [disabled]="!state().can.deleteTable"
-        (onClick)="onCommand('deleteTable', $event)"
-      ></tiptap-button>
-      }
-    </div>
+                    template: `
+    <div #menuRef class="bubble-menu" (mousedown)="$event.preventDefault()">
+      <!-- Row actions -->
+      @if (config().addRowBefore !== false) {
+      <tiptap-button
+        icon="add_row_above"
+        [title]="t().addRowBefore"
+        [disabled]="!state().can.addRowBefore"
+        (onClick)="onCommand('addRowBefore', $event)"
+      ></tiptap-button>
+      } @if (config().addRowAfter !== false) {
+      <tiptap-button
+        icon="add_row_below"
+        [title]="t().addRowAfter"
+        [disabled]="!state().can.addRowAfter"
+        (onClick)="onCommand('addRowAfter', $event)"
+      ></tiptap-button>
+      } @if (config().deleteRow !== false) {
+      <tiptap-button
+        icon="delete"
+        [title]="t().deleteRow"
+        variant="danger"
+        [disabled]="!state().can.deleteRow"
+        (onClick)="onCommand('deleteRow', $event)"
+      ></tiptap-button>
+      } @if (config().separator !== false) {
+      <tiptap-separator />
+      }
+
+      <!-- Column actions -->
+      @if (config().addColumnBefore !== false) {
+      <tiptap-button
+        icon="add_column_left"
+        [title]="t().addColumnBefore"
+        [disabled]="!state().can.addColumnBefore"
+        (onClick)="onCommand('addColumnBefore', $event)"
+      ></tiptap-button>
+      } @if (config().addColumnAfter !== false) {
+      <tiptap-button
+        icon="add_column_right"
+        [title]="t().addColumnAfter"
+        [disabled]="!state().can.addColumnAfter"
+        (onClick)="onCommand('addColumnAfter', $event)"
+      ></tiptap-button>
+      } @if (config().deleteColumn !== false) {
+      <tiptap-button
+        icon="delete"
+        [title]="t().deleteColumn"
+        variant="danger"
+        [disabled]="!state().can.deleteColumn"
+        (onClick)="onCommand('deleteColumn', $event)"
+      ></tiptap-button>
+      } @if (config().separator !== false) {
+      <tiptap-separator />
+      }
+
+      <!-- Cell actions -->
+      @if (config().toggleHeaderRow !== false) {
+      <tiptap-button
+        icon="toolbar"
+        [title]="t().toggleHeaderRow"
+        [active]="state().nodes.isTableHeaderRow"
+        [disabled]="!state().can.toggleHeaderRow"
+        (onClick)="onCommand('toggleHeaderRow', $event)"
+      ></tiptap-button>
+      } @if (config().toggleHeaderColumn !== false) {
+      <tiptap-button
+        icon="dock_to_right"
+        [title]="t().toggleHeaderColumn"
+        [active]="state().nodes.isTableHeaderColumn"
+        [disabled]="!state().can.toggleHeaderColumn"
+        (onClick)="onCommand('toggleHeaderColumn', $event)"
+      ></tiptap-button>
+      } @if (config().separator !== false && config().deleteTable !== false) {
+      <tiptap-separator />
+      }
+
+      <!-- Table actions -->
+      @if (config().deleteTable !== false) {
+      <tiptap-button
+        icon="delete_forever"
+        [title]="t().deleteTable"
+        variant="danger"
+        [disabled]="!state().can.deleteTable"
+        (onClick)="onCommand('deleteTable', $event)"
+      ></tiptap-button>
+      }
+    </div>
   `,
                 }]
         }] });
@@ -3952,25 +3963,25 @@ class TiptapCellBubbleMenuComponent extends TiptapBaseBubbleMenu {
         this.editorCommands.execute(editor, command);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapCellBubbleMenuComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: TiptapCellBubbleMenuComponent, isStandalone: true, selector: "tiptap-cell-bubble-menu", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
-    <div #menuRef class="bubble-menu" (mousedown)="$event.preventDefault()">
-      <!-- Cell specific actions -->
-      @if (config().mergeCells !== false && !state().selection.isSingleCell) {
-      <tiptap-button
-        icon="cell_merge"
-        [title]="i18n().table().mergeCells"
-        [disabled]="!state().can.mergeCells"
-        (onClick)="onCommand('mergeCells', $event)"
-      ></tiptap-button>
-      } @if (config().splitCell !== false && state().selection.isSingleCell) {
-      <tiptap-button
-        icon="split_scene"
-        [title]="i18n().table().splitCell"
-        [disabled]="!state().can.splitCell"
-        (onClick)="onCommand('splitCell', $event)"
-      ></tiptap-button>
-      }
-    </div>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: TiptapCellBubbleMenuComponent, isStandalone: true, selector: "tiptap-cell-bubble-menu", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
+    <div #menuRef class="bubble-menu" (mousedown)="$event.preventDefault()">
+      <!-- Cell specific actions -->
+      @if (config().mergeCells !== false && !state().selection.isSingleCell) {
+      <tiptap-button
+        icon="cell_merge"
+        [title]="i18n().table().mergeCells"
+        [disabled]="!state().can.mergeCells"
+        (onClick)="onCommand('mergeCells', $event)"
+      ></tiptap-button>
+      } @if (config().splitCell !== false && state().selection.isSingleCell) {
+      <tiptap-button
+        icon="split_scene"
+        [title]="i18n().table().splitCell"
+        [disabled]="!state().can.splitCell"
+        (onClick)="onCommand('splitCell', $event)"
+      ></tiptap-button>
+      }
+    </div>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: TiptapButtonComponent, selector: "tiptap-button", inputs: ["icon", "title", "active", "disabled", "color", "backgroundColor", "variant", "size", "iconSize"], outputs: ["onClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapCellBubbleMenuComponent, decorators: [{
@@ -3980,25 +3991,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [CommonModule, TiptapButtonComponent],
-                    template: `
-    <div #menuRef class="bubble-menu" (mousedown)="$event.preventDefault()">
-      <!-- Cell specific actions -->
-      @if (config().mergeCells !== false && !state().selection.isSingleCell) {
-      <tiptap-button
-        icon="cell_merge"
-        [title]="i18n().table().mergeCells"
-        [disabled]="!state().can.mergeCells"
-        (onClick)="onCommand('mergeCells', $event)"
-      ></tiptap-button>
-      } @if (config().splitCell !== false && state().selection.isSingleCell) {
-      <tiptap-button
-        icon="split_scene"
-        [title]="i18n().table().splitCell"
-        [disabled]="!state().can.splitCell"
-        (onClick)="onCommand('splitCell', $event)"
-      ></tiptap-button>
-      }
-    </div>
+                    template: `
+    <div #menuRef class="bubble-menu" (mousedown)="$event.preventDefault()">
+      <!-- Cell specific actions -->
+      @if (config().mergeCells !== false && !state().selection.isSingleCell) {
+      <tiptap-button
+        icon="cell_merge"
+        [title]="i18n().table().mergeCells"
+        [disabled]="!state().can.mergeCells"
+        (onClick)="onCommand('mergeCells', $event)"
+      ></tiptap-button>
+      } @if (config().splitCell !== false && state().selection.isSingleCell) {
+      <tiptap-button
+        icon="split_scene"
+        [title]="i18n().table().splitCell"
+        [disabled]="!state().can.splitCell"
+        (onClick)="onCommand('splitCell', $event)"
+      ></tiptap-button>
+      }
+    </div>
   `,
                 }]
         }] });
@@ -4214,108 +4225,108 @@ class TiptapLinkBubbleMenuComponent {
         this.hideTippy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapLinkBubbleMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.0", type: TiptapLinkBubbleMenuComponent, isStandalone: true, selector: "tiptap-link-bubble-menu", inputs: { editor: { classPropertyName: "editor", publicName: "editor", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "linkInput", first: true, predicate: ["linkInput"], descendants: true }, { propertyName: "menuRef", first: true, predicate: ["menuRef"], descendants: true }], ngImport: i0, template: `
-    <div 
-      #menuRef 
-      class="bubble-menu"
-      (mousedown)="onMouseDown($event)"
-      (click)="$event.stopPropagation()"
-    >
-      <div class="link-input-row">
-        <div class="url-input-container">
-          <span class="material-symbols-outlined icon-link">link</span>
-          <input
-            #linkInput
-            type="text"
-            class="url-field"
-            [placeholder]="t().linkUrl"
-            [ngModel]="editUrl()"
-            (ngModelChange)="editUrl.set($event)"
-            (focus)="onFocus()"
-            (blur)="onBlur()"
-            (keydown.enter)="onApply($event)"
-            (keydown.escape)="onCancel($event)"
-          />
-        </div>
-
-        <div class="action-buttons">
-          <tiptap-button
-            icon="check"
-            [title]="common().apply"
-            color="var(--ate-primary)"
-            [disabled]="!editUrl().trim()"
-            (onClick)="onApply($event)"
-          ></tiptap-button>
-          <tiptap-button
-            icon="open_in_new"
-            [title]="t().openLink"
-            [disabled]="!currentUrl()"
-            (onClick)="onOpenLink($event)"
-          ></tiptap-button>
-          <tiptap-separator />
-          <tiptap-button
-            icon="link_off"
-            [title]="t().removeLink"
-            variant="danger"
-            [disabled]="!currentUrl()"
-            (onClick)="onRemove($event)"
-          ></tiptap-button>
-        </div>
-      </div>
-    </div>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.0", type: TiptapLinkBubbleMenuComponent, isStandalone: true, selector: "tiptap-link-bubble-menu", inputs: { editor: { classPropertyName: "editor", publicName: "editor", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "linkInput", first: true, predicate: ["linkInput"], descendants: true }, { propertyName: "menuRef", first: true, predicate: ["menuRef"], descendants: true }], ngImport: i0, template: `
+    <div 
+      #menuRef 
+      class="bubble-menu"
+      (mousedown)="onMouseDown($event)"
+      (click)="$event.stopPropagation()"
+    >
+      <div class="link-input-row">
+        <div class="url-input-container">
+          <span class="material-symbols-outlined icon-link">link</span>
+          <input
+            #linkInput
+            type="text"
+            class="url-field"
+            [placeholder]="t().linkUrl"
+            [ngModel]="editUrl()"
+            (ngModelChange)="editUrl.set($event)"
+            (focus)="onFocus()"
+            (blur)="onBlur()"
+            (keydown.enter)="onApply($event)"
+            (keydown.escape)="onCancel($event)"
+          />
+        </div>
+
+        <div class="action-buttons">
+          <tiptap-button
+            icon="check"
+            [title]="common().apply"
+            color="var(--ate-primary)"
+            [disabled]="!editUrl().trim()"
+            (onClick)="onApply($event)"
+          ></tiptap-button>
+          <tiptap-button
+            icon="open_in_new"
+            [title]="t().openLink"
+            [disabled]="!currentUrl()"
+            (onClick)="onOpenLink($event)"
+          ></tiptap-button>
+          <tiptap-separator />
+          <tiptap-button
+            icon="link_off"
+            [title]="t().removeLink"
+            variant="danger"
+            [disabled]="!currentUrl()"
+            (onClick)="onRemove($event)"
+          ></tiptap-button>
+        </div>
+      </div>
+    </div>
   `, isInline: true, styles: [".link-input-row{display:flex;align-items:center;gap:6px}.url-input-container{flex:1;display:flex;align-items:center;background:var(--ate-surface-secondary, #f8fafc);border:1px solid var(--ate-border, #e2e8f0);border-radius:8px;padding:0 10px;height:32px;transition:all .15s ease}.url-input-container:focus-within{border-color:var(--ate-primary, #3b82f6);background:var(--ate-surface, #ffffff);box-shadow:0 0 0 2px var(--ate-primary-light, rgba(59, 130, 246, .1))}.icon-link{font-size:16px;color:var(--ate-text-muted, #94a3b8);margin-right:6px}.url-field{background:transparent;border:none;outline:none;color:var(--ate-text, #1e293b);font-size:13px;width:100%;font-family:inherit}.action-buttons{display:flex;align-items:center;gap:2px}\n"], dependencies: [{ kind: "component", type: TiptapButtonComponent, selector: "tiptap-button", inputs: ["icon", "title", "active", "disabled", "color", "backgroundColor", "variant", "size", "iconSize"], outputs: ["onClick"] }, { kind: "component", type: TiptapSeparatorComponent, selector: "tiptap-separator", inputs: ["orientation", "size"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapLinkBubbleMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: "tiptap-link-bubble-menu", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [TiptapButtonComponent, TiptapSeparatorComponent, FormsModule], template: `
-    <div 
-      #menuRef 
-      class="bubble-menu"
-      (mousedown)="onMouseDown($event)"
-      (click)="$event.stopPropagation()"
-    >
-      <div class="link-input-row">
-        <div class="url-input-container">
-          <span class="material-symbols-outlined icon-link">link</span>
-          <input
-            #linkInput
-            type="text"
-            class="url-field"
-            [placeholder]="t().linkUrl"
-            [ngModel]="editUrl()"
-            (ngModelChange)="editUrl.set($event)"
-            (focus)="onFocus()"
-            (blur)="onBlur()"
-            (keydown.enter)="onApply($event)"
-            (keydown.escape)="onCancel($event)"
-          />
-        </div>
-
-        <div class="action-buttons">
-          <tiptap-button
-            icon="check"
-            [title]="common().apply"
-            color="var(--ate-primary)"
-            [disabled]="!editUrl().trim()"
-            (onClick)="onApply($event)"
-          ></tiptap-button>
-          <tiptap-button
-            icon="open_in_new"
-            [title]="t().openLink"
-            [disabled]="!currentUrl()"
-            (onClick)="onOpenLink($event)"
-          ></tiptap-button>
-          <tiptap-separator />
-          <tiptap-button
-            icon="link_off"
-            [title]="t().removeLink"
-            variant="danger"
-            [disabled]="!currentUrl()"
-            (onClick)="onRemove($event)"
-          ></tiptap-button>
-        </div>
-      </div>
-    </div>
+            args: [{ selector: "tiptap-link-bubble-menu", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [TiptapButtonComponent, TiptapSeparatorComponent, FormsModule], template: `
+    <div 
+      #menuRef 
+      class="bubble-menu"
+      (mousedown)="onMouseDown($event)"
+      (click)="$event.stopPropagation()"
+    >
+      <div class="link-input-row">
+        <div class="url-input-container">
+          <span class="material-symbols-outlined icon-link">link</span>
+          <input
+            #linkInput
+            type="text"
+            class="url-field"
+            [placeholder]="t().linkUrl"
+            [ngModel]="editUrl()"
+            (ngModelChange)="editUrl.set($event)"
+            (focus)="onFocus()"
+            (blur)="onBlur()"
+            (keydown.enter)="onApply($event)"
+            (keydown.escape)="onCancel($event)"
+          />
+        </div>
+
+        <div class="action-buttons">
+          <tiptap-button
+            icon="check"
+            [title]="common().apply"
+            color="var(--ate-primary)"
+            [disabled]="!editUrl().trim()"
+            (onClick)="onApply($event)"
+          ></tiptap-button>
+          <tiptap-button
+            icon="open_in_new"
+            [title]="t().openLink"
+            [disabled]="!currentUrl()"
+            (onClick)="onOpenLink($event)"
+          ></tiptap-button>
+          <tiptap-separator />
+          <tiptap-button
+            icon="link_off"
+            [title]="t().removeLink"
+            variant="danger"
+            [disabled]="!currentUrl()"
+            (onClick)="onRemove($event)"
+          ></tiptap-button>
+        </div>
+      </div>
+    </div>
   `, styles: [".link-input-row{display:flex;align-items:center;gap:6px}.url-input-container{flex:1;display:flex;align-items:center;background:var(--ate-surface-secondary, #f8fafc);border:1px solid var(--ate-border, #e2e8f0);border-radius:8px;padding:0 10px;height:32px;transition:all .15s ease}.url-input-container:focus-within{border-color:var(--ate-primary, #3b82f6);background:var(--ate-surface, #ffffff);box-shadow:0 0 0 2px var(--ate-primary-light, rgba(59, 130, 246, .1))}.icon-link{font-size:16px;color:var(--ate-text-muted, #94a3b8);margin-right:6px}.url-field{background:transparent;border:none;outline:none;color:var(--ate-text, #1e293b);font-size:13px;width:100%;font-family:inherit}.action-buttons{display:flex;align-items:center;gap:2px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { linkInput: [{
                 type: ViewChild,
@@ -4576,174 +4587,174 @@ class TiptapColorBubbleMenuComponent {
         }, 150);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapColorBubbleMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: TiptapColorBubbleMenuComponent, isStandalone: true, selector: "tiptap-color-bubble-menu", inputs: { editor: { classPropertyName: "editor", publicName: "editor", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "colorInputRef", first: true, predicate: ["colorInput"], descendants: true, isSignal: true }, { propertyName: "menuRef", first: true, predicate: ["menuRef"], descendants: true }], ngImport: i0, template: `
-    <div 
-      #menuRef 
-      class="bubble-menu color-bubble-menu"
-      (mousedown)="onMouseDown($event)"
-      (click)="$event.stopPropagation()"
-    >
-      <div class="color-picker-container">
-        <div class="dropdown-row presets">
-          <div class="color-grid">
-            @for (color of presets; track color) {
-              <tiptap-button 
-                class="color-swatch-btn" 
-                size="small"
-                [title]="color"
-                [active]="isColorActive(color)"
-                [backgroundColor]="color"
-                (onClick)="applyColor(color, true, $event)"
-              ></tiptap-button>
-            }
-          </div>
-        </div>
-
-        <div class="dropdown-row controls">
-          <div class="hex-input-wrapper">
-            <span class="hex-hash">#</span>
-            <input 
-              #hexInput
-              type="text" 
-              class="hex-input" 
-              [value]="hexValue()"
-              [attr.aria-label]="t().customColor"
-              (input)="onHexInput($event)"
-              (change)="onHexChange($event)"
-              (keydown.enter)="onApply($event)"
-              (focus)="onFocus()"
-              (blur)="onBlur()"
-              maxlength="6"
-              placeholder="000000"
-            />
-          </div>
-          
-          <div class="native-trigger-wrapper">
-            <tiptap-button 
-              class="btn-native-picker-trigger" 
-              icon="colorize"
-              [title]="t().customColor"
-              [backgroundColor]="currentColor()"
-              (onClick)="triggerNativePicker($event)" 
-            ></tiptap-button>
-            <input
-              #colorInput
-              type="color"
-              class="hidden-native-input"
-              [value]="currentColor()"
-              [attr.aria-label]="t().customColor"
-              (input)="onNativeInput($event)"
-              (change)="onNativeChange($event)"
-              (focus)="onFocus()"
-              (blur)="onBlur()"
-            />
-          </div>
-
-          <tiptap-button 
-            icon="check"
-            [title]="common().apply"
-            color="var(--ate-primary)"
-            (onClick)="onApply($event)"
-          ></tiptap-button>
-
-          <tiptap-separator />
-
-          <tiptap-button 
-            icon="format_color_reset"
-            [title]="t().clear"
-            variant="danger"
-            (onClick)="onClearColor($event)" 
-          ></tiptap-button>
-        </div>
-
-      </div>
-    </div>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: TiptapColorBubbleMenuComponent, isStandalone: true, selector: "tiptap-color-bubble-menu", inputs: { editor: { classPropertyName: "editor", publicName: "editor", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "colorInputRef", first: true, predicate: ["colorInput"], descendants: true, isSignal: true }, { propertyName: "menuRef", first: true, predicate: ["menuRef"], descendants: true }], ngImport: i0, template: `
+    <div 
+      #menuRef 
+      class="bubble-menu color-bubble-menu"
+      (mousedown)="onMouseDown($event)"
+      (click)="$event.stopPropagation()"
+    >
+      <div class="color-picker-container">
+        <div class="dropdown-row presets">
+          <div class="color-grid">
+            @for (color of presets; track color) {
+              <tiptap-button 
+                class="color-swatch-btn" 
+                size="small"
+                [title]="color"
+                [active]="isColorActive(color)"
+                [backgroundColor]="color"
+                (onClick)="applyColor(color, true, $event)"
+              ></tiptap-button>
+            }
+          </div>
+        </div>
+
+        <div class="dropdown-row controls">
+          <div class="hex-input-wrapper">
+            <span class="hex-hash">#</span>
+            <input 
+              #hexInput
+              type="text" 
+              class="hex-input" 
+              [value]="hexValue()"
+              [attr.aria-label]="t().customColor"
+              (input)="onHexInput($event)"
+              (change)="onHexChange($event)"
+              (keydown.enter)="onApply($event)"
+              (focus)="onFocus()"
+              (blur)="onBlur()"
+              maxlength="6"
+              placeholder="000000"
+            />
+          </div>
+          
+          <div class="native-trigger-wrapper">
+            <tiptap-button 
+              class="btn-native-picker-trigger" 
+              icon="colorize"
+              [title]="t().customColor"
+              [backgroundColor]="currentColor()"
+              (onClick)="triggerNativePicker($event)" 
+            ></tiptap-button>
+            <input
+              #colorInput
+              type="color"
+              class="hidden-native-input"
+              [value]="currentColor()"
+              [attr.aria-label]="t().customColor"
+              (input)="onNativeInput($event)"
+              (change)="onNativeChange($event)"
+              (focus)="onFocus()"
+              (blur)="onBlur()"
+            />
+          </div>
+
+          <tiptap-button 
+            icon="check"
+            [title]="common().apply"
+            color="var(--ate-primary)"
+            (onClick)="onApply($event)"
+          ></tiptap-button>
+
+          <tiptap-separator />
+
+          <tiptap-button 
+            icon="format_color_reset"
+            [title]="t().clear"
+            variant="danger"
+            (onClick)="onClearColor($event)" 
+          ></tiptap-button>
+        </div>
+
+      </div>
+    </div>
   `, isInline: true, styles: [".color-picker-container{display:flex;flex-direction:column;gap:8px}.dropdown-row{display:flex;align-items:center;width:100%}.dropdown-row.presets{justify-content:center}.dropdown-row.controls{gap:8px;justify-content:space-between;padding-top:4px;border-top:1px solid var(--ate-border, #e2e8f0)}.color-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:4px;width:100%}:host ::ng-deep .color-swatch-btn .tiptap-button{width:100%;aspect-ratio:1;height:auto;border-radius:4px;border:1px solid rgba(0,0,0,.1);padding:0}:host ::ng-deep .color-swatch-btn .tiptap-button.is-active{border-color:var(--ate-primary, #3b82f6);box-shadow:0 0 0 2px #3b82f64d}:host ::ng-deep .btn-native-picker-trigger .tiptap-button{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.2)}.divider-v{width:1px;height:24px;background:var(--ate-border, #e2e8f0)}.hex-input-wrapper{flex:1;display:flex;align-items:center;background:var(--ate-surface-secondary, #f8fafc);border:1px solid var(--ate-border, #e2e8f0);border-radius:8px;padding:0 10px;height:32px;transition:border-color .15s ease}.hex-input-wrapper:focus-within{border-color:var(--ate-primary, #3b82f6);background:var(--ate-menu-bg, #ffffff)}.hex-hash{color:var(--ate-text-muted, #94a3b8);font-family:monospace;font-size:.875rem}.hex-input{background:transparent;border:none;outline:none;color:var(--ate-text, #1e293b);font-family:monospace;font-size:.875rem;width:100%;padding-left:4px}.native-trigger-wrapper{position:relative;width:32px;height:32px}.hidden-native-input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: TiptapButtonComponent, selector: "tiptap-button", inputs: ["icon", "title", "active", "disabled", "color", "backgroundColor", "variant", "size", "iconSize"], outputs: ["onClick"] }, { kind: "component", type: TiptapSeparatorComponent, selector: "tiptap-separator", inputs: ["orientation", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapColorBubbleMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: "tiptap-color-bubble-menu", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, FormsModule, TiptapButtonComponent, TiptapSeparatorComponent], template: `
-    <div 
-      #menuRef 
-      class="bubble-menu color-bubble-menu"
-      (mousedown)="onMouseDown($event)"
-      (click)="$event.stopPropagation()"
-    >
-      <div class="color-picker-container">
-        <div class="dropdown-row presets">
-          <div class="color-grid">
-            @for (color of presets; track color) {
-              <tiptap-button 
-                class="color-swatch-btn" 
-                size="small"
-                [title]="color"
-                [active]="isColorActive(color)"
-                [backgroundColor]="color"
-                (onClick)="applyColor(color, true, $event)"
-              ></tiptap-button>
-            }
-          </div>
-        </div>
-
-        <div class="dropdown-row controls">
-          <div class="hex-input-wrapper">
-            <span class="hex-hash">#</span>
-            <input 
-              #hexInput
-              type="text" 
-              class="hex-input" 
-              [value]="hexValue()"
-              [attr.aria-label]="t().customColor"
-              (input)="onHexInput($event)"
-              (change)="onHexChange($event)"
-              (keydown.enter)="onApply($event)"
-              (focus)="onFocus()"
-              (blur)="onBlur()"
-              maxlength="6"
-              placeholder="000000"
-            />
-          </div>
-          
-          <div class="native-trigger-wrapper">
-            <tiptap-button 
-              class="btn-native-picker-trigger" 
-              icon="colorize"
-              [title]="t().customColor"
-              [backgroundColor]="currentColor()"
-              (onClick)="triggerNativePicker($event)" 
-            ></tiptap-button>
-            <input
-              #colorInput
-              type="color"
-              class="hidden-native-input"
-              [value]="currentColor()"
-              [attr.aria-label]="t().customColor"
-              (input)="onNativeInput($event)"
-              (change)="onNativeChange($event)"
-              (focus)="onFocus()"
-              (blur)="onBlur()"
-            />
-          </div>
-
-          <tiptap-button 
-            icon="check"
-            [title]="common().apply"
-            color="var(--ate-primary)"
-            (onClick)="onApply($event)"
-          ></tiptap-button>
-
-          <tiptap-separator />
-
-          <tiptap-button 
-            icon="format_color_reset"
-            [title]="t().clear"
-            variant="danger"
-            (onClick)="onClearColor($event)" 
-          ></tiptap-button>
-        </div>
-
-      </div>
-    </div>
+            args: [{ selector: "tiptap-color-bubble-menu", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, FormsModule, TiptapButtonComponent, TiptapSeparatorComponent], template: `
+    <div 
+      #menuRef 
+      class="bubble-menu color-bubble-menu"
+      (mousedown)="onMouseDown($event)"
+      (click)="$event.stopPropagation()"
+    >
+      <div class="color-picker-container">
+        <div class="dropdown-row presets">
+          <div class="color-grid">
+            @for (color of presets; track color) {
+              <tiptap-button 
+                class="color-swatch-btn" 
+                size="small"
+                [title]="color"
+                [active]="isColorActive(color)"
+                [backgroundColor]="color"
+                (onClick)="applyColor(color, true, $event)"
+              ></tiptap-button>
+            }
+          </div>
+        </div>
+
+        <div class="dropdown-row controls">
+          <div class="hex-input-wrapper">
+            <span class="hex-hash">#</span>
+            <input 
+              #hexInput
+              type="text" 
+              class="hex-input" 
+              [value]="hexValue()"
+              [attr.aria-label]="t().customColor"
+              (input)="onHexInput($event)"
+              (change)="onHexChange($event)"
+              (keydown.enter)="onApply($event)"
+              (focus)="onFocus()"
+              (blur)="onBlur()"
+              maxlength="6"
+              placeholder="000000"
+            />
+          </div>
+          
+          <div class="native-trigger-wrapper">
+            <tiptap-button 
+              class="btn-native-picker-trigger" 
+              icon="colorize"
+              [title]="t().customColor"
+              [backgroundColor]="currentColor()"
+              (onClick)="triggerNativePicker($event)" 
+            ></tiptap-button>
+            <input
+              #colorInput
+              type="color"
+              class="hidden-native-input"
+              [value]="currentColor()"
+              [attr.aria-label]="t().customColor"
+              (input)="onNativeInput($event)"
+              (change)="onNativeChange($event)"
+              (focus)="onFocus()"
+              (blur)="onBlur()"
+            />
+          </div>
+
+          <tiptap-button 
+            icon="check"
+            [title]="common().apply"
+            color="var(--ate-primary)"
+            (onClick)="onApply($event)"
+          ></tiptap-button>
+
+          <tiptap-separator />
+
+          <tiptap-button 
+            icon="format_color_reset"
+            [title]="t().clear"
+            variant="danger"
+            (onClick)="onClearColor($event)" 
+          ></tiptap-button>
+        </div>
+
+      </div>
+    </div>
   `, styles: [".color-picker-container{display:flex;flex-direction:column;gap:8px}.dropdown-row{display:flex;align-items:center;width:100%}.dropdown-row.presets{justify-content:center}.dropdown-row.controls{gap:8px;justify-content:space-between;padding-top:4px;border-top:1px solid var(--ate-border, #e2e8f0)}.color-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:4px;width:100%}:host ::ng-deep .color-swatch-btn .tiptap-button{width:100%;aspect-ratio:1;height:auto;border-radius:4px;border:1px solid rgba(0,0,0,.1);padding:0}:host ::ng-deep .color-swatch-btn .tiptap-button.is-active{border-color:var(--ate-primary, #3b82f6);box-shadow:0 0 0 2px #3b82f64d}:host ::ng-deep .btn-native-picker-trigger .tiptap-button{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.2)}.divider-v{width:1px;height:24px;background:var(--ate-border, #e2e8f0)}.hex-input-wrapper{flex:1;display:flex;align-items:center;background:var(--ate-surface-secondary, #f8fafc);border:1px solid var(--ate-border, #e2e8f0);border-radius:8px;padding:0 10px;height:32px;transition:border-color .15s ease}.hex-input-wrapper:focus-within{border-color:var(--ate-primary, #3b82f6);background:var(--ate-menu-bg, #ffffff)}.hex-hash{color:var(--ate-text-muted, #94a3b8);font-family:monospace;font-size:.875rem}.hex-input{background:transparent;border:none;outline:none;color:var(--ate-text, #1e293b);font-family:monospace;font-size:.875rem;width:100%;padding-left:4px}.native-trigger-wrapper{position:relative;width:32px;height:32px}.hidden-native-input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}\n"] }]
         }], ctorParameters: () => [], propDecorators: { menuRef: [{
                 type: ViewChild,
@@ -4845,7 +4856,7 @@ function createDefaultSlashCommands(i18n, commands, imageOptions) {
                 quality: imageOptions?.quality,
                 maxWidth: imageOptions?.maxWidth,
                 maxHeight: imageOptions?.maxHeight,
-                accept: imageOptions?.allowedTypes?.join(',')
+                allowedTypes: imageOptions?.allowedTypes
             }),
         },
         {
@@ -5195,54 +5206,94 @@ class TiptapSlashCommandsComponent {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapSlashCommandsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: TiptapSlashCommandsComponent, isStandalone: true, selector: "tiptap-slash-commands", inputs: { editor: { classPropertyName: "editor", publicName: "editor", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, 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()"
-        (mousedown)="executeCommand(command); $event.preventDefault(); $event.stopPropagation()"
-        (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:var(--ate-menu-bg);border:1px solid var(--ate-menu-border);border-radius:var(--ate-border-radius, 12px);box-shadow:var(--ate-menu-shadow);padding:var(--ate-menu-padding);max-height:320px;overflow-y:auto;min-width:280px;outline:none;animation:slashMenuFadeIn .2s cubic-bezier(0,0,.2,1);scrollbar-width:thin;scrollbar-color:var(--ate-scrollbar-thumb) var(--ate-scrollbar-track)}.slash-commands-menu::-webkit-scrollbar{width:var(--ate-scrollbar-width)}.slash-commands-menu::-webkit-scrollbar-track{background:var(--ate-scrollbar-track)}.slash-commands-menu::-webkit-scrollbar-thumb{background:var(--ate-scrollbar-thumb);border:3px solid transparent;background-clip:content-box;border-radius:10px}.slash-commands-menu::-webkit-scrollbar-thumb:hover{background:var(--ate-scrollbar-thumb-hover);background-clip:content-box}@keyframes slashMenuFadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.slash-command-item{display:flex;align-items:center;gap:12px;padding:var(--ate-menu-padding);border-radius:var(--ate-border-radius, 8px);cursor:pointer;transition:all .15s ease;border:var(--ate-border-width, 1px) solid transparent;outline:none;margin-bottom:2px}.slash-command-item:last-child{margin-bottom:0}.slash-command-item:hover{background:var(--ate-surface-secondary)}.slash-command-item.selected{background:var(--ate-primary-light);border-color:var(--ate-primary-light-alpha)}.slash-command-icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:var(--ate-surface-tertiary);border-radius:var(--ate-sub-border-radius, 8px);color:var(--ate-primary);flex-shrink:0;transition:all .15s ease}.slash-command-item.selected .slash-command-icon{background:var(--ate-primary);color:var(--ate-primary-contrast, #ffffff)}.slash-command-icon .material-symbols-outlined{font-size:18px}.slash-command-content{flex:1;min-width:0}.slash-command-title{font-weight:500;color:var(--ate-text);font-size:14px;margin-bottom:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.slash-command-description{color:var(--ate-text-secondary);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    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 } }, 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()"
+        (mousedown)="executeCommand(command); $event.preventDefault(); $event.stopPropagation()"
+        (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:var(--ate-menu-bg);border:1px solid var(--ate-menu-border);border-radius:var(--ate-menu-border-radius, 12px);box-shadow:var(--ate-menu-shadow);padding:var(--ate-menu-padding);max-height:320px;overflow-y:auto;min-width:280px;outline:none;animation:slashMenuFadeIn .2s cubic-bezier(0,0,.2,1);scrollbar-width:thin;scrollbar-color:var(--ate-scrollbar-thumb) var(--ate-scrollbar-track)}.slash-commands-menu::-webkit-scrollbar{width:var(--ate-scrollbar-width)}.slash-commands-menu::-webkit-scrollbar-track{background:var(--ate-scrollbar-track)}.slash-commands-menu::-webkit-scrollbar-thumb{background:var(--ate-scrollbar-thumb);border:3px solid transparent;background-clip:content-box;border-radius:10px}.slash-commands-menu::-webkit-scrollbar-thumb:hover{background:var(--ate-scrollbar-thumb-hover);background-clip:content-box}@keyframes slashMenuFadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.slash-command-item{display:flex;align-items:center;gap:12px;padding:var(--ate-menu-padding);border-radius:var(--ate-menu-border-radius, 8px);cursor:pointer;transition:all .15s ease;border:var(--ate-border-width, 1px) solid transparent;outline:none;margin-bottom:2px}.slash-command-item:last-child{margin-bottom:0}.slash-command-item:hover{background:var(--ate-surface-secondary)}.slash-command-item.selected{background:var(--ate-primary-light);border-color:var(--ate-primary-light-alpha)}.slash-command-icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:var(--ate-surface-tertiary);border-radius:var(--ate-sub-border-radius, 8px);color:var(--ate-primary);flex-shrink:0;transition:all .15s ease}.slash-command-item.selected .slash-command-icon{background:var(--ate-primary);color:var(--ate-primary-contrast, #ffffff)}.slash-command-icon .material-symbols-outlined{font-size:18px}.slash-command-content{flex:1;min-width:0}.slash-command-title{font-weight:500;color:var(--ate-text);font-size:14px;margin-bottom:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.slash-command-description{color:var(--ate-text-secondary);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapSlashCommandsComponent, decorators: [{
             type: Component,
-            args: [{ selector: "tiptap-slash-commands", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <div #menuRef class="slash-commands-menu">
-      @for (command of filteredCommands(); track command.title) {
-      <div
-        class="slash-command-item"
-        [class.selected]="$index === selectedIndex()"
-        (mousedown)="executeCommand(command); $event.preventDefault(); $event.stopPropagation()"
-        (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:var(--ate-menu-bg);border:1px solid var(--ate-menu-border);border-radius:var(--ate-border-radius, 12px);box-shadow:var(--ate-menu-shadow);padding:var(--ate-menu-padding);max-height:320px;overflow-y:auto;min-width:280px;outline:none;animation:slashMenuFadeIn .2s cubic-bezier(0,0,.2,1);scrollbar-width:thin;scrollbar-color:var(--ate-scrollbar-thumb) var(--ate-scrollbar-track)}.slash-commands-menu::-webkit-scrollbar{width:var(--ate-scrollbar-width)}.slash-commands-menu::-webkit-scrollbar-track{background:var(--ate-scrollbar-track)}.slash-commands-menu::-webkit-scrollbar-thumb{background:var(--ate-scrollbar-thumb);border:3px solid transparent;background-clip:content-box;border-radius:10px}.slash-commands-menu::-webkit-scrollbar-thumb:hover{background:var(--ate-scrollbar-thumb-hover);background-clip:content-box}@keyframes slashMenuFadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.slash-command-item{display:flex;align-items:center;gap:12px;padding:var(--ate-menu-padding);border-radius:var(--ate-border-radius, 8px);cursor:pointer;transition:all .15s ease;border:var(--ate-border-width, 1px) solid transparent;outline:none;margin-bottom:2px}.slash-command-item:last-child{margin-bottom:0}.slash-command-item:hover{background:var(--ate-surface-secondary)}.slash-command-item.selected{background:var(--ate-primary-light);border-color:var(--ate-primary-light-alpha)}.slash-command-icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:var(--ate-surface-tertiary);border-radius:var(--ate-sub-border-radius, 8px);color:var(--ate-primary);flex-shrink:0;transition:all .15s ease}.slash-command-item.selected .slash-command-icon{background:var(--ate-primary);color:var(--ate-primary-contrast, #ffffff)}.slash-command-icon .material-symbols-outlined{font-size:18px}.slash-command-content{flex:1;min-width:0}.slash-command-title{font-weight:500;color:var(--ate-text);font-size:14px;margin-bottom:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.slash-command-description{color:var(--ate-text-secondary);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
+            args: [{ selector: "tiptap-slash-commands", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div #menuRef class="slash-commands-menu">
+      @for (command of filteredCommands(); track command.title) {
+      <div
+        class="slash-command-item"
+        [class.selected]="$index === selectedIndex()"
+        (mousedown)="executeCommand(command); $event.preventDefault(); $event.stopPropagation()"
+        (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:var(--ate-menu-bg);border:1px solid var(--ate-menu-border);border-radius:var(--ate-menu-border-radius, 12px);box-shadow:var(--ate-menu-shadow);padding:var(--ate-menu-padding);max-height:320px;overflow-y:auto;min-width:280px;outline:none;animation:slashMenuFadeIn .2s cubic-bezier(0,0,.2,1);scrollbar-width:thin;scrollbar-color:var(--ate-scrollbar-thumb) var(--ate-scrollbar-track)}.slash-commands-menu::-webkit-scrollbar{width:var(--ate-scrollbar-width)}.slash-commands-menu::-webkit-scrollbar-track{background:var(--ate-scrollbar-track)}.slash-commands-menu::-webkit-scrollbar-thumb{background:var(--ate-scrollbar-thumb);border:3px solid transparent;background-clip:content-box;border-radius:10px}.slash-commands-menu::-webkit-scrollbar-thumb:hover{background:var(--ate-scrollbar-thumb-hover);background-clip:content-box}@keyframes slashMenuFadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.slash-command-item{display:flex;align-items:center;gap:12px;padding:var(--ate-menu-padding);border-radius:var(--ate-menu-border-radius, 8px);cursor:pointer;transition:all .15s ease;border:var(--ate-border-width, 1px) solid transparent;outline:none;margin-bottom:2px}.slash-command-item:last-child{margin-bottom:0}.slash-command-item:hover{background:var(--ate-surface-secondary)}.slash-command-item.selected{background:var(--ate-primary-light);border-color:var(--ate-primary-light-alpha)}.slash-command-icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:var(--ate-surface-tertiary);border-radius:var(--ate-sub-border-radius, 8px);color:var(--ate-primary);flex-shrink:0;transition:all .15s ease}.slash-command-item.selected .slash-command-icon{background:var(--ate-primary);color:var(--ate-primary-contrast, #ffffff)}.slash-command-icon .material-symbols-outlined{font-size:18px}.slash-command-content{flex:1;min-width:0}.slash-command-title{font-weight:500;color:var(--ate-text);font-size:14px;margin-bottom:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.slash-command-description{color:var(--ate-text-secondary);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
         }], ctorParameters: () => [], propDecorators: { menuRef: [{
                 type: ViewChild,
                 args: ["menuRef", { static: false }]
             }] } });
 
+/**
+ * Edit Toggle Component
+ * Allows switching between editable and readonly modes
+ */
+class TiptapEditToggleComponent {
+    constructor() {
+        this.editable = input.required();
+        this.translations = input.required();
+        this.toggle = output();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapEditToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.0", type: TiptapEditToggleComponent, isStandalone: true, selector: "tiptap-edit-toggle", inputs: { editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: true, transformFunction: null }, translations: { classPropertyName: "translations", publicName: "translations", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { toggle: "toggle" }, ngImport: i0, template: `
+    <div class="ate-edit-toggle-container" [class.is-editable]="editable()">
+      <tiptap-button
+        [icon]="editable() ? 'visibility' : 'edit'"
+        [title]="editable() ? translations().editor.viewMode : translations().editor.toggleEdit"
+        (onClick)="toggle.emit($event)"
+        size="medium"
+        iconSize="small"
+        backgroundColor="var(--ate-primary-lighter)"
+      />
+    </div>
+  `, isInline: true, styles: [".ate-edit-toggle-container{position:absolute;margin-top:16px;right:16px;z-index:50}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: TiptapButtonComponent, selector: "tiptap-button", inputs: ["icon", "title", "active", "disabled", "color", "backgroundColor", "variant", "size", "iconSize"], outputs: ["onClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapEditToggleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "tiptap-edit-toggle", standalone: true, imports: [CommonModule, TiptapButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="ate-edit-toggle-container" [class.is-editable]="editable()">
+      <tiptap-button
+        [icon]="editable() ? 'visibility' : 'edit'"
+        [title]="editable() ? translations().editor.viewMode : translations().editor.toggleEdit"
+        (onClick)="toggle.emit($event)"
+        size="medium"
+        iconSize="small"
+        backgroundColor="var(--ate-primary-lighter)"
+      />
+    </div>
+  `, styles: [".ate-edit-toggle-container{position:absolute;margin-top:16px;right:16px;z-index:50}\n"] }]
+        }] });
+
 class NoopValueAccessorDirective {
     writeValue(obj) { }
     registerOnChange(fn) { }
@@ -5600,6 +5651,8 @@ class AngularTiptapEditorComponent {
         this.editorCommandsService.setToolbarInteracting(false);
     }
     constructor() {
+        /** Configuration globale de l'éditeur */
+        this.config = input({});
         this.content = input("");
         this.placeholder = input("");
         this.editable = input(true);
@@ -5621,6 +5674,8 @@ class AngularTiptapEditorComponent {
         this.autofocus = input(false);
         this.seamless = input(false);
         this.floatingToolbar = input(false);
+        this.showEditToggle = input(false);
+        this.spellcheck = input(true);
         this.tiptapExtensions = input([]);
         this.tiptapOptions = input({});
         // Nouveaux inputs pour les bubble menus
@@ -5667,6 +5722,7 @@ class AngularTiptapEditorComponent {
         this.editorUpdate = output();
         this.editorFocus = output();
         this.editorBlur = output();
+        this.editableChange = output();
         // ViewChild with signal
         this.editorElement = viewChild.required("editorElement");
         // Private signals for internal state
@@ -5686,63 +5742,121 @@ class AngularTiptapEditorComponent {
         this._isFormControlDisabled = signal(false);
         this.isFormControlDisabled = this._isFormControlDisabled.asReadonly();
         // Combined disabled state (Input + FormControl)
-        this.mergedDisabled = computed(() => this.disabled() || this.isFormControlDisabled());
+        this.mergedDisabled = computed(() => (this.config().disabled ?? this.disabled()) || this.isFormControlDisabled());
         // Computed for editor states
         this.isEditorReady = computed(() => this.editor() !== null);
-        // Computed for toolbar configuration
-        this.toolbarConfig = computed(() => Object.keys(this.toolbar()).length === 0
-            ? DEFAULT_TOOLBAR_CONFIG
-            : this.toolbar());
-        // Computed for bubble menu configuration
-        this.bubbleMenuConfig = computed(() => Object.keys(this.bubbleMenu()).length === 0
-            ? DEFAULT_BUBBLE_MENU_CONFIG
-            : { ...DEFAULT_BUBBLE_MENU_CONFIG, ...this.bubbleMenu() });
-        // Computed for image bubble menu configuration
-        this.imageBubbleMenuConfig = computed(() => Object.keys(this.imageBubbleMenu()).length === 0
-            ? DEFAULT_IMAGE_BUBBLE_MENU_CONFIG
-            : { ...DEFAULT_IMAGE_BUBBLE_MENU_CONFIG, ...this.imageBubbleMenu() });
-        // Computed for table bubble menu configuration
-        this.tableBubbleMenuConfig = computed(() => Object.keys(this.tableBubbleMenu()).length === 0
-            ? DEFAULT_TABLE_MENU_CONFIG
-            : { ...DEFAULT_TABLE_MENU_CONFIG, ...this.tableBubbleMenu() });
-        // Computed for cell bubble menu configuration
-        this.cellBubbleMenuConfig = computed(() => Object.keys(this.cellBubbleMenu()).length === 0
-            ? DEFAULT_CELL_MENU_CONFIG
-            : { ...DEFAULT_CELL_MENU_CONFIG, ...this.cellBubbleMenu() });
-        // Computed for image upload configuration
-        this.imageUploadConfig = computed(() => ({
-            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,
-            ...this.imageUpload(),
-        }));
-        // Computed for slash commands configuration
-        this.slashCommandsConfigComputed = computed(() => {
+        // ============================================
+        // UNIFIED CONFIGURATION COMPUTED PROPERTIES
+        // ============================================
+        // Appearance & Fundamentals
+        this.finalSeamless = computed(() => {
+            const fromConfig = this.config().mode;
+            if (fromConfig !== undefined)
+                return fromConfig === 'seamless';
+            return this.seamless();
+        });
+        this.finalPlaceholder = computed(() => this.config().placeholder ?? (this.placeholder() || this.currentTranslations().editor.placeholder));
+        this.finalFillContainer = computed(() => this.config().fillContainer ?? this.fillContainer());
+        this.finalShowFooter = computed(() => this.config().showFooter ?? this.showFooter());
+        this.finalShowEditToggle = computed(() => this.config().showEditToggle ?? this.showEditToggle());
+        this.finalHeight = computed(() => this.config().height ?? (this.height() ? `${this.height()}px` : undefined));
+        this.finalMinHeight = computed(() => this.config().minHeight ?? (this.minHeight() ? `${this.minHeight()}px` : undefined));
+        this.finalMaxHeight = computed(() => this.config().maxHeight ?? (this.maxHeight() ? `${this.maxHeight()}px` : undefined));
+        this.finalSpellcheck = computed(() => this.config().spellcheck ?? this.spellcheck());
+        this.finalEnableOfficePaste = computed(() => this.config().enableOfficePaste ?? this.enableOfficePaste());
+        // Features
+        this.finalShowToolbar = computed(() => this.config().showToolbar ?? this.showToolbar());
+        this.finalToolbarConfig = computed(() => {
+            const fromConfig = this.config().toolbar;
+            const base = DEFAULT_TOOLBAR_CONFIG;
+            if (fromConfig)
+                return { ...base, ...fromConfig };
+            const fromInput = this.toolbar();
+            return Object.keys(fromInput).length === 0 ? base : { ...base, ...fromInput };
+        });
+        this.finalFloatingToolbar = computed(() => this.config().floatingToolbar ?? this.floatingToolbar());
+        this.finalShowBubbleMenu = computed(() => this.config().showBubbleMenu ?? this.showBubbleMenu());
+        this.finalBubbleMenuConfig = computed(() => {
+            const fromConfig = this.config().bubbleMenu;
+            const base = DEFAULT_BUBBLE_MENU_CONFIG;
+            if (fromConfig)
+                return { ...base, ...fromConfig };
+            return Object.keys(this.bubbleMenu()).length === 0 ? base : { ...base, ...this.bubbleMenu() };
+        });
+        this.finalShowImageBubbleMenu = computed(() => this.config().showImageBubbleMenu ?? this.showImageBubbleMenu());
+        this.finalImageBubbleMenuConfig = computed(() => {
+            const fromConfig = this.config().imageBubbleMenu;
+            const base = DEFAULT_IMAGE_BUBBLE_MENU_CONFIG;
+            if (fromConfig)
+                return { ...base, ...fromConfig };
+            return Object.keys(this.imageBubbleMenu()).length === 0 ? base : { ...base, ...this.imageBubbleMenu() };
+        });
+        this.finalShowTableBubbleMenu = computed(() => this.config().showTableMenu ?? this.showTableBubbleMenu());
+        this.finalTableBubbleMenuConfig = computed(() => {
+            const fromConfig = this.config().tableBubbleMenu;
+            const base = DEFAULT_TABLE_MENU_CONFIG;
+            if (fromConfig)
+                return { ...base, ...fromConfig };
+            return Object.keys(this.tableBubbleMenu()).length === 0 ? base : { ...base, ...this.tableBubbleMenu() };
+        });
+        this.finalShowCellBubbleMenu = computed(() => this.config().showCellMenu ?? this.showCellBubbleMenu());
+        this.finalCellBubbleMenuConfig = computed(() => {
+            const fromConfig = this.config().cellBubbleMenu;
+            const base = DEFAULT_CELL_MENU_CONFIG;
+            if (fromConfig)
+                return { ...base, ...fromConfig };
+            return Object.keys(this.cellBubbleMenu()).length === 0 ? base : { ...base, ...this.cellBubbleMenu() };
+        });
+        this.finalEnableSlashCommands = computed(() => this.config().enableSlashCommands ?? this.enableSlashCommands());
+        this.finalSlashCommandsConfig = computed(() => {
+            const fromConfig = this.config().slashCommands;
             const customConfig = this.customSlashCommands();
-            if (customConfig) {
+            if (customConfig)
                 return customConfig;
+            let baseConfig = this.slashCommands();
+            if (fromConfig) {
+                baseConfig = fromConfig;
             }
-            // Utilise l'utilitaire filterSlashCommands qui gère maintenant 
-            // les défauts, le filtrage et l'ajout de commandes personnalisées
             return {
-                commands: filterSlashCommands(this.slashCommands(), this.i18nService, this.editorCommandsService, this.imageUploadConfig()),
+                commands: filterSlashCommands(baseConfig, this.i18nService, this.editorCommandsService, this.finalImageUploadConfig()),
+            };
+        });
+        // Behavior
+        this.finalAutofocus = computed(() => this.config().autofocus ?? this.autofocus());
+        this.finalMaxCharacters = computed(() => this.config().maxCharacters ?? this.maxCharacters());
+        this.finalShowCharacterCount = computed(() => this.config().showCharacterCount ?? this.showCharacterCount());
+        this.finalShowWordCount = computed(() => this.config().showWordCount ?? this.showWordCount());
+        this.finalLocale = computed(() => this.config().locale ?? this.locale());
+        // Image Upload
+        this.finalImageUploadConfig = computed(() => {
+            const fromConfig = this.config().imageUpload;
+            const fromInput = this.imageUpload();
+            const merged = {
+                maxSize: 5, // Default 5MB
+                maxWidth: 1920,
+                maxHeight: 1080,
+                allowedTypes: ["image/jpeg", "image/png", "image/gif", "image/webp"],
+                enableDragDrop: true,
+                showPreview: true,
+                multiple: false,
+                compressImages: true,
+                quality: 0.8,
+                ...fromInput,
+                ...fromConfig,
+            };
+            return {
+                ...merged,
+                maxSize: merged.maxSize * 1024 * 1024 // Convert MB to bytes for internal service
             };
         });
-        // Computed for current translations (allows per-instance override via [locale] input)
+        this.finalImageUploadHandler = computed(() => this.config().imageUpload?.handler ?? this.imageUploadHandler());
+        // Computed for current translations (allows per-instance override via config or input)
         this.currentTranslations = computed(() => {
-            const localeOverride = this.locale();
+            const localeOverride = this.finalLocale();
             if (localeOverride) {
-                // If a specific language is provided to this instance, try to retrieve it
                 const allTranslations = this.i18nService.allTranslations();
                 return allTranslations[localeOverride] || this.i18nService.translations();
             }
-            // Otherwise, follow the global service language
             return this.i18nService.translations();
         });
         this._destroyRef = inject(DestroyRef);
@@ -5774,16 +5888,16 @@ class AngularTiptapEditorComponent {
         });
         // Effect to update height properties
         effect(() => {
-            const minHeight = this.minHeight();
-            const height = this.height();
-            const maxHeight = this.maxHeight();
+            const minHeight = this.finalMinHeight();
+            const height = this.finalHeight();
+            const maxHeight = this.finalMaxHeight();
             const element = this.editorElement()?.nativeElement;
             // Automatically calculate if scroll is needed
             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-height", height ?? "auto");
+                element.style.setProperty("--editor-max-height", maxHeight ?? "none");
                 element.style.setProperty("--editor-overflow", needsScroll ? "auto" : "visible");
             }
         });
@@ -5800,20 +5914,17 @@ class AngularTiptapEditorComponent {
         });
         // Effect to synchronize image upload handler with the service
         effect(() => {
-            const handler = this.imageUploadHandler();
+            const handler = this.finalImageUploadHandler();
             this.editorCommandsService.uploadHandler = handler || null;
         });
         // Effect to update character count limit dynamically
         effect(() => {
             const editor = this.editor();
-            const limit = this.maxCharacters();
+            const limit = this.finalMaxCharacters();
             if (editor && editor.extensionManager) {
                 const characterCountExtension = editor.extensionManager.extensions.find((ext) => ext.name === "characterCount");
                 if (characterCountExtension) {
                     characterCountExtension.options.limit = limit;
-                    // Force TipTap to recognize the option change if possible
-                    // Some extensions need re-creation, but characterCount plugin 
-                    // reads this.options.limit in its filterTransaction.
                 }
             }
         });
@@ -5840,7 +5951,7 @@ class AngularTiptapEditorComponent {
                 types: ["textStyle"],
             }),
             Placeholder.configure({
-                placeholder: this.placeholder() || this.i18nService.editor().placeholder,
+                placeholder: this.finalPlaceholder(),
             }),
             Underline,
             Superscript,
@@ -5888,16 +5999,16 @@ class AngularTiptapEditorComponent {
             }),
         ];
         // Ajouter l'extension Office Paste si activée
-        if (this.enableOfficePaste()) {
+        if (this.finalEnableOfficePaste()) {
             extensions.push(OfficePaste.configure({
                 // Configuration par défaut pour une meilleure compatibilité
                 transformPastedHTML: true,
                 transformPastedText: true,
             }));
         }
-        if (this.showCharacterCount() || this.showWordCount()) {
+        if (this.finalShowCharacterCount() || this.finalShowWordCount()) {
             extensions.push(CharacterCount.configure({
-                limit: this.maxCharacters(),
+                limit: this.finalMaxCharacters(),
             }));
         }
         // Allow addition of custom extensions, but avoid duplicates by filtering by name
@@ -5917,10 +6028,15 @@ class AngularTiptapEditorComponent {
         const newEditor = new Editor({
             ...userOptions,
             element: this.editorElement().nativeElement,
-            extensions,
+            extensions: extensions,
             content: this.content(),
             editable: this.editable() && !this.mergedDisabled(),
-            autofocus: this.autofocus(),
+            autofocus: this.finalAutofocus(),
+            editorProps: {
+                attributes: {
+                    spellcheck: this.finalSpellcheck().toString(),
+                },
+            },
             onUpdate: ({ editor, transaction }) => {
                 const html = editor.getHTML();
                 // Anti-écho : mémoriser ce qu'on émet pour éviter la boucle
@@ -5958,8 +6074,14 @@ class AngularTiptapEditorComponent {
         // Stocker la référence de l'éditeur immédiatement
         this._editor.set(newEditor);
     }
+    toggleEditMode(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        const newEditable = !this.editable();
+        this.editableChange.emit(newEditable);
+    }
     updateCharacterCount(editor) {
-        if ((this.showCharacterCount() || this.showWordCount()) && editor.storage["characterCount"]) {
+        if ((this.finalShowCharacterCount() || this.finalShowWordCount()) && editor.storage["characterCount"]) {
             const storage = editor.storage["characterCount"];
             this._characterCount.set(storage.characters());
             this._wordCount.set(storage.words());
@@ -5986,7 +6108,7 @@ class AngularTiptapEditorComponent {
         const currentEditor = this.editor();
         if (currentEditor) {
             try {
-                const config = this.imageUploadConfig();
+                const config = this.finalImageUploadConfig();
                 await this.editorCommandsService.uploadImage(currentEditor, file, {
                     quality: config.quality,
                     maxWidth: config.maxWidth,
@@ -6077,132 +6199,143 @@ class AngularTiptapEditorComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: AngularTiptapEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: AngularTiptapEditorComponent, isStandalone: true, selector: "angular-tiptap-editor", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, fillContainer: { classPropertyName: "fillContainer", publicName: "fillContainer", isSignal: true, isRequired: false, transformFunction: null }, showToolbar: { classPropertyName: "showToolbar", publicName: "showToolbar", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null }, showCharacterCount: { classPropertyName: "showCharacterCount", publicName: "showCharacterCount", isSignal: true, isRequired: false, transformFunction: null }, showWordCount: { classPropertyName: "showWordCount", publicName: "showWordCount", isSignal: true, isRequired: false, transformFunction: null }, maxCharacters: { classPropertyName: "maxCharacters", publicName: "maxCharacters", isSignal: true, isRequired: false, transformFunction: null }, enableOfficePaste: { classPropertyName: "enableOfficePaste", publicName: "enableOfficePaste", isSignal: true, isRequired: false, transformFunction: null }, enableSlashCommands: { classPropertyName: "enableSlashCommands", publicName: "enableSlashCommands", isSignal: true, isRequired: false, transformFunction: null }, slashCommands: { classPropertyName: "slashCommands", publicName: "slashCommands", isSignal: true, isRequired: false, transformFunction: null }, customSlashCommands: { classPropertyName: "customSlashCommands", publicName: "customSlashCommands", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, seamless: { classPropertyName: "seamless", publicName: "seamless", isSignal: true, isRequired: false, transformFunction: null }, floatingToolbar: { classPropertyName: "floatingToolbar", publicName: "floatingToolbar", isSignal: true, isRequired: false, transformFunction: null }, tiptapExtensions: { classPropertyName: "tiptapExtensions", publicName: "tiptapExtensions", isSignal: true, isRequired: false, transformFunction: null }, tiptapOptions: { classPropertyName: "tiptapOptions", publicName: "tiptapOptions", isSignal: true, isRequired: false, transformFunction: null }, showBubbleMenu: { classPropertyName: "showBubbleMenu", publicName: "showBubbleMenu", isSignal: true, isRequired: false, transformFunction: null }, bubbleMenu: { classPropertyName: "bubbleMenu", publicName: "bubbleMenu", isSignal: true, isRequired: false, transformFunction: null }, showImageBubbleMenu: { classPropertyName: "showImageBubbleMenu", publicName: "showImageBubbleMenu", isSignal: true, isRequired: false, transformFunction: null }, imageBubbleMenu: { classPropertyName: "imageBubbleMenu", publicName: "imageBubbleMenu", isSignal: true, isRequired: false, transformFunction: null }, toolbar: { classPropertyName: "toolbar", publicName: "toolbar", isSignal: true, isRequired: false, transformFunction: null }, showTableBubbleMenu: { classPropertyName: "showTableBubbleMenu", publicName: "showTableBubbleMenu", isSignal: true, isRequired: false, transformFunction: null }, tableBubbleMenu: { classPropertyName: "tableBubbleMenu", publicName: "tableBubbleMenu", isSignal: true, isRequired: false, transformFunction: null }, showCellBubbleMenu: { classPropertyName: "showCellBubbleMenu", publicName: "showCellBubbleMenu", isSignal: true, isRequired: false, transformFunction: null }, cellBubbleMenu: { classPropertyName: "cellBubbleMenu", publicName: "cellBubbleMenu", isSignal: true, isRequired: false, transformFunction: null }, stateCalculators: { classPropertyName: "stateCalculators", publicName: "stateCalculators", isSignal: true, isRequired: false, transformFunction: null }, imageUpload: { classPropertyName: "imageUpload", publicName: "imageUpload", isSignal: true, isRequired: false, transformFunction: null }, imageUploadHandler: { classPropertyName: "imageUploadHandler", publicName: "imageUploadHandler", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { contentChange: "contentChange", editorCreated: "editorCreated", editorUpdate: "editorUpdate", editorFocus: "editorFocus", editorBlur: "editorBlur" }, host: { properties: { "class.fill-container": "fillContainer()", "class.floating-toolbar": "floatingToolbar()", "class.is-readonly": "!editable() && !mergedDisabled()", "class.is-disabled": "mergedDisabled()", "style.--ate-border-width": "seamless() || mergedDisabled() ? '0' : null", "style.--ate-background": "seamless() ? 'transparent' : (mergedDisabled() ? 'var(--ate-surface-tertiary)' : null)", "style.--ate-toolbar-border-color": "seamless() ? 'transparent' : null", "style.--ate-counter-background": "seamless() ? 'transparent' : null", "style.--ate-counter-border-color": "seamless() ? 'transparent' : null" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: AngularTiptapEditorComponent, isStandalone: true, selector: "angular-tiptap-editor", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, 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 }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, fillContainer: { classPropertyName: "fillContainer", publicName: "fillContainer", isSignal: true, isRequired: false, transformFunction: null }, showToolbar: { classPropertyName: "showToolbar", publicName: "showToolbar", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null }, showCharacterCount: { classPropertyName: "showCharacterCount", publicName: "showCharacterCount", isSignal: true, isRequired: false, transformFunction: null }, showWordCount: { classPropertyName: "showWordCount", publicName: "showWordCount", isSignal: true, isRequired: false, transformFunction: null }, maxCharacters: { classPropertyName: "maxCharacters", publicName: "maxCharacters", isSignal: true, isRequired: false, transformFunction: null }, enableOfficePaste: { classPropertyName: "enableOfficePaste", publicName: "enableOfficePaste", isSignal: true, isRequired: false, transformFunction: null }, enableSlashCommands: { classPropertyName: "enableSlashCommands", publicName: "enableSlashCommands", isSignal: true, isRequired: false, transformFunction: null }, slashCommands: { classPropertyName: "slashCommands", publicName: "slashCommands", isSignal: true, isRequired: false, transformFunction: null }, customSlashCommands: { classPropertyName: "customSlashCommands", publicName: "customSlashCommands", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, seamless: { classPropertyName: "seamless", publicName: "seamless", isSignal: true, isRequired: false, transformFunction: null }, floatingToolbar: { classPropertyName: "floatingToolbar", publicName: "floatingToolbar", isSignal: true, isRequired: false, transformFunction: null }, showEditToggle: { classPropertyName: "showEditToggle", publicName: "showEditToggle", isSignal: true, isRequired: false, transformFunction: null }, spellcheck: { classPropertyName: "spellcheck", publicName: "spellcheck", isSignal: true, isRequired: false, transformFunction: null }, tiptapExtensions: { classPropertyName: "tiptapExtensions", publicName: "tiptapExtensions", isSignal: true, isRequired: false, transformFunction: null }, tiptapOptions: { classPropertyName: "tiptapOptions", publicName: "tiptapOptions", isSignal: true, isRequired: false, transformFunction: null }, showBubbleMenu: { classPropertyName: "showBubbleMenu", publicName: "showBubbleMenu", isSignal: true, isRequired: false, transformFunction: null }, bubbleMenu: { classPropertyName: "bubbleMenu", publicName: "bubbleMenu", isSignal: true, isRequired: false, transformFunction: null }, showImageBubbleMenu: { classPropertyName: "showImageBubbleMenu", publicName: "showImageBubbleMenu", isSignal: true, isRequired: false, transformFunction: null }, imageBubbleMenu: { classPropertyName: "imageBubbleMenu", publicName: "imageBubbleMenu", isSignal: true, isRequired: false, transformFunction: null }, toolbar: { classPropertyName: "toolbar", publicName: "toolbar", isSignal: true, isRequired: false, transformFunction: null }, showTableBubbleMenu: { classPropertyName: "showTableBubbleMenu", publicName: "showTableBubbleMenu", isSignal: true, isRequired: false, transformFunction: null }, tableBubbleMenu: { classPropertyName: "tableBubbleMenu", publicName: "tableBubbleMenu", isSignal: true, isRequired: false, transformFunction: null }, showCellBubbleMenu: { classPropertyName: "showCellBubbleMenu", publicName: "showCellBubbleMenu", isSignal: true, isRequired: false, transformFunction: null }, cellBubbleMenu: { classPropertyName: "cellBubbleMenu", publicName: "cellBubbleMenu", isSignal: true, isRequired: false, transformFunction: null }, stateCalculators: { classPropertyName: "stateCalculators", publicName: "stateCalculators", isSignal: true, isRequired: false, transformFunction: null }, imageUpload: { classPropertyName: "imageUpload", publicName: "imageUpload", isSignal: true, isRequired: false, transformFunction: null }, imageUploadHandler: { classPropertyName: "imageUploadHandler", publicName: "imageUploadHandler", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { contentChange: "contentChange", editorCreated: "editorCreated", editorUpdate: "editorUpdate", editorFocus: "editorFocus", editorBlur: "editorBlur", editableChange: "editableChange" }, host: { properties: { "class.fill-container": "finalFillContainer()", "class.floating-toolbar": "finalFloatingToolbar()", "class.is-readonly": "!editable() && !mergedDisabled()", "class.is-disabled": "mergedDisabled()", "style.--ate-border-width": "finalSeamless() || mergedDisabled() ? '0' : null", "style.--ate-background": "finalSeamless() ? 'transparent' : (mergedDisabled() ? 'var(--ate-surface-tertiary)' : null)", "style.--ate-toolbar-border-color": "finalSeamless() ? 'transparent' : null", "style.--ate-counter-background": "finalSeamless() ? 'transparent' : null", "style.--ate-counter-border-color": "finalSeamless() ? 'transparent' : null", "class.dark": "config().theme === 'dark'", "attr.data-theme": "config().theme" } }, providers: [
             EditorCommandsService,
             ImageService,
             ColorPickerService,
             LinkService,
-        ], viewQueries: [{ propertyName: "editorElement", first: true, predicate: ["editorElement"], descendants: true, isSignal: true }], hostDirectives: [{ directive: NoopValueAccessorDirective }], ngImport: i0, template: `
-    <div class="tiptap-editor">
-      <!-- Toolbar -->
-      @if (editable() && !mergedDisabled() && showToolbar() && editor()) {
-      <tiptap-toolbar 
-        [editor]="editor()!" 
-        [config]="toolbarConfig()"
-        [imageUpload]="imageUploadConfig()"
-        [floating]="floatingToolbar()"
-        (mouseenter)="hideBubbleMenus()"
-        (mouseleave)="showBubbleMenus()"
-      />
-      }
-
-      <!-- Editor Content -->
-      <div
-        #editorElement
-        class="tiptap-content"
-        [class.drag-over]="isDragOver()"
-        (dragover)="onDragOver($event)"
-        (drop)="onDrop($event)"
-        (click)="onEditorClick($event)"
-      ></div>
-
-      <!-- Text Bubble Menu -->
-      @if (editable() && showBubbleMenu() && editor()) {
-      <tiptap-bubble-menu
-        [editor]="editor()!"
-        [config]="bubbleMenuConfig()"
-        [style.display]="editorFullyInitialized() ? 'block' : 'none'"
-      ></tiptap-bubble-menu>
-      }
-
-      <!-- Image Bubble Menu -->
-      @if (editable() && showImageBubbleMenu() && editor()) {
-      <tiptap-image-bubble-menu
-        [editor]="editor()!"
-        [config]="imageBubbleMenuConfig()"
-        [style.display]="editorFullyInitialized() ? 'block' : 'none'"
-      ></tiptap-image-bubble-menu>
-      }
-
-      <!-- Link Bubble Menu -->
-      @if (editable() && editor()) {
-      <tiptap-link-bubble-menu
-        [editor]="editor()!"
-        [style.display]="editorFullyInitialized() ? 'block' : 'none'"
-      ></tiptap-link-bubble-menu>
-      }
-
-      <!-- Color Bubble Menu -->
-      @if (editable() && editor()) {
-      <tiptap-color-bubble-menu
-        [editor]="editor()!"
-        [style.display]="editorFullyInitialized() ? 'block' : 'none'"
-      ></tiptap-color-bubble-menu>
-      }
-
-      <!-- Slash Commands -->
-      @if (editable() && enableSlashCommands() && editor()) {
-      <tiptap-slash-commands
-        [editor]="editor()!"
-        [config]="slashCommandsConfigComputed()"
-        [style.display]="editorFullyInitialized() ? 'block' : 'none'"
-      ></tiptap-slash-commands>
-      }
-
-      <!-- Table Menu -->
-      @if (editable() && editor()) {
-      <tiptap-table-bubble-menu
-        [editor]="editor()!"
-        [config]="tableBubbleMenuConfig()"
-        [style.display]="editorFullyInitialized() ? 'block' : 'none'"
-      ></tiptap-table-bubble-menu>
-      }
-
-      <!-- Cell Menu -->
-      @if (editable() && editor()) {
-      <tiptap-cell-bubble-menu
-        [editor]="editor()!"
-        [config]="cellBubbleMenuConfig()"
-        [style.display]="editorFullyInitialized() ? 'block' : 'none'"
-      ></tiptap-cell-bubble-menu>
-      }
-
-      <!-- Counters -->
-      @if (editable() && !mergedDisabled() && showFooter() && (showCharacterCount() || showWordCount())) {
-      <div class="character-count" [class.limit-reached]="maxCharacters() && characterCount() >= maxCharacters()!">
-        @if (showCharacterCount()) {
-          {{ characterCount() }}
-          {{ currentTranslations().editor.character }}{{ characterCount() > 1 ? "s" : "" }}
-          @if (maxCharacters()) {
-            / {{ maxCharacters() }}
-          }
-        }
-        
-        @if (showCharacterCount() && showWordCount()) {
-          , 
-        }
-
-        @if (showWordCount()) {
-          {{ wordCount() }}
-          {{ currentTranslations().editor.word }}{{ wordCount() > 1 ? "s" : "" }}
-        }
-      </div>
-      }
-    </div>
-  `, isInline: true, styles: [":host{--ate-primary: #2563eb;--ate-primary-contrast: #ffffff;--ate-primary-light: color-mix(in srgb, var(--ate-primary), transparent 90%);--ate-primary-lighter: color-mix(in srgb, var(--ate-primary), transparent 95%);--ate-primary-light-alpha: color-mix(in srgb, var(--ate-primary), transparent 85%);--ate-surface: #ffffff;--ate-surface-secondary: #f8f9fa;--ate-surface-tertiary: #f1f5f9;--ate-text: #2d3748;--ate-text-secondary: #64748b;--ate-text-muted: #a0aec0;--ate-border: #e2e8f0;--ate-highlight-bg: #fef08a;--ate-highlight-color: #854d0e;--ate-button-hover: #f1f5f9;--ate-button-active: #e2e8f0;--ate-error-color: #c53030;--ate-error-bg: #fed7d7;--ate-error-border: #feb2b2;--ate-border-color: var(--ate-border);--ate-border-width: 2px;--ate-border-radius: 12px;--ate-focus-color: var(--ate-primary);--ate-background: var(--ate-surface);--ate-sub-border-radius: 8px;--ate-text-color: var(--ate-text);--ate-placeholder-color: var(--ate-text-muted);--ate-line-height: 1.6;--ate-content-padding: 16px;--ate-menu-bg: var(--ate-surface-secondary);--ate-menu-border: var(--ate-border);--ate-menu-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--ate-menu-padding: 6px;--ate-toolbar-padding: var(--ate-menu-padding);--ate-toolbar-background: var(--ate-surface-secondary);--ate-toolbar-border-color: var(--ate-border);--ate-toolbar-button-color: var(--ate-text-secondary);--ate-toolbar-button-hover-background: transparent;--ate-toolbar-button-active-background: var(--ate-primary-light);--ate-toolbar-button-active-color: var(--ate-primary);--ate-counter-color: var(--ate-text-secondary);--ate-counter-background: var(--ate-surface-secondary);--ate-counter-border-color: var(--ate-border);--ate-drag-background: #f0f8ff;--ate-drag-border-color: var(--ate-primary);--ate-blockquote-border-color: var(--ate-border);--ate-blockquote-background: var(--ate-surface-secondary);--ate-code-background: var(--ate-surface-secondary);--ate-code-color: var(--ate-text-secondary);--ate-code-border-color: var(--ate-border);--ate-code-block-background: #0f172a;--ate-code-block-color: #e2e8f0;--ate-code-block-border-color: var(--ate-border);--ate-image-border-radius: var(--ate-sub-border-radius);--ate-image-selected-color: var(--ate-primary);--ate-scrollbar-width: 10px;--ate-scrollbar-thumb: var(--ate-border);--ate-scrollbar-thumb-hover: var(--ate-text-muted);--ate-scrollbar-track: transparent;--ate-table-border-color: var(--ate-border);--ate-table-header-background: var(--ate-surface-secondary);--ate-table-header-color: var(--ate-text);--ate-table-cell-background: var(--ate-surface);--ate-table-cell-selected-background: var(--ate-primary-light);--ate-table-resize-handle-color: var(--ate-primary);--ate-table-row-hover-background: var(--ate-primary-lighter)}:host(.dark),:host([data-theme=\"dark\"]){--ate-primary: #3b82f6;--ate-primary-contrast: #ffffff;--ate-primary-light: color-mix(in srgb, var(--ate-primary), transparent 85%);--ate-primary-lighter: color-mix(in srgb, var(--ate-primary), transparent 92%);--ate-primary-light-alpha: color-mix(in srgb, var(--ate-primary), transparent 80%);--ate-surface: #020617;--ate-surface-secondary: #0f172a;--ate-surface-tertiary: #1e293b;--ate-text: #f8fafc;--ate-text-secondary: #94a3b8;--ate-text-muted: #64748b;--ate-border: #1e293b;--ate-highlight-bg: #854d0e;--ate-highlight-color: #fef08a;--ate-button-hover: #1e293b;--ate-button-active: #0f172a;--ate-menu-border: rgba(255, 255, 255, .1);--ate-menu-shadow: 0 20px 25px -5px rgba(0, 0, 0, .3), 0 10px 10px -5px rgba(0, 0, 0, .2);--ate-error-color: #f87171;--ate-error-bg: #450a0a;--ate-error-border: #7f1d1d;--ate-drag-background: var(--ate-surface-tertiary);--ate-drag-border-color: var(--ate-primary);--ate-blockquote-border-color: var(--ate-primary);--ate-toolbar-button-active-background: var(--ate-primary-light);--ate-toolbar-button-active-color: var(--ate-primary);--ate-button-hover: var(--ate-surface-tertiary);--ate-button-active: var(--ate-surface-secondary);--ate-scrollbar-thumb: var(--ate-surface-tertiary);--ate-scrollbar-thumb-hover: var(--ate-text-muted)}:host(.fill-container){display:block;height:100%}.tiptap-editor{border:var(--ate-border-width) solid var(--ate-border-color);border-radius:var(--ate-border-radius);background:var(--ate-background);overflow:hidden;transition:border-color .2s ease;position:relative}:host(.floating-toolbar) .tiptap-editor{overflow:visible}:host(.fill-container) .tiptap-editor{display:flex;flex-direction:column;height:100%}:host(.fill-container) .tiptap-content{flex:1;min-height:0;overflow-y:auto}.tiptap-editor:focus-within{border-color:var(--ate-focus-color)}.tiptap-content{min-height:var(--editor-min-height, 200px);height:var(--editor-height, auto);max-height:var(--editor-max-height, none);overflow-y:var(--editor-overflow, visible);outline:none;position:relative;scrollbar-width:thin;scrollbar-color:var(--ate-scrollbar-thumb) var(--ate-scrollbar-track)}:host(.is-disabled) .tiptap-content{cursor:not-allowed;opacity:.7;-webkit-user-select:none;user-select:none;pointer-events:none;background-color:var(--ate-surface-tertiary)}:host(.is-readonly) .tiptap-content{cursor:default;-webkit-user-select:text;user-select:text}:host(.is-readonly) .tiptap-content ::ng-deep .tiptap-link{cursor:pointer;pointer-events:auto}.tiptap-content::-webkit-scrollbar{width:var(--ate-scrollbar-width);height:var(--ate-scrollbar-width)}.tiptap-content::-webkit-scrollbar-track{background:var(--ate-scrollbar-track)}.tiptap-content::-webkit-scrollbar-thumb{background:var(--ate-scrollbar-thumb);border:3px solid transparent;background-clip:content-box;border-radius:10px}.tiptap-content::-webkit-scrollbar-thumb:hover{background:var(--ate-scrollbar-thumb-hover);background-clip:content-box}.tiptap-content.drag-over{background:var(--ate-drag-background);border:2px dashed var(--ate-drag-border-color)}.character-count{padding:8px var(--ate-content-padding);font-size:12px;color:var(--ate-counter-color);text-align:right;border-top:1px solid var(--ate-counter-border-color);background:var(--ate-counter-background);transition:color .2s ease;border-bottom-left-radius:calc(var(--ate-border-radius) - var(--ate-border-width));border-bottom-right-radius:calc(var(--ate-border-radius) - var(--ate-border-width))}.character-count.limit-reached{color:var(--ate-error-color, #ef4444);font-weight:600}:host ::ng-deep .ProseMirror{padding:var(--ate-content-padding);outline:none;line-height:var(--ate-line-height);color:var(--ate-text-color);min-height:100%;height:100%;word-wrap:break-word;overflow-wrap:break-word}:host ::ng-deep .ProseMirror h1{font-size:2em;font-weight:700;margin-top:0;margin-bottom:.5em}:host ::ng-deep .ProseMirror h2{font-size:1.5em;font-weight:700;margin-top:1em;margin-bottom:.5em}:host ::ng-deep .ProseMirror h3{font-size:1.25em;font-weight:700;margin-top:1em;margin-bottom:.5em}:host ::ng-deep .ProseMirror p{margin:.5em 0}:host ::ng-deep .ProseMirror ul,:host ::ng-deep .ProseMirror ol{padding-left:2em;margin:.5em 0}:host ::ng-deep .ProseMirror blockquote{border-left:4px solid var(--ate-blockquote-border-color);margin:1em 0;background:var(--ate-blockquote-background);padding:.5em 1em;border-radius:0 4px 4px 0}:host ::ng-deep .ProseMirror code{background:var(--ate-code-background);color:var(--ate-code-color);border:1px solid var(--ate-code-border-color);padding:.15em .4em;border-radius:4px;font-family:JetBrains Mono,Fira Code,Monaco,Consolas,monospace;font-size:.85em;font-weight:500}:host ::ng-deep .ProseMirror pre{background:var(--ate-code-block-background);color:var(--ate-code-block-color);border:1px solid var(--ate-code-block-border-color);padding:1em;border-radius:var(--ate-border-radius);overflow-x:auto;margin:1em 0}:host ::ng-deep .ProseMirror pre code{background:none;color:inherit;border:none;padding:0}:host ::ng-deep .ProseMirror p.is-editor-empty:first-child:before{content:attr(data-placeholder);color:var(--ate-placeholder-color);pointer-events:none;float:left;height:0}:host ::ng-deep .ProseMirror[contenteditable=false]{pointer-events:none}:host ::ng-deep .ProseMirror[contenteditable=false] img{cursor:default;pointer-events:none}:host ::ng-deep .ProseMirror[contenteditable=false] img:hover{transform:none;box-shadow:0 2px 8px #0000001a}:host ::ng-deep .ProseMirror[contenteditable=false] img.ProseMirror-selectednode{outline:none}:host ::ng-deep .ProseMirror img{position:relative;display:inline-block;max-width:100%;height:auto;cursor:pointer;transition:all .2s ease;border:2px solid transparent;border-radius:var(--ate-image-border-radius)}:host ::ng-deep .ProseMirror img:hover{border-color:var(--ate-border-color);box-shadow:0 2px 4px #0000001a}:host ::ng-deep .ProseMirror img.ProseMirror-selectednode{border-color:var(--ate-image-selected-color);box-shadow:0 0 0 3px var(--ate-primary-light-alpha);transition:all .2s ease}:host ::ng-deep .ProseMirror .tiptap-image{max-width:100%;height:auto;border-radius:16px;box-shadow:0 4px 20px #00000014;margin:.5em 0;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);display:block;filter:brightness(1) contrast(1)}:host ::ng-deep .ProseMirror .tiptap-image:hover{box-shadow:0 8px 30px #0000001f;filter:brightness(1.02) contrast(1.02)}:host ::ng-deep .ProseMirror .tiptap-image.ProseMirror-selectednode{outline:2px solid var(--ate-primary);outline-offset:2px;border-radius:16px;box-shadow:0 0 0 4px var(--ate-primary-light-alpha)}:host ::ng-deep .image-container{margin:.5em 0;text-align:center;border-radius:16px;overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1)}:host ::ng-deep .image-container.image-align-left{text-align:left}:host ::ng-deep .image-container.image-align-center{text-align:center}:host ::ng-deep .image-container.image-align-right{text-align:right}:host ::ng-deep .image-container img{display:inline-block;max-width:100%;height:auto;border-radius:16px}:host ::ng-deep .resizable-image-container{position:relative;display:inline-block;margin:.5em 0}:host ::ng-deep .resize-controls{position:absolute;inset:0;pointer-events:none;z-index:1000}:host ::ng-deep .resize-handle{position:absolute;width:12px;height:12px;background:var(--ate-primary);border:2px solid var(--ate-surface);border-radius:50%;pointer-events:all;cursor:pointer;z-index:1001;transition:all .15s ease;box-shadow:0 2px 6px #0003}:host ::ng-deep .resize-handle:hover{background:var(--ate-primary);box-shadow:0 3px 8px #0000004d}:host ::ng-deep .resize-handle:active{background:var(--ate-primary)}:host ::ng-deep .resize-handle-n:hover,:host ::ng-deep .resize-handle-s:hover{transform:translate(-50%) scale(1.2)}:host ::ng-deep .resize-handle-w:hover,:host ::ng-deep .resize-handle-e:hover{transform:translateY(-50%) scale(1.2)}:host ::ng-deep .resize-handle-n:active,:host ::ng-deep .resize-handle-s:active{transform:translate(-50%) scale(.9)}:host ::ng-deep .resize-handle-w:active,:host ::ng-deep .resize-handle-e:active{transform:translateY(-50%) scale(.9)}:host ::ng-deep .resize-handle-nw:hover,:host ::ng-deep .resize-handle-ne:hover,:host ::ng-deep .resize-handle-sw:hover,:host ::ng-deep .resize-handle-se:hover{transform:scale(1.2)}:host ::ng-deep .resize-handle-nw:active,:host ::ng-deep .resize-handle-ne:active,:host ::ng-deep .resize-handle-sw:active,:host ::ng-deep .resize-handle-se:active{transform:scale(.9)}:host ::ng-deep .resize-handle-nw{top:0;left:-6px;cursor:nw-resize}:host ::ng-deep .resize-handle-n{top:0;left:50%;transform:translate(-50%);cursor:n-resize}:host ::ng-deep .resize-handle-ne{top:0;right:-6px;cursor:ne-resize}:host ::ng-deep .resize-handle-w{top:50%;left:-6px;transform:translateY(-50%);cursor:w-resize}:host ::ng-deep .resize-handle-e{top:50%;right:-6px;transform:translateY(-50%);cursor:e-resize}:host ::ng-deep .resize-handle-sw{bottom:0;left:-6px;cursor:sw-resize}:host ::ng-deep .resize-handle-s{bottom:0;left:50%;transform:translate(-50%);cursor:s-resize}:host ::ng-deep .resize-handle-se{bottom:0;right:-6px;cursor:se-resize}:host ::ng-deep body.resizing{-webkit-user-select:none;user-select:none;cursor:crosshair}:host ::ng-deep body.resizing .ProseMirror{pointer-events:none}:host ::ng-deep body.resizing .ProseMirror .tiptap-image{pointer-events:none}:host ::ng-deep .image-size-info{position:absolute;bottom:-20px;left:50%;transform:translate(-50%);background:#000c;color:#fff;padding:2px 6px;border-radius:3px;font-size:11px;white-space:nowrap;opacity:0;transition:opacity .2s ease}:host ::ng-deep .image-container:hover .image-size-info{opacity:1}:host ::ng-deep .ProseMirror table{border-collapse:separate;border-spacing:0;margin:0;table-layout:fixed;width:100%;border-radius:8px;overflow:hidden}:host ::ng-deep .ProseMirror table td,:host ::ng-deep .ProseMirror table th{border:none;border-right:1px solid var(--ate-table-border-color);border-bottom:1px solid var(--ate-table-border-color);box-sizing:border-box;min-width:1em;padding:8px 12px;position:relative;vertical-align:top;text-align:left}:host ::ng-deep .ProseMirror table td{background:var(--ate-table-cell-background)}:host ::ng-deep .ProseMirror table td:first-child,:host ::ng-deep .ProseMirror table th:first-child{border-left:1px solid var(--ate-table-border-color)}:host ::ng-deep .ProseMirror table tr:first-child td,:host ::ng-deep .ProseMirror table tr:first-child th{border-top:1px solid var(--ate-table-border-color)}:host ::ng-deep .ProseMirror table tr:first-child th:first-child{border-top-left-radius:8px}:host ::ng-deep .ProseMirror table tr:first-child th:last-child{border-top-right-radius:8px}:host ::ng-deep .ProseMirror table tr:last-child td:first-child{border-bottom-left-radius:8px}:host ::ng-deep .ProseMirror table tr:last-child td:last-child{border-bottom-right-radius:8px}:host ::ng-deep .ProseMirror table th{background:var(--ate-table-header-background);font-weight:600;color:var(--ate-table-header-color)}:host ::ng-deep .ProseMirror table .selectedCell:after{background:var(--ate-table-cell-selected-background);content:\"\";inset:0;pointer-events:none;position:absolute;z-index:2}:host ::ng-deep .ProseMirror table .column-resize-handle{position:absolute;right:-2px;top:0;bottom:0;width:4px;background-color:var(--ate-table-resize-handle-color);opacity:0;transition:opacity .2s ease}:host ::ng-deep .ProseMirror table:hover .column-resize-handle{opacity:1}:host ::ng-deep .ProseMirror table .column-resize-handle:hover{background-color:var(--ate-focus-color)}:host ::ng-deep .ProseMirror .tableWrapper{overflow-x:auto;margin:1em 0;border-radius:8px}:host ::ng-deep .ProseMirror .tableWrapper table{margin:0;border-radius:8px;min-width:600px;overflow:hidden}:host ::ng-deep .ProseMirror table p{margin:0}:host ::ng-deep .ProseMirror table tbody tr:hover td{background-color:var(--ate-table-row-hover-background)}\n"], dependencies: [{ kind: "component", type: TiptapToolbarComponent, selector: "tiptap-toolbar", inputs: ["editor", "config", "imageUpload", "floating"] }, { kind: "component", type: TiptapBubbleMenuComponent, selector: "tiptap-bubble-menu", inputs: ["config"] }, { kind: "component", type: TiptapImageBubbleMenuComponent, selector: "tiptap-image-bubble-menu", inputs: ["config"] }, { kind: "component", type: TiptapTableBubbleMenuComponent, selector: "tiptap-table-bubble-menu", inputs: ["config"] }, { kind: "component", type: TiptapCellBubbleMenuComponent, selector: "tiptap-cell-bubble-menu", inputs: ["config"] }, { kind: "component", type: TiptapSlashCommandsComponent, selector: "tiptap-slash-commands", inputs: ["editor", "config"] }, { kind: "component", type: TiptapLinkBubbleMenuComponent, selector: "tiptap-link-bubble-menu", inputs: ["editor"] }, { kind: "component", type: TiptapColorBubbleMenuComponent, selector: "tiptap-color-bubble-menu", inputs: ["editor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "editorElement", first: true, predicate: ["editorElement"], descendants: true, isSignal: true }], hostDirectives: [{ directive: NoopValueAccessorDirective }], ngImport: i0, template: `
+    <div class="tiptap-editor">
+      <!-- Toolbar -->
+      @if (editable() && !mergedDisabled() && finalShowToolbar() && editor()) {
+      <tiptap-toolbar 
+        [editor]="editor()!" 
+        [config]="finalToolbarConfig()"
+        [imageUpload]="finalImageUploadConfig()"
+        [floating]="finalFloatingToolbar()"
+        (mouseenter)="hideBubbleMenus()"
+        (mouseleave)="showBubbleMenus()"
+      />
+      }
+
+      @if (finalShowEditToggle() && !mergedDisabled()) {
+      <tiptap-edit-toggle 
+        [editable]="editable()" 
+        [translations]="currentTranslations()"
+        (toggle)="toggleEditMode($event)"
+      />
+      }
+
+      <!-- Editor Content -->
+      <div
+        #editorElement
+        class="tiptap-content"
+        [class.drag-over]="isDragOver()"
+        (dragover)="onDragOver($event)"
+        (drop)="onDrop($event)"
+        (click)="onEditorClick($event)"
+      ></div>
+
+      <!-- Text Bubble Menu -->
+      @if (editable() && finalShowBubbleMenu() && editor()) {
+      <tiptap-bubble-menu
+        [editor]="editor()!"
+        [config]="finalBubbleMenuConfig()"
+        [style.display]="editorFullyInitialized() ? 'block' : 'none'"
+      ></tiptap-bubble-menu>
+      }
+
+      <!-- Image Bubble Menu -->
+      @if (editable() && finalShowImageBubbleMenu() && editor()) {
+      <tiptap-image-bubble-menu
+        [editor]="editor()!"
+        [config]="finalImageBubbleMenuConfig()"
+        [imageUpload]="finalImageUploadConfig()"
+        [style.display]="editorFullyInitialized() ? 'block' : 'none'"
+      ></tiptap-image-bubble-menu>
+      }
+
+      <!-- Link Bubble Menu -->
+      @if (editable() && editor()) {
+      <tiptap-link-bubble-menu
+        [editor]="editor()!"
+        [style.display]="editorFullyInitialized() ? 'block' : 'none'"
+      ></tiptap-link-bubble-menu>
+      }
+
+      <!-- Color Bubble Menu -->
+      @if (editable() && editor()) {
+      <tiptap-color-bubble-menu
+        [editor]="editor()!"
+        [style.display]="editorFullyInitialized() ? 'block' : 'none'"
+      ></tiptap-color-bubble-menu>
+      }
+
+      <!-- Slash Commands -->
+      @if (editable() && finalEnableSlashCommands() && editor()) {
+      <tiptap-slash-commands
+        [editor]="editor()!"
+        [config]="finalSlashCommandsConfig()"
+        [style.display]="editorFullyInitialized() ? 'block' : 'none'"
+      ></tiptap-slash-commands>
+      }
+
+      <!-- Table Menu -->
+      @if (editable() && finalShowTableBubbleMenu() && editor()) {
+      <tiptap-table-bubble-menu
+        [editor]="editor()!"
+        [config]="finalTableBubbleMenuConfig()"
+        [style.display]="editorFullyInitialized() ? 'block' : 'none'"
+      ></tiptap-table-bubble-menu>
+      }
+
+      <!-- Cell Menu -->
+      @if (editable() && finalShowCellBubbleMenu() && editor()) {
+      <tiptap-cell-bubble-menu
+        [editor]="editor()!"
+        [config]="finalCellBubbleMenuConfig()"
+        [style.display]="editorFullyInitialized() ? 'block' : 'none'"
+      ></tiptap-cell-bubble-menu>
+      }
+
+      <!-- Counters -->
+      @if (editable() && !mergedDisabled() && finalShowFooter() && (finalShowCharacterCount() || finalShowWordCount())) {
+      <div class="character-count" [class.limit-reached]="finalMaxCharacters() && characterCount() >= finalMaxCharacters()!">
+        @if (finalShowCharacterCount()) {
+          {{ characterCount() }}
+          {{ currentTranslations().editor.character }}{{ characterCount() > 1 ? "s" : "" }}
+          @if (finalMaxCharacters()) {
+            / {{ finalMaxCharacters() }}
+          }
+        }
+        
+        @if (finalShowCharacterCount() && finalShowWordCount()) {
+          , 
+        }
+
+        @if (finalShowWordCount()) {
+          {{ wordCount() }}
+          {{ currentTranslations().editor.word }}{{ wordCount() > 1 ? "s" : "" }}
+        }
+      </div>
+      }
+    </div>
+  `, isInline: true, styles: [":host{--ate-primary: #2563eb;--ate-primary-contrast: #ffffff;--ate-primary-light: color-mix(in srgb, var(--ate-primary), transparent 90%);--ate-primary-lighter: color-mix(in srgb, var(--ate-primary), transparent 95%);--ate-primary-light-alpha: color-mix(in srgb, var(--ate-primary), transparent 85%);--ate-surface: #ffffff;--ate-surface-secondary: #f8f9fa;--ate-surface-tertiary: #f1f5f9;--ate-text: #2d3748;--ate-text-secondary: #64748b;--ate-text-muted: #a0aec0;--ate-border: #e2e8f0;--ate-highlight-bg: #fef08a;--ate-highlight-color: #854d0e;--ate-button-hover: #f1f5f9;--ate-button-active: #e2e8f0;--ate-error-color: #c53030;--ate-error-bg: #fed7d7;--ate-error-border: #feb2b2;--ate-border-color: var(--ate-border);--ate-border-width: 2px;--ate-border-radius: 12px;--ate-focus-color: var(--ate-primary);--ate-background: var(--ate-surface);--ate-sub-border-radius: 8px;--ate-text-color: var(--ate-text);--ate-placeholder-color: var(--ate-text-muted);--ate-line-height: 1.6;--ate-content-padding: 16px;--ate-menu-bg: var(--ate-surface);--ate-menu-border-radius: var(--ate-border-radius);--ate-menu-border: var(--ate-border);--ate-menu-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--ate-menu-padding: 6px;--ate-toolbar-padding: var(--ate-menu-padding);--ate-toolbar-background: var(--ate-surface-secondary);--ate-toolbar-border-color: var(--ate-border);--ate-toolbar-button-color: var(--ate-text-secondary);--ate-toolbar-button-hover-background: transparent;--ate-toolbar-button-active-background: var(--ate-primary-light);--ate-toolbar-button-active-color: var(--ate-primary);--ate-counter-color: var(--ate-text-secondary);--ate-counter-background: var(--ate-surface-secondary);--ate-counter-border-color: var(--ate-border);--ate-drag-background: #f0f8ff;--ate-drag-border-color: var(--ate-primary);--ate-blockquote-border-color: var(--ate-border);--ate-blockquote-background: var(--ate-surface-secondary);--ate-code-background: var(--ate-surface-secondary);--ate-code-color: var(--ate-text-secondary);--ate-code-border-color: var(--ate-border);--ate-code-block-background: #0f172a;--ate-code-block-color: #e2e8f0;--ate-code-block-border-color: var(--ate-border);--ate-image-border-radius: 16px;--ate-image-selected-color: var(--ate-primary);--ate-scrollbar-width: 10px;--ate-scrollbar-thumb: var(--ate-border);--ate-scrollbar-thumb-hover: var(--ate-text-muted);--ate-scrollbar-track: transparent;--ate-table-border-color: var(--ate-border);--ate-table-header-background: var(--ate-surface-secondary);--ate-table-header-color: var(--ate-text);--ate-table-cell-background: var(--ate-surface);--ate-table-cell-selected-background: var(--ate-primary-light);--ate-table-resize-handle-color: var(--ate-primary);--ate-table-row-hover-background: var(--ate-primary-lighter)}:host(.dark),:host([data-theme=\"dark\"]){--ate-primary: #3b82f6;--ate-primary-contrast: #ffffff;--ate-primary-light: color-mix(in srgb, var(--ate-primary), transparent 85%);--ate-primary-lighter: color-mix(in srgb, var(--ate-primary), transparent 92%);--ate-primary-light-alpha: color-mix(in srgb, var(--ate-primary), transparent 80%);--ate-surface: #020617;--ate-surface-secondary: #0f172a;--ate-surface-tertiary: #1e293b;--ate-text: #f8fafc;--ate-text-secondary: #94a3b8;--ate-text-muted: #64748b;--ate-border: #1e293b;--ate-highlight-bg: #854d0e;--ate-highlight-color: #fef08a;--ate-button-hover: #1e293b;--ate-button-active: #0f172a;--ate-menu-border: rgba(255, 255, 255, .1);--ate-menu-shadow: 0 20px 25px -5px rgba(0, 0, 0, .3), 0 10px 10px -5px rgba(0, 0, 0, .2);--ate-error-color: #f87171;--ate-error-bg: #450a0a;--ate-error-border: #7f1d1d;--ate-drag-background: var(--ate-surface-tertiary);--ate-drag-border-color: var(--ate-primary);--ate-blockquote-border-color: var(--ate-primary);--ate-toolbar-button-active-background: var(--ate-primary-light);--ate-toolbar-button-active-color: var(--ate-primary);--ate-button-hover: var(--ate-surface-tertiary);--ate-button-active: var(--ate-surface-secondary);--ate-scrollbar-thumb: var(--ate-surface-tertiary);--ate-scrollbar-thumb-hover: var(--ate-text-muted)}:host(.fill-container){display:block;height:100%}.tiptap-editor{border:var(--ate-border-width) solid var(--ate-border-color);border-radius:var(--ate-border-radius);background:var(--ate-background);overflow:visible;transition:border-color .2s ease;position:relative}:host(.floating-toolbar) .tiptap-editor{overflow:visible}:host(.fill-container) .tiptap-editor{display:flex;flex-direction:column;height:100%}:host(.fill-container) .tiptap-content-wrapper{flex:1;min-height:0}:host(.fill-container) .tiptap-content{flex:1;min-height:0;overflow-y:auto}.tiptap-editor:focus-within{border-color:var(--ate-focus-color)}.tiptap-content{min-height:var(--editor-min-height, 200px);height:var(--editor-height, auto);max-height:var(--editor-max-height, none);overflow-y:var(--editor-overflow, visible);outline:none;position:relative;scrollbar-width:thin;scrollbar-color:var(--ate-scrollbar-thumb) var(--ate-scrollbar-track)}:host(.is-disabled) .tiptap-content{cursor:not-allowed;opacity:.7;-webkit-user-select:none;user-select:none;pointer-events:none;background-color:var(--ate-surface-tertiary)}:host(.is-readonly) .tiptap-content{cursor:default;-webkit-user-select:text;user-select:text}:host(.is-readonly) .tiptap-content ::ng-deep .tiptap-link{cursor:pointer;pointer-events:auto}.tiptap-content::-webkit-scrollbar{width:var(--ate-scrollbar-width)}.tiptap-content-wrapper{position:relative;display:flex;flex-direction:column;min-height:0}.tiptap-content-wrapper .tiptap-content{flex:1}.tiptap-content::-webkit-scrollbar-track{background:var(--ate-scrollbar-track)}.tiptap-content::-webkit-scrollbar-thumb{background:var(--ate-scrollbar-thumb);border:3px solid transparent;background-clip:content-box;border-radius:10px}.tiptap-content::-webkit-scrollbar-thumb:hover{background:var(--ate-scrollbar-thumb-hover);background-clip:content-box}.tiptap-content.drag-over{background:var(--ate-drag-background);border:2px dashed var(--ate-drag-border-color)}.character-count{font-size:12px;color:var(--ate-counter-color);text-align:right;border-top:1px solid var(--ate-counter-border-color);background:var(--ate-counter-background);transition:color .2s ease;border-bottom-left-radius:calc(var(--ate-border-radius) - var(--ate-border-width));border-bottom-right-radius:calc(var(--ate-border-radius) - var(--ate-border-width))}.character-count.limit-reached{color:var(--ate-error-color, #ef4444);font-weight:600}:host ::ng-deep .ProseMirror{padding:var(--ate-content-padding);outline:none;line-height:var(--ate-line-height);color:var(--ate-text-color);min-height:100%;height:100%;word-wrap:break-word;overflow-wrap:break-word}:host ::ng-deep .ProseMirror h1{font-size:2em;font-weight:700;margin-top:0;margin-bottom:.5em}:host ::ng-deep .ProseMirror h2{font-size:1.5em;font-weight:700;margin-top:1em;margin-bottom:.5em}:host ::ng-deep .ProseMirror h3{font-size:1.25em;font-weight:700;margin-top:1em;margin-bottom:.5em}:host ::ng-deep .ProseMirror p{margin:.5em 0}:host ::ng-deep .ProseMirror ul,:host ::ng-deep .ProseMirror ol{padding-left:2em;margin:.5em 0}:host ::ng-deep .ProseMirror blockquote{border-left:4px solid var(--ate-blockquote-border-color);margin:1em 0;background:var(--ate-blockquote-background);padding:.5em 1em;border-radius:0 4px 4px 0}:host ::ng-deep .ProseMirror code{background:var(--ate-code-background);color:var(--ate-code-color);border:1px solid var(--ate-code-border-color);padding:.15em .4em;border-radius:4px;font-family:JetBrains Mono,Fira Code,Monaco,Consolas,monospace;font-size:.85em;font-weight:500}:host ::ng-deep .ProseMirror pre{background:var(--ate-code-block-background);color:var(--ate-code-block-color);border:1px solid var(--ate-code-block-border-color);padding:1em;border-radius:var(--ate-border-radius);overflow-x:auto;margin:1em 0}:host ::ng-deep .ProseMirror pre code{background:none;color:inherit;border:none;padding:0}:host ::ng-deep .ProseMirror p.is-editor-empty:first-child:before{content:attr(data-placeholder);color:var(--ate-placeholder-color);pointer-events:none;float:left;height:0}:host ::ng-deep .ProseMirror[contenteditable=false]{pointer-events:none}:host ::ng-deep .ProseMirror[contenteditable=false] img{cursor:default;pointer-events:none}:host ::ng-deep .ProseMirror[contenteditable=false] img:hover{transform:none;box-shadow:0 2px 8px #0000001a}:host ::ng-deep .ProseMirror[contenteditable=false] img.ProseMirror-selectednode{outline:none}:host ::ng-deep .ProseMirror img{position:relative;display:inline-block;max-width:100%;height:auto;cursor:pointer;transition:all .2s ease;border:2px solid transparent;border-radius:var(--ate-image-border-radius)}:host ::ng-deep .ProseMirror img:hover{border-color:var(--ate-border-color);box-shadow:0 2px 4px #0000001a}:host ::ng-deep .ProseMirror img.ProseMirror-selectednode{border-color:var(--ate-image-selected-color);box-shadow:0 0 0 3px var(--ate-primary-light-alpha);transition:all .2s ease}:host ::ng-deep .ProseMirror .tiptap-image{max-width:100%;height:auto;border-radius:var(--ate-image-border-radius);box-shadow:0 4px 20px #00000014;margin:.5em 0;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);display:block;filter:brightness(1) contrast(1)}:host ::ng-deep .ProseMirror .tiptap-image:hover{box-shadow:0 8px 30px #0000001f;filter:brightness(1.02) contrast(1.02)}:host ::ng-deep .ProseMirror .tiptap-image.ProseMirror-selectednode{outline:2px solid var(--ate-primary);outline-offset:2px;border-radius:var(--ate-image-border-radius);box-shadow:0 0 0 4px var(--ate-primary-light-alpha)}:host ::ng-deep .image-container{margin:.5em 0;text-align:center;border-radius:16px;overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1)}:host ::ng-deep .image-container.image-align-left{text-align:left}:host ::ng-deep .image-container.image-align-center{text-align:center}:host ::ng-deep .image-container.image-align-right{text-align:right}:host ::ng-deep .image-container img{display:inline-block;max-width:100%;height:auto;border-radius:16px}:host ::ng-deep .resizable-image-container{position:relative;display:inline-block;margin:.5em 0}:host ::ng-deep .resize-controls{position:absolute;inset:0;pointer-events:none;z-index:1000}:host ::ng-deep .resize-handle{position:absolute;width:12px;height:12px;background:var(--ate-primary);border:2px solid var(--ate-surface);border-radius:50%;pointer-events:all;cursor:pointer;z-index:1001;transition:all .15s ease;box-shadow:0 2px 6px #0003}:host ::ng-deep .resize-handle:hover{background:var(--ate-primary);box-shadow:0 3px 8px #0000004d}:host ::ng-deep .resize-handle:active{background:var(--ate-primary)}:host ::ng-deep .resize-handle-n:hover,:host ::ng-deep .resize-handle-s:hover{transform:translate(-50%) scale(1.2)}:host ::ng-deep .resize-handle-w:hover,:host ::ng-deep .resize-handle-e:hover{transform:translateY(-50%) scale(1.2)}:host ::ng-deep .resize-handle-n:active,:host ::ng-deep .resize-handle-s:active{transform:translate(-50%) scale(.9)}:host ::ng-deep .resize-handle-w:active,:host ::ng-deep .resize-handle-e:active{transform:translateY(-50%) scale(.9)}:host ::ng-deep .resize-handle-nw:hover,:host ::ng-deep .resize-handle-ne:hover,:host ::ng-deep .resize-handle-sw:hover,:host ::ng-deep .resize-handle-se:hover{transform:scale(1.2)}:host ::ng-deep .resize-handle-nw:active,:host ::ng-deep .resize-handle-ne:active,:host ::ng-deep .resize-handle-sw:active,:host ::ng-deep .resize-handle-se:active{transform:scale(.9)}:host ::ng-deep .resize-handle-nw{top:0;left:-6px;cursor:nw-resize}:host ::ng-deep .resize-handle-n{top:0;left:50%;transform:translate(-50%);cursor:n-resize}:host ::ng-deep .resize-handle-ne{top:0;right:-6px;cursor:ne-resize}:host ::ng-deep .resize-handle-w{top:50%;left:-6px;transform:translateY(-50%);cursor:w-resize}:host ::ng-deep .resize-handle-e{top:50%;right:-6px;transform:translateY(-50%);cursor:e-resize}:host ::ng-deep .resize-handle-sw{bottom:0;left:-6px;cursor:sw-resize}:host ::ng-deep .resize-handle-s{bottom:0;left:50%;transform:translate(-50%);cursor:s-resize}:host ::ng-deep .resize-handle-se{bottom:0;right:-6px;cursor:se-resize}:host ::ng-deep body.resizing{-webkit-user-select:none;user-select:none;cursor:crosshair}:host ::ng-deep body.resizing .ProseMirror{pointer-events:none}:host ::ng-deep body.resizing .ProseMirror .tiptap-image{pointer-events:none}:host ::ng-deep .image-size-info{position:absolute;bottom:-20px;left:50%;transform:translate(-50%);background:#000c;color:#fff;padding:2px 6px;border-radius:3px;font-size:11px;white-space:nowrap;opacity:0;transition:opacity .2s ease}:host ::ng-deep .image-container:hover .image-size-info{opacity:1}:host ::ng-deep .ProseMirror table{border-collapse:separate;border-spacing:0;margin:0;table-layout:fixed;width:100%;border-radius:8px;overflow:hidden}:host ::ng-deep .ProseMirror table td,:host ::ng-deep .ProseMirror table th{border:none;border-right:1px solid var(--ate-table-border-color);border-bottom:1px solid var(--ate-table-border-color);box-sizing:border-box;min-width:1em;padding:8px 12px;position:relative;vertical-align:top;text-align:left}:host ::ng-deep .ProseMirror table td{background:var(--ate-table-cell-background)}:host ::ng-deep .ProseMirror table td:first-child,:host ::ng-deep .ProseMirror table th:first-child{border-left:1px solid var(--ate-table-border-color)}:host ::ng-deep .ProseMirror table tr:first-child td,:host ::ng-deep .ProseMirror table tr:first-child th{border-top:1px solid var(--ate-table-border-color)}:host ::ng-deep .ProseMirror table tr:first-child th:first-child{border-top-left-radius:8px}:host ::ng-deep .ProseMirror table tr:first-child th:last-child{border-top-right-radius:8px}:host ::ng-deep .ProseMirror table tr:last-child td:first-child{border-bottom-left-radius:8px}:host ::ng-deep .ProseMirror table tr:last-child td:last-child{border-bottom-right-radius:8px}:host ::ng-deep .ProseMirror table th{background:var(--ate-table-header-background);font-weight:600;color:var(--ate-table-header-color)}:host ::ng-deep .ProseMirror table .selectedCell:after{background:var(--ate-table-cell-selected-background);content:\"\";inset:0;pointer-events:none;position:absolute;z-index:2}:host ::ng-deep .ProseMirror table .column-resize-handle{position:absolute;right:-2px;top:0;bottom:0;width:4px;background-color:var(--ate-table-resize-handle-color);opacity:0;transition:opacity .2s ease}:host ::ng-deep .ProseMirror table:hover .column-resize-handle{opacity:1}:host ::ng-deep .ProseMirror table .column-resize-handle:hover{background-color:var(--ate-focus-color)}:host ::ng-deep .ProseMirror .tableWrapper{overflow-x:auto;margin:1em 0;border-radius:8px}:host ::ng-deep .ProseMirror .tableWrapper table{margin:0;border-radius:8px;min-width:600px;overflow:hidden}:host ::ng-deep .ProseMirror table p{margin:0}:host ::ng-deep .ProseMirror table tbody tr:hover td{background-color:var(--ate-table-row-hover-background)}\n"], dependencies: [{ kind: "component", type: TiptapToolbarComponent, selector: "tiptap-toolbar", inputs: ["editor", "config", "imageUpload", "floating"] }, { kind: "component", type: TiptapBubbleMenuComponent, selector: "tiptap-bubble-menu", inputs: ["config"] }, { kind: "component", type: TiptapImageBubbleMenuComponent, selector: "tiptap-image-bubble-menu", inputs: ["config", "imageUpload"] }, { kind: "component", type: TiptapTableBubbleMenuComponent, selector: "tiptap-table-bubble-menu", inputs: ["config"] }, { kind: "component", type: TiptapCellBubbleMenuComponent, selector: "tiptap-cell-bubble-menu", inputs: ["config"] }, { kind: "component", type: TiptapSlashCommandsComponent, selector: "tiptap-slash-commands", inputs: ["editor", "config"] }, { kind: "component", type: TiptapLinkBubbleMenuComponent, selector: "tiptap-link-bubble-menu", inputs: ["editor"] }, { kind: "component", type: TiptapColorBubbleMenuComponent, selector: "tiptap-color-bubble-menu", inputs: ["editor"] }, { kind: "component", type: TiptapEditToggleComponent, selector: "tiptap-edit-toggle", inputs: ["editable", "translations"], outputs: ["toggle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: AngularTiptapEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: "angular-tiptap-editor", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [NoopValueAccessorDirective], host: {
-                        '[class.fill-container]': 'fillContainer()',
-                        '[class.floating-toolbar]': 'floatingToolbar()',
+                        '[class.fill-container]': 'finalFillContainer()',
+                        '[class.floating-toolbar]': 'finalFloatingToolbar()',
                         '[class.is-readonly]': '!editable() && !mergedDisabled()',
                         '[class.is-disabled]': 'mergedDisabled()',
-                        '[style.--ate-border-width]': "seamless() || mergedDisabled() ? '0' : null",
-                        '[style.--ate-background]': "seamless() ? 'transparent' : (mergedDisabled() ? 'var(--ate-surface-tertiary)' : null)",
-                        '[style.--ate-toolbar-border-color]': "seamless() ? 'transparent' : null",
-                        '[style.--ate-counter-background]': "seamless() ? 'transparent' : null",
-                        '[style.--ate-counter-border-color]': "seamless() ? 'transparent' : null",
+                        '[style.--ate-border-width]': "finalSeamless() || mergedDisabled() ? '0' : null",
+                        '[style.--ate-background]': "finalSeamless() ? 'transparent' : (mergedDisabled() ? 'var(--ate-surface-tertiary)' : null)",
+                        '[style.--ate-toolbar-border-color]': "finalSeamless() ? 'transparent' : null",
+                        '[style.--ate-counter-background]': "finalSeamless() ? 'transparent' : null",
+                        '[style.--ate-counter-border-color]': "finalSeamless() ? 'transparent' : null",
+                        '[class.dark]': "config().theme === 'dark'",
+                        '[attr.data-theme]': "config().theme",
                     }, imports: [
                         TiptapToolbarComponent,
                         TiptapBubbleMenuComponent,
@@ -6212,119 +6345,129 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
                         TiptapSlashCommandsComponent,
                         TiptapLinkBubbleMenuComponent,
                         TiptapColorBubbleMenuComponent,
+                        TiptapEditToggleComponent,
                     ], providers: [
                         EditorCommandsService,
                         ImageService,
                         ColorPickerService,
                         LinkService,
-                    ], template: `
-    <div class="tiptap-editor">
-      <!-- Toolbar -->
-      @if (editable() && !mergedDisabled() && showToolbar() && editor()) {
-      <tiptap-toolbar 
-        [editor]="editor()!" 
-        [config]="toolbarConfig()"
-        [imageUpload]="imageUploadConfig()"
-        [floating]="floatingToolbar()"
-        (mouseenter)="hideBubbleMenus()"
-        (mouseleave)="showBubbleMenus()"
-      />
-      }
-
-      <!-- Editor Content -->
-      <div
-        #editorElement
-        class="tiptap-content"
-        [class.drag-over]="isDragOver()"
-        (dragover)="onDragOver($event)"
-        (drop)="onDrop($event)"
-        (click)="onEditorClick($event)"
-      ></div>
-
-      <!-- Text Bubble Menu -->
-      @if (editable() && showBubbleMenu() && editor()) {
-      <tiptap-bubble-menu
-        [editor]="editor()!"
-        [config]="bubbleMenuConfig()"
-        [style.display]="editorFullyInitialized() ? 'block' : 'none'"
-      ></tiptap-bubble-menu>
-      }
-
-      <!-- Image Bubble Menu -->
-      @if (editable() && showImageBubbleMenu() && editor()) {
-      <tiptap-image-bubble-menu
-        [editor]="editor()!"
-        [config]="imageBubbleMenuConfig()"
-        [style.display]="editorFullyInitialized() ? 'block' : 'none'"
-      ></tiptap-image-bubble-menu>
-      }
-
-      <!-- Link Bubble Menu -->
-      @if (editable() && editor()) {
-      <tiptap-link-bubble-menu
-        [editor]="editor()!"
-        [style.display]="editorFullyInitialized() ? 'block' : 'none'"
-      ></tiptap-link-bubble-menu>
-      }
-
-      <!-- Color Bubble Menu -->
-      @if (editable() && editor()) {
-      <tiptap-color-bubble-menu
-        [editor]="editor()!"
-        [style.display]="editorFullyInitialized() ? 'block' : 'none'"
-      ></tiptap-color-bubble-menu>
-      }
-
-      <!-- Slash Commands -->
-      @if (editable() && enableSlashCommands() && editor()) {
-      <tiptap-slash-commands
-        [editor]="editor()!"
-        [config]="slashCommandsConfigComputed()"
-        [style.display]="editorFullyInitialized() ? 'block' : 'none'"
-      ></tiptap-slash-commands>
-      }
-
-      <!-- Table Menu -->
-      @if (editable() && editor()) {
-      <tiptap-table-bubble-menu
-        [editor]="editor()!"
-        [config]="tableBubbleMenuConfig()"
-        [style.display]="editorFullyInitialized() ? 'block' : 'none'"
-      ></tiptap-table-bubble-menu>
-      }
-
-      <!-- Cell Menu -->
-      @if (editable() && editor()) {
-      <tiptap-cell-bubble-menu
-        [editor]="editor()!"
-        [config]="cellBubbleMenuConfig()"
-        [style.display]="editorFullyInitialized() ? 'block' : 'none'"
-      ></tiptap-cell-bubble-menu>
-      }
-
-      <!-- Counters -->
-      @if (editable() && !mergedDisabled() && showFooter() && (showCharacterCount() || showWordCount())) {
-      <div class="character-count" [class.limit-reached]="maxCharacters() && characterCount() >= maxCharacters()!">
-        @if (showCharacterCount()) {
-          {{ characterCount() }}
-          {{ currentTranslations().editor.character }}{{ characterCount() > 1 ? "s" : "" }}
-          @if (maxCharacters()) {
-            / {{ maxCharacters() }}
-          }
-        }
-        
-        @if (showCharacterCount() && showWordCount()) {
-          , 
-        }
-
-        @if (showWordCount()) {
-          {{ wordCount() }}
-          {{ currentTranslations().editor.word }}{{ wordCount() > 1 ? "s" : "" }}
-        }
-      </div>
-      }
-    </div>
-  `, styles: [":host{--ate-primary: #2563eb;--ate-primary-contrast: #ffffff;--ate-primary-light: color-mix(in srgb, var(--ate-primary), transparent 90%);--ate-primary-lighter: color-mix(in srgb, var(--ate-primary), transparent 95%);--ate-primary-light-alpha: color-mix(in srgb, var(--ate-primary), transparent 85%);--ate-surface: #ffffff;--ate-surface-secondary: #f8f9fa;--ate-surface-tertiary: #f1f5f9;--ate-text: #2d3748;--ate-text-secondary: #64748b;--ate-text-muted: #a0aec0;--ate-border: #e2e8f0;--ate-highlight-bg: #fef08a;--ate-highlight-color: #854d0e;--ate-button-hover: #f1f5f9;--ate-button-active: #e2e8f0;--ate-error-color: #c53030;--ate-error-bg: #fed7d7;--ate-error-border: #feb2b2;--ate-border-color: var(--ate-border);--ate-border-width: 2px;--ate-border-radius: 12px;--ate-focus-color: var(--ate-primary);--ate-background: var(--ate-surface);--ate-sub-border-radius: 8px;--ate-text-color: var(--ate-text);--ate-placeholder-color: var(--ate-text-muted);--ate-line-height: 1.6;--ate-content-padding: 16px;--ate-menu-bg: var(--ate-surface-secondary);--ate-menu-border: var(--ate-border);--ate-menu-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--ate-menu-padding: 6px;--ate-toolbar-padding: var(--ate-menu-padding);--ate-toolbar-background: var(--ate-surface-secondary);--ate-toolbar-border-color: var(--ate-border);--ate-toolbar-button-color: var(--ate-text-secondary);--ate-toolbar-button-hover-background: transparent;--ate-toolbar-button-active-background: var(--ate-primary-light);--ate-toolbar-button-active-color: var(--ate-primary);--ate-counter-color: var(--ate-text-secondary);--ate-counter-background: var(--ate-surface-secondary);--ate-counter-border-color: var(--ate-border);--ate-drag-background: #f0f8ff;--ate-drag-border-color: var(--ate-primary);--ate-blockquote-border-color: var(--ate-border);--ate-blockquote-background: var(--ate-surface-secondary);--ate-code-background: var(--ate-surface-secondary);--ate-code-color: var(--ate-text-secondary);--ate-code-border-color: var(--ate-border);--ate-code-block-background: #0f172a;--ate-code-block-color: #e2e8f0;--ate-code-block-border-color: var(--ate-border);--ate-image-border-radius: var(--ate-sub-border-radius);--ate-image-selected-color: var(--ate-primary);--ate-scrollbar-width: 10px;--ate-scrollbar-thumb: var(--ate-border);--ate-scrollbar-thumb-hover: var(--ate-text-muted);--ate-scrollbar-track: transparent;--ate-table-border-color: var(--ate-border);--ate-table-header-background: var(--ate-surface-secondary);--ate-table-header-color: var(--ate-text);--ate-table-cell-background: var(--ate-surface);--ate-table-cell-selected-background: var(--ate-primary-light);--ate-table-resize-handle-color: var(--ate-primary);--ate-table-row-hover-background: var(--ate-primary-lighter)}:host(.dark),:host([data-theme=\"dark\"]){--ate-primary: #3b82f6;--ate-primary-contrast: #ffffff;--ate-primary-light: color-mix(in srgb, var(--ate-primary), transparent 85%);--ate-primary-lighter: color-mix(in srgb, var(--ate-primary), transparent 92%);--ate-primary-light-alpha: color-mix(in srgb, var(--ate-primary), transparent 80%);--ate-surface: #020617;--ate-surface-secondary: #0f172a;--ate-surface-tertiary: #1e293b;--ate-text: #f8fafc;--ate-text-secondary: #94a3b8;--ate-text-muted: #64748b;--ate-border: #1e293b;--ate-highlight-bg: #854d0e;--ate-highlight-color: #fef08a;--ate-button-hover: #1e293b;--ate-button-active: #0f172a;--ate-menu-border: rgba(255, 255, 255, .1);--ate-menu-shadow: 0 20px 25px -5px rgba(0, 0, 0, .3), 0 10px 10px -5px rgba(0, 0, 0, .2);--ate-error-color: #f87171;--ate-error-bg: #450a0a;--ate-error-border: #7f1d1d;--ate-drag-background: var(--ate-surface-tertiary);--ate-drag-border-color: var(--ate-primary);--ate-blockquote-border-color: var(--ate-primary);--ate-toolbar-button-active-background: var(--ate-primary-light);--ate-toolbar-button-active-color: var(--ate-primary);--ate-button-hover: var(--ate-surface-tertiary);--ate-button-active: var(--ate-surface-secondary);--ate-scrollbar-thumb: var(--ate-surface-tertiary);--ate-scrollbar-thumb-hover: var(--ate-text-muted)}:host(.fill-container){display:block;height:100%}.tiptap-editor{border:var(--ate-border-width) solid var(--ate-border-color);border-radius:var(--ate-border-radius);background:var(--ate-background);overflow:hidden;transition:border-color .2s ease;position:relative}:host(.floating-toolbar) .tiptap-editor{overflow:visible}:host(.fill-container) .tiptap-editor{display:flex;flex-direction:column;height:100%}:host(.fill-container) .tiptap-content{flex:1;min-height:0;overflow-y:auto}.tiptap-editor:focus-within{border-color:var(--ate-focus-color)}.tiptap-content{min-height:var(--editor-min-height, 200px);height:var(--editor-height, auto);max-height:var(--editor-max-height, none);overflow-y:var(--editor-overflow, visible);outline:none;position:relative;scrollbar-width:thin;scrollbar-color:var(--ate-scrollbar-thumb) var(--ate-scrollbar-track)}:host(.is-disabled) .tiptap-content{cursor:not-allowed;opacity:.7;-webkit-user-select:none;user-select:none;pointer-events:none;background-color:var(--ate-surface-tertiary)}:host(.is-readonly) .tiptap-content{cursor:default;-webkit-user-select:text;user-select:text}:host(.is-readonly) .tiptap-content ::ng-deep .tiptap-link{cursor:pointer;pointer-events:auto}.tiptap-content::-webkit-scrollbar{width:var(--ate-scrollbar-width);height:var(--ate-scrollbar-width)}.tiptap-content::-webkit-scrollbar-track{background:var(--ate-scrollbar-track)}.tiptap-content::-webkit-scrollbar-thumb{background:var(--ate-scrollbar-thumb);border:3px solid transparent;background-clip:content-box;border-radius:10px}.tiptap-content::-webkit-scrollbar-thumb:hover{background:var(--ate-scrollbar-thumb-hover);background-clip:content-box}.tiptap-content.drag-over{background:var(--ate-drag-background);border:2px dashed var(--ate-drag-border-color)}.character-count{padding:8px var(--ate-content-padding);font-size:12px;color:var(--ate-counter-color);text-align:right;border-top:1px solid var(--ate-counter-border-color);background:var(--ate-counter-background);transition:color .2s ease;border-bottom-left-radius:calc(var(--ate-border-radius) - var(--ate-border-width));border-bottom-right-radius:calc(var(--ate-border-radius) - var(--ate-border-width))}.character-count.limit-reached{color:var(--ate-error-color, #ef4444);font-weight:600}:host ::ng-deep .ProseMirror{padding:var(--ate-content-padding);outline:none;line-height:var(--ate-line-height);color:var(--ate-text-color);min-height:100%;height:100%;word-wrap:break-word;overflow-wrap:break-word}:host ::ng-deep .ProseMirror h1{font-size:2em;font-weight:700;margin-top:0;margin-bottom:.5em}:host ::ng-deep .ProseMirror h2{font-size:1.5em;font-weight:700;margin-top:1em;margin-bottom:.5em}:host ::ng-deep .ProseMirror h3{font-size:1.25em;font-weight:700;margin-top:1em;margin-bottom:.5em}:host ::ng-deep .ProseMirror p{margin:.5em 0}:host ::ng-deep .ProseMirror ul,:host ::ng-deep .ProseMirror ol{padding-left:2em;margin:.5em 0}:host ::ng-deep .ProseMirror blockquote{border-left:4px solid var(--ate-blockquote-border-color);margin:1em 0;background:var(--ate-blockquote-background);padding:.5em 1em;border-radius:0 4px 4px 0}:host ::ng-deep .ProseMirror code{background:var(--ate-code-background);color:var(--ate-code-color);border:1px solid var(--ate-code-border-color);padding:.15em .4em;border-radius:4px;font-family:JetBrains Mono,Fira Code,Monaco,Consolas,monospace;font-size:.85em;font-weight:500}:host ::ng-deep .ProseMirror pre{background:var(--ate-code-block-background);color:var(--ate-code-block-color);border:1px solid var(--ate-code-block-border-color);padding:1em;border-radius:var(--ate-border-radius);overflow-x:auto;margin:1em 0}:host ::ng-deep .ProseMirror pre code{background:none;color:inherit;border:none;padding:0}:host ::ng-deep .ProseMirror p.is-editor-empty:first-child:before{content:attr(data-placeholder);color:var(--ate-placeholder-color);pointer-events:none;float:left;height:0}:host ::ng-deep .ProseMirror[contenteditable=false]{pointer-events:none}:host ::ng-deep .ProseMirror[contenteditable=false] img{cursor:default;pointer-events:none}:host ::ng-deep .ProseMirror[contenteditable=false] img:hover{transform:none;box-shadow:0 2px 8px #0000001a}:host ::ng-deep .ProseMirror[contenteditable=false] img.ProseMirror-selectednode{outline:none}:host ::ng-deep .ProseMirror img{position:relative;display:inline-block;max-width:100%;height:auto;cursor:pointer;transition:all .2s ease;border:2px solid transparent;border-radius:var(--ate-image-border-radius)}:host ::ng-deep .ProseMirror img:hover{border-color:var(--ate-border-color);box-shadow:0 2px 4px #0000001a}:host ::ng-deep .ProseMirror img.ProseMirror-selectednode{border-color:var(--ate-image-selected-color);box-shadow:0 0 0 3px var(--ate-primary-light-alpha);transition:all .2s ease}:host ::ng-deep .ProseMirror .tiptap-image{max-width:100%;height:auto;border-radius:16px;box-shadow:0 4px 20px #00000014;margin:.5em 0;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);display:block;filter:brightness(1) contrast(1)}:host ::ng-deep .ProseMirror .tiptap-image:hover{box-shadow:0 8px 30px #0000001f;filter:brightness(1.02) contrast(1.02)}:host ::ng-deep .ProseMirror .tiptap-image.ProseMirror-selectednode{outline:2px solid var(--ate-primary);outline-offset:2px;border-radius:16px;box-shadow:0 0 0 4px var(--ate-primary-light-alpha)}:host ::ng-deep .image-container{margin:.5em 0;text-align:center;border-radius:16px;overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1)}:host ::ng-deep .image-container.image-align-left{text-align:left}:host ::ng-deep .image-container.image-align-center{text-align:center}:host ::ng-deep .image-container.image-align-right{text-align:right}:host ::ng-deep .image-container img{display:inline-block;max-width:100%;height:auto;border-radius:16px}:host ::ng-deep .resizable-image-container{position:relative;display:inline-block;margin:.5em 0}:host ::ng-deep .resize-controls{position:absolute;inset:0;pointer-events:none;z-index:1000}:host ::ng-deep .resize-handle{position:absolute;width:12px;height:12px;background:var(--ate-primary);border:2px solid var(--ate-surface);border-radius:50%;pointer-events:all;cursor:pointer;z-index:1001;transition:all .15s ease;box-shadow:0 2px 6px #0003}:host ::ng-deep .resize-handle:hover{background:var(--ate-primary);box-shadow:0 3px 8px #0000004d}:host ::ng-deep .resize-handle:active{background:var(--ate-primary)}:host ::ng-deep .resize-handle-n:hover,:host ::ng-deep .resize-handle-s:hover{transform:translate(-50%) scale(1.2)}:host ::ng-deep .resize-handle-w:hover,:host ::ng-deep .resize-handle-e:hover{transform:translateY(-50%) scale(1.2)}:host ::ng-deep .resize-handle-n:active,:host ::ng-deep .resize-handle-s:active{transform:translate(-50%) scale(.9)}:host ::ng-deep .resize-handle-w:active,:host ::ng-deep .resize-handle-e:active{transform:translateY(-50%) scale(.9)}:host ::ng-deep .resize-handle-nw:hover,:host ::ng-deep .resize-handle-ne:hover,:host ::ng-deep .resize-handle-sw:hover,:host ::ng-deep .resize-handle-se:hover{transform:scale(1.2)}:host ::ng-deep .resize-handle-nw:active,:host ::ng-deep .resize-handle-ne:active,:host ::ng-deep .resize-handle-sw:active,:host ::ng-deep .resize-handle-se:active{transform:scale(.9)}:host ::ng-deep .resize-handle-nw{top:0;left:-6px;cursor:nw-resize}:host ::ng-deep .resize-handle-n{top:0;left:50%;transform:translate(-50%);cursor:n-resize}:host ::ng-deep .resize-handle-ne{top:0;right:-6px;cursor:ne-resize}:host ::ng-deep .resize-handle-w{top:50%;left:-6px;transform:translateY(-50%);cursor:w-resize}:host ::ng-deep .resize-handle-e{top:50%;right:-6px;transform:translateY(-50%);cursor:e-resize}:host ::ng-deep .resize-handle-sw{bottom:0;left:-6px;cursor:sw-resize}:host ::ng-deep .resize-handle-s{bottom:0;left:50%;transform:translate(-50%);cursor:s-resize}:host ::ng-deep .resize-handle-se{bottom:0;right:-6px;cursor:se-resize}:host ::ng-deep body.resizing{-webkit-user-select:none;user-select:none;cursor:crosshair}:host ::ng-deep body.resizing .ProseMirror{pointer-events:none}:host ::ng-deep body.resizing .ProseMirror .tiptap-image{pointer-events:none}:host ::ng-deep .image-size-info{position:absolute;bottom:-20px;left:50%;transform:translate(-50%);background:#000c;color:#fff;padding:2px 6px;border-radius:3px;font-size:11px;white-space:nowrap;opacity:0;transition:opacity .2s ease}:host ::ng-deep .image-container:hover .image-size-info{opacity:1}:host ::ng-deep .ProseMirror table{border-collapse:separate;border-spacing:0;margin:0;table-layout:fixed;width:100%;border-radius:8px;overflow:hidden}:host ::ng-deep .ProseMirror table td,:host ::ng-deep .ProseMirror table th{border:none;border-right:1px solid var(--ate-table-border-color);border-bottom:1px solid var(--ate-table-border-color);box-sizing:border-box;min-width:1em;padding:8px 12px;position:relative;vertical-align:top;text-align:left}:host ::ng-deep .ProseMirror table td{background:var(--ate-table-cell-background)}:host ::ng-deep .ProseMirror table td:first-child,:host ::ng-deep .ProseMirror table th:first-child{border-left:1px solid var(--ate-table-border-color)}:host ::ng-deep .ProseMirror table tr:first-child td,:host ::ng-deep .ProseMirror table tr:first-child th{border-top:1px solid var(--ate-table-border-color)}:host ::ng-deep .ProseMirror table tr:first-child th:first-child{border-top-left-radius:8px}:host ::ng-deep .ProseMirror table tr:first-child th:last-child{border-top-right-radius:8px}:host ::ng-deep .ProseMirror table tr:last-child td:first-child{border-bottom-left-radius:8px}:host ::ng-deep .ProseMirror table tr:last-child td:last-child{border-bottom-right-radius:8px}:host ::ng-deep .ProseMirror table th{background:var(--ate-table-header-background);font-weight:600;color:var(--ate-table-header-color)}:host ::ng-deep .ProseMirror table .selectedCell:after{background:var(--ate-table-cell-selected-background);content:\"\";inset:0;pointer-events:none;position:absolute;z-index:2}:host ::ng-deep .ProseMirror table .column-resize-handle{position:absolute;right:-2px;top:0;bottom:0;width:4px;background-color:var(--ate-table-resize-handle-color);opacity:0;transition:opacity .2s ease}:host ::ng-deep .ProseMirror table:hover .column-resize-handle{opacity:1}:host ::ng-deep .ProseMirror table .column-resize-handle:hover{background-color:var(--ate-focus-color)}:host ::ng-deep .ProseMirror .tableWrapper{overflow-x:auto;margin:1em 0;border-radius:8px}:host ::ng-deep .ProseMirror .tableWrapper table{margin:0;border-radius:8px;min-width:600px;overflow:hidden}:host ::ng-deep .ProseMirror table p{margin:0}:host ::ng-deep .ProseMirror table tbody tr:hover td{background-color:var(--ate-table-row-hover-background)}\n"] }]
+                    ], template: `
+    <div class="tiptap-editor">
+      <!-- Toolbar -->
+      @if (editable() && !mergedDisabled() && finalShowToolbar() && editor()) {
+      <tiptap-toolbar 
+        [editor]="editor()!" 
+        [config]="finalToolbarConfig()"
+        [imageUpload]="finalImageUploadConfig()"
+        [floating]="finalFloatingToolbar()"
+        (mouseenter)="hideBubbleMenus()"
+        (mouseleave)="showBubbleMenus()"
+      />
+      }
+
+      @if (finalShowEditToggle() && !mergedDisabled()) {
+      <tiptap-edit-toggle 
+        [editable]="editable()" 
+        [translations]="currentTranslations()"
+        (toggle)="toggleEditMode($event)"
+      />
+      }
+
+      <!-- Editor Content -->
+      <div
+        #editorElement
+        class="tiptap-content"
+        [class.drag-over]="isDragOver()"
+        (dragover)="onDragOver($event)"
+        (drop)="onDrop($event)"
+        (click)="onEditorClick($event)"
+      ></div>
+
+      <!-- Text Bubble Menu -->
+      @if (editable() && finalShowBubbleMenu() && editor()) {
+      <tiptap-bubble-menu
+        [editor]="editor()!"
+        [config]="finalBubbleMenuConfig()"
+        [style.display]="editorFullyInitialized() ? 'block' : 'none'"
+      ></tiptap-bubble-menu>
+      }
+
+      <!-- Image Bubble Menu -->
+      @if (editable() && finalShowImageBubbleMenu() && editor()) {
+      <tiptap-image-bubble-menu
+        [editor]="editor()!"
+        [config]="finalImageBubbleMenuConfig()"
+        [imageUpload]="finalImageUploadConfig()"
+        [style.display]="editorFullyInitialized() ? 'block' : 'none'"
+      ></tiptap-image-bubble-menu>
+      }
+
+      <!-- Link Bubble Menu -->
+      @if (editable() && editor()) {
+      <tiptap-link-bubble-menu
+        [editor]="editor()!"
+        [style.display]="editorFullyInitialized() ? 'block' : 'none'"
+      ></tiptap-link-bubble-menu>
+      }
+
+      <!-- Color Bubble Menu -->
+      @if (editable() && editor()) {
+      <tiptap-color-bubble-menu
+        [editor]="editor()!"
+        [style.display]="editorFullyInitialized() ? 'block' : 'none'"
+      ></tiptap-color-bubble-menu>
+      }
+
+      <!-- Slash Commands -->
+      @if (editable() && finalEnableSlashCommands() && editor()) {
+      <tiptap-slash-commands
+        [editor]="editor()!"
+        [config]="finalSlashCommandsConfig()"
+        [style.display]="editorFullyInitialized() ? 'block' : 'none'"
+      ></tiptap-slash-commands>
+      }
+
+      <!-- Table Menu -->
+      @if (editable() && finalShowTableBubbleMenu() && editor()) {
+      <tiptap-table-bubble-menu
+        [editor]="editor()!"
+        [config]="finalTableBubbleMenuConfig()"
+        [style.display]="editorFullyInitialized() ? 'block' : 'none'"
+      ></tiptap-table-bubble-menu>
+      }
+
+      <!-- Cell Menu -->
+      @if (editable() && finalShowCellBubbleMenu() && editor()) {
+      <tiptap-cell-bubble-menu
+        [editor]="editor()!"
+        [config]="finalCellBubbleMenuConfig()"
+        [style.display]="editorFullyInitialized() ? 'block' : 'none'"
+      ></tiptap-cell-bubble-menu>
+      }
+
+      <!-- Counters -->
+      @if (editable() && !mergedDisabled() && finalShowFooter() && (finalShowCharacterCount() || finalShowWordCount())) {
+      <div class="character-count" [class.limit-reached]="finalMaxCharacters() && characterCount() >= finalMaxCharacters()!">
+        @if (finalShowCharacterCount()) {
+          {{ characterCount() }}
+          {{ currentTranslations().editor.character }}{{ characterCount() > 1 ? "s" : "" }}
+          @if (finalMaxCharacters()) {
+            / {{ finalMaxCharacters() }}
+          }
+        }
+        
+        @if (finalShowCharacterCount() && finalShowWordCount()) {
+          , 
+        }
+
+        @if (finalShowWordCount()) {
+          {{ wordCount() }}
+          {{ currentTranslations().editor.word }}{{ wordCount() > 1 ? "s" : "" }}
+        }
+      </div>
+      }
+    </div>
+  `, styles: [":host{--ate-primary: #2563eb;--ate-primary-contrast: #ffffff;--ate-primary-light: color-mix(in srgb, var(--ate-primary), transparent 90%);--ate-primary-lighter: color-mix(in srgb, var(--ate-primary), transparent 95%);--ate-primary-light-alpha: color-mix(in srgb, var(--ate-primary), transparent 85%);--ate-surface: #ffffff;--ate-surface-secondary: #f8f9fa;--ate-surface-tertiary: #f1f5f9;--ate-text: #2d3748;--ate-text-secondary: #64748b;--ate-text-muted: #a0aec0;--ate-border: #e2e8f0;--ate-highlight-bg: #fef08a;--ate-highlight-color: #854d0e;--ate-button-hover: #f1f5f9;--ate-button-active: #e2e8f0;--ate-error-color: #c53030;--ate-error-bg: #fed7d7;--ate-error-border: #feb2b2;--ate-border-color: var(--ate-border);--ate-border-width: 2px;--ate-border-radius: 12px;--ate-focus-color: var(--ate-primary);--ate-background: var(--ate-surface);--ate-sub-border-radius: 8px;--ate-text-color: var(--ate-text);--ate-placeholder-color: var(--ate-text-muted);--ate-line-height: 1.6;--ate-content-padding: 16px;--ate-menu-bg: var(--ate-surface);--ate-menu-border-radius: var(--ate-border-radius);--ate-menu-border: var(--ate-border);--ate-menu-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--ate-menu-padding: 6px;--ate-toolbar-padding: var(--ate-menu-padding);--ate-toolbar-background: var(--ate-surface-secondary);--ate-toolbar-border-color: var(--ate-border);--ate-toolbar-button-color: var(--ate-text-secondary);--ate-toolbar-button-hover-background: transparent;--ate-toolbar-button-active-background: var(--ate-primary-light);--ate-toolbar-button-active-color: var(--ate-primary);--ate-counter-color: var(--ate-text-secondary);--ate-counter-background: var(--ate-surface-secondary);--ate-counter-border-color: var(--ate-border);--ate-drag-background: #f0f8ff;--ate-drag-border-color: var(--ate-primary);--ate-blockquote-border-color: var(--ate-border);--ate-blockquote-background: var(--ate-surface-secondary);--ate-code-background: var(--ate-surface-secondary);--ate-code-color: var(--ate-text-secondary);--ate-code-border-color: var(--ate-border);--ate-code-block-background: #0f172a;--ate-code-block-color: #e2e8f0;--ate-code-block-border-color: var(--ate-border);--ate-image-border-radius: 16px;--ate-image-selected-color: var(--ate-primary);--ate-scrollbar-width: 10px;--ate-scrollbar-thumb: var(--ate-border);--ate-scrollbar-thumb-hover: var(--ate-text-muted);--ate-scrollbar-track: transparent;--ate-table-border-color: var(--ate-border);--ate-table-header-background: var(--ate-surface-secondary);--ate-table-header-color: var(--ate-text);--ate-table-cell-background: var(--ate-surface);--ate-table-cell-selected-background: var(--ate-primary-light);--ate-table-resize-handle-color: var(--ate-primary);--ate-table-row-hover-background: var(--ate-primary-lighter)}:host(.dark),:host([data-theme=\"dark\"]){--ate-primary: #3b82f6;--ate-primary-contrast: #ffffff;--ate-primary-light: color-mix(in srgb, var(--ate-primary), transparent 85%);--ate-primary-lighter: color-mix(in srgb, var(--ate-primary), transparent 92%);--ate-primary-light-alpha: color-mix(in srgb, var(--ate-primary), transparent 80%);--ate-surface: #020617;--ate-surface-secondary: #0f172a;--ate-surface-tertiary: #1e293b;--ate-text: #f8fafc;--ate-text-secondary: #94a3b8;--ate-text-muted: #64748b;--ate-border: #1e293b;--ate-highlight-bg: #854d0e;--ate-highlight-color: #fef08a;--ate-button-hover: #1e293b;--ate-button-active: #0f172a;--ate-menu-border: rgba(255, 255, 255, .1);--ate-menu-shadow: 0 20px 25px -5px rgba(0, 0, 0, .3), 0 10px 10px -5px rgba(0, 0, 0, .2);--ate-error-color: #f87171;--ate-error-bg: #450a0a;--ate-error-border: #7f1d1d;--ate-drag-background: var(--ate-surface-tertiary);--ate-drag-border-color: var(--ate-primary);--ate-blockquote-border-color: var(--ate-primary);--ate-toolbar-button-active-background: var(--ate-primary-light);--ate-toolbar-button-active-color: var(--ate-primary);--ate-button-hover: var(--ate-surface-tertiary);--ate-button-active: var(--ate-surface-secondary);--ate-scrollbar-thumb: var(--ate-surface-tertiary);--ate-scrollbar-thumb-hover: var(--ate-text-muted)}:host(.fill-container){display:block;height:100%}.tiptap-editor{border:var(--ate-border-width) solid var(--ate-border-color);border-radius:var(--ate-border-radius);background:var(--ate-background);overflow:visible;transition:border-color .2s ease;position:relative}:host(.floating-toolbar) .tiptap-editor{overflow:visible}:host(.fill-container) .tiptap-editor{display:flex;flex-direction:column;height:100%}:host(.fill-container) .tiptap-content-wrapper{flex:1;min-height:0}:host(.fill-container) .tiptap-content{flex:1;min-height:0;overflow-y:auto}.tiptap-editor:focus-within{border-color:var(--ate-focus-color)}.tiptap-content{min-height:var(--editor-min-height, 200px);height:var(--editor-height, auto);max-height:var(--editor-max-height, none);overflow-y:var(--editor-overflow, visible);outline:none;position:relative;scrollbar-width:thin;scrollbar-color:var(--ate-scrollbar-thumb) var(--ate-scrollbar-track)}:host(.is-disabled) .tiptap-content{cursor:not-allowed;opacity:.7;-webkit-user-select:none;user-select:none;pointer-events:none;background-color:var(--ate-surface-tertiary)}:host(.is-readonly) .tiptap-content{cursor:default;-webkit-user-select:text;user-select:text}:host(.is-readonly) .tiptap-content ::ng-deep .tiptap-link{cursor:pointer;pointer-events:auto}.tiptap-content::-webkit-scrollbar{width:var(--ate-scrollbar-width)}.tiptap-content-wrapper{position:relative;display:flex;flex-direction:column;min-height:0}.tiptap-content-wrapper .tiptap-content{flex:1}.tiptap-content::-webkit-scrollbar-track{background:var(--ate-scrollbar-track)}.tiptap-content::-webkit-scrollbar-thumb{background:var(--ate-scrollbar-thumb);border:3px solid transparent;background-clip:content-box;border-radius:10px}.tiptap-content::-webkit-scrollbar-thumb:hover{background:var(--ate-scrollbar-thumb-hover);background-clip:content-box}.tiptap-content.drag-over{background:var(--ate-drag-background);border:2px dashed var(--ate-drag-border-color)}.character-count{font-size:12px;color:var(--ate-counter-color);text-align:right;border-top:1px solid var(--ate-counter-border-color);background:var(--ate-counter-background);transition:color .2s ease;border-bottom-left-radius:calc(var(--ate-border-radius) - var(--ate-border-width));border-bottom-right-radius:calc(var(--ate-border-radius) - var(--ate-border-width))}.character-count.limit-reached{color:var(--ate-error-color, #ef4444);font-weight:600}:host ::ng-deep .ProseMirror{padding:var(--ate-content-padding);outline:none;line-height:var(--ate-line-height);color:var(--ate-text-color);min-height:100%;height:100%;word-wrap:break-word;overflow-wrap:break-word}:host ::ng-deep .ProseMirror h1{font-size:2em;font-weight:700;margin-top:0;margin-bottom:.5em}:host ::ng-deep .ProseMirror h2{font-size:1.5em;font-weight:700;margin-top:1em;margin-bottom:.5em}:host ::ng-deep .ProseMirror h3{font-size:1.25em;font-weight:700;margin-top:1em;margin-bottom:.5em}:host ::ng-deep .ProseMirror p{margin:.5em 0}:host ::ng-deep .ProseMirror ul,:host ::ng-deep .ProseMirror ol{padding-left:2em;margin:.5em 0}:host ::ng-deep .ProseMirror blockquote{border-left:4px solid var(--ate-blockquote-border-color);margin:1em 0;background:var(--ate-blockquote-background);padding:.5em 1em;border-radius:0 4px 4px 0}:host ::ng-deep .ProseMirror code{background:var(--ate-code-background);color:var(--ate-code-color);border:1px solid var(--ate-code-border-color);padding:.15em .4em;border-radius:4px;font-family:JetBrains Mono,Fira Code,Monaco,Consolas,monospace;font-size:.85em;font-weight:500}:host ::ng-deep .ProseMirror pre{background:var(--ate-code-block-background);color:var(--ate-code-block-color);border:1px solid var(--ate-code-block-border-color);padding:1em;border-radius:var(--ate-border-radius);overflow-x:auto;margin:1em 0}:host ::ng-deep .ProseMirror pre code{background:none;color:inherit;border:none;padding:0}:host ::ng-deep .ProseMirror p.is-editor-empty:first-child:before{content:attr(data-placeholder);color:var(--ate-placeholder-color);pointer-events:none;float:left;height:0}:host ::ng-deep .ProseMirror[contenteditable=false]{pointer-events:none}:host ::ng-deep .ProseMirror[contenteditable=false] img{cursor:default;pointer-events:none}:host ::ng-deep .ProseMirror[contenteditable=false] img:hover{transform:none;box-shadow:0 2px 8px #0000001a}:host ::ng-deep .ProseMirror[contenteditable=false] img.ProseMirror-selectednode{outline:none}:host ::ng-deep .ProseMirror img{position:relative;display:inline-block;max-width:100%;height:auto;cursor:pointer;transition:all .2s ease;border:2px solid transparent;border-radius:var(--ate-image-border-radius)}:host ::ng-deep .ProseMirror img:hover{border-color:var(--ate-border-color);box-shadow:0 2px 4px #0000001a}:host ::ng-deep .ProseMirror img.ProseMirror-selectednode{border-color:var(--ate-image-selected-color);box-shadow:0 0 0 3px var(--ate-primary-light-alpha);transition:all .2s ease}:host ::ng-deep .ProseMirror .tiptap-image{max-width:100%;height:auto;border-radius:var(--ate-image-border-radius);box-shadow:0 4px 20px #00000014;margin:.5em 0;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);display:block;filter:brightness(1) contrast(1)}:host ::ng-deep .ProseMirror .tiptap-image:hover{box-shadow:0 8px 30px #0000001f;filter:brightness(1.02) contrast(1.02)}:host ::ng-deep .ProseMirror .tiptap-image.ProseMirror-selectednode{outline:2px solid var(--ate-primary);outline-offset:2px;border-radius:var(--ate-image-border-radius);box-shadow:0 0 0 4px var(--ate-primary-light-alpha)}:host ::ng-deep .image-container{margin:.5em 0;text-align:center;border-radius:16px;overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1)}:host ::ng-deep .image-container.image-align-left{text-align:left}:host ::ng-deep .image-container.image-align-center{text-align:center}:host ::ng-deep .image-container.image-align-right{text-align:right}:host ::ng-deep .image-container img{display:inline-block;max-width:100%;height:auto;border-radius:16px}:host ::ng-deep .resizable-image-container{position:relative;display:inline-block;margin:.5em 0}:host ::ng-deep .resize-controls{position:absolute;inset:0;pointer-events:none;z-index:1000}:host ::ng-deep .resize-handle{position:absolute;width:12px;height:12px;background:var(--ate-primary);border:2px solid var(--ate-surface);border-radius:50%;pointer-events:all;cursor:pointer;z-index:1001;transition:all .15s ease;box-shadow:0 2px 6px #0003}:host ::ng-deep .resize-handle:hover{background:var(--ate-primary);box-shadow:0 3px 8px #0000004d}:host ::ng-deep .resize-handle:active{background:var(--ate-primary)}:host ::ng-deep .resize-handle-n:hover,:host ::ng-deep .resize-handle-s:hover{transform:translate(-50%) scale(1.2)}:host ::ng-deep .resize-handle-w:hover,:host ::ng-deep .resize-handle-e:hover{transform:translateY(-50%) scale(1.2)}:host ::ng-deep .resize-handle-n:active,:host ::ng-deep .resize-handle-s:active{transform:translate(-50%) scale(.9)}:host ::ng-deep .resize-handle-w:active,:host ::ng-deep .resize-handle-e:active{transform:translateY(-50%) scale(.9)}:host ::ng-deep .resize-handle-nw:hover,:host ::ng-deep .resize-handle-ne:hover,:host ::ng-deep .resize-handle-sw:hover,:host ::ng-deep .resize-handle-se:hover{transform:scale(1.2)}:host ::ng-deep .resize-handle-nw:active,:host ::ng-deep .resize-handle-ne:active,:host ::ng-deep .resize-handle-sw:active,:host ::ng-deep .resize-handle-se:active{transform:scale(.9)}:host ::ng-deep .resize-handle-nw{top:0;left:-6px;cursor:nw-resize}:host ::ng-deep .resize-handle-n{top:0;left:50%;transform:translate(-50%);cursor:n-resize}:host ::ng-deep .resize-handle-ne{top:0;right:-6px;cursor:ne-resize}:host ::ng-deep .resize-handle-w{top:50%;left:-6px;transform:translateY(-50%);cursor:w-resize}:host ::ng-deep .resize-handle-e{top:50%;right:-6px;transform:translateY(-50%);cursor:e-resize}:host ::ng-deep .resize-handle-sw{bottom:0;left:-6px;cursor:sw-resize}:host ::ng-deep .resize-handle-s{bottom:0;left:50%;transform:translate(-50%);cursor:s-resize}:host ::ng-deep .resize-handle-se{bottom:0;right:-6px;cursor:se-resize}:host ::ng-deep body.resizing{-webkit-user-select:none;user-select:none;cursor:crosshair}:host ::ng-deep body.resizing .ProseMirror{pointer-events:none}:host ::ng-deep body.resizing .ProseMirror .tiptap-image{pointer-events:none}:host ::ng-deep .image-size-info{position:absolute;bottom:-20px;left:50%;transform:translate(-50%);background:#000c;color:#fff;padding:2px 6px;border-radius:3px;font-size:11px;white-space:nowrap;opacity:0;transition:opacity .2s ease}:host ::ng-deep .image-container:hover .image-size-info{opacity:1}:host ::ng-deep .ProseMirror table{border-collapse:separate;border-spacing:0;margin:0;table-layout:fixed;width:100%;border-radius:8px;overflow:hidden}:host ::ng-deep .ProseMirror table td,:host ::ng-deep .ProseMirror table th{border:none;border-right:1px solid var(--ate-table-border-color);border-bottom:1px solid var(--ate-table-border-color);box-sizing:border-box;min-width:1em;padding:8px 12px;position:relative;vertical-align:top;text-align:left}:host ::ng-deep .ProseMirror table td{background:var(--ate-table-cell-background)}:host ::ng-deep .ProseMirror table td:first-child,:host ::ng-deep .ProseMirror table th:first-child{border-left:1px solid var(--ate-table-border-color)}:host ::ng-deep .ProseMirror table tr:first-child td,:host ::ng-deep .ProseMirror table tr:first-child th{border-top:1px solid var(--ate-table-border-color)}:host ::ng-deep .ProseMirror table tr:first-child th:first-child{border-top-left-radius:8px}:host ::ng-deep .ProseMirror table tr:first-child th:last-child{border-top-right-radius:8px}:host ::ng-deep .ProseMirror table tr:last-child td:first-child{border-bottom-left-radius:8px}:host ::ng-deep .ProseMirror table tr:last-child td:last-child{border-bottom-right-radius:8px}:host ::ng-deep .ProseMirror table th{background:var(--ate-table-header-background);font-weight:600;color:var(--ate-table-header-color)}:host ::ng-deep .ProseMirror table .selectedCell:after{background:var(--ate-table-cell-selected-background);content:\"\";inset:0;pointer-events:none;position:absolute;z-index:2}:host ::ng-deep .ProseMirror table .column-resize-handle{position:absolute;right:-2px;top:0;bottom:0;width:4px;background-color:var(--ate-table-resize-handle-color);opacity:0;transition:opacity .2s ease}:host ::ng-deep .ProseMirror table:hover .column-resize-handle{opacity:1}:host ::ng-deep .ProseMirror table .column-resize-handle:hover{background-color:var(--ate-focus-color)}:host ::ng-deep .ProseMirror .tableWrapper{overflow-x:auto;margin:1em 0;border-radius:8px}:host ::ng-deep .ProseMirror .tableWrapper table{margin:0;border-radius:8px;min-width:600px;overflow:hidden}:host ::ng-deep .ProseMirror table p{margin:0}:host ::ng-deep .ProseMirror table tbody tr:hover td{background-color:var(--ate-table-row-hover-background)}\n"] }]
         }], ctorParameters: () => [] });
 
 /*