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

…sed as an empty string using formControl (#1558)

projects/demo-playwright/tests/reset.spec.ts

@@ -0,0 +1,23 @@
+import {expect, test} from '@playwright/test';
+
+import {tuiGoto} from '../utils';
+
+test.describe('Reset', () => {
+    test('Correct reset value from wysiwyg', async ({page}) => {
+        await tuiGoto(page, '/starter-kit?placeholder=Hello');
+
+        await expect(page.locator('tui-editor')).toHaveScreenshot('Reset-01.png');
+
+        await page.locator('button:has-text("Reset")').click();
+
+        await expect(page.locator('tui-editor')).toHaveScreenshot('Reset-02.png');
+
+        await page.locator('tui-editor [contenteditable]').fill('12345');
+
+        await expect(page.locator('tui-editor')).toHaveScreenshot('Reset-03.png');
+
+        await page.locator('button:has-text("Reset")').click();
+
+        await expect(page.locator('tui-editor')).toHaveScreenshot('Reset-04.png');
+    });
+});

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

@@ -56,7 +56,6 @@
                 tuiTiptapEditor
                 class="tui-editor-socket"
                 [editable]="interactive()"
-                [value]="firstInitialValue"
                 (valueChange)="onModelChange($event)"
             ></div>
         </div>

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

@@ -137,6 +137,7 @@ export class TuiEditor extends TuiControl<string> implements OnDestroy {
 
             this.patchContentEditableElement();
             this.listenResizeEvents();
+            this.editorService.setValue(this.firstInitialValue);
             this.editorLoaded.set(true);
         });
 
@@ -235,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);