@domternal/angular 0.15.0 → 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 +18 -5
- package/dist/README.md +18 -5
- package/dist/fesm2022/domternal-angular.mjs +188 -310
- package/dist/fesm2022/domternal-angular.mjs.map +1 -1
- package/dist/types/domternal-angular.d.ts +29 -21
- package/package.json +5 -2
package/README.md
CHANGED
|
@@ -19,7 +19,7 @@ emoji picker, and Notion color picker auto-render from the extensions you load.
|
|
|
19
19
|
pnpm add @domternal/angular @domternal/core @domternal/theme
|
|
20
20
|
```
|
|
21
21
|
|
|
22
|
-
`@angular/core` (>=17.1), `@angular/forms` (>=17.1), `@angular/platform-browser` (>=17.1), and `@domternal/core` (>=0.
|
|
22
|
+
`@angular/core` (>=17.1), `@angular/forms` (>=17.1), `@angular/platform-browser` (>=17.1), and `@domternal/core` (>=1.0.0)
|
|
23
23
|
are peer dependencies. Add the theme ([`@domternal/theme`](https://www.npmjs.com/package/@domternal/theme))
|
|
24
24
|
to your global stylesheet (e.g. `styles.scss`):
|
|
25
25
|
|
|
@@ -69,6 +69,17 @@ export class EditorComponent {
|
|
|
69
69
|
The toolbar and bubble menu render their buttons from the loaded extensions, so no
|
|
70
70
|
manual button wiring is needed.
|
|
71
71
|
|
|
72
|
+
### Presets
|
|
73
|
+
|
|
74
|
+
`preset="notion"` switches the editor to the Notion-style experience in one input. It paints
|
|
75
|
+
the `dm-notion-mode` class on the component host for you, and preset-aware code follows it:
|
|
76
|
+
the bubble menu serves the Notion text context, and images offer align controls instead of
|
|
77
|
+
float. `'classic'` is the default, and the input is read once, when the editor is created.
|
|
78
|
+
|
|
79
|
+
```html
|
|
80
|
+
<domternal-editor [extensions]="extensions" preset="notion" />
|
|
81
|
+
```
|
|
82
|
+
|
|
72
83
|
### Reactive forms
|
|
73
84
|
|
|
74
85
|
`DomternalEditorComponent` is a `ControlValueAccessor`, so it binds directly to
|
|
@@ -100,10 +111,12 @@ export class FormEditorComponent {
|
|
|
100
111
|
All components are standalone (no NgModule). Import them directly from
|
|
101
112
|
`@domternal/angular`:
|
|
102
113
|
|
|
103
|
-
- `DomternalEditorComponent` (`<domternal-editor>`): the editor, with
|
|
104
|
-
`extensions` / `
|
|
105
|
-
`
|
|
106
|
-
|
|
114
|
+
- `DomternalEditorComponent` (`<domternal-editor>`): the editor, with
|
|
115
|
+
`extensions` / `history` / `content` / `editable` / `preset` / `autofocus` /
|
|
116
|
+
`outputFormat` inputs (`extensions`, `content`, `editable`, and `outputFormat` are
|
|
117
|
+
reactive; the rest are read once at creation), `editorCreated`, `contentUpdated`,
|
|
118
|
+
`selectionChanged`, `focusChanged`, `blurChanged`, and `editorDestroyed` outputs, and
|
|
119
|
+
read-only `htmlContent`, `jsonContent`, `isEmpty`, `isFocused`, `isEditable` signals.
|
|
107
120
|
- `DomternalToolbarComponent` (`<domternal-toolbar>`): auto-rendered formatting
|
|
108
121
|
toolbar with keyboard navigation, custom `icons`, and `layout` overrides.
|
|
109
122
|
- `DomternalBubbleMenuComponent` (`<domternal-bubble-menu>`): inline selection menu
|
package/dist/README.md
CHANGED
|
@@ -19,7 +19,7 @@ emoji picker, and Notion color picker auto-render from the extensions you load.
|
|
|
19
19
|
pnpm add @domternal/angular @domternal/core @domternal/theme
|
|
20
20
|
```
|
|
21
21
|
|
|
22
|
-
`@angular/core` (>=17.1), `@angular/forms` (>=17.1), `@angular/platform-browser` (>=17.1), and `@domternal/core` (>=0.
|
|
22
|
+
`@angular/core` (>=17.1), `@angular/forms` (>=17.1), `@angular/platform-browser` (>=17.1), and `@domternal/core` (>=1.0.0)
|
|
23
23
|
are peer dependencies. Add the theme ([`@domternal/theme`](https://www.npmjs.com/package/@domternal/theme))
|
|
24
24
|
to your global stylesheet (e.g. `styles.scss`):
|
|
25
25
|
|
|
@@ -69,6 +69,17 @@ export class EditorComponent {
|
|
|
69
69
|
The toolbar and bubble menu render their buttons from the loaded extensions, so no
|
|
70
70
|
manual button wiring is needed.
|
|
71
71
|
|
|
72
|
+
### Presets
|
|
73
|
+
|
|
74
|
+
`preset="notion"` switches the editor to the Notion-style experience in one input. It paints
|
|
75
|
+
the `dm-notion-mode` class on the component host for you, and preset-aware code follows it:
|
|
76
|
+
the bubble menu serves the Notion text context, and images offer align controls instead of
|
|
77
|
+
float. `'classic'` is the default, and the input is read once, when the editor is created.
|
|
78
|
+
|
|
79
|
+
```html
|
|
80
|
+
<domternal-editor [extensions]="extensions" preset="notion" />
|
|
81
|
+
```
|
|
82
|
+
|
|
72
83
|
### Reactive forms
|
|
73
84
|
|
|
74
85
|
`DomternalEditorComponent` is a `ControlValueAccessor`, so it binds directly to
|
|
@@ -100,10 +111,12 @@ export class FormEditorComponent {
|
|
|
100
111
|
All components are standalone (no NgModule). Import them directly from
|
|
101
112
|
`@domternal/angular`:
|
|
102
113
|
|
|
103
|
-
- `DomternalEditorComponent` (`<domternal-editor>`): the editor, with
|
|
104
|
-
`extensions` / `
|
|
105
|
-
`
|
|
106
|
-
|
|
114
|
+
- `DomternalEditorComponent` (`<domternal-editor>`): the editor, with
|
|
115
|
+
`extensions` / `history` / `content` / `editable` / `preset` / `autofocus` /
|
|
116
|
+
`outputFormat` inputs (`extensions`, `content`, `editable`, and `outputFormat` are
|
|
117
|
+
reactive; the rest are read once at creation), `editorCreated`, `contentUpdated`,
|
|
118
|
+
`selectionChanged`, `focusChanged`, `blurChanged`, and `editorDestroyed` outputs, and
|
|
119
|
+
read-only `htmlContent`, `jsonContent`, `isEmpty`, `isFocused`, `isEditable` signals.
|
|
107
120
|
- `DomternalToolbarComponent` (`<domternal-toolbar>`): auto-rendered formatting
|
|
108
121
|
toolbar with keyboard navigation, custom `icons`, and `layout` overrides.
|
|
109
122
|
- `DomternalBubbleMenuComponent` (`<domternal-bubble-menu>`): inline selection menu
|