fix: check for selected block type with index

dytab · Sep 17, 2024 · 9aaf77e · 9aaf77e
1 parent c208364
commit 9aaf77e
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 14 deletions.
diff --git a/...formatting-toolbar/default-selects/block-type-select/bna-block-type-select.component.html b/...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/...s/formatting-toolbar/default-selects/block-type-select/bna-block-type-select.component.ts b/...s/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,