feat: improve for drag and drop

Author: m-risto

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

@@ -1,4 +0,0 @@
-
-.suggestions-menu {
-  z-index: 100000;
-}

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

@@ -1,4 +1,4 @@
-<div class="relative">
+<div class="relative py-3">
   <bna-formatting-toolbar [editor]="editor">
     <div class="bn-toolbar">
       <bna-basic-text-style-button
@@ -23,7 +23,7 @@
     <bna-drag-handle-menu-btn [editor]="editor" />
   </bna-side-menu>
 
-  <bna-view [editor]="editor" class="block margin-icons" />
+  <bna-view [editor]="editor" class="block" />
   <bna-suggestions-menu
     [editor]="editor"
     class="z-index-3"

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

@@ -34,7 +34,8 @@ export class BnaSideMenuDirective implements OnChanges {
         this.renderer2.setStyle(
           this.elRef.nativeElement,
           'top',
-          sideMenuState.referencePos.top - position.top + 25 + 'px'
+          //TODO: change to relative position to view
+          sideMenuState.referencePos.top - position.top + 35 + 'px'
         );
       }
       // this.toggleVisibility(sideMenuState.show);

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

@@ -1,41 +1,24 @@
-<button
-  (click)="openDragMenu()"
-  (dragend)="dragEnd()"
-  (dragstart)="dragStart($event)"
-  draggable="true"
-  type="button"
-  hlmBtn
-  variant="ghost"
-  size="xs"
->
-  <hlm-icon size="sm" [name]="'lucideGripVertical'" />
-</button>
-<div class="hidden">asd</div>
+  <button
+    (click)="openDragMenu()"
+    (dragend)="dragEnd()"
+    (dragstart)="dragStart($event)"
+    draggable="true"
+    type="button"
+    hlmBtn
+    variant="ghost"
+    size="xs"
+  >
+    <hlm-icon size="sm" [name]="'lucideGripVertical'" />
+  </button>
+
 
 <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>
+  <hlm-menu class="shadow-3xl">
+    <hlm-menu-group>
+      <button hlmMenuItem type="button" (click)="deleteBlock()">Delete</button>
+    </hlm-menu-group>
+  </hlm-menu>
 </div>

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

@@ -5,11 +5,23 @@ import { provideIcons } from '@ng-icons/core';
 import { lucideGripVertical } from '@ng-icons/lucide';
 import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
 import { HlmIconComponent } from '@spartan-ng/ui-icon-helm';
+import {
+  HlmMenuComponent,
+  HlmMenuGroupComponent,
+  HlmMenuItemDirective,
+} from '@spartan-ng/ui-menu-helm';
 
 @Component({
   selector: 'bna-drag-handle-menu-btn',
   standalone: true,
-  imports: [CommonModule, HlmButtonDirective, HlmIconComponent],
+  imports: [
+    CommonModule,
+    HlmButtonDirective,
+    HlmIconComponent,
+    HlmMenuComponent,
+    HlmMenuGroupComponent,
+    HlmMenuItemDirective,
+  ],
   templateUrl: './bna-drag-handle-menu.component.html',
   styleUrl: './bna-drag-handle-menu.component.css',
   providers: [provideIcons({ lucideGripVertical })],

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

@@ -36,6 +36,8 @@ export class BnaSuggestionsMenuDirective implements OnChanges {
           `${
             suggestionMenuState.referencePos.top -
             position.top +
+            //TODO: change to relative position to view
+            20 +
             suggestionMenuState.referencePos.height
           }px`
         );