@domternal/angular 0.11.1 → 0.12.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 +105 -29
- package/dist/README.md +105 -29
- package/dist/fesm2022/domternal-angular.mjs +11 -3
- package/dist/fesm2022/domternal-angular.mjs.map +1 -1
- package/dist/types/domternal-angular.d.ts +6 -1
- package/package.json +3 -3
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.
|
|
@@ -11,6 +11,11 @@ class DomternalEditorComponent {
|
|
|
11
11
|
editorRef = viewChild.required('editorRef');
|
|
12
12
|
// === Inputs ===
|
|
13
13
|
extensions = input([], ...(ngDevMode ? [{ debugName: "extensions" }] : /* istanbul ignore next */ []));
|
|
14
|
+
/**
|
|
15
|
+
* Whether the built-in History extension is included. Disable it when an
|
|
16
|
+
* extension brings its own undo/redo, such as collaborative editing.
|
|
17
|
+
*/
|
|
18
|
+
history = input(true, ...(ngDevMode ? [{ debugName: "history" }] : /* istanbul ignore next */ []));
|
|
14
19
|
content = input('', ...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
|
|
15
20
|
editable = input(true, ...(ngDevMode ? [{ debugName: "editable" }] : /* istanbul ignore next */ []));
|
|
16
21
|
autofocus = input(false, ...(ngDevMode ? [{ debugName: "autofocus" }] : /* istanbul ignore next */ []));
|
|
@@ -138,9 +143,12 @@ class DomternalEditorComponent {
|
|
|
138
143
|
createEditor() {
|
|
139
144
|
const initialContent = this._pendingContent ?? this.content();
|
|
140
145
|
this._pendingContent = null;
|
|
146
|
+
const defaults = this.history()
|
|
147
|
+
? DEFAULT_EXTENSIONS
|
|
148
|
+
: DEFAULT_EXTENSIONS.filter((extension) => extension.name !== 'history');
|
|
141
149
|
this._editor = new Editor({
|
|
142
150
|
element: this.editorRef().nativeElement,
|
|
143
|
-
extensions: [...
|
|
151
|
+
extensions: [...defaults, ...this.extensions()],
|
|
144
152
|
content: initialContent,
|
|
145
153
|
editable: this.editable(),
|
|
146
154
|
autofocus: this.autofocus(),
|
|
@@ -191,7 +199,7 @@ class DomternalEditorComponent {
|
|
|
191
199
|
});
|
|
192
200
|
}
|
|
193
201
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DomternalEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
194
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.5", type: DomternalEditorComponent, isStandalone: true, selector: "domternal-editor", inputs: { extensions: { classPropertyName: "extensions", publicName: "extensions", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, outputFormat: { classPropertyName: "outputFormat", publicName: "outputFormat", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { editorCreated: "editorCreated", contentUpdated: "contentUpdated", selectionChanged: "selectionChanged", focusChanged: "focusChanged", blurChanged: "blurChanged", editorDestroyed: "editorDestroyed" }, host: { attributes: { "data-dm-editor-ui": "" }, classAttribute: "dm-editor" }, providers: [
|
|
202
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.5", type: DomternalEditorComponent, isStandalone: true, selector: "domternal-editor", inputs: { extensions: { classPropertyName: "extensions", publicName: "extensions", isSignal: true, isRequired: false, transformFunction: null }, history: { classPropertyName: "history", publicName: "history", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, outputFormat: { classPropertyName: "outputFormat", publicName: "outputFormat", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { editorCreated: "editorCreated", contentUpdated: "contentUpdated", selectionChanged: "selectionChanged", focusChanged: "focusChanged", blurChanged: "blurChanged", editorDestroyed: "editorDestroyed" }, host: { attributes: { "data-dm-editor-ui": "" }, classAttribute: "dm-editor" }, providers: [
|
|
195
203
|
{
|
|
196
204
|
provide: NG_VALUE_ACCESSOR,
|
|
197
205
|
useExisting: forwardRef(() => DomternalEditorComponent),
|
|
@@ -208,7 +216,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
|
|
|
208
216
|
multi: true,
|
|
209
217
|
},
|
|
210
218
|
], styles: [":host{display:block}\n"] }]
|
|
211
|
-
}], ctorParameters: () => [], propDecorators: { editorRef: [{ type: i0.ViewChild, args: ['editorRef', { isSignal: true }] }], extensions: [{ type: i0.Input, args: [{ isSignal: true, alias: "extensions", required: false }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], outputFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "outputFormat", required: false }] }], editorCreated: [{ type: i0.Output, args: ["editorCreated"] }], contentUpdated: [{ type: i0.Output, args: ["contentUpdated"] }], selectionChanged: [{ type: i0.Output, args: ["selectionChanged"] }], focusChanged: [{ type: i0.Output, args: ["focusChanged"] }], blurChanged: [{ type: i0.Output, args: ["blurChanged"] }], editorDestroyed: [{ type: i0.Output, args: ["editorDestroyed"] }] } });
|
|
219
|
+
}], ctorParameters: () => [], propDecorators: { editorRef: [{ type: i0.ViewChild, args: ['editorRef', { isSignal: true }] }], extensions: [{ type: i0.Input, args: [{ isSignal: true, alias: "extensions", required: false }] }], history: [{ type: i0.Input, args: [{ isSignal: true, alias: "history", required: false }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], outputFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "outputFormat", required: false }] }], editorCreated: [{ type: i0.Output, args: ["editorCreated"] }], contentUpdated: [{ type: i0.Output, args: ["contentUpdated"] }], selectionChanged: [{ type: i0.Output, args: ["selectionChanged"] }], focusChanged: [{ type: i0.Output, args: ["focusChanged"] }], blurChanged: [{ type: i0.Output, args: ["blurChanged"] }], editorDestroyed: [{ type: i0.Output, args: ["editorDestroyed"] }] } });
|
|
212
220
|
|
|
213
221
|
const isMac = typeof navigator !== 'undefined' && /Mac|iPhone|iPad|iPod/.test(navigator.userAgent);
|
|
214
222
|
class DomternalToolbarComponent {
|