refactor: drop editor loaded async pipe (#1560)

taiga-family · Nov 12, 2024 · a33e71a · a33e71a
1 parent df02a4e
commit a33e71a
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 60 deletions.
diff --git 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
@@ -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);
         });
 
     /**