@flogeez/angular-tiptap-editor 0.3.7 → 0.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +122 -0
- package/README.md +52 -21
- package/fesm2022/flogeez-angular-tiptap-editor.mjs +1905 -1462
- package/fesm2022/flogeez-angular-tiptap-editor.mjs.map +1 -1
- package/index.d.ts +10 -2
- package/package.json +1 -1
- package/src/lib/styles/index.css +40 -40
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
# Changelog
|
|
2
|
+
|
|
3
|
+
All notable changes to `@flogeez/angular-tiptap-editor` will be documented in this file.
|
|
4
|
+
|
|
5
|
+
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
|
|
6
|
+
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
|
7
|
+
|
|
8
|
+
## [0.4.0] - 2026-01-07
|
|
9
|
+
|
|
10
|
+
### Added
|
|
11
|
+
- Text color picker extension (PR #6 by @nicolashimmelmann)
|
|
12
|
+
- Integrated color picker into the main toolbar and bubble menu
|
|
13
|
+
- New `tiptapExtensions` and `tiptapOptions` inputs for deeper editor customization (PR #6 by @nicolashimmelmann)
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
## [0.3.7] - 2025-12-19
|
|
17
|
+
|
|
18
|
+
### Added
|
|
19
|
+
- `fillContainer` input to make the editor fill the full height of its parent container
|
|
20
|
+
|
|
21
|
+
## [0.3.6] - 2025-12-19
|
|
22
|
+
|
|
23
|
+
### Added
|
|
24
|
+
- Custom image upload handler (`imageUploadHandler` input)
|
|
25
|
+
- Support for both `Promise` and `Observable` return types in upload handler
|
|
26
|
+
|
|
27
|
+
## [0.3.5] - 2025-12-19
|
|
28
|
+
|
|
29
|
+
### Added
|
|
30
|
+
- `autofocus` input with multiple options (`false`, `'start'`, `'end'`, `'all'`, or position number)
|
|
31
|
+
- Autofocus property support (PR #5 by @elirov)
|
|
32
|
+
|
|
33
|
+
## [0.3.4] - 2025-12-19
|
|
34
|
+
|
|
35
|
+
### Fixed
|
|
36
|
+
- Removed console.log statements
|
|
37
|
+
|
|
38
|
+
## [0.3.3] - 2025-09-05
|
|
39
|
+
|
|
40
|
+
### Fixed
|
|
41
|
+
- Slash commands functionality improvements
|
|
42
|
+
|
|
43
|
+
## [0.3.2] - 2025-09-05
|
|
44
|
+
|
|
45
|
+
### Fixed
|
|
46
|
+
- Table functionality in slash commands
|
|
47
|
+
|
|
48
|
+
## [0.3.1] - 2025-09-03
|
|
49
|
+
|
|
50
|
+
### Added
|
|
51
|
+
- Table extension with bubble menu for cell editing
|
|
52
|
+
|
|
53
|
+
## [0.3.0] - 2025-09-01
|
|
54
|
+
|
|
55
|
+
### Added
|
|
56
|
+
- Table extension (insert, delete rows/columns, merge cells)
|
|
57
|
+
- Cell bubble menu for table editing
|
|
58
|
+
|
|
59
|
+
## [0.2.7] - 2025-08-22
|
|
60
|
+
|
|
61
|
+
### Fixed
|
|
62
|
+
- FormControls now fully Angular 18+ compliant
|
|
63
|
+
|
|
64
|
+
## [0.2.6] - 2025-08-21
|
|
65
|
+
|
|
66
|
+
### Fixed
|
|
67
|
+
- FormControl update when editor is not ready yet
|
|
68
|
+
|
|
69
|
+
## [0.2.5] - 2025-08-21
|
|
70
|
+
|
|
71
|
+
### Changed
|
|
72
|
+
- Updated README with StackBlitz demo link
|
|
73
|
+
|
|
74
|
+
## [0.2.4] - 2025-08-21
|
|
75
|
+
|
|
76
|
+
### Fixed
|
|
77
|
+
- FormControls improvements
|
|
78
|
+
|
|
79
|
+
## [0.2.3] - 2025-08-20
|
|
80
|
+
|
|
81
|
+
### Fixed
|
|
82
|
+
- Text alignment controls
|
|
83
|
+
- Image positioning
|
|
84
|
+
- Placeholder display
|
|
85
|
+
|
|
86
|
+
## [0.2.2] - 2025-08-20
|
|
87
|
+
|
|
88
|
+
### Fixed
|
|
89
|
+
- Material Symbols font loading
|
|
90
|
+
|
|
91
|
+
## [0.2.1] - 2025-08-20
|
|
92
|
+
|
|
93
|
+
### Fixed
|
|
94
|
+
- Peer dependencies versions
|
|
95
|
+
- Library package name
|
|
96
|
+
|
|
97
|
+
## [0.2.0] - 2025-08-20
|
|
98
|
+
|
|
99
|
+
### Fixed
|
|
100
|
+
- Angular version compatibility
|
|
101
|
+
- GitHub Pages deployment path
|
|
102
|
+
|
|
103
|
+
## [0.1.0] - 2025-08-20
|
|
104
|
+
|
|
105
|
+
### Added
|
|
106
|
+
- Initial release
|
|
107
|
+
- Rich text editing with Tiptap
|
|
108
|
+
- Toolbar with formatting options (bold, italic, underline, strike, code)
|
|
109
|
+
- Heading support (H1, H2, H3)
|
|
110
|
+
- Lists (bullet, ordered)
|
|
111
|
+
- Blockquote and horizontal rule
|
|
112
|
+
- Image upload with drag & drop and progress indicator
|
|
113
|
+
- Resizable images
|
|
114
|
+
- Character and word count
|
|
115
|
+
- Bubble menu for text formatting
|
|
116
|
+
- Image bubble menu with resize controls
|
|
117
|
+
- Slash commands with keyword filtering
|
|
118
|
+
- Highlight extension
|
|
119
|
+
- Customizable toolbar and bubble menu configuration
|
|
120
|
+
- Internationalization support (English, French)
|
|
121
|
+
- Angular 18+ standalone components
|
|
122
|
+
- Reactive Forms support (ControlValueAccessor)
|
package/README.md
CHANGED
|
@@ -7,7 +7,7 @@ A modern, customizable rich-text editor for Angular applications, built with Tip
|
|
|
7
7
|
## 🚀 Features
|
|
8
8
|
|
|
9
9
|
- **Modern Angular**: Built with Angular 18+ with Signals and modern patterns
|
|
10
|
-
- **Rich Text Editing**: Powered by Tiptap
|
|
10
|
+
- **Rich Text Editing**: Powered by Tiptap v2 with extensive formatting options
|
|
11
11
|
- **Table Support**: Full table management with bubble menus and cell selection
|
|
12
12
|
- **Slash Commands**: Intuitive slash commands for quick content insertion
|
|
13
13
|
- **Internationalization**: Full i18n support (English & French) with auto-detection
|
|
@@ -122,6 +122,36 @@ export class AdvancedComponent {
|
|
|
122
122
|
}
|
|
123
123
|
```
|
|
124
124
|
|
|
125
|
+
You can also pass additional TipTap extensions (including custom marks)
|
|
126
|
+
via the `tiptapExtensions` input.
|
|
127
|
+
|
|
128
|
+
```typescript
|
|
129
|
+
import { Component } from "@angular/core";
|
|
130
|
+
import { AngularTiptapEditorComponent } from "@flogeez/angular-tiptap-editor";
|
|
131
|
+
|
|
132
|
+
@Component({
|
|
133
|
+
selector: "app-custom-extensions",
|
|
134
|
+
standalone: true,
|
|
135
|
+
imports: [AngularTiptapEditorComponent],
|
|
136
|
+
template: `
|
|
137
|
+
<angular-tiptap-editor
|
|
138
|
+
[content]="content"
|
|
139
|
+
[tiptapExtensions]="extensions"
|
|
140
|
+
(contentChange)="content = $event"
|
|
141
|
+
/>
|
|
142
|
+
`,
|
|
143
|
+
})
|
|
144
|
+
export class CustomExtensionsComponent {
|
|
145
|
+
content = "<p>Custom extensions example</p>";
|
|
146
|
+
|
|
147
|
+
extensions = [
|
|
148
|
+
// Add your custom TipTap extensions here
|
|
149
|
+
// Example: Custom extension configuration
|
|
150
|
+
// MyCustomExtension.configure({ /* options */ })
|
|
151
|
+
];
|
|
152
|
+
}
|
|
153
|
+
```
|
|
154
|
+
|
|
125
155
|
### 3. With Form Integration
|
|
126
156
|
|
|
127
157
|
```typescript
|
|
@@ -336,25 +366,27 @@ Open [http://localhost:4200](http://localhost:4200) to view the demo.
|
|
|
336
366
|
|
|
337
367
|
#### Inputs
|
|
338
368
|
|
|
339
|
-
| Input | Type
|
|
340
|
-
| -------------------- |
|
|
341
|
-
| `content` | `string`
|
|
342
|
-
| `placeholder` | `string`
|
|
343
|
-
| `locale` | `'en' \| 'fr'`
|
|
344
|
-
| `editable` | `boolean`
|
|
345
|
-
| `height` | `number`
|
|
346
|
-
| `maxHeight` | `number`
|
|
347
|
-
| `minHeight` | `number`
|
|
348
|
-
| `fillContainer` | `boolean`
|
|
349
|
-
| `autofocus` | `boolean \| 'start' \| 'end' \| 'all'` | `false`
|
|
350
|
-
| `showToolbar` | `boolean`
|
|
351
|
-
| `showBubbleMenu` | `boolean`
|
|
352
|
-
| `showCharacterCount` | `boolean`
|
|
353
|
-
| `showWordCount` | `boolean`
|
|
354
|
-
| `toolbar` | `ToolbarConfig`
|
|
355
|
-
| `bubbleMenu` | `BubbleMenuConfig`
|
|
356
|
-
| `slashCommands` | `SlashCommandsConfig`
|
|
357
|
-
| `imageUploadHandler` | `ImageUploadHandler`
|
|
369
|
+
| Input | Type | Default | Description |
|
|
370
|
+
| -------------------- | -------------------------------------- | ------------------- | -------------------------------- |
|
|
371
|
+
| `content` | `string` | `""` | Initial HTML content |
|
|
372
|
+
| `placeholder` | `string` | `"Start typing..."` | Placeholder text |
|
|
373
|
+
| `locale` | `'en' \| 'fr'` | Auto-detect | Editor language |
|
|
374
|
+
| `editable` | `boolean` | `true` | Whether editor is editable |
|
|
375
|
+
| `height` | `number` | `undefined` | Fixed height in pixels |
|
|
376
|
+
| `maxHeight` | `number` | `undefined` | Maximum height in pixels |
|
|
377
|
+
| `minHeight` | `number` | `200` | Minimum height in pixels |
|
|
378
|
+
| `fillContainer` | `boolean` | `false` | Fill parent container height |
|
|
379
|
+
| `autofocus` | `boolean \| 'start' \| 'end' \| 'all'` | `false` | Auto-focus behavior |
|
|
380
|
+
| `showToolbar` | `boolean` | `true` | Show toolbar |
|
|
381
|
+
| `showBubbleMenu` | `boolean` | `true` | Show bubble menu |
|
|
382
|
+
| `showCharacterCount` | `boolean` | `true` | Show character counter |
|
|
383
|
+
| `showWordCount` | `boolean` | `true` | Show word counter |
|
|
384
|
+
| `toolbar` | `ToolbarConfig` | All enabled | Toolbar configuration |
|
|
385
|
+
| `bubbleMenu` | `BubbleMenuConfig` | All enabled | Bubble menu configuration |
|
|
386
|
+
| `slashCommands` | `SlashCommandsConfig` | All enabled | Slash commands configuration |
|
|
387
|
+
| `imageUploadHandler` | `ImageUploadHandler` | `undefined` | Custom image upload function |
|
|
388
|
+
| `tiptapExtensions` | `(Extension \| Node \| Mark)[]` | `[]` | Additional Tiptap extensions |
|
|
389
|
+
| `tiptapOptions` | `Partial<EditorOptions>` | `{}` | Additional Tiptap editor options |
|
|
358
390
|
|
|
359
391
|
|
|
360
392
|
|
|
@@ -534,7 +566,6 @@ Contributions are welcome! Please feel free to submit a Pull Request.
|
|
|
534
566
|
- ✅ **Office Paste**: Clean pasting from Microsoft Office applications
|
|
535
567
|
- ✅ **Enhanced i18n**: Improved internationalization with better architecture
|
|
536
568
|
|
|
537
|
-
|
|
538
569
|
---
|
|
539
570
|
|
|
540
571
|
Made with ❤️ by [FloGeez](https://github.com/FloGeez)
|