@flogeez/angular-tiptap-editor 3.1.4 → 3.2.0

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

@@ -83,6 +83,11 @@ export declare class AngularTiptapEditorComponent implements AfterViewInit, OnDe
      * ```
      */
     imageUploadHandler: import("@angular/core").InputSignal<AteImageUploadHandler | undefined>;
+    /**
+     * Optional unique identifier for the editor instance in the registry.
+     * If not specified, a unique ID is automatically generated.
+     */
+    editorId: import("@angular/core").InputSignal<string | undefined>;
     contentChange: import("@angular/core").OutputEmitterRef<string>;
     editorCreated: import("@angular/core").OutputEmitterRef<Editor>;
     editorUpdate: import("@angular/core").OutputEmitterRef<{
@@ -171,6 +176,9 @@ export declare class AngularTiptapEditorComponent implements AfterViewInit, OnDe
     readonly i18nService: AteI18nService;
     readonly editorCommandsService: AteEditorCommandsService;
     readonly editorState: import("@angular/core").Signal<import("../../models/ate-editor-state.model").AteEditorStateSnapshot>;
+    private editorRegistry;
+    private _registeredId;
+    readonly registeredId: import("@angular/core").Signal<string | null>;
     private injector;
     private globalConfig;
     /**
@@ -238,5 +246,5 @@ export declare class AngularTiptapEditorComponent implements AfterViewInit, OnDe
     private setupFormControlSubscription;
     onEditorClick(event: Event): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<AngularTiptapEditorComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AngularTiptapEditorComponent, "angular-tiptap-editor", never, { "config": { "alias": "config"; "required": false; "isSignal": true; }; "content": { "alias": "content"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "editable": { "alias": "editable"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "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; }; "showFooter": { "alias": "showFooter"; "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; }; "blockControls": { "alias": "blockControls"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "autofocus": { "alias": "autofocus"; "required": false; "isSignal": true; }; "seamless": { "alias": "seamless"; "required": false; "isSignal": true; }; "floatingToolbar": { "alias": "floatingToolbar"; "required": false; "isSignal": true; }; "showEditToggle": { "alias": "showEditToggle"; "required": false; "isSignal": true; }; "spellcheck": { "alias": "spellcheck"; "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; }; "showTableBubbleMenu": { "alias": "showTableBubbleMenu"; "required": false; "isSignal": true; }; "tableBubbleMenu": { "alias": "tableBubbleMenu"; "required": false; "isSignal": true; }; "showCellBubbleMenu": { "alias": "showCellBubbleMenu"; "required": false; "isSignal": true; }; "cellBubbleMenu": { "alias": "cellBubbleMenu"; "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"; "editableChange": "editableChange"; }, never, never, true, [{ directive: typeof i1.AteNoopValueAccessorDirective; inputs: {}; outputs: {}; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AngularTiptapEditorComponent, "angular-tiptap-editor", never, { "config": { "alias": "config"; "required": false; "isSignal": true; }; "content": { "alias": "content"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "editable": { "alias": "editable"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "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; }; "showFooter": { "alias": "showFooter"; "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; }; "blockControls": { "alias": "blockControls"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "autofocus": { "alias": "autofocus"; "required": false; "isSignal": true; }; "seamless": { "alias": "seamless"; "required": false; "isSignal": true; }; "floatingToolbar": { "alias": "floatingToolbar"; "required": false; "isSignal": true; }; "showEditToggle": { "alias": "showEditToggle"; "required": false; "isSignal": true; }; "spellcheck": { "alias": "spellcheck"; "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; }; "showTableBubbleMenu": { "alias": "showTableBubbleMenu"; "required": false; "isSignal": true; }; "tableBubbleMenu": { "alias": "tableBubbleMenu"; "required": false; "isSignal": true; }; "showCellBubbleMenu": { "alias": "showCellBubbleMenu"; "required": false; "isSignal": true; }; "cellBubbleMenu": { "alias": "cellBubbleMenu"; "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; }; "editorId": { "alias": "editorId"; "required": false; "isSignal": true; }; }, { "contentChange": "contentChange"; "editorCreated": "editorCreated"; "editorUpdate": "editorUpdate"; "editorFocus": "editorFocus"; "editorBlur": "editorBlur"; "editableChange": "editableChange"; }, never, never, true, [{ directive: typeof i1.AteNoopValueAccessorDirective; inputs: {}; outputs: {}; }]>;
 }

package/lib/models/ate-editor-ref.d.ts

@@ -0,0 +1,73 @@
+import { Signal } from "@angular/core";
+import { Editor, JSONContent } from "@tiptap/core";
+import { AteEditorCommandsService } from "../services/ate-editor-commands.service";
+import { AteEditorStateSnapshot } from "./ate-editor-state.model";
+import { AteImageUploadOptions } from "./ate-image.model";
+import { AteExportFormat, AteExportOptions } from "../services/ate-export.service";
+/**
+ * A wrapper class that holds a reference to a registered editor component.
+ * It provides direct, type-safe facade methods to interact with the editor
+ * and execute formatting/utility commands without needing to manage the raw
+ * TipTap editor instance directly.
+ */
+export declare class AteEditorRef {
+    readonly id: string;
+    private readonly getEditorInstance;
+    readonly commandsService: AteEditorCommandsService;
+    constructor(id: string, getEditorInstance: () => Editor | null, commandsService: AteEditorCommandsService);
+    /** Get the raw TipTap Editor instance. */
+    get editor(): Editor | null;
+    /** Get the current editor state snapshot. */
+    get state(): AteEditorStateSnapshot;
+    /** Get the reactive editor state as a Signal. */
+    get stateSignal(): Signal<AteEditorStateSnapshot>;
+    /** Execute a generic command by name. */
+    execute(command: string, ...args: unknown[]): void;
+    toggleBold(): void;
+    toggleItalic(): void;
+    toggleStrike(): void;
+    toggleCode(): void;
+    toggleCodeBlock(): void;
+    toggleUnderline(): void;
+    toggleSuperscript(): void;
+    toggleSubscript(): void;
+    toggleHeading(level: 1 | 2 | 3): void;
+    toggleBulletList(): void;
+    toggleOrderedList(): void;
+    toggleBlockquote(): void;
+    setTextAlign(alignment: "left" | "center" | "right" | "justify"): void;
+    insertHorizontalRule(): void;
+    insertImage(options: AteImageUploadOptions): void;
+    uploadImage(file: File, options?: AteImageUploadOptions): void;
+    toggleHighlight(color: string): void;
+    undo(): void;
+    redo(): void;
+    insertTable(rows?: number, cols?: number): void;
+    addColumnBefore(): void;
+    addColumnAfter(): void;
+    deleteColumn(): void;
+    addRowBefore(): void;
+    addRowAfter(): void;
+    deleteRow(): void;
+    deleteTable(): void;
+    mergeCells(): void;
+    splitCell(): void;
+    toggleHeaderColumn(): void;
+    toggleHeaderRow(): void;
+    applyColor(color: string, selectionOnly?: boolean, closeMenu?: boolean): void;
+    applyHighlight(color: string, selectionOnly?: boolean, closeMenu?: boolean): void;
+    unsetColor(selectionOnly?: boolean): void;
+    unsetHighlight(selectionOnly?: boolean): void;
+    toggleLink(event?: Event): void;
+    unsetLink(): void;
+    toggleColorPicker(mode: "text" | "highlight", event: Event): void;
+    clearContent(): void;
+    setContent(content: string, emitUpdate?: boolean): void;
+    getContent(format: AteExportFormat): string;
+    getHTML(): string;
+    getJSON(): JSONContent | undefined;
+    getText(): string;
+    exportAs(format: AteExportFormat, method: "clipboard" | "download", options?: AteExportOptions): Promise<void>;
+    focus(): void;
+    blur(): void;
+}

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

@@ -1,4 +1,5 @@
 import { Editor } from "@tiptap/core";
+import { AteExportFormat, AteExportOptions } from "./ate-export.service";
 import { AteEditorStateSnapshot } from "../models/ate-editor-state.model";
 import { AteImageUploadHandler, AteImageUploadOptions } from "../models/ate-image.model";
 import * as i0 from "@angular/core";
@@ -6,6 +7,7 @@ export declare class AteEditorCommandsService {
     private imageService;
     private colorPickerSvc;
     private linkSvc;
+    private exportSvc;
     private readonly _editorState;
     /** Exposed editor state as a readonly signal */
     readonly editorState: import("@angular/core").Signal<AteEditorStateSnapshot>;
@@ -60,6 +62,18 @@ export declare class AteEditorCommandsService {
     toggleHeaderColumn(editor: Editor): void;
     toggleHeaderRow(editor: Editor): void;
     clearContent(editor: Editor): void;
+    /**
+     * Returns the editor content in the given format.
+     * @param format 'html' | 'markdown' | 'text'
+     */
+    getContent(editor: Editor, format: AteExportFormat): string;
+    /**
+     * Exports the editor content.
+     * @param format  'html' | 'markdown' | 'text'
+     * @param method  'clipboard' | 'download'
+     * @param options Optional filename for download
+     */
+    exportAs(editor: Editor, format: AteExportFormat, method: "clipboard" | "download", options?: AteExportOptions): Promise<void>;
     focus(editor: Editor): void;
     blur(editor: Editor): void;
     setContent(editor: Editor, content: string, emitUpdate?: boolean): void;

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

@@ -0,0 +1,36 @@
+import { Editor } from "@tiptap/core";
+import { AteEditorRef } from "../models/ate-editor-ref";
+import { AteEditorCommandsService } from "./ate-editor-commands.service";
+import * as i0 from "@angular/core";
+/**
+ * A root-level registry service to register, unregister, and manage active editor instances.
+ * This service is provided in 'root' and can be injected anywhere in the application.
+ */
+export declare class AteEditorRegistry {
+    private static counter;
+    private readonly _editors;
+    readonly editors: import("@angular/core").Signal<Map<string, AteEditorRef>>;
+    private readonly _activeEditorId;
+    readonly activeEditorId: import("@angular/core").Signal<string | null>;
+    readonly editorIds: import("@angular/core").Signal<string[]>;
+    readonly activeEditor: import("@angular/core").Signal<AteEditorRef | null>;
+    /**
+     * Register an editor instance.
+     * Returns the final registered ID.
+     */
+    register(id: string | undefined, getEditor: () => Editor | null, commandsService: AteEditorCommandsService): string;
+    /**
+     * Unregister an editor instance by ID.
+     */
+    unregister(id: string): void;
+    /**
+     * Mark an editor as active (usually on focus).
+     */
+    setActive(id: string): void;
+    /**
+     * Retrieve an editor reference by ID, or the active editor if ID is not specified.
+     */
+    get(id?: string): AteEditorRef | undefined;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AteEditorRegistry, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<AteEditorRegistry>;
+}

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

@@ -0,0 +1,27 @@
+import { Editor } from "@tiptap/core";
+import * as i0 from "@angular/core";
+/** Supported export formats */
+export type AteExportFormat = "html" | "markdown" | "text";
+/** Export delivery method */
+export type AteExportMethod = "clipboard" | "download";
+/** Options for file download */
+export interface AteExportOptions {
+    /** Custom filename (without extension). Defaults to "document". */
+    filename?: string;
+}
+export declare class AteExportService {
+    /** Returns the editor content as HTML string. */
+    getHtml(editor: Editor): string;
+    /** Returns the editor content as plain text. */
+    getText(editor: Editor): string;
+    /** Returns the editor content converted to Markdown. */
+    getMarkdown(editor: Editor): string;
+    /** Returns the editor content in the specified format. */
+    getContent(editor: Editor, format: AteExportFormat): string;
+    /** Copies the editor content to the clipboard. */
+    exportToClipboard(editor: Editor, format: AteExportFormat): Promise<void>;
+    /** Downloads the editor content as a file. */
+    exportToFile(editor: Editor, format: AteExportFormat, options?: AteExportOptions): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AteExportService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<AteExportService>;
+}

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

@@ -172,6 +172,19 @@ export interface AteTranslations {
         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;
@@ -352,6 +365,19 @@ export declare class AteI18nService {
         error: string;
         success: string;
     }>;
+    readonly export: import("@angular/core").Signal<{
+        export: string;
+        html: string;
+        markdown: string;
+        text: string;
+        copyHtml: string;
+        copyMarkdown: string;
+        copyText: string;
+        downloadHtml: string;
+        downloadMarkdown: string;
+        downloadText: string;
+        copiedSuccess: string;
+    }>;
     constructor();
     setLocale(locale: SupportedLocale): void;
     autoDetectLocale(): void;

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

@@ -0,0 +1,4 @@
+/**
+ * HTML to Markdown converter utility (no external dependencies).
+ */
+export declare function htmlToMarkdown(html: string): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flogeez/angular-tiptap-editor",
-  "version": "3.1.4",
+  "version": "3.2.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

@@ -7,6 +7,9 @@ export * from "./lib/services/ate-editor-commands.service";
 export * from "./lib/services/ate-image.service";
 export * from "./lib/services/ate-color-picker.service";
 export * from "./lib/services/ate-link.service";
+export * from "./lib/services/ate-export.service";
+export * from "./lib/services/ate-editor-registry.service";
+export * from "./lib/models/ate-editor-ref";
 export * from "./lib/models/ate-editor-state.model";
 export * from "./lib/extensions/calculators/ate-discovery.calculator";
 export * from "./lib/extensions/calculators/ate-image.calculator";