From e581dda3eb1efac24b694cf426c5d0bb12ee1dac Mon Sep 17 00:00:00 2001 From: splincode Date: Wed, 31 Jul 2024 15:19:25 +0300 Subject: [PATCH] refactor: drop enums --- .../src/app/pages/starter/import/component.md | 16 +++++-- .../src/app/pages/starter/import/import.md | 20 --------- .../demo/src/app/pages/starter/index.html | 44 +++---------------- projects/demo/src/app/pages/starter/index.ts | 9 ++-- .../src/components/editor/editor.component.ts | 5 ++- .../font-style/font-style.component.ts | 8 ++-- .../table-row-column-manager.component.ts | 24 +++++----- .../components/toolbar/toolbar.component.ts | 8 ++-- .../src/constants/default-editor-tools.ts | 7 +-- projects/editor/src/enums/editor-tool.ts | 32 -------------- projects/editor/src/index.ts | 2 +- projects/editor/src/types/editor-tool.ts | 32 ++++++++++++++ 12 files changed, 83 insertions(+), 124 deletions(-) delete mode 100644 projects/demo/src/app/pages/starter/import/import.md delete mode 100644 projects/editor/src/enums/editor-tool.ts create mode 100644 projects/editor/src/types/editor-tool.ts diff --git a/projects/demo/src/app/pages/starter/import/component.md b/projects/demo/src/app/pages/starter/import/component.md index bb3e66788..a6a9c3867 100644 --- a/projects/demo/src/app/pages/starter/import/component.md +++ b/projects/demo/src/app/pages/starter/import/component.md @@ -1,14 +1,24 @@ ```typescript -import {TUI_EDITOR_DEFAULT_EXTENSIONS, TUI_EDITOR_EXTENSIONS} from '@taiga-ui/editor'; +import {TUI_EDITOR_DEFAULT_TOOLS} from '@taiga-ui/editor'; // ... @Component({ standalone: true, + imports: [ + // .. + TuiEditor, + ReactiveFormsModule, + ], + providers: [ + { + provide: TUI_EDITOR_EXTENSIONS, + useValue: TUI_EDITOR_DEFAULT_EXTENSIONS, + }, + ], // ... }) export class App { + readonly tools = TUI_EDITOR_DEFAULT_TOOLS; readonly control = new FormControl(); - - readonly tools: TuiEditorTool[] = TUI_EDITOR_DEFAULT_EXTENSIONS; } ``` diff --git a/projects/demo/src/app/pages/starter/import/import.md b/projects/demo/src/app/pages/starter/import/import.md deleted file mode 100644 index 1248c01d2..000000000 --- a/projects/demo/src/app/pages/starter/import/import.md +++ /dev/null @@ -1,20 +0,0 @@ -```ts -import {TuiEditor, TUI_EDITOR_EXTENSIONS, TUI_EDITOR_DEFAULT_EXTENSIONS} from '@taiga-ui/editor'; -// ... - -@Component({ - standalone: true, - imports: [ - // .. - TuiEditor, - ReactiveFormsModule, - ], - providers: [ - { - provide: TUI_EDITOR_EXTENSIONS, - useValue: TUI_EDITOR_DEFAULT_EXTENSIONS, - }, - ], -}) -export class App {} -``` diff --git a/projects/demo/src/app/pages/starter/index.html b/projects/demo/src/app/pages/starter/index.html index 51ce24e38..2adad0e70 100644 --- a/projects/demo/src/app/pages/starter/index.html +++ b/projects/demo/src/app/pages/starter/index.html @@ -54,7 +54,7 @@

Text:

@@ -77,8 +77,6 @@

Text:

> Example text shown on empty focused input - - Text: Value of CSS-property "max-height" - -

Install core-based packages:

- - - -

Install editor:

- - - -

- Don't forget that Taiga UI is fully-tree-shakable. - You can import even just one entity from our library - and be sure that there is no redundant code in your bundle. Bundlphobia badge shows size of the whole - library. -

+ +
  1. -

    Add to the global styles:

    - Text:
  2. -

    Icons are not included in the bundle:

    -
  3. -

    - Import an Angular module for forms and - TuiEditorModule - in the same module where you want to use our component: -

    - - -
    4. - -
  4. -

    Add to the template:

    - Text:

    It accepts - + : the key is the name of the color (used only for hint and accessibility), the diff --git a/projects/demo/src/app/pages/starter/index.ts b/projects/demo/src/app/pages/starter/index.ts index cec6132e5..5569ac3f5 100644 --- a/projects/demo/src/app/pages/starter/index.ts +++ b/projects/demo/src/app/pages/starter/index.ts @@ -11,6 +11,7 @@ import { TuiEditor, TuiEditorSocket, TuiEditorTool, + TuiEditorToolType, } from '@taiga-ui/editor'; @Component({ @@ -36,7 +37,6 @@ import { ], }) export default class TuiEditorStarter { - protected readonly exampleImport = import('./import/import.md?raw'); 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'); @@ -65,8 +65,11 @@ export default class TuiEditorStarter { protected minHeight: number | null = null; protected maxHeight: number | null = null; - protected readonly toolsVariants: readonly TuiEditorTool[][] = [ - TUI_EDITOR_DEFAULT_TOOLS, + protected readonly toolsVariants: ( + | readonly TuiEditorToolType[] + | Set + )[] = [ + Array.from(TUI_EDITOR_DEFAULT_TOOLS), [ TuiEditorTool.Bold, TuiEditorTool.Italic, diff --git a/projects/editor/src/components/editor/editor.component.ts b/projects/editor/src/components/editor/editor.component.ts index 8144a2004..ce5d31748 100644 --- a/projects/editor/src/components/editor/editor.component.ts +++ b/projects/editor/src/components/editor/editor.component.ts @@ -37,7 +37,7 @@ import {TUI_EDITOR_DEFAULT_TOOLS} from '../../constants/default-editor-tools'; import {TUI_EDITOR_RESIZE_EVENT} from '../../constants/default-events'; import {TuiTiptapEditor} from '../../directives/tiptap-editor/tiptap-editor.directive'; import {TuiTiptapEditorService} from '../../directives/tiptap-editor/tiptap-editor.service'; -import type {TuiEditorTool} from '../../enums/editor-tool'; +import {TuiEditorToolType} from '../../types/editor-tool'; import type {TuiEditorAttachedFile} from '../../interfaces/attached'; import {TUI_EDITOR_OPTIONS} from '../../tokens/editor-options'; import {TUI_EDITOR_VALUE_TRANSFORMER} from '../../tokens/editor-value-transformer'; @@ -129,7 +129,8 @@ export class TuiEditor extends TuiControl implements OnDestroy { public floatingToolbar = false; @Input() - public tools: readonly TuiEditorTool[] = TUI_EDITOR_DEFAULT_TOOLS; + public tools: Set | readonly TuiEditorToolType[] = + TUI_EDITOR_DEFAULT_TOOLS; @Output() public readonly fileAttached = new EventEmitter>>(); diff --git a/projects/editor/src/components/toolbar-tools/font-style/font-style.component.ts b/projects/editor/src/components/toolbar-tools/font-style/font-style.component.ts index 22ad20f65..99f4a0cc3 100644 --- a/projects/editor/src/components/toolbar-tools/font-style/font-style.component.ts +++ b/projects/editor/src/components/toolbar-tools/font-style/font-style.component.ts @@ -5,7 +5,7 @@ import {combineLatest, map} from 'rxjs'; import {TUI_EDITOR_DEFAULT_TOOLS} from '../../../constants/default-editor-tools'; import {TuiTiptapEditorService} from '../../../directives/tiptap-editor/tiptap-editor.service'; -import {TuiEditorTool} from '../../../enums/editor-tool'; +import {TuiEditorTool, TuiEditorToolType} from '../../../types/editor-tool'; import {TUI_EDITOR_OPTIONS} from '../../../tokens/editor-options'; import {TUI_EDITOR_TOOLBAR_TEXTS} from '../../../tokens/i18n'; @@ -18,7 +18,7 @@ import {TUI_EDITOR_TOOLBAR_TEXTS} from '../../../tokens/i18n'; changeDetection: ChangeDetectionStrategy.OnPush, }) export class TuiFontStyle { - private toolsSet = new Set(TUI_EDITOR_DEFAULT_TOOLS); + private toolsSet = new Set(TUI_EDITOR_DEFAULT_TOOLS); protected readonly editorTool: typeof TuiEditorTool = TuiEditorTool; protected readonly options = inject(TUI_EDITOR_OPTIONS); @@ -40,11 +40,11 @@ export class TuiFontStyle { ); @Input() - public set enabledTools(value: Set | readonly TuiEditorTool[]) { + public set enabledTools(value: Set | readonly TuiEditorToolType[]) { this.toolsSet = new Set(value); } - protected isEnabled(tool: TuiEditorTool): boolean { + protected isEnabled(tool: TuiEditorToolType): boolean { return this.toolsSet.has(tool); } } diff --git a/projects/editor/src/components/toolbar-tools/table-row-column-manager/table-row-column-manager.component.ts b/projects/editor/src/components/toolbar-tools/table-row-column-manager/table-row-column-manager.component.ts index e917fb04d..aff4ea8e0 100644 --- a/projects/editor/src/components/toolbar-tools/table-row-column-manager/table-row-column-manager.component.ts +++ b/projects/editor/src/components/toolbar-tools/table-row-column-manager/table-row-column-manager.component.ts @@ -8,16 +8,14 @@ import {TuiTiptapEditorService} from '../../../directives/tiptap-editor/tiptap-e import {TUI_EDITOR_OPTIONS} from '../../../tokens/editor-options'; import {TUI_EDITOR_TABLE_COMMANDS, TUI_EDITOR_TOOLBAR_TEXTS} from '../../../tokens/i18n'; -// TODO: change type in v4.0 -// eslint-disable-next-line no-restricted-syntax -export enum TuiTableCommands { - InsertColumnBefore, - InsertColumnAfter, - InsertRowBefore, - InsertRowAfter, - DeleteColumn, - DeleteRow, -} +export const TuiTableCommands = { + InsertColumnBefore: 0, + InsertColumnAfter: 1, + InsertRowBefore: 2, + InsertRowAfter: 3, + DeleteColumn: 4, + DeleteRow: 5, +} as const; @Component({ standalone: true, @@ -27,7 +25,7 @@ export enum TuiTableCommands { changeDetection: ChangeDetectionStrategy.OnPush, }) export class TuiTableRowColumnManager { - private readonly commandsRegistry: Record void> = { + private readonly commandsRegistry: Record void> = { [TuiTableCommands.InsertColumnAfter]: () => this.editor.addColumnAfter(), [TuiTableCommands.InsertColumnBefore]: () => this.editor.addColumnBefore(), [TuiTableCommands.InsertRowAfter]: () => this.editor.addRowAfter(), @@ -47,7 +45,7 @@ export class TuiTableRowColumnManager { map((texts) => texts.rowsColumnsManaging), ); - protected onTableOption(command: TuiTableCommands): void { - this.commandsRegistry[command](); + protected onTableOption(command: number): void { + this.commandsRegistry[command]?.(); } } diff --git a/projects/editor/src/components/toolbar/toolbar.component.ts b/projects/editor/src/components/toolbar/toolbar.component.ts index 0c810c5c5..9710a5cad 100644 --- a/projects/editor/src/components/toolbar/toolbar.component.ts +++ b/projects/editor/src/components/toolbar/toolbar.component.ts @@ -22,7 +22,7 @@ import {take} from 'rxjs'; import {TUI_EDITOR_DEFAULT_TOOLS} from '../../constants/default-editor-tools'; import {TuiTiptapEditorService} from '../../directives/tiptap-editor/tiptap-editor.service'; -import {TuiEditorTool} from '../../enums/editor-tool'; +import {TuiEditorTool, TuiEditorToolType} from '../../types/editor-tool'; import type {TuiEditorAttachedFile} from '../../interfaces/attached'; import type {TuiEditorOptions} from '../../tokens/editor-options'; import {TUI_EDITOR_OPTIONS} from '../../tokens/editor-options'; @@ -102,7 +102,7 @@ export class TuiToolbar { protected readonly editor = inject(TuiTiptapEditorService); protected readonly attachOptions = inject(TUI_ATTACH_FILES_OPTIONS); protected readonly texts$ = inject(TUI_EDITOR_TOOLBAR_TEXTS); - protected toolsSet = new Set(TUI_EDITOR_DEFAULT_TOOLS); + protected toolsSet = new Set(TUI_EDITOR_DEFAULT_TOOLS); @Input() public colors: ReadonlyMap = this.options.colors; @@ -121,7 +121,7 @@ export class TuiToolbar { public readonly fileAttached = new EventEmitter(); @Input() - public set tools(value: readonly TuiEditorTool[]) { + public set tools(value: Set | readonly TuiEditorToolType[]) { this.toolsSet = new Set(value); } @@ -272,7 +272,7 @@ export class TuiToolbar { this.editor.toggleLink(url ?? ''); } - protected enabled(tool: TuiEditorTool): boolean { + protected enabled(tool: TuiEditorToolType): boolean { return this.toolsSet.has(tool); } diff --git a/projects/editor/src/constants/default-editor-tools.ts b/projects/editor/src/constants/default-editor-tools.ts index d66a9e1b1..c89ea651e 100644 --- a/projects/editor/src/constants/default-editor-tools.ts +++ b/projects/editor/src/constants/default-editor-tools.ts @@ -1,6 +1,6 @@ -import {TuiEditorTool} from '../enums/editor-tool'; +import {TuiEditorTool} from '../types/editor-tool'; -export const TUI_EDITOR_DEFAULT_TOOLS = [ +export const TUI_EDITOR_DEFAULT_TOOLS = new Set([ TuiEditorTool.Undo, TuiEditorTool.Size, TuiEditorTool.Bold, @@ -21,5 +21,6 @@ export const TUI_EDITOR_DEFAULT_TOOLS = [ TuiEditorTool.Sup, TuiEditorTool.Sub, TuiEditorTool.Table, + TuiEditorTool.CellColor, TuiEditorTool.Details, -]; +]); diff --git a/projects/editor/src/enums/editor-tool.ts b/projects/editor/src/enums/editor-tool.ts deleted file mode 100644 index a6b511ceb..000000000 --- a/projects/editor/src/enums/editor-tool.ts +++ /dev/null @@ -1,32 +0,0 @@ -// TODO: change type in v4.0 -// eslint-disable-next-line no-restricted-syntax -export enum TuiEditorTool { - Align = 'justify', - Anchor = 'anchor', - Attach = 'attach', - Bold = 'bold', - Clear = 'clear', - Code = 'code', - Color = 'foreColor', - Details = 'details', - Group = 'group', - HR = 'insertHorizontalRule', - Hilite = 'hiliteColor', - Img = 'image', - Italic = 'italic', - Link = 'link', - List = 'list', - MergeCells = 'mergeCells', - Quote = 'quote', - RowsColumnsManaging = 'rowsColumnsManaging', - Size = 'fontSize', - SplitCells = 'splitCells', - Strikethrough = 'strikeThrough', - Sub = 'subscript', - Sup = 'superscript', - Table = 'insertTable', - CellColor = 'cellColor', - Tex = 'tex', // Todo - Underline = 'underline', - Undo = 'undo', -} diff --git a/projects/editor/src/index.ts b/projects/editor/src/index.ts index 09aa7eb90..6e74196ca 100644 --- a/projects/editor/src/index.ts +++ b/projects/editor/src/index.ts @@ -38,7 +38,7 @@ export * from './directives/tiptap-editor/tiptap-editor.directive'; export * from './directives/tiptap-editor/tiptap-editor.service'; export * from './directives/tiptap-editor/tiptap-editor.types'; export * from './directives/tiptap-editor/utils/is-empty-paragraph'; -export * from './enums/editor-tool'; +export * from './types/editor-tool'; export * from './extensions/background-color'; export * from './extensions/default-editor-extensions'; export * from './extensions/details'; diff --git a/projects/editor/src/types/editor-tool.ts b/projects/editor/src/types/editor-tool.ts new file mode 100644 index 000000000..ba9911a68 --- /dev/null +++ b/projects/editor/src/types/editor-tool.ts @@ -0,0 +1,32 @@ +export const TuiEditorTool = { + Align: 'justify', + Anchor: 'anchor', + Attach: 'attach', + Bold: 'bold', + Clear: 'clear', + Code: 'code', + Color: 'foreColor', + Details: 'details', + Group: 'group', + HR: 'insertHorizontalRule', + Hilite: 'hiliteColor', + Img: 'image', + Italic: 'italic', + Link: 'link', + List: 'list', + MergeCells: 'mergeCells', + Quote: 'quote', + RowsColumnsManaging: 'rowsColumnsManaging', + Size: 'fontSize', + SplitCells: 'splitCells', + Strikethrough: 'strikeThrough', + Sub: 'subscript', + Sup: 'superscript', + Table: 'insertTable', + CellColor: 'cellColor', + Tex: 'tex', + Underline: 'underline', + Undo: 'undo', +} as const; + +export type TuiEditorToolType = (typeof TuiEditorTool)[keyof typeof TuiEditorTool];