feat: add blue button to example

Author: m-risto

docs/src/pages/examples/ui-components/formatting-toolbar-buttons/blue-button.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { BlueButtonComponent } from './blue-button.component';
+
+describe('BlueButtonComponent', () => {
+  let component: BlueButtonComponent;
+  let fixture: ComponentFixture<BlueButtonComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [BlueButtonComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(BlueButtonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

docs/src/pages/examples/ui-components/formatting-toolbar-buttons/blue-button.component.ts

@@ -0,0 +1,37 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { BlockNoteAngularService } from '@dytab/block-note-angular';
+import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
+
+@Component({
+  selector: 'bna-blue-button',
+  standalone: true,
+  imports: [CommonModule, HlmButtonDirective],
+  template: ` <button
+    hlmBtn
+    size="icon"
+    variant="ghost"
+    (click)="changeToBlue()"
+    [ngClass]="{
+      'bg-gray-900 text-gray-100': blockNoteAngularService.editor()
+        ? blockNoteAngularService.editor()!.getActiveStyles().textColor ===
+            'blue' &&
+          blockNoteAngularService.editor()!.getActiveStyles()
+            .backgroundColor === 'blue'
+        : false
+    }"
+  >
+    Blue<button></button>
+  </button>`,
+  styles: ``,
+})
+export class BlueButtonComponent {
+  constructor(public blockNoteAngularService: BlockNoteAngularService) {}
+
+  changeToBlue() {
+    this.blockNoteAngularService.editor()?.toggleStyles({
+      textColor: 'blue',
+      backgroundColor: 'blue',
+    });
+  }
+}

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

@@ -7,6 +7,8 @@ import {
   BnaFormattingToolbarComponent,
   BnaFormattingToolbarControllerDirective,
 } from '@dytab/block-note-angular';
+import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
+import { BlueButtonComponent } from './blue-button.component';
 
 @Component({
   selector: 'bna-basic-setup-example',
@@ -17,10 +19,13 @@ import {
     BnaFormattingToolbarControllerDirective,
     BasicTextStyleButtonComponent,
     BnaFormattingToolbarComponent,
+    HlmButtonDirective,
+    BlueButtonComponent,
   ],
   template: `<bna-editor [initialContent]="initialContent">
     <bna-formatting-toolbar-controller>
       <bna-formatting-toolbar>
+        <bna-blue-button />
         <bna-basic-text-style-button [basicTextStyle]="'italic'" />
         <bna-basic-text-style-button [basicTextStyle]="'bold'" />
       </bna-formatting-toolbar>

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

@@ -1,4 +1,5 @@
 export * from './lib/block-note-editor/bna-editor.component';
+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';