From 27f3091900bb1be429a8c6ce79a6e51ba44ac52e Mon Sep 17 00:00:00 2001
From: splincode <omaxphp@yandex.ru>
Date: Tue, 12 Nov 2024 11:53:04 +0300
Subject: [PATCH] fix: the value in the component is incorrectly updated when
 it is passed as an empty string using formControl

---
 projects/demo-playwright/tests/reset.spec.ts     | 16 ++++++++++++++++
 .../components/editor/editor.component.html      |  1 -
 .../editor/components/editor/editor.component.ts |  5 +++++
 .../tiptap-editor/tiptap-editor.directive.ts     | 14 ++++++--------
 4 files changed, 27 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..f5f5abf13
--- /dev/null
+++ b/projects/demo-playwright/tests/reset.spec.ts
@@ -0,0 +1,16 @@
+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);