@flogeez/angular-tiptap-editor 2.2.3 → 2.3.0

package/CHANGELOG.md

@@ -5,6 +5,16 @@ All notable changes to `@flogeez/angular-tiptap-editor` will be documented in th
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html), with the exception that the major version is specifically aligned with the major version of [Tiptap](https://tiptap.dev).
 
+## [2.3.0] - 2026-01-28
+
+### Added
+
+- **Advanced Angular Component Engine**: A powerful, unified engine to embed any Angular component directly into the editor as a custom TipTap node.
+  - **Universal Integration**: Seamlessly register both standard library components and TipTap-aware interactive components.
+  - **Modern Reactive Support**: Full out-of-the-box compatibility with Angular 18+ Signal-based `input()` and `output()`.
+  - **Editable Content Zones**: Turn any part of your Angular component into a nested, editable rich-text area.
+  - **Robustness**: Build-in protection against naming collisions and reserved TipTap nodes.
+
 ## [2.2.3] - 2026-01-27
 
 ### Added

package/fesm2022/flogeez-angular-tiptap-editor.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, output, ChangeDetectionStrategy, Component, signal, computed, Injectable, inject, viewChild, effect, Directive, DestroyRef, untracked } from '@angular/core';
+import { input, output, ChangeDetectionStrategy, Component, signal, computed, Injectable, inject, viewChild, effect, Directive, DestroyRef, untracked, ApplicationRef, EnvironmentInjector, createComponent } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { Node as Node$1, nodeInputRule, mergeAttributes, Extension, getAttributes, Editor } from '@tiptap/core';
 import StarterKit from '@tiptap/starter-kit';
@@ -20,7 +20,7 @@ import Table from '@tiptap/extension-table';
 import TableRow from '@tiptap/extension-table-row';
 import TableCell from '@tiptap/extension-table-cell';
 import TableHeader from '@tiptap/extension-table-header';
-import { isObservable, firstValueFrom, concat, defer, of, tap } from 'rxjs';
+import { isObservable, firstValueFrom, concat, defer, of, tap, Subscription } from 'rxjs';
 import { CommonModule } from '@angular/common';
 import tippy, { sticky } from 'tippy.js';
 import * as i1 from '@angular/forms';
@@ -6053,6 +6053,23 @@ class AngularTiptapEditorComponent {
                 }
             }
         });
+        // Effect to re-initialize editor when extensions or options change
+        effect(() => {
+            // Monitor extensions and options
+            this.tiptapExtensions();
+            this.tiptapOptions();
+            untracked(() => {
+                // Only if already initialized (post AfterViewInit)
+                if (this.editorFullyInitialized()) {
+                    const currentEditor = this.editor();
+                    if (currentEditor) {
+                        currentEditor.destroy();
+                        this._editorFullyInitialized.set(false);
+                        this.initEditor();
+                    }
+                }
+            });
+        });
     }
     ngAfterViewInit() {
         // La vue est déjà complètement initialisée dans ngAfterViewInit
@@ -6674,6 +6691,403 @@ const ATE_TABLE_BUBBLE_MENU_KEYS = [
  */
 const ATE_CELL_BUBBLE_MENU_KEYS = ["mergeCells", "splitCell"];
 
+/**
+ * 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 });
+ *   }
+ * }
+ * ```
+ */
+class AteAngularNodeView {
+    /**
+     * Internal method to initialize the component with NodeView props.
+     * This is called by the AngularNodeViewRenderer.
+     *
+     * @internal
+     */
+    _initNodeView(props) {
+        // Create signals from the props
+        const editorSignal = signal(props.editor, ...(ngDevMode ? [{ debugName: "editorSignal" }] : []));
+        const nodeSignal = signal(props.node, ...(ngDevMode ? [{ debugName: "nodeSignal" }] : []));
+        const decorationsSignal = signal(props.decorations, ...(ngDevMode ? [{ debugName: "decorationsSignal" }] : []));
+        const selectedSignal = signal(props.selected, ...(ngDevMode ? [{ debugName: "selectedSignal" }] : []));
+        const extensionSignal = signal(props.extension, ...(ngDevMode ? [{ debugName: "extensionSignal" }] : []));
+        // Assign to the component
+        this.editor = editorSignal.asReadonly();
+        this.node = nodeSignal.asReadonly();
+        this.decorations = decorationsSignal.asReadonly();
+        this.selected = selectedSignal.asReadonly();
+        this.extension = extensionSignal.asReadonly();
+        this.getPos = props.getPos;
+        this.updateAttributes = props.updateAttributes;
+        this.deleteNode = props.deleteNode;
+        // Store writable signals for updates
+        this._writableSignals = {
+            node: nodeSignal,
+            decorations: decorationsSignal,
+            selected: selectedSignal,
+        };
+    }
+    /**
+     * Internal method to update the component when the node changes.
+     * This is called by the AngularNodeViewRenderer.
+     *
+     * @internal
+     */
+    _updateNodeView(node, decorations) {
+        if (this._writableSignals) {
+            this._writableSignals.node.set(node);
+            this._writableSignals.decorations.set(decorations);
+        }
+    }
+    /**
+     * Internal method to update the selection state.
+     * This is called by the AngularNodeViewRenderer.
+     *
+     * @internal
+     */
+    _selectNodeView() {
+        if (this._writableSignals) {
+            this._writableSignals.selected.set(true);
+        }
+    }
+    /**
+     * Internal method to update the deselection state.
+     * This is called by the AngularNodeViewRenderer.
+     *
+     * @internal
+     */
+    _deselectNodeView() {
+        if (this._writableSignals) {
+            this._writableSignals.selected.set(false);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AteAngularNodeView, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: AteAngularNodeView, isStandalone: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AteAngularNodeView, decorators: [{
+            type: Directive
+        }] });
+
+/**
+ * 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
+ */
+function AteNodeViewRenderer(component, options) {
+    return props => {
+        const { node, view: _view, getPos, decorations, editor, extension } = props;
+        const { injector, inputs = {}, wrapperTag = "div", wrapperClass, editableContent = false, contentSelector, onOutput, ignoreMutation = true, } = options;
+        const dom = document.createElement(wrapperTag);
+        if (wrapperClass) {
+            dom.className = wrapperClass;
+        }
+        const applicationRef = injector.get(ApplicationRef);
+        const environmentInjector = injector.get(EnvironmentInjector);
+        // 1. Setup Content Projection (ng-content)
+        let initialNodes = [];
+        let contentDOM = null;
+        if (editableContent && !contentSelector) {
+            contentDOM = document.createElement("div");
+            contentDOM.setAttribute("data-node-view-content", "");
+            initialNodes = [[contentDOM]];
+        }
+        // 2. Create the Angular Component
+        const componentRef = createComponent(component, {
+            environmentInjector,
+            elementInjector: injector,
+            projectableNodes: initialNodes,
+        });
+        const instance = componentRef.instance;
+        const subscriptions = [];
+        // 3. Initialize TipTap-Aware instances
+        if (instance instanceof AteAngularNodeView) {
+            instance._initNodeView({
+                editor,
+                node,
+                decorations,
+                selected: false,
+                extension,
+                getPos,
+                updateAttributes: attrs => editor.commands.updateAttributes(node.type.name, attrs),
+                deleteNode: () => {
+                    const pos = getPos();
+                    if (pos !== undefined) {
+                        editor.commands.deleteRange({ from: pos, to: pos + node.nodeSize });
+                    }
+                },
+            });
+        }
+        // 4. Synchronize Inputs (Handles standard @Input and Signal-based inputs)
+        const syncInputs = (nodeToSync) => {
+            // Combine base inputs from options with dynamic node attributes
+            const mergedInputs = { ...inputs, ...nodeToSync.attrs };
+            Object.entries(mergedInputs).forEach(([key, value]) => {
+                if (key !== "id" && value !== null && value !== undefined) {
+                    try {
+                        componentRef.setInput(key, value);
+                    }
+                    catch {
+                        // Silently ignore inputs that don't exist on the component
+                    }
+                }
+            });
+        };
+        syncInputs(node);
+        // 5. Setup Outputs (Handles EventEmitter and OutputRef)
+        if (onOutput) {
+            Object.entries(instance).forEach(([key, potentialOutput]) => {
+                if (potentialOutput &&
+                    typeof potentialOutput
+                        .subscribe === "function") {
+                    const sub = potentialOutput.subscribe((value) => {
+                        onOutput(key, value);
+                    });
+                    if (sub instanceof Subscription) {
+                        subscriptions.push(sub);
+                    }
+                }
+            });
+        }
+        // 6. Attach to DOM and ApplicationRef
+        applicationRef.attachView(componentRef.hostView);
+        const componentElement = componentRef.location.nativeElement;
+        // Target specific element for content if selector provided
+        if (editableContent && contentSelector) {
+            contentDOM = componentElement.querySelector(contentSelector);
+        }
+        dom.appendChild(componentElement);
+        // Initial detection to ensure the component is rendered
+        componentRef.changeDetectorRef.detectChanges();
+        // 7. Return the TipTap NodeView Interface
+        return {
+            dom,
+            contentDOM,
+            update: (updatedNode, updatedDecorations) => {
+                if (updatedNode.type !== node.type) {
+                    return false;
+                }
+                // Update Aware component signals
+                if (instance instanceof AteAngularNodeView) {
+                    instance._updateNodeView(updatedNode, updatedDecorations);
+                }
+                // Update inputs
+                syncInputs(updatedNode);
+                // Notify and Detect changes
+                componentRef.changeDetectorRef.detectChanges();
+                if (options.onUpdate) {
+                    options.onUpdate(updatedNode);
+                }
+                return true;
+            },
+            selectNode: () => {
+                if (instance instanceof AteAngularNodeView) {
+                    instance._selectNodeView();
+                }
+                dom.classList.add("ProseMirror-selectednode");
+            },
+            deselectNode: () => {
+                if (instance instanceof AteAngularNodeView) {
+                    instance._deselectNodeView();
+                }
+                dom.classList.remove("ProseMirror-selectednode");
+            },
+            destroy: () => {
+                if (options.onDestroy) {
+                    options.onDestroy();
+                }
+                subscriptions.forEach(s => s.unsubscribe());
+                applicationRef.detachView(componentRef.hostView);
+                componentRef.destroy();
+            },
+            stopEvent: event => {
+                const target = event.target;
+                const isEditable = target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable;
+                return isEditable;
+            },
+            ignoreMutation: mutation => {
+                if (typeof ignoreMutation === "function") {
+                    return ignoreMutation(mutation);
+                }
+                return ignoreMutation;
+            },
+        };
+    };
+}
+
+const RESERVED_NAMES = [
+    "doc",
+    "paragraph",
+    "text",
+    "hardBreak",
+    "bulletList",
+    "orderedList",
+    "listItem",
+    "blockquote",
+    "codeBlock",
+    "heading",
+    "horizontalRule",
+];
+/**
+ * Derives the TipTap node name and HTML tag from a component class.
+ */
+function deriveMetadata(component, customName) {
+    let nodeName = customName;
+    if (!nodeName) {
+        nodeName = component.name
+            .replace(/Component$/, "")
+            .replace(/Node$/, "")
+            .replace(/^([A-Z])/, m => m.toLowerCase());
+        console.warn(`[ATE] Auto-deriving node name '${nodeName}' for component ${component.name}. ` +
+            `Provide an explicit 'name' in options to avoid potential naming collisions.`);
+    }
+    if (RESERVED_NAMES.includes(nodeName)) {
+        throw new Error(`[ATE] The name '${nodeName}' is a reserved TipTap node name. ` +
+            `Please provide a unique name for your custom component.`);
+    }
+    const tag = nodeName.toLowerCase().replace(/([A-Z])/g, "-$1");
+    return { nodeName, tag };
+}
+/**
+ * Creates TipTap attributes from component inputs (Standard Mode).
+ */
+function createStandardAttributes(defaultInputs = {}) {
+    const tiptapAttributes = {};
+    Object.entries(defaultInputs).forEach(([key, defaultValue]) => {
+        tiptapAttributes[key] = {
+            default: defaultValue,
+            parseHTML: (element) => {
+                const attr = element.getAttribute(`data-${key}`);
+                if (attr === null) {
+                    return defaultValue;
+                }
+                try {
+                    return JSON.parse(attr);
+                }
+                catch {
+                    return attr;
+                }
+            },
+            renderHTML: (attrs) => {
+                const value = attrs[key];
+                if (value === undefined || value === null) {
+                    return {};
+                }
+                const serialized = typeof value === "object" ? JSON.stringify(value) : String(value);
+                return { [`data-${key}`]: serialized };
+            },
+        };
+    });
+    return tiptapAttributes;
+}
+/**
+ * Factory to transform an Angular component into a TipTap Node extension.
+ * Supports both "TipTap-Aware" and "Standard" modes.
+ *
+ * @internal
+ */
+function createAngularComponentExtension(injector, options) {
+    const { component, name: customName, attributes, defaultInputs, contentSelector, contentMode = "block", editableContent = false, group = "block", draggable = true, ignoreMutation = true, onOutput, HTMLAttributes = {}, parseHTML: customParseHTML, renderHTML: customRenderHTML, } = options;
+    const { nodeName, tag } = deriveMetadata(component, customName);
+    const isTipTapAware = Object.prototype.isPrototypeOf.call(AteAngularNodeView, component);
+    const atom = !editableContent;
+    // 1. Prepare Attributes
+    const tiptapAttributes = isTipTapAware
+        ? attributes || {}
+        : createStandardAttributes(defaultInputs);
+    // 2. Create Node Extension
+    return Node$1.create({
+        name: nodeName,
+        group,
+        inline: group === "inline",
+        atom,
+        draggable,
+        content: editableContent ? (contentMode === "inline" ? "inline*" : "block*") : undefined,
+        addAttributes() {
+            return tiptapAttributes;
+        },
+        parseHTML() {
+            if (customParseHTML) {
+                return customParseHTML.call(this);
+            }
+            return [{ tag }, { tag: `div[data-component="${nodeName}"]` }];
+        },
+        renderHTML({ node, HTMLAttributes: attrs }) {
+            if (customRenderHTML) {
+                return customRenderHTML.call(this, { node, HTMLAttributes: attrs });
+            }
+            return [tag, mergeAttributes(HTMLAttributes, attrs, { "data-component": nodeName })];
+        },
+        addNodeView() {
+            return AteNodeViewRenderer(component, {
+                injector,
+                inputs: defaultInputs,
+                wrapperTag: group === "inline" ? "span" : "div",
+                wrapperClass: isTipTapAware
+                    ? `ate-node-${nodeName}`
+                    : `embedded-component embedded-${nodeName}`,
+                atom,
+                editableContent,
+                contentSelector,
+                contentMode,
+                onOutput,
+                ignoreMutation,
+            });
+        },
+    });
+}
+
+/**
+ * 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' }
+ * });
+ * ```
+ */
+function registerAngularComponent(injector, options) {
+    return createAngularComponentExtension(injector, options);
+}
+
 /*
  * Public API Surface of tiptap-editor
  */
@@ -6711,5 +7125,5 @@ const DEFAULT_CELL_MENU_CONFIG = ATE_DEFAULT_CELL_MENU_CONFIG;
  * Generated bundle index. Do not edit.
  */
 
-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 { 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 };
 //# sourceMappingURL=flogeez-angular-tiptap-editor.mjs.map