fix: add proper Appearance support (#1414)

taiga-family · Sep 19, 2024 · 9fd608c · 9fd608c
1 parent 7d9ea58
commit 9fd608c
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 40 deletions.
diff --git a/projects/editor/src/components/editor/editor.component.html b/projects/editor/src/components/editor/editor.component.html
@@ -5,7 +5,7 @@
     <div class="t-toolbar-wrapper">
         <tui-toolbar
             *ngIf="editorLoaded && !floatingToolbar"
-            [disabled]="!interactive || readOnly()"
+            [disabled]="!interactive()"
             [tools]="tools"
             (fileAttached)="fileAttached.emit($event)"
         >
@@ -66,7 +66,7 @@
                 <div [class.t-floating]="floatingToolbar">
                     <tui-toolbar
                         *ngIf="editorLoaded && floatingToolbar"
-                        [disabled]="!interactive || readOnly()"
+                        [disabled]="!interactive()"
                         [tools]="tools"
                         (fileAttached)="fileAttached.emit($event)"
                     >

diff --git a/projects/editor/src/components/editor/editor.component.less b/projects/editor/src/components/editor/editor.component.less
@@ -6,17 +6,11 @@
     isolation: isolate;
     font: var(--tui-font-text-m);
     border-radius: var(--tui-radius-m);
-    outline: 0.0625rem solid var(--tui-border-normal);
     max-block-size: inherit;
     min-block-size: 10rem;
     box-sizing: border-box;
     overflow: auto;
 
-    &._has-focus {
-        outline-color: var(--tui-background-accent-1);
-        outline-width: 0.125rem;
-    }
-
     &::after {
         content: '';
         display: table;

diff --git a/projects/editor/src/components/editor/editor.component.ts b/projects/editor/src/components/editor/editor.component.ts
@@ -1,35 +1,46 @@
 import {AsyncPipe, NgIf, NgTemplateOutlet} from '@angular/common';
-import type {OnDestroy} from '@angular/core';
 import {
     ChangeDetectionStrategy,
     Component,
+    computed,
     DestroyRef,
     ElementRef,
     EventEmitter,
     inject,
     Input,
     NgZone,
+    type OnDestroy,
     Output,
     ViewChild,
 } from '@angular/core';
-import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
+import {takeUntilDestroyed, toSignal} from '@angular/core/rxjs-interop';
 import {WA_WINDOW} from '@ng-web-apis/common';
-import type {TuiBooleanHandler, TuiValueTransformer} from '@taiga-ui/cdk';
+import {
+    TUI_TRUE_HANDLER,
+    type TuiBooleanHandler,
+    tuiInjectElement,
+    type TuiValueTransformer,
+    tuiWatch,
+} from '@taiga-ui/cdk';
 import {
     TUI_FALSE_HANDLER,
     TuiActiveZone,
     tuiAutoFocusOptionsProvider,
     TuiControl,
     tuiZonefree,
 } from '@taiga-ui/cdk';
-import type {TuiDropdownDirective} from '@taiga-ui/core';
 import {
     TUI_ANIMATIONS_DEFAULT_DURATION,
+    TUI_APPEARANCE_OPTIONS,
+    TuiAppearance,
+    tuiAppearanceFocus,
+    tuiAppearanceMode,
+    tuiAppearanceState,
     TuiDropdown,
+    type TuiDropdownDirective,
     TuiScrollbar,
-    TuiWithAppearance,
 } from '@taiga-ui/core';
-import {delay, fromEvent, throttleTime} from 'rxjs';
+import {delay, fromEvent, map, merge, throttleTime} from 'rxjs';
 
 import type {AbstractTuiEditor} from '../../abstract/editor-adapter.abstract';
 import {TUI_EDITOR_RESIZE_EVENT} from '../../constants/default-events';
@@ -73,17 +84,23 @@ import {TuiEditorPortalHost} from './portal/editor-portal-host.component';
     providers: [
         tuiAutoFocusOptionsProvider({delay: TUI_ANIMATIONS_DEFAULT_DURATION}),
         TUI_EDITOR_PROVIDERS,
+        {
+            provide: TUI_APPEARANCE_OPTIONS,
+            useValue: {appearance: 'textfield'},
+        },
     ],
     hostDirectives: [
-        TuiWithAppearance,
+        {
+            directive: TuiAppearance,
+            inputs: ['tuiAppearance: appearance'],
+        },
         {
             directive: TuiActiveZone,
             outputs: ['tuiActiveZoneChange'],
         },
     ],
     host: {
         ngSkipHydration: 'true',
-        '[class._has-focus]': 'computedFocused',
         '(tuiActiveZoneChange)': 'onActiveZone($event)',
         '(click)': 'focus($event)',
     },
@@ -147,7 +164,25 @@ export class TuiEditor extends TuiControl<string> implements OnDestroy {
     public readonly focusOut = new EventEmitter<void>();
 
     public hasMentionPlugin = false;
-    public focused = false;
+    public readonly hovered = toSignal(
+        merge(
+            fromEvent(tuiInjectElement(), 'mouseenter').pipe(map(TUI_TRUE_HANDLER)),
+            fromEvent(tuiInjectElement(), 'mouseleave').pipe(map(TUI_FALSE_HANDLER)),
+        ).pipe(tuiWatch(this.cdr)),
+    );
+
+    public readonly focused = tuiAppearanceFocus(false);
+    public readonly m = tuiAppearanceMode(this.mode);
+    public readonly s = tuiAppearanceState(
+        computed(() => {
+            if (this.disabled()) {
+                return 'disabled';
+            }
+
+            return this.hovered() ? 'hover' : null;
+        }),
+    );
+
     public readonly editorService = inject(TuiTiptapEditorService);
 
     @Input('readOnly')
@@ -165,10 +200,6 @@ export class TuiEditor extends TuiControl<string> implements OnDestroy {
         );
     }
 
-    public get computedFocused(): boolean {
-        return (this.editor?.isFocused || this.focused) ?? false;
-    }
-
     public get selectionState(): TuiSelectionState {
         return tuiGetSelectionState(this.editor);
     }
@@ -194,7 +225,7 @@ export class TuiEditor extends TuiControl<string> implements OnDestroy {
             this.firstInitialValue = processed ?? '';
         }
 
-        if (!this.focused) {
+        if (!this.focused()) {
             this.doc?.getSelection?.()?.removeAllRanges();
         }
     }
@@ -204,7 +235,7 @@ export class TuiEditor extends TuiControl<string> implements OnDestroy {
     }
 
     protected get dropdownSelectionHandler(): TuiBooleanHandler<Range> {
-        if (!this.focused || this.readOnly()) {
+        if (!this.focused() || this.readOnly()) {
             return TUI_FALSE_HANDLER;
         }
 
@@ -240,7 +271,7 @@ export class TuiEditor extends TuiControl<string> implements OnDestroy {
     }
 
     protected onActiveZone(focused: boolean): void {
-        this.focused = focused;
+        this.focused.set(focused);
 
         if (focused) {
             this.focusIn.emit();

diff --git a/projects/editor/src/components/toolbar/toolbar.style.less b/projects/editor/src/components/toolbar/toolbar.style.less
@@ -23,6 +23,9 @@
     display: flex;
     overflow: auto;
     flex-wrap: wrap;
+    padding: 0;
+    margin: 0;
+    border: 0;
 
     &:has(.t-block:not(:empty)) {
         padding: 0.25rem 0.75rem;

diff --git a/projects/editor/src/components/toolbar/toolbar.template.html b/projects/editor/src/components/toolbar/toolbar.template.html
@@ -1,23 +1,26 @@
-<button
-    type="button"
-    class="t-prevent-parent-label-behavior"
->
-    <!-- @note: this is a html huck to avoid autofocus, if the parent element is a label  -->
-</button>
+<ng-container *ngIf="!disabled">
+    <button
+        type="button"
+        class="t-prevent-parent-label-behavior"
+    >
+        <!-- @note: this is a html hack to avoid autofocus, if the parent element is a label  -->
+    </button>
+    <div
+        [tabIndex]="focusable ? 0 : -1"
+        (focus)="onTopFocus()"
+    ></div>
+    <div
+        [tabIndex]="focusable ? 0 : -1"
+        (focus)="onBottomFocus()"
+    ></div>
+</ng-container>
 <ng-container *ngIf="editor?.stateChange$ | async" />
-<div
-    [tabIndex]="focusable ? 0 : -1"
-    (focus)="onTopFocus()"
-></div>
-<div
-    [tabIndex]="focusable ? 0 : -1"
-    (focus)="onBottomFocus()"
-></div>
 <!-- TODO: Change to `tuiHintDescribe` when figure tuiDriver order issue -->
-<section
+<fieldset
     *ngIf="texts$ | async as texts"
     tuiToolbarNavigationManager
     class="t-tools-wrapper"
+    [disabled]="disabled"
 >
     <div
         *ngIf="enabled(editorTool.Undo)"
@@ -360,4 +363,4 @@
     <div class="t-block">
         <ng-content />
     </div>
-</section>
+</fieldset>