{{ control.value }}
diff --git a/projects/demo/src/app/pages/options/examples/2/index.ts b/projects/demo/src/app/pages/options/examples/2/index.ts new file mode 100644 index 000000000..2b1ee559d --- /dev/null +++ b/projects/demo/src/app/pages/options/examples/2/index.ts @@ -0,0 +1,55 @@ +import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core'; +import {FormControl, ReactiveFormsModule} from '@angular/forms'; +import {TuiAlertService} from '@taiga-ui/core'; +import type {TuiEditorOptions} from '@taiga-ui/editor'; +import { + TUI_EDITOR_DEFAULT_OPTIONS, + TUI_EDITOR_EXTENSIONS, + TUI_EDITOR_OPTIONS, + TuiEditor, + TuiEditorSocket, + TuiEditorTool, +} from '@taiga-ui/editor'; + +@Component({ + standalone: true, + imports: [ReactiveFormsModule, TuiEditor, TuiEditorSocket], + templateUrl: './index.html', + encapsulation: ViewEncapsulation.None, + changeDetection: ChangeDetectionStrategy.OnPush, + providers: [ + { + provide: TUI_EDITOR_OPTIONS, + deps: [TuiAlertService], + useFactory(alerts: TuiAlertService): TuiEditorOptions { + return { + ...TUI_EDITOR_DEFAULT_OPTIONS, + editorProps: { + handleDOMEvents: { + keydown: (_, event: KeyboardEvent) => { + if (event.key === 'Enter' && !event.shiftKey) { + alerts + .open('Enter pressed') + .subscribe(); + } + + return true; + }, + }, + }, + }; + }, + }, + { + provide: TUI_EDITOR_EXTENSIONS, + useValue: [ + import('@taiga-ui/editor').then(({TuiStarterKit}) => TuiStarterKit), + ], + }, + ], +}) +export default class Example { + protected readonly builtInTools = [TuiEditorTool.Undo]; + + protected control = new FormControl('Hello world
'); +} diff --git a/projects/demo/src/app/pages/starter/import/tokens/options.md b/projects/demo/src/app/pages/options/import/tokens/options.md similarity index 100% rename from projects/demo/src/app/pages/starter/import/tokens/options.md rename to projects/demo/src/app/pages/options/import/tokens/options.md diff --git a/projects/demo/src/app/pages/options/index.html b/projects/demo/src/app/pages/options/index.html new file mode 100644 index 000000000..bb30fda6e --- /dev/null +++ b/projects/demo/src/app/pages/options/index.html @@ -0,0 +1,167 @@ +
+ You can also passed the default options inherited from
+
+ TipTap.
+
+ By default you can use a
+ tuiEditorOptionsProvider
+ helper to override TUI_EDITOR_OPTIONS.
+
+ Description of the available configurations: +
+appearance
+ Visual presets of interactive components
+colors
+
+ It accepts
+
+ : the
+ key
+ is the name of the color (used only for hint and accessibility), the
+ value
+ – HTML color code.
+
blankColor
+
+ it accepts
+ string
+ (HTML color code).
+
fontOptions
+ translate
+ icons
+ spellcheck
+ enableDefaultStyles
+ + Passed content is parsed by ProseMirror. To hook into the parsing, you can pass parseOptions which are + then handled by + + ProseMirror. + + By default, whitespace is collapsed as per HTML's rules. Pass true to preserve whitespace, but normalize + newlines to spaces, and 'full' to preserve whitespace entirely. +
++ For advanced use cases, you can pass editorProps which will be handled by + + ProseMirror + + . You can use it to override various editor events or change editor DOM element attributes, for example + to add some Tailwind classes. Here is an example: +
+- Passed content is parsed by ProseMirror. To hook into the parsing, you can pass parseOptions which are then - handled by - - ProseMirror. - -
- -- Description of the available configurations: -
-appearance
- Visual presets of interactive components
-colors
-
- It accepts
-
- : the
- key
- is the name of the color (used only for hint and accessibility), the
- value
- – HTML color code.
-
blankColor
-
- it accepts
- string
- (HTML color code).
-
fontOptions
- translate
- icons
- spellcheck
- enableDefaultStyles
- TUI_ATTACH_FILES_LOADER
+ and
+ TUI_ATTACH_FILES_OPTIONS
+ tokens for attach any files in your editor
+