From 8173b558012b78b5d8ec989ee6e23004a49cae3a Mon Sep 17 00:00:00 2001 From: splincode Date: Tue, 10 Dec 2024 10:52:24 +0300 Subject: [PATCH] chore(demo): improve editor options description --- projects/demo/src/app/app.pages.ts | 21 +-- projects/demo/src/app/app.routes.ts | 6 +- .../examples/1/index.html | 0 .../examples/1/index.ts | 0 .../app/pages/options/examples/2/index.html | 10 ++ .../src/app/pages/options/examples/2/index.ts | 55 ++++++ .../import/tokens/options.md | 0 .../demo/src/app/pages/options/index.html | 167 ++++++++++++++++++ .../pages/{parse-options => options}/index.ts | 9 + .../src/app/pages/parse-options/index.html | 24 --- .../demo/src/app/pages/starter/index.html | 109 ------------ projects/demo/src/app/pages/starter/index.ts | 2 - .../tokens => upload-files}/file-attach.md | 0 .../src/app/pages/upload-files/index.html | 15 ++ .../demo/src/app/pages/upload-files/index.ts | 1 + projects/demo/src/app/shared/routes.ts | 4 +- 16 files changed, 273 insertions(+), 150 deletions(-) rename projects/demo/src/app/pages/{parse-options => options}/examples/1/index.html (100%) rename projects/demo/src/app/pages/{parse-options => options}/examples/1/index.ts (100%) create mode 100644 projects/demo/src/app/pages/options/examples/2/index.html create mode 100644 projects/demo/src/app/pages/options/examples/2/index.ts rename projects/demo/src/app/pages/{starter => options}/import/tokens/options.md (100%) create mode 100644 projects/demo/src/app/pages/options/index.html rename projects/demo/src/app/pages/{parse-options => options}/index.ts (65%) delete mode 100644 projects/demo/src/app/pages/parse-options/index.html rename projects/demo/src/app/pages/{starter/import/tokens => upload-files}/file-attach.md (100%) diff --git a/projects/demo/src/app/app.pages.ts b/projects/demo/src/app/app.pages.ts index 2d1004d92..66402cbee 100644 --- a/projects/demo/src/app/app.pages.ts +++ b/projects/demo/src/app/app.pages.ts @@ -13,15 +13,10 @@ export const DEMO_PAGES: TuiDocRoutePages = [ }, { section: 'Documentation', - title: 'Tokens', - route: `${TuiDemoPath.StarterKit}/Options`, - keywords: 'TUI_EDITOR_OPTIONS, TUI_ATTACH_FILES_LOADER', - }, - { - section: 'Documentation', - title: 'Parse options', - route: TuiDemoPath.ParseOptions, - keywords: 'editor, parse, options, preserveWhitespace', + title: 'Options', + route: TuiDemoPath.Options, + keywords: + 'editor, parse, options, preserveWhitespace, editor props, tuiEditorOptionsProvider, TUI_EDITOR_OPTIONS', }, { section: 'Documentation', @@ -66,6 +61,12 @@ export const DEMO_PAGES: TuiDocRoutePages = [ route: TuiDemoPath.Focus, keywords: 'editor, focus, focusable, wysiwyg, редактор, фокус, html, rich, text', }, + { + section: 'Documentation', + title: 'Upload files', + route: TuiDemoPath.UploadFiles, + keywords: 'attach, files, upload, TUI_ATTACH_FILES_LOADER', + }, { section: 'Documentation', title: 'Custom tool', @@ -182,7 +183,7 @@ export const DEMO_PAGES: TuiDocRoutePages = [ title: 'Upload', keywords: 'editor, upload, images, wysiwyg, редактор, текст, html, rich, text', - route: `/${TuiDemoPath.ImagesUpload}`, + route: `/${TuiDemoPath.UploadImages}`, }, ], }, diff --git a/projects/demo/src/app/app.routes.ts b/projects/demo/src/app/app.routes.ts index cbdfeb1b2..6307a3c59 100644 --- a/projects/demo/src/app/app.routes.ts +++ b/projects/demo/src/app/app.routes.ts @@ -10,8 +10,8 @@ export const routes: Routes = [ title: 'StarterKit', }), route({ - path: TuiDemoPath.ParseOptions, - loadComponent: async () => import('./pages/parse-options'), + path: TuiDemoPath.Options, + loadComponent: async () => import('./pages/options'), title: 'ParseOptions', }), route({ @@ -115,7 +115,7 @@ export const routes: Routes = [ title: 'Editor — Preview images', }), route({ - path: TuiDemoPath.ImagesUpload, + path: TuiDemoPath.UploadImages, loadComponent: async () => import('./pages/images/upload'), title: 'Editor — Upload images', }), diff --git a/projects/demo/src/app/pages/parse-options/examples/1/index.html b/projects/demo/src/app/pages/options/examples/1/index.html similarity index 100% rename from projects/demo/src/app/pages/parse-options/examples/1/index.html rename to projects/demo/src/app/pages/options/examples/1/index.html diff --git a/projects/demo/src/app/pages/parse-options/examples/1/index.ts b/projects/demo/src/app/pages/options/examples/1/index.ts similarity index 100% rename from projects/demo/src/app/pages/parse-options/examples/1/index.ts rename to projects/demo/src/app/pages/options/examples/1/index.ts diff --git a/projects/demo/src/app/pages/options/examples/2/index.html b/projects/demo/src/app/pages/options/examples/2/index.html new file mode 100644 index 000000000..835c1e662 --- /dev/null +++ b/projects/demo/src/app/pages/options/examples/2/index.html @@ -0,0 +1,10 @@ + + +

HTML:

+ + +

Text:

+

{{ 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 +
+
+ map of colors in toolbar's dropdowns with color-selection. + +

+ It accepts + + : the + key + is the name of the color (used only for hint and accessibility), the + value + – HTML color code. +

+
+ +
+ blankColor +
+
+ Null color. It is used in situations when there is no color selected. + +

+ it accepts + string + (HTML color code). +

+
+ +
+ fontOptions +
+
You can customize your own list of font sizes in editor.
+ +
+ translate +
+
+ 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.. +
+ +
+ icons +
+
+ You can redefine + + icons + + by names. + + More -> + +
+ +
+ spellcheck +
+
Defines whether the editor may be checked for spelling errors.
+ +
+ enableDefaultStyles +
+
+ By default, editor styles will be included without encapsulation, if you want your own styles, you can + disable them. +
+
+ + + + +

+ 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: +

+ + + diff --git a/projects/demo/src/app/pages/parse-options/index.ts b/projects/demo/src/app/pages/options/index.ts similarity index 65% rename from projects/demo/src/app/pages/parse-options/index.ts rename to projects/demo/src/app/pages/options/index.ts index 62dd63008..6583edb4f 100644 --- a/projects/demo/src/app/pages/parse-options/index.ts +++ b/projects/demo/src/app/pages/options/index.ts @@ -9,10 +9,19 @@ import {TuiLink} from '@taiga-ui/core'; changeDetection: ChangeDetectionStrategy.OnPush, }) export default class Example { + protected readonly exampleOptions = import('./import/tokens/options.md?raw'); + protected readonly component1 = import('./examples/1'); protected readonly example1 = { TypeScript: import('./examples/1/index.ts?raw'), HTML: import('./examples/1/index.html?raw'), }; + + protected readonly component2 = import('./examples/2'); + + protected readonly example2 = { + TypeScript: import('./examples/2/index.ts?raw'), + HTML: import('./examples/2/index.html?raw'), + }; } diff --git a/projects/demo/src/app/pages/parse-options/index.html b/projects/demo/src/app/pages/parse-options/index.html deleted file mode 100644 index 325e39a5b..000000000 --- a/projects/demo/src/app/pages/parse-options/index.html +++ /dev/null @@ -1,24 +0,0 @@ - -

- Passed content is parsed by ProseMirror. To hook into the parsing, you can pass parseOptions which are then - handled by - - ProseMirror. - -

- - - diff --git a/projects/demo/src/app/pages/starter/index.html b/projects/demo/src/app/pages/starter/index.html index a7c4290e1..3de8c2e1b 100644 --- a/projects/demo/src/app/pages/starter/index.html +++ b/projects/demo/src/app/pages/starter/index.html @@ -149,113 +149,4 @@

Text:

- - - - - -

- Description of the available configurations: -

-
-
- appearance -
-
-

Visual presets of interactive components

-
- -
- colors -
-
- map of colors in toolbar's dropdowns with color-selection. - -

- It accepts - - : the - key - is the name of the color (used only for hint and accessibility), the - value - – HTML color code. -

-
- -
- blankColor -
-
- Null color. It is used in situations when there is no color selected. - -

- it accepts - string - (HTML color code). -

-
- -
- fontOptions -
-
You can customize your own list of font sizes in editor.
- -
- translate -
-
- 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.. -
- -
- icons -
-
- You can redefine - - icons - - by names. - - More -> - -
- -
- spellcheck -
-
Defines whether the editor may be checked for spelling errors.
- -
- enableDefaultStyles -
-
- By default, editor styles will be included without encapsulation, if you want your own styles, you - can disable them. -
-
- - - - - - diff --git a/projects/demo/src/app/pages/starter/index.ts b/projects/demo/src/app/pages/starter/index.ts index 6839262a4..47bd9dc4a 100644 --- a/projects/demo/src/app/pages/starter/index.ts +++ b/projects/demo/src/app/pages/starter/index.ts @@ -44,8 +44,6 @@ import { export default class TuiEditorStarter { protected readonly template = import('./import/template.md?raw'); protected readonly component = import('./import/component.md?raw'); - protected readonly exampleOptions = import('./import/tokens/options.md?raw'); - protected readonly exampleFileAttach = import('./import/tokens/file-attach.md?raw'); protected readonly exampleStyles = import('./import/styles.less.md?raw'); protected readonly exampleIcons = import('./import/angular.json.md?raw'); protected readonly isE2E = inject(TUI_IS_E2E); diff --git a/projects/demo/src/app/pages/starter/import/tokens/file-attach.md b/projects/demo/src/app/pages/upload-files/file-attach.md similarity index 100% rename from projects/demo/src/app/pages/starter/import/tokens/file-attach.md rename to projects/demo/src/app/pages/upload-files/file-attach.md diff --git a/projects/demo/src/app/pages/upload-files/index.html b/projects/demo/src/app/pages/upload-files/index.html index 3531d3d90..2b218bea5 100644 --- a/projects/demo/src/app/pages/upload-files/index.html +++ b/projects/demo/src/app/pages/upload-files/index.html @@ -2,6 +2,21 @@ header="Editor" type="components" > + + + You can use + TUI_ATTACH_FILES_LOADER + and + TUI_ATTACH_FILES_OPTIONS + tokens for attach any files in your editor + + + +