@stackch/angular-material-richtext-editor 1.0.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/README.md
ADDED
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
# @stackch/angular-material-richtext-editor
|
|
2
|
+
|
|
3
|
+
Angular Material variant of the Stackch Rich Text Editor.
|
|
4
|
+
|
|
5
|
+
- Angular 20, standalone component
|
|
6
|
+
- Range-based formatting (bold, italic, underline, headings, lists, alignment)
|
|
7
|
+
- Font and size menus, spacing (margin/padding), colors (text + highlight)
|
|
8
|
+
- Undo/redo with selection restore
|
|
9
|
+
- i18n bundles (EN default; DE/FR/IT included)
|
|
10
|
+
- Compact Material toolbar with icons/menus
|
|
11
|
+
|
|
12
|
+
## Install
|
|
13
|
+
|
|
14
|
+
```bash
|
|
15
|
+
npm install @stackch/angular-material-richtext-editor @angular/material @angular/cdk
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
Make sure your app enables animations and includes a Material theme and icons:
|
|
19
|
+
|
|
20
|
+
- Provide animations in your app config (or use NoopAnimations if preferred).
|
|
21
|
+
- Add a prebuilt Material theme or your custom theme to global styles.
|
|
22
|
+
- Include Google Material Icons in `index.html`.
|
|
23
|
+
|
|
24
|
+
## Quick start (standalone)
|
|
25
|
+
|
|
26
|
+
```ts
|
|
27
|
+
import { bootstrapApplication, provideAnimations } from '@angular/platform-browser';
|
|
28
|
+
import { Component } from '@angular/core';
|
|
29
|
+
import { FormsModule, ReactiveFormsModule, FormControl } from '@angular/forms';
|
|
30
|
+
import { StackchRichtextEditorMaterial } from '@stackch/angular-material-richtext-editor';
|
|
31
|
+
|
|
32
|
+
@Component({
|
|
33
|
+
selector: 'app-root',
|
|
34
|
+
standalone: true,
|
|
35
|
+
imports: [FormsModule, ReactiveFormsModule, StackchRichtextEditorMaterial],
|
|
36
|
+
template: `
|
|
37
|
+
<stackch-richtext-editor-material
|
|
38
|
+
[config]="{ showUndoRedo: true, showFontPanel: true, showHeading: true, showSpacing: true, showColor: true, showBold: true, showItalic: true, showUnderline: true, showLists: true, showAlign: true, showLink: true, showRemoveFormat: true }"
|
|
39
|
+
[fonts]="['Arial, Helvetica, sans-serif','Georgia, serif','Courier New, monospace']"
|
|
40
|
+
[fontSizes]="[12,14,16,18,20,24,28]"
|
|
41
|
+
[minHeight]="200"
|
|
42
|
+
[formControl]="content">
|
|
43
|
+
</stackch-richtext-editor-material>
|
|
44
|
+
`
|
|
45
|
+
})
|
|
46
|
+
export class App {
|
|
47
|
+
content = new FormControl<string>('');
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
bootstrapApplication(App, {
|
|
51
|
+
providers: [provideAnimations()],
|
|
52
|
+
});
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
Global setup additions:
|
|
56
|
+
|
|
57
|
+
- index.html: `<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">`
|
|
58
|
+
- styles.css: `@import '@angular/material/prebuilt-themes/indigo-pink.css';`
|
|
59
|
+
|
|
60
|
+
## Inputs
|
|
61
|
+
|
|
62
|
+
- `config: Partial<StackchRichtextEditorConfig>` – toggle toolbar sections and pass i18n overrides
|
|
63
|
+
- `showToolbar: boolean` – show/hide toolbar (default true)
|
|
64
|
+
- `fonts: string[]` – font families
|
|
65
|
+
- `fontSizes: number[]` – font sizes in px
|
|
66
|
+
- `minHeight: number` – editor min height (px)
|
|
67
|
+
- `maxHeight?: number` – editor max height (px)
|
|
68
|
+
- `height?: number` – fixed height (px)
|
|
69
|
+
- `placeholder?: string` – placeholder text
|
|
70
|
+
|
|
71
|
+
## Outputs
|
|
72
|
+
|
|
73
|
+
- `valueChange: EventEmitter<string>` – emits current HTML on changes (also supports FormControl via ControlValueAccessor)
|
|
74
|
+
|
|
75
|
+
## i18n
|
|
76
|
+
|
|
77
|
+
The editor ships with language bundles. Import from the package and pass via `config.i18n`:
|
|
78
|
+
|
|
79
|
+
```ts
|
|
80
|
+
import { STACKCH_RTE_I18N_DE, STACKCH_RTE_I18N_FR, STACKCH_RTE_I18N_IT } from '@stackch/angular-material-richtext-editor';
|
|
81
|
+
|
|
82
|
+
const config = { i18n: STACKCH_RTE_I18N_DE };
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
## Notes
|
|
86
|
+
|
|
87
|
+
- Uses DOM Range/Selection and executes formatting via native browser commands and node wrapping.
|
|
88
|
+
- Undo/Redo is implemented via snapshots with selection serialization.
|
|
89
|
+
- Menus use Angular Material; ensure animations are enabled for proper menu behavior.
|
|
90
|
+
|
|
91
|
+
## License
|
|
92
|
+
|
|
93
|
+
MIT
|
package/RELEASE_NOTES.md
ADDED
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
# @stackch/angular-material-richtext-editor — Release Notes
|
|
2
|
+
|
|
3
|
+
## 1.0.0 (2025-10-11)
|
|
4
|
+
|
|
5
|
+
Initial stable release of the Angular Material variant of the Stackch Rich Text Editor.
|
|
6
|
+
|
|
7
|
+
Highlights:
|
|
8
|
+
- Angular 20 standalone component
|
|
9
|
+
- Material-styled compact toolbar with menus
|
|
10
|
+
- Font & Size panel (icon-only trigger, split into submenus)
|
|
11
|
+
- Spacing panel (margin/padding submenus)
|
|
12
|
+
- Colors with native color pickers (text and highlight)
|
|
13
|
+
- Headings, lists, alignment
|
|
14
|
+
- Inline styles: bold, italic, underline
|
|
15
|
+
- Undo/redo with selection restore
|
|
16
|
+
- i18n bundles: EN (default), DE, FR, IT
|
|
17
|
+
- Works with Forms API (ControlValueAccessor)
|
|
18
|
+
|
|
19
|
+
Breaking Changes:
|
|
20
|
+
- None (first stable release)
|
|
21
|
+
|
|
22
|
+
Migration Tips:
|
|
23
|
+
- Ensure Angular Material and animations are set up.
|
|
24
|
+
- Include a Material theme and the Material Icons font.
|
|
25
|
+
|