@domternal/angular 0.2.0 → 0.2.1
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 +23 -58
- package/package.json +8 -8
package/README.md
CHANGED
|
@@ -1,70 +1,35 @@
|
|
|
1
1
|
# @domternal/angular
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
[](https://www.npmjs.com/package/@domternal/angular)
|
|
4
|
+
[](https://github.com/domternal/domternal/blob/main/LICENSE)
|
|
4
5
|
|
|
5
|
-
|
|
6
|
+
A lightweight, extensible rich text editor toolkit built on [ProseMirror](https://prosemirror.net/). Framework-agnostic headless core with first-class **Angular** support. Use it headless with vanilla JS/TS, add the built-in toolbar and theme, or drop in ready-made Angular components. Fully tree-shakeable, import only what you use, unused extensions are stripped from your bundle.
|
|
6
7
|
|
|
7
|
-
|
|
8
|
+
**[Website](https://domternal.dev)** · **[Documentation](https://domternal.dev/v1/introduction)** · **[StackBlitz (Vanilla TS)](https://stackblitz.com/edit/domternal-vanilla-full-example)** · **[StackBlitz (Angular)](https://stackblitz.com/edit/domternal-angular-full-example)**
|
|
8
9
|
|
|
9
|
-
##
|
|
10
|
+
## Features
|
|
10
11
|
|
|
11
|
-
|
|
12
|
-
npm install @domternal/core @domternal/theme @domternal/angular
|
|
13
|
-
```
|
|
12
|
+
See [Packages & Bundle Size](https://domternal.dev/v1/packages) for a full breakdown of all packages and what each one includes.
|
|
14
13
|
|
|
15
|
-
|
|
14
|
+
- **Headless core** - use with any framework or vanilla JS/TS
|
|
15
|
+
- **Angular components** - editor, toolbar, bubble menu, floating menu, emoji picker (signals, OnPush, zoneless-ready)
|
|
16
|
+
- **57 extensions across 10 packages** - 23 nodes, 9 marks, and 25 behavior extensions
|
|
17
|
+
- **140+ chainable commands** - `editor.chain().focus().toggleBold().run()`
|
|
18
|
+
- **Full table support** - cell merging, column resize, row/column controls, cell toolbar, all free and MIT licensed
|
|
19
|
+
- **Tree-shakeable** - import only what you use, your bundler strips the rest
|
|
20
|
+
- **~38 KB gzipped** (own code), [~108 KB total](https://domternal.dev/v1/packages) with ProseMirror
|
|
21
|
+
- **TypeScript first** - 100% typed, zero `any`
|
|
22
|
+
- **4,200+ tests** - 2,675 unit tests and 1,550 E2E tests across 34 Playwright specs
|
|
23
|
+
- **Light and dark theme** - 70+ CSS custom properties for full visual control
|
|
24
|
+
- **Inline styles export** - `getHTML({ styled: true })` produces inline CSS ready for email clients, CMS, and Google Docs
|
|
25
|
+
- **SSR helpers** - `generateHTML`, `generateJSON`, `generateText` for server-side rendering
|
|
16
26
|
|
|
17
|
-
|
|
18
|
-
import { Component, signal } from '@angular/core';
|
|
19
|
-
import {
|
|
20
|
-
DomternalEditorComponent,
|
|
21
|
-
DomternalToolbarComponent,
|
|
22
|
-
DomternalBubbleMenuComponent,
|
|
23
|
-
} from '@domternal/angular';
|
|
24
|
-
import { Editor, StarterKit, BubbleMenu } from '@domternal/core';
|
|
27
|
+
## Documentation
|
|
25
28
|
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
<domternal-toolbar [editor]="ed" />
|
|
31
|
-
}
|
|
32
|
-
<domternal-editor
|
|
33
|
-
[extensions]="extensions"
|
|
34
|
-
[content]="content"
|
|
35
|
-
(editorCreated)="editor.set($event)"
|
|
36
|
-
/>
|
|
37
|
-
@if (editor(); as ed) {
|
|
38
|
-
<domternal-bubble-menu [editor]="ed" />
|
|
39
|
-
}
|
|
40
|
-
`,
|
|
41
|
-
})
|
|
42
|
-
export class EditorComponent {
|
|
43
|
-
editor = signal<Editor | null>(null);
|
|
44
|
-
extensions = [StarterKit, BubbleMenu];
|
|
45
|
-
content = '<p>Hello from Angular!</p>';
|
|
46
|
-
}
|
|
47
|
-
```
|
|
48
|
-
|
|
49
|
-
### Global Styles
|
|
50
|
-
|
|
51
|
-
Add the theme to your global stylesheet to load editor and toolbar styles:
|
|
52
|
-
|
|
53
|
-
```scss
|
|
54
|
-
@use '@domternal/theme';
|
|
55
|
-
```
|
|
56
|
-
|
|
57
|
-
### Available Components
|
|
58
|
-
|
|
59
|
-
| Component | Description |
|
|
60
|
-
|---|---|
|
|
61
|
-
| `<domternal-editor>` | The core editor surface |
|
|
62
|
-
| `<domternal-toolbar>` | Auto-renders toolbar buttons based on provided extensions |
|
|
63
|
-
| `<domternal-bubble-menu>` | Contextual formatting menu on text selection |
|
|
64
|
-
| `<domternal-floating-menu>` | Block-level insertion menu on empty lines |
|
|
65
|
-
| `<domternal-emoji-picker>` | Emoji picker panel for the Emoji extension |
|
|
66
|
-
|
|
67
|
-
The toolbar and bubble menu components auto-render buttons based on the extensions you provide. No manual button wiring needed.
|
|
29
|
+
- [Getting Started](https://domternal.dev/v1/getting-started) - install and create your first editor
|
|
30
|
+
- [Introduction](https://domternal.dev/v1/introduction) - core concepts, architecture, and design decisions
|
|
31
|
+
- [Packages & Bundle Size](https://domternal.dev/v1/packages) - what each package includes and bundle size breakdown
|
|
32
|
+
- [Blog](https://domternal.dev/blog)
|
|
68
33
|
|
|
69
34
|
## License
|
|
70
35
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@domternal/angular",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.1",
|
|
4
4
|
"description": "Angular components for Domternal editor",
|
|
5
5
|
"author": "https://github.com/ThomasNowHere",
|
|
6
6
|
"license": "MIT",
|
|
@@ -31,12 +31,9 @@
|
|
|
31
31
|
"@angular/core": "^21.2.4",
|
|
32
32
|
"@angular/forms": "^21.2.4",
|
|
33
33
|
"@angular/platform-browser": "^21.2.4",
|
|
34
|
-
"@domternal/core": "workspace:*",
|
|
35
34
|
"ng-packagr": "^21.0.0",
|
|
36
|
-
"typescript": "~5.9.3"
|
|
37
|
-
|
|
38
|
-
"scripts": {
|
|
39
|
-
"build": "ng-packagr -p ng-package.json"
|
|
35
|
+
"typescript": "~5.9.3",
|
|
36
|
+
"@domternal/core": "0.2.1"
|
|
40
37
|
},
|
|
41
38
|
"keywords": [
|
|
42
39
|
"angular",
|
|
@@ -53,5 +50,8 @@
|
|
|
53
50
|
"bugs": {
|
|
54
51
|
"url": "https://github.com/domternal/domternal/issues"
|
|
55
52
|
},
|
|
56
|
-
"homepage": "https://domternal.dev"
|
|
57
|
-
|
|
53
|
+
"homepage": "https://domternal.dev",
|
|
54
|
+
"scripts": {
|
|
55
|
+
"build": "ng-packagr -p ng-package.json"
|
|
56
|
+
}
|
|
57
|
+
}
|