@flogeez/angular-tiptap-editor 2.2.2 → 2.3.0

package/index.d.ts

@@ -1,9 +1,11 @@
 import * as _flogeez_angular_tiptap_editor from '@flogeez/angular-tiptap-editor';
-import { Editor, Node, Mark, Extension, EditorOptions, JSONContent } from '@tiptap/core';
+import { Editor, Node as Node$1, Mark, Extension, EditorOptions, JSONContent, NodeConfig } from '@tiptap/core';
 import * as _angular_core from '@angular/core';
-import { AfterViewInit, OnDestroy, ElementRef } from '@angular/core';
+import { AfterViewInit, OnDestroy, ElementRef, Signal, Injector, Type } from '@angular/core';
 import { Observable } from 'rxjs';
 import { ControlValueAccessor } from '@angular/forms';
+import { Node as Node$2 } from '@tiptap/pm/model';
+import { Decoration, EditorView, NodeView } from '@tiptap/pm/view';
 
 type SupportedLocale = "en" | "fr" | (string & {});
 interface AteTranslations {
@@ -891,7 +893,7 @@ declare class AngularTiptapEditorComponent implements AfterViewInit, OnDestroy {
     floatingToolbar: _angular_core.InputSignal<boolean>;
     showEditToggle: _angular_core.InputSignal<boolean>;
     spellcheck: _angular_core.InputSignal<boolean>;
-    tiptapExtensions: _angular_core.InputSignal<(Node<any, any> | Mark<any, any> | Extension<any, any>)[]>;
+    tiptapExtensions: _angular_core.InputSignal<(Node$1<any, any> | Mark<any, any> | Extension<any, any>)[]>;
     tiptapOptions: _angular_core.InputSignal<Partial<EditorOptions>>;
     showBubbleMenu: _angular_core.InputSignal<boolean>;
     bubbleMenu: _angular_core.InputSignal<Partial<AteBubbleMenuConfig>>;
@@ -1228,6 +1230,305 @@ declare const ATE_DEFAULT_IMAGE_BUBBLE_MENU_CONFIG: AteImageBubbleMenuConfig;
 declare const ATE_DEFAULT_TABLE_MENU_CONFIG: AteTableBubbleMenuConfig;
 declare const ATE_DEFAULT_CELL_MENU_CONFIG: AteCellBubbleMenuConfig;
 
+/**
+ * Props that are injected into Angular NodeView components
+ */
+interface AteAngularNodeViewProps {
+    editor: Editor;
+    node: Node$2;
+    decorations: readonly Decoration[];
+    selected: boolean;
+    extension: unknown;
+    getPos: () => number | undefined;
+    updateAttributes: (attrs: Record<string, unknown>) => void;
+    deleteNode: () => void;
+}
+/**
+ * Base abstract class for Angular components used as TipTap NodeViews.
+ *
+ * Extend this class in your custom components to get access to the TipTap node properties.
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   selector: 'app-counter',
+ *   template: `
+ *     <div>
+ *       <button (click)="increment()">Count: {{ node().attrs['count'] }}</button>
+ *     </div>
+ *   `
+ * })
+ * export class CounterComponent extends AteAngularNodeView {
+ *   increment() {
+ *     const count = this.node().attrs['count'] || 0;
+ *     this.updateAttributes({ count: count + 1 });
+ *   }
+ * }
+ * ```
+ */
+declare abstract class AteAngularNodeView {
+    /**
+     * The TipTap editor instance
+     */
+    editor: Signal<Editor>;
+    /**
+     * The ProseMirror node
+     */
+    node: Signal<Node$2>;
+    /**
+     * Decorations applied to this node
+     */
+    decorations: Signal<readonly Decoration[]>;
+    /**
+     * Whether the node is currently selected
+     */
+    selected: Signal<boolean>;
+    /**
+     * The extension instance that created this node
+     */
+    extension: Signal<unknown>;
+    /**
+     * Function to get the current position of this node in the document
+     */
+    getPos: () => number | undefined;
+    /**
+     * Update the attributes of this node
+     *
+     * @param attrs - Partial attributes to update
+     *
+     * @example
+     * ```typescript
+     * this.updateAttributes({ count: 5, color: 'blue' });
+     * ```
+     */
+    updateAttributes: (attrs: Record<string, unknown>) => void;
+    /**
+     * Delete this node from the document
+     */
+    deleteNode: () => void;
+    /** @internal */
+    private _writableSignals?;
+    /**
+     * Internal method to initialize the component with NodeView props.
+     * This is called by the AngularNodeViewRenderer.
+     *
+     * @internal
+     */
+    _initNodeView(props: AteAngularNodeViewProps): void;
+    /**
+     * Internal method to update the component when the node changes.
+     * This is called by the AngularNodeViewRenderer.
+     *
+     * @internal
+     */
+    _updateNodeView(node: Node$2, decorations: readonly Decoration[]): void;
+    /**
+     * Internal method to update the selection state.
+     * This is called by the AngularNodeViewRenderer.
+     *
+     * @internal
+     */
+    _selectNodeView(): void;
+    /**
+     * Internal method to update the deselection state.
+     * This is called by the AngularNodeViewRenderer.
+     *
+     * @internal
+     */
+    _deselectNodeView(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AteAngularNodeView, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AteAngularNodeView, never, never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * Common options for rendering any Angular component as a TipTap NodeView
+ */
+interface AteComponentRenderOptions {
+    /**
+     * Angular injector to use for creating the component
+     */
+    injector: Injector;
+    /**
+     * Additional inputs to pass to the component
+     */
+    inputs?: Record<string, unknown>;
+    /**
+     * Custom wrapper element tag (default: 'div')
+     */
+    wrapperTag?: string;
+    /**
+     * CSS classes to add to the wrapper element
+     */
+    wrapperClass?: string;
+    /**
+     * Whether the node should be treated as an atom (not editable)
+     * Default: true
+     */
+    atom?: boolean;
+    /**
+     * Enables editable content for <ng-content>.
+     * If true, TipTap will treat the component's content as editable.
+     * @default false
+     */
+    editableContent?: boolean;
+    /**
+     * Optional CSS selector to target an internal element of the component as the editable area.
+     */
+    contentSelector?: string;
+    /**
+     * Type of content allowed in the editable area.
+     */
+    contentMode?: "block" | "inline";
+    /**
+     * Whether to ignore mutations in the component's DOM.
+     * If true, TipTap won't try to sync changes from the component's DOM back to the editor state.
+     * @default true
+     */
+    ignoreMutation?: boolean | ((mutation: MutationRecord | {
+        type: "selection";
+        target: Node;
+    }) => boolean);
+    /**
+     * Callback called when an Output event is emitted by the component.
+     */
+    onOutput?: (outputName: string, value: unknown) => void;
+    /**
+     * Callback called when the node is updated.
+     */
+    onUpdate?: (node: Node$2) => void;
+    /**
+     * Callback called when the component is destroyed.
+     */
+    onDestroy?: () => void;
+}
+/**
+ * Unified configuration for registering ANY Angular component.
+ */
+interface RegisterAngularComponentOptions<T = unknown> {
+    /**
+     * The Angular component to register
+     */
+    component: Type<T>;
+    /**
+     * Unique name for the TipTap node
+     */
+    name?: string;
+    /**
+     * Default inputs (for standard components)
+     */
+    defaultInputs?: Record<string, unknown>;
+    /**
+     * TipTap attributes (for TipTap-aware components)
+     */
+    attributes?: Record<string, {
+        default?: unknown;
+        parseHTML?: (element: HTMLElement) => unknown;
+        renderHTML?: (attributes: Record<string, unknown>) => Record<string, unknown> | null;
+    }>;
+    /**
+     * CSS selector for the editable area inside the component
+     */
+    contentSelector?: string;
+    /**
+     * Content mode for the editable area
+     */
+    contentMode?: "block" | "inline";
+    /**
+     * Enable editable content via <ng-content> or contentSelector
+     * @default false
+     */
+    editableContent?: boolean;
+    /**
+     * Node group (block or inline)
+     * @default 'block'
+     */
+    group?: "block" | "inline";
+    /**
+     * Is the node draggable?
+     * @default true
+     */
+    draggable?: boolean;
+    /**
+     * Whether to ignore mutations in the component's DOM.
+     * @default true
+     */
+    ignoreMutation?: boolean | ((mutation: MutationRecord | {
+        type: "selection";
+        target: Node;
+    }) => boolean);
+    /**
+     * Custom HTML attributes for the wrapper
+     */
+    HTMLAttributes?: Record<string, unknown>;
+    /**
+     * Custom parseHTML rules
+     */
+    parseHTML?: NodeConfig["parseHTML"];
+    /**
+     * Custom renderHTML function
+     */
+    renderHTML?: NodeConfig["renderHTML"];
+    /**
+     * Callback called when an Output event is emitted by the component.
+     */
+    onOutput?: (outputName: string, value: unknown) => void;
+}
+
+/**
+ * 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
+ */
+declare function AteNodeViewRenderer<T>(component: Type<T>, options: AteComponentRenderOptions): (props: {
+    node: Node$2;
+    view: EditorView;
+    getPos: () => number | undefined;
+    decorations: readonly Decoration[];
+    editor: Editor;
+    extension: unknown;
+}) => NodeView;
+
+/**
+ * Factory to transform an Angular component into a TipTap Node extension.
+ * Supports both "TipTap-Aware" and "Standard" modes.
+ *
+ * @internal
+ */
+declare function createAngularComponentExtension<T = unknown>(injector: Injector, options: RegisterAngularComponentOptions<T>): Node$1;
+
+/**
+ * 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 injector - The Angular Injector (obtained via `inject(Injector)`)
+ * @param options - Configuration options for the component extension
+ * @returns A TipTap Node extension ready to be used
+ *
+ * @example
+ * ```typescript
+ * registerAngularComponent(injector, {
+ *   component: MyComponent,
+ *   name: 'myComponent',
+ *   defaultInputs: { color: 'blue' }
+ * });
+ * ```
+ */
+declare function registerAngularComponent<T = unknown>(injector: Injector, options: RegisterAngularComponentOptions<T>): Node$1;
+
 /** @deprecated Renamed to `ATE_INITIAL_EDITOR_STATE`. This alias will be removed in v3.0.0. */
 declare const INITIAL_EDITOR_STATE: AteEditorStateSnapshot;
 
@@ -1259,5 +1560,5 @@ declare const DEFAULT_TABLE_MENU_CONFIG: Partial<Record<"addColumnBefore" | "add
 /** @deprecated Renamed to `ATE_DEFAULT_CELL_MENU_CONFIG`. This alias will be removed in v3.0.0. */
 declare const DEFAULT_CELL_MENU_CONFIG: Partial<Record<"mergeCells" | "splitCell", boolean>>;
 
-export { ATE_BUBBLE_MENU_KEYS, ATE_CELL_BUBBLE_MENU_KEYS, ATE_DEFAULT_BUBBLE_MENU_CONFIG, ATE_DEFAULT_CELL_MENU_CONFIG, ATE_DEFAULT_IMAGE_BUBBLE_MENU_CONFIG, ATE_DEFAULT_SLASH_COMMANDS_CONFIG, ATE_DEFAULT_TABLE_MENU_CONFIG, ATE_DEFAULT_TOOLBAR_CONFIG, ATE_IMAGE_BUBBLE_MENU_KEYS, ATE_INITIAL_EDITOR_STATE, ATE_SLASH_COMMAND_KEYS, ATE_TABLE_BUBBLE_MENU_KEYS, ATE_TOOLBAR_KEYS, AngularTiptapEditorComponent, AteColorPickerService, AteDiscoveryCalculator, AteEditorCommandsService, AteI18nService, AteImageCalculator, AteImageService, AteLinkService, AteMarksCalculator, AteNoopValueAccessorDirective, AteSelectionCalculator, AteStructureCalculator, AteTableCalculator, AteColorPickerService as ColorPickerService, DEFAULT_BUBBLE_MENU_CONFIG, DEFAULT_CELL_MENU_CONFIG, DEFAULT_IMAGE_BUBBLE_MENU_CONFIG, DEFAULT_SLASH_COMMANDS_CONFIG, DEFAULT_TABLE_MENU_CONFIG, DEFAULT_TOOLBAR_CONFIG, DiscoveryCalculator, AteEditorCommandsService as EditorCommandsService, INITIAL_EDITOR_STATE, ImageCalculator, AteImageService as ImageService, AteLinkService as LinkService, MarksCalculator, SLASH_COMMAND_KEYS, SelectionCalculator, StructureCalculator, TableCalculator, AteI18nService as TiptapI18nService, createDefaultSlashCommands, filterSlashCommands };
-export type { AteBubbleMenuConfig, AteBubbleMenuKey, AteCellBubbleMenuConfig, AteCellBubbleMenuKey, AteColorEditMode, AteColorPickerSelection, AteCustomBubbleMenuItem, AteCustomSlashCommands, AteCustomToolbarItem, AteEditorConfig, AteEditorStateSnapshot, AteImageBubbleMenuConfig, AteImageBubbleMenuKey, AteImageData, AteImageUploadConfig, AteImageUploadContext, AteImageUploadHandler, AteImageUploadHandlerResult, AteImageUploadOptions, AteImageUploadResult, AteResizeOptions, AteSlashCommandItem, AteSlashCommandKey, AteSlashCommandsConfig, AteStateCalculator, AteTableBubbleMenuConfig, AteTableBubbleMenuKey, AteToolbarConfig, AteToolbarKey, AteTranslations, AteBubbleMenuConfig as BubbleMenuConfig, AteCellBubbleMenuConfig as CellBubbleMenuConfig, AteCustomSlashCommands as CustomSlashCommands, AteEditorConfig as EditorConfig, AteEditorStateSnapshot as EditorStateSnapshot, AteImageBubbleMenuConfig as ImageBubbleMenuConfig, AteImageData as ImageData, AteImageUploadHandler as ImageUploadHandler, AteImageUploadOptions as ImageUploadOptions, AteImageUploadResult as ImageUploadResult, AteResizeOptions as ResizeOptions, AteSlashCommandItem as SlashCommandItem, AteSlashCommandKey as SlashCommandKey, AteSlashCommandsConfig as SlashCommandsConfig, SupportedLocale, AteTableBubbleMenuConfig as TableBubbleMenuConfig, AteToolbarConfig as ToolbarConfig };
+export { ATE_BUBBLE_MENU_KEYS, ATE_CELL_BUBBLE_MENU_KEYS, ATE_DEFAULT_BUBBLE_MENU_CONFIG, ATE_DEFAULT_CELL_MENU_CONFIG, ATE_DEFAULT_IMAGE_BUBBLE_MENU_CONFIG, ATE_DEFAULT_SLASH_COMMANDS_CONFIG, ATE_DEFAULT_TABLE_MENU_CONFIG, ATE_DEFAULT_TOOLBAR_CONFIG, ATE_IMAGE_BUBBLE_MENU_KEYS, ATE_INITIAL_EDITOR_STATE, ATE_SLASH_COMMAND_KEYS, ATE_TABLE_BUBBLE_MENU_KEYS, ATE_TOOLBAR_KEYS, AngularTiptapEditorComponent, AteAngularNodeView, AteColorPickerService, AteDiscoveryCalculator, AteEditorCommandsService, AteI18nService, AteImageCalculator, AteImageService, AteLinkService, AteMarksCalculator, AteNodeViewRenderer, AteNoopValueAccessorDirective, AteSelectionCalculator, AteStructureCalculator, AteTableCalculator, AteColorPickerService as ColorPickerService, DEFAULT_BUBBLE_MENU_CONFIG, DEFAULT_CELL_MENU_CONFIG, DEFAULT_IMAGE_BUBBLE_MENU_CONFIG, DEFAULT_SLASH_COMMANDS_CONFIG, DEFAULT_TABLE_MENU_CONFIG, DEFAULT_TOOLBAR_CONFIG, DiscoveryCalculator, AteEditorCommandsService as EditorCommandsService, INITIAL_EDITOR_STATE, ImageCalculator, AteImageService as ImageService, AteLinkService as LinkService, MarksCalculator, SLASH_COMMAND_KEYS, SelectionCalculator, StructureCalculator, TableCalculator, AteI18nService as TiptapI18nService, createAngularComponentExtension, createDefaultSlashCommands, filterSlashCommands, registerAngularComponent };
+export type { AteAngularNodeViewProps, AteBubbleMenuConfig, AteBubbleMenuKey, AteCellBubbleMenuConfig, AteCellBubbleMenuKey, AteColorEditMode, AteColorPickerSelection, AteComponentRenderOptions, AteCustomBubbleMenuItem, AteCustomSlashCommands, AteCustomToolbarItem, AteEditorConfig, AteEditorStateSnapshot, AteImageBubbleMenuConfig, AteImageBubbleMenuKey, AteImageData, AteImageUploadConfig, AteImageUploadContext, AteImageUploadHandler, AteImageUploadHandlerResult, AteImageUploadOptions, AteImageUploadResult, AteResizeOptions, AteSlashCommandItem, AteSlashCommandKey, AteSlashCommandsConfig, AteStateCalculator, AteTableBubbleMenuConfig, AteTableBubbleMenuKey, AteToolbarConfig, AteToolbarKey, AteTranslations, AteBubbleMenuConfig as BubbleMenuConfig, AteCellBubbleMenuConfig as CellBubbleMenuConfig, AteCustomSlashCommands as CustomSlashCommands, AteEditorConfig as EditorConfig, AteEditorStateSnapshot as EditorStateSnapshot, AteImageBubbleMenuConfig as ImageBubbleMenuConfig, AteImageData as ImageData, AteImageUploadHandler as ImageUploadHandler, AteImageUploadOptions as ImageUploadOptions, AteImageUploadResult as ImageUploadResult, RegisterAngularComponentOptions, AteResizeOptions as ResizeOptions, AteSlashCommandItem as SlashCommandItem, AteSlashCommandKey as SlashCommandKey, AteSlashCommandsConfig as SlashCommandsConfig, SupportedLocale, AteTableBubbleMenuConfig as TableBubbleMenuConfig, AteToolbarConfig as ToolbarConfig };

package/package.json

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