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',
+ },
},
};