From 9aaf77eb7df2b7d67c64bf0f6b6d04c842ca3433 Mon Sep 17 00:00:00 2001
From: Matthias risto <risto.matthias@gmail.com>
Date: Tue, 17 Sep 2024 19:27:01 +0200
Subject: [PATCH] fix: check for selected block type with index

---
 .../bna-block-type-select.component.html      |  8 ++++--
 .../bna-block-type-select.component.ts        | 26 ++++++++++---------
 2 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/libs/ngx-blocknote/src/lib/components/formatting-toolbar/default-selects/block-type-select/bna-block-type-select.component.html b/libs/ngx-blocknote/src/lib/components/formatting-toolbar/default-selects/block-type-select/bna-block-type-select.component.html
index 9bc6fbf..b04ba4a 100644
--- a/libs/ngx-blocknote/src/lib/components/formatting-toolbar/default-selects/block-type-select/bna-block-type-select.component.html
+++ b/libs/ngx-blocknote/src/lib/components/formatting-toolbar/default-selects/block-type-select/bna-block-type-select.component.html
@@ -17,13 +17,17 @@
   <hlm-menu>
     <hlm-menu-group class="px-2">
       <div class="flex flex-col w-full">
-        @for (blockType of filteredBlockTypes(); track blockType.name) {
+        @for (
+          blockType of filteredBlockTypes();
+          track blockType.name;
+          let index = $index
+        ) {
           <button
             type="button"
             hlmMenuItemCheckbox
             class="gap-2 flex justify-start"
             (click)="changeBlockType(blockType.type, blockType.props)"
-            [checked]="currentBlockType() === blockType"
+            [checked]="currentBlockTypeIndex() === index"
           >
             <hlm-menu-item-check />
             <div
diff --git a/libs/ngx-blocknote/src/lib/components/formatting-toolbar/default-selects/block-type-select/bna-block-type-select.component.ts b/libs/ngx-blocknote/src/lib/components/formatting-toolbar/default-selects/block-type-select/bna-block-type-select.component.ts
index 10a9e85..9be2320 100644
--- a/libs/ngx-blocknote/src/lib/components/formatting-toolbar/default-selects/block-type-select/bna-block-type-select.component.ts
+++ b/libs/ngx-blocknote/src/lib/components/formatting-toolbar/default-selects/block-type-select/bna-block-type-select.component.ts
@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { Component, computed, input, signal } from '@angular/core';
-import { Dictionary } from '@blocknote/core';
+import { BlockNoteEditor, Dictionary } from '@blocknote/core';
 import { provideIcons } from '@ng-icons/core';
 import {
   lucideCheck,
@@ -88,12 +88,12 @@ export class BnaBlockTypeSelectComponent {
       (item) => item.type in editor.schema.blockSchema,
     );
   });
-  currentBlockType = signal<BlockTypeSelectItem | undefined>(
-    this.filteredBlockTypes().find((a) =>
-      a.isSelected(
-        this.ngxBlockNoteService.editor().getTextCursorPosition().block,
-      ),
-    ),
+  currentBlockType = computed(() => {
+    const index = this.currentBlockTypeIndex();
+    return index !== undefined ? this.filteredBlockTypes()[index] : undefined;
+  });
+  currentBlockTypeIndex = signal<number | undefined>(
+    this.getCurrentBlockIndex(this.ngxBlockNoteService.editor()),
   );
 
   constructor(private ngxBlockNoteService: NgxBlocknoteService) {
@@ -103,14 +103,16 @@ export class BnaBlockTypeSelectComponent {
   private updateCurrentBlockTypeOnChanges() {
     const editor = this.ngxBlockNoteService.editor();
     useEditorContentOrSelectionChange(() => {
-      this.currentBlockType.set(
-        this.filteredBlockTypes().find((a) =>
-          a.isSelected(editor.getTextCursorPosition().block),
-        ),
-      );
+      this.currentBlockTypeIndex.set(this.getCurrentBlockIndex(editor));
     }, editor);
   }
 
+  private getCurrentBlockIndex(editor: BlockNoteEditor<any, any, any>) {
+    return this.filteredBlockTypes().findIndex((a) =>
+      a.isSelected(editor.getTextCursorPosition().block),
+    );
+  }
+
   changeBlockType(
     type: string,
     props?: Record<string, boolean | number | string> | undefined,