fix: cleanup also on destroy, remove unnecessary check before setting…

… signals
dytab · Sep 18, 2024 · 25b376e · 25b376e
1 parent 3e84ad2
commit 25b376e
Show file tree

Hide file tree

Showing 5 changed files with 85 additions and 110 deletions.
diff --git a/libs/ngx-blocknote/src/lib/components/file-panel/bna-file-panel-controller.component.ts b/libs/ngx-blocknote/src/lib/components/file-panel/bna-file-panel-controller.component.ts
@@ -1,14 +1,14 @@
+import { CommonModule } from '@angular/common';
 import {
   Component,
   effect,
-  ElementRef,
+  ElementRef, OnDestroy,
   Renderer2,
-  signal,
+  signal
 } from '@angular/core';
 import { autoUpdate, computePosition, flip, offset } from '@floating-ui/dom';
 import { NgxBlocknoteService } from '../../services/ngx-blocknote.service';
 import { getVirtualElement } from '../../util/get-virtual-element.util';
-import { CommonModule } from '@angular/common';
 
 @Component({
   imports: [CommonModule],
@@ -21,8 +21,11 @@ import { CommonModule } from '@angular/common';
     <ng-content />
   }`,
 })
-export class BnaFilePanelControllerComponent {
+export class BnaFilePanelControllerComponent implements OnDestroy{
   show = signal(false);
+  cleanup: () => void = () => {
+    return;
+  }
 
   constructor(
     private ngxBlockNoteService: NgxBlocknoteService,
@@ -34,46 +37,38 @@ export class BnaFilePanelControllerComponent {
     });
   }
 
+  ngOnDestroy(){
+    this.cleanup();
+  }
+
   private adjustVisibilityAndPosition() {
     const editor = this.ngxBlockNoteService.editor();
-    if (!editor) {
-      return;
-    }
-    let cleanup: () => void = () => {
-      return;
-    };
     editor.filePanel?.onUpdate(async (filePanelState) => {
       this.show.set(filePanelState.show);
-      if (!filePanelState.show) {
-        cleanup();
-      } else {
-        const updatePosition = async () => {
-          const result = await computePosition(
-            getVirtualElement(filePanelState.referencePos),
-            this.elRef.nativeElement,
-            {
-              strategy: 'fixed',
-              placement: 'bottom',
-              middleware: [offset(10), flip()],
-            },
-          );
-          this.renderer2.setStyle(
-            this.elRef.nativeElement,
-            'top',
-            `${result.y}px`,
-          );
-          this.renderer2.setStyle(
-            this.elRef.nativeElement,
-            'left',
-            `${result.x}px`,
-          );
-        };
-        cleanup = autoUpdate(
+      this.cleanup();
+      if (filePanelState.show) {
+        this.cleanup = autoUpdate(
           getVirtualElement(filePanelState.referencePos),
           this.elRef.nativeElement,
-          updatePosition,
+          async () => {
+            await this.updatePosition(filePanelState.referencePos);
+          },
         );
       }
     });
   }
+
+  private async updatePosition(referencePos: DOMRect) {
+    const result = await computePosition(
+      getVirtualElement(referencePos),
+      this.elRef.nativeElement,
+      {
+        strategy: 'fixed',
+        placement: 'bottom',
+        middleware: [offset(10), flip()],
+      },
+    );
+    this.renderer2.setStyle(this.elRef.nativeElement, 'top', `${result.y}px`);
+    this.renderer2.setStyle(this.elRef.nativeElement, 'left', `${result.x}px`);
+  }
 }
diff --git a/...note/src/lib/components/formatting-toolbar/bna-formatting-toolbar-controller.component.ts b/...note/src/lib/components/formatting-toolbar/bna-formatting-toolbar-controller.component.ts
@@ -3,6 +3,7 @@ import {
   Component,
   effect,
   ElementRef,
+  OnDestroy,
   Renderer2,
   signal,
 } from '@angular/core';
@@ -27,8 +28,11 @@ import { getVirtualElement } from '../../util/get-virtual-element.util';
     class: 'z-40 fixed',
   },
 })
-export class BnaFormattingToolbarControllerComponent {
+export class BnaFormattingToolbarControllerComponent implements OnDestroy {
   show = signal(false);
+  cleanup: () => void = () => {
+    return;
+  };
 
   constructor(
     private ngxBlockNoteService: NgxBlocknoteService,
@@ -40,36 +44,30 @@ export class BnaFormattingToolbarControllerComponent {
     });
   }
 
+  ngOnDestroy() {
+    this.cleanup();
+  }
+
   adjustVisibilityAndPosition() {
-    let cleanup: () => void = () => {
-      return;
-    };
     const editor = this.ngxBlockNoteService.editor();
     editor.formattingToolbar.onUpdate(async (formattingToolbar) => {
-      this.updateShowFormattingToolbarOnChange(formattingToolbar.show);
-      cleanup();
+      this.show.set(formattingToolbar.show);
+      this.cleanup();
       //TODO: remove auto update
       //had the problem that the first set position was not good
-      if(formattingToolbar.show){
-        cleanup = autoUpdate(
+      if (formattingToolbar.show) {
+        this.cleanup = autoUpdate(
           getVirtualElement(formattingToolbar.referencePos),
           this.elRef.nativeElement,
-          async () => {
+          async () =>
             await this.updateFormattingToolbarPosition(
               formattingToolbar.referencePos,
-            );
-          },
+            ),
         );
       }
     });
   }
 
-  private updateShowFormattingToolbarOnChange(show: boolean) {
-    if (this.show() !== show) {
-      this.show.set(show);
-    }
-  }
-
   private async updateFormattingToolbarPosition(referencePos: DOMRect) {
     const result = await computePosition(
       getVirtualElement(referencePos),

diff --git a/libs/ngx-blocknote/src/lib/components/link-toolbar/link-toolbar-controller.component.ts b/libs/ngx-blocknote/src/lib/components/link-toolbar/link-toolbar-controller.component.ts
@@ -46,26 +46,20 @@ export class BnaLinkToolbarControllerDirective implements OnDestroy {
   private adjustVisibilityAndPosition() {
     const editor = this.ngxBlockNoteService.editor();
     editor.linkToolbar.onUpdate((linkToolbar) => {
-      this.updateLinkToolbarOnChange(linkToolbar.show);
       this.cleanup();
+
+      this.show.set(linkToolbar.show);
       if (linkToolbar.show) {
         this.cleanup = autoUpdate(
           getVirtualElement(linkToolbar.referencePos),
           this.elRef.nativeElement,
-          this.getUpdatePositionFn(linkToolbar),
+          async ()=>await this.updatePosition(linkToolbar),
         );
       }
     });
   }
 
-  private updateLinkToolbarOnChange(show: boolean) {
-    if (this.show() !== show) {
-      this.show.set(show);
-    }
-  }
-
-  private getUpdatePositionFn(linkToolbar: LinkToolbarState) {
-    return async () => {
+  private async updatePosition(linkToolbar: LinkToolbarState) {
       const result = await computePosition(
         getVirtualElement(linkToolbar.referencePos),
         this.elRef.nativeElement,
@@ -82,5 +76,4 @@ export class BnaLinkToolbarControllerDirective implements OnDestroy {
         `${result.x}px`,
       );
     };
-  }
 }
diff --git a/...locknote/src/lib/components/suggestions-menu/bna-suggestions-menu-controller.component.ts b/...locknote/src/lib/components/suggestions-menu/bna-suggestions-menu-controller.component.ts
@@ -34,6 +34,7 @@ export class BnaSuggestionsMenuControllerComponent implements OnDestroy {
   cleanup: () => void = () => {
     return;
   };
+
   @Input({ required: true }) triggerCharacter = '/';
   constructor(
     private blockNoteEditorService: NgxBlocknoteService,
@@ -54,55 +55,44 @@ export class BnaSuggestionsMenuControllerComponent implements OnDestroy {
     editor.suggestionMenus.onUpdate(
       this.triggerCharacter,
       async (suggestionMenuState) => {
-        this.updateShowSuggestionMenuOnChange(suggestionMenuState.show);
         this.cleanup();
-        const updatePosition = this.getUpdatePositionFn(
-          suggestionMenuState.referencePos,
-        );
-        this.cleanup = autoUpdate(
-          getVirtualElement(suggestionMenuState.referencePos),
-          this.elRef.nativeElement,
-          updatePosition,
-        );
+
+        this.show.set(suggestionMenuState.show);
+        if (suggestionMenuState.show) {
+          this.cleanup = autoUpdate(
+            getVirtualElement(suggestionMenuState.referencePos),
+            this.elRef.nativeElement,
+            async () =>
+              await this.updatePosition(suggestionMenuState.referencePos),
+          );
+        }
       },
     );
   }
 
-  private getUpdatePositionFn(referencePos: DOMRect) {
-    return async () => {
-      const result = await computePosition(
-        getVirtualElement(referencePos),
-        this.elRef.nativeElement,
-        {
-          strategy: 'fixed',
-          placement: 'bottom-start',
-          middleware: [
-            offset(10),
-            autoPlacement({ allowedPlacements: ['bottom-start', 'top-start'] }),
-            size({
-              apply: ({ availableHeight }) => {
-                this.renderer2.setStyle(
-                  this.elRef.nativeElement,
-                  'maxHeight',
-                  `${availableHeight - 10}px`,
-                );
-              },
-            }),
-          ],
-        },
-      );
-      this.renderer2.setStyle(this.elRef.nativeElement, 'top', `${result.y}px`);
-      this.renderer2.setStyle(
-        this.elRef.nativeElement,
-        'left',
-        `${result.x}px`,
-      );
-    };
-  }
-
-  private updateShowSuggestionMenuOnChange(show: boolean) {
-    if (this.show() !== show) {
-      this.show.set(show);
-    }
+  private async updatePosition(referencePos: DOMRect) {
+    const result = await computePosition(
+      getVirtualElement(referencePos),
+      this.elRef.nativeElement,
+      {
+        strategy: 'fixed',
+        placement: 'bottom-start',
+        middleware: [
+          offset(10),
+          autoPlacement({ allowedPlacements: ['bottom-start', 'top-start'] }),
+          size({
+            apply: ({ availableHeight }) => {
+              this.renderer2.setStyle(
+                this.elRef.nativeElement,
+                'maxHeight',
+                `${availableHeight - 10}px`,
+              );
+            },
+          }),
+        ],
+      },
+    );
+    this.renderer2.setStyle(this.elRef.nativeElement, 'top', `${result.y}px`);
+    this.renderer2.setStyle(this.elRef.nativeElement, 'left', `${result.x}px`);
   }
 }
diff --git a/libs/ngx-blocknote/src/lib/editor/bna-editor.component.ts b/libs/ngx-blocknote/src/lib/editor/bna-editor.component.ts
@@ -190,7 +190,6 @@ export class BnaEditorComponent<
   onTouch: any = () => {};
 
   writeValue(initialContent: InitialContent<BSchema, ISchema, SSchema>): void {
-    console.log('write content');
     this.updateEditorsInitialContent(initialContent);
   }
   registerOnChange(fn: unknown): void {