ngx-tiptap

To allow users to edit content inside an Angular-based NodeView, use the TiptapNodeViewContentDirective. Apply the tiptapNodeViewContent directive to an element within your component template.

<!-- editable.component.html -->
<div class="angular-component-with-content">
  <p tiptapNodeViewContent></p>
</div>

Install the package using npm or yarn to get Angular bindings for Tiptap 3.

npm i ngx-tiptap

# or

yarn add ngx-tiptap

To use the editor, import TiptapEditorDirective into your standalone component. You must manually create an instance of the Tiptap Editor and ensure you call editor.destroy() when the component is destroyed to prevent memory leaks. Use [(ngModel)] for two-way data binding.

import { Component, OnDestroy } from '@angular/core';
import { Editor } from '@tiptap/core';
import StarterKit from '@tiptap/starter-kit';
import { TiptapEditorDirective } from 'ngx-tiptap';

@Component({
  selector: 'app-root',
  template: `
    <tiptap-editor [editor]="editor" [(ngModel)]="value"></tiptap-editor>
  ',
  imports: [TiptapEditorDirective],
})
export class AppComponent implements OnDestroy {
  editor = new Editor({
    extensions: [StarterKit],
  });

  value = '<p>Hello, Tiptap!</p>';

  ngOnDestroy(): void {
    this.editor.destroy();
  }
}

To enable dragging for your Angular NodeViews:

1. Set draggable: true in your Tiptap extension configuration.
2. Import TiptapDraggableDirective into your component.
3. Apply the tiptapDraggable directive to the specific DOM element inside your component that should act as the drag handle.

The outputFormat option determines the format of the content emitted by the editor. It defaults to html.

Available values:

• html (default)
• json

The TiptapFloatingMenuDirective allows you to render a contextual menu that appears near a text selection. You must import the directive and provide the editor instance.

<tiptap-editor [editor]="editor"></tiptap-editor>
<tiptap-floating-menu [editor]="editor">
  <!-- Anything that should be rendered inside floating menu -->
</tiptap-floating-menu>

The TiptapBubbleMenuDirective allows you to render a contextual menu near a text selection, typically used for applying marks (like bold or italic) to selected text. You must import the directive and provide the editor instance.

<tiptap-editor [editor]="editor"></tiptap-editor>
<tiptap-bubble-menu [editor]="editor">
  <!-- Anything that should be rendered inside bubble menu -->
</tiptap-bubble-menu>

Use AngularRenderer to manually manage the lifecycle of an Angular component within the Tiptap environment.

import { AngularRenderer } from 'ngx-tiptap';

const renderer = new AngularRenderer(Component, injector, props);

renderer.instance; // Access the component instance to update @Input properties
renderer.dom;      // Access the HTMLElement for the component
renderer.destroy(); // Destroy the component and its instance

The TiptapEditorDirective provides an outputFormat input to control whether the content emitted to the Angular form control is HTML or JSON.

• Set outputFormat to 'html' (default) to receive the editor content as an HTML string.
• Set outputFormat to 'json' to receive the editor content as a JSON object (Tiptap Content format).

<div tiptap [editor]="myEditor" [outputFormat]="'json'"></div>

The attrs option in AngularNodeViewRenderer allows you to dynamically set attributes on the host element of your Angular component. This is useful for syncing Tiptap node attributes (like id, class, or custom data attributes) to the actual DOM element rendered by Angular.

You can provide attrs as a static object or as a function for dynamic calculation.

Static attributes:

attrs: { class: 'my-custom-node' }

Dynamic attributes (using node properties):

attrs: ({ node, HTMLAttributes }) => ({
  'data-id': node.attrs.id,
  ...HTMLAttributes
})

AngularNodeViewRenderer(MyComponent, {
  injector: myInjector,
  attrs: ({ node, HTMLAttributes }) => ({
    'data-custom-attr': node.attrs.someValue,
    ...HTMLAttributes
  })
});