fix: the value in the component is incorrectly updated when it is pas…

…sed as an empty string using formControl

projects/demo/src/app/pages/starter/index.html

@@ -18,6 +18,17 @@
                     Start typing
                 </tui-editor>
 
+                <button
+                    size="s"
+                    tuiButton
+                    type="button"
+                    appearance="outline"
+                    class="tui-space_top-3"
+                    (click)="control.setValue('')"
+                >
+                    Reset
+                </button>
+
                 <ng-container *ngIf="preview">
                     <h4>HTML:</h4>
                     <tui-editor-socket

projects/demo/src/app/pages/starter/index.ts

@@ -3,7 +3,7 @@ import {ChangeDetectionStrategy, Component, inject, Injector} from '@angular/cor
 import {FormControl, ReactiveFormsModule} from '@angular/forms';
 import {TuiAddonDoc} from '@taiga-ui/addon-doc';
 import {TUI_IS_E2E, TuiAutoFocus} from '@taiga-ui/cdk';
-import {TuiLink} from '@taiga-ui/core';
+import {TuiButton, TuiLink} from '@taiga-ui/core';
 import type {TuiEditorToolType} from '@taiga-ui/editor';
 import {
     TUI_EDITOR_DEFAULT_EXTENSIONS,
@@ -22,6 +22,7 @@ import {
         ReactiveFormsModule,
         TuiAddonDoc,
         TuiAutoFocus,
+        TuiButton,
         TuiEditor,
         TuiEditorSocket,
         TuiLink,

projects/editor/components/editor/editor.component.html

@@ -1,10 +1,10 @@
 <div
-    *ngIf="editorLoaded$ | async as editorLoaded"
+    *ngIf="editorLoaded()"
     class="t-wrapper"
 >
     <div class="t-toolbar-wrapper">
         <tui-toolbar
-            *ngIf="editorLoaded && !floatingToolbar"
+            *ngIf="!floatingToolbar"
             [disabled]="!interactive()"
             [tools]="tools"
             (fileAttached)="fileAttached.emit($event)"
@@ -26,67 +26,64 @@
         </div>
     </div>
 
-    <ng-container *ngIf="editorLoaded">
-        <tui-scrollbar
-            *ngIf="floatingToolbar"
-            class="t-scrollbar"
-            (mousedown)="focus($event)"
-        >
-            <ng-container [ngTemplateOutlet]="editor" />
-        </tui-scrollbar>
-        <tui-scrollbar
-            *ngIf="!floatingToolbar"
-            tuiEditorPortal
-            class="t-scrollbar"
-            (keydown)="focus($event)"
-            (mousedown)="focus($event)"
-        >
-            <ng-container [ngTemplateOutlet]="editor" />
-            <tui-editor-portal-host />
-        </tui-scrollbar>
+    <tui-scrollbar
+        *ngIf="floatingToolbar"
+        class="t-scrollbar"
+        (mousedown)="focus($event)"
+    >
+        <ng-container [ngTemplateOutlet]="editor" />
+    </tui-scrollbar>
+    <tui-scrollbar
+        *ngIf="!floatingToolbar"
+        tuiEditorPortal
+        class="t-scrollbar"
+        (keydown)="focus($event)"
+        (mousedown)="focus($event)"
+    >
+        <ng-container [ngTemplateOutlet]="editor" />
+        <tui-editor-portal-host />
+    </tui-scrollbar>
 
-        <ng-template #editor>
+    <ng-template #editor>
+        <div
+            #tuiDropdown="tuiDropdown"
+            tuiDropdownLimitWidth="auto"
+            [tuiDropdown]="dropdown"
+            [tuiToolbarDropdown]="dropdownSelectionHandler"
+            [tuiToolbarDropdownPosition]="floatingToolbar ? 'selection' : 'tag'"
+        >
             <div
-                #tuiDropdown="tuiDropdown"
-                tuiDropdownLimitWidth="auto"
-                [tuiDropdown]="dropdown"
-                [tuiToolbarDropdown]="dropdownSelectionHandler"
-                [tuiToolbarDropdownPosition]="floatingToolbar ? 'selection' : 'tag'"
-            >
-                <div
-                    tuiTiptapEditor
-                    class="tui-editor-socket"
-                    [editable]="interactive()"
-                    [value]="firstInitialValue"
-                    (valueChange)="onModelChange($event)"
-                ></div>
-            </div>
+                tuiTiptapEditor
+                class="tui-editor-socket"
+                [editable]="interactive()"
+                (valueChange)="onModelChange($event)"
+            ></div>
+        </div>
 
-            <ng-template #dropdown>
-                <div [class.t-floating]="floatingToolbar">
-                    <tui-toolbar
-                        *ngIf="editorLoaded && floatingToolbar"
-                        [disabled]="!interactive()"
-                        [tools]="tools"
-                        (fileAttached)="fileAttached.emit($event)"
-                    >
-                        <ng-content select="tools" />
-                    </tui-toolbar>
+        <ng-template #dropdown>
+            <div [class.t-floating]="floatingToolbar">
+                <tui-toolbar
+                    *ngIf="floatingToolbar"
+                    [disabled]="!interactive()"
+                    [tools]="tools"
+                    (fileAttached)="fileAttached.emit($event)"
+                >
+                    <ng-content select="tools" />
+                </tui-toolbar>
 
-                    <tui-edit-link
-                        *ngIf="isLinkSelected"
-                        #link
-                        (addLink)="link.anchorMode ? addAnchor($event) : addLink($event); closeDropdown()"
-                        (removeLink)="link.anchorMode ? removeAnchor() : removeLink(); closeDropdown()"
-                    />
+                <tui-edit-link
+                    *ngIf="isLinkSelected"
+                    #link
+                    (addLink)="link.anchorMode ? addAnchor($event) : addLink($event); closeDropdown()"
+                    (removeLink)="link.anchorMode ? removeAnchor() : removeLink(); closeDropdown()"
+                />
 
-                    <ng-container *ngIf="isMentionMode">
-                        <ng-content select="mention" />
-                    </ng-container>
-                </div>
-            </ng-template>
+                <ng-container *ngIf="isMentionMode">
+                    <ng-content select="mention" />
+                </ng-container>
+            </div>
         </ng-template>
-    </ng-container>
+    </ng-template>
 </div>
 
 <tui-editor-socket

projects/editor/components/editor/editor.component.ts

@@ -1,4 +1,4 @@
-import {AsyncPipe, NgIf, NgTemplateOutlet} from '@angular/common';
+import {NgIf, NgTemplateOutlet} from '@angular/common';
 import type {OnDestroy} from '@angular/core';
 import {
     ChangeDetectionStrategy,
@@ -11,6 +11,7 @@ import {
     Input,
     NgZone,
     Output,
+    signal,
     ViewChild,
 } from '@angular/core';
 import {takeUntilDestroyed, toSignal} from '@angular/core/rxjs-interop';
@@ -61,7 +62,6 @@ import {TuiEditorPortalHost} from './portal/editor-portal-host.component';
     standalone: true,
     selector: 'tui-editor',
     imports: [
-        AsyncPipe,
         NgIf,
         NgTemplateOutlet,
         TuiDropdown,
@@ -123,9 +123,10 @@ export class TuiEditor extends TuiControl<string> implements OnDestroy {
     protected readonly toolbar?: TuiToolbar;
 
     protected readonly options = inject(TUI_EDITOR_OPTIONS);
+    protected readonly editorLoaded = signal(false);
     protected readonly editorLoaded$ = inject(TIPTAP_EDITOR);
 
-    protected sub = this.editorLoaded$
+    protected readonly $ = this.editorLoaded$
         .pipe(delay(0), takeUntilDestroyed())
         .subscribe(() => {
             this.hasMentionPlugin = !!this.editorService
@@ -136,6 +137,8 @@ export class TuiEditor extends TuiControl<string> implements OnDestroy {
 
             this.patchContentEditableElement();
             this.listenResizeEvents();
+            this.editorService.setValue(this.firstInitialValue);
+            this.editorLoaded.set(true);
         });
 
     /**
@@ -233,6 +236,10 @@ export class TuiEditor extends TuiControl<string> implements OnDestroy {
         if (!this.focused()) {
             this.doc?.getSelection?.()?.removeAllRanges();
         }
+
+        if (this.editorLoaded()) {
+            this.editorService.setValue(processed ?? '');
+        }
     }
 
     public ngOnDestroy(): void {

projects/editor/directives/tiptap-editor/tiptap-editor.directive.ts

@@ -15,20 +15,18 @@ export class TuiTiptapEditor {
 
     protected editorContainer = inject(INITIALIZATION_TIPTAP_CONTAINER);
 
+    protected readonly $ = inject(TIPTAP_EDITOR)
+        .pipe(takeUntilDestroyed())
+        .subscribe(() =>
+            this.renderer.appendChild(this.el.nativeElement, this.editorContainer),
+        );
+
     @Output()
     public readonly valueChange = this.editor.valueChange$;
 
     @Output()
     public readonly stateChange = this.editor.stateChange$;
 
-    constructor() {
-        inject(TIPTAP_EDITOR)
-            .pipe(takeUntilDestroyed())
-            .subscribe(() =>
-                this.renderer.appendChild(this.el.nativeElement, this.editorContainer),
-            );
-    }
-
     @Input()
     public set value(value: string) {
         this.editor.setValue(value);

projects/editor/utils/legacy-converter.ts

@@ -7,12 +7,12 @@ function migration(element: Element): void {
         if (child.tagName === 'FONT') {
             if (child.hasAttribute('size')) {
                 switch (child.getAttribute('size')) {
-                    case '6': {
-                        migrateHeading('h1', child);
+                    case '2': {
+                        migrateParagraph('13px', child);
                         break;
                     }
-                    case '5': {
-                        migrateHeading('h2', child);
+                    case '3': {
+                        migrateParagraph('15px', child);
                         break;
                     }
 
@@ -21,13 +21,13 @@ function migration(element: Element): void {
                         break;
                     }
 
-                    case '3': {
-                        migrateParagraph('15px', child);
+                    case '5': {
+                        migrateHeading('h2', child);
                         break;
                     }
 
-                    case '2': {
-                        migrateParagraph('13px', child);
+                    case '6': {
+                        migrateHeading('h1', child);
                         break;
                     }
                     default: