@flogeez/angular-tiptap-editor 3.1.5 → 3.2.1

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

@@ -9,7 +9,7 @@ import { AteSlashCommandsConfig } from "../../config/ate-slash-commands.config";
 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 } from "../../models/ate-image.model";
+import { AteImageUploadHandler, AteImageUploadOptions, AteImageUploadResult } from "../../models/ate-image.model";
 import * as i0 from "@angular/core";
 import * as i1 from "../../directives/ate-noop-value-accessor.directive";
 /**
@@ -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<{
@@ -98,6 +103,7 @@ export declare class AngularTiptapEditorComponent implements AfterViewInit, OnDe
         event: FocusEvent;
     }>;
     editableChange: import("@angular/core").OutputEmitterRef<boolean>;
+    imageUploaded: import("@angular/core").OutputEmitterRef<AteImageUploadResult>;
     editorElement: import("@angular/core").Signal<ElementRef<any>>;
     hideBubbleMenus(): void;
     showBubbleMenus(): void;
@@ -171,6 +177,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 +247,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"; "imageUploaded": "imageUploaded"; }, 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,7 +1,7 @@
 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 { AteImageUploadHandler, AteImageUploadOptions, AteImageUploadResult } from "../models/ate-image.model";
 import * as i0 from "@angular/core";
 export declare class AteEditorCommandsService {
     private imageService;
@@ -19,6 +19,7 @@ export declare class AteEditorCommandsService {
     readonly isUploading: import("@angular/core").Signal<boolean>;
     readonly uploadProgress: import("@angular/core").Signal<number>;
     readonly uploadMessage: import("@angular/core").Signal<string>;
+    set onImageUploaded(callback: ((result: AteImageUploadResult) => void) | null);
     set uploadHandler(handler: AteImageUploadHandler | null);
     /** Update state (called by TiptapStateExtension) */
     updateState(state: AteEditorStateSnapshot): 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-image.service.d.ts

@@ -2,6 +2,7 @@ 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 {
+    onImageUploadedCallback?: (result: AteImageUploadResult) => void;
     /** Signals for image state */
     selectedImage: import("@angular/core").WritableSignal<AteImageData | null>;
     isImageSelected: import("@angular/core").Signal<boolean>;

package/package.json

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

@@ -8,6 +8,8 @@ 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";