From 1a3f50383ea90e4a1a5c58f20d5f85dfacb0851e Mon Sep 17 00:00:00 2001
From: splincode <omaxphp@yandex.ru>
Date: Tue, 12 Nov 2024 11:57:18 +0300
Subject: [PATCH] refactor: drop editor loaded async pipe

---
 .../components/editor/editor.component.html   | 112 +++++++++---------
 .../components/editor/editor.component.ts     |   8 +-
 2 files changed, 60 insertions(+), 60 deletions(-)

diff --git a/projects/editor/components/editor/editor.component.html b/projects/editor/components/editor/editor.component.html
index 66e887414..26e1980c6 100644
--- a/projects/editor/components/editor/editor.component.html
+++ b/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,65 @@
         </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()"
+                [value]="firstInitialValue"
+                (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
diff --git a/projects/editor/components/editor/editor.component.ts b/projects/editor/components/editor/editor.component.ts
index f7f8f95f6..bb99b0cb4 100644
--- a/projects/editor/components/editor/editor.component.ts
+++ b/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,7 @@ export class TuiEditor extends TuiControl<string> implements OnDestroy {
 
             this.patchContentEditableElement();
             this.listenResizeEvents();
+            this.editorLoaded.set(true);
         });
 
     /**