@domternal/angular 0.11.1 → 0.11.2
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 +105 -29
- package/dist/README.md +105 -29
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -3,42 +3,118 @@
|
|
|
3
3
|
[](https://www.npmjs.com/package/@domternal/angular)
|
|
4
4
|
[](https://github.com/domternal/domternal/blob/main/LICENSE)
|
|
5
5
|
|
|
6
|
-
|
|
7
|
-
|
|
6
|
+
Angular components for the [Domternal](https://domternal.dev) editor: six standalone,
|
|
7
|
+
signals-driven, OnPush, zoneless-ready components that wrap the headless core with
|
|
8
|
+
Angular-native APIs. `DomternalEditorComponent` implements `ControlValueAccessor`, so
|
|
9
|
+
it drops into `ngModel` and reactive forms. The toolbar, bubble menu, floating menu,
|
|
10
|
+
emoji picker, and Notion color picker auto-render from the extensions you load.
|
|
8
11
|
|
|
9
12
|
## Links
|
|
10
13
|
|
|
11
|
-
<u>[Website](https://domternal.dev)</u> • <u>[Documentation](https://domternal.dev/v1/
|
|
12
|
-
<u>[StackBlitz (Angular)](https://stackblitz.com/edit/domternal-angular-full-example)</u> • <u>[StackBlitz (React)](https://stackblitz.com/edit/domternal-react-full-example)</u> • <u>[StackBlitz (Vue)](https://stackblitz.com/edit/domternal-vue-full-example)</u> • <u>[StackBlitz (Vanilla TS)](https://stackblitz.com/edit/domternal-vanilla-full-example)</u>
|
|
14
|
+
<u>[Website](https://domternal.dev)</u> • <u>[Documentation](https://domternal.dev/v1/guides/angular)</u> • <u>[Live examples](https://domternal.dev/examples)</u>
|
|
13
15
|
|
|
14
|
-
##
|
|
16
|
+
## Install
|
|
15
17
|
|
|
16
|
-
|
|
18
|
+
```bash
|
|
19
|
+
pnpm add @domternal/angular @domternal/core @domternal/theme
|
|
20
|
+
```
|
|
17
21
|
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
- **Vue components** - composable `Domternal` component, `useEditor`/`useEditorState` composables, toolbar, bubble menu, floating menu, emoji picker, notion color picker, custom node views (Vue 3.3+)
|
|
22
|
-
- **Vanilla wrapper** - framework-free class-based API for Astro, Svelte, Solid, plain HTML, and Web Components - editor, toolbar, bubble menu, floating menu, emoji picker, notion color picker
|
|
23
|
-
- **Notion-style block UX** - drag-to-reorder, block context menu, slash command, smart paste, keyboard reorder, floating Table of Contents
|
|
24
|
-
- **70+ extensions across 16 packages** - nodes, marks, and behavior extensions
|
|
25
|
-
- **125+ chainable commands** - `editor.chain().focus().toggleBold().run()`
|
|
26
|
-
- **Full table support** - cell merging, column resize, row/column controls, cell toolbar, all free and MIT licensed
|
|
27
|
-
- **Tree-shakeable** - import only what you use, your bundler strips the rest
|
|
28
|
-
- **~44 KB gzipped** (own code), <u>[see Packages](https://domternal.dev/v1/packages)</u> for full bundle breakdown with ProseMirror
|
|
29
|
-
- **TypeScript first** - 100% typed, zero `any`
|
|
30
|
-
- **15,000+ tests** - 4,000+ unit and 11,000+ E2E across 230+ Playwright specs and 4 demo apps
|
|
31
|
-
- **Light and dark theme** - 120+ CSS custom properties for full visual control
|
|
32
|
-
- **Inline styles export** - `getHTML({ styled: true })` produces inline CSS ready for email clients, CMS, and Google Docs
|
|
33
|
-
- **SSR helpers** - `generateHTML`, `generateJSON`, `generateText` for server-side rendering
|
|
22
|
+
`@angular/core` (>=17.1), `@angular/forms` (>=17.1), and `@domternal/core` (>=0.11.0)
|
|
23
|
+
are peer dependencies. Add the theme ([`@domternal/theme`](https://www.npmjs.com/package/@domternal/theme))
|
|
24
|
+
to your global stylesheet (e.g. `styles.scss`):
|
|
34
25
|
|
|
35
|
-
|
|
26
|
+
```scss
|
|
27
|
+
@use '@domternal/theme';
|
|
28
|
+
```
|
|
36
29
|
|
|
37
|
-
|
|
38
|
-
- <u>[Introduction](https://domternal.dev/v1/introduction)</u> - core concepts, architecture, and design decisions
|
|
39
|
-
- <u>[Packages & Bundle Size](https://domternal.dev/v1/packages)</u> - what each package includes and bundle size breakdown
|
|
40
|
-
- <u>[Blog](https://domternal.dev/blog)</u>
|
|
30
|
+
## Usage
|
|
41
31
|
|
|
42
|
-
|
|
32
|
+
```ts
|
|
33
|
+
import { Component, signal } from '@angular/core';
|
|
34
|
+
import {
|
|
35
|
+
DomternalEditorComponent,
|
|
36
|
+
DomternalToolbarComponent,
|
|
37
|
+
DomternalBubbleMenuComponent,
|
|
38
|
+
} from '@domternal/angular';
|
|
39
|
+
import { Editor, StarterKit, BubbleMenu } from '@domternal/core';
|
|
43
40
|
|
|
44
|
-
|
|
41
|
+
@Component({
|
|
42
|
+
selector: 'app-editor',
|
|
43
|
+
imports: [
|
|
44
|
+
DomternalEditorComponent,
|
|
45
|
+
DomternalToolbarComponent,
|
|
46
|
+
DomternalBubbleMenuComponent,
|
|
47
|
+
],
|
|
48
|
+
template: `
|
|
49
|
+
@if (editor(); as ed) {
|
|
50
|
+
<domternal-toolbar [editor]="ed" />
|
|
51
|
+
}
|
|
52
|
+
<domternal-editor
|
|
53
|
+
[extensions]="extensions"
|
|
54
|
+
[content]="content"
|
|
55
|
+
(editorCreated)="editor.set($event)"
|
|
56
|
+
/>
|
|
57
|
+
@if (editor(); as ed) {
|
|
58
|
+
<domternal-bubble-menu [editor]="ed" />
|
|
59
|
+
}
|
|
60
|
+
`,
|
|
61
|
+
})
|
|
62
|
+
export class EditorComponent {
|
|
63
|
+
editor = signal<Editor | null>(null);
|
|
64
|
+
extensions = [StarterKit, BubbleMenu];
|
|
65
|
+
content = '<p>Hello from Angular!</p>';
|
|
66
|
+
}
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
The toolbar and bubble menu render their buttons from the loaded extensions, so no
|
|
70
|
+
manual button wiring is needed.
|
|
71
|
+
|
|
72
|
+
### Reactive forms
|
|
73
|
+
|
|
74
|
+
`DomternalEditorComponent` is a `ControlValueAccessor`, so it binds directly to
|
|
75
|
+
`ngModel` or a `FormControl`. Set `outputFormat="json"` to emit JSON instead of HTML;
|
|
76
|
+
calling `disable()`/`enable()` on the bound `FormControl` toggles the editor's editable
|
|
77
|
+
state.
|
|
78
|
+
|
|
79
|
+
```ts
|
|
80
|
+
import { Component } from '@angular/core';
|
|
81
|
+
import { FormControl, ReactiveFormsModule } from '@angular/forms';
|
|
82
|
+
import { DomternalEditorComponent } from '@domternal/angular';
|
|
83
|
+
import { StarterKit } from '@domternal/core';
|
|
84
|
+
|
|
85
|
+
@Component({
|
|
86
|
+
selector: 'app-form-editor',
|
|
87
|
+
imports: [ReactiveFormsModule, DomternalEditorComponent],
|
|
88
|
+
template: `
|
|
89
|
+
<domternal-editor [extensions]="extensions" [formControl]="editorControl" />
|
|
90
|
+
`,
|
|
91
|
+
})
|
|
92
|
+
export class FormEditorComponent {
|
|
93
|
+
extensions = [StarterKit];
|
|
94
|
+
editorControl = new FormControl('<p>Initial content</p>');
|
|
95
|
+
}
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
## Components
|
|
99
|
+
|
|
100
|
+
All components are standalone (no NgModule). Import them directly from
|
|
101
|
+
`@domternal/angular`:
|
|
102
|
+
|
|
103
|
+
- `DomternalEditorComponent` (`<domternal-editor>`): the editor, with reactive
|
|
104
|
+
`extensions` / `content` / `editable` / `autofocus` / `outputFormat` inputs,
|
|
105
|
+
`editorCreated` and content/selection/focus outputs, and read-only `htmlContent`,
|
|
106
|
+
`jsonContent`, `isEmpty`, `isFocused`, `isEditable` signals.
|
|
107
|
+
- `DomternalToolbarComponent` (`<domternal-toolbar>`): auto-rendered formatting
|
|
108
|
+
toolbar with keyboard navigation, custom `icons`, and `layout` overrides.
|
|
109
|
+
- `DomternalBubbleMenuComponent` (`<domternal-bubble-menu>`): inline selection menu
|
|
110
|
+
with `items` / `contexts` / `shouldShow` controls and content projection.
|
|
111
|
+
- `DomternalFloatingMenuComponent` (`<domternal-floating-menu>`): insert menu shown
|
|
112
|
+
on empty lines.
|
|
113
|
+
- `DomternalEmojiPickerComponent` (`<domternal-emoji-picker>`): searchable emoji
|
|
114
|
+
panel, driven by an `emojis: EmojiPickerItem[]` input.
|
|
115
|
+
- `DomternalNotionColorPickerComponent` (`<domternal-notion-color-picker>`):
|
|
116
|
+
Notion-style text and background color palette.
|
|
117
|
+
|
|
118
|
+
`DEFAULT_EXTENSIONS` (`[Document, Paragraph, Text, BaseKeymap, History]`) and the core
|
|
119
|
+
`Editor` class plus `Content`, `AnyExtension`, `FocusPosition`, and `JSONContent` types
|
|
120
|
+
are re-exported for convenience.
|
package/dist/README.md
CHANGED
|
@@ -3,42 +3,118 @@
|
|
|
3
3
|
[](https://www.npmjs.com/package/@domternal/angular)
|
|
4
4
|
[](https://github.com/domternal/domternal/blob/main/LICENSE)
|
|
5
5
|
|
|
6
|
-
|
|
7
|
-
|
|
6
|
+
Angular components for the [Domternal](https://domternal.dev) editor: six standalone,
|
|
7
|
+
signals-driven, OnPush, zoneless-ready components that wrap the headless core with
|
|
8
|
+
Angular-native APIs. `DomternalEditorComponent` implements `ControlValueAccessor`, so
|
|
9
|
+
it drops into `ngModel` and reactive forms. The toolbar, bubble menu, floating menu,
|
|
10
|
+
emoji picker, and Notion color picker auto-render from the extensions you load.
|
|
8
11
|
|
|
9
12
|
## Links
|
|
10
13
|
|
|
11
|
-
<u>[Website](https://domternal.dev)</u> • <u>[Documentation](https://domternal.dev/v1/
|
|
12
|
-
<u>[StackBlitz (Angular)](https://stackblitz.com/edit/domternal-angular-full-example)</u> • <u>[StackBlitz (React)](https://stackblitz.com/edit/domternal-react-full-example)</u> • <u>[StackBlitz (Vue)](https://stackblitz.com/edit/domternal-vue-full-example)</u> • <u>[StackBlitz (Vanilla TS)](https://stackblitz.com/edit/domternal-vanilla-full-example)</u>
|
|
14
|
+
<u>[Website](https://domternal.dev)</u> • <u>[Documentation](https://domternal.dev/v1/guides/angular)</u> • <u>[Live examples](https://domternal.dev/examples)</u>
|
|
13
15
|
|
|
14
|
-
##
|
|
16
|
+
## Install
|
|
15
17
|
|
|
16
|
-
|
|
18
|
+
```bash
|
|
19
|
+
pnpm add @domternal/angular @domternal/core @domternal/theme
|
|
20
|
+
```
|
|
17
21
|
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
- **Vue components** - composable `Domternal` component, `useEditor`/`useEditorState` composables, toolbar, bubble menu, floating menu, emoji picker, notion color picker, custom node views (Vue 3.3+)
|
|
22
|
-
- **Vanilla wrapper** - framework-free class-based API for Astro, Svelte, Solid, plain HTML, and Web Components - editor, toolbar, bubble menu, floating menu, emoji picker, notion color picker
|
|
23
|
-
- **Notion-style block UX** - drag-to-reorder, block context menu, slash command, smart paste, keyboard reorder, floating Table of Contents
|
|
24
|
-
- **70+ extensions across 16 packages** - nodes, marks, and behavior extensions
|
|
25
|
-
- **125+ chainable commands** - `editor.chain().focus().toggleBold().run()`
|
|
26
|
-
- **Full table support** - cell merging, column resize, row/column controls, cell toolbar, all free and MIT licensed
|
|
27
|
-
- **Tree-shakeable** - import only what you use, your bundler strips the rest
|
|
28
|
-
- **~44 KB gzipped** (own code), <u>[see Packages](https://domternal.dev/v1/packages)</u> for full bundle breakdown with ProseMirror
|
|
29
|
-
- **TypeScript first** - 100% typed, zero `any`
|
|
30
|
-
- **15,000+ tests** - 4,000+ unit and 11,000+ E2E across 230+ Playwright specs and 4 demo apps
|
|
31
|
-
- **Light and dark theme** - 120+ CSS custom properties for full visual control
|
|
32
|
-
- **Inline styles export** - `getHTML({ styled: true })` produces inline CSS ready for email clients, CMS, and Google Docs
|
|
33
|
-
- **SSR helpers** - `generateHTML`, `generateJSON`, `generateText` for server-side rendering
|
|
22
|
+
`@angular/core` (>=17.1), `@angular/forms` (>=17.1), and `@domternal/core` (>=0.11.0)
|
|
23
|
+
are peer dependencies. Add the theme ([`@domternal/theme`](https://www.npmjs.com/package/@domternal/theme))
|
|
24
|
+
to your global stylesheet (e.g. `styles.scss`):
|
|
34
25
|
|
|
35
|
-
|
|
26
|
+
```scss
|
|
27
|
+
@use '@domternal/theme';
|
|
28
|
+
```
|
|
36
29
|
|
|
37
|
-
|
|
38
|
-
- <u>[Introduction](https://domternal.dev/v1/introduction)</u> - core concepts, architecture, and design decisions
|
|
39
|
-
- <u>[Packages & Bundle Size](https://domternal.dev/v1/packages)</u> - what each package includes and bundle size breakdown
|
|
40
|
-
- <u>[Blog](https://domternal.dev/blog)</u>
|
|
30
|
+
## Usage
|
|
41
31
|
|
|
42
|
-
|
|
32
|
+
```ts
|
|
33
|
+
import { Component, signal } from '@angular/core';
|
|
34
|
+
import {
|
|
35
|
+
DomternalEditorComponent,
|
|
36
|
+
DomternalToolbarComponent,
|
|
37
|
+
DomternalBubbleMenuComponent,
|
|
38
|
+
} from '@domternal/angular';
|
|
39
|
+
import { Editor, StarterKit, BubbleMenu } from '@domternal/core';
|
|
43
40
|
|
|
44
|
-
|
|
41
|
+
@Component({
|
|
42
|
+
selector: 'app-editor',
|
|
43
|
+
imports: [
|
|
44
|
+
DomternalEditorComponent,
|
|
45
|
+
DomternalToolbarComponent,
|
|
46
|
+
DomternalBubbleMenuComponent,
|
|
47
|
+
],
|
|
48
|
+
template: `
|
|
49
|
+
@if (editor(); as ed) {
|
|
50
|
+
<domternal-toolbar [editor]="ed" />
|
|
51
|
+
}
|
|
52
|
+
<domternal-editor
|
|
53
|
+
[extensions]="extensions"
|
|
54
|
+
[content]="content"
|
|
55
|
+
(editorCreated)="editor.set($event)"
|
|
56
|
+
/>
|
|
57
|
+
@if (editor(); as ed) {
|
|
58
|
+
<domternal-bubble-menu [editor]="ed" />
|
|
59
|
+
}
|
|
60
|
+
`,
|
|
61
|
+
})
|
|
62
|
+
export class EditorComponent {
|
|
63
|
+
editor = signal<Editor | null>(null);
|
|
64
|
+
extensions = [StarterKit, BubbleMenu];
|
|
65
|
+
content = '<p>Hello from Angular!</p>';
|
|
66
|
+
}
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
The toolbar and bubble menu render their buttons from the loaded extensions, so no
|
|
70
|
+
manual button wiring is needed.
|
|
71
|
+
|
|
72
|
+
### Reactive forms
|
|
73
|
+
|
|
74
|
+
`DomternalEditorComponent` is a `ControlValueAccessor`, so it binds directly to
|
|
75
|
+
`ngModel` or a `FormControl`. Set `outputFormat="json"` to emit JSON instead of HTML;
|
|
76
|
+
calling `disable()`/`enable()` on the bound `FormControl` toggles the editor's editable
|
|
77
|
+
state.
|
|
78
|
+
|
|
79
|
+
```ts
|
|
80
|
+
import { Component } from '@angular/core';
|
|
81
|
+
import { FormControl, ReactiveFormsModule } from '@angular/forms';
|
|
82
|
+
import { DomternalEditorComponent } from '@domternal/angular';
|
|
83
|
+
import { StarterKit } from '@domternal/core';
|
|
84
|
+
|
|
85
|
+
@Component({
|
|
86
|
+
selector: 'app-form-editor',
|
|
87
|
+
imports: [ReactiveFormsModule, DomternalEditorComponent],
|
|
88
|
+
template: `
|
|
89
|
+
<domternal-editor [extensions]="extensions" [formControl]="editorControl" />
|
|
90
|
+
`,
|
|
91
|
+
})
|
|
92
|
+
export class FormEditorComponent {
|
|
93
|
+
extensions = [StarterKit];
|
|
94
|
+
editorControl = new FormControl('<p>Initial content</p>');
|
|
95
|
+
}
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
## Components
|
|
99
|
+
|
|
100
|
+
All components are standalone (no NgModule). Import them directly from
|
|
101
|
+
`@domternal/angular`:
|
|
102
|
+
|
|
103
|
+
- `DomternalEditorComponent` (`<domternal-editor>`): the editor, with reactive
|
|
104
|
+
`extensions` / `content` / `editable` / `autofocus` / `outputFormat` inputs,
|
|
105
|
+
`editorCreated` and content/selection/focus outputs, and read-only `htmlContent`,
|
|
106
|
+
`jsonContent`, `isEmpty`, `isFocused`, `isEditable` signals.
|
|
107
|
+
- `DomternalToolbarComponent` (`<domternal-toolbar>`): auto-rendered formatting
|
|
108
|
+
toolbar with keyboard navigation, custom `icons`, and `layout` overrides.
|
|
109
|
+
- `DomternalBubbleMenuComponent` (`<domternal-bubble-menu>`): inline selection menu
|
|
110
|
+
with `items` / `contexts` / `shouldShow` controls and content projection.
|
|
111
|
+
- `DomternalFloatingMenuComponent` (`<domternal-floating-menu>`): insert menu shown
|
|
112
|
+
on empty lines.
|
|
113
|
+
- `DomternalEmojiPickerComponent` (`<domternal-emoji-picker>`): searchable emoji
|
|
114
|
+
panel, driven by an `emojis: EmojiPickerItem[]` input.
|
|
115
|
+
- `DomternalNotionColorPickerComponent` (`<domternal-notion-color-picker>`):
|
|
116
|
+
Notion-style text and background color palette.
|
|
117
|
+
|
|
118
|
+
`DEFAULT_EXTENSIONS` (`[Document, Paragraph, Text, BaseKeymap, History]`) and the core
|
|
119
|
+
`Editor` class plus `Content`, `AnyExtension`, `FocusPosition`, and `JSONContent` types
|
|
120
|
+
are re-exported for convenience.
|