feat: added test drag menu dropdown

Author: m-risto

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

@@ -27,7 +27,6 @@ export class BnaFormattingToolbarDirective implements OnChanges {
     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(

src/ui/components/bna-side-menu/bna-side-menu.directive.ts

@@ -17,6 +17,7 @@ export class BnaSideMenuDirective {
       const editorSnapshot = this.editor();
       this.renderer2.setStyle(this.elRef.nativeElement, 'display', 'none');
       this.renderer2.setStyle(this.elRef.nativeElement, 'position', 'absolute');
+      this.renderer2.setStyle(this.elRef.nativeElement, 'z-index', '1000');
       editorSnapshot.sideMenu.onUpdate((sideMenuState) => {
         if (sideMenuState.show) {
           this.renderer2.setStyle(this.elRef.nativeElement, 'display', 'block');

src/ui/components/bna-side-menu/default-buttons/drag-handle-menu/bna-drag-handle-menu.component.html

@@ -9,5 +9,16 @@
   <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
     <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM12.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM18.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z" />
   </svg>
-
 </button>
+<div class="hidden">asd</div>
+
+<div id="dropdown" class="z-10 bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700" [ngClass]="{'hidden': !dragMenuShown}">
+  <ul class="py-2 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownDefaultButton">
+    <li>
+      <button (click)="deleteBlock()" type="button" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Delete</button>
+    </li>
+    <li>
+      <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Settings</a>
+    </li>
+  </ul>
+</div>

src/ui/components/bna-side-menu/default-buttons/drag-handle-menu/bna-drag-handle-menu.component.ts

@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
-import { Component, input } from '@angular/core';
-import { BlockNoteEditor } from '@blocknote/core';
+import { Component, input, OnChanges } from '@angular/core';
+import { Block, BlockNoteEditor } from '@blocknote/core';
 
 @Component({
   selector: 'bna-drag-handle-menu-btn',
@@ -9,11 +9,18 @@ import { BlockNoteEditor } from '@blocknote/core';
   templateUrl: './bna-drag-handle-menu.component.html',
   styleUrl: './bna-drag-handle-menu.component.css',
 })
-export class BnaDragHandleMenuComponent {
+export class BnaDragHandleMenuComponent implements OnChanges {
   editor = input.required<BlockNoteEditor>();
+  dragMenuShown = false;
+  focusedBlock?: Block;
 
   openDragMenu() {
     console.log('Open drag menu');
+    this.dragMenuShown = !this.dragMenuShown;
+    // this.editor().block;
+    if (this.dragMenuShown) {
+      this.editor().sideMenu.freezeMenu();
+    }
     // this.editor().removeBlocks([this.editor.name]);
   }
 
@@ -27,4 +34,25 @@ export class BnaDragHandleMenuComponent {
 
     this.editor().sideMenu.blockDragEnd();
   }
+
+  ngOnChanges() {
+    this.editor().sideMenu.onUpdate((state) => {
+      if (!state.show) {
+        this.dragMenuShown = false;
+        this.focusedBlock = undefined;
+      } else {
+        this.focusedBlock = state.block;
+      }
+    });
+  }
+
+  deleteBlock() {
+    if (this.focusedBlock) {
+      console.log('delete block', [this.focusedBlock?.id]);
+      this.editor().removeBlocks([this.focusedBlock.id]);
+      this.focusedBlock = undefined;
+      this.dragMenuShown = false;
+    }
+    this.editor().sideMenu.unfreezeMenu();
+  }
 }