@flogeez/angular-tiptap-editor 2.4.0 → 2.4.1

package/lib/services/ate-color-picker.service.d.ts

@@ -0,0 +1,65 @@
+import type { Editor } from "@tiptap/core";
+import * as i0 from "@angular/core";
+export interface AteColorPickerSelection {
+    from: number;
+    to: number;
+}
+export type AteColorEditMode = "text" | "highlight";
+export declare class AteColorPickerService {
+    private storedSelection;
+    /** Current edit mode: null when closed, 'text' or 'highlight' when open */
+    readonly editMode: import("@angular/core").WritableSignal<AteColorEditMode | null>;
+    /** Reference to the element that triggered the menu (for anchoring) */
+    readonly menuTrigger: import("@angular/core").WritableSignal<HTMLElement | null>;
+    /** Whether the user is currently interacting with the picker UI (e.g. typing) */
+    readonly isInteracting: import("@angular/core").WritableSignal<boolean>;
+    /**
+     * Open the color picker menu in the specified mode.
+     */
+    open(mode: AteColorEditMode, 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: AteColorEditMode, event?: Event): void;
+    /**
+     * Capture current editor selection.
+     */
+    captureSelection(editor: Editor): void;
+    /**
+     * Get last captured selection.
+     */
+    getStoredSelection(): AteColorPickerSelection | 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: i0.ɵɵFactoryDeclaration<AteColorPickerService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<AteColorPickerService>;
+}

package/lib/services/ate-editor-commands.service.d.ts

@@ -0,0 +1,72 @@
+import { Editor } from "@tiptap/core";
+import { AteEditorStateSnapshot } from "../models/ate-editor-state.model";
+import { AteImageUploadHandler, AteImageUploadOptions } from "../models/ate-image.model";
+import * as i0 from "@angular/core";
+export declare class AteEditorCommandsService {
+    private imageService;
+    private colorPickerSvc;
+    private linkSvc;
+    private readonly _editorState;
+    /** Exposed editor state as a readonly signal */
+    readonly editorState: import("@angular/core").Signal<AteEditorStateSnapshot>;
+    /** Signal to track when the toolbar is being hovered/interacted with */
+    private readonly _isToolbarInteracting;
+    readonly isToolbarInteracting: import("@angular/core").Signal<boolean>;
+    /** Set toolbar interaction state (called by editor component) */
+    setToolbarInteracting(value: boolean): void;
+    readonly isUploading: import("@angular/core").Signal<boolean>;
+    readonly uploadProgress: import("@angular/core").Signal<number>;
+    readonly uploadMessage: import("@angular/core").Signal<string>;
+    set uploadHandler(handler: AteImageUploadHandler | null);
+    /** Update state (called by TiptapStateExtension) */
+    updateState(state: AteEditorStateSnapshot): void;
+    /** Signal to toggle link edit mode from UI (Toolbar) - Immediate response */
+    readonly linkEditMode: import("@angular/core").Signal<boolean>;
+    /** Reference to the element that triggered the link menu (for anchoring) */
+    readonly linkMenuTrigger: import("@angular/core").Signal<HTMLElement | null>;
+    /** Signal to toggle color picker mode from UI (text or highlight) */
+    readonly colorEditMode: import("@angular/core").Signal<import("./ate-color-picker.service").AteColorEditMode | null>;
+    /** Reference to the element that triggered the color menu (for anchoring) */
+    readonly colorMenuTrigger: import("@angular/core").Signal<HTMLElement | null>;
+    /** Generic method to execute any command by name */
+    execute(editor: Editor, command: string, ...args: unknown[]): void;
+    toggleBold(editor: Editor): void;
+    toggleItalic(editor: Editor): void;
+    toggleStrike(editor: Editor): void;
+    toggleCode(editor: Editor): void;
+    toggleCodeBlock(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;
+    setTextAlign(editor: Editor, alignment: "left" | "center" | "right" | "justify"): void;
+    insertHorizontalRule(editor: Editor): 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;
+    deleteColumn(editor: Editor): void;
+    addRowBefore(editor: Editor): void;
+    addRowAfter(editor: Editor): void;
+    deleteRow(editor: Editor): void;
+    deleteTable(editor: Editor): void;
+    mergeCells(editor: Editor): void;
+    splitCell(editor: Editor): void;
+    toggleHeaderColumn(editor: Editor): void;
+    toggleHeaderRow(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?: AteImageUploadOptions): Promise<void>;
+    uploadImage(editor: Editor, file: File, options?: AteImageUploadOptions): Promise<void>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AteEditorCommandsService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<AteEditorCommandsService>;
+}

package/lib/services/ate-i18n.service.d.ts

@@ -0,0 +1,394 @@
+import * as i0 from "@angular/core";
+export type SupportedLocale = "en" | "fr" | (string & {});
+export interface AteTranslations {
+    toolbar: {
+        bold: string;
+        italic: string;
+        underline: string;
+        strike: string;
+        code: string;
+        codeBlock: string;
+        superscript: string;
+        subscript: string;
+        highlight: string;
+        highlightPicker: string;
+        heading1: string;
+        heading2: string;
+        heading3: string;
+        bulletList: string;
+        orderedList: string;
+        blockquote: string;
+        alignLeft: string;
+        alignCenter: string;
+        alignRight: string;
+        alignJustify: string;
+        link: string;
+        image: string;
+        horizontalRule: string;
+        table: string;
+        undo: string;
+        redo: string;
+        clear: string;
+        textColor: string;
+        customColor: string;
+        presets: string;
+    };
+    bubbleMenu: {
+        bold: string;
+        italic: string;
+        underline: string;
+        strike: string;
+        code: string;
+        superscript: string;
+        subscript: string;
+        highlight: string;
+        highlightPicker: string;
+        textColor: string;
+        link: string;
+        addLink: string;
+        editLink: string;
+        removeLink: string;
+        linkUrl: string;
+        linkText: string;
+        openLink: string;
+        customColor: string;
+        presets: string;
+    };
+    slashCommands: {
+        heading1: {
+            title: string;
+            description: string;
+            keywords: string[];
+        };
+        heading2: {
+            title: string;
+            description: string;
+            keywords: string[];
+        };
+        heading3: {
+            title: string;
+            description: string;
+            keywords: string[];
+        };
+        bulletList: {
+            title: string;
+            description: string;
+            keywords: string[];
+        };
+        orderedList: {
+            title: string;
+            description: string;
+            keywords: string[];
+        };
+        blockquote: {
+            title: string;
+            description: string;
+            keywords: string[];
+        };
+        code: {
+            title: string;
+            description: string;
+            keywords: string[];
+        };
+        image: {
+            title: string;
+            description: string;
+            keywords: string[];
+        };
+        horizontalRule: {
+            title: string;
+            description: string;
+            keywords: string[];
+        };
+        table: {
+            title: string;
+            description: string;
+            keywords: string[];
+        };
+    };
+    table: {
+        addRowBefore: string;
+        addRowAfter: string;
+        deleteRow: string;
+        addColumnBefore: string;
+        addColumnAfter: string;
+        deleteColumn: string;
+        deleteTable: string;
+        toggleHeaderRow: string;
+        toggleHeaderColumn: string;
+        mergeCells: string;
+        splitCell: string;
+    };
+    imageUpload: {
+        selectImage: string;
+        loadError: string;
+        uploadingImage: string;
+        uploadProgress: string;
+        uploadError: string;
+        uploadSuccess: string;
+        imageTooLarge: string;
+        invalidFileType: string;
+        dragDropText: string;
+        changeImage: string;
+        deleteImage: string;
+        resizeSmall: string;
+        resizeMedium: string;
+        resizeLarge: string;
+        resizeOriginal: string;
+        resizing: string;
+        compressing: string;
+        compressionError: string;
+        validating: string;
+        uploadingToServer: string;
+        replacingImage: string;
+        insertingImage: string;
+        noFileSelected: string;
+        selectionCancelled: string;
+    };
+    editor: {
+        placeholder: string;
+        character: string;
+        word: string;
+        linkPrompt: string;
+        linkUrlPrompt: string;
+        confirmDelete: string;
+        toggleEdit: string;
+        viewMode: string;
+    };
+    common: {
+        cancel: string;
+        confirm: string;
+        apply: string;
+        delete: string;
+        save: string;
+        close: string;
+        loading: string;
+        error: string;
+        success: string;
+    };
+}
+export declare class AteI18nService {
+    private _currentLocale;
+    private _translations;
+    readonly currentLocale: import("@angular/core").Signal<SupportedLocale>;
+    /** All loaded translations (useful for dynamic key access) */
+    readonly allTranslations: import("@angular/core").Signal<Record<SupportedLocale, AteTranslations>>;
+    readonly translations: import("@angular/core").Signal<AteTranslations>;
+    readonly t: import("@angular/core").Signal<AteTranslations>;
+    readonly toolbar: import("@angular/core").Signal<{
+        bold: string;
+        italic: string;
+        underline: string;
+        strike: string;
+        code: string;
+        codeBlock: string;
+        superscript: string;
+        subscript: string;
+        highlight: string;
+        highlightPicker: string;
+        heading1: string;
+        heading2: string;
+        heading3: string;
+        bulletList: string;
+        orderedList: string;
+        blockquote: string;
+        alignLeft: string;
+        alignCenter: string;
+        alignRight: string;
+        alignJustify: string;
+        link: string;
+        image: string;
+        horizontalRule: string;
+        table: string;
+        undo: string;
+        redo: string;
+        clear: string;
+        textColor: string;
+        customColor: string;
+        presets: string;
+    }>;
+    readonly bubbleMenu: import("@angular/core").Signal<{
+        bold: string;
+        italic: string;
+        underline: string;
+        strike: string;
+        code: string;
+        superscript: string;
+        subscript: string;
+        highlight: string;
+        highlightPicker: string;
+        textColor: string;
+        link: string;
+        addLink: string;
+        editLink: string;
+        removeLink: string;
+        linkUrl: string;
+        linkText: string;
+        openLink: string;
+        customColor: string;
+        presets: string;
+    }>;
+    readonly slashCommands: import("@angular/core").Signal<{
+        heading1: {
+            title: string;
+            description: string;
+            keywords: string[];
+        };
+        heading2: {
+            title: string;
+            description: string;
+            keywords: string[];
+        };
+        heading3: {
+            title: string;
+            description: string;
+            keywords: string[];
+        };
+        bulletList: {
+            title: string;
+            description: string;
+            keywords: string[];
+        };
+        orderedList: {
+            title: string;
+            description: string;
+            keywords: string[];
+        };
+        blockquote: {
+            title: string;
+            description: string;
+            keywords: string[];
+        };
+        code: {
+            title: string;
+            description: string;
+            keywords: string[];
+        };
+        image: {
+            title: string;
+            description: string;
+            keywords: string[];
+        };
+        horizontalRule: {
+            title: string;
+            description: string;
+            keywords: string[];
+        };
+        table: {
+            title: string;
+            description: string;
+            keywords: string[];
+        };
+    }>;
+    readonly table: import("@angular/core").Signal<{
+        addRowBefore: string;
+        addRowAfter: string;
+        deleteRow: string;
+        addColumnBefore: string;
+        addColumnAfter: string;
+        deleteColumn: string;
+        deleteTable: string;
+        toggleHeaderRow: string;
+        toggleHeaderColumn: string;
+        mergeCells: string;
+        splitCell: string;
+    }>;
+    readonly imageUpload: import("@angular/core").Signal<{
+        selectImage: string;
+        loadError: string;
+        uploadingImage: string;
+        uploadProgress: string;
+        uploadError: string;
+        uploadSuccess: string;
+        imageTooLarge: string;
+        invalidFileType: string;
+        dragDropText: string;
+        changeImage: string;
+        deleteImage: string;
+        resizeSmall: string;
+        resizeMedium: string;
+        resizeLarge: string;
+        resizeOriginal: string;
+        resizing: string;
+        compressing: string;
+        compressionError: string;
+        validating: string;
+        uploadingToServer: string;
+        replacingImage: string;
+        insertingImage: string;
+        noFileSelected: string;
+        selectionCancelled: string;
+    }>;
+    readonly editor: import("@angular/core").Signal<{
+        placeholder: string;
+        character: string;
+        word: string;
+        linkPrompt: string;
+        linkUrlPrompt: string;
+        confirmDelete: string;
+        toggleEdit: string;
+        viewMode: string;
+    }>;
+    readonly common: import("@angular/core").Signal<{
+        cancel: string;
+        confirm: string;
+        apply: string;
+        delete: string;
+        save: string;
+        close: string;
+        loading: string;
+        error: string;
+        success: string;
+    }>;
+    constructor();
+    setLocale(locale: SupportedLocale): void;
+    autoDetectLocale(): void;
+    getSupportedLocales(): SupportedLocale[];
+    addTranslations(locale: string, translations: AteTranslations | Partial<AteTranslations>): void;
+    private detectBrowserLanguage;
+    getToolbarTitle(key: keyof AteTranslations["toolbar"]): string;
+    getBubbleMenuTitle(key: keyof AteTranslations["bubbleMenu"]): string;
+    getSlashCommand(key: keyof AteTranslations["slashCommands"]): {
+        title: string;
+        description: string;
+        keywords: string[];
+    } | {
+        title: string;
+        description: string;
+        keywords: string[];
+    } | {
+        title: string;
+        description: string;
+        keywords: string[];
+    } | {
+        title: string;
+        description: string;
+        keywords: string[];
+    } | {
+        title: string;
+        description: string;
+        keywords: string[];
+    } | {
+        title: string;
+        description: string;
+        keywords: string[];
+    } | {
+        title: string;
+        description: string;
+        keywords: string[];
+    } | {
+        title: string;
+        description: string;
+        keywords: string[];
+    } | {
+        title: string;
+        description: string;
+        keywords: string[];
+    } | {
+        title: string;
+        description: string;
+        keywords: string[];
+    };
+    static ɵfac: i0.ɵɵFactoryDeclaration<AteI18nService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<AteI18nService>;
+}

package/lib/services/ate-image.service.d.ts

@@ -0,0 +1,71 @@
+import { Editor } from "@tiptap/core";
+import { AteResizeOptions, AteImageUploadOptions, AteImageUploadHandler, AteImageUploadResult, AteImageData } from "../models/ate-image.model";
+import * as i0 from "@angular/core";
+export declare class AteImageService {
+    /** Signals for image state */
+    selectedImage: import("@angular/core").WritableSignal<AteImageData | null>;
+    isImageSelected: import("@angular/core").Signal<boolean>;
+    /** Resizing state */
+    isResizing: import("@angular/core").WritableSignal<boolean>;
+    private i18n;
+    private readonly t;
+    /** Upload state signals */
+    isUploading: import("@angular/core").WritableSignal<boolean>;
+    uploadProgress: import("@angular/core").WritableSignal<number>;
+    uploadMessage: import("@angular/core").WritableSignal<string>;
+    /**
+     * Custom upload handler.
+     * If set, this handler replaces the default base64 conversion.
+     */
+    uploadHandler: AteImageUploadHandler | 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: AteImageData): void;
+    /** Update attributes of the currently active image */
+    updateImageAttributes(editor: Editor, attributes: Partial<AteImageData>): void;
+    /** Resize image with optional aspect ratio maintenance */
+    resizeImage(editor: Editor, options: AteResizeOptions): void;
+    /** Predetermined resize helpers used by UI */
+    resizeImageToSmall(editor: Editor): void;
+    resizeImageToMedium(editor: Editor): void;
+    resizeImageToLarge(editor: Editor): void;
+    resizeImageToOriginal(editor: Editor): void;
+    /** Get current image dimensions */
+    getImageDimensions(editor: Editor): {
+        width: number;
+        height: number;
+    } | null;
+    /** Remove the selected image */
+    deleteImage(editor: Editor): void;
+    private updateSelectedImage;
+    /** Validate file type and size */
+    validateImage(file: File, options?: {
+        maxSize?: number;
+        allowedTypes?: string[];
+    }): {
+        valid: boolean;
+        error?: string;
+    };
+    /** Compress and process image on client side */
+    compressImage(file: File, quality?: number, maxWidth?: number, maxHeight?: number): Promise<AteImageUploadResult>;
+    /** Core upload logic with progress tracking */
+    private uploadImageWithProgress;
+    private resetUploadState;
+    /** Main entry point for file upload and insertion */
+    uploadAndInsertImage(editor: Editor, file: File, options?: AteImageUploadOptions): Promise<void>;
+    /** Trigger an editor transaction to force decoration update */
+    private forceEditorUpdate;
+    /** Generic helper to open file picker and process selection */
+    private selectFileAndProcess;
+    /** Select file and upload as new image */
+    selectAndUploadImage(editor: Editor, options?: AteImageUploadOptions): Promise<void>;
+    /** Select file and replace currently selected image */
+    selectAndReplaceImage(editor: Editor, options?: AteImageUploadOptions): Promise<void>;
+    /** Internal helper used by replacement logic */
+    uploadAndReplaceImage(editor: Editor, file: File, options?: AteImageUploadOptions): Promise<void>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AteImageService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<AteImageService>;
+}

package/lib/services/ate-link.service.d.ts

@@ -0,0 +1,42 @@
+import type { Editor } from "@tiptap/core";
+import * as i0 from "@angular/core";
+export declare class AteLinkService {
+    /** Whether link edit mode is active */
+    readonly editMode: import("@angular/core").WritableSignal<boolean>;
+    /** Reference to the element that triggered the menu (for anchoring) */
+    readonly menuTrigger: import("@angular/core").WritableSignal<HTMLElement | null>;
+    /** Whether the user is currently interacting with the link UI (input focus) */
+    readonly isInteracting: import("@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: i0.ɵɵFactoryDeclaration<AteLinkService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<AteLinkService>;
+}

package/lib/utils/ate-color.utils.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Normalizes color values (rgb/rgba to hex).
+ */
+export declare function normalizeColor(color: string | null | undefined): string | null;
+/**
+ * Calculate luminance (0-255).
+ */
+export declare function getLuminance(color: string | null | undefined): number;
+/**
+ * Returns contrast color for readability.
+ */
+export declare function getContrastColor(color: string): "black" | "white";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flogeez/angular-tiptap-editor",
-  "version": "2.4.0",
+  "version": "2.4.1",
   "description": "A modern, customizable rich-text editor for Angular (18+), built with Tiptap and featuring complete internationalization support",
   "keywords": [
     "angular",
@@ -61,6 +61,8 @@
     },
     ".": {
       "types": "./index.d.ts",
+      "esm2022": "./esm2022/flogeez-angular-tiptap-editor.mjs",
+      "esm": "./esm2022/flogeez-angular-tiptap-editor.mjs",
       "default": "./fesm2022/flogeez-angular-tiptap-editor.mjs"
     }
   }