diff --git a/projects/tui-editor/extensions/image-editor/image-editor.component.html b/projects/tui-editor/extensions/image-editor/image-editor.component.html index 00bd985a2..b7a8b25f7 100644 --- a/projects/tui-editor/extensions/image-editor/image-editor.component.html +++ b/projects/tui-editor/extensions/image-editor/image-editor.component.html @@ -1,53 +1,18 @@ - -
- - - - -
-
+
+ + + + diff --git a/projects/tui-editor/extensions/image-editor/image-editor.component.less b/projects/tui-editor/extensions/image-editor/image-editor.component.less index 587a074fb..3553dd059 100644 --- a/projects/tui-editor/extensions/image-editor/image-editor.component.less +++ b/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; -} diff --git a/projects/tui-editor/extensions/image-editor/image-editor.component.ts b/projects/tui-editor/extensions/image-editor/image-editor.component.ts index 19e46c66a..a89c6dc09 100644 --- a/projects/tui-editor/extensions/image-editor/image-editor.component.ts +++ b/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, @@ -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(); } diff --git a/projects/tui-editor/extensions/image-editor/image-editor.module.ts b/projects/tui-editor/extensions/image-editor/image-editor.module.ts index 55a59142f..fdbe8cd2e 100644 --- a/projects/tui-editor/extensions/image-editor/image-editor.module.ts +++ b/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 {} diff --git a/projects/tui-editor/extensions/image-editor/index.ts b/projects/tui-editor/extensions/image-editor/index.ts index 63f9e8f6f..223a465f2 100644 --- a/projects/tui-editor/extensions/image-editor/index.ts +++ b/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'; diff --git a/projects/tui-editor/extensions/image-editor/options/image-align/image-align.component.html b/projects/tui-editor/extensions/image-editor/options/image-align/image-align.component.html new file mode 100644 index 000000000..1bc694652 --- /dev/null +++ b/projects/tui-editor/extensions/image-editor/options/image-align/image-align.component.html @@ -0,0 +1,31 @@ +
+ + + + +
diff --git a/projects/tui-editor/extensions/image-editor/options/image-align/image-align.component.less b/projects/tui-editor/extensions/image-editor/options/image-align/image-align.component.less new file mode 100644 index 000000000..70849f070 --- /dev/null +++ b/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; +} diff --git a/projects/tui-editor/extensions/image-editor/options/image-align/image-align.component.ts b/projects/tui-editor/extensions/image-editor/options/image-align/image-align.component.ts new file mode 100644 index 000000000..9cd2e3859 --- /dev/null +++ b/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(); + + 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'); + } +} diff --git a/projects/tui-editor/tokens/editor-options.ts b/projects/tui-editor/tokens/editor-options.ts index 09e010eaf..6e616ba57 100644 --- a/projects/tui-editor/tokens/editor-options.ts +++ b/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', + }, }, };