fix: support resize multiple images inside single paragraph

projects/tui-editor/abstract/editor-adapter.abstract.ts

@@ -98,4 +98,5 @@ export abstract class AbstractTuiEditor {
     abstract setFileLink(preview: TuiEditorAttachedFile): void;
     abstract setYoutubeVideo(options: TuiYoutubeOptions): void;
     abstract setIframe(options: TuiEditableIframe): void;
+    abstract getHTML(): string;
 }

projects/tui-editor/components/editor/editor.component.ts

@@ -7,6 +7,7 @@ import {
     EventEmitter,
     Inject,
     Input,
+    NgZone,
     OnDestroy,
     Optional,
     Output,
@@ -24,11 +25,12 @@ import {
     TuiBooleanHandler,
     TuiFocusableElementAccessor,
     TuiStringHandler,
+    tuiZonefree,
 } from '@taiga-ui/cdk';
 import {TUI_ANIMATIONS_DEFAULT_DURATION} from '@taiga-ui/core';
 import {AbstractTuiEditor} from '@tinkoff/tui-editor/abstract';
 import {TuiToolbarComponent} from '@tinkoff/tui-editor/components/toolbar';
-import {defaultEditorTools} from '@tinkoff/tui-editor/constants';
+import {defaultEditorTools, TUI_EDITOR_RESIZE_EVENT} from '@tinkoff/tui-editor/constants';
 import {
     TuiTiptapEditorDirective,
     TuiTiptapEditorService,
@@ -48,8 +50,8 @@ import {
     TuiSelectionState,
 } from '@tinkoff/tui-editor/utils';
 import {Editor} from '@tiptap/core';
-import {Observable} from 'rxjs';
-import {delay, takeUntil} from 'rxjs/operators';
+import {fromEvent, Observable} from 'rxjs';
+import {delay, takeUntil, throttleTime} from 'rxjs/operators';
 
 import {TUI_EDITOR_PROVIDERS} from './editor.providers';
 
@@ -105,6 +107,7 @@ export class TuiEditorComponent
         @Inject(TUI_EDITOR_VALUE_TRANSFORMER)
         transformer: AbstractTuiValueTransformer<string> | null,
         @Inject(TUI_EDITOR_OPTIONS) readonly options: TuiEditorOptions,
+        @Inject(NgZone) private readonly zone: NgZone,
     ) {
         super(control, cdr, transformer);
 
@@ -116,6 +119,7 @@ export class TuiEditorComponent
                 );
 
             this.patchContentEditableElement();
+            this.listenResizeEvents();
         });
     }
 
@@ -284,4 +288,13 @@ export class TuiEditorComponent
             String(this.options.spellcheck),
         );
     }
+
+    private listenResizeEvents(): void {
+        this.el?.nativeElement &&
+            fromEvent(this.el?.nativeElement, TUI_EDITOR_RESIZE_EVENT)
+                .pipe(throttleTime(0), tuiZonefree(this.zone), takeUntil(this.destroy$))
+                .subscribe(() =>
+                    this.editorService.valueChange$.next(this.editorService.getHTML()),
+                );
+    }
 }

projects/tui-editor/constants/default-events.ts

@@ -0,0 +1 @@
+export const TUI_EDITOR_RESIZE_EVENT = `tui_editor_resize` as const;

projects/tui-editor/constants/index.ts

@@ -1,5 +1,6 @@
 export * from './default-editor-colors';
 export * from './default-editor-tools';
+export * from './default-events';
 export * from './default-font-options-handler';
 export * from './default-html5-media-attributes';
 export * from './default-link-options-handler';

projects/tui-editor/directives/tiptap-editor/tiptap-editor.service.ts

@@ -51,13 +51,12 @@ export class TuiTiptapEditorService extends AbstractTuiEditor {
             this.editor = editor;
 
             const update = (): void => {
-                this.stateChange$.next();
-
                 const content = editor.getHTML();
                 const json = editor.getJSON().content;
                 const value: string = tuiIsEmptyParagraph(json) ? `` : content;
 
                 this.valueChange$.next(value);
+                this.stateChange$.next();
             };
 
             editor.on(`transaction`, update.bind(this));
@@ -412,4 +411,8 @@ export class TuiTiptapEditorService extends AbstractTuiEditor {
     ): void {
         this.editor.commands.toggleMark(typeOrName, attributes, options);
     }
+
+    getHTML(): string {
+        return this.getOriginTiptapEditor().getHTML() ?? ``;
+    }
 }

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

@@ -1,7 +1,8 @@
-import {ChangeDetectionStrategy, Component, Inject} from '@angular/core';
+import {ChangeDetectionStrategy, Component, ElementRef, Inject} from '@angular/core';
 import {DomSanitizer, SafeResourceUrl} from '@angular/platform-browser';
 import {TuiDestroyService} from '@taiga-ui/cdk';
 import {AbstractTuiEditorResizable} from '@tinkoff/tui-editor/components/editor-resizable';
+import {TUI_EDITOR_RESIZE_EVENT} from '@tinkoff/tui-editor/constants';
 
 import {
     TUI_IFRAME_EDITOR_OPTIONS,
@@ -24,6 +25,7 @@ export class TuiIframeEditorComponent extends AbstractTuiEditorResizable<TuiEdit
     constructor(
         @Inject(TUI_IFRAME_EDITOR_OPTIONS) readonly options: TuiEditableIframeOptions,
         @Inject(DomSanitizer) private readonly sanitizer: DomSanitizer,
+        @Inject(ElementRef) private readonly el: ElementRef<HTMLDivElement>,
     ) {
         super();
     }
@@ -42,7 +44,8 @@ export class TuiIframeEditorComponent extends AbstractTuiEditorResizable<TuiEdit
         this.attrs.width = this.currentWidth;
         this.attrs.height = this.currentHeight;
 
-        // force update
-        this.editor.commands.setContent(this.editor.getJSON());
+        this.el.nativeElement.dispatchEvent(
+            new CustomEvent(TUI_EDITOR_RESIZE_EVENT, {bubbles: true}),
+        );
     }
 }

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

@@ -11,6 +11,7 @@ import {DomSanitizer, SafeResourceUrl} from '@angular/platform-browser';
 import {WINDOW} from '@ng-web-apis/common';
 import {TuiDestroyService} from '@taiga-ui/cdk';
 import {AbstractTuiEditorResizable} from '@tinkoff/tui-editor/components/editor-resizable';
+import {TUI_EDITOR_RESIZE_EVENT} from '@tinkoff/tui-editor/constants';
 
 import {
     TUI_EDITOR_MAX_IMAGE_WIDTH,
@@ -87,8 +88,9 @@ export class TuiImageEditorComponent extends AbstractTuiEditorResizable<TuiEdita
         this.currentWidth = Math.max(this.minWidth, Math.min(this.maxWidth, width));
         this.attrs.width = this.currentWidth;
 
-        // force update
-        this.editor.commands.setContent(this.editor.getJSON());
+        this.el.nativeElement.dispatchEvent(
+            new CustomEvent(TUI_EDITOR_RESIZE_EVENT, {bubbles: true}),
+        );
     }
 
     private selectFakeText(): void {