@flogeez/angular-tiptap-editor 3.1.3 → 3.1.4

package/lib/node-view/ate-node-view.renderer.d.ts

@@ -0,0 +1,23 @@
+import { Type } from "@angular/core";
+import { NodeView, Decoration, EditorView } from "@tiptap/pm/view";
+import { Node as ProseMirrorNode } from "@tiptap/pm/model";
+import { Editor } from "@tiptap/core";
+import { AteComponentRenderOptions } from "./ate-node-view.models";
+/**
+ * Universal Renderer for Angular Components as TipTap NodeViews.
+ *
+ * Supports:
+ * - TipTap-Aware components (extending AteAngularNodeView)
+ * - Standard library components (automatic @Input() sync)
+ * - Signal-based inputs and outputs (Angular 18+)
+ * - Content projection (editableContent)
+ * - Unified lifecycle and event management
+ */
+export declare function AteNodeViewRenderer<T>(component: Type<T>, options: AteComponentRenderOptions): (props: {
+    node: ProseMirrorNode;
+    view: EditorView;
+    getPos: () => number | undefined;
+    decorations: readonly Decoration[];
+    editor: Editor;
+    extension: unknown;
+}) => NodeView;

package/lib/node-view/ate-register-angular-component.d.ts

@@ -0,0 +1,35 @@
+import { Injector } from "@angular/core";
+import { Node } from "@tiptap/core";
+import { RegisterAngularComponentOptions } from "./ate-node-view.models";
+/**
+ * Registers ANY Angular component as a TipTap node extension.
+ *
+ * This function is the single public entry point for adding custom components.
+ * It supports two distinct modes:
+ *
+ * 1. **TipTap-Aware Mode** (the component extends `AteAngularNodeView`):
+ *    Grants direct access to the TipTap API (`editor`, `node`, `updateAttributes`, etc.) within the component.
+ *
+ * 2. **Standard Mode** (library or legacy components):
+ *    Allows using any existing Angular component. Its `@Input()` properties are automatically
+ *    synchronized with TipTap node attributes.
+ *
+ * @param injectorOrOptions - The Angular Injector OR the configuration options
+ * @param maybeOptions - Configuration options (if the first param was an injector)
+ * @returns A TipTap Node extension ready to be used
+ *
+ * @example
+ * ```typescript
+ * // Modern way (requires provideAteEditor())
+ * registerAngularComponent({
+ *   component: MyComponent,
+ *   name: 'myComponent'
+ * });
+ *
+ * // Classic way
+ * registerAngularComponent(injector, {
+ *   component: MyComponent
+ * });
+ * ```
+ */
+export declare function registerAngularComponent<T = unknown>(injectorOrOptions: Injector | RegisterAngularComponentOptions<T>, maybeOptions?: RegisterAngularComponentOptions<T>): Node;

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,75 @@
+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>;
+    downloadImage(editor: Editor): void;
+    handleImageDrop(editor: Editor, event: DragEvent, options?: AteImageUploadOptions): boolean;
+    handleImagePaste(editor: Editor, event: ClipboardEvent, options?: AteImageUploadOptions): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AteEditorCommandsService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<AteEditorCommandsService>;
+}

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

@@ -0,0 +1,406 @@
+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;
+        downloadImage: string;
+        deleteImage: string;
+        resizeSmall: string;
+        resizeMedium: string;
+        resizeLarge: string;
+        resizeOriginal: string;
+        alignLeft: string;
+        alignCenter: string;
+        alignRight: 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;
+        blockAdd: string;
+        blockDrag: 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;
+        downloadImage: string;
+        deleteImage: string;
+        resizeSmall: string;
+        resizeMedium: string;
+        resizeLarge: string;
+        resizeOriginal: string;
+        alignLeft: string;
+        alignCenter: string;
+        alignRight: 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;
+        blockAdd: string;
+        blockDrag: 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,82 @@
+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;
+    /** Download the current image */
+    downloadImage(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>;
+    /**
+     * Handle image drop event.
+     * Calculates the position from coordinates and sets the selection accordingly.
+     */
+    handleDrop(editor: Editor, event: DragEvent, options?: AteImageUploadOptions): boolean;
+    /**
+     * Handle image paste event.
+     */
+    handlePaste(editor: Editor, event: ClipboardEvent, options?: AteImageUploadOptions): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AteImageService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<AteImageService>;
+}