feat: add toolbar directive

Author: m-risto

src/ui/block-note-editor/_component/bna-editor.component.html

@@ -3,7 +3,9 @@
     <bna-add-block-btn [editor]="editor" />
     <bna-drag-handle-menu-btn [editor]="editor" />
   </bna-side-menu>
-
+<bna-formatting-toolbar [editor]="editor">
+  <button type="button" (click)="editor.toggleStyles( { bold: true })">B</button>
+</bna-formatting-toolbar>
   <bna-view [editor]="editor" class="block margin-icons" />
   <bna-suggestions-menu
     [editor]="editor"

src/ui/block-note-editor/_component/bna-editor.component.ts

@@ -25,14 +25,17 @@ import {
   PartialBlock
 } from '@blocknote/core';
 import { DefaultSuggestionItem } from '@blocknote/core';
+import {
+  BnaFormattingToolbarDirective
+} from '../../components/bna-formatting-toolbar/bna-formatting-toolbar.directive';
 import { BnaViewDirective } from '../../components/bna-view/bna-view.directive';
-import { BnaSideMenuDirective } from '../../components/side-menu/bna-side-menu.directive';
+import { BnaSideMenuDirective } from '../../components/bna-side-menu/bna-side-menu.directive';
 import {
   BnaAddBlockButtonComponent
-} from '../../components/side-menu/default-buttons/add-block-button/bna-add-block-button.component';
+} from '../../components/bna-side-menu/default-buttons/add-block-button/bna-add-block-button.component';
 import {
   BnaDragHandleMenuComponent
-} from '../../components/side-menu/default-buttons/drag-handle-menu/bna-drag-handle-menu.component';
+} from '../../components/bna-side-menu/default-buttons/drag-handle-menu/bna-drag-handle-menu.component';
 import {
   BnaSuggestionsMenuDirective
 } from '../../components/bna-suggestions-menu/bna-suggestions-menu.directive';
@@ -44,7 +47,8 @@ import {
     BnaSideMenuDirective,
     BnaAddBlockButtonComponent,
     BnaDragHandleMenuComponent,
-    BnaSuggestionsMenuDirective
+    BnaSuggestionsMenuDirective,
+    BnaFormattingToolbarDirective
   ],
   // eslint-disable-next-line @angular-eslint/component-selector
   selector: 'bna-editor',

src/ui/components/bna-formatting-toolbar/bna-formatting-toolbar.directive.spec.ts

@@ -0,0 +1,8 @@
+import { BnaFormattingToolbarDirective } from './bna-formatting-toolbar.directive';
+
+describe('BnaFormattingToolbarDirective', () => {
+  it('should create an instance', () => {
+    const directive = new BnaFormattingToolbarDirective();
+    expect(directive).toBeTruthy();
+  });
+});

src/ui/components/bna-formatting-toolbar/bna-formatting-toolbar.directive.ts

@@ -0,0 +1,52 @@
+import { Directive, effect, ElementRef, input, OnChanges, Renderer2, SimpleChanges } from '@angular/core';
+import { BlockNoteEditor } from '@blocknote/core';
+
+@Directive({
+  selector: 'bna-formatting-toolbar[editor]',
+  standalone: true,
+})
+export class BnaFormattingToolbarDirective implements OnChanges{
+  editor = input.required<BlockNoteEditor>();
+
+
+  constructor(
+    protected elRef: ElementRef<HTMLElement>,
+    private renderer2: Renderer2
+  ) {
+
+
+  }
+
+  ngOnChanges() {
+    const position = this.elRef.nativeElement.getBoundingClientRect();
+    this.renderer2.setStyle(this.elRef.nativeElement, 'display', 'none');
+    this.renderer2.setStyle(this.elRef.nativeElement, 'position', 'absolute');
+    this.renderer2.setStyle(this.elRef.nativeElement, 'z-index', '10000');
+    this.renderer2.addClass(this.elRef.nativeElement, 'Test');
+    if(this.editor()){
+      this.editor().formattingToolbar.onUpdate( (formattingToolbar) => {
+        console.log(formattingToolbar);
+        if (formattingToolbar.show) {
+          this.renderer2.setStyle(this.elRef.nativeElement, 'display', 'block');
+          this.renderer2.setStyle(
+            this.elRef.nativeElement,
+            'top',
+            `${
+              formattingToolbar.referencePos.top -
+              position.top +
+              formattingToolbar.referencePos.height
+            }px`
+          );
+          this.renderer2.setStyle(
+            this.elRef.nativeElement,
+            'left',
+            `${formattingToolbar.referencePos.left - position.left}px`
+          );
+        } else {
+          this.renderer2.setStyle(this.elRef.nativeElement, 'display', 'none');
+        }
+      });
+
+    }
+  }
+}