@flogeez/angular-tiptap-editor 2.1.3 → 2.2.1

package/CHANGELOG.md

@@ -3,7 +3,36 @@
 All notable changes to `@flogeez/angular-tiptap-editor` will be documented in this file.
 
 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).
+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.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
+
+- **Internal Ecosystem Prefixing**: Systemic renaming of all internal classes, services, models, and constants to use the `Ate` or `ATE_` prefix (e.g., `AteI18nService`, `AteEditorCommandsService`, `ATE_INITIAL_EDITOR_STATE`). This provides better library identification and avoids collisions with third-party extensions.
+- **UI Branding Refactoring**: Refactored internal component selectors and CSS classes to use the new `ate-` prefix (e.g., `ate-button`, `ate-toolbar`). The main editor selector remains `angular-tiptap-editor`.
+- **Project Standards**: Enforced Unix-style line endings (**LF**) across the entire repository via `.gitattributes` to ensure cross-platform consistency.
+
+### Breaking Changes
+
+- **Renamed Public Exports**: Systemal renaming of internal library exports to use the `Ate` prefix. **Backward compatibility is maintained** via deprecated aliases for all renamed items, which will be removed in v3.0.0.
+  - `EditorCommandsService` -> `AteEditorCommandsService`
+  - `TiptapI18nService` -> `AteI18nService`
+  - `EditorStateSnapshot` -> `AteEditorStateSnapshot`
+  - `INITIAL_EDITOR_STATE` -> `ATE_INITIAL_EDITOR_STATE`
+  - `ToolbarConfig` -> `AteToolbarConfig`, etc.
+  - All TipTap extensions (e.g., `AteResizableImage`, `AteTiptapStateExtension`).
+- **Internal Component Selectors**: If you were using internal library components directly in your templates (outside of the main editor), they now use the `ate-` prefix:
+  - `tiptap-toolbar` -> `ate-toolbar`
+  - `tiptap-button` -> `ate-button`
+  - `tiptap-bubble-menu` -> `ate-bubble-menu`
+- **Main Editor Selector**: Unchanged (`angular-tiptap-editor`), preserving the existing facade.
 
 ## [2.1.3] - 2026-01-21
 

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?
@@ -87,7 +87,11 @@ 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",
@@ -109,7 +113,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
     },
@@ -187,7 +191,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 +209,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 +251,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 +268,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 +313,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 +355,7 @@ 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,7 +372,7 @@ export class CustomUploadComponent {
   private http = inject(HttpClient);
   content = "";
 
-  uploadHandler: ImageUploadHandler = ctx => {
+  uploadHandler: AteImageUploadHandler = ctx => {
     const formData = new FormData();
     formData.append("image", ctx.file);
 
@@ -384,7 +388,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 +467,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 +511,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 +528,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 +564,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 +655,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 +690,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 +710,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";
 ```