diff --git a/projects/demo/src/app/pages/appearance/examples/1/index.ts b/projects/demo/src/app/pages/appearance/examples/1/index.ts index ee3aae95d..56b2e7d84 100644 --- 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 index b750ddf27..b5ef43690 100644 --- a/projects/demo/src/app/pages/starter/index.html +++ b/projects/demo/src/app/pages/starter/index.html @@ -4,29 +4,31 @@ > - - Start typing - - - -

HTML:

- - -

Text:

-

{{ control.value }}

-
+
+ + Start typing + + + +

HTML:

+ + +

Text:

+

{{ control.value }}

+
+
diff --git a/projects/editor/src/components/editor/editor.component.less b/projects/editor/src/components/editor/editor.component.less index a02281f1e..9ae2a915f 100644 --- 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 index e294377f2..25134b9bc 100644 --- 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,7 +55,6 @@ import {TuiEditorPortalHost} from './portal/editor-portal-host.component'; NgIf, NgTemplateOutlet, TuiActiveZone, - TuiAppearance, TuiDropdown, TuiEditLink, TuiEditorDropdownToolbar, @@ -69,7 +62,6 @@ import {TuiEditorPortalHost} from './portal/editor-portal-host.component'; 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 index e743f6897..d92ef4766 100644 --- 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; 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,