refactor: drop enums

taiga-family · Jul 31, 2024 · e581dda · e581dda
1 parent 34064f6
commit e581dda
Show file tree

Hide file tree

Showing 12 changed files with 83 additions and 124 deletions.
diff --git 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
diff --git a/projects/demo/src/app/pages/starter/index.html b/projects/demo/src/app/pages/starter/index.html
@@ -54,7 +54,7 @@ <h4>Text:</h4>
             <ng-template
                 documentationPropertyMode="input"
                 documentationPropertyName="tools"
-                documentationPropertyType="ReadonlyArray<TuiEditorTool>"
+                documentationPropertyType="readonly TuiEditorToolType[] | Set<TuiEditorToolType>"
                 [documentationPropertyValues]="toolsVariants"
                 [(documentationPropertyValue)]="tools"
             >
@@ -77,8 +77,6 @@ <h4>Text:</h4>
             >
                 Example text shown on empty focused input
             </ng-template>
-        </tui-doc-documentation>
-        <tui-doc-documentation heading="CSS customization">
             <ng-template
                 documentationPropertyMode="input"
                 documentationPropertyName="style.minHeight.px"
@@ -96,57 +94,25 @@ <h4>Text:</h4>
                 Value of CSS-property "max-height"
             </ng-template>
         </tui-doc-documentation>
-        <tui-doc-documentation heading="How to install">
-            <p>Install core-based packages:</p>
-
-            <tui-doc-code code="npm i &#64;taiga-ui/{cdk,core,kit,icons}" />
-
-            <p>Install editor:</p>
-
-            <tui-doc-code code="npm i &#64;taiga-ui/editor" />
-
-            <p>
-                Don't forget that Taiga UI is fully-tree-shakable.
-                <b>You can import even just one entity from our library</b>
-                and be sure that there is no redundant code in your bundle. Bundlphobia badge shows size of the whole
-                library.
-            </p>
+        <tui-doc-documentation heading="How to use">
+            <tui-doc-code code="npm i &#64;taiga-ui/{cdk,core,kit,icons,editor}" />
 
             <ol class="b-demo-steps">
                 <li>
-                    <p>Add to the global styles:</p>
-
                     <tui-doc-code
                         filename="styles.less"
                         [code]="exampleStyles"
                     />
                 </li>
 
                 <li>
-                    <p>Icons are not included in the bundle:</p>
-
                     <tui-doc-code
-                        filename="angular.json"
+                        filename="angular.json (icons are not included in the bundle)"
                         [code]="exampleIcons"
                     />
                 </li>
 
                 <li>
-                    <p>
-                        Import an Angular module for forms and
-                        <code>TuiEditorModule</code>
-                        in the same module where you want to use our component:
-                    </p>
-
-                    <tui-doc-code
-                        filename="app.module.ts"
-                        [code]="exampleImport"
-                    />
-                </li>
-
-                <li>
-                    <p>Add to the template:</p>
-
                     <tui-doc-code
                         filename="app.component.html"
                         [code]="template"
@@ -189,7 +155,7 @@ <h4>Text:</h4>
 
                     <p>
                         It accepts
-                        <code tuiText="ReadonlyMap<string, string>"></code>
+                        <code [innerText]="'ReadonlyMap<string, string>'"></code>
                         : the
                         <strong>key</strong>
                         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
@@ -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<TuiEditorToolType>
+    )[] = [
+        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
@@ -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<string> implements OnDestroy {
     public floatingToolbar = false;
 
     @Input()
-    public tools: readonly TuiEditorTool[] = TUI_EDITOR_DEFAULT_TOOLS;
+    public tools: Set<TuiEditorToolType> | readonly TuiEditorToolType[] =
+        TUI_EDITOR_DEFAULT_TOOLS;
 
     @Output()
     public readonly fileAttached = new EventEmitter<Array<TuiEditorAttachedFile<any>>>();

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
@@ -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<TuiEditorTool>(TUI_EDITOR_DEFAULT_TOOLS);
+    private toolsSet = new Set<TuiEditorToolType>(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<TuiEditorTool> | readonly TuiEditorTool[]) {
+    public set enabledTools(value: Set<TuiEditorToolType> | 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/...c/components/toolbar-tools/table-row-column-manager/table-row-column-manager.component.ts b/...c/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<TuiTableCommands, () => void> = {
+    private readonly commandsRegistry: Record<number, () => 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
@@ -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<TuiEditorTool>(TUI_EDITOR_DEFAULT_TOOLS);
+    protected toolsSet = new Set<TuiEditorToolType>(TUI_EDITOR_DEFAULT_TOOLS);
 
     @Input()
     public colors: ReadonlyMap<string, string> = this.options.colors;
@@ -121,7 +121,7 @@ export class TuiToolbar {
     public readonly fileAttached = new EventEmitter<TuiEditorAttachedFile[]>();
 
     @Input()
-    public set tools(value: readonly TuiEditorTool[]) {
+    public set tools(value: Set<TuiEditorToolType> | 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
@@ -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
diff --git 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
@@ -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];