@flogeez/angular-tiptap-editor 0.5.2 → 0.5.3

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

@@ -523,11 +523,12 @@ const TableExtension = Extension.create({
 class TiptapButtonComponent {
     constructor() {
         // Inputs
-        this.icon = input.required();
+        this.icon = input("");
         this.title = input.required();
         this.active = input(false);
         this.disabled = input(false);
         this.color = input();
+        this.backgroundColor = input();
         this.variant = input("default");
         this.size = input("medium");
         this.iconSize = input("medium");
@@ -538,7 +539,7 @@ class TiptapButtonComponent {
         event.preventDefault();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.0", type: TiptapButtonComponent, isStandalone: true, selector: "tiptap-button", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: TiptapButtonComponent, isStandalone: true, selector: "tiptap-button", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, backgroundColor: { classPropertyName: "backgroundColor", publicName: "backgroundColor", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
     <button
       class="tiptap-button"
       [class.is-active]="active()"
@@ -549,23 +550,26 @@ class TiptapButtonComponent {
       [class.medium]="size() === 'medium'"
       [class.large]="size() === 'large'"
       [class.has-custom-color]="!!color()"
+      [class.has-custom-bg]="!!backgroundColor()"
       [disabled]="disabled()"
       [style.color]="color()"
+      [style.background-color]="backgroundColor()"
       [attr.title]="title()"
       (mousedown)="onMouseDown($event)"
       (click)="onClick.emit($event)"
       type="button"
     >
-      <span
-        class="material-symbols-outlined"
-        [class.icon-small]="iconSize() === 'small'"
-        [class.icon-medium]="iconSize() === 'medium'"
-        [class.icon-large]="iconSize() === 'large'"
-        >{{ icon() }}</span
-      >
+      @if (icon()) {
+        <span
+          class="material-symbols-outlined"
+          [class.icon-small]="iconSize() === 'small'"
+          [class.icon-medium]="iconSize() === 'medium'"
+          [class.icon-large]="iconSize() === 'large'"
+          >{{ icon() }}</span>
+      }
       <ng-content></ng-content>
     </button>
-  `, isInline: true, styles: [".tiptap-button{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;background:transparent;border-radius:var(--ate-border-radius, 8px);cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);color:var(--ate-toolbar-button-color, var(--ate-text-secondary));position:relative;overflow:hidden}.tiptap-button:before{content:\"\";position:absolute;inset:0;background:var(--ate-primary);opacity:0;transition:opacity .2s ease;border-radius:var(--ate-border-radius, 8px)}.tiptap-button:hover:not(.has-custom-color){color:var(--ate-toolbar-button-active-color, var(--ate-primary));background:var(--ate-toolbar-button-hover-background, transparent);transform:translateY(-1px)}.tiptap-button.has-custom-color:hover{background:var(--ate-toolbar-button-hover-background, transparent);transform:translateY(-1px)}.tiptap-button:hover:before{opacity:.1}.tiptap-button:active{transform:translateY(0)}.tiptap-button.is-active:not(.has-custom-color){color:var(--ate-toolbar-button-active-color, var(--ate-primary));background:var(--ate-toolbar-button-active-background, var(--ate-primary-light))}.tiptap-button.is-active.has-custom-color{background:var(--ate-toolbar-button-active-background, var(--ate-primary-light))}.tiptap-button:disabled{opacity:.4;cursor:not-allowed;pointer-events:none}.tiptap-button .material-symbols-outlined{font-size:20px;position:relative;z-index:1}.tiptap-button .material-symbols-outlined.icon-small{font-size:16px}.tiptap-button .material-symbols-outlined.icon-medium{font-size:20px}.tiptap-button .material-symbols-outlined.icon-large{font-size:24px}.tiptap-button.text-button{width:auto;padding:0 12px;font-size:14px;font-weight:500;gap:8px}.tiptap-button.color-button{width:28px;height:28px;border-radius:50%;border:2px solid transparent;transition:all .2s ease}.tiptap-button.color-button:hover{border-color:var(--ate-border);transform:scale(1.1)}.tiptap-button.color-button.is-active{border-color:var(--ate-primary);box-shadow:0 0 0 2px var(--ate-primary-light)}.tiptap-button.danger{color:var(--ate-error-color, #ef4444)}.tiptap-button.danger:hover{background:var(--ate-error-bg, rgba(239, 68, 68, .1))}.tiptap-button.danger:before{background:var(--ate-error-color, #ef4444)}.tiptap-button.small{width:24px;height:24px}.tiptap-button.medium{width:32px;height:32px}.tiptap-button.large{width:40px;height:40px}@keyframes pulse{0%,to{box-shadow:0 0 0 0 var(--ate-primary-light-alpha)}50%{box-shadow:0 0 0 4px transparent}}.tiptap-button.is-active.pulse{animation:pulse 2s infinite}@media (max-width: 768px){.tiptap-button{width:32px;height:32px}.tiptap-button .material-symbols-outlined{font-size:18px}.tiptap-button.text-button{padding:0 8px;font-size:13px}}\n"] }); }
+  `, isInline: true, styles: [".tiptap-button{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;background:transparent;border-radius:var(--ate-border-radius, 8px);cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);color:var(--ate-toolbar-button-color, var(--ate-text-secondary));position:relative;overflow:hidden}.tiptap-button:before{content:\"\";position:absolute;inset:0;background:var(--ate-primary);opacity:0;transition:opacity .2s ease;border-radius:var(--ate-border-radius, 8px)}.tiptap-button:hover:not(.has-custom-color){color:var(--ate-toolbar-button-active-color, var(--ate-primary));background:var(--ate-toolbar-button-hover-background, transparent);transform:translateY(-1px)}.tiptap-button.has-custom-color:hover:not(.has-custom-bg){background:var(--ate-toolbar-button-hover-background, transparent);transform:translateY(-1px)}.tiptap-button.has-custom-bg:hover{transform:translateY(-1px);filter:brightness(.9)}.tiptap-button:hover:before{opacity:.1}.tiptap-button:active{transform:translateY(0)}.tiptap-button.is-active:not(.has-custom-color){color:var(--ate-toolbar-button-active-color, var(--ate-primary));background:var(--ate-toolbar-button-active-background, var(--ate-primary-light))}.tiptap-button.is-active.has-custom-color{background:var(--ate-toolbar-button-active-background, var(--ate-primary-light))}.tiptap-button:disabled{opacity:.4;cursor:not-allowed;pointer-events:none}.tiptap-button .material-symbols-outlined{font-size:20px;position:relative;z-index:1}.tiptap-button .material-symbols-outlined.icon-small{font-size:16px}.tiptap-button .material-symbols-outlined.icon-medium{font-size:20px}.tiptap-button .material-symbols-outlined.icon-large{font-size:24px}.tiptap-button.text-button{width:auto;padding:0 12px;font-size:14px;font-weight:500;gap:8px}.tiptap-button.color-button{width:28px;height:28px;border-radius:50%;border:2px solid transparent;transition:all .2s ease}.tiptap-button.color-button:hover{border-color:var(--ate-border);transform:scale(1.1)}.tiptap-button.color-button.is-active{border-color:var(--ate-primary);box-shadow:0 0 0 2px var(--ate-primary-light)}.tiptap-button.danger{color:var(--ate-error-color, #ef4444)}.tiptap-button.danger:hover{background:var(--ate-error-bg, rgba(239, 68, 68, .1))}.tiptap-button.danger:before{background:var(--ate-error-color, #ef4444)}.tiptap-button.small{width:24px;height:24px}.tiptap-button.medium{width:32px;height:32px}.tiptap-button.large{width:40px;height:40px}@keyframes pulse{0%,to{box-shadow:0 0 0 0 var(--ate-primary-light-alpha)}50%{box-shadow:0 0 0 4px transparent}}.tiptap-button.is-active.pulse{animation:pulse 2s infinite}@media (max-width: 768px){.tiptap-button{width:32px;height:32px}.tiptap-button .material-symbols-outlined{font-size:18px}.tiptap-button.text-button{padding:0 8px;font-size:13px}}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapButtonComponent, decorators: [{
             type: Component,
@@ -580,23 +584,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
       [class.medium]="size() === 'medium'"
       [class.large]="size() === 'large'"
       [class.has-custom-color]="!!color()"
+      [class.has-custom-bg]="!!backgroundColor()"
       [disabled]="disabled()"
       [style.color]="color()"
+      [style.background-color]="backgroundColor()"
       [attr.title]="title()"
       (mousedown)="onMouseDown($event)"
       (click)="onClick.emit($event)"
       type="button"
     >
-      <span
-        class="material-symbols-outlined"
-        [class.icon-small]="iconSize() === 'small'"
-        [class.icon-medium]="iconSize() === 'medium'"
-        [class.icon-large]="iconSize() === 'large'"
-        >{{ icon() }}</span
-      >
+      @if (icon()) {
+        <span
+          class="material-symbols-outlined"
+          [class.icon-small]="iconSize() === 'small'"
+          [class.icon-medium]="iconSize() === 'medium'"
+          [class.icon-large]="iconSize() === 'large'"
+          >{{ icon() }}</span>
+      }
       <ng-content></ng-content>
     </button>
-  `, styles: [".tiptap-button{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;background:transparent;border-radius:var(--ate-border-radius, 8px);cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);color:var(--ate-toolbar-button-color, var(--ate-text-secondary));position:relative;overflow:hidden}.tiptap-button:before{content:\"\";position:absolute;inset:0;background:var(--ate-primary);opacity:0;transition:opacity .2s ease;border-radius:var(--ate-border-radius, 8px)}.tiptap-button:hover:not(.has-custom-color){color:var(--ate-toolbar-button-active-color, var(--ate-primary));background:var(--ate-toolbar-button-hover-background, transparent);transform:translateY(-1px)}.tiptap-button.has-custom-color:hover{background:var(--ate-toolbar-button-hover-background, transparent);transform:translateY(-1px)}.tiptap-button:hover:before{opacity:.1}.tiptap-button:active{transform:translateY(0)}.tiptap-button.is-active:not(.has-custom-color){color:var(--ate-toolbar-button-active-color, var(--ate-primary));background:var(--ate-toolbar-button-active-background, var(--ate-primary-light))}.tiptap-button.is-active.has-custom-color{background:var(--ate-toolbar-button-active-background, var(--ate-primary-light))}.tiptap-button:disabled{opacity:.4;cursor:not-allowed;pointer-events:none}.tiptap-button .material-symbols-outlined{font-size:20px;position:relative;z-index:1}.tiptap-button .material-symbols-outlined.icon-small{font-size:16px}.tiptap-button .material-symbols-outlined.icon-medium{font-size:20px}.tiptap-button .material-symbols-outlined.icon-large{font-size:24px}.tiptap-button.text-button{width:auto;padding:0 12px;font-size:14px;font-weight:500;gap:8px}.tiptap-button.color-button{width:28px;height:28px;border-radius:50%;border:2px solid transparent;transition:all .2s ease}.tiptap-button.color-button:hover{border-color:var(--ate-border);transform:scale(1.1)}.tiptap-button.color-button.is-active{border-color:var(--ate-primary);box-shadow:0 0 0 2px var(--ate-primary-light)}.tiptap-button.danger{color:var(--ate-error-color, #ef4444)}.tiptap-button.danger:hover{background:var(--ate-error-bg, rgba(239, 68, 68, .1))}.tiptap-button.danger:before{background:var(--ate-error-color, #ef4444)}.tiptap-button.small{width:24px;height:24px}.tiptap-button.medium{width:32px;height:32px}.tiptap-button.large{width:40px;height:40px}@keyframes pulse{0%,to{box-shadow:0 0 0 0 var(--ate-primary-light-alpha)}50%{box-shadow:0 0 0 4px transparent}}.tiptap-button.is-active.pulse{animation:pulse 2s infinite}@media (max-width: 768px){.tiptap-button{width:32px;height:32px}.tiptap-button .material-symbols-outlined{font-size:18px}.tiptap-button.text-button{padding:0 8px;font-size:13px}}\n"] }]
+  `, styles: [".tiptap-button{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;background:transparent;border-radius:var(--ate-border-radius, 8px);cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);color:var(--ate-toolbar-button-color, var(--ate-text-secondary));position:relative;overflow:hidden}.tiptap-button:before{content:\"\";position:absolute;inset:0;background:var(--ate-primary);opacity:0;transition:opacity .2s ease;border-radius:var(--ate-border-radius, 8px)}.tiptap-button:hover:not(.has-custom-color){color:var(--ate-toolbar-button-active-color, var(--ate-primary));background:var(--ate-toolbar-button-hover-background, transparent);transform:translateY(-1px)}.tiptap-button.has-custom-color:hover:not(.has-custom-bg){background:var(--ate-toolbar-button-hover-background, transparent);transform:translateY(-1px)}.tiptap-button.has-custom-bg:hover{transform:translateY(-1px);filter:brightness(.9)}.tiptap-button:hover:before{opacity:.1}.tiptap-button:active{transform:translateY(0)}.tiptap-button.is-active:not(.has-custom-color){color:var(--ate-toolbar-button-active-color, var(--ate-primary));background:var(--ate-toolbar-button-active-background, var(--ate-primary-light))}.tiptap-button.is-active.has-custom-color{background:var(--ate-toolbar-button-active-background, var(--ate-primary-light))}.tiptap-button:disabled{opacity:.4;cursor:not-allowed;pointer-events:none}.tiptap-button .material-symbols-outlined{font-size:20px;position:relative;z-index:1}.tiptap-button .material-symbols-outlined.icon-small{font-size:16px}.tiptap-button .material-symbols-outlined.icon-medium{font-size:20px}.tiptap-button .material-symbols-outlined.icon-large{font-size:24px}.tiptap-button.text-button{width:auto;padding:0 12px;font-size:14px;font-weight:500;gap:8px}.tiptap-button.color-button{width:28px;height:28px;border-radius:50%;border:2px solid transparent;transition:all .2s ease}.tiptap-button.color-button:hover{border-color:var(--ate-border);transform:scale(1.1)}.tiptap-button.color-button.is-active{border-color:var(--ate-primary);box-shadow:0 0 0 2px var(--ate-primary-light)}.tiptap-button.danger{color:var(--ate-error-color, #ef4444)}.tiptap-button.danger:hover{background:var(--ate-error-bg, rgba(239, 68, 68, .1))}.tiptap-button.danger:before{background:var(--ate-error-color, #ef4444)}.tiptap-button.small{width:24px;height:24px}.tiptap-button.medium{width:32px;height:32px}.tiptap-button.large{width:40px;height:40px}@keyframes pulse{0%,to{box-shadow:0 0 0 0 var(--ate-primary-light-alpha)}50%{box-shadow:0 0 0 4px transparent}}.tiptap-button.is-active.pulse{animation:pulse 2s infinite}@media (max-width: 768px){.tiptap-button{width:32px;height:32px}.tiptap-button .material-symbols-outlined{font-size:18px}.tiptap-button.text-button{padding:0 8px;font-size:13px}}\n"] }]
         }] });
 
 class ColorPickerService {
@@ -714,6 +721,23 @@ class ColorPickerService {
                 .join("")
                 .toLowerCase());
     }
+    /**
+     * Calculate the brightness of a color to determine if it's "light" or "dark".
+     * Returns a value between 0 and 255.
+     */
+    getLuminance(color) {
+        const hex = this.normalizeColor(color).replace("#", "");
+        const r = parseInt(hex.substring(0, 2), 16);
+        const g = parseInt(hex.substring(2, 4), 16);
+        const b = parseInt(hex.substring(4, 6), 16);
+        return (r * 299 + g * 587 + b * 114) / 1000;
+    }
+    /**
+     * Returns 'black' or 'white' based on the input color contrast.
+     */
+    getContrastColor(color) {
+        return this.getLuminance(color) > 128 ? "black" : "white";
+    }
     /**
      * Apply a color to the current selection.
      */
@@ -746,6 +770,94 @@ class ColorPickerService {
         }
         chain.run();
     }
+    /**
+     * Find the first explicitly applied highlight color within a selection.
+     */
+    findFirstAppliedHighlight(editor, selection) {
+        const { from, to } = selection;
+        let found = null;
+        editor.state.doc.nodesBetween(from, to, (node) => {
+            if (found)
+                return false;
+            const highlightMark = node.marks.find((m) => m.type.name === "highlight");
+            const color = highlightMark?.attrs?.color;
+            if (color) {
+                found = this.normalizeColor(color);
+                return false;
+            }
+            return;
+        });
+        return found;
+    }
+    /**
+     * Get the current highlight color for the selection.
+     */
+    getCurrentHighlight(editor, selection) {
+        const sel = selection ??
+            {
+                from: editor.state.selection.from,
+                to: editor.state.selection.to,
+            };
+        const found = this.findFirstAppliedHighlight(editor, sel);
+        if (found)
+            return found;
+        const attrs = editor.getAttributes("highlight") || {};
+        if (attrs.color)
+            return this.normalizeColor(attrs.color);
+        return "#ffff00"; // Default highlight color yellow
+    }
+    /**
+     * Check if a highlight is explicitly applied on the selection.
+     */
+    hasHighlightApplied(editor, selection) {
+        const sel = selection ??
+            {
+                from: editor.state.selection.from,
+                to: editor.state.selection.to,
+            };
+        const { from, to } = sel;
+        if (from === to) {
+            const attrs = editor.getAttributes("highlight") || {};
+            return !!attrs.color;
+        }
+        const found = this.findFirstAppliedHighlight(editor, sel);
+        if (found)
+            return true;
+        const attrs = editor.getAttributes("highlight") || {};
+        return !!attrs.color;
+    }
+    /**
+     * Apply a highlight color to the current selection.
+     */
+    applyHighlight(editor, color, options = {}) {
+        const sel = this.getStoredSelection() ?? editor.state.selection;
+        const { addToHistory = true } = options;
+        let chain = editor.chain().focus();
+        if (sel) {
+            chain = chain.setTextSelection(sel);
+        }
+        chain.setHighlight({ color });
+        if (!addToHistory) {
+            chain.setMeta("addToHistory", false);
+        }
+        chain.run();
+    }
+    /**
+     * Unset highlight on the current selection.
+     */
+    unsetHighlight(editor, options = {}) {
+        const sel = this.getStoredSelection() ?? editor.state.selection;
+        const { addToHistory = true } = options;
+        let chain = editor.chain().focus();
+        if (sel) {
+            chain = chain.setTextSelection(sel);
+        }
+        chain.unsetHighlight();
+        if (!addToHistory) {
+            chain.setMeta("addToHistory", false);
+        }
+        chain.run();
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ColorPickerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ColorPickerService, providedIn: "root" }); }
 }
@@ -766,6 +878,7 @@ const ENGLISH_TRANSLATIONS = {
         superscript: "Superscript",
         subscript: "Subscript",
         highlight: "Highlight",
+        highlightPicker: "Background Color",
         heading1: "Heading 1",
         heading2: "Heading 2",
         heading3: "Heading 3",
@@ -794,6 +907,7 @@ const ENGLISH_TRANSLATIONS = {
         superscript: "Superscript",
         subscript: "Subscript",
         highlight: "Highlight",
+        highlightPicker: "Background Color",
         textColor: "Text Color",
         link: "Link",
         addLink: "Add Link",
@@ -924,6 +1038,7 @@ const FRENCH_TRANSLATIONS = {
         superscript: "Exposant",
         subscript: "Indice",
         highlight: "Surligner",
+        highlightPicker: "Couleur de fond",
         heading1: "Titre 1",
         heading2: "Titre 2",
         heading3: "Titre 3",
@@ -952,6 +1067,7 @@ const FRENCH_TRANSLATIONS = {
         superscript: "Exposant",
         subscript: "Indice",
         highlight: "Surligner",
+        highlightPicker: "Couleur de fond",
         textColor: "Couleur texte",
         link: "Lien",
         addLink: "Ajouter un lien",
@@ -1150,9 +1266,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
-class TiptapTextColorPickerComponent {
+class TiptapColorPickerComponent {
     constructor() {
         this.editor = input.required();
+        this.mode = input("text");
         this.interactionChange = output();
         this.requestUpdate = output();
         this.colorInputRef = viewChild("colorInput");
@@ -1166,13 +1283,56 @@ class TiptapTextColorPickerComponent {
             this.editorChange();
             if (this.previewColor())
                 return this.previewColor();
-            return this.colorPickerSvc.getCurrentColor(this.editor());
+            const editor = this.editor();
+            return this.mode() === "text"
+                ? this.colorPickerSvc.getCurrentColor(editor)
+                : this.colorPickerSvc.getCurrentHighlight(editor);
         });
         this.hasColorApplied = computed(() => {
             this.editorChange();
-            return this.previewColor()
-                ? true
-                : this.colorPickerSvc.hasColorApplied(this.editor());
+            if (this.previewColor())
+                return true;
+            const editor = this.editor();
+            return this.mode() === "text"
+                ? this.colorPickerSvc.hasColorApplied(editor)
+                : this.colorPickerSvc.hasHighlightApplied(editor);
+        });
+        /**
+         * Determine the icon to display.
+         */
+        this.buttonIcon = computed(() => {
+            if (this.mode() === "text")
+                return "format_color_text";
+            return "format_color_fill";
+        });
+        /**
+         * Determine the background color of the button.
+         */
+        this.buttonBgColor = computed(() => {
+            const color = this.currentColor();
+            if (this.mode() === "highlight") {
+                return this.hasColorApplied() ? color : "";
+            }
+            // Mode TEXT: Provide contrast background if the text color is too light
+            // (especially useful when the text color is white on a light toolbar)
+            if (this.hasColorApplied() && this.colorPickerSvc.getLuminance(color) > 200) {
+                return "#333333";
+            }
+            return "";
+        });
+        /**
+         * Determine the text/icon color of the button.
+         */
+        this.buttonTextColor = computed(() => {
+            const color = this.currentColor();
+            if (this.mode() === "text") {
+                return this.hasColorApplied() ? color : "var(--ate-text-secondary)";
+            }
+            // For highlight, if background is set, use black/white contrast for icon
+            if (this.hasColorApplied()) {
+                return this.colorPickerSvc.getLuminance(color) > 128 ? "#000000" : "#ffffff";
+            }
+            return "var(--ate-text-secondary)";
         });
         this._syncEffect = void effect(() => {
             const el = this.colorInputRef()?.nativeElement;
@@ -1207,86 +1367,81 @@ class TiptapTextColorPickerComponent {
     syncColorInputValue() {
         this.previewColor.set(null);
         this.isPicking.set(false);
-        // Reason: force recomputation from editor selection when bubble menu re-opens.
         this.notifyEditorChange();
     }
-    /**
-     * Programmatically click the hidden color input.
-     */
     triggerPicker() {
         this.colorInputRef()?.nativeElement.click();
     }
-    /**
-     * Preserve selection while interacting with native color input.
-     */
     onColorMouseDown(event) {
         event.stopPropagation();
         this.colorPickerSvc.captureSelection(this.editor());
         this.isPicking.set(true);
         this.interactionChange.emit(true);
     }
-    /**
-     * Called when the native color picker is closed.
-     */
     onColorPickerClose() {
         this.previewColor.set(null);
         this.isPicking.set(false);
-        // Commit the final color to history
         const inputEl = this.colorInputRef()?.nativeElement;
         if (inputEl) {
-            this.colorPickerSvc.applyColor(this.editor(), inputEl.value, {
-                addToHistory: true,
-            });
+            if (this.mode() === "text") {
+                this.colorPickerSvc.applyColor(this.editor(), inputEl.value, {
+                    addToHistory: true,
+                });
+            }
+            else {
+                this.colorPickerSvc.applyHighlight(this.editor(), inputEl.value, {
+                    addToHistory: true,
+                });
+            }
         }
         this.colorPickerSvc.done();
         this.interactionChange.emit(false);
         this.requestUpdate.emit();
     }
-    /**
-     * Apply selected color.
-     */
     onColorInput(event) {
         const inputEl = event.target;
         const color = inputEl.value;
-        // Update the UI immediately while the user drags in the native picker.
         this.previewColor.set(this.colorPickerSvc.normalizeColor(color));
-        // Live preview WITHOUT history pollution
-        this.colorPickerSvc.applyColor(this.editor(), color, {
-            addToHistory: false,
-        });
+        if (this.mode() === "text") {
+            this.colorPickerSvc.applyColor(this.editor(), color, {
+                addToHistory: false,
+            });
+        }
+        else {
+            this.colorPickerSvc.applyHighlight(this.editor(), color, {
+                addToHistory: false,
+            });
+        }
         this.requestUpdate.emit();
     }
-    /**
-     * Prevent opening the native picker when clicking the clear badge.
-     */
     onClearBadgeMouseDown(event) {
         event.preventDefault();
         event.stopPropagation();
     }
-    /**
-     * Clear color via the badge.
-     */
     onClearBadgeClick(event) {
         event.preventDefault();
         event.stopPropagation();
         this.previewColor.set(null);
         this.isPicking.set(false);
-        this.colorPickerSvc.unsetColor(this.editor());
+        if (this.mode() === "text") {
+            this.colorPickerSvc.unsetColor(this.editor());
+        }
+        else {
+            this.colorPickerSvc.unsetHighlight(this.editor());
+        }
         this.requestUpdate.emit();
     }
-    /**
-     * Called when the color picker is done interacting.
-     */
     done() {
         this.colorPickerSvc.done();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapTextColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: TiptapTextColorPickerComponent, isStandalone: true, selector: "tiptap-text-color-picker", inputs: { editor: { classPropertyName: "editor", publicName: "editor", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { interactionChange: "interactionChange", requestUpdate: "requestUpdate" }, viewQueries: [{ propertyName: "colorInputRef", first: true, predicate: ["colorInput"], descendants: true, isSignal: true }], ngImport: i0, template: `
-    <div class="text-color-picker-container">
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: TiptapColorPickerComponent, isStandalone: true, selector: "tiptap-color-picker", inputs: { editor: { classPropertyName: "editor", publicName: "editor", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { interactionChange: "interactionChange", requestUpdate: "requestUpdate" }, viewQueries: [{ propertyName: "colorInputRef", first: true, predicate: ["colorInput"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div class="color-picker-container" [class.is-highlight]="mode() === 'highlight'">
       <tiptap-button
-        icon="format_color_text"
-        [title]="t().textColor"
-        [color]="hasColorApplied() ? currentColor() : 'var(--ate-text)'"
+        [icon]="buttonIcon()"
+        [title]="mode() === 'text' ? t().textColor : t().highlight"
+        [color]="buttonTextColor()"
+        [backgroundColor]="buttonBgColor()"
         (onClick)="triggerPicker()"
       >
         <input
@@ -1312,16 +1467,17 @@ class TiptapTextColorPickerComponent {
       </button>
       }
     </div>
-  `, isInline: true, styles: [".text-color-picker-container{position:relative;display:inline-flex;align-items:center}.text-color-picker-container tiptap-button{position:relative}.btn-clear-badge{position:absolute;top:-4px;right:-4px;width:14px;height:14px;padding:0;border:none;border-radius:999px;background:#0f172abf;color:#fff;display:flex;align-items:center;justify-content:center;z-index:10;opacity:0;pointer-events:none;transition:opacity .12s ease}.text-color-picker-container:hover .btn-clear-badge{opacity:1;pointer-events:auto}.btn-clear-badge .material-symbols-outlined{font-size:10px;line-height:1}input[type=color]{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;z-index:5}\n"], dependencies: [{ kind: "component", type: TiptapButtonComponent, selector: "tiptap-button", inputs: ["icon", "title", "active", "disabled", "color", "variant", "size", "iconSize"], outputs: ["onClick"] }] }); }
+  `, isInline: true, styles: [".color-picker-container{position:relative;display:inline-flex;align-items:center}.color-picker-container tiptap-button{position:relative}.btn-clear-badge{position:absolute;top:-4px;right:-4px;width:14px;height:14px;padding:0;border:none;border-radius:999px;background:#0f172abf;color:#fff;display:flex;align-items:center;justify-content:center;z-index:10;opacity:0;pointer-events:none;transition:opacity .12s ease}.color-picker-container:hover .btn-clear-badge{opacity:1;pointer-events:auto}.btn-clear-badge .material-symbols-outlined{font-size:10px;line-height:1}input[type=color]{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;z-index:5}\n"], dependencies: [{ kind: "component", type: TiptapButtonComponent, selector: "tiptap-button", inputs: ["icon", "title", "active", "disabled", "color", "backgroundColor", "variant", "size", "iconSize"], outputs: ["onClick"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapTextColorPickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapColorPickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: "tiptap-text-color-picker", standalone: true, imports: [TiptapButtonComponent], template: `
-    <div class="text-color-picker-container">
+            args: [{ selector: "tiptap-color-picker", standalone: true, imports: [TiptapButtonComponent], template: `
+    <div class="color-picker-container" [class.is-highlight]="mode() === 'highlight'">
       <tiptap-button
-        icon="format_color_text"
-        [title]="t().textColor"
-        [color]="hasColorApplied() ? currentColor() : 'var(--ate-text)'"
+        [icon]="buttonIcon()"
+        [title]="mode() === 'text' ? t().textColor : t().highlight"
+        [color]="buttonTextColor()"
+        [backgroundColor]="buttonBgColor()"
         (onClick)="triggerPicker()"
       >
         <input
@@ -1347,7 +1503,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
       </button>
       }
     </div>
-  `, styles: [".text-color-picker-container{position:relative;display:inline-flex;align-items:center}.text-color-picker-container tiptap-button{position:relative}.btn-clear-badge{position:absolute;top:-4px;right:-4px;width:14px;height:14px;padding:0;border:none;border-radius:999px;background:#0f172abf;color:#fff;display:flex;align-items:center;justify-content:center;z-index:10;opacity:0;pointer-events:none;transition:opacity .12s ease}.text-color-picker-container:hover .btn-clear-badge{opacity:1;pointer-events:auto}.btn-clear-badge .material-symbols-outlined{font-size:10px;line-height:1}input[type=color]{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;z-index:5}\n"] }]
+  `, styles: [".color-picker-container{position:relative;display:inline-flex;align-items:center}.color-picker-container tiptap-button{position:relative}.btn-clear-badge{position:absolute;top:-4px;right:-4px;width:14px;height:14px;padding:0;border:none;border-radius:999px;background:#0f172abf;color:#fff;display:flex;align-items:center;justify-content:center;z-index:10;opacity:0;pointer-events:none;transition:opacity .12s ease}.color-picker-container:hover .btn-clear-badge{opacity:1;pointer-events:auto}.btn-clear-badge .material-symbols-outlined{font-size:10px;line-height:1}input[type=color]{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;z-index:5}\n"] }]
         }], ctorParameters: () => [] });
 
 class TiptapBubbleMenuComponent {
@@ -1401,8 +1557,11 @@ class TiptapBubbleMenuComponent {
                 const ed = this.editor();
                 if (!ed)
                     return;
-                if (!this.isColorPickerInteracting && this.textColorPicker) {
-                    this.textColorPicker.done();
+                if (!this.isColorPickerInteracting) {
+                    if (this.textColorPicker)
+                        this.textColorPicker.done();
+                    if (this.highlightPicker)
+                        this.highlightPicker.done();
                 }
                 const { selection } = ed.state;
                 const { from, to } = selection;
@@ -1433,8 +1592,11 @@ class TiptapBubbleMenuComponent {
         this.handleBlur = () => {
             // Masquer le menu quand l'éditeur perd le focus
             setTimeout(() => {
-                if (!this.isColorPickerInteracting && this.textColorPicker) {
-                    this.textColorPicker.done();
+                if (!this.isColorPickerInteracting) {
+                    if (this.textColorPicker)
+                        this.textColorPicker.done();
+                    if (this.highlightPicker)
+                        this.highlightPicker.done();
                     this.hideTippy();
                 }
             }, 100);
@@ -1569,6 +1731,7 @@ class TiptapBubbleMenuComponent {
         });
         this.tippyInstance.show();
         this.textColorPicker?.syncColorInputValue();
+        this.highlightPicker?.syncColorInputValue();
     }
     hideTippy() {
         if (this.tippyInstance) {
@@ -1618,7 +1781,7 @@ class TiptapBubbleMenuComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapBubbleMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: TiptapBubbleMenuComponent, isStandalone: true, selector: "tiptap-bubble-menu", inputs: { editor: { classPropertyName: "editor", publicName: "editor", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "menuRef", first: true, predicate: ["menuRef"], descendants: true }, { propertyName: "textColorPicker", first: true, predicate: ["textColorPicker"], descendants: true }], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: TiptapBubbleMenuComponent, isStandalone: true, selector: "tiptap-bubble-menu", inputs: { editor: { classPropertyName: "editor", publicName: "editor", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "menuRef", first: true, predicate: ["menuRef"], descendants: true }, { propertyName: "textColorPicker", first: true, predicate: ["textColorPicker"], descendants: true }, { propertyName: "highlightPicker", first: true, predicate: ["highlightPicker"], descendants: true }], ngImport: i0, template: `
     <div #menuRef class="bubble-menu">
       @if (bubbleMenuConfig().bold) {
       <tiptap-button
@@ -1669,9 +1832,18 @@ class TiptapBubbleMenuComponent {
         [active]="isActive('highlight')"
         (click)="onCommand('highlight', $event)"
       ></tiptap-button>
+      } @if (bubbleMenuConfig().highlightPicker) {
+      <tiptap-color-picker
+        #highlightPicker
+        mode="highlight"
+        [editor]="editor()"
+        (interactionChange)="onColorPickerInteractionChange($event)"
+        (requestUpdate)="updateMenu()"
+      />
       } @if (bubbleMenuConfig().textColor) {
-      <tiptap-text-color-picker
+      <tiptap-color-picker
         #textColorPicker
+        mode="text"
         [editor]="editor()"
         (interactionChange)="onColorPickerInteractionChange($event)"
         (requestUpdate)="updateMenu()"
@@ -1695,14 +1867,17 @@ class TiptapBubbleMenuComponent {
       ></tiptap-button>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: TiptapButtonComponent, selector: "tiptap-button", inputs: ["icon", "title", "active", "disabled", "color", "variant", "size", "iconSize"], outputs: ["onClick"] }, { kind: "component", type: TiptapTextColorPickerComponent, selector: "tiptap-text-color-picker", inputs: ["editor"], outputs: ["interactionChange", "requestUpdate"] }] }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: TiptapButtonComponent, selector: "tiptap-button", inputs: ["icon", "title", "active", "disabled", "color", "backgroundColor", "variant", "size", "iconSize"], outputs: ["onClick"] }, { kind: "component", type: TiptapColorPickerComponent, selector: "tiptap-color-picker", inputs: ["editor", "mode"], outputs: ["interactionChange", "requestUpdate"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapBubbleMenuComponent, decorators: [{
             type: Component,
             args: [{
                     selector: "tiptap-bubble-menu",
                     standalone: true,
-                    imports: [TiptapButtonComponent, TiptapTextColorPickerComponent],
+                    imports: [
+                        TiptapButtonComponent,
+                        TiptapColorPickerComponent,
+                    ],
                     template: `
     <div #menuRef class="bubble-menu">
       @if (bubbleMenuConfig().bold) {
@@ -1754,9 +1929,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
         [active]="isActive('highlight')"
         (click)="onCommand('highlight', $event)"
       ></tiptap-button>
+      } @if (bubbleMenuConfig().highlightPicker) {
+      <tiptap-color-picker
+        #highlightPicker
+        mode="highlight"
+        [editor]="editor()"
+        (interactionChange)="onColorPickerInteractionChange($event)"
+        (requestUpdate)="updateMenu()"
+      />
       } @if (bubbleMenuConfig().textColor) {
-      <tiptap-text-color-picker
+      <tiptap-color-picker
         #textColorPicker
+        mode="text"
         [editor]="editor()"
         (interactionChange)="onColorPickerInteractionChange($event)"
         (requestUpdate)="updateMenu()"
@@ -1788,6 +1972,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
             }], textColorPicker: [{
                 type: ViewChild,
                 args: ["textColorPicker", { static: false }]
+            }], highlightPicker: [{
+                type: ViewChild,
+                args: ["highlightPicker", { static: false }]
             }] } });
 
 class TiptapSeparatorComponent {
@@ -2562,7 +2749,7 @@ class TiptapImageBubbleMenuComponent {
       ></tiptap-button>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: TiptapButtonComponent, selector: "tiptap-button", inputs: ["icon", "title", "active", "disabled", "color", "variant", "size", "iconSize"], outputs: ["onClick"] }, { kind: "component", type: TiptapSeparatorComponent, selector: "tiptap-separator", inputs: ["orientation", "size"] }] }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: TiptapButtonComponent, selector: "tiptap-button", inputs: ["icon", "title", "active", "disabled", "color", "backgroundColor", "variant", "size", "iconSize"], outputs: ["onClick"] }, { kind: "component", type: TiptapSeparatorComponent, selector: "tiptap-separator", inputs: ["orientation", "size"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapImageBubbleMenuComponent, decorators: [{
             type: Component,
@@ -3122,7 +3309,7 @@ class TiptapTableBubbleMenuComponent {
       ></tiptap-button>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: TiptapButtonComponent, selector: "tiptap-button", inputs: ["icon", "title", "active", "disabled", "color", "variant", "size", "iconSize"], outputs: ["onClick"] }, { kind: "component", type: TiptapSeparatorComponent, selector: "tiptap-separator", inputs: ["orientation", "size"] }] }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: TiptapButtonComponent, selector: "tiptap-button", inputs: ["icon", "title", "active", "disabled", "color", "backgroundColor", "variant", "size", "iconSize"], outputs: ["onClick"] }, { kind: "component", type: TiptapSeparatorComponent, selector: "tiptap-separator", inputs: ["orientation", "size"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapTableBubbleMenuComponent, decorators: [{
             type: Component,
@@ -3428,7 +3615,7 @@ class TiptapCellBubbleMenuComponent {
       ></tiptap-button>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: TiptapButtonComponent, selector: "tiptap-button", inputs: ["icon", "title", "active", "disabled", "color", "variant", "size", "iconSize"], outputs: ["onClick"] }] }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: TiptapButtonComponent, selector: "tiptap-button", inputs: ["icon", "title", "active", "disabled", "color", "backgroundColor", "variant", "size", "iconSize"], outputs: ["onClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapCellBubbleMenuComponent, decorators: [{
             type: Component,
@@ -3625,9 +3812,12 @@ class TiptapToolbarComponent {
         [disabled]="!canExecute('toggleHighlight')"
         (onClick)="toggleHighlight()"
       />
+      } @if (config().highlightPicker) {
+      <tiptap-color-picker mode="highlight" [editor]="editor()" />
       } @if (config().textColor) {
-      <tiptap-text-color-picker [editor]="editor()" />
-      } @if (config().separator && (config().heading1 || config().heading2 ||
+      <tiptap-color-picker mode="text" [editor]="editor()" />
+      }
+ @if (config().separator && (config().heading1 || config().heading2 ||
       config().heading3)) {
       <tiptap-separator />
       } @if (config().heading1) {
@@ -3761,14 +3951,14 @@ class TiptapToolbarComponent {
       />
       }
     </div>
-  `, isInline: true, styles: [".tiptap-toolbar{display:flex;align-items:center;gap:4px;padding:4px 8px;background:var(--ate-toolbar-background);border-bottom:1px solid var(--ate-toolbar-border-color);flex-wrap:wrap;min-height:32px;position:relative;-webkit-backdrop-filter:blur(var(--ate-menu-blur, 16px));backdrop-filter:blur(var(--ate-menu-blur, 16px))}.toolbar-group{display:flex;align-items:center;gap:2px;padding:0 4px}.toolbar-separator{width:1px;height:24px;background:var(--ate-toolbar-border-color);margin:0 4px}@media (max-width: 768px){.tiptap-toolbar{padding:6px 8px;gap:2px}.toolbar-group{gap:1px}}@keyframes toolbarSlideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.tiptap-toolbar{animation:toolbarSlideIn .3s cubic-bezier(.4,0,.2,1)}\n"], dependencies: [{ kind: "component", type: TiptapButtonComponent, selector: "tiptap-button", inputs: ["icon", "title", "active", "disabled", "color", "variant", "size", "iconSize"], outputs: ["onClick"] }, { kind: "component", type: TiptapSeparatorComponent, selector: "tiptap-separator", inputs: ["orientation", "size"] }, { kind: "component", type: TiptapTextColorPickerComponent, selector: "tiptap-text-color-picker", inputs: ["editor"], outputs: ["interactionChange", "requestUpdate"] }] }); }
+  `, isInline: true, styles: [".tiptap-toolbar{display:flex;align-items:center;gap:4px;padding:4px 8px;background:var(--ate-toolbar-background);border-bottom:1px solid var(--ate-toolbar-border-color);flex-wrap:wrap;min-height:32px;position:relative;-webkit-backdrop-filter:blur(var(--ate-menu-blur, 16px));backdrop-filter:blur(var(--ate-menu-blur, 16px))}.toolbar-group{display:flex;align-items:center;gap:2px;padding:0 4px}.toolbar-separator{width:1px;height:24px;background:var(--ate-toolbar-border-color);margin:0 4px}@media (max-width: 768px){.tiptap-toolbar{padding:6px 8px;gap:2px}.toolbar-group{gap:1px}}@keyframes toolbarSlideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.tiptap-toolbar{animation:toolbarSlideIn .3s cubic-bezier(.4,0,.2,1)}\n"], dependencies: [{ kind: "component", type: TiptapButtonComponent, selector: "tiptap-button", inputs: ["icon", "title", "active", "disabled", "color", "backgroundColor", "variant", "size", "iconSize"], outputs: ["onClick"] }, { kind: "component", type: TiptapSeparatorComponent, selector: "tiptap-separator", inputs: ["orientation", "size"] }, { kind: "component", type: TiptapColorPickerComponent, selector: "tiptap-color-picker", inputs: ["editor", "mode"], outputs: ["interactionChange", "requestUpdate"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapToolbarComponent, decorators: [{
             type: Component,
             args: [{ selector: "tiptap-toolbar", standalone: true, imports: [
                         TiptapButtonComponent,
                         TiptapSeparatorComponent,
-                        TiptapTextColorPickerComponent,
+                        TiptapColorPickerComponent,
                     ], template: `
     <div class="tiptap-toolbar">
       @if (config().bold) {
@@ -3835,9 +4025,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
         [disabled]="!canExecute('toggleHighlight')"
         (onClick)="toggleHighlight()"
       />
+      } @if (config().highlightPicker) {
+      <tiptap-color-picker mode="highlight" [editor]="editor()" />
       } @if (config().textColor) {
-      <tiptap-text-color-picker [editor]="editor()" />
-      } @if (config().separator && (config().heading1 || config().heading2 ||
+      <tiptap-color-picker mode="text" [editor]="editor()" />
+      }
+ @if (config().separator && (config().heading1 || config().heading2 ||
       config().heading3)) {
       <tiptap-separator />
       } @if (config().heading1) {
@@ -4495,7 +4688,8 @@ const DEFAULT_TOOLBAR_CONFIG = {
     code: true,
     superscript: false,
     subscript: false,
-    highlight: true,
+    highlight: false,
+    highlightPicker: true,
     heading1: true,
     heading2: true,
     heading3: true,
@@ -4525,7 +4719,8 @@ const DEFAULT_BUBBLE_MENU_CONFIG = {
     code: true,
     superscript: false,
     subscript: false,
-    highlight: true,
+    highlight: false,
+    highlightPicker: true,
     textColor: true,
     link: true,
     separator: true,