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 index 5b2e9a5..3e5a727 100644 --- 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'; }`, }) -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/libs/ngx-blocknote/src/lib/components/formatting-toolbar/bna-formatting-toolbar-controller.component.ts b/libs/ngx-blocknote/src/lib/components/formatting-toolbar/bna-formatting-toolbar-controller.component.ts index ee140a9..d51aafe 100644 --- a/libs/ngx-blocknote/src/lib/components/formatting-toolbar/bna-formatting-toolbar-controller.component.ts +++ b/libs/ngx-blocknote/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 index cf57f31..0415644 100644 --- 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/libs/ngx-blocknote/src/lib/components/suggestions-menu/bna-suggestions-menu-controller.component.ts b/libs/ngx-blocknote/src/lib/components/suggestions-menu/bna-suggestions-menu-controller.component.ts index 5dc479b..2d8e055 100644 --- a/libs/ngx-blocknote/src/lib/components/suggestions-menu/bna-suggestions-menu-controller.component.ts +++ b/libs/ngx-blocknote/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 index cc7e38b..65b113c 100644 --- 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): void { - console.log('write content'); this.updateEditorsInitialContent(initialContent); } registerOnChange(fn: unknown): void {