feat: drop redundant appearance

taiga-family · Sep 5, 2024 · e3a7299 · e3a7299
1 parent 9b18086
commit e3a7299
Show file tree

Hide file tree

Showing 9 changed files with 41 additions and 45 deletions.
diff --git a/projects/demo/src/app/pages/appearance/examples/1/index.ts b/projects/demo/src/app/pages/appearance/examples/1/index.ts
@@ -1,7 +1,7 @@
 import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core';
 import {FormControl, ReactiveFormsModule} from '@angular/forms';
 import {TuiActiveZone, TuiAutoFocus} from '@taiga-ui/cdk';
-import {TuiEditor, tuiEditorOptionsProvider} from '@taiga-ui/editor';
+import {TuiEditor} from '@taiga-ui/editor';
 
 @Component({
     standalone: true,
@@ -10,11 +10,6 @@ import {TuiEditor, tuiEditorOptionsProvider} from '@taiga-ui/editor';
     styleUrls: ['./index.less'],
     encapsulation: ViewEncapsulation.None,
     changeDetection: ChangeDetectionStrategy.OnPush,
-    providers: [
-        tuiEditorOptionsProvider({
-            appearance: 'no-border',
-        }),
-    ],
 })
 export default class Example {
     protected readonly control = new FormControl('');

diff --git a/projects/demo/src/app/pages/starter/index.html b/projects/demo/src/app/pages/starter/index.html
@@ -4,29 +4,31 @@
 >
     <ng-template pageTab="API">
         <tui-doc-demo [sticky]="false">
-            <tui-editor
-                [exampleText]="exampleText"
-                [floatingToolbar]="floating"
-                [formControl]="control"
-                [readOnly]="readOnly"
-                [style.max-height]="maxHeight"
-                [style.min-height]="minHeight"
-                [tools]="tools ?? []"
-                [tuiAutoFocus]="!isE2E"
-            >
-                Start typing
-            </tui-editor>
-
-            <ng-container *ngIf="preview">
-                <h4>HTML:</h4>
-                <tui-editor-socket
-                    class="tui-example"
-                    [content]="control.value || ''"
-                />
-
-                <h4>Text:</h4>
-                <p>{{ control.value }}</p>
-            </ng-container>
+            <div class="container">
+                <tui-editor
+                    [exampleText]="exampleText"
+                    [floatingToolbar]="floating"
+                    [formControl]="control"
+                    [readOnly]="readOnly"
+                    [style.max-height]="maxHeight"
+                    [style.min-height]="minHeight"
+                    [tools]="tools ?? []"
+                    [tuiAutoFocus]="!isE2E"
+                >
+                    Start typing
+                </tui-editor>
+
+                <ng-container *ngIf="preview">
+                    <h4>HTML:</h4>
+                    <tui-editor-socket
+                        class="tui-example"
+                        [content]="control.value || ''"
+                    />
+
+                    <h4>Text:</h4>
+                    <p>{{ control.value }}</p>
+                </ng-container>
+            </div>
         </tui-doc-demo>
         <tui-doc-documentation>
             <ng-template

diff --git a/projects/demo/src/app/pages/starter/index.less b/projects/demo/src/app/pages/starter/index.less
@@ -0,0 +1,4 @@
+.container {
+    display: flex;
+    flex-direction: column;
+}
diff --git a/projects/demo/src/app/pages/starter/index.ts b/projects/demo/src/app/pages/starter/index.ts
@@ -27,6 +27,7 @@ import {
         TuiLink,
     ],
     templateUrl: './index.html',
+    styleUrls: ['./index.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
     providers: [
         {

diff --git a/projects/editor/src/components/editor-socket/editor-socket.component.less b/projects/editor/src/components/editor-socket/editor-socket.component.less
@@ -59,7 +59,7 @@
 }
 
 .t-hidden-editor {
-    display: flex;
+    display: none;
     visibility: hidden;
     opacity: 0;
     block-size: 0;

diff --git a/projects/editor/src/components/editor/editor.component.html b/projects/editor/src/components/editor/editor.component.html
@@ -1,8 +1,6 @@
 <div
     *ngIf="editorLoaded$ | async as editorLoaded"
     class="t-wrapper"
-    [tuiAppearance]="options.appearance"
-    [tuiAppearanceFocus]="computedFocused"
     (tuiActiveZoneChange)="onActiveZone($event)"
 >
     <div class="t-toolbar-wrapper">

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

diff --git a/projects/editor/src/components/editor/editor.component.ts b/projects/editor/src/components/editor/editor.component.ts
@@ -23,13 +23,7 @@ import {
     tuiZonefree,
 } from '@taiga-ui/cdk';
 import type {TuiDropdownDirective} from '@taiga-ui/core';
-import {
-    TUI_ANIMATIONS_DEFAULT_DURATION,
-    TuiAppearance,
-    TuiDropdown,
-    TuiScrollbar,
-    TuiSurface,
-} from '@taiga-ui/core';
+import {TUI_ANIMATIONS_DEFAULT_DURATION, TuiDropdown, TuiScrollbar} from '@taiga-ui/core';
 import {delay, fromEvent, throttleTime} from 'rxjs';
 
 import type {AbstractTuiEditor} from '../../abstract/editor-adapter.abstract';
@@ -61,15 +55,13 @@ import {TuiEditorPortalHost} from './portal/editor-portal-host.component';
         NgIf,
         NgTemplateOutlet,
         TuiActiveZone,
-        TuiAppearance,
         TuiDropdown,
         TuiEditLink,
         TuiEditorDropdownToolbar,
         TuiEditorPortal,
         TuiEditorPortalHost,
         TuiEditorSocket,
         TuiScrollbar,
-        TuiSurface,
         TuiTiptapEditor,
         TuiToolbar,
     ],
@@ -82,6 +74,7 @@ import {TuiEditorPortalHost} from './portal/editor-portal-host.component';
     ],
     host: {
         ngSkipHydration: 'true',
+        '[class._has-focus]': 'computedFocused',
         '(click)': 'focus($event)',
     },
 })

diff --git a/projects/editor/src/tokens/editor-options.ts b/projects/editor/src/tokens/editor-options.ts
@@ -10,7 +10,6 @@ import type {TuiEditorLinkOptions} from '../constants/default-link-options-handl
 import {TUI_DEFAULT_LINK_OPTIONS} from '../constants/default-link-options-handler';
 
 export interface TuiEditorOptions {
-    readonly appearance: string;
     readonly blankColor: string;
     readonly colors: ReadonlyMap<string, string>;
     readonly fontOptions: typeof tuiDefaultFontOptionsHandler;
@@ -80,7 +79,6 @@ export interface TuiEditorOptions {
 
 export const TUI_EDITOR_DEFAULT_OPTIONS: TuiEditorOptions = {
     translate: 'no',
-    appearance: 'flat',
     spellcheck: false,
     enableDefaultStyles: true,
     colors: TUI_EDITOR_DEFAULT_EDITOR_COLORS,