@flogeez/angular-tiptap-editor 3.2.2 → 3.4.0

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

@@ -14,7 +14,7 @@ export declare abstract class AteBaseBubbleMenu implements AfterViewInit, OnDest
     editor: import("@angular/core").InputSignal<Editor>;
     menuRef: import("@angular/core").Signal<ElementRef<HTMLDivElement>>;
     protected tippyInstance: TippyInstance | null;
-    protected updateTimeout: number | null;
+    protected updateTimeout: ReturnType<typeof setTimeout> | null;
     protected readonly isToolbarInteracting: import("@angular/core").Signal<boolean>;
     readonly state: import("@angular/core").Signal<import("@flogeez/angular-tiptap-editor").AteEditorStateSnapshot>;
     constructor();

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

@@ -14,7 +14,7 @@ export declare abstract class AteBaseSubBubbleMenu implements AfterViewInit, OnD
     editor: import("@angular/core").InputSignal<Editor>;
     menuRef: import("@angular/core").Signal<ElementRef<HTMLDivElement>>;
     protected tippyInstance: TippyInstance | null;
-    protected updateTimeout: number | null;
+    protected updateTimeout: ReturnType<typeof setTimeout> | null;
     readonly state: import("@angular/core").Signal<import("@flogeez/angular-tiptap-editor").AteEditorStateSnapshot>;
     constructor();
     ngAfterViewInit(): void;

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

@@ -1,4 +1,4 @@
-import { AteTranslations } from "../../services/ate-i18n.service";
+import { AteTranslations } from "../../i18n/ateTranslationsModel";
 import * as i0 from "@angular/core";
 /**
  * Edit Toggle Component

package/lib/components/editor/angular-tiptap-editor.component.d.ts

@@ -2,7 +2,7 @@ import { ElementRef, OnDestroy, AfterViewInit } from "@angular/core";
 import { Editor, EditorOptions, Extension, Node, Mark, JSONContent } from "@tiptap/core";
 import { Node as PMNode } from "@tiptap/pm/model";
 import { AteCustomSlashCommands } from "../../models/ate-slash-command.model";
-import { AteI18nService, SupportedLocale } from "../../services/ate-i18n.service";
+import { AteI18nService } from "../../services/ate-i18n.service";
 import { AteEditorCommandsService } from "../../services/ate-editor-commands.service";
 import { AteStateCalculator } from "../../models/ate-editor-state.model";
 import { AteSlashCommandsConfig } from "../../config/ate-slash-commands.config";
@@ -10,6 +10,7 @@ import { AteToolbarConfig } from "../../models/ate-toolbar.model";
 import { AteBubbleMenuConfig } from "../../models/ate-bubble-menu.model";
 import { AteEditorConfig, AteAngularNode, AteBlockControlsMode, AteAutofocusMode } from "../../models/ate-editor-config.model";
 import { AteImageUploadHandler, AteImageUploadOptions, AteImageUploadResult } from "../../models/ate-image.model";
+import { SupportedLocale } from "../../i18n/ateTranslationsModel";
 import * as i0 from "@angular/core";
 import * as i1 from "../../directives/ate-noop-value-accessor.directive";
 /**
@@ -171,7 +172,7 @@ export declare class AngularTiptapEditorComponent implements AfterViewInit, OnDe
         handler?: AteImageUploadHandler | undefined;
     }>;
     readonly finalImageUploadHandler: import("@angular/core").Signal<AteImageUploadHandler | undefined>;
-    readonly currentTranslations: import("@angular/core").Signal<import("../../services/ate-i18n.service").AteTranslations>;
+    readonly currentTranslations: import("@angular/core").Signal<import("../../i18n/ateTranslationsModel").AteTranslations>;
     private _destroyRef;
     private ngControl;
     readonly i18nService: AteI18nService;

package/lib/components/table-of-contents/ate-table-of-contents.component.d.ts

@@ -0,0 +1,48 @@
+import { OnDestroy } from "@angular/core";
+import { Editor } from "@tiptap/core";
+import { AteEditorRef } from "../../models/ate-editor-ref";
+import * as i0 from "@angular/core";
+export interface AteTocItem {
+    text: string;
+    level: number;
+    pos: number;
+    id: string;
+    active: boolean;
+}
+export type AteTocVariant = "card" | "transparent" | "minimal";
+/**
+ * Table of Contents Component (Notion-style)
+ * Dynamically extracts headings from the active editor and displays them.
+ * Configurable via inputs (floating, position, variants, hover expansion) and CSS variables.
+ */
+export declare class AteTableOfContentsComponent implements OnDestroy {
+    editor: import("@angular/core").InputSignal<string | Editor | AteEditorRef | null | undefined>;
+    title: import("@angular/core").InputSignal<string | null>;
+    showTitle: import("@angular/core").InputSignal<boolean>;
+    floating: import("@angular/core").InputSignal<boolean>;
+    position: import("@angular/core").InputSignal<"left" | "right">;
+    variant: import("@angular/core").InputSignal<AteTocVariant>;
+    hoverExpand: import("@angular/core").InputSignal<boolean>;
+    private readonly registry;
+    private readonly i18n;
+    dashWidth(level: number): number;
+    readonly headerTitle: import("@angular/core").Signal<string>;
+    readonly resolvedEditor: import("@angular/core").Signal<Editor | null>;
+    readonly items: import("@angular/core").WritableSignal<AteTocItem[]>;
+    isMouseHovered: import("@angular/core").WritableSignal<boolean>;
+    isFocused: import("@angular/core").WritableSignal<boolean>;
+    readonly isExpanded: import("@angular/core").Signal<boolean>;
+    constructor();
+    ngOnDestroy(): void;
+    onScroll(): void;
+    setMouseHover(hovered: boolean): void;
+    setFocused(focused: boolean): void;
+    scrollToHeading(item: AteTocItem, event: MouseEvent): void;
+    private bindEditorEvents;
+    private unbindEditorEvents;
+    private readonly onEditorUpdate;
+    private updateHeadings;
+    private checkActiveHeading;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AteTableOfContentsComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AteTableOfContentsComponent, "ate-table-of-contents", never, { "editor": { "alias": "editor"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "showTitle": { "alias": "showTitle"; "required": false; "isSignal": true; }; "floating": { "alias": "floating"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "hoverExpand": { "alias": "hoverExpand"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/lib/i18n/ateTranslationsModel.d.ts

@@ -0,0 +1,190 @@
+export type SupportedLocale = "en" | "fr" | "de" | (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;
+        characterPlural: string;
+        word: string;
+        wordPlural: string;
+        linkPrompt: string;
+        linkUrlPrompt: string;
+        confirmDelete: string;
+        toggleEdit: string;
+        viewMode: string;
+        blockAdd: string;
+        blockDrag: string;
+        tableOfContents: string;
+    };
+    common: {
+        cancel: string;
+        confirm: string;
+        apply: string;
+        delete: string;
+        save: string;
+        close: string;
+        loading: string;
+        error: string;
+        success: string;
+    };
+    export: {
+        export: string;
+        html: string;
+        markdown: string;
+        text: string;
+        copyHtml: string;
+        copyMarkdown: string;
+        copyText: string;
+        downloadHtml: string;
+        downloadMarkdown: string;
+        downloadText: string;
+        copiedSuccess: string;
+    };
+}

package/lib/i18n/de_ateTranslations.d.ts

@@ -0,0 +1,2 @@
+import { AteTranslations } from "./ateTranslationsModel";
+export declare const GERMAN_TRANSLATIONS: AteTranslations;

package/lib/i18n/en_ateTranslations.d.ts

@@ -0,0 +1,2 @@
+import { AteTranslations } from "./ateTranslationsModel";
+export declare const ENGLISH_TRANSLATIONS: AteTranslations;

package/lib/i18n/fr_ateTranslations.d.ts

@@ -0,0 +1,2 @@
+import { AteTranslations } from "./ateTranslationsModel";
+export declare const FRENCH_TRANSLATIONS: AteTranslations;

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

@@ -1,191 +1,5 @@
+import { AteTranslations, SupportedLocale } from "../i18n/ateTranslationsModel";
 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: {
-        export: string;
-        html: string;
-        markdown: string;
-        text: string;
-        copyHtml: string;
-        copyMarkdown: string;
-        copyText: string;
-        downloadHtml: string;
-        downloadMarkdown: string;
-        downloadText: string;
-        copiedSuccess: string;
-    };
-}
 export declare class AteI18nService {
     private _currentLocale;
     private _translations;
@@ -217,6 +31,7 @@ export declare class AteI18nService {
         alignJustify: string;
         link: string;
         image: string;
+        /** All loaded translations (useful for dynamic key access) */
         horizontalRule: string;
         table: string;
         undo: string;
@@ -345,7 +160,9 @@ export declare class AteI18nService {
     readonly editor: import("@angular/core").Signal<{
         placeholder: string;
         character: string;
+        characterPlural: string;
         word: string;
+        wordPlural: string;
         linkPrompt: string;
         linkUrlPrompt: string;
         confirmDelete: string;
@@ -353,6 +170,7 @@ export declare class AteI18nService {
         viewMode: string;
         blockAdd: string;
         blockDrag: string;
+        tableOfContents: string;
     }>;
     readonly common: import("@angular/core").Signal<{
         cancel: string;

package/package.json

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

package/public-api.d.ts

@@ -1,4 +1,5 @@
 export * from "./lib/components/editor/angular-tiptap-editor.component";
+export { AteTableOfContentsComponent, type AteTocItem, type AteTocVariant } from "./lib/components/table-of-contents/ate-table-of-contents.component";
 export * from "./lib/ate-editor.provider";
 export * from "./lib/directives/ate-noop-value-accessor.directive";
 export * from "./lib/directives/ate-tooltip.directive";
@@ -25,7 +26,7 @@ export * from "./lib/models/ate-slash-command.model";
 export * from "./lib/config/ate-editor.config";
 export * from "./lib/config/ate-global-config.token";
 export * from "./lib/config/ate-slash-commands.config";
-export type { SupportedLocale } from "./lib/services/ate-i18n.service";
+export type { SupportedLocale } from "./lib/i18n/ateTranslationsModel";
 export { AteAngularNodeView } from "./lib/node-view/ate-angular-node-view";
 export { AteNodeViewRenderer } from "./lib/node-view/ate-node-view.renderer";
 export { createAngularComponentExtension } from "./lib/node-view/ate-node-view.factory";