fix: suggestion menu click add the block and focuses it

dytab · Sep 16, 2024 · 0933db4 · 0933db4
1 parent dc1aa87
commit 0933db4
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 8 deletions.
diff --git a/libs/ngx-blocknote/src/lib/components/suggestions-menu/bna-suggestions-menu.component.ts b/libs/ngx-blocknote/src/lib/components/suggestions-menu/bna-suggestions-menu.component.ts
@@ -65,8 +65,9 @@ export class BnaSuggestionsMenuComponent implements OnChanges {
   };
 
   insertSelectedBlock() {
-    this.ngxBlockNoteService.editor().suggestionMenus.closeMenu();
-    this.ngxBlockNoteService.editor().suggestionMenus.clearQuery();
+    const editor = this.ngxBlockNoteService.editor();
+    editor.suggestionMenus.closeMenu();
+    editor.suggestionMenus.clearQuery();
     this.filteredSlashMenuItems[this.selectedIndex].onItemClick();
     this.selectedIndex = 0;
   }
@@ -75,7 +76,7 @@ export class BnaSuggestionsMenuComponent implements OnChanges {
     effect(() => {
       this.filteredSlashMenuItems = filterSuggestionItems(
         this.getSlashMenuItems(),
-        this.query()
+        this.query(),
       );
     });
   }
@@ -92,6 +93,7 @@ export class BnaSuggestionsMenuComponent implements OnChanges {
             this.selectedIndex = 0;
           }
           if (this.isShown() !== state.show) {
+            this.selectedIndex = 0;
             this.isShown.set(state.show);
           }
         });

diff --git a/.../src/lib/components/suggestions-menu/default-item/bna-suggestion-menu-item.component.html b/.../src/lib/components/suggestions-menu/default-item/bna-suggestion-menu-item.component.html
@@ -4,7 +4,7 @@
   type="button"
   class="flex w-full justify-start py-1 px-4 h-full gap-4 text-left font-normal"
   [ngClass]="{ 'bg-muted': selected() }"
-  (click)="onClick()"
+  (mousedown)="onClick($event)"
   (mouseenter)="onMouseEnter()"
 >
   <div

diff --git a/...te/src/lib/components/suggestions-menu/default-item/bna-suggestion-menu-item.component.ts b/...te/src/lib/components/suggestions-menu/default-item/bna-suggestion-menu-item.component.ts
@@ -66,18 +66,21 @@ export class BnaSuggestionMenuItemComponent {
     if (!item) {
       return 'lucideLayoutPanelTop';
     }
-    const icon = icons[item?.key];
+    const icon = icons[item.key];
     return icon ? icon : 'lucideLayoutPanelTop';
   });
   selected = input<boolean>(false);
   mouseEnter = output();
 
   constructor(private ngxBlockNoteService: NgxBlocknoteService) {}
 
-  onClick() {
-    this.ngxBlockNoteService.editor().suggestionMenus.clearQuery();
+  onClick($event: Event) {
+    $event.preventDefault();
+    const editor = this.ngxBlockNoteService.editor();
+    editor.suggestionMenus.clearQuery();
     this.suggestionItem().onItemClick();
-    this.ngxBlockNoteService.editor().suggestionMenus.closeMenu();
+    editor.suggestionMenus.closeMenu();
+    editor.focus();
   }
 
   onMouseEnter() {