Angular Tiptap Editor

[!IMPORTANT] ^v3.0.0 uses Tiptap v3. If you need to stay on Tiptap v2, please use version ^2.4.0.

A modern, customizable Angular rich-text editor, built with Tiptap.

High-performance Angular WYSIWYG editor. Built on top of Tiptap and powered by a native Signals architecture, it features a polished, professional design that feels, I think, clean and modern out of the box. Yet, I've worked to keep it fully customizable: you can easily configure the editor, tweak the UI, or even embed your own Angular components as interactive nodes.

✨ Features

• ⚡ Signal-Based: Native performance with ChangeDetectionStrategy.OnPush.

• 🧩 Angular Nodes: Embed any Angular component as an interactive editor node.

• ⌨️ UX First: Slash commands (/) and context-aware bubble menus (Notion-like).

• 📊 Table Power: Advanced management with cell selection and merging.

• 🖼️ Pro Media: Image resizing, auto-compression, and custom uploaders.

• 🌍 Built-in i18n: Support for English and French out of the box.

• 📎 Office-Ready: Clean pasting from Word and Excel.

• 🎨 Highly Customizable: Easily configure toolbars, bubble menus, and slash command items.

• 🛠️ Extensible: Easily add custom Tiptap extensions and reactive state calculators.

📦 Installation

npm install @flogeez/angular-tiptap-editor

Add the styles to your angular.json:

{
  "styles": [
    ...
    "node_modules/@fontsource/material-symbols-outlined/index.css",
    "node_modules/@flogeez/angular-tiptap-editor/styles/index.css",
    ...
  ]
}

🚀 Quick Start

1. Global Setup

Initialize the library in app.config.ts:

export const appConfig: ApplicationConfig = {
  providers: [provideAteEditor()],
};

2. Basic Usage

import { AngularTiptapEditorComponent } from "@flogeez/angular-tiptap-editor";

@Component({
  selector: "app-example",
  standalone: true,
  imports: [AngularTiptapEditorComponent],
  template: `<angular-tiptap-editor
    [content]="content"
    (contentChange)="onContentChange($event)" />`,
})
export class ExampleComponent {
  content = "<p>Hello World!</p>";
  onContentChange(html: string) {
    console.log(html);
  }
}

3. Reactive Forms Integration

import { FormControl, ReactiveFormsModule } from "@angular/forms";

@Component({
  standalone: true,
  imports: [AngularTiptapEditorComponent, ReactiveFormsModule],
  template: ` <angular-tiptap-editor [formControl]="contentControl" /> `,
})
export class FormComponent {
  contentControl = new FormControl("<p>Initial content</p>");
}

⚙️ Configuration

The editor is fully configurable via the [config] input:

editorConfig: AteEditorConfig = {
  locale: "fr",
  placeholder: "Commencez à rédiger...",
  toolbar: { ...ATE_DEFAULT_TOOLBAR_CONFIG, highlight: true },
  slashCommands: { heading1: true, table: true },
};

| Input | Type | Description | | ------------ | ----------------- | ---------------------------------- | | [config] | AteEditorConfig | Global config object (recommended) | | [content] | string | Initial HTML content | | [editable] | boolean | Read-only toggle | | [disabled] | boolean | Disabled toggle |

See the API reference for the full list of inputs and configuration options.

🧩 Advanced Features

For deeper integration patterns and complex use cases, check our Advanced Usage Guide.

Custom Angular Nodes

Embed any Angular component as an editor node (e.g., a dynamic counter, a complex widget, IA block, etc.):

angularNodes: [
  {
    component: MyCounterComponent,
    name: "counter",
    attributes: { count: { default: 0 } },
    group: "block",
  },
];

Image Upload Handler

Avoid base64 by providing a custom uploader (S3, Cloudinary, etc.):

uploadHandler: AteImageUploadHandler = ctx => {
  return this.http.post<any>("/api/upload", ctx.file).pipe(map(res => ({ src: res.url })));
};

🌍 i18n & 🎨 Styling

• Languages: Detects browser language automatically. Extend with AteI18nService.addTranslations().
• Styling: Customize via CSS variables (e.g., --ate-primary, --ate-border-radius, and much more).
• Dark Mode: Works natively by adding .dark or [data-theme="dark"].

🔧 Development

npm install
npm run build:lib  # Build library
npm start          # Run demo

📝 License

MIT License - see LICENSE file for details.

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

🔗 Links

• 📖 Tiptap Documentation
• 📦 NPM Package
• 📖 Live Demo
• 🐛 Report Issues / Feature Requests

Made with ❤️ by FloGeez