@flogeez/angular-tiptap-editor 0.3.7 → 0.5.0

package/CHANGELOG.md

@@ -0,0 +1,141 @@
+# Changelog
+
+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).
+
+## [0.5.0] - 2026-01-07
+
+### Added
+- **Full Theming System**: Introduced a complete set of CSS variables (`--ate-*`) for deep editor customization.
+- **Dark Mode Support**: Native support for dark mode via `.dark` class or `[data-theme="dark"]` attribute on the editor component.
+- **Theme Customizer**: New interactive panel in the demo application to customize and export CSS themes in real-time.
+- **Improved Slash Menu**: Refactored slash menu with better UI, keyboard navigation, and easier command filtering.
+
+### Breaking Changes
+- **Slash Commands API**: The `slashCommands` input now takes a `SlashCommandsConfig` object (a set of boolean flags) to toggle default commands, instead of a list of command items.
+- **Custom Slash Commands**: To provide your own commands, you must now use the new `customSlashCommands` input.
+- **CSS Variables**: The editor now relies heavily on CSS variables. If you had deep CSS overrides, you might need to update them to use the new `--ate-*` tokens.
+
+### Fixed
+- **Text Color Picker**: Improved initial color detection using computed styles and refined UI behavior to accurately reflect text color even when using theme defaults.
+
+### Changed
+- Renamed several internal components and services for better consistency.
+
+## [0.4.0] - 2026-01-07
+
+### Added
+- Text color picker extension (PR #6 by @nicolashimmelmann)
+- Integrated color picker into the main toolbar and bubble menu
+- New `tiptapExtensions` and `tiptapOptions` inputs for deeper editor customization  (PR #6 by @nicolashimmelmann)
+
+
+## [0.3.7] - 2025-12-19
+
+### Added
+- `fillContainer` input to make the editor fill the full height of its parent container
+
+## [0.3.6] - 2025-12-19
+
+### Added
+- Custom image upload handler (`imageUploadHandler` input)
+- Support for both `Promise` and `Observable` return types in upload handler
+
+## [0.3.5] - 2025-12-19
+
+### Added
+- `autofocus` input with multiple options (`false`, `'start'`, `'end'`, `'all'`, or position number)
+- Autofocus property support (PR #5 by @elirov)
+
+## [0.3.4] - 2025-12-19
+
+### Fixed
+- Removed console.log statements
+
+## [0.3.3] - 2025-09-05
+
+### Fixed
+- Slash commands functionality improvements
+
+## [0.3.2] - 2025-09-05
+
+### Fixed
+- Table functionality in slash commands
+
+## [0.3.1] - 2025-09-03
+
+### Added
+- Table extension with bubble menu for cell editing
+
+## [0.3.0] - 2025-09-01
+
+### Added
+- Table extension (insert, delete rows/columns, merge cells)
+- Cell bubble menu for table editing
+
+## [0.2.7] - 2025-08-22
+
+### Fixed
+- FormControls now fully Angular 18+ compliant
+
+## [0.2.6] - 2025-08-21
+
+### Fixed
+- FormControl update when editor is not ready yet
+
+## [0.2.5] - 2025-08-21
+
+### Changed
+- Updated README with StackBlitz demo link
+
+## [0.2.4] - 2025-08-21
+
+### Fixed
+- FormControls improvements
+
+## [0.2.3] - 2025-08-20
+
+### Fixed
+- Text alignment controls
+- Image positioning
+- Placeholder display
+
+## [0.2.2] - 2025-08-20
+
+### Fixed
+- Material Symbols font loading
+
+## [0.2.1] - 2025-08-20
+
+### Fixed
+- Peer dependencies versions
+- Library package name
+
+## [0.2.0] - 2025-08-20
+
+### Fixed
+- Angular version compatibility
+- GitHub Pages deployment path
+
+## [0.1.0] - 2025-08-20
+
+### Added
+- Initial release
+- Rich text editing with Tiptap
+- Toolbar with formatting options (bold, italic, underline, strike, code)
+- Heading support (H1, H2, H3)
+- Lists (bullet, ordered)
+- Blockquote and horizontal rule
+- Image upload with drag & drop and progress indicator
+- Resizable images
+- Character and word count
+- Bubble menu for text formatting
+- Image bubble menu with resize controls
+- Slash commands with keyword filtering
+- Highlight extension
+- Customizable toolbar and bubble menu configuration
+- Internationalization support (English, French)
+- Angular 18+ standalone components
+- Reactive Forms support (ControlValueAccessor)

package/README.md

@@ -7,7 +7,7 @@ A modern, customizable rich-text editor for Angular applications, built with Tip
 ## 🚀 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
+- **Rich Text Editing**: Powered by Tiptap v2 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
@@ -112,8 +112,11 @@ export class AdvancedComponent {
     table: true, // Enable table bubble menu
   };
 
-  slashCommandsConfig = {
-    commands: [], // Will be populated by the library
+  // No config needed if you want all commands enabled
+  slashCommands = {
+    image: true,
+    table: true,
+    heading1: true
   };
 
   onContentChange(newContent: string) {
@@ -122,6 +125,36 @@ export class AdvancedComponent {
 }
 ```
 
+You can also pass additional TipTap extensions (including custom marks)
+via the `tiptapExtensions` input.
+
+```typescript
+import { Component } from "@angular/core";
+import { AngularTiptapEditorComponent } from "@flogeez/angular-tiptap-editor";
+
+@Component({
+  selector: "app-custom-extensions",
+  standalone: true,
+  imports: [AngularTiptapEditorComponent],
+  template: `
+    <angular-tiptap-editor
+      [content]="content"
+      [tiptapExtensions]="extensions"
+      (contentChange)="content = $event"
+    />
+  `,
+})
+export class CustomExtensionsComponent {
+  content = "<p>Custom extensions example</p>";
+
+  extensions = [
+    // Add your custom TipTap extensions here
+    // Example: Custom extension configuration
+    // MyCustomExtension.configure({ /* options */ })
+  ];
+}
+```
+
 ### 3. With Form Integration
 
 ```typescript
@@ -336,25 +369,27 @@ Open [http://localhost:4200](http://localhost:4200) to view the demo.
 
 #### 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      |
-| `fillContainer`      | `boolean`             | `false`             | Fill parent container height  |
-| `autofocus`          | `boolean \| 'start' \| 'end' \| 'all'` | `false` | Auto-focus behavior |
-| `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  |
-| `imageUploadHandler` | `ImageUploadHandler`  | `undefined`         | Custom image upload function  |
+| 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         |
+| `fillContainer`      | `boolean`                              | `false`             | Fill parent container height     |
+| `autofocus`          | `boolean \| 'start' \| 'end' \| 'all'` | `false`             | Auto-focus behavior              |
+| `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     |
+| `imageUploadHandler` | `ImageUploadHandler`                   | `undefined`         | Custom image upload function     |
+| `tiptapExtensions`   | `(Extension \| Node \| Mark)[]`        | `[]`                | Additional Tiptap extensions     |
+| `tiptapOptions`      | `Partial<EditorOptions>`               | `{}`                | Additional Tiptap editor options |
 
 
 
@@ -395,13 +430,16 @@ const bubbleMenuWithTable = {
   table: true, // Enable table bubble menu
 };
 
-// Slash commands configuration
+// Slash commands configuration (simple toggle)
+// By default, all commands are enabled and localized.
 const slashCommands = {
-  commands: [], // Will be populated by filterSlashCommands()
+  heading1: true,
+  heading2: true,
+  image: false, // Disable image command
 };
 
-// Available slash command keys
-console.log(SLASH_COMMAND_KEYS); // ["heading1", "heading2", "heading3", "bulletList", "orderedList", "blockquote", "code", "image", "horizontalRule", "table"]
+// Available keys: "heading1", "heading2", "heading3", "bulletList", 
+// "orderedList", "blockquote", "code", "image", "horizontalRule", "table"
 ```
 
 ## 🌍 Internationalization
@@ -432,22 +470,106 @@ The editor supports English and French with automatic browser language detection
 
 ### Custom Slash Commands
 
+For advanced usage, you can provide entirely custom command items (titles, icons, logic):
+
 ```typescript
-import {
-  filterSlashCommands,
-  SLASH_COMMAND_KEYS,
+import { 
+  CustomSlashCommands, 
+  SlashCommandItem 
 } from "@flogeez/angular-tiptap-editor";
 
-// Filter available slash commands
-const activeCommands = new Set(["heading1", "heading2", "bulletList", "table"]);
-const commands = filterSlashCommands(activeCommands);
+// Define your custom items
+const myCommands: SlashCommandItem[] = [
+  {
+    title: 'My Action',
+    description: 'Do something cool',
+    icon: 'star',
+    keywords: ['custom', 'cool'],
+    command: (editor) => { /* logic */ }
+  }
+];
 
-// Use in component
-slashCommandsConfig = {
-  commands: commands,
+// Use in template
+customSlashCommands = {
+  commands: myCommands,
 };
 ```
 
+And in template:
+```html
+<angular-tiptap-editor [customSlashCommands]="customSlashCommands" />
+```
+
+### 🎨 CSS Custom Properties
+
+Customize the editor appearance using CSS variables with the `--ate-` prefix:
+
+```css
+/* In your global styles or component styles */
+angular-tiptap-editor {
+  --ate-primary: #2563eb;
+  --ate-primary-contrast: #ffffff;
+  --ate-primary-light: color-mix(in srgb, var(--ate-primary), transparent 90%);
+  --ate-primary-lighter: color-mix(in srgb, var(--ate-primary), transparent 95%);
+  --ate-primary-light-alpha: color-mix(in srgb, var(--ate-primary), transparent 85%);
+  
+  --ate-surface: #ffffff;
+  --ate-surface-secondary: #f8f9fa;
+  --ate-surface-tertiary: #f1f5f9;
+  
+  --ate-text: #2d3748;
+  --ate-text-secondary: #64748b;
+  --ate-text-muted: #a0aec0;
+  
+  --ate-border: #e2e8f0;
+
+  /* And More... */
+}
+```
+
+#### Dark Mode Support
+
+The editor supports dark mode in two ways:
+
+**1. With CSS Class**
+
+```html
+<angular-tiptap-editor [class.dark]="isDarkMode" />
+```
+
+**2. With Data Attribute**
+
+```html
+<angular-tiptap-editor [attr.data-theme]="isDarkMode ? 'dark' : null" />
+```
+
+#### Example: Custom Dark Theme
+
+```css
+angular-tiptap-editor.dark {
+  --ate-background: #1a1a2e;
+  --ate-border-color: #3d3d5c;
+  --ate-focus-color: #6366f1;
+  --ate-text-color: #e2e8f0;
+  --ate-placeholder-color: #64748b;
+  --ate-counter-background: #2d2d44;
+  --ate-counter-color: #94a3b8;
+  --ate-blockquote-background: #2d2d44;
+  --ate-code-background: #2d2d44;
+}
+```
+
+#### Example: Custom Brand Colors
+
+```css
+angular-tiptap-editor {
+  --ate-focus-color: #8b5cf6;
+  --ate-image-selected-color: #8b5cf6;
+  --ate-border-radius: 12px;
+}
+```
+
+
 ## 🏗️ Architecture
 
 ### Service-Based Design
@@ -504,6 +626,7 @@ This runs the library in watch mode and starts the demo application.
 - `npm run watch:lib` - Watch library changes
 - `npm run dev` - Development mode (watch + serve)
 
+
 ## 📝 License
 
 MIT License - see [LICENSE](LICENSE) file for details.
@@ -514,10 +637,10 @@ Contributions are welcome! Please feel free to submit a Pull Request.
 
 ## 🔗 Links
 
-- 🎮 [Live Demo](https://flogeez.github.io/angular-tiptap-editor/)
 - 📖 [Tiptap Documentation](https://tiptap.dev/)
 - 🅰️ [Angular Documentation](https://angular.dev/)
 - 📦 [NPM Package](https://www.npmjs.com/package/@flogeez/angular-tiptap-editor)
+- 📖 [Live Demo](https://flogeez.github.io/angular-tiptap-editor/)
 - 🐛 [Report Issues](https://github.com/FloGeez/angular-tiptap-editor/issues)
 - 💡 [Feature Requests](https://github.com/FloGeez/angular-tiptap-editor/issues)
 
@@ -534,7 +657,6 @@ Contributions are welcome! Please feel free to submit a Pull Request.
 - ✅ **Office Paste**: Clean pasting from Microsoft Office applications
 - ✅ **Enhanced i18n**: Improved internationalization with better architecture
 
-
 ---
 
 Made with ❤️ by [FloGeez](https://github.com/FloGeez)