@flogeez/angular-tiptap-editor 0.5.4 → 0.6.0

package/index.d.ts

@@ -1,6 +1,7 @@
-import { Editor, Node, Extension, Mark, EditorOptions } from '@tiptap/core';
+import * as _flogeez_angular_tiptap_editor from '@flogeez/angular-tiptap-editor';
 import * as _angular_core from '@angular/core';
 import { AfterViewInit, OnDestroy, ElementRef } from '@angular/core';
+import { Editor, Node, Mark, Extension, EditorOptions } from '@tiptap/core';
 import { Observable } from 'rxjs';
 import { ControlValueAccessor } from '@angular/forms';
 
@@ -390,11 +391,6 @@ declare class TiptapI18nService {
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<TiptapI18nService>;
 }
 
-interface CellBubbleMenuConfig$1 {
-    mergeCells?: boolean;
-    splitCell?: boolean;
-}
-
 interface SlashCommandItem {
     title: string;
     description: string;
@@ -486,107 +482,222 @@ interface ImageUploadHandlerResult {
  */
 type ImageUploadHandler = (context: ImageUploadContext) => Promise<ImageUploadHandlerResult> | Observable<ImageUploadHandlerResult>;
 declare class ImageService {
+    /** Signals for image state */
     selectedImage: _angular_core.WritableSignal<ImageData | null>;
     isImageSelected: _angular_core.Signal<boolean>;
+    /** Resizing state */
     isResizing: _angular_core.WritableSignal<boolean>;
     private i18n;
     private readonly t;
+    /** Upload state signals */
     isUploading: _angular_core.WritableSignal<boolean>;
     uploadProgress: _angular_core.WritableSignal<number>;
     uploadMessage: _angular_core.WritableSignal<string>;
     /**
-     * Custom upload handler for images.
-     * When set, this handler will be called instead of the default base64 conversion.
-     * This allows users to implement their own image storage logic.
-     *
-     * @example
-     * ```typescript
-     * imageService.uploadHandler = async (context) => {
-     *   const formData = new FormData();
-     *   formData.append('image', context.file);
-     *   const response = await fetch('/api/upload', { method: 'POST', body: formData });
-     *   const data = await response.json();
-     *   return { src: data.url };
-     * };
-     * ```
+     * Custom upload handler.
+     * If set, this handler replaces the default base64 conversion.
      */
     uploadHandler: ImageUploadHandler | null;
     private currentEditor;
+    /** Select and track an image from the editor */
     selectImage(editor: Editor): void;
     clearSelection(): void;
+    /** Insert a new image and ensure it's selected */
     insertImage(editor: Editor, imageData: ImageData): void;
+    /** Update attributes of the currently active image */
     updateImageAttributes(editor: Editor, attributes: Partial<ImageData>): void;
+    /** Resize image with optional aspect ratio maintenance */
     resizeImage(editor: Editor, options: ResizeOptions): void;
-    resizeImageByPercentage(editor: Editor, percentage: number): void;
+    /** Predetermined resize helpers used by UI */
     resizeImageToSmall(editor: Editor): void;
     resizeImageToMedium(editor: Editor): void;
     resizeImageToLarge(editor: Editor): void;
     resizeImageToOriginal(editor: Editor): void;
-    resizeImageFreely(editor: Editor, width: number, height: number): void;
+    /** Get current image dimensions */
     getImageDimensions(editor: Editor): {
         width: number;
         height: number;
     } | null;
-    getNaturalImageDimensions(src: string): Promise<{
-        width: number;
-        height: number;
-    }>;
+    /** Remove the selected image */
     deleteImage(editor: Editor): void;
     private updateSelectedImage;
+    /** Validate file type and size */
     validateImage(file: File, maxSize?: number): {
         valid: boolean;
         error?: string;
     };
+    /** Compress and process image on client side */
     compressImage(file: File, quality?: number, maxWidth?: number, maxHeight?: number): Promise<ImageUploadResult>;
+    /** Core upload logic with progress tracking */
     private uploadImageWithProgress;
-    uploadAndInsertImage(editor: Editor, file: File, options?: {
-        quality?: number;
-        maxWidth?: number;
-        maxHeight?: number;
-    }): Promise<void>;
+    private resetUploadState;
+    /** Main entry point for file upload and insertion */
+    uploadAndInsertImage(editor: Editor, file: File, options?: Record<string, any>): Promise<void>;
+    /** Trigger an editor transaction to force decoration update */
     private forceEditorUpdate;
+    /** Generic helper to open file picker and process selection */
     private selectFileAndProcess;
-    selectAndUploadImage(editor: Editor, options?: {
-        quality?: number;
-        maxWidth?: number;
-        maxHeight?: number;
-        accept?: string;
-    }): Promise<void>;
-    selectAndReplaceImage(editor: Editor, options?: {
-        quality?: number;
-        maxWidth?: number;
-        maxHeight?: number;
-        accept?: string;
-    }): Promise<void>;
-    uploadAndReplaceImage(editor: Editor, file: File, options?: {
-        quality?: number;
-        maxWidth?: number;
-        maxHeight?: number;
-    }): Promise<void>;
+    /** Select file and upload as new image */
+    selectAndUploadImage(editor: Editor, options?: Record<string, any>): Promise<void>;
+    /** Select file and replace currently selected image */
+    selectAndReplaceImage(editor: Editor, options?: Record<string, any>): Promise<void>;
+    /** Internal helper used by replacement logic */
+    uploadAndReplaceImage(editor: Editor, file: File, options?: Record<string, any>): Promise<void>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ImageService, never>;
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<ImageService>;
 }
 
+type StateCalculator = (editor: Editor) => Partial<{
+    [K in keyof EditorStateSnapshot]: EditorStateSnapshot[K] extends object ? Partial<EditorStateSnapshot[K]> : EditorStateSnapshot[K];
+}>;
+interface EditorStateSnapshot {
+    /** Global editor states */
+    isFocused: boolean;
+    isEditable: boolean;
+    /**
+     * Detailed selection information to avoid overlap between menus
+     */
+    selection: {
+        type: 'text' | 'node' | 'cell' | 'none';
+        from: number;
+        to: number;
+        empty: boolean;
+        /** Specific for CellSelection */
+        isSingleCell: boolean;
+    };
+    /** Text formatting states (Marks) */
+    marks: {
+        bold: boolean;
+        italic: boolean;
+        underline: boolean;
+        strike: boolean;
+        code: boolean;
+        superscript: boolean;
+        subscript: boolean;
+        highlight: boolean;
+        link: boolean;
+        linkHref: string | null;
+        color: string | null;
+        computedColor: string | null;
+        background: string | null;
+        computedBackground: string | null;
+    };
+    /** Capability states (canExecute) */
+    can: {
+        toggleBold: boolean;
+        toggleItalic: boolean;
+        toggleUnderline: boolean;
+        toggleStrike: boolean;
+        toggleCode: boolean;
+        toggleHighlight: boolean;
+        toggleLink: boolean;
+        toggleSuperscript: boolean;
+        toggleSubscript: boolean;
+        setColor: boolean;
+        setHighlight: boolean;
+        undo: boolean;
+        redo: boolean;
+        /** Table specific capabilities */
+        addRowBefore: boolean;
+        addRowAfter: boolean;
+        deleteRow: boolean;
+        addColumnBefore: boolean;
+        addColumnAfter: boolean;
+        deleteColumn: boolean;
+        deleteTable: boolean;
+        mergeCells: boolean;
+        splitCell: boolean;
+        toggleHeaderRow: boolean;
+        toggleHeaderColumn: boolean;
+        /** Structure/Node capabilities */
+        toggleHeading1: boolean;
+        toggleHeading2: boolean;
+        toggleHeading3: boolean;
+        toggleBulletList: boolean;
+        toggleOrderedList: boolean;
+        toggleBlockquote: boolean;
+        setTextAlignLeft: boolean;
+        setTextAlignCenter: boolean;
+        setTextAlignRight: boolean;
+        setTextAlignJustify: boolean;
+        insertHorizontalRule: boolean;
+        insertTable: boolean;
+        insertImage: boolean;
+    };
+    /** Current node context */
+    nodes: {
+        isTable: boolean;
+        isTableNodeSelected: boolean;
+        isTableCell: boolean;
+        isImage: boolean;
+        isBlockquote: boolean;
+        isCodeBlock: boolean;
+        isBulletList: boolean;
+        isOrderedList: boolean;
+        /** Headings */
+        h1: boolean;
+        h2: boolean;
+        h3: boolean;
+        /** Alignment */
+        alignLeft: boolean;
+        alignCenter: boolean;
+        alignRight: boolean;
+        alignJustify: boolean;
+        /** Table specific */
+        isTableHeaderRow: boolean;
+        isTableHeaderColumn: boolean;
+        /** Name of the active node at selection head */
+        activeNodeName: string | null;
+    };
+    /** Placeholder for custom extension states */
+    custom: Record<string, any>;
+}
+declare const INITIAL_EDITOR_STATE: EditorStateSnapshot;
+
 declare class EditorCommandsService {
-    isActive(editor: Editor, name: string, attributes?: Record<string, any>): boolean;
-    canExecute(editor: Editor, command: string): boolean;
+    private imageService;
+    private colorPickerSvc;
+    private linkSvc;
+    private readonly _editorState;
+    /** Exposed editor state as a readonly signal */
+    readonly editorState: _angular_core.Signal<EditorStateSnapshot>;
+    /** Signal to track when the toolbar is being hovered/interacted with */
+    private readonly _isToolbarInteracting;
+    readonly isToolbarInteracting: _angular_core.Signal<boolean>;
+    /** Set toolbar interaction state (called by editor component) */
+    setToolbarInteracting(value: boolean): void;
+    readonly isUploading: _angular_core.Signal<boolean>;
+    readonly uploadProgress: _angular_core.Signal<number>;
+    readonly uploadMessage: _angular_core.Signal<string>;
+    set uploadHandler(handler: ImageUploadHandler | null);
+    /** Update state (called by TiptapStateExtension) */
+    updateState(state: EditorStateSnapshot): void;
+    /** Signal to toggle link edit mode from UI (Toolbar) - Immediate response */
+    readonly linkEditMode: _angular_core.Signal<boolean>;
+    /** Reference to the element that triggered the link menu (for anchoring) */
+    readonly linkMenuTrigger: _angular_core.Signal<HTMLElement | null>;
+    /** Signal to toggle color picker mode from UI (text or highlight) */
+    readonly colorEditMode: _angular_core.Signal<_flogeez_angular_tiptap_editor.ColorEditMode | null>;
+    /** Reference to the element that triggered the color menu (for anchoring) */
+    readonly colorMenuTrigger: _angular_core.Signal<HTMLElement | null>;
+    /** Generic method to execute any command by name */
+    execute(editor: Editor, command: string, ...args: any[]): void;
     toggleBold(editor: Editor): void;
     toggleItalic(editor: Editor): void;
     toggleStrike(editor: Editor): void;
     toggleCode(editor: Editor): void;
+    toggleUnderline(editor: Editor): void;
+    toggleSuperscript(editor: Editor): void;
+    toggleSubscript(editor: Editor): void;
     toggleHeading(editor: Editor, level: 1 | 2 | 3): void;
+    toggleHighlight(editor: Editor, color?: string): void;
     toggleBulletList(editor: Editor): void;
     toggleOrderedList(editor: Editor): void;
     toggleBlockquote(editor: Editor): void;
-    undo(editor: Editor): void;
-    redo(editor: Editor): void;
-    toggleUnderline(editor: Editor): void;
-    toggleSuperscript(editor: Editor): void;
-    toggleSubscript(editor: Editor): void;
     setTextAlign(editor: Editor, alignment: "left" | "center" | "right" | "justify"): void;
-    toggleLink(editor: Editor, url?: string): void;
     insertHorizontalRule(editor: Editor): void;
-    toggleHighlight(editor: Editor, color?: string): void;
+    undo(editor: Editor): void;
+    redo(editor: Editor): void;
     insertTable(editor: Editor, rows?: number, cols?: number): void;
     addColumnBefore(editor: Editor): void;
     addColumnAfter(editor: Editor): void;
@@ -599,13 +710,23 @@ declare class EditorCommandsService {
     splitCell(editor: Editor): void;
     toggleHeaderColumn(editor: Editor): void;
     toggleHeaderRow(editor: Editor): void;
-    toggleHeaderCell(editor: Editor): void;
     clearContent(editor: Editor): void;
     focus(editor: Editor): void;
     blur(editor: Editor): void;
     setContent(editor: Editor, content: string, emitUpdate?: boolean): void;
     setEditable(editor: Editor, editable: boolean): void;
     insertContent(editor: Editor, content: string): void;
+    insertImage(editor: Editor, options?: {
+        quality?: number;
+        maxWidth?: number;
+        maxHeight?: number;
+        accept?: string;
+    }): Promise<void>;
+    uploadImage(editor: Editor, file: File, options?: {
+        quality?: number;
+        maxWidth?: number;
+        maxHeight?: number;
+    }): Promise<void>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<EditorCommandsService, never>;
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<EditorCommandsService>;
 }
@@ -633,7 +754,7 @@ declare const DEFAULT_SLASH_COMMANDS_CONFIG: Record<SlashCommandKey, boolean>;
  * Factory pour créer les commandes natives avec leurs traductions et leur logique d'exécution.
  * Utilise les services de l'éditeur pour garantir une cohérence de comportement.
  */
-declare function createDefaultSlashCommands(i18n: TiptapI18nService, commands: EditorCommandsService, images: ImageService, imageOptions?: {
+declare function createDefaultSlashCommands(i18n: TiptapI18nService, commands: EditorCommandsService, imageOptions?: {
     quality?: number;
     maxWidth?: number;
     maxHeight?: number;
@@ -642,7 +763,7 @@ declare function createDefaultSlashCommands(i18n: TiptapI18nService, commands: E
 /**
  * Filtre et assemble les commandes selon la configuration fournie.
  */
-declare function filterSlashCommands(config: SlashCommandsConfig, i18n: TiptapI18nService, commands: EditorCommandsService, images: ImageService, imageOptions?: {
+declare function filterSlashCommands(config: SlashCommandsConfig, i18n: TiptapI18nService, commands: EditorCommandsService, imageOptions?: {
     quality?: number;
     maxWidth?: number;
     maxHeight?: number;
@@ -728,11 +849,6 @@ declare class NoopValueAccessorDirective implements ControlValueAccessor {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NoopValueAccessorDirective, never, never, {}, {}, never, never, true, never>;
 }
 
-declare const DEFAULT_TOOLBAR_CONFIG: ToolbarConfig;
-declare const DEFAULT_BUBBLE_MENU_CONFIG: BubbleMenuConfig;
-declare const DEFAULT_IMAGE_BUBBLE_MENU_CONFIG: ImageBubbleMenuConfig;
-declare const DEFAULT_TABLE_MENU_CONFIG: TableBubbleMenuConfig;
-declare const DEFAULT_CELL_MENU_CONFIG: CellBubbleMenuConfig$1;
 declare class AngularTiptapEditorComponent implements AfterViewInit, OnDestroy {
     content: _angular_core.InputSignal<string>;
     placeholder: _angular_core.InputSignal<string>;
@@ -750,14 +866,18 @@ declare class AngularTiptapEditorComponent implements AfterViewInit, OnDestroy {
     slashCommands: _angular_core.InputSignal<SlashCommandsConfig>;
     customSlashCommands: _angular_core.InputSignal<CustomSlashCommands | undefined>;
     locale: _angular_core.InputSignal<SupportedLocale | undefined>;
-    autofocus: _angular_core.InputSignal<number | boolean | "end" | "start" | "all">;
-    tiptapExtensions: _angular_core.InputSignal<(Node<any, any> | Extension<any, any> | Mark<any, any>)[]>;
+    autofocus: _angular_core.InputSignal<number | boolean | "start" | "end" | "all">;
+    tiptapExtensions: _angular_core.InputSignal<(Node<any, any> | Mark<any, any> | Extension<any, any>)[]>;
     tiptapOptions: _angular_core.InputSignal<Partial<EditorOptions>>;
     showBubbleMenu: _angular_core.InputSignal<boolean>;
     bubbleMenu: _angular_core.InputSignal<Partial<BubbleMenuConfig>>;
     showImageBubbleMenu: _angular_core.InputSignal<boolean>;
     imageBubbleMenu: _angular_core.InputSignal<Partial<ImageBubbleMenuConfig>>;
     toolbar: _angular_core.InputSignal<Partial<ToolbarConfig>>;
+    /**
+     * Additionnal state calculators to extend the reactive editor state.
+     */
+    stateCalculators: _angular_core.InputSignal<StateCalculator[]>;
     imageUpload: _angular_core.InputSignal<Partial<any>>;
     /**
      * Custom handler for image uploads.
@@ -794,10 +914,6 @@ declare class AngularTiptapEditorComponent implements AfterViewInit, OnDestroy {
         event: FocusEvent;
     }>;
     editorElement: _angular_core.Signal<ElementRef<any>>;
-    private textMenuComp;
-    private imageMenuComp;
-    private tableMenuComp;
-    private cellMenuComp;
     hideBubbleMenus(): void;
     showBubbleMenus(): void;
     private _editor;
@@ -805,6 +921,7 @@ declare class AngularTiptapEditorComponent implements AfterViewInit, OnDestroy {
     private _wordCount;
     private _isDragOver;
     private _editorFullyInitialized;
+    private lastEmittedHtml;
     readonly editor: _angular_core.Signal<Editor | null>;
     readonly characterCount: _angular_core.Signal<number>;
     readonly wordCount: _angular_core.Signal<number>;
@@ -844,14 +961,13 @@ declare class AngularTiptapEditorComponent implements AfterViewInit, OnDestroy {
     private _destroyRef;
     private ngControl;
     readonly i18nService: TiptapI18nService;
-    readonly imageService: ImageService;
     readonly editorCommandsService: EditorCommandsService;
+    readonly editorState: _angular_core.Signal<_flogeez_angular_tiptap_editor.EditorStateSnapshot>;
     constructor();
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     private initEditor;
     private updateCharacterCount;
-    onSlashCommandImageUpload(file: File): Promise<void>;
     onDragOver(event: DragEvent): void;
     onDrop(event: DragEvent): void;
     private insertImageFromFile;
@@ -867,14 +983,136 @@ declare class AngularTiptapEditorComponent implements AfterViewInit, OnDestroy {
     setDisabledState(isDisabled: boolean): void;
     onEditorClick(event: MouseEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AngularTiptapEditorComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AngularTiptapEditorComponent, "angular-tiptap-editor", never, { "content": { "alias": "content"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "editable": { "alias": "editable"; "required": false; "isSignal": true; }; "minHeight": { "alias": "minHeight"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "fillContainer": { "alias": "fillContainer"; "required": false; "isSignal": true; }; "showToolbar": { "alias": "showToolbar"; "required": false; "isSignal": true; }; "showCharacterCount": { "alias": "showCharacterCount"; "required": false; "isSignal": true; }; "showWordCount": { "alias": "showWordCount"; "required": false; "isSignal": true; }; "maxCharacters": { "alias": "maxCharacters"; "required": false; "isSignal": true; }; "enableOfficePaste": { "alias": "enableOfficePaste"; "required": false; "isSignal": true; }; "enableSlashCommands": { "alias": "enableSlashCommands"; "required": false; "isSignal": true; }; "slashCommands": { "alias": "slashCommands"; "required": false; "isSignal": true; }; "customSlashCommands": { "alias": "customSlashCommands"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "autofocus": { "alias": "autofocus"; "required": false; "isSignal": true; }; "tiptapExtensions": { "alias": "tiptapExtensions"; "required": false; "isSignal": true; }; "tiptapOptions": { "alias": "tiptapOptions"; "required": false; "isSignal": true; }; "showBubbleMenu": { "alias": "showBubbleMenu"; "required": false; "isSignal": true; }; "bubbleMenu": { "alias": "bubbleMenu"; "required": false; "isSignal": true; }; "showImageBubbleMenu": { "alias": "showImageBubbleMenu"; "required": false; "isSignal": true; }; "imageBubbleMenu": { "alias": "imageBubbleMenu"; "required": false; "isSignal": true; }; "toolbar": { "alias": "toolbar"; "required": false; "isSignal": true; }; "imageUpload": { "alias": "imageUpload"; "required": false; "isSignal": true; }; "imageUploadHandler": { "alias": "imageUploadHandler"; "required": false; "isSignal": true; }; }, { "contentChange": "contentChange"; "editorCreated": "editorCreated"; "editorUpdate": "editorUpdate"; "editorFocus": "editorFocus"; "editorBlur": "editorBlur"; }, never, never, true, [{ directive: typeof NoopValueAccessorDirective; inputs: {}; outputs: {}; }]>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AngularTiptapEditorComponent, "angular-tiptap-editor", never, { "content": { "alias": "content"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "editable": { "alias": "editable"; "required": false; "isSignal": true; }; "minHeight": { "alias": "minHeight"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "fillContainer": { "alias": "fillContainer"; "required": false; "isSignal": true; }; "showToolbar": { "alias": "showToolbar"; "required": false; "isSignal": true; }; "showCharacterCount": { "alias": "showCharacterCount"; "required": false; "isSignal": true; }; "showWordCount": { "alias": "showWordCount"; "required": false; "isSignal": true; }; "maxCharacters": { "alias": "maxCharacters"; "required": false; "isSignal": true; }; "enableOfficePaste": { "alias": "enableOfficePaste"; "required": false; "isSignal": true; }; "enableSlashCommands": { "alias": "enableSlashCommands"; "required": false; "isSignal": true; }; "slashCommands": { "alias": "slashCommands"; "required": false; "isSignal": true; }; "customSlashCommands": { "alias": "customSlashCommands"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "autofocus": { "alias": "autofocus"; "required": false; "isSignal": true; }; "tiptapExtensions": { "alias": "tiptapExtensions"; "required": false; "isSignal": true; }; "tiptapOptions": { "alias": "tiptapOptions"; "required": false; "isSignal": true; }; "showBubbleMenu": { "alias": "showBubbleMenu"; "required": false; "isSignal": true; }; "bubbleMenu": { "alias": "bubbleMenu"; "required": false; "isSignal": true; }; "showImageBubbleMenu": { "alias": "showImageBubbleMenu"; "required": false; "isSignal": true; }; "imageBubbleMenu": { "alias": "imageBubbleMenu"; "required": false; "isSignal": true; }; "toolbar": { "alias": "toolbar"; "required": false; "isSignal": true; }; "stateCalculators": { "alias": "stateCalculators"; "required": false; "isSignal": true; }; "imageUpload": { "alias": "imageUpload"; "required": false; "isSignal": true; }; "imageUploadHandler": { "alias": "imageUploadHandler"; "required": false; "isSignal": true; }; }, { "contentChange": "contentChange"; "editorCreated": "editorCreated"; "editorUpdate": "editorUpdate"; "editorFocus": "editorFocus"; "editorBlur": "editorBlur"; }, never, never, true, [{ directive: typeof NoopValueAccessorDirective; inputs: {}; outputs: {}; }]>;
 }
 
-type HeightConfig = {
-    minHeight?: number;
-    height?: number;
-    maxHeight?: number;
-};
+interface ColorPickerSelection {
+    from: number;
+    to: number;
+}
+type ColorEditMode = 'text' | 'highlight';
+declare class ColorPickerService {
+    private storedSelection;
+    /** Current edit mode: null when closed, 'text' or 'highlight' when open */
+    readonly editMode: _angular_core.WritableSignal<ColorEditMode | null>;
+    /** Reference to the element that triggered the menu (for anchoring) */
+    readonly menuTrigger: _angular_core.WritableSignal<HTMLElement | null>;
+    /** Whether the user is currently interacting with the picker UI (e.g. typing) */
+    readonly isInteracting: _angular_core.WritableSignal<boolean>;
+    /**
+     * Open the color picker menu in the specified mode.
+     */
+    open(mode: ColorEditMode, trigger?: HTMLElement): void;
+    /**
+     * Close the color picker menu.
+     */
+    close(): void;
+    /**
+     * Set interaction state (prevents premature closing when blurring editor)
+     */
+    setInteracting(value: boolean): void;
+    /**
+     * Toggle color picker from UI (extracts trigger from event).
+     */
+    toggle(editor: Editor, mode: ColorEditMode, event?: Event): void;
+    /**
+     * Capture current editor selection.
+     */
+    captureSelection(editor: Editor): void;
+    /**
+     * Get last captured selection.
+     */
+    getStoredSelection(): ColorPickerSelection | null;
+    /**
+     * Clear captured selection.
+     */
+    done(): void;
+    /**
+     * Apply text color to selection.
+     */
+    applyColor(editor: Editor, color: string, addToHistory?: boolean, focus?: boolean): void;
+    /**
+     * Remove text color from selection.
+     */
+    unsetColor(editor: Editor, focus?: boolean): void;
+    /**
+     * Apply highlight color to selection.
+     */
+    applyHighlight(editor: Editor, color: string, addToHistory?: boolean, focus?: boolean): void;
+    /**
+     * Remove highlight from selection.
+     */
+    unsetHighlight(editor: Editor, focus?: boolean): void;
+    normalizeColor(color: string | null | undefined): string;
+    getLuminance(color: string): number;
+    getContrastColor(color: string): "black" | "white";
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ColorPickerService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<ColorPickerService>;
+}
+
+declare class LinkService {
+    /** Whether link edit mode is active */
+    readonly editMode: _angular_core.WritableSignal<boolean>;
+    /** Reference to the element that triggered the menu (for anchoring) */
+    readonly menuTrigger: _angular_core.WritableSignal<HTMLElement | null>;
+    /** Whether the user is currently interacting with the link UI (input focus) */
+    readonly isInteracting: _angular_core.WritableSignal<boolean>;
+    /**
+     * Open the link edit menu.
+     */
+    open(trigger?: HTMLElement): void;
+    /**
+     * Close the link edit menu.
+     */
+    close(): void;
+    /**
+     * Final cleanup (called after UI is hidden)
+     */
+    done(): void;
+    /**
+     * Set interaction state
+     */
+    setInteracting(value: boolean): void;
+    /**
+     * Toggle link mode from UI.
+     * If a URL string is provided, applies the link and closes.
+     * If an Event is provided, extracts the trigger for anchoring.
+     */
+    toggle(editor: Editor, urlOrEvent?: string | Event): void;
+    /**
+     * Apply a link to the current selection.
+     */
+    setLink(editor: Editor, url: string): void;
+    /**
+     * Remove link from the current selection.
+     */
+    unsetLink(editor: Editor): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LinkService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<LinkService>;
+}
+
+/**
+ * DiscoveryCalculator automatically detects and tracks the state of any TipTap extension.
+ * It provides a "fallback" reactive state for any mark or node not explicitly handled
+ * by specialized calculators.
+ */
+declare const DiscoveryCalculator: StateCalculator;
+
+declare const ImageCalculator: StateCalculator;
+
+declare const MarksCalculator: StateCalculator;
+
+declare const SelectionCalculator: StateCalculator;
+
+declare const StructureCalculator: StateCalculator;
+
+declare const TableCalculator: StateCalculator;
+
+declare const DEFAULT_TOOLBAR_CONFIG: ToolbarConfig;
+declare const DEFAULT_BUBBLE_MENU_CONFIG: BubbleMenuConfig;
+declare const DEFAULT_IMAGE_BUBBLE_MENU_CONFIG: ImageBubbleMenuConfig;
+declare const DEFAULT_TABLE_MENU_CONFIG: TableBubbleMenuConfig;
+declare const DEFAULT_CELL_MENU_CONFIG: CellBubbleMenuConfig;
 
-export { AngularTiptapEditorComponent, DEFAULT_BUBBLE_MENU_CONFIG, DEFAULT_CELL_MENU_CONFIG, DEFAULT_IMAGE_BUBBLE_MENU_CONFIG, DEFAULT_SLASH_COMMANDS_CONFIG, DEFAULT_TABLE_MENU_CONFIG, DEFAULT_TOOLBAR_CONFIG, EditorCommandsService, ImageService, NoopValueAccessorDirective, SLASH_COMMAND_KEYS, TiptapI18nService, createDefaultSlashCommands, filterSlashCommands };
-export type { BubbleMenuConfig, CellBubbleMenuConfig, CustomSlashCommands, HeightConfig, ImageBubbleMenuConfig, ImageData, ImageUploadContext, ImageUploadHandler, ImageUploadHandlerResult, ImageUploadResult, ResizeOptions, SlashCommandItem, SlashCommandKey, SlashCommandsConfig, SupportedLocale, TableBubbleMenuConfig, TiptapTranslations, ToolbarConfig };
+export { AngularTiptapEditorComponent, ColorPickerService, DEFAULT_BUBBLE_MENU_CONFIG, DEFAULT_CELL_MENU_CONFIG, DEFAULT_IMAGE_BUBBLE_MENU_CONFIG, DEFAULT_SLASH_COMMANDS_CONFIG, DEFAULT_TABLE_MENU_CONFIG, DEFAULT_TOOLBAR_CONFIG, DiscoveryCalculator, EditorCommandsService, INITIAL_EDITOR_STATE, ImageCalculator, ImageService, LinkService, MarksCalculator, NoopValueAccessorDirective, SLASH_COMMAND_KEYS, SelectionCalculator, StructureCalculator, TableCalculator, TiptapI18nService, createDefaultSlashCommands, filterSlashCommands };
+export type { BubbleMenuConfig, CellBubbleMenuConfig, ColorEditMode, ColorPickerSelection, CustomSlashCommands, EditorStateSnapshot, ImageBubbleMenuConfig, ImageData, ImageUploadContext, ImageUploadHandler, ImageUploadHandlerResult, ImageUploadResult, ResizeOptions, SlashCommandItem, SlashCommandKey, SlashCommandsConfig, StateCalculator, SupportedLocale, TableBubbleMenuConfig, TiptapTranslations, ToolbarConfig };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flogeez/angular-tiptap-editor",
-  "version": "0.5.4",
+  "version": "0.6.0",
   "description": "A modern, customizable rich-text editor for Angular (18+), built with Tiptap and featuring complete internationalization support",
   "keywords": [
     "angular",

package/src/lib/styles/bubble-menu.global.css

@@ -26,6 +26,13 @@
   white-space: nowrap;
 }
 
+/* Cache le menu intelligemment si la source (le slash) est scrollée hors vue */
+.tippy-box[data-reference-hidden] {
+  opacity: 0 !important;
+  transition: opacity 0.18s cubic-bezier(0, 0, 0.2, 1);
+  pointer-events: none !important;
+}
+
 .bubble-menu .tiptap-separator {
   width: 1px;
   height: 28px;