Skip to content

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

License

Notifications You must be signed in to change notification settings

elirov/angular-tiptap-editor

ย 
ย 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

75 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

Angular Tiptap Editor

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

Try it on StackBlitz

๐Ÿš€ 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

๐Ÿ†• 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

About

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

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 98.6%
  • Other 1.4%