feat: add consistent file naming to buttons

Author: m-risto

docs/src/pages/examples/ui-components/adding-side-menu-drag-handle-items/adding-side-menu-drag-handle-items.example.ts

@@ -2,8 +2,8 @@ import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
 import { PartialBlock } from '@blocknote/core';
 import {
-  BasicTextStyleButtonComponent,
   BnaAddBlockButtonComponent,
+  BnaBasicTextStyleButtonComponent,
   BnaDeleteBlockItemComponent,
   BnaDragHandleMenuComponent,
   BnaEditorComponent,
@@ -19,7 +19,7 @@ import { ResetBlockButtonComponent } from './reset-block-button.component';
   imports: [
     CommonModule,
     BnaEditorComponent,
-    BasicTextStyleButtonComponent,
+    BnaBasicTextStyleButtonComponent,
     HlmButtonDirective,
     BnaSideMenuControllerDirective,
     BnaSideMenuComponent,

docs/src/pages/examples/ui-components/formatting-side-menu-buttons/formatting-side-menu-buttons.example.ts

@@ -2,7 +2,7 @@ import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
 import { PartialBlock } from '@blocknote/core';
 import {
-  BasicTextStyleButtonComponent,
+  BnaBasicTextStyleButtonComponent,
   BnaDragHandleMenuComponent,
   BnaEditorComponent,
   BnaSideMenuComponent,
@@ -17,7 +17,7 @@ import { RemoveBlockButtonComponent } from './remove-block-button.component';
   imports: [
     CommonModule,
     BnaEditorComponent,
-    BasicTextStyleButtonComponent,
+    BnaBasicTextStyleButtonComponent,
     HlmButtonDirective,
     BnaSideMenuControllerDirective,
     BnaSideMenuComponent,

docs/src/pages/examples/ui-components/formatting-toolbar-buttons/formatting-toolbar-buttons.example.ts

@@ -2,7 +2,7 @@ import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
 import { PartialBlock } from '@blocknote/core';
 import {
-  BasicTextStyleButtonComponent,
+  BnaBasicTextStyleButtonComponent,
   BnaEditorComponent,
   BnaFormattingToolbarComponent,
   BnaFormattingToolbarControllerDirective,
@@ -17,7 +17,7 @@ import { BlueButtonComponent } from './blue-button.component';
     CommonModule,
     BnaEditorComponent,
     BnaFormattingToolbarControllerDirective,
-    BasicTextStyleButtonComponent,
+    BnaBasicTextStyleButtonComponent,
     BnaFormattingToolbarComponent,
     HlmButtonDirective,
     BlueButtonComponent,

libs/block-note-angular/src/index.ts

@@ -3,7 +3,7 @@ export * from './lib/services/block-note-angular.service';
 export * from './lib/interfaces/block-note-editor-options.type';
 export * from './lib/components/bna-formatting-toolbar/bna-formatting-toolbar-controller.directive';
 export * from './lib/components/bna-formatting-toolbar/bna-formatting-toolbar.component';
-export * from './lib/components/buttons/basic-text-style-button/basic-text-style-button.component';
+export * from './lib/components/buttons/basic-text-style-button/bna-basic-text-style-button.component';
 export * from './lib/components/bna-side-menu/bna-side-menu.component';
 export * from './lib/components/bna-side-menu/bna-side-menu-controller.directive';
 export * from './lib/components/bna-side-menu/default-buttons/drag-handle-menu/bna-drag-handle-menu.component';

libs/block-note-angular/src/lib/block-note-editor/bna-editor.component.ts

@@ -33,8 +33,8 @@ import { BnaAddBlockButtonComponent } from '../components/bna-side-menu/default-
 import { BnaDragHandleMenuComponent } from '../components/bna-side-menu/default-buttons/drag-handle-menu/bna-drag-handle-menu.component';
 import { BnaSuggestionsMenuControllerDirective } from '../components/bna-suggestions-menu/bna-suggestions-menu-controller.directive';
 import { BnaViewControllerDirective } from '../components/bna-view/bna-view-controller.directive';
-import { BasicTextStyleButtonComponent } from '../components/buttons/basic-text-style-button/basic-text-style-button.component';
-import { TextAlignButtonComponent } from '../components/buttons/text-align-button/text-align-button.component';
+import { BnaBasicTextStyleButtonComponent } from '../components/buttons/basic-text-style-button/bna-basic-text-style-button.component';
+import { BnaTextAlignButtonComponent } from '../components/buttons/text-align-button/bna-text-align-button.component';
 import { BlockNoteEditorOptionsType } from '../interfaces/block-note-editor-options.type';
 import { BlockNoteAngularService } from '../services/block-note-angular.service';
 import {
@@ -61,15 +61,15 @@ import {
     BnaFormattingToolbarControllerDirective,
     HlmCardDirective,
     HlmButtonDirective,
-    BasicTextStyleButtonComponent,
+    BnaBasicTextStyleButtonComponent,
     HlmMenuComponent,
     HlmMenuLabelComponent,
     HlmMenuSeparatorComponent,
     HlmMenuGroupComponent,
     HlmMenuItemDirective,
     HlmMenuShortcutComponent,
     HlmMenuItemSubIndicatorComponent,
-    TextAlignButtonComponent,
+    BnaTextAlignButtonComponent,
     BnaFilePanelComponent,
     HlmInputDirective,
     BnaFilePanelControllerDirective,

libs/block-note-angular/src/lib/components/bna-side-menu/default-buttons/bna-delete-block-item/bna-delete-block-item.component.ts

@@ -1,5 +1,5 @@
 import { CommonModule } from '@angular/common';
-import { Component, effect } from '@angular/core';
+import { Component, effect, OnInit } from '@angular/core';
 import { Block } from '@blocknote/core';
 import { BlockNoteAngularService } from '../../../../services/block-note-angular.service';
 import { HlmButtonDirective, HlmMenuItemDirective } from '../../../../ui';
@@ -14,8 +14,9 @@ import { HlmButtonDirective, HlmMenuItemDirective } from '../../../../ui';
     class: 'block',
   },
 })
-export class BnaDeleteBlockItemComponent {
+export class BnaDeleteBlockItemComponent implements OnInit {
   dragBlock?: Block<any, any, any>;
+  selectedBlocks: Block<any, any, any>[] = [];
 
   constructor(public blockNoteAngularService: BlockNoteAngularService) {
     effect(() => {
@@ -29,14 +30,39 @@ export class BnaDeleteBlockItemComponent {
     });
   }
 
+  ngOnInit() {
+    const editor = this.blockNoteAngularService.editor();
+    if (!editor) {
+      return;
+    }
+    const selection = editor.getSelection();
+    //Todo: create type
+    // Get the blocks in the current selection and store on the state. If
+    // the selection is empty, store the block containing the text cursor
+    // instead.
+    let selectedBlocks: Block<any, any, any>[] = [];
+    if (selection !== undefined) {
+      selectedBlocks = selection.blocks;
+    } else {
+      selectedBlocks = [editor.getTextCursorPosition().block];
+    }
+    if (
+      this.dragBlock &&
+      selectedBlocks.find(
+        (selectedBlock) => this.dragBlock!.id === selectedBlock.id
+      ) === undefined
+    ) {
+      selectedBlocks = [this.dragBlock];
+    }
+    this.selectedBlocks = selectedBlocks;
+  }
+
   deleteBlock() {
     const editor = this.blockNoteAngularService.editor();
     if (!editor) {
       return;
     }
-    console.log('delete block');
-    // console.log('delete block', this.selectedBlocks);
-    // editor.removeBlocks(this.selectedBlocks);
-    // editor.sideMenu.unfreezeMenu();
+    editor.removeBlocks(this.selectedBlocks);
+    editor.sideMenu.unfreezeMenu();
   }
 }

libs/block-note-angular/src/lib/components/bna-side-menu/default-buttons/drag-handle-menu/bna-drag-handle-menu.component.ts

@@ -1,6 +1,5 @@
 import { CommonModule } from '@angular/common';
-import { Component, effect } from '@angular/core';
-import { Block } from '@blocknote/core';
+import { Component } from '@angular/core';
 import { provideIcons } from '@ng-icons/core';
 import { lucideGripVertical } from '@ng-icons/lucide';
 import { BrnMenuTriggerDirective } from '@spartan-ng/ui-menu-brain';
@@ -19,8 +18,8 @@ import {
 } from '../../../../ui';
 import { BnaFormattingToolbarControllerDirective } from '../../../bna-formatting-toolbar/bna-formatting-toolbar-controller.directive';
 import { BnaFormattingToolbarComponent } from '../../../bna-formatting-toolbar/bna-formatting-toolbar.component';
-import { BasicTextStyleButtonComponent } from '../../../buttons/basic-text-style-button/basic-text-style-button.component';
-import { TextAlignButtonComponent } from '../../../buttons/text-align-button/text-align-button.component';
+import { BnaBasicTextStyleButtonComponent } from '../../../buttons/basic-text-style-button/bna-basic-text-style-button.component';
+import { BnaTextAlignButtonComponent } from '../../../buttons/text-align-button/bna-text-align-button.component';
 import { BnaDeleteBlockItemComponent } from '../bna-delete-block-item/bna-delete-block-item.component';
 
 @Component({
@@ -39,70 +38,31 @@ import { BnaDeleteBlockItemComponent } from '../bna-delete-block-item/bna-delete
     HlmMenuShortcutComponent,
     HlmMenuSeparatorComponent,
     HlmMenuGroupComponent,
-    BasicTextStyleButtonComponent,
+    BnaBasicTextStyleButtonComponent,
     BnaFormattingToolbarComponent,
     BnaFormattingToolbarControllerDirective,
-    TextAlignButtonComponent,
+    BnaTextAlignButtonComponent,
     BnaDeleteBlockItemComponent,
   ],
   templateUrl: './bna-drag-handle-menu.component.html',
   styleUrl: './bna-drag-handle-menu.component.css',
   providers: [provideIcons({ lucideGripVertical })],
 })
 export class BnaDragHandleMenuComponent {
-  dragMenuShown = false;
-  selectedBlocks: Block<any, any, any>[] = [];
-  dragBlock?: Block<any, any, any>;
-
-  constructor(public blockNoteAngularService: BlockNoteAngularService) {
-    effect(() => {
-      const editor = blockNoteAngularService.editor();
-      if (!editor) {
-        return;
-      }
-      editor.sideMenu.onUpdate((state) => {
-        this.dragBlock = state.block;
-      });
-    });
-  }
+  constructor(public blockNoteAngularService: BlockNoteAngularService) {}
 
   openDragMenu() {
     const editor = this.blockNoteAngularService.editor();
     if (!editor) {
       return;
     }
-    const selection = editor.getSelection();
-    //Todo: create type
-    // Get the blocks in the current selection and store on the state. If
-    // the selection is empty, store the block containing the text cursor
-    // instead.
-    let selectedBlocks: Block<any, any, any>[] = [];
-    if (selection !== undefined) {
-      selectedBlocks = selection.blocks;
-    } else {
-      selectedBlocks = [editor.getTextCursorPosition().block];
-    }
-    if (
-      this.dragBlock &&
-      selectedBlocks.find(
-        (selectedBlock) => this.dragBlock!.id === selectedBlock.id
-      ) === undefined
-    ) {
-      selectedBlocks = [this.dragBlock];
-    }
-    this.selectedBlocks = selectedBlocks;
-    this.dragMenuShown = !this.dragMenuShown;
-    if (this.dragMenuShown) {
-      editor.sideMenu.freezeMenu();
-    }
   }
 
   dragStart($event: DragEvent) {
     const editor = this.blockNoteAngularService.editor();
     if (!editor) {
       return;
     }
-    console.log('drag start', $event);
     editor.sideMenu.blockDragStart($event);
   }
 
@@ -113,14 +73,4 @@ export class BnaDragHandleMenuComponent {
     }
     editor.sideMenu.blockDragEnd();
   }
-
-  deleteBlock() {
-    const editor = this.blockNoteAngularService.editor();
-    if (!editor) {
-      return;
-    }
-    console.log('delete block', this.selectedBlocks);
-    editor.removeBlocks(this.selectedBlocks);
-    editor.sideMenu.unfreezeMenu();
-  }
 }

libs/block-note-angular/src/lib/components/buttons/basic-text-style-button/basic-text-style-button.component._spec.ts renamed to libs/block-note-angular/src/lib/components/buttons/basic-text-style-button/bna-basic-text-style-button.component._spec.ts

@@ -1,16 +1,16 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { BasicTextStyleButtonComponent } from './basic-text-style-button.component';
+import { BnaBasicTextStyleButtonComponent } from './bna-basic-text-style-button.component';
 
 describe('BnaBasicTextStyleButtonComponent', () => {
-  let component: BasicTextStyleButtonComponent;
-  let fixture: ComponentFixture<BasicTextStyleButtonComponent>;
+  let component: BnaBasicTextStyleButtonComponent;
+  let fixture: ComponentFixture<BnaBasicTextStyleButtonComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [BasicTextStyleButtonComponent],
+      imports: [BnaBasicTextStyleButtonComponent],
     }).compileComponents();
 
-    fixture = TestBed.createComponent(BasicTextStyleButtonComponent);
+    fixture = TestBed.createComponent(BnaBasicTextStyleButtonComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

libs/block-note-angular/src/lib/components/buttons/basic-text-style-button/basic-text-style-button.component.css renamed to libs/block-note-angular/src/lib/components/buttons/basic-text-style-button/bna-basic-text-style-button.component.css

@@ -19,11 +19,11 @@ type BasicTextStyle = 'bold' | 'italic' | 'underline' | 'strike' | 'code';
   selector: 'bna-basic-text-style-button',
   standalone: true,
   imports: [CommonModule, HlmButtonDirective, HlmIconComponent],
-  templateUrl: './basic-text-style-button.component.html',
-  styleUrl: './basic-text-style-button.component.css',
+  templateUrl: './bna-basic-text-style-button.component.html',
+  styleUrl: './bna-basic-text-style-button.component.css',
   providers: [provideIcons({ lucideBold, lucideItalic, lucideUnderline })],
 })
-export class BasicTextStyleButtonComponent {
+export class BnaBasicTextStyleButtonComponent {
   basicTextStyle = input.required<BasicTextStyle>();
   icon = computed(() => {
     return icons[this.basicTextStyle()];

libs/block-note-angular/src/lib/components/buttons/basic-text-style-button/basic-text-style-button.component.html renamed to libs/block-note-angular/src/lib/components/buttons/basic-text-style-button/bna-basic-text-style-button.component.html

@@ -1,16 +1,16 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { TextAlignButtonComponent } from './text-align-button.component';
+import { BnaTextAlignButtonComponent } from './bna-text-align-button.component';
 
 describe('TextAlignButtonComponent', () => {
-  let component: TextAlignButtonComponent;
-  let fixture: ComponentFixture<TextAlignButtonComponent>;
+  let component: BnaTextAlignButtonComponent;
+  let fixture: ComponentFixture<BnaTextAlignButtonComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [TextAlignButtonComponent],
+      imports: [BnaTextAlignButtonComponent],
     }).compileComponents();
 
-    fixture = TestBed.createComponent(TextAlignButtonComponent);
+    fixture = TestBed.createComponent(BnaTextAlignButtonComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

libs/block-note-angular/src/lib/components/buttons/basic-text-style-button/basic-text-style-button.component.ts renamed to libs/block-note-angular/src/lib/components/buttons/basic-text-style-button/bna-basic-text-style-button.component.ts

@@ -25,13 +25,13 @@ type Alignments = 'left' | 'center' | 'right';
   selector: 'bna-text-align-button',
   standalone: true,
   imports: [CommonModule, HlmButtonDirective, HlmIconComponent],
-  templateUrl: './text-align-button.component.html',
-  styleUrl: './text-align-button.component.css',
+  templateUrl: './bna-text-align-button.component.html',
+  styleUrl: './bna-text-align-button.component.css',
   providers: [
     provideIcons({ lucideAlignLeft, lucideAlignCenter, lucideAlignRight }),
   ],
 })
-export class TextAlignButtonComponent {
+export class BnaTextAlignButtonComponent {
   alignment = input.required<Alignments>();
   icon = computed(() => {
     return icons[this.alignment()];