From cd7a2b7e10181e77d5ce66bd5391b5bb057768f9 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

---
 package.json                                  |  2 +-
 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 +++++------
 5 files changed, 35 insertions(+), 10 deletions(-)
 create mode 100644 projects/demo-playwright/tests/reset.spec.ts

diff --git a/package.json b/package.json
index cb1fc9737..4af0bdd04 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,7 @@
         "prepare": "husky",
         "start": "nx serve editor-demo",
         "lint": "eslint .",
-        "cspell": "cspell --relative --dot --gitignore .",
+        "cspell": "cspell --relative --dot --no-progress --gitignore .",
         "prettier": "prettier !package-lock.json !taiga-ui/** . --ignore-path .gitignore",
         "stylelint": "stylelint './projects/**/*.{less,css}' --config package.json",
         "release": "npx syncer && npx nx publish editor"
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);