@flogeez/angular-tiptap-editor 2.2.1 → 2.2.3

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, output, ChangeDetectionStrategy, Component, signal, computed, Injectable, inject, effect, ViewChild, Directive, viewChild, DestroyRef, untracked } from '@angular/core';
+import { input, output, ChangeDetectionStrategy, Component, signal, computed, Injectable, inject, viewChild, effect, Directive, DestroyRef, untracked } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { Node as Node$1, nodeInputRule, mergeAttributes, Extension, getAttributes, Editor } from '@tiptap/core';
 import StarterKit from '@tiptap/starter-kit';
@@ -134,10 +134,12 @@ const AteResizableImage = Node$1.create({
             img.alt = node.attrs["alt"] || "";
             img.title = node.attrs["title"] || "";
             img.className = "ate-image";
-            if (node.attrs["width"])
+            if (node.attrs["width"]) {
                 img.width = node.attrs["width"];
-            if (node.attrs["height"])
+            }
+            if (node.attrs["height"]) {
                 img.height = node.attrs["height"];
+            }
             img.parentNode?.insertBefore(container, img);
             container.appendChild(img);
             // Add modern resize controls
@@ -173,13 +175,16 @@ const AteResizableImage = Node$1.create({
                 startX = e.clientX;
                 startY = e.clientY;
                 // Use current image dimensions instead of initial ones
-                startWidth = parseInt(img.getAttribute("width") || "0") || node.attrs["width"] || img.naturalWidth;
-                startHeight = parseInt(img.getAttribute("height") || "0") || node.attrs["height"] || img.naturalHeight;
+                startWidth =
+                    parseInt(img.getAttribute("width") || "0") || node.attrs["width"] || img.naturalWidth;
+                startHeight =
+                    parseInt(img.getAttribute("height") || "0") || node.attrs["height"] || img.naturalHeight;
                 // Add resizing class to body
                 document.body.classList.add("resizing");
                 const handleMouseMove = (e) => {
-                    if (!isResizing)
+                    if (!isResizing) {
                         return;
+                    }
                     const deltaX = e.clientX - startX;
                     const deltaY = e.clientY - startY;
                     let newWidth = startWidth;
@@ -272,15 +277,18 @@ const AteResizableImage = Node$1.create({
                 selectNode,
                 deselectNode,
                 update: updatedNode => {
-                    if (updatedNode.type.name !== "resizableImage")
+                    if (updatedNode.type.name !== "resizableImage") {
                         return false;
+                    }
                     img.src = updatedNode.attrs["src"];
                     img.alt = updatedNode.attrs["alt"] || "";
                     img.title = updatedNode.attrs["title"] || "";
-                    if (updatedNode.attrs["width"])
+                    if (updatedNode.attrs["width"]) {
                         img.width = updatedNode.attrs["width"];
-                    if (updatedNode.attrs["height"])
+                    }
+                    if (updatedNode.attrs["height"]) {
                         img.height = updatedNode.attrs["height"];
+                    }
                     return true;
                 },
             };
@@ -600,14 +608,16 @@ const ATE_INITIAL_EDITOR_STATE = {
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function fastMerge(target, source) {
-    if (!source)
+    if (!source) {
         return;
+    }
     for (const key in source) {
         const sourceVal = source[key];
         // If the value is an object (marks, can, nodes, selection)
         if (sourceVal !== null && typeof sourceVal === "object" && !Array.isArray(sourceVal)) {
-            if (!target[key])
+            if (!target[key]) {
                 target[key] = {};
+            }
             // Merge internal properties
             for (const subKey in sourceVal) {
                 const subVal = sourceVal[subKey];
@@ -644,8 +654,9 @@ const AteTiptapStateExtension = Extension.create({
                 view: () => ({
                     update: _view => {
                         const { editor } = this;
-                        if (!editor)
+                        if (!editor) {
                             return;
+                        }
                         const snapshot = createFreshSnapshot();
                         const calcs = this.options.calculators;
                         for (const calculator of calcs) {
@@ -1246,14 +1257,20 @@ class AteImageService {
     updateImageAttributes(editor, attributes) {
         if (editor.isActive("resizableImage")) {
             const pos = editor.state.selection.from;
-            editor.chain().focus().updateAttributes("resizableImage", attributes).setNodeSelection(pos).run();
+            editor
+                .chain()
+                .focus()
+                .updateAttributes("resizableImage", attributes)
+                .setNodeSelection(pos)
+                .run();
             this.updateSelectedImage(attributes);
         }
     }
     /** Resize image with optional aspect ratio maintenance */
     resizeImage(editor, options) {
-        if (!editor.isActive("resizableImage"))
+        if (!editor.isActive("resizableImage")) {
             return;
+        }
         const currentAttrs = editor.getAttributes("resizableImage");
         let newWidth = options.width;
         let newHeight = options.height;
@@ -1268,10 +1285,12 @@ class AteImageService {
             }
         }
         // Apply minimum limits
-        if (newWidth)
+        if (newWidth) {
             newWidth = Math.max(50, newWidth);
-        if (newHeight)
+        }
+        if (newHeight) {
             newHeight = Math.max(50, newHeight);
+        }
         this.updateImageAttributes(editor, {
             width: newWidth,
             height: newHeight,
@@ -1288,8 +1307,9 @@ class AteImageService {
         this.resizeImage(editor, { width: 800, height: 600, maintainAspectRatio: true });
     }
     resizeImageToOriginal(editor) {
-        if (!editor.isActive("resizableImage"))
+        if (!editor.isActive("resizableImage")) {
             return;
+        }
         const img = new Image();
         img.onload = () => {
             this.resizeImage(editor, { width: img.naturalWidth, height: img.naturalHeight });
@@ -1298,8 +1318,9 @@ class AteImageService {
     }
     /** Get current image dimensions */
     getImageDimensions(editor) {
-        if (!editor.isActive("resizableImage"))
+        if (!editor.isActive("resizableImage")) {
             return null;
+        }
         const attrs = editor.getAttributes("resizableImage");
         return {
             width: attrs["width"] || 0,
@@ -1396,8 +1417,9 @@ class AteImageService {
                 maxSize: options?.maxSize,
                 allowedTypes: options?.allowedTypes,
             });
-            if (!validation.valid)
+            if (!validation.valid) {
                 throw new Error(validation.error);
+            }
             this.uploadProgress.set(30);
             this.uploadMessage.set(this.t().compressing);
             this.forceEditorUpdate();
@@ -1419,8 +1441,9 @@ class AteImageService {
                         ? await firstValueFrom(handlerResponse)
                         : await handlerResponse;
                     result.src = handlerResult.src;
-                    if (handlerResult.alt)
+                    if (handlerResult.alt) {
                         result.name = handlerResult.alt;
+                    }
                 }
                 catch (handlerError) {
                     console.error(this.t().uploadError, handlerError);
@@ -1528,7 +1551,11 @@ class AteImageService {
             };
             // If the image was active or is still active, update it atomically
             if (wasActive || ed.isActive("resizableImage")) {
-                ed.chain().focus().updateAttributes("resizableImage", imageData).setNodeSelection(pos).run();
+                ed.chain()
+                    .focus()
+                    .updateAttributes("resizableImage", imageData)
+                    .setNodeSelection(pos)
+                    .run();
                 this.updateSelectedImage(imageData);
             }
             else {
@@ -1550,20 +1577,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
  * Normalizes color values (rgb/rgba to hex).
  */
 function normalizeColor(color) {
-    if (!color || color === "transparent" || color === "rgba(0, 0, 0, 0)")
+    if (!color || color === "transparent" || color === "rgba(0, 0, 0, 0)") {
         return null;
-    if (color.startsWith("#"))
+    }
+    if (color.startsWith("#")) {
         return color;
+    }
     // Support both comma-separated (legacy) and space-separated (modern) rgb/rgba
-    const rgbMatch = color.trim().match(/^rgba?\(\s*([\d.]+)[,\s]+([\d.]+)[,\s]+([\d.]+)(?:[,\s/]+([\d.]+))?\s*\)$/i);
+    const rgbMatch = color
+        .trim()
+        .match(/^rgba?\(\s*([\d.]+)[,\s]+([\d.]+)[,\s]+([\d.]+)(?:[,\s/]+([\d.]+))?\s*\)$/i);
     // If it's a named color or something else we don't recognize,
     // we can't easily normalize it to hex without a heavy dictionary.
     // However, getComputedStyle usually returns rgb() which we handle above.
     if (!rgbMatch) {
         // Simple fallback for common named colors if getComputedStyle fails to return rgb
         const named = { black: "#000000", white: "#ffffff", red: "#ff0000" };
-        if (named[color.toLowerCase()])
+        if (named[color.toLowerCase()]) {
             return named[color.toLowerCase()];
+        }
         return null;
     }
     const r = Math.max(0, Math.min(255, Math.round(parseFloat(rgbMatch[1]))));
@@ -1571,8 +1603,9 @@ function normalizeColor(color) {
     const b = Math.max(0, Math.min(255, Math.round(parseFloat(rgbMatch[3]))));
     const a = rgbMatch[4] ? parseFloat(rgbMatch[4]) : 1;
     // If completely transparent, return null
-    if (a === 0)
+    if (a === 0) {
         return null;
+    }
     return ("#" +
         [r, g, b]
             .map(n => n.toString(16).padStart(2, "0"))
@@ -1584,8 +1617,9 @@ function normalizeColor(color) {
  */
 function getLuminance(color) {
     const normalized = normalizeColor(color);
-    if (!normalized)
-        return 0; // Default to dark (luminance 0) if no color
+    if (!normalized) {
+        return 0;
+    } // Default to dark (luminance 0) if no color
     const hex = normalized.replace("#", "");
     const r = parseInt(hex.substring(0, 2), 16);
     const g = parseInt(hex.substring(2, 4), 16);
@@ -1639,8 +1673,9 @@ class AteColorPickerService {
      * Toggle color picker from UI (extracts trigger from event).
      */
     toggle(editor, mode, event) {
-        if (!editor)
+        if (!editor) {
             return;
+        }
         let trigger;
         if (event && typeof event !== "string") {
             const target = event.target;
@@ -1655,8 +1690,9 @@ class AteColorPickerService {
      * Capture current editor selection.
      */
     captureSelection(editor) {
-        if (!editor)
+        if (!editor) {
             return;
+        }
         this.storedSelection = {
             from: editor.state.selection.from,
             to: editor.state.selection.to,
@@ -1682,42 +1718,44 @@ class AteColorPickerService {
      * Apply text color to selection.
      */
     applyColor(editor, color, addToHistory = true, focus = true) {
-        if (!editor)
+        if (!editor) {
             return;
+        }
         const stored = this.storedSelection;
         let chain = editor.chain();
-        if (focus)
+        if (focus) {
             chain = chain.focus();
+        }
         if (stored && (editor.state.selection.empty || !editor.isFocused)) {
             chain = chain.setTextSelection(stored);
         }
         else if (editor.state.selection.empty && !stored) {
             chain = chain.extendMarkRange("textStyle");
         }
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         chain.setColor(color);
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        if (addToHistory === false)
+        if (addToHistory === false) {
             chain = chain.setMeta("addToHistory", false);
+        }
         chain.run();
     }
     /**
      * Remove text color from selection.
      */
     unsetColor(editor, focus = true) {
-        if (!editor)
+        if (!editor) {
             return;
+        }
         const stored = this.storedSelection;
         let chain = editor.chain();
-        if (focus)
+        if (focus) {
             chain = chain.focus();
+        }
         if (stored) {
             chain = chain.setTextSelection(stored);
         }
         else if (editor.state.selection.empty) {
             chain = chain.extendMarkRange("textStyle");
         }
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         chain.unsetColor();
         chain.run();
     }
@@ -1725,42 +1763,44 @@ class AteColorPickerService {
      * Apply highlight color to selection.
      */
     applyHighlight(editor, color, addToHistory = true, focus = true) {
-        if (!editor)
+        if (!editor) {
             return;
+        }
         const stored = this.storedSelection;
         let chain = editor.chain();
-        if (focus)
+        if (focus) {
             chain = chain.focus();
+        }
         if (stored && (editor.state.selection.empty || !editor.isFocused)) {
             chain = chain.setTextSelection(stored);
         }
         else if (editor.state.selection.empty && !stored) {
             chain = chain.extendMarkRange("highlight");
         }
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         chain.setHighlight({ color });
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        if (addToHistory === false)
+        if (addToHistory === false) {
             chain = chain.setMeta("addToHistory", false);
+        }
         chain.run();
     }
     /**
      * Remove highlight from selection.
      */
     unsetHighlight(editor, focus = true) {
-        if (!editor)
+        if (!editor) {
             return;
+        }
         const stored = this.storedSelection;
         let chain = editor.chain();
-        if (focus)
+        if (focus) {
             chain = chain.focus();
+        }
         if (stored) {
             chain = chain.setTextSelection(stored);
         }
         else if (editor.state.selection.empty) {
             chain = chain.extendMarkRange("highlight");
         }
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         chain.unsetHighlight();
         chain.run();
     }
@@ -1830,8 +1870,9 @@ class AteLinkService {
      * If an Event is provided, extracts the trigger for anchoring.
      */
     toggle(editor, urlOrEvent) {
-        if (!editor)
+        if (!editor) {
             return;
+        }
         // If a string URL is provided, set the link and close
         if (urlOrEvent && typeof urlOrEvent === "string") {
             this.setLink(editor, urlOrEvent);
@@ -1841,7 +1882,8 @@ class AteLinkService {
         let trigger;
         if (urlOrEvent && typeof urlOrEvent !== "string") {
             const target = urlOrEvent.target;
-            trigger = urlOrEvent.currentTarget || target?.closest("button") || target;
+            trigger =
+                urlOrEvent.currentTarget || target?.closest("button") || target;
         }
         // Open the edit menu
         this.open(trigger);
@@ -1853,8 +1895,9 @@ class AteLinkService {
      * Apply a link to the current selection.
      */
     setLink(editor, url) {
-        if (!editor)
+        if (!editor) {
             return;
+        }
         editor.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
         this.close();
     }
@@ -1862,8 +1905,9 @@ class AteLinkService {
      * Remove link from the current selection.
      */
     unsetLink(editor) {
-        if (!editor)
+        if (!editor) {
             return;
+        }
         editor.chain().focus().extendMarkRange("link").unsetLink().run();
         this.close();
     }
@@ -1881,64 +1925,78 @@ class AteEditorCommandsService {
         this.linkSvc = inject(AteLinkService);
         this._editorState = signal(ATE_INITIAL_EDITOR_STATE, ...(ngDevMode ? [{ debugName: "_editorState", equal: (a, b) => {
                     // 1. Primitive global states
-                    if (a.isFocused !== b.isFocused || a.isEditable !== b.isEditable)
+                    if (a.isFocused !== b.isFocused || a.isEditable !== b.isEditable) {
                         return false;
+                    }
                     // 2. Detailed selection comparison
                     if (a.selection.from !== b.selection.from ||
                         a.selection.to !== b.selection.to ||
                         a.selection.type !== b.selection.type ||
                         a.selection.empty !== b.selection.empty ||
-                        a.selection.isSingleCell !== b.selection.isSingleCell)
+                        a.selection.isSingleCell !== b.selection.isSingleCell) {
                         return false;
+                    }
                     // Helper for object comparison
                     const isRecordEqual = (objA, objB) => {
                         const keysA = Object.keys(objA);
                         const keysB = Object.keys(objB);
-                        if (keysA.length !== keysB.length)
+                        if (keysA.length !== keysB.length) {
                             return false;
+                        }
                         return keysA.every(key => objA[key] === objB[key]);
                     };
                     // 3. Compare sub-states (marks, can, nodes)
-                    if (!isRecordEqual(a.marks, b.marks))
+                    if (!isRecordEqual(a.marks, b.marks)) {
                         return false;
-                    if (!isRecordEqual(a.can, b.can))
+                    }
+                    if (!isRecordEqual(a.can, b.can)) {
                         return false;
-                    if (!isRecordEqual(a.nodes, b.nodes))
+                    }
+                    if (!isRecordEqual(a.nodes, b.nodes)) {
                         return false;
+                    }
                     // 4. Compare custom extension states
-                    if (!isRecordEqual(a.custom, b.custom))
+                    if (!isRecordEqual(a.custom, b.custom)) {
                         return false;
+                    }
                     return true;
                 } }] : [{
                 equal: (a, b) => {
                     // 1. Primitive global states
-                    if (a.isFocused !== b.isFocused || a.isEditable !== b.isEditable)
+                    if (a.isFocused !== b.isFocused || a.isEditable !== b.isEditable) {
                         return false;
+                    }
                     // 2. Detailed selection comparison
                     if (a.selection.from !== b.selection.from ||
                         a.selection.to !== b.selection.to ||
                         a.selection.type !== b.selection.type ||
                         a.selection.empty !== b.selection.empty ||
-                        a.selection.isSingleCell !== b.selection.isSingleCell)
+                        a.selection.isSingleCell !== b.selection.isSingleCell) {
                         return false;
+                    }
                     // Helper for object comparison
                     const isRecordEqual = (objA, objB) => {
                         const keysA = Object.keys(objA);
                         const keysB = Object.keys(objB);
-                        if (keysA.length !== keysB.length)
+                        if (keysA.length !== keysB.length) {
                             return false;
+                        }
                         return keysA.every(key => objA[key] === objB[key]);
                     };
                     // 3. Compare sub-states (marks, can, nodes)
-                    if (!isRecordEqual(a.marks, b.marks))
+                    if (!isRecordEqual(a.marks, b.marks)) {
                         return false;
-                    if (!isRecordEqual(a.can, b.can))
+                    }
+                    if (!isRecordEqual(a.can, b.can)) {
                         return false;
-                    if (!isRecordEqual(a.nodes, b.nodes))
+                    }
+                    if (!isRecordEqual(a.nodes, b.nodes)) {
                         return false;
+                    }
                     // 4. Compare custom extension states
-                    if (!isRecordEqual(a.custom, b.custom))
+                    if (!isRecordEqual(a.custom, b.custom)) {
                         return false;
+                    }
                     return true;
                 },
             }]));
@@ -1988,8 +2046,9 @@ class AteEditorCommandsService {
     // ============================================
     /** Generic method to execute any command by name */
     execute(editor, command, ...args) {
-        if (!editor)
+        if (!editor) {
             return;
+        }
         switch (command) {
             case "toggleBold":
                 this.toggleBold(editor);
@@ -2112,53 +2171,63 @@ class AteEditorCommandsService {
     }
     // --- Formatting Commands ---
     toggleBold(editor) {
-        if (!editor)
+        if (!editor) {
             return;
+        }
         editor.chain().focus().toggleBold().run();
     }
     toggleItalic(editor) {
-        if (!editor)
+        if (!editor) {
             return;
+        }
         editor.chain().focus().toggleItalic().run();
     }
     toggleStrike(editor) {
-        if (!editor)
+        if (!editor) {
             return;
+        }
         editor.chain().focus().toggleStrike().run();
     }
     toggleCode(editor) {
-        if (!editor)
+        if (!editor) {
             return;
+        }
         editor.chain().focus().toggleCode().run();
     }
     toggleCodeBlock(editor) {
-        if (!editor)
+        if (!editor) {
             return;
+        }
         editor.chain().focus().toggleCodeBlock().run();
     }
     toggleUnderline(editor) {
-        if (!editor)
+        if (!editor) {
             return;
+        }
         editor.chain().focus().toggleUnderline().run();
     }
     toggleSuperscript(editor) {
-        if (!editor)
+        if (!editor) {
             return;
+        }
         editor.chain().focus().toggleSuperscript().run();
     }
     toggleSubscript(editor) {
-        if (!editor)
+        if (!editor) {
             return;
+        }
         editor.chain().focus().toggleSubscript().run();
     }
     toggleHeading(editor, level) {
-        if (!editor)
+        if (!editor) {
             return;
+        }
         editor.chain().focus().toggleHeading({ level }).run();
     }
     toggleHighlight(editor, color) {
-        if (!editor)
+        if (!editor) {
             return;
+        }
         if (color) {
             editor.chain().focus().setHighlight({ color }).run();
         }
@@ -2168,131 +2237,156 @@ class AteEditorCommandsService {
     }
     // --- Structure Commands ---
     toggleBulletList(editor) {
-        if (!editor)
+        if (!editor) {
             return;
+        }
         editor.chain().focus().toggleBulletList().run();
     }
     toggleOrderedList(editor) {
-        if (!editor)
+        if (!editor) {
             return;
+        }
         editor.chain().focus().toggleOrderedList().run();
     }
     toggleBlockquote(editor) {
-        if (!editor)
+        if (!editor) {
             return;
+        }
         editor.chain().focus().toggleBlockquote().run();
     }
     setTextAlign(editor, alignment) {
-        if (!editor)
+        if (!editor) {
             return;
+        }
         editor.chain().focus().setTextAlign(alignment).run();
     }
     insertHorizontalRule(editor) {
-        if (!editor)
+        if (!editor) {
             return;
+        }
         editor.chain().focus().setHorizontalRule().run();
     }
     // --- History Commands ---
     undo(editor) {
-        if (!editor)
+        if (!editor) {
             return;
+        }
         editor.chain().focus().undo().run();
     }
     redo(editor) {
-        if (!editor)
+        if (!editor) {
             return;
+        }
         editor.chain().focus().redo().run();
     }
     // --- Table Commands ---
     insertTable(editor, rows = 3, cols = 3) {
-        if (!editor)
+        if (!editor) {
             return;
+        }
         editor.chain().focus().insertTable({ rows, cols }).run();
     }
     addColumnBefore(editor) {
-        if (!editor)
+        if (!editor) {
             return;
+        }
         editor.chain().focus().addColumnBefore().run();
     }
     addColumnAfter(editor) {
-        if (!editor)
+        if (!editor) {
             return;
+        }
         editor.chain().focus().addColumnAfter().run();
     }
     deleteColumn(editor) {
-        if (!editor)
+        if (!editor) {
             return;
+        }
         editor.chain().focus().deleteColumn().run();
     }
     addRowBefore(editor) {
-        if (!editor)
+        if (!editor) {
             return;
+        }
         editor.chain().focus().addRowBefore().run();
     }
     addRowAfter(editor) {
-        if (!editor)
+        if (!editor) {
             return;
+        }
         editor.chain().focus().addRowAfter().run();
     }
     deleteRow(editor) {
-        if (!editor)
+        if (!editor) {
             return;
+        }
         editor.chain().focus().deleteRow().run();
     }
     deleteTable(editor) {
-        if (!editor)
+        if (!editor) {
             return;
+        }
         editor.chain().focus().deleteTable().run();
     }
     mergeCells(editor) {
-        if (!editor)
+        if (!editor) {
             return;
+        }
         editor.chain().focus().mergeCells().run();
     }
     splitCell(editor) {
-        if (!editor)
+        if (!editor) {
             return;
+        }
         editor.chain().focus().splitCell().run();
     }
     toggleHeaderColumn(editor) {
-        if (!editor)
+        if (!editor) {
             return;
+        }
         editor.chain().focus().toggleHeaderColumn().run();
     }
     toggleHeaderRow(editor) {
-        if (!editor)
+        if (!editor) {
             return;
+        }
         editor.chain().focus().toggleHeaderRow().run();
     }
     // --- Utility Commands ---
     clearContent(editor) {
-        if (!editor)
+        if (!editor) {
             return;
+        }
         editor.commands.clearContent(true);
     }
     focus(editor) {
-        if (!editor)
+        if (!editor) {
             return;
+        }
         editor.chain().focus().run();
     }
     blur(editor) {
-        if (!editor)
+        if (!editor) {
             return;
+        }
         editor.chain().blur().run();
     }
     setContent(editor, content, emitUpdate = true) {
-        if (!editor)
+        if (!editor) {
             return;
+        }
         editor.commands.setContent(content, emitUpdate);
     }
     setEditable(editor, editable) {
-        if (!editor)
+        if (!editor) {
             return;
+        }
         editor.setEditable(editable);
     }
     insertContent(editor, content) {
-        if (!editor)
+        if (!editor) {
             return;
+        }
         editor.chain().focus().insertContent(content).run();
     }
     async insertImage(editor, options) {
@@ -2448,8 +2542,9 @@ class AteToolbarComponent {
     }
     onCommand(command, ...args) {
         const editor = this.editor();
-        if (!editor)
+        if (!editor) {
             return;
+        }
         this.editorCommands.execute(editor, command, ...args);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AteToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -2528,7 +2623,10 @@ class AteToolbarComponent {
           (buttonClick)="onCommand('toggleHighlight')" />
       }
       @if (config().highlightPicker) {
-        <ate-color-picker mode="highlight" [editor]="editor()" [disabled]="!state().can.setHighlight" />
+        <ate-color-picker
+          mode="highlight"
+          [editor]="editor()"
+          [disabled]="!state().can.setHighlight" />
       }
       @if (config().textColor) {
         <ate-color-picker mode="text" [editor]="editor()" [disabled]="!state().can.setColor" />
@@ -2561,7 +2659,9 @@ class AteToolbarComponent {
           [disabled]="!state().can.toggleHeading3"
           (buttonClick)="onCommand('toggleHeading', 3)" />
       }
-      @if (config().separator && (config().bulletList || config().orderedList || config().blockquote)) {
+      @if (
+        config().separator && (config().bulletList || config().orderedList || config().blockquote)
+      ) {
         <ate-separator />
       }
       @if (config().bulletList) {
@@ -2665,10 +2765,18 @@ class AteToolbarComponent {
         <ate-separator />
       }
       @if (config().undo) {
-        <ate-button icon="undo" [title]="t().undo" [disabled]="!state().can.undo" (buttonClick)="onCommand('undo')" />
+        <ate-button
+          icon="undo"
+          [title]="t().undo"
+          [disabled]="!state().can.undo"
+          (buttonClick)="onCommand('undo')" />
       }
       @if (config().redo) {
-        <ate-button icon="redo" [title]="t().redo" [disabled]="!state().can.redo" (buttonClick)="onCommand('redo')" />
+        <ate-button
+          icon="redo"
+          [title]="t().redo"
+          [disabled]="!state().can.redo"
+          (buttonClick)="onCommand('redo')" />
       }
       @if (config().separator && config().clear) {
         <ate-separator />
@@ -2682,7 +2790,10 @@ class AteToolbarComponent {
       }
       @if (config().custom?.length) {
         @for (item of config().custom; track item.key) {
-          <ate-button [icon]="item.icon" [title]="item.label" (buttonClick)="item.command(editor())"></ate-button>
+          <ate-button
+            [icon]="item.icon"
+            [title]="item.label"
+            (buttonClick)="item.command(editor())"></ate-button>
         }
       }
     </div>
@@ -2765,7 +2876,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
           (buttonClick)="onCommand('toggleHighlight')" />
       }
       @if (config().highlightPicker) {
-        <ate-color-picker mode="highlight" [editor]="editor()" [disabled]="!state().can.setHighlight" />
+        <ate-color-picker
+          mode="highlight"
+          [editor]="editor()"
+          [disabled]="!state().can.setHighlight" />
       }
       @if (config().textColor) {
         <ate-color-picker mode="text" [editor]="editor()" [disabled]="!state().can.setColor" />
@@ -2798,7 +2912,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
           [disabled]="!state().can.toggleHeading3"
           (buttonClick)="onCommand('toggleHeading', 3)" />
       }
-      @if (config().separator && (config().bulletList || config().orderedList || config().blockquote)) {
+      @if (
+        config().separator && (config().bulletList || config().orderedList || config().blockquote)
+      ) {
         <ate-separator />
       }
       @if (config().bulletList) {
@@ -2902,10 +3018,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
         <ate-separator />
       }
       @if (config().undo) {
-        <ate-button icon="undo" [title]="t().undo" [disabled]="!state().can.undo" (buttonClick)="onCommand('undo')" />
+        <ate-button
+          icon="undo"
+          [title]="t().undo"
+          [disabled]="!state().can.undo"
+          (buttonClick)="onCommand('undo')" />
       }
       @if (config().redo) {
-        <ate-button icon="redo" [title]="t().redo" [disabled]="!state().can.redo" (buttonClick)="onCommand('redo')" />
+        <ate-button
+          icon="redo"
+          [title]="t().redo"
+          [disabled]="!state().can.redo"
+          (buttonClick)="onCommand('redo')" />
       }
       @if (config().separator && config().clear) {
         <ate-separator />
@@ -2919,7 +3043,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
       }
       @if (config().custom?.length) {
         @for (item of config().custom; track item.key) {
-          <ate-button [icon]="item.icon" [title]="item.label" (buttonClick)="item.command(editor())"></ate-button>
+          <ate-button
+            [icon]="item.icon"
+            [title]="item.label"
+            (buttonClick)="item.command(editor())"></ate-button>
         }
       }
     </div>
@@ -2936,6 +3063,8 @@ class AteBaseBubbleMenu {
         this.editorCommands = inject(AteEditorCommandsService);
         // Core Inputs
         this.editor = input.required(...(ngDevMode ? [{ debugName: "editor" }] : []));
+        // Required viewChild for the menu container
+        this.menuRef = viewChild.required("menuRef");
         // Internal State
         this.tippyInstance = null;
         this.updateTimeout = null;
@@ -2952,8 +3081,9 @@ class AteBaseBubbleMenu {
             }
             this.updateTimeout = window.setTimeout(() => {
                 const ed = this.editor();
-                if (!ed)
+                if (!ed) {
                     return;
+                }
                 // Hide when interacting with the main toolbar
                 if (this.isToolbarInteracting()) {
                     this.hideTippy();
@@ -2995,7 +3125,7 @@ class AteBaseBubbleMenu {
      * Can be overridden for specific Tippy configurations.
      */
     initTippy() {
-        if (!this.menuRef?.nativeElement) {
+        if (!this.menuRef()?.nativeElement) {
             // Re-try if the view child is not yet available
             setTimeout(() => this.initTippy(), 50);
             return;
@@ -3005,7 +3135,7 @@ class AteBaseBubbleMenu {
             this.tippyInstance.destroy();
         }
         this.tippyInstance = tippy(document.body, {
-            content: this.menuRef.nativeElement,
+            content: this.menuRef().nativeElement,
             trigger: "manual",
             placement: "top-start",
             appendTo: () => (ed ? ed.options.element : document.body),
@@ -3042,8 +3172,9 @@ class AteBaseBubbleMenu {
      * Helper to show the Tippy instance with updated positioning.
      */
     showTippy() {
-        if (!this.tippyInstance)
+        if (!this.tippyInstance) {
             return;
+        }
         // Update position before showing
         this.tippyInstance.setProps({
             getReferenceClientRect: () => this.getSelectionRect(),
@@ -3079,11 +3210,13 @@ class AteBaseBubbleMenu {
      * Uses a combination of native selection and ProseMirror coordinates.
      */
     getRectForSelection(ed) {
-        if (!ed)
+        if (!ed) {
             return new DOMRect(0, 0, 0, 0);
+        }
         const { from, to, empty } = ed.state.selection;
-        if (empty)
+        if (empty) {
             return new DOMRect(-9999, -9999, 0, 0);
+        }
         // 1. Try native selection for multi-line accuracy
         const selection = window.getSelection();
         if (selection && selection.rangeCount > 0) {
@@ -3116,14 +3249,11 @@ class AteBaseBubbleMenu {
         /* empty */
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AteBaseBubbleMenu, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.16", type: AteBaseBubbleMenu, isStandalone: true, inputs: { editor: { classPropertyName: "editor", publicName: "editor", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "menuRef", first: true, predicate: ["menuRef"], descendants: true }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.3.16", type: AteBaseBubbleMenu, isStandalone: true, inputs: { editor: { classPropertyName: "editor", publicName: "editor", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "menuRef", first: true, predicate: ["menuRef"], descendants: true, isSignal: true }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AteBaseBubbleMenu, decorators: [{
             type: Directive
-        }], ctorParameters: () => [], propDecorators: { editor: [{ type: i0.Input, args: [{ isSignal: true, alias: "editor", required: true }] }], menuRef: [{
-                type: ViewChild,
-                args: ["menuRef", { static: false }]
-            }] } });
+        }], ctorParameters: () => [], propDecorators: { editor: [{ type: i0.Input, args: [{ isSignal: true, alias: "editor", required: true }] }], menuRef: [{ type: i0.ViewChild, args: ["menuRef", { isSignal: true }] }] } });
 
 class AteBubbleMenuComponent extends AteBaseBubbleMenu {
     constructor() {
@@ -3194,7 +3324,7 @@ class AteBubbleMenuComponent extends AteBaseBubbleMenu {
         }
         // Only show text bubble menu if there is a non-empty text selection
         // and no higher-priority node (image, table) is selected.
-        return selection.type === "text" && !selection.empty && !nodes.isImage && !nodes.isTableNodeSelected;
+        return (selection.type === "text" && !selection.empty && !nodes.isImage && !nodes.isTableNodeSelected);
     }
     getSelectionRect() {
         return this.getRectForSelection(this.editor());
@@ -3281,7 +3411,11 @@ class AteBubbleMenuComponent extends AteBaseBubbleMenu {
           [anchorToText]="true" />
       }
       @if (bubbleMenuConfig().textColor) {
-        <ate-color-picker mode="text" [editor]="editor()" [disabled]="!state().can.setColor" [anchorToText]="true" />
+        <ate-color-picker
+          mode="text"
+          [editor]="editor()"
+          [disabled]="!state().can.setColor"
+          [anchorToText]="true" />
       }
       @if (bubbleMenuConfig().link) {
         <ate-button
@@ -3293,7 +3427,10 @@ class AteBubbleMenuComponent extends AteBaseBubbleMenu {
       }
       @if (bubbleMenuConfig().custom?.length) {
         @for (item of bubbleMenuConfig().custom; track item.key) {
-          <ate-button [icon]="item.icon" [title]="item.label" (buttonClick)="item.command(editor())"></ate-button>
+          <ate-button
+            [icon]="item.icon"
+            [title]="item.label"
+            (buttonClick)="item.command(editor())"></ate-button>
         }
       }
     </div>
@@ -3380,7 +3517,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
           [anchorToText]="true" />
       }
       @if (bubbleMenuConfig().textColor) {
-        <ate-color-picker mode="text" [editor]="editor()" [disabled]="!state().can.setColor" [anchorToText]="true" />
+        <ate-color-picker
+          mode="text"
+          [editor]="editor()"
+          [disabled]="!state().can.setColor"
+          [anchorToText]="true" />
       }
       @if (bubbleMenuConfig().link) {
         <ate-button
@@ -3392,7 +3533,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
       }
       @if (bubbleMenuConfig().custom?.length) {
         @for (item of bubbleMenuConfig().custom; track item.key) {
-          <ate-button [icon]="item.icon" [title]="item.label" (buttonClick)="item.command(editor())"></ate-button>
+          <ate-button
+            [icon]="item.icon"
+            [title]="item.label"
+            (buttonClick)="item.command(editor())"></ate-button>
         }
       }
     </div>
@@ -3438,8 +3582,9 @@ class AteImageBubbleMenuComponent extends AteBaseBubbleMenu {
     }
     getSelectionRect() {
         const ed = this.editor();
-        if (!ed)
+        if (!ed) {
             return new DOMRect(0, 0, 0, 0);
+        }
         const { from } = ed.state.selection;
         try {
             // 1. Direct ProseMirror approach: get DOM node at position
@@ -3448,8 +3593,9 @@ class AteImageBubbleMenuComponent extends AteBaseBubbleMenu {
                 // If it's a resizable container, look for the image inside
                 if (dom.classList.contains("resizable-image-container")) {
                     const img = dom.querySelector("img");
-                    if (img)
+                    if (img) {
                         return img.getBoundingClientRect();
+                    }
                 }
                 return dom.getBoundingClientRect();
             }
@@ -3489,8 +3635,9 @@ class AteImageBubbleMenuComponent extends AteBaseBubbleMenu {
     }
     async changeImage() {
         const ed = this.editor();
-        if (!ed)
+        if (!ed) {
             return;
+        }
         try {
             // Use dedicated method to replace an existing image
             await this.imageService.selectAndReplaceImage(ed, this.imageUpload());
@@ -3653,8 +3800,9 @@ class AteTableBubbleMenuComponent extends AteBaseBubbleMenu {
     }
     getSelectionRect() {
         const ed = this.editor();
-        if (!ed)
+        if (!ed) {
             return new DOMRect(0, 0, 0, 0);
+        }
         const { from } = ed.state.selection;
         try {
             // 1. Direct ProseMirror approach: get DOM node at position
@@ -3674,8 +3822,9 @@ class AteTableBubbleMenuComponent extends AteBaseBubbleMenu {
             // Search for table element at these coordinates
             const element = document.elementFromPoint(coords.left, coords.top);
             const table = element?.closest("table");
-            if (table)
+            if (table) {
                 return table.getBoundingClientRect();
+            }
         }
         // 3. Ultimate fallback if selection is ambiguous
         const activeTable = ed.view.dom.querySelector("table.selected, table:has(.selected), table:has(.selected-cell), table:has(.selected-node)");
@@ -3893,8 +4042,9 @@ class AteCellBubbleMenuComponent extends AteBaseBubbleMenu {
     }
     getSelectionRect() {
         const ed = this.editor();
-        if (!ed)
+        if (!ed) {
             return new DOMRect(0, 0, 0, 0);
+        }
         // CellSelection
         const selection = ed.state.selection;
         // 1. Multiple cells selected
@@ -3902,8 +4052,9 @@ class AteCellBubbleMenuComponent extends AteBaseBubbleMenu {
             const cells = [];
             // Try to find all selected cell nodes
             ed.view.dom.querySelectorAll(".selectedCell").forEach(el => {
-                if (el instanceof HTMLElement)
+                if (el instanceof HTMLElement) {
                     cells.push(el);
+                }
             });
             if (cells.length > 0) {
                 let top = Infinity, bottom = -Infinity, left = Infinity, right = -Infinity;
@@ -3989,21 +4140,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 }]
         }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }] } });
 
-class AteLinkBubbleMenuComponent {
+/**
+ * Base abstract class for Sub-Bubble Menus (Link, Color).
+ * These menus are "sub-menus" of the main bubble menu or triggered/anchored by specific UI elements.
+ */
+class AteBaseSubBubbleMenu {
     constructor() {
         this.i18nService = inject(AteI18nService);
         this.editorCommands = inject(AteEditorCommandsService);
-        this.linkSvc = inject(AteLinkService);
-        this.t = this.i18nService.bubbleMenu;
-        this.common = this.i18nService.common;
-        this.state = this.editorCommands.editorState;
+        // Core Inputs
         this.editor = input.required(...(ngDevMode ? [{ debugName: "editor" }] : []));
+        // Required viewChild for the menu container
+        this.menuRef = viewChild.required("menuRef");
+        // Internal State
         this.tippyInstance = null;
         this.updateTimeout = null;
-        this.editUrl = signal("", ...(ngDevMode ? [{ debugName: "editUrl" }] : []));
+        // Reactive state alias for templates
+        this.state = this.editorCommands.editorState;
+        /**
+         * Core logic to decide whether to show or hide the menu.
+         */
         this.updateMenu = () => {
-            if (this.updateTimeout)
+            if (this.updateTimeout) {
                 clearTimeout(this.updateTimeout);
+            }
             this.updateTimeout = setTimeout(() => {
                 if (this.shouldShow()) {
                     this.showTippy();
@@ -4013,24 +4173,11 @@ class AteLinkBubbleMenuComponent {
                 }
             }, 10);
         };
-        // Reactive effect for URL sync and focus
-        effect(() => {
-            const state = this.state();
-            const isInteracting = this.linkSvc.isInteracting();
-            const currentLinkHref = state.marks.linkHref || "";
-            // SYNC LOGIC:
-            // If we are NOT currently typing (interacting),
-            // always keep the input in sync with the current editor selection.
-            if (!isInteracting) {
-                this.editUrl.set(currentLinkHref);
-            }
-        });
         // Reactive effect for menu updates (re-positioning)
         effect(() => {
+            // Monitor editor state and specific sub-menu states
             this.state();
-            this.linkSvc.editMode();
-            this.linkSvc.menuTrigger();
-            this.linkSvc.isInteracting();
+            this.onStateChange();
             this.updateMenu();
         });
     }
@@ -4038,21 +4185,28 @@ class AteLinkBubbleMenuComponent {
         this.initTippy();
     }
     ngOnDestroy() {
-        if (this.updateTimeout)
+        if (this.updateTimeout) {
             clearTimeout(this.updateTimeout);
+        }
         if (this.tippyInstance) {
             this.tippyInstance.destroy();
             this.tippyInstance = null;
         }
     }
+    /**
+     * Initializes the Tippy instance with sub-menu defaults.
+     */
     initTippy() {
-        if (!this.menuRef?.nativeElement) {
+        if (!this.menuRef()?.nativeElement) {
             setTimeout(() => this.initTippy(), 50);
             return;
         }
         const ed = this.editor();
+        if (this.tippyInstance) {
+            this.tippyInstance.destroy();
+        }
         this.tippyInstance = tippy(document.body, {
-            content: this.menuRef.nativeElement,
+            content: this.menuRef().nativeElement,
             trigger: "manual",
             placement: "bottom-start",
             appendTo: () => ed.options.element,
@@ -4075,41 +4229,76 @@ class AteLinkBubbleMenuComponent {
                     },
                 ],
             },
-            onShow: () => {
-                // We no longer auto-focus the input here to keep the editor selection visible.
-                // The user can click the input if they want to type, but for swatches/preview,
-                // staying in the editor is better for UX.
-            },
-            onHide: () => {
-                // Clear trigger only AFTER the menu is hidden to maintain anchor stability during animation
-                this.linkSvc.done();
-                this.linkSvc.close();
-            },
+            onShow: instance => this.onTippyShow(instance),
+            onHide: instance => this.onTippyHide(instance),
         });
         this.updateMenu();
     }
+    /**
+     * Helper to show the Tippy instance with updated positioning.
+     */
     showTippy() {
         if (this.tippyInstance) {
             this.tippyInstance.setProps({ getReferenceClientRect: () => this.getSelectionRect() });
             this.tippyInstance.show();
         }
     }
+    /**
+     * Helper to hide the Tippy instance.
+     */
     hideTippy() {
         this.tippyInstance?.hide();
     }
-    focusInput() {
-        setTimeout(() => {
-            this.linkInput?.nativeElement?.focus();
-            this.linkInput?.nativeElement?.select();
-        }, 50);
+    /**
+     * Optional hook called when Tippy is about to be shown.
+     */
+    onTippyShow(_instance) {
+        /* empty */
     }
-    currentUrl() {
-        return this.state().marks.linkHref || "";
+    /**
+     * Optional hook called when Tippy is about to be hidden.
+     */
+    onTippyHide(_instance) {
+        /* empty */
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AteBaseSubBubbleMenu, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.3.16", type: AteBaseSubBubbleMenu, isStandalone: true, inputs: { editor: { classPropertyName: "editor", publicName: "editor", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "menuRef", first: true, predicate: ["menuRef"], descendants: true, isSignal: true }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AteBaseSubBubbleMenu, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [], propDecorators: { editor: [{ type: i0.Input, args: [{ isSignal: true, alias: "editor", required: true }] }], menuRef: [{ type: i0.ViewChild, args: ["menuRef", { isSignal: true }] }] } });
+
+class AteLinkBubbleMenuComponent extends AteBaseSubBubbleMenu {
+    constructor() {
+        super();
+        this.linkSvc = inject(AteLinkService);
+        this.t = this.i18nService.bubbleMenu;
+        this.common = this.i18nService.common;
+        this.linkInput = viewChild("linkInput", ...(ngDevMode ? [{ debugName: "linkInput" }] : []));
+        this.editUrl = signal("", ...(ngDevMode ? [{ debugName: "editUrl" }] : []));
+        // Reactive effect for URL sync
+        effect(() => {
+            const state = this.state();
+            const isInteracting = this.linkSvc.isInteracting();
+            const currentLinkHref = state.marks.linkHref || "";
+            // SYNC LOGIC:
+            // If we are NOT currently typing (interacting),
+            // always keep the input in sync with the current editor selection.
+            if (!isInteracting) {
+                this.editUrl.set(currentLinkHref);
+            }
+        });
+    }
+    onStateChange() {
+        this.linkSvc.editMode();
+        this.linkSvc.menuTrigger();
+        this.linkSvc.isInteracting();
     }
     shouldShow() {
         const { selection, marks, isEditable, isFocused } = this.state();
-        if (!isEditable)
+        if (!isEditable) {
             return false;
+        }
         // Show if explicitly in edit mode (from toolbar/bubble menu) or interacting with input
         if (this.linkSvc.editMode() || this.linkSvc.isInteracting()) {
             return true;
@@ -4120,14 +4309,16 @@ class AteLinkBubbleMenuComponent {
     getSelectionRect() {
         const trigger = this.linkSvc.menuTrigger();
         const ed = this.editor();
-        if (!ed)
+        if (!ed) {
             return new DOMRect(0, 0, 0, 0);
+        }
         // 1. If we have a stable trigger from service (toolbar or parent menu), anchor to it
         if (trigger) {
             const rect = trigger.getBoundingClientRect();
             // Only use if it's still visible/in DOM (width > 0)
-            if (rect.width > 0)
+            if (rect.width > 0) {
                 return rect;
+            }
         }
         // 2. Otherwise (bubble menu / relay), anchor to text selection
         const { from } = ed.state.selection;
@@ -4135,8 +4326,9 @@ class AteLinkBubbleMenuComponent {
             const { node } = ed.view.domAtPos(from);
             const element = node instanceof Element ? node : node.parentElement;
             const linkElement = element?.closest("a");
-            if (linkElement)
+            if (linkElement) {
                 return linkElement.getBoundingClientRect();
+            }
         }
         catch (_e) {
             /* ignore */
@@ -4146,13 +4338,22 @@ class AteLinkBubbleMenuComponent {
         if (selection && selection.rangeCount > 0) {
             const range = selection.getRangeAt(0);
             const rect = range.getBoundingClientRect();
-            if (rect.width > 0 && rect.height > 0)
+            if (rect.width > 0 && rect.height > 0) {
                 return rect;
+            }
         }
         // Final fallback to coordinates at cursor
         const { top, bottom, left, right } = ed.view.coordsAtPos(from);
         return new DOMRect(left, top, right - left, bottom - top);
     }
+    onTippyHide() {
+        // Clear trigger only AFTER the menu is hidden to maintain anchor stability during animation
+        this.linkSvc.done();
+        this.linkSvc.close();
+    }
+    currentUrl() {
+        return this.state().marks.linkHref || "";
+    }
     onMouseDown(event) {
         event.stopPropagation();
         const target = event.target;
@@ -4173,8 +4374,9 @@ class AteLinkBubbleMenuComponent {
         event.preventDefault();
         event.stopPropagation();
         const url = this.currentUrl();
-        if (url)
+        if (url) {
             window.open(url, "_blank", "noopener,noreferrer");
+        }
     }
     onRemove(event) {
         event.preventDefault();
@@ -4202,7 +4404,7 @@ class AteLinkBubbleMenuComponent {
         this.hideTippy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AteLinkBubbleMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.16", type: AteLinkBubbleMenuComponent, isStandalone: true, selector: "ate-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: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.16", type: AteLinkBubbleMenuComponent, isStandalone: true, selector: "ate-link-bubble-menu", viewQueries: [{ propertyName: "linkInput", first: true, predicate: ["linkInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
     <div
       #menuRef
       class="bubble-menu"
@@ -4303,13 +4505,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
       </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: { editor: [{ type: i0.Input, args: [{ isSignal: true, alias: "editor", required: true }] }], linkInput: [{
-                type: ViewChild,
-                args: ["linkInput"]
-            }], menuRef: [{
-                type: ViewChild,
-                args: ["menuRef", { static: false }]
-            }] } });
+        }], ctorParameters: () => [], propDecorators: { linkInput: [{ type: i0.ViewChild, args: ["linkInput", { isSignal: true }] }] } });
 
 const PRESET_COLORS = [
     "#000000",
@@ -4325,36 +4521,19 @@ const PRESET_COLORS = [
     "#9C27B0",
     "#E91E63",
 ];
-class AteColorBubbleMenuComponent {
+class AteColorBubbleMenuComponent extends AteBaseSubBubbleMenu {
     constructor() {
-        this.i18nService = inject(AteI18nService);
-        this.editorCommands = inject(AteEditorCommandsService);
+        super(...arguments);
         this.colorPickerSvc = inject(AteColorPickerService);
         this.t = this.i18nService.toolbar;
         this.common = this.i18nService.common;
-        this.state = this.editorCommands.editorState;
         this.presets = PRESET_COLORS;
-        this.editor = input.required(...(ngDevMode ? [{ debugName: "editor" }] : []));
         this.colorInputRef = viewChild("colorInput", ...(ngDevMode ? [{ debugName: "colorInputRef" }] : []));
-        this.tippyInstance = null;
-        this.updateTimeout = null;
         /**
          * LOCAL MODE: We lock the mode when the menu is shown to avoid race conditions
          * where the parent (bubble menu) clears the global signal before we apply the color.
          */
         this.activeMode = signal("text", ...(ngDevMode ? [{ debugName: "activeMode" }] : []));
-        this.updateMenu = () => {
-            if (this.updateTimeout)
-                clearTimeout(this.updateTimeout);
-            this.updateTimeout = setTimeout(() => {
-                if (this.shouldShow()) {
-                    this.showTippy();
-                }
-                else {
-                    this.hideTippy();
-                }
-            }, 10);
-        };
         this.currentColor = computed(() => {
             const marks = this.state().marks;
             const color = this.activeMode() === "text" ? marks.computedColor : marks.computedBackground;
@@ -4364,85 +4543,17 @@ class AteColorBubbleMenuComponent {
             const color = this.currentColor();
             return color.replace("#", "").toUpperCase();
         }, ...(ngDevMode ? [{ debugName: "hexValue" }] : []));
-        effect(() => {
-            this.state();
-            this.colorPickerSvc.editMode();
-            this.colorPickerSvc.menuTrigger();
-            this.colorPickerSvc.isInteracting();
-            this.updateMenu();
-        });
-    }
-    ngOnInit() {
-        this.initTippy();
-    }
-    ngOnDestroy() {
-        if (this.updateTimeout)
-            clearTimeout(this.updateTimeout);
-        if (this.tippyInstance) {
-            this.tippyInstance.destroy();
-            this.tippyInstance = null;
-        }
-    }
-    initTippy() {
-        if (!this.menuRef?.nativeElement) {
-            setTimeout(() => this.initTippy(), 50);
-            return;
-        }
-        const ed = this.editor();
-        this.tippyInstance = tippy(document.body, {
-            content: this.menuRef.nativeElement,
-            trigger: "manual",
-            placement: "bottom-start",
-            appendTo: () => ed.options.element,
-            interactive: true,
-            arrow: false,
-            offset: [0, 8],
-            hideOnClick: true,
-            plugins: [sticky],
-            sticky: false,
-            getReferenceClientRect: () => this.getSelectionRect(),
-            popperOptions: {
-                modifiers: [
-                    {
-                        name: "preventOverflow",
-                        options: { boundary: ed.options.element, padding: 8 },
-                    },
-                    {
-                        name: "flip",
-                        options: { fallbackPlacements: ["top-start", "bottom-end", "top-end"] },
-                    },
-                ],
-            },
-            onShow: () => {
-                // 1. Lock the mode immediately to be immune to external signal changes
-                const currentMode = this.colorPickerSvc.editMode() || "text";
-                this.activeMode.set(currentMode);
-                // 2. Capture selection for the command fallback
-                this.colorPickerSvc.captureSelection(this.editor());
-                // Note: We don't auto-focus the Hex input anymore to keep the
-                // visual selection (blue highlight) active in the editor.
-            },
-            onHide: () => {
-                // Clear trigger only AFTER the menu is hidden to maintain anchor stability during animation
-                this.colorPickerSvc.done();
-                this.colorPickerSvc.close();
-            },
-        });
-        this.updateMenu();
     }
-    showTippy() {
-        if (this.tippyInstance) {
-            this.tippyInstance.setProps({ getReferenceClientRect: () => this.getSelectionRect() });
-            this.tippyInstance.show();
-        }
-    }
-    hideTippy() {
-        this.tippyInstance?.hide();
+    onStateChange() {
+        this.colorPickerSvc.editMode();
+        this.colorPickerSvc.menuTrigger();
+        this.colorPickerSvc.isInteracting();
     }
     shouldShow() {
         const { isEditable } = this.state();
-        if (!isEditable)
+        if (!isEditable) {
             return false;
+        }
         if (this.colorPickerSvc.editMode() !== null || this.colorPickerSvc.isInteracting()) {
             return true;
         }
@@ -4451,14 +4562,16 @@ class AteColorBubbleMenuComponent {
     getSelectionRect() {
         const trigger = this.colorPickerSvc.menuTrigger();
         const ed = this.editor();
-        if (!ed)
+        if (!ed) {
             return new DOMRect(0, 0, 0, 0);
+        }
         // 1. If we have a stable trigger from service (toolbar or parent menu), anchor to it
         if (trigger) {
             const rect = trigger.getBoundingClientRect();
             // Only use if it's still visible/in DOM (width > 0)
-            if (rect.width > 0)
+            if (rect.width > 0) {
                 return rect;
+            }
         }
         // 2. Otherwise (bubble menu / relay), anchor to text selection
         const { from } = ed.state.selection;
@@ -4466,8 +4579,9 @@ class AteColorBubbleMenuComponent {
             const { node } = ed.view.domAtPos(from);
             const element = node instanceof Element ? node : node.parentElement;
             const colorElement = element?.closest('[style*="color"], [style*="background"], mark');
-            if (colorElement)
+            if (colorElement) {
                 return colorElement.getBoundingClientRect();
+            }
         }
         catch (_e) {
             /* ignore */
@@ -4477,15 +4591,29 @@ class AteColorBubbleMenuComponent {
         if (selection && selection.rangeCount > 0) {
             const range = selection.getRangeAt(0);
             const rect = range.getBoundingClientRect();
-            if (rect.width > 0 && rect.height > 0)
+            if (rect.width > 0 && rect.height > 0) {
                 return rect;
+            }
         }
         // Final fallback to coordinates at cursor
         const { top, bottom, left, right } = ed.view.coordsAtPos(from);
         return new DOMRect(left, top, right - left, bottom - top);
     }
+    onTippyShow(_instance) {
+        // 1. Lock the mode immediately to be immune to external signal changes
+        const currentMode = this.colorPickerSvc.editMode() || "text";
+        this.activeMode.set(currentMode);
+        // 2. Capture selection for the command fallback
+        this.colorPickerSvc.captureSelection(this.editor());
+    }
+    onTippyHide(_instance) {
+        // Clear trigger only AFTER the menu is hidden to maintain anchor stability during animation
+        this.colorPickerSvc.done();
+        this.colorPickerSvc.close();
+    }
     isColorActive(color) {
-        return this.colorPickerSvc.normalizeColor(this.currentColor()) === this.colorPickerSvc.normalizeColor(color);
+        return (this.colorPickerSvc.normalizeColor(this.currentColor()) ===
+            this.colorPickerSvc.normalizeColor(color));
     }
     applyColor(color, addToHistory = true, event) {
         if (event) {
@@ -4513,8 +4641,9 @@ class AteColorBubbleMenuComponent {
     onHexInput(event) {
         const input = event.target;
         let value = input.value.trim();
-        if (!value.startsWith("#"))
+        if (!value.startsWith("#")) {
             value = "#" + value;
+        }
         if (/^#?[0-9A-Fa-f]{3,6}$/.test(value)) {
             this.applyColor(value, false);
         }
@@ -4522,8 +4651,9 @@ class AteColorBubbleMenuComponent {
     onHexChange(event) {
         const input = event.target;
         let value = input.value.trim();
-        if (!value.startsWith("#"))
+        if (!value.startsWith("#")) {
             value = "#" + value;
+        }
         if (/^#?[0-9A-Fa-f]{3,6}$/.test(value)) {
             this.applyColor(value, true, event);
         }
@@ -4570,8 +4700,8 @@ class AteColorBubbleMenuComponent {
             this.updateMenu();
         }, 150);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AteColorBubbleMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AteColorBubbleMenuComponent, isStandalone: true, selector: "ate-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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AteColorBubbleMenuComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AteColorBubbleMenuComponent, isStandalone: true, selector: "ate-color-bubble-menu", viewQueries: [{ propertyName: "colorInputRef", first: true, predicate: ["colorInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
     <div
       #menuRef
       class="bubble-menu color-bubble-menu"
@@ -4732,10 +4862,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
       </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 .ate-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 .ate-button.is-active{border-color:var(--ate-primary, #3b82f6);box-shadow:0 0 0 2px #3b82f64d}:host ::ng-deep .btn-native-picker-trigger .ate-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: { editor: [{ type: i0.Input, args: [{ isSignal: true, alias: "editor", required: true }] }], menuRef: [{
-                type: ViewChild,
-                args: ["menuRef", { static: false }]
-            }], colorInputRef: [{ type: i0.ViewChild, args: ["colorInput", { isSignal: true }] }] } });
+        }], propDecorators: { colorInputRef: [{ type: i0.ViewChild, args: ["colorInput", { isSignal: true }] }] } });
 
 /**
  * Clés des commandes natives dans l'ordre d'affichage
@@ -4873,6 +5000,7 @@ class AteSlashCommandsComponent {
         this.i18nService = inject(AteI18nService);
         this.editor = input.required(...(ngDevMode ? [{ debugName: "editor" }] : []));
         this.config = input(undefined, ...(ngDevMode ? [{ debugName: "config" }] : []));
+        this.menuRef = viewChild.required("menuRef");
         this.tippyInstance = null;
         this.editorCommands = inject(AteEditorCommandsService);
         // Local state
@@ -4903,8 +5031,9 @@ class AteSlashCommandsComponent {
         }, ...(ngDevMode ? [{ debugName: "filteredCommands" }] : []));
         this.updateMenu = () => {
             const ed = this.editor();
-            if (!ed)
+            if (!ed) {
                 return;
+            }
             const { from } = ed.state.selection;
             // Check if '/' was typed at the beginning of a line or after a space
             const textBefore = ed.state.doc.textBetween(Math.max(0, from - 20), from, "\n");
@@ -4937,57 +5066,11 @@ class AteSlashCommandsComponent {
         this.handleBlur = () => {
             setTimeout(() => this.hideTippy(), 100);
         };
-        this.handleKeyDown = (event) => {
-            // Only handle keys if menu is active
-            if (!this.isActive || this.filteredCommands().length === 0) {
-                return;
-            }
-            switch (event.key) {
-                case "ArrowDown": {
-                    event.preventDefault();
-                    event.stopPropagation();
-                    const nextIndex = (this.selectedIndex() + 1) % this.filteredCommands().length;
-                    this.selectedIndex.set(nextIndex);
-                    this.scrollToSelected();
-                    break;
-                }
-                case "ArrowUp": {
-                    event.preventDefault();
-                    event.stopPropagation();
-                    const prevIndex = this.selectedIndex() === 0 ? this.filteredCommands().length - 1 : this.selectedIndex() - 1;
-                    this.selectedIndex.set(prevIndex);
-                    this.scrollToSelected();
-                    break;
-                }
-                case "Enter": {
-                    event.preventDefault();
-                    event.stopPropagation();
-                    const selectedCommand = this.filteredCommands()[this.selectedIndex()];
-                    if (selectedCommand) {
-                        this.executeCommand(selectedCommand);
-                    }
-                    break;
-                }
-                case "Escape": {
-                    event.preventDefault();
-                    event.stopPropagation();
-                    this.isActive = false;
-                    this.hideTippy();
-                    // Optional: remove the typed "/"
-                    const ed = this.editor();
-                    if (ed && this.slashRange) {
-                        const { tr } = ed.state;
-                        tr.delete(this.slashRange.from, this.slashRange.to);
-                        ed.view.dispatch(tr);
-                    }
-                    break;
-                }
-            }
-        };
         effect(() => {
             const ed = this.editor();
-            if (!ed)
+            if (!ed) {
                 return;
+            }
             // Clean up old listeners
             ed.off("selectionUpdate", this.updateMenu);
             ed.off("transaction", this.updateMenu);
@@ -5020,11 +5103,11 @@ class AteSlashCommandsComponent {
         }
     }
     initTippy() {
-        if (!this.menuRef?.nativeElement) {
+        if (!this.menuRef()?.nativeElement) {
             setTimeout(() => this.initTippy(), 50);
             return;
         }
-        const menuElement = this.menuRef.nativeElement;
+        const menuElement = this.menuRef().nativeElement;
         if (this.tippyInstance) {
             this.tippyInstance.destroy();
         }
@@ -5093,8 +5176,9 @@ class AteSlashCommandsComponent {
     }
     scrollToSelected() {
         // Scroll to the selected element
-        if (this.menuRef?.nativeElement) {
-            const selectedItem = this.menuRef.nativeElement.querySelector(".slash-command-item.selected");
+        const menuEl = this.menuRef()?.nativeElement;
+        if (menuEl) {
+            const selectedItem = menuEl.querySelector(".slash-command-item.selected");
             if (selectedItem) {
                 selectedItem.scrollIntoView({ block: "nearest", behavior: "smooth" });
             }
@@ -5114,8 +5198,9 @@ class AteSlashCommandsComponent {
     }
     executeCommand(command) {
         const ed = this.editor();
-        if (!ed || !this.slashRange)
+        if (!ed || !this.slashRange) {
             return;
+        }
         // Remove slash text ("/")
         const { tr } = ed.state;
         tr.delete(this.slashRange.from, this.slashRange.to);
@@ -5150,7 +5235,9 @@ class AteSlashCommandsComponent {
                         }
                         case "ArrowUp": {
                             event.preventDefault();
-                            const prevIndex = this.selectedIndex() === 0 ? this.filteredCommands().length - 1 : this.selectedIndex() - 1;
+                            const prevIndex = this.selectedIndex() === 0
+                                ? this.filteredCommands().length - 1
+                                : this.selectedIndex() - 1;
                             this.selectedIndex.set(prevIndex);
                             this.scrollToSelected();
                             return true;
@@ -5186,7 +5273,7 @@ class AteSlashCommandsComponent {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AteSlashCommandsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AteSlashCommandsComponent, isStandalone: true, selector: "ate-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: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AteSlashCommandsComponent, isStandalone: true, selector: "ate-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, isSignal: true }], ngImport: i0, template: `
     <div #menuRef class="slash-commands-menu">
       @for (command of filteredCommands(); track command.title) {
         <div
@@ -5227,10 +5314,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
       }
     </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: { editor: [{ type: i0.Input, args: [{ isSignal: true, alias: "editor", required: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], menuRef: [{
-                type: ViewChild,
-                args: ["menuRef", { static: false }]
-            }] } });
+        }], ctorParameters: () => [], propDecorators: { editor: [{ type: i0.Input, args: [{ isSignal: true, alias: "editor", required: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], menuRef: [{ type: i0.ViewChild, args: ["menuRef", { isSignal: true }] }] } });
 
 /**
  * Edit Toggle Component
@@ -5311,12 +5395,15 @@ const AteSelectionCalculator = editor => {
     const { selection } = editor.state;
     const { from, to } = selection;
     let selectionType = "none";
-    if (selection instanceof TextSelection)
+    if (selection instanceof TextSelection) {
         selectionType = "text";
-    else if (selection instanceof NodeSelection)
+    }
+    else if (selection instanceof NodeSelection) {
         selectionType = "node";
-    else if (selection instanceof CellSelection)
+    }
+    else if (selection instanceof CellSelection) {
         selectionType = "cell";
+    }
     let isSingleCell = false;
     if (selection instanceof CellSelection) {
         isSingleCell = selection.$anchorCell.pos === selection.$headCell.pos;
@@ -5348,8 +5435,9 @@ const AteMarksCalculator = editor => {
     const isInsideInlineCode = isCode;
     // 1. Resolve target element once for this calculation
     const getTargetElement = () => {
-        if (typeof window === "undefined" || !editor.view?.dom)
+        if (typeof window === "undefined" || !editor.view?.dom) {
             return null;
+        }
         try {
             const { from } = editor.state.selection;
             const { node } = editor.view.domAtPos(from);
@@ -5363,8 +5451,9 @@ const AteMarksCalculator = editor => {
     const computedStyle = targetEl && typeof window !== "undefined" ? window.getComputedStyle(targetEl) : null;
     // 2. Lightweight helper to extract properties from the pre-calculated style object
     const getStyle = (prop) => {
-        if (!computedStyle)
+        if (!computedStyle) {
             return null;
+        }
         const val = computedStyle.getPropertyValue(prop);
         return normalizeColor(val);
     };
@@ -5386,7 +5475,8 @@ const AteMarksCalculator = editor => {
             computedColor: colorMark || getStyle("color"),
             background: backgroundMark,
             computedBackground: backgroundMark || getStyle("background-color"),
-            linkOpenOnClick: editor.extensionManager.extensions.find(ext => ext.name === "link")?.options?.openOnClick ?? false,
+            linkOpenOnClick: editor.extensionManager.extensions.find(ext => ext.name === "link")?.options?.openOnClick ??
+                false,
         },
         can: {
             toggleBold: marksAllowed && !isInsideInlineCode && editor.can().toggleBold(),
@@ -5395,7 +5485,9 @@ const AteMarksCalculator = editor => {
             toggleStrike: marksAllowed && !isInsideInlineCode && editor.can().toggleStrike(),
             toggleCode: marksAllowed && editor.can().toggleCode(),
             toggleHighlight: marksAllowed && !isInsideInlineCode && editor.can().toggleHighlight(),
-            toggleLink: marksAllowed && !isInsideInlineCode && (editor.can().setLink({ href: "" }) || editor.can().unsetLink()),
+            toggleLink: marksAllowed &&
+                !isInsideInlineCode &&
+                (editor.can().setLink({ href: "" }) || editor.can().unsetLink()),
             toggleSuperscript: marksAllowed && !isInsideInlineCode && editor.can().toggleSuperscript(),
             toggleSubscript: marksAllowed && !isInsideInlineCode && editor.can().toggleSubscript(),
             setColor: marksAllowed && !isInsideInlineCode && editor.can().setColor(""),
@@ -5522,7 +5614,16 @@ const AteDiscoveryCalculator = (editor) => {
         const name = extension.name;
         const type = extension.type;
         // Skip internal/core extensions or already handled ones
-        if (["selection", "editable", "focus", "undo", "redo", "history", "placeholder", "characterCount"].includes(name)) {
+        if ([
+            "selection",
+            "editable",
+            "focus",
+            "undo",
+            "redo",
+            "history",
+            "placeholder",
+            "characterCount",
+        ].includes(name)) {
             return;
         }
         if (handled.includes(name)) {
@@ -5545,13 +5646,16 @@ const AteLinkClickBehavior = Extension.create({
             new Plugin({
                 key: new PluginKey("linkClickBehavior"),
                 props: {
-                    handleClick(view, _pos, _event) {
+                    handleClick(view, _pos, event) {
                         // handleClick only runs in the browser, but we guard it for absolute SSR safety
-                        if (typeof window === "undefined")
+                        if (typeof window === "undefined") {
                             return false;
-                        // If editor is editable, let TipTap/BubbleMenu handle it
-                        if (view.editable)
+                        }
+                        const isModKey = event.ctrlKey || event.metaKey;
+                        // If editor is editable, only proceed if Ctrl/Cmd is pressed
+                        if (view.editable && !isModKey) {
                             return false;
+                        }
                         const attrs = getAttributes(view.state, "link");
                         if (attrs["href"]) {
                             window.open(attrs["href"], "_blank", "noopener,noreferrer");
@@ -5753,12 +5857,14 @@ class AngularTiptapEditorComponent {
         // Appearance & Fundamentals
         this.finalSeamless = computed(() => {
             const fromConfig = this.config().mode;
-            if (fromConfig !== undefined)
+            if (fromConfig !== undefined) {
                 return fromConfig === "seamless";
+            }
             return this.seamless();
         }, ...(ngDevMode ? [{ debugName: "finalSeamless" }] : []));
         this.finalEditable = computed(() => this.config().editable ?? this.editable(), ...(ngDevMode ? [{ debugName: "finalEditable" }] : []));
-        this.finalPlaceholder = computed(() => this.config().placeholder ?? (this.placeholder() || this.currentTranslations().editor.placeholder), ...(ngDevMode ? [{ debugName: "finalPlaceholder" }] : []));
+        this.finalPlaceholder = computed(() => this.config().placeholder ??
+            (this.placeholder() || this.currentTranslations().editor.placeholder), ...(ngDevMode ? [{ debugName: "finalPlaceholder" }] : []));
         this.finalFillContainer = computed(() => this.config().fillContainer ?? this.fillContainer(), ...(ngDevMode ? [{ debugName: "finalFillContainer" }] : []));
         this.finalShowFooter = computed(() => this.config().showFooter ?? this.showFooter(), ...(ngDevMode ? [{ debugName: "finalShowFooter" }] : []));
         this.finalShowEditToggle = computed(() => this.config().showEditToggle ?? this.showEditToggle(), ...(ngDevMode ? [{ debugName: "finalShowEditToggle" }] : []));
@@ -5772,8 +5878,9 @@ class AngularTiptapEditorComponent {
         this.finalToolbarConfig = computed(() => {
             const fromConfig = this.config().toolbar;
             const base = ATE_DEFAULT_TOOLBAR_CONFIG;
-            if (fromConfig)
+            if (fromConfig) {
                 return { ...base, ...fromConfig };
+            }
             const fromInput = this.toolbar();
             return Object.keys(fromInput).length === 0 ? base : { ...base, ...fromInput };
         }, ...(ngDevMode ? [{ debugName: "finalToolbarConfig" }] : []));
@@ -5782,40 +5889,51 @@ class AngularTiptapEditorComponent {
         this.finalBubbleMenuConfig = computed(() => {
             const fromConfig = this.config().bubbleMenu;
             const base = ATE_DEFAULT_BUBBLE_MENU_CONFIG;
-            if (fromConfig)
+            if (fromConfig) {
                 return { ...base, ...fromConfig };
+            }
             return Object.keys(this.bubbleMenu()).length === 0 ? base : { ...base, ...this.bubbleMenu() };
         }, ...(ngDevMode ? [{ debugName: "finalBubbleMenuConfig" }] : []));
         this.finalShowImageBubbleMenu = computed(() => this.config().showImageBubbleMenu ?? this.showImageBubbleMenu(), ...(ngDevMode ? [{ debugName: "finalShowImageBubbleMenu" }] : []));
         this.finalImageBubbleMenuConfig = computed(() => {
             const fromConfig = this.config().imageBubbleMenu;
             const base = ATE_DEFAULT_IMAGE_BUBBLE_MENU_CONFIG;
-            if (fromConfig)
+            if (fromConfig) {
                 return { ...base, ...fromConfig };
-            return Object.keys(this.imageBubbleMenu()).length === 0 ? base : { ...base, ...this.imageBubbleMenu() };
+            }
+            return Object.keys(this.imageBubbleMenu()).length === 0
+                ? base
+                : { ...base, ...this.imageBubbleMenu() };
         }, ...(ngDevMode ? [{ debugName: "finalImageBubbleMenuConfig" }] : []));
         this.finalShowTableBubbleMenu = computed(() => this.config().showTableMenu ?? this.showTableBubbleMenu(), ...(ngDevMode ? [{ debugName: "finalShowTableBubbleMenu" }] : []));
         this.finalTableBubbleMenuConfig = computed(() => {
             const fromConfig = this.config().tableBubbleMenu;
             const base = ATE_DEFAULT_TABLE_MENU_CONFIG;
-            if (fromConfig)
+            if (fromConfig) {
                 return { ...base, ...fromConfig };
-            return Object.keys(this.tableBubbleMenu()).length === 0 ? base : { ...base, ...this.tableBubbleMenu() };
+            }
+            return Object.keys(this.tableBubbleMenu()).length === 0
+                ? base
+                : { ...base, ...this.tableBubbleMenu() };
         }, ...(ngDevMode ? [{ debugName: "finalTableBubbleMenuConfig" }] : []));
         this.finalShowCellBubbleMenu = computed(() => this.config().showCellMenu ?? this.showCellBubbleMenu(), ...(ngDevMode ? [{ debugName: "finalShowCellBubbleMenu" }] : []));
         this.finalCellBubbleMenuConfig = computed(() => {
             const fromConfig = this.config().cellBubbleMenu;
             const base = ATE_DEFAULT_CELL_MENU_CONFIG;
-            if (fromConfig)
+            if (fromConfig) {
                 return { ...base, ...fromConfig };
-            return Object.keys(this.cellBubbleMenu()).length === 0 ? base : { ...base, ...this.cellBubbleMenu() };
+            }
+            return Object.keys(this.cellBubbleMenu()).length === 0
+                ? base
+                : { ...base, ...this.cellBubbleMenu() };
         }, ...(ngDevMode ? [{ debugName: "finalCellBubbleMenuConfig" }] : []));
         this.finalEnableSlashCommands = computed(() => this.config().enableSlashCommands ?? this.enableSlashCommands(), ...(ngDevMode ? [{ debugName: "finalEnableSlashCommands" }] : []));
         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;
@@ -5875,17 +5993,21 @@ class AngularTiptapEditorComponent {
             untracked(() => {
                 const editor = this.editor();
                 const hasFormControl = !!this.ngControl?.control;
-                if (!editor || content === undefined)
+                if (!editor || content === undefined) {
                     return;
+                }
                 // Anti-écho : on ignore ce qu'on vient d'émettre nous-mêmes
-                if (content === this.lastEmittedHtml)
+                if (content === this.lastEmittedHtml) {
                     return;
+                }
                 // Double sécurité : on vérifie le contenu actuel de l'éditeur
-                if (content === editor.getHTML())
+                if (content === editor.getHTML()) {
                     return;
+                }
                 // Do not overwrite content if we have a FormControl and content is empty
-                if (hasFormControl && !content)
+                if (hasFormControl && !content) {
                     return;
+                }
                 editor.commands.setContent(content, false);
             });
         });
@@ -6017,7 +6139,9 @@ class AngularTiptapEditorComponent {
         // Allow addition of custom extensions, but avoid duplicates by filtering by name
         const customExtensions = this.tiptapExtensions();
         if (customExtensions.length > 0) {
-            const existingNames = new Set(extensions.map(ext => ext?.name).filter((name) => !!name));
+            const existingNames = new Set(extensions
+                .map(ext => ext?.name)
+                .filter((name) => !!name));
             const toAdd = customExtensions.filter(ext => {
                 const name = ext?.name;
                 return !name || !existingNames.has(name);
@@ -6082,7 +6206,8 @@ class AngularTiptapEditorComponent {
         this.editableChange.emit(newEditable);
     }
     updateCharacterCount(editor) {
-        if ((this.finalShowCharacterCount() || this.finalShowWordCount()) && 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());
@@ -6183,8 +6308,9 @@ class AngularTiptapEditorComponent {
     }
     onEditorClick(event) {
         const editor = this.editor();
-        if (!editor || !this.finalEditable())
+        if (!editor || !this.finalEditable()) {
             return;
+        }
         // Verify if interaction is on the container element and not on the content
         const target = event.target;
         const editorElement = this.editorElement()?.nativeElement;
@@ -6290,7 +6416,10 @@ class AngularTiptapEditorComponent {
 
       <!-- Counters -->
       @if (
-        finalEditable() && !mergedDisabled() && finalShowFooter() && (finalShowCharacterCount() || finalShowWordCount())
+        finalEditable() &&
+        !mergedDisabled() &&
+        finalShowFooter() &&
+        (finalShowCharacterCount() || finalShowWordCount())
       ) {
         <div
           class="character-count"
@@ -6314,7 +6443,7 @@ class AngularTiptapEditorComponent {
         </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-code-color);--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%}.ate-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) .ate-editor{overflow:visible}:host(.fill-container) .ate-editor{display:flex;flex-direction:column;height:100%}:host(.fill-container) .ate-content-wrapper{flex:1;min-height:0}:host(.fill-container) .ate-content{flex:1;min-height:0;overflow-y:auto}.ate-editor:focus-within{border-color:var(--ate-focus-color)}.ate-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) .ate-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) .ate-content{cursor:default;-webkit-user-select:text;user-select:text}:host(.is-readonly) .ate-content ::ng-deep .ate-link{cursor:pointer;pointer-events:auto}.ate-content::-webkit-scrollbar{width:var(--ate-scrollbar-width)}.ate-content-wrapper{position:relative;display:flex;flex-direction:column;min-height:0}.ate-content-wrapper .ate-content{flex:1}.ate-content::-webkit-scrollbar-track{background:var(--ate-scrollbar-track)}.ate-content::-webkit-scrollbar-thumb{background:var(--ate-scrollbar-thumb);border:3px solid transparent;background-clip:content-box;border-radius:10px}.ate-content::-webkit-scrollbar-thumb:hover{background:var(--ate-scrollbar-thumb-hover);background-clip:content-box}.ate-content.drag-over{background:var(--ate-drag-background);border:2px dashed var(--ate-drag-border-color)}.character-count{padding:6px 8px;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: AteToolbarComponent, selector: "ate-toolbar", inputs: ["editor", "config", "imageUpload", "floating"] }, { kind: "component", type: AteBubbleMenuComponent, selector: "ate-bubble-menu", inputs: ["config"] }, { kind: "component", type: AteImageBubbleMenuComponent, selector: "ate-image-bubble-menu", inputs: ["config", "imageUpload"] }, { kind: "component", type: AteTableBubbleMenuComponent, selector: "ate-table-bubble-menu", inputs: ["config"] }, { kind: "component", type: AteCellBubbleMenuComponent, selector: "ate-cell-bubble-menu", inputs: ["config"] }, { kind: "component", type: AteSlashCommandsComponent, selector: "ate-slash-commands", inputs: ["editor", "config"] }, { kind: "component", type: AteLinkBubbleMenuComponent, selector: "ate-link-bubble-menu", inputs: ["editor"] }, { kind: "component", type: AteColorBubbleMenuComponent, selector: "ate-color-bubble-menu", inputs: ["editor"] }, { kind: "component", type: AteEditToggleComponent, selector: "ate-edit-toggle", inputs: ["editable", "translations"], outputs: ["editToggle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, 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-code-color);--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%}.ate-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) .ate-editor{overflow:visible}:host(.fill-container) .ate-editor{display:flex;flex-direction:column;height:100%}:host(.fill-container) .ate-content-wrapper{flex:1;min-height:0}:host(.fill-container) .ate-content{flex:1;min-height:0;overflow-y:auto}.ate-editor:focus-within{border-color:var(--ate-focus-color)}.ate-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) .ate-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) .ate-content{cursor:default;-webkit-user-select:text;user-select:text}:host(.is-readonly) .ate-content ::ng-deep .ate-link{cursor:pointer;pointer-events:auto}.ate-content::-webkit-scrollbar{width:var(--ate-scrollbar-width)}.ate-content-wrapper{position:relative;display:flex;flex-direction:column;min-height:0}.ate-content-wrapper .ate-content{flex:1}.ate-content::-webkit-scrollbar-track{background:var(--ate-scrollbar-track)}.ate-content::-webkit-scrollbar-thumb{background:var(--ate-scrollbar-thumb);border:3px solid transparent;background-clip:content-box;border-radius:10px}.ate-content::-webkit-scrollbar-thumb:hover{background:var(--ate-scrollbar-thumb-hover);background-clip:content-box}.ate-content.drag-over{background:var(--ate-drag-background);border:2px dashed var(--ate-drag-border-color)}.character-count{padding:6px 8px;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: AteToolbarComponent, selector: "ate-toolbar", inputs: ["editor", "config", "imageUpload", "floating"] }, { kind: "component", type: AteBubbleMenuComponent, selector: "ate-bubble-menu", inputs: ["config"] }, { kind: "component", type: AteImageBubbleMenuComponent, selector: "ate-image-bubble-menu", inputs: ["config", "imageUpload"] }, { kind: "component", type: AteTableBubbleMenuComponent, selector: "ate-table-bubble-menu", inputs: ["config"] }, { kind: "component", type: AteCellBubbleMenuComponent, selector: "ate-cell-bubble-menu", inputs: ["config"] }, { kind: "component", type: AteSlashCommandsComponent, selector: "ate-slash-commands", inputs: ["editor", "config"] }, { kind: "component", type: AteLinkBubbleMenuComponent, selector: "ate-link-bubble-menu" }, { kind: "component", type: AteColorBubbleMenuComponent, selector: "ate-color-bubble-menu" }, { kind: "component", type: AteEditToggleComponent, selector: "ate-edit-toggle", inputs: ["editable", "translations"], outputs: ["editToggle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AngularTiptapEditorComponent, decorators: [{
             type: Component,
@@ -6431,7 +6560,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
 
       <!-- Counters -->
       @if (
-        finalEditable() && !mergedDisabled() && finalShowFooter() && (finalShowCharacterCount() || finalShowWordCount())
+        finalEditable() &&
+        !mergedDisabled() &&
+        finalShowFooter() &&
+        (finalShowCharacterCount() || finalShowWordCount())
       ) {
         <div
           class="character-count"