@flogeez/angular-tiptap-editor 2.3.0 → 2.4.1

package/lib/ate-editor.provider.d.ts

@@ -0,0 +1,21 @@
+import { EnvironmentProviders } from "@angular/core";
+import { AteEditorConfig } from "./models/ate-editor-config.model";
+/**
+ * Provides the necessary configuration and initialization for the Angular TipTap Editor.
+ * This should be called in your app.config.ts (for standalone) or main.ts.
+ *
+ * This provider is essential for 'Angular Nodes' to work correctly, as it captures the
+ * root Injector required to instantiate custom Angular components within the editor.
+ * @example
+ * ```ts
+ * bootstrapApplication(AppComponent, {
+ *   providers: [
+ *     provideAteEditor({
+ *       theme: 'dark',
+ *       mode: 'seamless'
+ *     })
+ *   ]
+ * });
+ * ```
+ */
+export declare function provideAteEditor(config?: AteEditorConfig): EnvironmentProviders;

package/lib/components/bubble-menus/base/ate-base-bubble-menu.d.ts

@@ -0,0 +1,71 @@
+import { ElementRef, OnInit, OnDestroy } from "@angular/core";
+import { Instance as TippyInstance } from "tippy.js";
+import { Editor } from "@tiptap/core";
+import { AteEditorCommandsService } from "../../../services/ate-editor-commands.service";
+import { AteI18nService } from "../../../services/ate-i18n.service";
+import * as i0 from "@angular/core";
+/**
+ * Base abstract class for all Bubble Menus (Text, Image, Table, Cell).
+ * Handles common logic for Tippy.js initialization, positioning, and visibility.
+ */
+export declare abstract class AteBaseBubbleMenu implements OnInit, OnDestroy {
+    protected readonly i18nService: AteI18nService;
+    protected readonly editorCommands: AteEditorCommandsService;
+    editor: import("@angular/core").InputSignal<Editor>;
+    menuRef: import("@angular/core").Signal<ElementRef<HTMLDivElement>>;
+    protected tippyInstance: TippyInstance | null;
+    protected updateTimeout: number | null;
+    protected readonly isToolbarInteracting: import("@angular/core").Signal<boolean>;
+    readonly state: import("@angular/core").Signal<import("@flogeez/angular-tiptap-editor").EditorStateSnapshot>;
+    constructor();
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    /**
+     * Initializes the Tippy instance.
+     * Can be overridden for specific Tippy configurations.
+     */
+    protected initTippy(): void;
+    /**
+     * Core logic to decide whether to show or hide the menu.
+     */
+    updateMenu: () => void;
+    /**
+     * Helper to show the Tippy instance with updated positioning.
+     */
+    showTippy(): void;
+    /**
+     * Helper to hide the Tippy instance.
+     */
+    hideTippy(): void;
+    /**
+     * Common command handler for buttons in the menu.
+     */
+    onCommand(command: string, event?: Event): void;
+    /**
+     * Shared helper to get the bounding rect of the current selection.
+     * Uses a combination of native selection and ProseMirror coordinates.
+     */
+    protected getRectForSelection(ed: Editor): DOMRect;
+    /**
+     * Returns the Rect representing the target for positioning the menu.
+     */
+    abstract getSelectionRect(): DOMRect;
+    /**
+     * Returns whether the menu should be displayed based on current state.
+     */
+    abstract shouldShow(): boolean;
+    /**
+     * Executes the given command on the editor.
+     */
+    protected abstract executeCommand(editor: Editor, command: string, ...args: unknown[]): void;
+    /**
+     * Optional hook called when Tippy is about to be shown.
+     */
+    protected onTippyShow(_instance: TippyInstance): void;
+    /**
+     * Optional hook called when Tippy is about to be hidden.
+     */
+    protected onTippyHide(_instance: TippyInstance): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AteBaseBubbleMenu, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<AteBaseBubbleMenu, never, never, { "editor": { "alias": "editor"; "required": true; "isSignal": true; }; }, {}, never, never, false, never>;
+}

package/lib/components/bubble-menus/base/ate-base-sub-bubble-menu.d.ts

@@ -0,0 +1,60 @@
+import { ElementRef, OnInit, OnDestroy } from "@angular/core";
+import { Instance as TippyInstance } from "tippy.js";
+import { Editor } from "@tiptap/core";
+import { AteEditorCommandsService } from "../../../services/ate-editor-commands.service";
+import { AteI18nService } from "../../../services/ate-i18n.service";
+import * as i0 from "@angular/core";
+/**
+ * Base abstract class for Sub-Bubble Menus (Link, Color).
+ * These menus are "sub-menus" of the main bubble menu or triggered/anchored by specific UI elements.
+ */
+export declare abstract class AteBaseSubBubbleMenu implements OnInit, OnDestroy {
+    protected readonly i18nService: AteI18nService;
+    protected readonly editorCommands: AteEditorCommandsService;
+    editor: import("@angular/core").InputSignal<Editor>;
+    menuRef: import("@angular/core").Signal<ElementRef<HTMLDivElement>>;
+    protected tippyInstance: TippyInstance | null;
+    protected updateTimeout: number | null;
+    readonly state: import("@angular/core").Signal<import("@flogeez/angular-tiptap-editor").EditorStateSnapshot>;
+    constructor();
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    /**
+     * Initializes the Tippy instance with sub-menu defaults.
+     */
+    protected initTippy(): void;
+    /**
+     * Core logic to decide whether to show or hide the menu.
+     */
+    updateMenu: () => void;
+    /**
+     * Helper to show the Tippy instance with updated positioning.
+     */
+    protected showTippy(): void;
+    /**
+     * Helper to hide the Tippy instance.
+     */
+    protected hideTippy(): void;
+    /**
+     * Returns the Rect representing the target for positioning the menu.
+     */
+    abstract getSelectionRect(): DOMRect;
+    /**
+     * Returns whether the menu should be displayed based on current state.
+     */
+    abstract shouldShow(): boolean;
+    /**
+     * Hook to add reactive dependencies to the update cycle.
+     */
+    protected abstract onStateChange(): void;
+    /**
+     * Optional hook called when Tippy is about to be shown.
+     */
+    protected onTippyShow(_instance: TippyInstance): void;
+    /**
+     * Optional hook called when Tippy is about to be hidden.
+     */
+    protected onTippyHide(_instance: TippyInstance): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AteBaseSubBubbleMenu, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<AteBaseSubBubbleMenu, never, never, { "editor": { "alias": "editor"; "required": true; "isSignal": true; }; }, {}, never, never, false, never>;
+}

package/lib/components/bubble-menus/color/ate-color-bubble-menu.component.d.ts

@@ -0,0 +1,77 @@
+import { Instance as TippyInstance } from "tippy.js";
+import { AteBaseSubBubbleMenu } from "../base/ate-base-sub-bubble-menu";
+import * as i0 from "@angular/core";
+export declare class AteColorBubbleMenuComponent extends AteBaseSubBubbleMenu {
+    private readonly colorPickerSvc;
+    readonly t: 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 common: import("@angular/core").Signal<{
+        cancel: string;
+        confirm: string;
+        apply: string;
+        delete: string;
+        save: string;
+        close: string;
+        loading: string;
+        error: string;
+        success: string;
+    }>;
+    readonly presets: string[];
+    private colorInputRef;
+    /**
+     * LOCAL MODE: We lock the mode when the menu is shown to avoid race conditions
+     * where the parent (bubble menu) clears the global signal before we apply the color.
+     */
+    activeMode: import("@angular/core").WritableSignal<"highlight" | "text">;
+    protected onStateChange(): void;
+    shouldShow(): boolean;
+    getSelectionRect(): DOMRect;
+    protected onTippyShow(_instance: TippyInstance): void;
+    protected onTippyHide(_instance: TippyInstance): void;
+    readonly currentColor: import("@angular/core").Signal<string>;
+    readonly hexValue: import("@angular/core").Signal<string>;
+    isColorActive(color: string): boolean;
+    applyColor(color: string, addToHistory?: boolean, event?: Event): void;
+    onApply(event?: Event): void;
+    onHexInput(event: Event): void;
+    onHexChange(event: Event): void;
+    triggerNativePicker(event?: Event): void;
+    onNativeInput(event: Event): void;
+    onNativeChange(event: Event): void;
+    onClearColor(event?: Event): void;
+    onMouseDown(event: MouseEvent): void;
+    onFocus(): void;
+    onBlur(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AteColorBubbleMenuComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AteColorBubbleMenuComponent, "ate-color-bubble-menu", never, {}, {}, never, never, true, never>;
+}

package/lib/components/bubble-menus/image/ate-image-bubble-menu.component.d.ts

@@ -0,0 +1,52 @@
+import { type Editor } from "@tiptap/core";
+import { AteBaseBubbleMenu } from "../base/ate-base-bubble-menu";
+import { AteImageUploadOptions } from "../../../models/ate-image.model";
+import * as i0 from "@angular/core";
+export declare class AteImageBubbleMenuComponent extends AteBaseBubbleMenu {
+    readonly t: 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;
+    }>;
+    private readonly imageService;
+    config: import("@angular/core").InputSignal<Partial<Record<"separator" | "changeImage" | "resizeSmall" | "resizeMedium" | "resizeLarge" | "resizeOriginal" | "deleteImage", boolean>>>;
+    imageUpload: import("@angular/core").InputSignal<AteImageUploadOptions>;
+    imageBubbleMenuConfig: import("@angular/core").Signal<{
+        changeImage: boolean;
+        resizeSmall: boolean;
+        resizeMedium: boolean;
+        resizeLarge: boolean;
+        resizeOriginal: boolean;
+        deleteImage: boolean;
+        separator: boolean;
+    }>;
+    hasResizeButtons: import("@angular/core").Signal<boolean>;
+    shouldShow(): boolean;
+    getSelectionRect(): DOMRect;
+    protected executeCommand(editor: Editor, command: string, ..._args: unknown[]): void;
+    private changeImage;
+    private deleteImage;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AteImageBubbleMenuComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AteImageBubbleMenuComponent, "ate-image-bubble-menu", never, { "config": { "alias": "config"; "required": false; "isSignal": true; }; "imageUpload": { "alias": "imageUpload"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/lib/components/bubble-menus/link/ate-link-bubble-menu.component.d.ts

@@ -0,0 +1,55 @@
+import { ElementRef } from "@angular/core";
+import { AteBaseSubBubbleMenu } from "../base/ate-base-sub-bubble-menu";
+import * as i0 from "@angular/core";
+export declare class AteLinkBubbleMenuComponent extends AteBaseSubBubbleMenu {
+    private readonly linkSvc;
+    readonly t: 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 common: import("@angular/core").Signal<{
+        cancel: string;
+        confirm: string;
+        apply: string;
+        delete: string;
+        save: string;
+        close: string;
+        loading: string;
+        error: string;
+        success: string;
+    }>;
+    linkInput: import("@angular/core").Signal<ElementRef<HTMLInputElement> | undefined>;
+    editUrl: import("@angular/core").WritableSignal<string>;
+    constructor();
+    protected onStateChange(): void;
+    shouldShow(): boolean;
+    getSelectionRect(): DOMRect;
+    protected onTippyHide(): void;
+    currentUrl(): string;
+    onMouseDown(event: MouseEvent): void;
+    onFocus(): void;
+    onBlur(): void;
+    onOpenLink(event: Event): void;
+    onRemove(event: Event): void;
+    onApply(event: Event): void;
+    onCancel(event: Event): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AteLinkBubbleMenuComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AteLinkBubbleMenuComponent, "ate-link-bubble-menu", never, {}, {}, never, never, true, never>;
+}

package/lib/components/bubble-menus/table/ate-cell-bubble-menu.component.d.ts

@@ -0,0 +1,12 @@
+import { type Editor } from "@tiptap/core";
+import { AteBaseBubbleMenu } from "../base/ate-base-bubble-menu";
+import * as i0 from "@angular/core";
+export declare class AteCellBubbleMenuComponent extends AteBaseBubbleMenu {
+    config: import("@angular/core").InputSignal<Partial<Record<"mergeCells" | "splitCell", boolean>>>;
+    readonly i18n: () => import("@flogeez/angular-tiptap-editor").TiptapI18nService;
+    shouldShow(): boolean;
+    getSelectionRect(): DOMRect;
+    protected executeCommand(editor: Editor, command: string, ...args: unknown[]): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AteCellBubbleMenuComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AteCellBubbleMenuComponent, "ate-cell-bubble-menu", never, { "config": { "alias": "config"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/lib/components/bubble-menus/table/ate-table-bubble-menu.component.d.ts

@@ -0,0 +1,24 @@
+import { type Editor } from "@tiptap/core";
+import { AteBaseBubbleMenu } from "../base/ate-base-bubble-menu";
+import * as i0 from "@angular/core";
+export declare class AteTableBubbleMenuComponent extends AteBaseBubbleMenu {
+    readonly t: 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;
+    }>;
+    config: import("@angular/core").InputSignal<Partial<Record<"addColumnBefore" | "addColumnAfter" | "deleteColumn" | "addRowBefore" | "addRowAfter" | "deleteRow" | "deleteTable" | "toggleHeaderColumn" | "toggleHeaderRow" | "separator", boolean>>>;
+    shouldShow(): boolean;
+    getSelectionRect(): DOMRect;
+    protected executeCommand(editor: Editor, command: string, ...args: unknown[]): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AteTableBubbleMenuComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AteTableBubbleMenuComponent, "ate-table-bubble-menu", never, { "config": { "alias": "config"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/lib/components/bubble-menus/text/ate-bubble-menu.component.d.ts

@@ -0,0 +1,53 @@
+import { OnInit, OnDestroy } from "@angular/core";
+import { type Editor } from "@tiptap/core";
+import { AteBubbleMenuConfig } from "../../../models/ate-bubble-menu.model";
+import { AteBaseBubbleMenu } from "../base/ate-base-bubble-menu";
+import * as i0 from "@angular/core";
+export declare class AteBubbleMenuComponent extends AteBaseBubbleMenu implements OnInit, OnDestroy {
+    readonly t: 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;
+    }>;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    private onMouseDown;
+    config: import("@angular/core").InputSignal<AteBubbleMenuConfig>;
+    bubbleMenuConfig: import("@angular/core").Signal<{
+        custom?: import("../../../models/ate-bubble-menu.model").AteCustomBubbleMenuItem[] | undefined;
+        code: boolean;
+        bold: boolean;
+        link: boolean;
+        strike: boolean;
+        italic: boolean;
+        underline: boolean;
+        superscript: boolean;
+        subscript: boolean;
+        highlight: boolean;
+        separator: boolean;
+        highlightPicker?: boolean | undefined;
+        textColor: boolean;
+    }>;
+    shouldShow(): boolean;
+    getSelectionRect(): DOMRect;
+    protected executeCommand(editor: Editor, command: string, ...args: unknown[]): void;
+    protected onTippyHide(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AteBubbleMenuComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AteBubbleMenuComponent, "ate-bubble-menu", never, { "config": { "alias": "config"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/lib/components/color-picker/ate-color-picker.component.d.ts

@@ -0,0 +1,54 @@
+import type { Editor } from "@tiptap/core";
+import * as i0 from "@angular/core";
+export type ColorPickerMode = "text" | "highlight";
+export declare class AteColorPickerComponent {
+    editor: import("@angular/core").InputSignal<Editor>;
+    mode: import("@angular/core").InputSignal<ColorPickerMode>;
+    disabled: import("@angular/core").InputSignal<boolean>;
+    anchorToText: import("@angular/core").InputSignal<boolean>;
+    private colorPickerSvc;
+    private i18nService;
+    private editorCommands;
+    readonly t: 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 state: import("@angular/core").Signal<import("@flogeez/angular-tiptap-editor").EditorStateSnapshot>;
+    readonly currentColor: import("@angular/core").Signal<string>;
+    readonly hasColorApplied: import("@angular/core").Signal<boolean>;
+    readonly buttonIcon: import("@angular/core").Signal<"format_color_text" | "format_color_fill">;
+    readonly buttonBgColor: import("@angular/core").Signal<string>;
+    readonly buttonTextColor: import("@angular/core").Signal<string>;
+    onToggle(event: Event): void;
+    onClear(event: MouseEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AteColorPickerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AteColorPickerComponent, "ate-color-picker", never, { "editor": { "alias": "editor"; "required": true; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "anchorToText": { "alias": "anchorToText"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/lib/components/edit-toggle/ate-edit-toggle.component.d.ts

@@ -0,0 +1,13 @@
+import { AteTranslations } from "../../services/ate-i18n.service";
+import * as i0 from "@angular/core";
+/**
+ * Edit Toggle Component
+ * Allows switching between editable and readonly modes
+ */
+export declare class AteEditToggleComponent {
+    editable: import("@angular/core").InputSignal<boolean>;
+    translations: import("@angular/core").InputSignal<AteTranslations>;
+    editToggle: import("@angular/core").OutputEmitterRef<Event>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AteEditToggleComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AteEditToggleComponent, "ate-edit-toggle", never, { "editable": { "alias": "editable"; "required": true; "isSignal": true; }; "translations": { "alias": "translations"; "required": true; "isSignal": true; }; }, { "editToggle": "editToggle"; }, never, never, true, never>;
+}