@flogeez/angular-tiptap-editor 2.2.0 → 2.2.2

package/CHANGELOG.md

@@ -5,6 +5,18 @@ 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.2.2] - 2026-01-26
+
+### Refactored
+
+- **Sub-Bubble Menus**: Introduced a new dedicated base class `AteBaseSubBubbleMenu` for specialized menus (link and color). This refactoring centralizes common Tippy.js logic and transition behaviors while preserving the unique anchoring and state-locking requirements of each sub-menu.
+
+## [2.2.1] - 2026-01-25
+
+### Added
+
+- **Custom Menu Items**: Added support for custom items in both the `Toolbar` and the `Bubble Menu` via the `custom` property in `AteToolbarConfig` and `AteBubbleMenuConfig`. This allows developers to easily extend the editor's UI with project-specific actions.
+
 ## [2.2.0] - 2026-01-21
 
 ### Changed
@@ -122,7 +134,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Breaking Changes
 
-- **Service Injection**: If you were injecting `EditorCommandsService` (or other internal services) directly into your own global services/components, it will no longer work. You must now interact with the editor via its public API (`@ViewChild`).
+- **Service Injection**: If you were injecting `EditorCommandsService` (or other internal services) directly into your own global services/components, it will no longer work. You must now interact with the editor via its public API (`@ViewChild or viewChild()`).
 
 ## [0.6.0] - 2026-01-14
 

package/README.md

@@ -2,7 +2,7 @@
 
 A modern, customizable rich-text editor for Angular applications, built with Tiptap and featuring complete internationalization support.
 
-[![Demo](https://img.shields.io/badge/Demo-Live-brightgreen?style=for-the-badge&logo=google-chrome)](https://flogeez.github.io/angular-tiptap-editor/) [![Try it on StackBlitz](https://img.shields.io/badge/Try%20it-StackBlitz-blue?style=for-the-badge&logo=stackblitz)](https://stackblitz.com/edit/angular-tiptap-editor)
+[![NPM Version](https://img.shields.io/npm/v/@flogeez/angular-tiptap-editor?style=for-the-badge&logo=npm)](https://www.npmjs.com/package/@flogeez/angular-tiptap-editor) [![Demo](https://img.shields.io/badge/Demo-Live-brightgreen?style=for-the-badge&logo=google-chrome)](https://flogeez.github.io/angular-tiptap-editor/) [![Try it on StackBlitz](https://img.shields.io/badge/Try%20it-StackBlitz-blue?style=for-the-badge&logo=stackblitz)](https://stackblitz.com/edit/angular-tiptap-editor)
 
 ## 🚀 Features
 
@@ -16,7 +16,7 @@ A modern, customizable rich-text editor for Angular applications, built with Tip
 - **Built-in i18n**: English & French support with a reactive, extensible locale system.
 - **Word/Character Count**: Real-time statistics with proper pluralization support.
 - **Office-Ready**: Cleaned-up pasting from Microsoft Word and Excel to maintain layout integrity.
-- **Service Driven**: Deep programmatic control via `EditorCommandsService` and isolated instances.
+- **Service Driven**: Deep programmatic control via `AteEditorCommandsService` and isolated instances.
 - **A11y First**: Built with accessibility best practices and full keyboard navigation.
 
 ## 💎 Why this editor?
@@ -69,7 +69,9 @@ import { AngularTiptapEditorComponent } from "@flogeez/angular-tiptap-editor";
   selector: "app-example",
   standalone: true,
   imports: [AngularTiptapEditorComponent],
-  template: ` <angular-tiptap-editor [content]="content" (contentChange)="onContentChange($event)" /> `,
+  template: `
+    <angular-tiptap-editor [content]="content" (contentChange)="onContentChange($event)" />
+  `,
 })
 export class ExampleComponent {
   content = "<p>Hello <strong>World</strong>!</p>";
@@ -87,14 +89,21 @@ The editor can be fully configured using a single `[config]` object, which provi
 
 ```typescript
 import { Component } from "@angular/core";
-import { AngularTiptapEditorComponent, AteEditorConfig, DEFAULT_TOOLBAR_CONFIG } from "@flogeez/angular-tiptap-editor";
+import {
+  AngularTiptapEditorComponent,
+  AteEditorConfig,
+  ATE_DEFAULT_TOOLBAR_CONFIG,
+} from "@flogeez/angular-tiptap-editor";
 
 @Component({
   selector: "app-advanced",
   standalone: true,
   imports: [AngularTiptapEditorComponent],
   template: `
-    <angular-tiptap-editor [content]="content" [config]="editorConfig" (contentChange)="onContentChange($event)" />
+    <angular-tiptap-editor
+      [content]="content"
+      [config]="editorConfig"
+      (contentChange)="onContentChange($event)" />
   `,
 })
 export class AdvancedComponent {
@@ -109,7 +118,7 @@ export class AdvancedComponent {
 
     // Customize the toolbar by enabling specific features
     toolbar: {
-      ...DEFAULT_TOOLBAR_CONFIG,
+      ...ATE_DEFAULT_TOOLBAR_CONFIG,
       clear: true, // Enable the 'Clear' button
       highlight: false, // Disable the highlight button
     },
@@ -142,7 +151,10 @@ import { AngularTiptapEditorComponent } from "@flogeez/angular-tiptap-editor";
   standalone: true,
   imports: [AngularTiptapEditorComponent],
   template: `
-    <angular-tiptap-editor [content]="content" [tiptapExtensions]="extensions" (contentChange)="content = $event" />
+    <angular-tiptap-editor
+      [content]="content"
+      [tiptapExtensions]="extensions"
+      (contentChange)="content = $event" />
   `,
 })
 export class CustomExtensionsComponent {
@@ -187,7 +199,7 @@ export class FormComponent {
 
 ```typescript
 import { Component, inject } from "@angular/core";
-import { EditorCommandsService } from "@flogeez/angular-tiptap-editor";
+import { AteEditorCommandsService } from "@flogeez/angular-tiptap-editor";
 
 @Component({
   selector: "app-commands",
@@ -205,7 +217,7 @@ import { EditorCommandsService } from "@flogeez/angular-tiptap-editor";
   `,
 })
 export class CommandsComponent {
-  private editorCommandsService = inject(EditorCommandsService);
+  private editorCommandsService = inject(AteEditorCommandsService);
   private editor: Editor | null = null;
 
   onEditorCreated(editor: Editor) {
@@ -247,13 +259,13 @@ Any TipTap **Mark** or **Node** you add to `tiptapExtensions` is automatically t
 
 If you need to extract complex data (like attributes, depth, or custom logic), you can provide a custom `StateCalculator`.
 
-1. **Define a Calculator**:
+1.  **Define a Calculator**:
 
 ```typescript
-import { StateCalculator } from "@flogeez/angular-tiptap-editor";
+import { AteStateCalculator } from "@flogeez/angular-tiptap-editor";
 
 // This function will be called on every editor update
-export const MyCustomCalculator: StateCalculator = editor => {
+export const MyCustomCalculator: AteStateCalculator = editor => {
   return {
     custom: {
       hasHighPriority: editor.isActive("priority"),
@@ -264,18 +276,18 @@ export const MyCustomCalculator: StateCalculator = editor => {
 };
 ```
 
-2. **Register it in the Template**:
+2.  **Register it in the Template**:
 
 ```html
 <angular-tiptap-editor [stateCalculators]="[MyCustomCalculator]" />
 ```
 
-3. **Consume it anywhere**:
+3.  **Consume it anywhere**:
 
 ```typescript
 @Component({ ... })
 export class MyToolbarComponent {
-  private editorCommands = inject(EditorCommandsService);
+  private editorCommands = inject(AteEditorCommandsService);
 
   // Access your custom data reactively!
   isHighPriority = computed(() => this.editorCommands.editorState().custom?.hasHighPriority);
@@ -309,9 +321,9 @@ Quick content insertion with slash commands:
 The `slashCommands` object also allows you to add completely custom command items:
 
 ```typescript
-import { SlashCommandsConfig } from "@flogeez/angular-tiptap-editor";
+import { AteSlashCommandsConfig } from "@flogeez/angular-tiptap-editor";
 
-slashCommands: SlashCommandsConfig = {
+slashCommands: AteSlashCommandsConfig = {
   // Toggle native commands
   heading1: true,
   image: false,
@@ -351,7 +363,10 @@ The handler can return either an **Observable** or a **Promise**.
 import { Component, inject } from "@angular/core";
 import { HttpClient } from "@angular/common/http";
 import { map } from "rxjs/operators";
-import { AngularTiptapEditorComponent, ImageUploadHandler } from "@flogeez/angular-tiptap-editor";
+import {
+  AngularTiptapEditorComponent,
+  AteImageUploadHandler,
+} from "@flogeez/angular-tiptap-editor";
 
 @Component({
   selector: "app-custom-upload",
@@ -368,11 +383,13 @@ export class CustomUploadComponent {
   private http = inject(HttpClient);
   content = "";
 
-  uploadHandler: ImageUploadHandler = ctx => {
+  uploadHandler: AteImageUploadHandler = ctx => {
     const formData = new FormData();
     formData.append("image", ctx.file);
 
-    return this.http.post<{ url: string }>("/api/upload", formData).pipe(map(result => ({ src: result.url })));
+    return this.http
+      .post<{ url: string }>("/api/upload", formData)
+      .pipe(map(result => ({ src: result.url })));
   };
 
   onContentChange(newContent: string) {
@@ -384,7 +401,7 @@ export class CustomUploadComponent {
 #### Using Promise (async/await)
 
 ```typescript
-uploadHandler: ImageUploadHandler = async ctx => {
+uploadHandler: AteImageUploadHandler = async ctx => {
   const formData = new FormData();
   formData.append("image", ctx.file);
 
@@ -463,11 +480,11 @@ Open [http://localhost:4200](http://localhost:4200) to view the demo.
 | `enableOfficePaste`   | `boolean`                                        | `true`              | Enable smart Office pasting                   |
 | `showCharacterCount`  | `boolean`                                        | `true`              | Show character counter                        |
 | `showWordCount`       | `boolean`                                        | `true`              | Show word counter                             |
-| `toolbar`             | `ToolbarConfig`                                  | All enabled         | Detailed toolbar configuration                |
-| `bubbleMenu`          | `BubbleMenuConfig`                               | All enabled         | Detailed bubble menu configuration            |
-| `slashCommands`       | `SlashCommandsConfig`                            | All enabled         | Detailed slash commands config                |
-| `imageUploadHandler`  | `ImageUploadHandler`                             | `undefined`         | Custom image upload function                  |
-| `stateCalculators`    | `StateCalculator[]`                              | `[]`                | Custom reactive state logic                   |
+| `toolbar`             | `AteToolbarConfig`                               | All enabled         | Detailed toolbar configuration                |
+| `bubbleMenu`          | `AteBubbleMenuConfig`                            | All enabled         | Detailed bubble menu configuration            |
+| `slashCommands`       | `AteSlashCommandsConfig`                         | All enabled         | Detailed slash commands config                |
+| `imageUploadHandler`  | `AteImageUploadHandler`                          | `undefined`         | Custom image upload function                  |
+| `stateCalculators`    | `AteStateCalculator[]`                           | `[]`                | Custom reactive state logic                   |
 | `tiptapExtensions`    | `(Extension \| Node \| Mark)[]`                  | `[]`                | Additional Tiptap extensions                  |
 | `tiptapOptions`       | `Partial<EditorOptions>`                         | `{}`                | Additional Tiptap editor options              |
 
@@ -507,12 +524,12 @@ export interface AteEditorConfig {
   maxCharacters?: number;
 
   // Complex Modules
-  toolbar?: ToolbarConfig;
-  bubbleMenu?: BubbleMenuConfig;
-  imageBubbleMenu?: ImageBubbleMenuConfig;
-  tableBubbleMenu?: TableBubbleMenuConfig;
-  cellBubbleMenu?: CellBubbleMenuConfig;
-  slashCommands?: SlashCommandsConfig;
+  toolbar?: AteToolbarConfig;
+  bubbleMenu?: AteBubbleMenuConfig;
+  imageBubbleMenu?: AteImageBubbleMenuConfig;
+  tableBubbleMenu?: AteTableBubbleMenuConfig;
+  cellBubbleMenu?: AteCellBubbleMenuConfig;
+  slashCommands?: AteSlashCommandsConfig;
   imageUpload?: AteImageUploadConfig;
 }
 ```
@@ -524,7 +541,7 @@ The `imageUpload` property in `AteEditorConfig` provides fine-grained control ov
 ```typescript
 export interface AteImageUploadConfig {
   /** Custom handler to upload files to a server */
-  handler?: ImageUploadHandler;
+  handler?: AteImageUploadHandler;
   /** Maximum file size in bytes (default: 10MB) */
   maxFileSize?: number;
   /** Accepted file types (default: 'image/*') */
@@ -560,14 +577,14 @@ The editor comes with built-in support for **English (en)** and **French (fr)**,
 
 ### Adding Custom Languages
 
-You can easily extend the editor with new languages or override existing labels using the `TiptapI18nService`:
+You can easily extend the editor with new languages or override existing labels using the `AteI18nService`:
 
 ```typescript
-import { TiptapI18nService } from "@flogeez/angular-tiptap-editor";
+import { AteI18nService } from "@flogeez/angular-tiptap-editor";
 
 @Component({ ... })
 export class MyComponent {
-  constructor(private i18nService: TiptapI18nService) {
+  constructor(private i18nService: AteI18nService) {
     // Add Spanish support
     this.i18nService.addTranslations('es', {
        toolbar: { bold: 'Negrita', italic: 'Cursiva', ... },
@@ -651,7 +668,7 @@ angular-tiptap-editor {
 
 ### ⚡ Reactive State & OnPush
 
-The library exposes a reactive `editorState` signal via the `EditorCommandsService`. This signal contains everything you need to build custom UIs around the editor:
+The library exposes a reactive `editorState` signal via the `AteEditorCommandsService`. This signal contains everything you need to build custom UIs around the editor:
 
 - **Active State**: Check if `bold`, `italic`, or custom marks are active.
 - **Commands Availability**: Check if `undo`, `redo`, or custom commands can be executed.
@@ -686,13 +703,13 @@ The library uses a **Snapshot & Signal** pattern to bridge Tiptap and Angular.
 
 ### Core Services
 
-- **`EditorCommandsService`**: Exposes the `editorState` signal and provides a centralized API for executing Tiptap commands.
-- **`ImageService`**: Manages the image processing pipeline (selection, compression, and server-side upload handling).
-- **`TiptapI18nService`**: Reactive translation service with support for browser locale auto-detection.
+- **`AteEditorCommandsService`**: Exposes the `editorState` signal and provides a centralized API for executing Tiptap commands.
+- **`AteImageService`**: Manages the image processing pipeline (selection, compression, and server-side upload handling).
+- **`AteI18nService`**: Reactive translation service with support for browser locale auto-detection.
 
 ### Isolated Instances
 
-Each component instance provides its own set of services (`EditorCommandsService`, `ImageService`, etc.) at the component level. This ensures that multiple editors on the same page maintain independent states and configurations without interference.
+Each component instance provides its own set of services (`AteEditorCommandsService`, `AteImageService`, etc.) at the component level. This ensures that multiple editors on the same page maintain independent states and configurations without interference.
 
 ### Modern Angular Integration
 
@@ -706,11 +723,11 @@ The library provides default configurations that can be imported and customized:
 
 ```typescript
 import {
-  DEFAULT_TOOLBAR_CONFIG,
-  DEFAULT_BUBBLE_MENU_CONFIG,
-  DEFAULT_IMAGE_BUBBLE_MENU_CONFIG,
-  DEFAULT_TABLE_MENU_CONFIG,
-  SLASH_COMMAND_KEYS,
+  ATE_DEFAULT_TOOLBAR_CONFIG,
+  ATE_DEFAULT_BUBBLE_MENU_CONFIG,
+  ATE_DEFAULT_IMAGE_BUBBLE_MENU_CONFIG,
+  ATE_DEFAULT_TABLE_MENU_CONFIG,
+  ATE_DEFAULT_SLASH_COMMANDS_CONFIG,
 } from "@flogeez/angular-tiptap-editor";
 ```