feat: decomposition image options

projects/tui-editor/extensions/image-editor/image-editor.component.html

@@ -1,53 +1,18 @@
 <tui-hosted-dropdown
     tuiImageOptionsPosition
     class="t-hosted"
-    [content]="dropdown"
+    [content]="imgOptions"
     [(open)]="open"
 >
     <button
         appearance="outline"
-        icon="tuiIconSettings"
         size="s"
         tuiIconButton
         class="t-image-options"
         [class._open]="open"
+        [icon]="options.icons.imageExtension.settings"
     ></button>
-    <ng-template
-        #dropdown
-        let-close="close"
-    >
-        <div class="t-align-list">
-            <button
-                icon="tuiIconAlignJustify"
-                size="s"
-                tuiIconButton
-                [appearance]="isAlignJustify(style) ? 'flat' : 'icon'"
-                (click.capture)="alignJustify(); close()"
-            ></button>
-            <button
-                icon="tuiIconAlignLeft"
-                size="s"
-                tuiIconButton
-                [appearance]="isAlignLeft(style) ? 'flat' : 'icon'"
-                (click.capture)="alignLeft(); close()"
-            ></button>
-            <button
-                icon="tuiIconAlignCenter"
-                size="s"
-                tuiIconButton
-                [appearance]="isAlignCenter(style) ? 'flat' : 'icon'"
-                (click.capture)="alignCenter(); close()"
-            ></button>
-            <button
-                appearance="icon"
-                icon="tuiIconAlignRight"
-                size="s"
-                tuiIconButton
-                [appearance]="isAlignRight(style) ? 'flat' : 'icon'"
-                (click.capture)="alignRight(); close()"
-            ></button>
-        </div>
-    </ng-template>
+
     <tui-editor-resizable
         #resizable
         [autoHeight]="true"
@@ -66,3 +31,13 @@
         />
     </tui-editor-resizable>
 </tui-hosted-dropdown>
+
+<ng-template
+    #imgOptions
+    let-close="close"
+>
+    <tui-image-align
+        [style]="style"
+        (updateAlignStyles)="align($event); close()"
+    ></tui-image-align>
+</ng-template>

projects/tui-editor/extensions/image-editor/image-editor.component.less

@@ -41,9 +41,3 @@ img {
 
     opacity: 0;
 }
-
-.t-align-list {
-    display: flex;
-    gap: 5px;
-    padding: 2px;
-}

projects/tui-editor/extensions/image-editor/image-editor.component.ts

@@ -29,6 +29,7 @@ import {
     TuiEditableImage,
     TuiImageEditorOptions,
 } from './image-editor.options';
+import {TUI_EDITOR_OPTIONS, TuiEditorOptions} from '@tinkoff/tui-editor/tokens';
 
 @Component({
     selector: 'tui-image-editor',
@@ -73,7 +74,8 @@ export class TuiImageEditorComponent
     constructor(
         @Inject(TUI_EDITOR_MIN_IMAGE_WIDTH) readonly legacyMinWidth: number | null,
         @Inject(TUI_EDITOR_MAX_IMAGE_WIDTH) readonly legacyMaxWidth: number | null,
-        @Inject(TUI_IMAGE_EDITOR_OPTIONS) readonly options: TuiImageEditorOptions,
+        @Inject(TUI_IMAGE_EDITOR_OPTIONS) readonly imageOptions: TuiImageEditorOptions,
+        @Inject(TUI_EDITOR_OPTIONS) readonly options: TuiEditorOptions,
         @Inject(DOCUMENT) private readonly doc: Document,
         @Inject(DomSanitizer) private readonly sanitizer: DomSanitizer,
         @Inject(ElementRef) private readonly el: ElementRef<HTMLDivElement>,
@@ -99,32 +101,12 @@ export class TuiImageEditorComponent
         }
     }
 
-    @tuiPure
-    isAlignCenter(style?: string | null): boolean {
-        return style?.replace(/\s/g, '')?.includes('justify-content:center') ?? false;
-    }
-
-    @tuiPure
-    isAlignJustify(style?: string | null): boolean {
-        return style === null || style === undefined || style === '';
-    }
-
-    @tuiPure
-    isAlignLeft(style?: string | null): boolean {
-        return style?.replace(/\s/g, '')?.includes('float:left') ?? false;
-    }
-
-    @tuiPure
-    isAlignRight(style?: string | null): boolean {
-        return style?.replace(/\s/g, '')?.includes('float:right') ?? false;
-    }
-
     get minWidth(): number {
-        return (this.legacyMinWidth ?? this.options.minWidth) || 0;
+        return (this.legacyMinWidth ?? this.imageOptions.minWidth) || 0;
     }
 
     get maxWidth(): number {
-        return (this.legacyMaxWidth ?? this.options.maxWidth) || 0;
+        return (this.legacyMaxWidth ?? this.imageOptions.maxWidth) || 0;
     }
 
     ngOnInit(): void {
@@ -137,43 +119,15 @@ export class TuiImageEditorComponent
         }
     }
 
-    updateSize([width]: readonly [width: number, height?: number]): void {
-        this.currentWidth = Math.max(this.minWidth, Math.min(this.maxWidth, width));
-        this.attrs.width = this.currentWidth;
+    align(styles: string | null): void {
+        this.style = styles;
+        this.attrs.style = styles;
         this.notifyUpdate();
     }
 
-    alignLeft(): void {
-        const style = 'float: left';
-
-        this.style = style;
-        this.attrs.style = style;
-
-        this.notifyUpdate();
-    }
-
-    alignCenter(): void {
-        const style =
-            'display: flex; justify-content: center; margin-left: auto; margin-right: auto;';
-
-        this.attrs.style = style;
-        this.style = style;
-
-        this.notifyUpdate();
-    }
-
-    alignJustify(): void {
-        this.style = null;
-        this.attrs.style = null;
-        this.notifyUpdate();
-    }
-
-    alignRight(): void {
-        const style = 'float: right';
-
-        this.attrs.style = style;
-        this.style = style;
-
+    updateSize([width]: readonly [width: number, height?: number]): void {
+        this.currentWidth = Math.max(this.minWidth, Math.min(this.maxWidth, width));
+        this.attrs.width = this.currentWidth;
         this.notifyUpdate();
     }
 

projects/tui-editor/extensions/image-editor/image-editor.module.ts

@@ -12,6 +12,7 @@ import {TuiEditorResizableModule} from '@tinkoff/tui-editor/components/editor-re
 
 import {TuiImageEditorComponent} from './image-editor.component';
 import {TuiImageOptionsPositionDirective} from './image-options-position.directive';
+import {TuiImageAlignComponent} from './options/image-align/image-align.component';
 
 @NgModule({
     imports: [
@@ -24,7 +25,11 @@ import {TuiImageOptionsPositionDirective} from './image-options-position.directi
         TuiDropdownModule,
         TuiDataListModule,
     ],
-    declarations: [TuiImageEditorComponent, TuiImageOptionsPositionDirective],
+    declarations: [
+        TuiImageEditorComponent,
+        TuiImageOptionsPositionDirective,
+        TuiImageAlignComponent,
+    ],
     exports: [TuiImageEditorComponent],
 })
 export class TuiImageEditorModule {}

projects/tui-editor/extensions/image-editor/index.ts

@@ -2,3 +2,5 @@ export * from './image-editor.component';
 export * from './image-editor.extension';
 export * from './image-editor.module';
 export * from './image-editor.options';
+export * from './image-options-position.directive';
+export * from './options/image-align/image-align.component';

projects/tui-editor/extensions/image-editor/options/image-align/image-align.component.html

@@ -0,0 +1,31 @@
+<div class="t-align-list">
+    <button
+        size="s"
+        tuiIconButton
+        [appearance]="isAlignJustify(style) ? 'flat' : 'icon'"
+        [icon]="options.icons.imageExtension.alignJustify"
+        (click.capture)="alignJustify()"
+    ></button>
+    <button
+        size="s"
+        tuiIconButton
+        [appearance]="isAlignLeft(style) ? 'flat' : 'icon'"
+        [icon]="options.icons.imageExtension.alignLeft"
+        (click.capture)="alignLeft()"
+    ></button>
+    <button
+        size="s"
+        tuiIconButton
+        [appearance]="isAlignCenter(style) ? 'flat' : 'icon'"
+        [icon]="options.icons.imageExtension.alignCenter"
+        (click.capture)="alignCenter()"
+    ></button>
+    <button
+        appearance="icon"
+        size="s"
+        tuiIconButton
+        [appearance]="isAlignRight(style) ? 'flat' : 'icon'"
+        [icon]="options.icons.imageExtension.alignRight"
+        (click.capture)="alignRight()"
+    ></button>
+</div>

projects/tui-editor/extensions/image-editor/options/image-align/image-align.component.less

@@ -0,0 +1,5 @@
+.t-align-list {
+    display: flex;
+    gap: 0.3125rem;
+    padding: 0.125rem;
+}

projects/tui-editor/extensions/image-editor/options/image-align/image-align.component.ts

@@ -0,0 +1,64 @@
+import {
+    ChangeDetectionStrategy,
+    Component,
+    EventEmitter,
+    Inject,
+    Input,
+    Output,
+} from '@angular/core';
+import {tuiPure} from '@taiga-ui/cdk';
+import {TUI_EDITOR_OPTIONS, TuiEditorOptions} from '@tinkoff/tui-editor/tokens';
+
+@Component({
+    selector: 'tui-image-align',
+    templateUrl: './image-align.component.html',
+    styleUrls: ['./image-align.component.less'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TuiImageAlignComponent {
+    @Input()
+    style?: string | null = null;
+
+    @Output()
+    readonly updateAlignStyles = new EventEmitter<string | null>();
+
+    constructor(@Inject(TUI_EDITOR_OPTIONS) public readonly options: TuiEditorOptions) {}
+
+    @tuiPure
+    isAlignCenter(style?: string | null): boolean {
+        return style?.replace(/\s/g, '')?.includes('justify-content:center') ?? false;
+    }
+
+    @tuiPure
+    isAlignJustify(style?: string | null): boolean {
+        return style === null || style === undefined || style === '';
+    }
+
+    @tuiPure
+    isAlignLeft(style?: string | null): boolean {
+        return style?.replace(/\s/g, '')?.includes('float:left') ?? false;
+    }
+
+    @tuiPure
+    isAlignRight(style?: string | null): boolean {
+        return style?.replace(/\s/g, '')?.includes('float:right') ?? false;
+    }
+
+    alignLeft(): void {
+        this.updateAlignStyles.emit('float: left');
+    }
+
+    alignCenter(): void {
+        this.updateAlignStyles.emit(
+            'display: flex; justify-content: center; margin-left: auto; margin-right: auto;',
+        );
+    }
+
+    alignJustify(): void {
+        this.updateAlignStyles.emit(null);
+    }
+
+    alignRight(): void {
+        this.updateAlignStyles.emit('float: right');
+    }
+}

projects/tui-editor/tokens/editor-options.ts

@@ -59,6 +59,13 @@ export interface TuiEditorOptions {
         readonly textColor: string;
         readonly textHilite: string;
         readonly undo: string;
+        readonly imageExtension: {
+            readonly settings: string;
+            readonly alignJustify: string;
+            readonly alignCenter: string;
+            readonly alignLeft: string;
+            readonly alignRight: string;
+        };
     };
     readonly linkOptions?: TuiEditorLinkOptions;
     readonly spellcheck: boolean;
@@ -121,6 +128,13 @@ export const TUI_EDITOR_DEFAULT_OPTIONS: TuiEditorOptions = {
         fontStyleStrike: `tuiIconStrikeThroughLarge`,
         colorSelectorDropdownChevron: `tuiIconChevronDown`,
         colorSelectorDropdownCheck: `tuiIconCheck`,
+        imageExtension: {
+            settings: 'tuiIconSettings',
+            alignJustify: 'tuiIconAlignJustify',
+            alignCenter: 'tuiIconAlignCenter',
+            alignLeft: 'tuiIconAlignLeft',
+            alignRight: 'tuiIconAlignRight',
+        },
     },
 };