Angular Tiptap Editor

A modern, customizable rich-text editor for Angular applications, built with Tiptap and featuring complete internationalization support.

🚀 Features

• Modern Angular: Built with Angular 18+ with Signals and modern patterns
• Rich Text Editing: Powered by Tiptap v3.3.0 with extensive formatting options
• Table Support: Full table management with bubble menus and cell selection
• Slash Commands: Intuitive slash commands for quick content insertion
• Internationalization: Full i18n support (English & French) with auto-detection
• Customizable: Highly configurable toolbar, bubble menus, and slash commands
• Image Support: Advanced image handling with resizing, compression, and bubble menus
• Height Control: Configurable editor height with scrolling
• Word/Character Count: Real-time word and character counting with proper pluralization
• Office Paste: Clean pasting from Microsoft Office applications
• TypeScript: Full TypeScript support with strict typing
• Accessibility: Built with accessibility best practices
• Service Architecture: Clean service-based architecture with EditorCommandsService

📦 Installation

npm install @flogeez/angular-tiptap-editor

CSS Styles

Add the required CSS to your angular.json file in the styles array:

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

🎯 Quick Start

1. Basic Usage

import { Component } from "@angular/core";
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 <strong>World</strong>!</p>";

  onContentChange(newContent: string) {
    this.content = newContent;
    console.log("Content updated:", newContent);
  }
}

2. With Custom Configuration

import { Component } from "@angular/core";
import {
  AngularTiptapEditorComponent,
  DEFAULT_TOOLBAR_CONFIG,
  DEFAULT_BUBBLE_MENU_CONFIG,
} from "@flogeez/angular-tiptap-editor";

@Component({
  selector: "app-advanced",
  standalone: true,
  imports: [AngularTiptapEditorComponent],
  template: `
    <angular-tiptap-editor
      [content]="content"
      [toolbar]="toolbarConfig"
      [bubbleMenu]="bubbleMenuConfig"
      [slashCommands]="slashCommandsConfig"
      [locale]="'en'"
      [height]="400"
      [showCharacterCount]="true"
      [showWordCount]="true"
      (contentChange)="onContentChange($event)"
    />
  `,
})
export class AdvancedComponent {
  content = "<h1>Welcome!</h1><p>Start editing...</p>";

  // Use default configurations as base
  toolbarConfig = {
    ...DEFAULT_TOOLBAR_CONFIG,
    clear: true, // Add clear button
  };

  bubbleMenuConfig = {
    ...DEFAULT_BUBBLE_MENU_CONFIG,
    table: true, // Enable table bubble menu
  };

  slashCommandsConfig = {
    commands: [], // Will be populated by the library
  };

  onContentChange(newContent: string) {
    this.content = newContent;
  }
}

3. With Form Integration

import { Component } from "@angular/core";
import { FormControl, ReactiveFormsModule } from "@angular/forms";
import { AngularTiptapEditorComponent } from "@flogeez/angular-tiptap-editor";

@Component({
  selector: "app-form",
  standalone: true,
  imports: [AngularTiptapEditorComponent, ReactiveFormsModule],
  template: `
    <form>
      <angular-tiptap-editor
        [formControl]="contentControl"
        placeholder="Enter your content here..."
        [showCharacterCount]="true"
        [showWordCount]="true"
      />
      <button type="submit">Submit</button>
    </form>
  `,
})
export class FormComponent {
  contentControl = new FormControl("<p>Initial content</p>");
}

4. Using EditorCommandsService

import { Component, inject } from "@angular/core";
import { EditorCommandsService } from "@flogeez/angular-tiptap-editor";

@Component({
  selector: "app-commands",
  standalone: true,
  template: `
    <div>
      <button (click)="clearContent()">Clear Content</button>
      <button (click)="focusEditor()">Focus Editor</button>
      <button (click)="setContent()">Set Content</button>
    </div>
  `,
})
export class CommandsComponent {
  private editorCommandsService = inject(EditorCommandsService);
  private editor: Editor | null = null;

  onEditorCreated(editor: Editor) {
    this.editor = editor;
  }

  clearContent() {
    if (this.editor) {
      this.editorCommandsService.clearContent(this.editor);
    }
  }

  focusEditor() {
    if (this.editor) {
      this.editorCommandsService.focus(this.editor);
    }
  }

  setContent() {
    if (this.editor) {
      this.editorCommandsService.setContent(
        this.editor,
        "<h1>New Content</h1>"
      );
    }
  }
}

✨ Key Features

📊 Table Management

Full table support with intuitive bubble menus:

• Table Creation: Insert tables via slash commands (/table)
• Cell Selection: Click and drag to select multiple cells
• Bubble Menus: Context-aware menus for table operations
• Row/Column Management: Add, remove, and merge cells
• Styling: Custom table styling with proper borders

⚡ Slash Commands

Quick content insertion with slash commands:

• Headings: /h1, /h2, /h3
• Lists: /bullet, /numbered
• Blocks: /quote, /code, /line
• Media: /image, /table
• Fully Internationalized: All commands translated

🖼️ Advanced Image Handling

Professional image management:

• Drag & Drop: Drag images directly into the editor
• File Selection: Click to select images from device
• Auto-Compression: Images automatically compressed (max 1920x1080)
• Resizable: Images can be resized with handles
• Bubble Menu: Context menu for image operations

📝 Word & Character Counting

Real-time content statistics:

• Live Updates: Counters update as you type
• Proper Pluralization: "1 word" vs "2 words"
• Separate Counts: Independent word and character counts
• Configurable: Show/hide individual counters

🎨 Demo

🌐 Live Demo

Try the interactive demo online: https://flogeez.github.io/angular-tiptap-editor/

🖥️ Run Locally

git clone https://github.com/FloGeez/angular-tiptap-editor.git
cd angular-tiptap-editor
npm install
npm start

Open http://localhost:4200 to view the demo.

📖 Documentation

API Reference

Inputs

Input	Type	Default	Description
content	string	""	Initial HTML content
placeholder	string	"Start typing..."	Placeholder text
locale	'en' | 'fr'	Auto-detect	Editor language
editable	boolean	true	Whether editor is editable
height	number	undefined	Fixed height in pixels
maxHeight	number	undefined	Maximum height in pixels
minHeight	number	200	Minimum height in pixels
showToolbar	boolean	true	Show toolbar
showBubbleMenu	boolean	true	Show bubble menu
showCharacterCount	boolean	true	Show character counter
showWordCount	boolean	true	Show word counter
toolbar	ToolbarConfig	All enabled	Toolbar configuration
bubbleMenu	BubbleMenuConfig	All enabled	Bubble menu configuration
slashCommands	SlashCommandsConfig	All enabled	Slash commands configuration

Outputs

Output	Type	Description
contentChange	string	Emitted when content changes
editorCreated	Editor	Emitted when editor is created
editorFocus	{editor, event}	Emitted when editor gains focus
editorBlur	{editor, event}	Emitted when editor loses focus

Configuration Examples

import {
  DEFAULT_TOOLBAR_CONFIG,
  DEFAULT_BUBBLE_MENU_CONFIG,
  SLASH_COMMAND_KEYS,
} from "@flogeez/angular-tiptap-editor";

// Minimal toolbar
const minimalToolbar = {
  bold: true,
  italic: true,
  bulletList: true,
};

// Full toolbar with clear button
const fullToolbar = {
  ...DEFAULT_TOOLBAR_CONFIG,
  clear: true, // Add clear button
};

// Bubble menu with table support
const bubbleMenuWithTable = {
  ...DEFAULT_BUBBLE_MENU_CONFIG,
  table: true, // Enable table bubble menu
};

// Slash commands configuration
const slashCommands = {
  commands: [], // Will be populated by filterSlashCommands()
};

// Available slash command keys
console.log(SLASH_COMMAND_KEYS); // ["heading1", "heading2", "heading3", "bulletList", "orderedList", "blockquote", "code", "image", "horizontalRule", "table"]

🌍 Internationalization

The editor supports English and French with automatic browser language detection:

// Force English
<angular-tiptap-editor [locale]="'en'" />

// Force French
<angular-tiptap-editor [locale]="'fr'" />

// Auto-detect (default)
<angular-tiptap-editor />

Available Translations

• English (en): Default language with complete translations
• French (fr): Full French translation including:
  • Toolbar buttons
  • Bubble menu items
  • Slash commands
  • Placeholder text
  • Error messages
  • Word/character count (with proper pluralization)

Custom Slash Commands

import {
  filterSlashCommands,
  SLASH_COMMAND_KEYS,
} from "@flogeez/angular-tiptap-editor";

// Filter available slash commands
const activeCommands = new Set(["heading1", "heading2", "bulletList", "table"]);
const commands = filterSlashCommands(activeCommands);

// Use in component
slashCommandsConfig = {
  commands: commands,
};

🏗️ Architecture

Service-Based Design

The library follows a clean service-based architecture:

• EditorCommandsService: Centralized service for all editor commands
• TiptapI18nService: Internationalization service with automatic language detection
• ImageService: Advanced image handling with compression and resizing
• filterSlashCommands(): Utility function for managing slash commands

Modern Angular Patterns

• Signals: Used throughout for reactive state management
• Dependency Injection: Clean service injection with inject()
• Standalone Components: All components are standalone for better tree-shaking
• TypeScript: Strict typing with comprehensive interfaces

Default Configurations

The library provides default configurations that can be imported and customized:

import {
  DEFAULT_TOOLBAR_CONFIG,
  DEFAULT_BUBBLE_MENU_CONFIG,
  DEFAULT_IMAGE_BUBBLE_MENU_CONFIG,
  DEFAULT_TABLE_MENU_CONFIG,
  SLASH_COMMAND_KEYS,
} from "@flogeez/angular-tiptap-editor";

🔧 Development

Build Library

npm run build:lib

Watch Mode (Development)

npm run dev

This runs the library in watch mode and starts the demo application.

Available Scripts

• npm start - Start demo application
• npm run build - Build demo application
• npm run build:lib - Build library
• npm run watch:lib - Watch library changes
• npm run dev - Development mode (watch + serve)

📝 License

MIT License - see LICENSE file for details.

🤝 Contributing

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

🔗 Links

• 🎮 Live Demo
• 📖 Tiptap Documentation
• 🅰️ Angular Documentation
• 📦 NPM Package
• 🐛 Report Issues
• 💡 Feature Requests

🆕 What's New

Latest Updates

• ✅ Table Support: Full table management with bubble menus
• ✅ Slash Commands: Intuitive content insertion commands
• ✅ Word/Character Count: Real-time counting with proper pluralization
• ✅ Service Architecture: Clean EditorCommandsService for better maintainability
• ✅ Default Configurations: Importable default configs for easy customization
• ✅ Office Paste: Clean pasting from Microsoft Office applications
• ✅ Enhanced i18n: Improved internationalization with better architecture

---

Made with ❤️ by FloGeez