From 349343478334d43784163b6ff311b13772925342 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=9C=D0=B0=D0=BA=D1=81=D0=B8=D0=BC=20=D0=98=D0=B2=D0=B0?=
 =?UTF-8?q?=D0=BD=D0=BE=D0=B2?= <omaxphp@yandex.ru>
Date: Mon, 18 Nov 2024 10:24:17 +0300
Subject: [PATCH] fix: the value in the component is incorrectly updated when
 it is passed as an empty string using formControl (#1558)

---
 projects/demo-playwright/tests/reset.spec.ts  | 23 +++++++++++++++++++
 .../components/editor/editor.component.html   |  1 -
 .../components/editor/editor.component.ts     |  5 ++++
 .../tiptap-editor/tiptap-editor.directive.ts  | 14 +++++------
 4 files changed, 34 insertions(+), 9 deletions(-)
 create mode 100644 projects/demo-playwright/tests/reset.spec.ts

diff --git a/projects/demo-playwright/tests/reset.spec.ts b/projects/demo-playwright/tests/reset.spec.ts
new file mode 100644
index 000000000..0ac92d85f
--- /dev/null
+++ b/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');
+    });
+});
diff --git a/projects/editor/components/editor/editor.component.html b/projects/editor/components/editor/editor.component.html
index 26e1980c6..d9cf71d7e 100644
--- a/projects/editor/components/editor/editor.component.html
+++ b/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>
diff --git a/projects/editor/components/editor/editor.component.ts b/projects/editor/components/editor/editor.component.ts
index bb99b0cb4..14f8b3ee2 100644
--- a/projects/editor/components/editor/editor.component.ts
+++ b/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 {
diff --git a/projects/editor/directives/tiptap-editor/tiptap-editor.directive.ts b/projects/editor/directives/tiptap-editor/tiptap-editor.directive.ts
index 90b2d6091..e33fa9896 100644
--- a/projects/editor/directives/tiptap-editor/tiptap-editor.directive.ts
+++ b/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);