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 {