generated from Tinkoff/angular-open-source-starter
-
Notifications
You must be signed in to change notification settings - Fork 7
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore(demo): improve editor options description
- Loading branch information
Showing
16 changed files
with
273 additions
and
150 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| <tui-editor | ||
| [formControl]="control" | ||
| [tools]="builtInTools" | ||
| /> | ||
|
|
||
| <h4>HTML:</h4> | ||
| <tui-editor-socket [content]="control.value || ''" /> | ||
|
|
||
| <h4>Text:</h4> | ||
| <p>{{ control.value }}</p> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 <strong>pressed</strong>') | ||
| .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('<p>Hello world</p>'); | ||
| } |
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,167 @@ | ||
| <tui-doc-page | ||
| header="Editor" | ||
| type="components" | ||
| > | ||
| <tui-doc-example | ||
| id="options" | ||
| heading="TUI_EDITOR_OPTIONS" | ||
| [description]="info" | ||
| > | ||
| <ng-template #info> | ||
| <p> | ||
| You can also passed the default options inherited from | ||
| <a | ||
| href="https://github.com/ueberdosis/tiptap/blob/develop/packages/core/src/types.ts#L74" | ||
| tuiLink | ||
| > | ||
| TipTap. | ||
| </a> | ||
| By default you can use a | ||
| <code>tuiEditorOptionsProvider</code> | ||
| helper to override TUI_EDITOR_OPTIONS. | ||
| </p> | ||
| </ng-template> | ||
|
|
||
| <tui-doc-code [code]="exampleOptions" /> | ||
|
|
||
| <p> | ||
| <strong>Description of the available configurations:</strong> | ||
| </p> | ||
| <dl> | ||
| <dt> | ||
| <code>appearance</code> | ||
| </dt> | ||
| <dd class="tui-space_bottom-5"> | ||
| <p>Visual presets of interactive components</p> | ||
| </dd> | ||
|
|
||
| <dt> | ||
| <code>colors</code> | ||
| </dt> | ||
| <dd class="tui-space_bottom-5"> | ||
| map of colors in toolbar's dropdowns with color-selection. | ||
|
|
||
| <p> | ||
| It accepts | ||
| <code [innerText]="'ReadonlyMap<string, string>'"></code> | ||
| : the | ||
| <strong>key</strong> | ||
| is the name of the color (used only for hint and accessibility), the | ||
| <strong>value</strong> | ||
| – HTML color code. | ||
| </p> | ||
| </dd> | ||
|
|
||
| <dt> | ||
| <code>blankColor</code> | ||
| </dt> | ||
| <dd class="tui-space_bottom-5"> | ||
| Null color. It is used in situations when there is no color selected. | ||
|
|
||
| <p> | ||
| it accepts | ||
| <code>string</code> | ||
| (HTML color code). | ||
| </p> | ||
| </dd> | ||
|
|
||
| <dt> | ||
| <code>fontOptions</code> | ||
| </dt> | ||
| <dd class="tui-space_bottom-5">You can customize your own list of font sizes in editor.</dd> | ||
|
|
||
| <dt> | ||
| <code>translate</code> | ||
| </dt> | ||
| <dd class="tui-space_bottom-5"> | ||
| Although not all browsers recognize this attribute, it is respected by automatic translation systems | ||
| such as Google Translate, and may also be respected by tools used by human translators. As such it's | ||
| important that web authors use this attribute to mark content that should not be translated.. | ||
| </dd> | ||
|
|
||
| <dt> | ||
| <code>icons</code> | ||
| </dt> | ||
| <dd class="tui-space_bottom-5"> | ||
| You can redefine | ||
| <a | ||
| href="https://github.com/taiga-family/tui-editor/blob/main/projects/tui-editor/tokens/editor-options.ts#L74" | ||
| rel="noreferrer" | ||
| target="_blank" | ||
| tuiLink | ||
| > | ||
| icons | ||
| </a> | ||
| by names. | ||
| <a | ||
| href="https://taiga-ui.dev/icons/mapping" | ||
| rel="noreferrer" | ||
| target="_blank" | ||
| tuiLink | ||
| > | ||
| More -> | ||
| </a> | ||
| </dd> | ||
|
|
||
| <dt> | ||
| <code>spellcheck</code> | ||
| </dt> | ||
| <dd class="tui-space_bottom-5">Defines whether the editor may be checked for spelling errors.</dd> | ||
|
|
||
| <dt> | ||
| <code>enableDefaultStyles</code> | ||
| </dt> | ||
| <dd class="tui-space_bottom-5"> | ||
| By default, editor styles will be included without encapsulation, if you want your own styles, you can | ||
| disable them. | ||
| </dd> | ||
| </dl> | ||
| </tui-doc-example> | ||
|
|
||
| <tui-doc-example | ||
| id="preserve-whitespace" | ||
| heading="Preserve whitespace" | ||
| [component]="component1" | ||
| [content]="example1" | ||
| [description]="first" | ||
| > | ||
| <ng-template #first> | ||
| <p> | ||
| Passed content is parsed by ProseMirror. To hook into the parsing, you can pass parseOptions which are | ||
| then handled by | ||
| <a | ||
| href="https://prosemirror.net/docs/ref/#model.ParseOptions" | ||
| target="_blank" | ||
| tuiLink | ||
| > | ||
| ProseMirror. | ||
| </a> | ||
| 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. | ||
| </p> | ||
| </ng-template> | ||
| </tui-doc-example> | ||
|
|
||
| <tui-doc-example | ||
| id="editor-props" | ||
| heading="Editor Props" | ||
| [component]="component2" | ||
| [content]="example2" | ||
| [description]="second" | ||
| > | ||
| <ng-template #second> | ||
| <p> | ||
| For advanced use cases, you can pass editorProps which will be handled by | ||
| <a | ||
| href="https://prosemirror.net/docs/ref/#view.EditorProps" | ||
| target="_blank" | ||
| tuiLink | ||
| > | ||
| ProseMirror | ||
| </a> | ||
| . 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: | ||
| </p> | ||
| </ng-template> | ||
| </tui-doc-example> | ||
| </tui-doc-page> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.