feat: add formatting side menu example

Author: m-risto

docs/src/app/app.routes.ts

@@ -11,6 +11,7 @@ import { AlertBlockPage } from '../pages/examples/custom/alert-block/alert-block
 import { ApiContentBlockPage } from '../pages/examples/custom/api-content-block/api-content-block.page';
 import { ExamplesPage } from '../pages/examples/examples.page';
 import { ConvertToHtmlPage } from '../pages/examples/interoperability/convert-to-html/convert-to-html.page';
+import { FormattingSideMenuButtonsPage } from '../pages/examples/ui-components/formatting-side-menu-buttons/formatting-side-menu-buttons.page';
 import { FormattingToolbarButtonsPage } from '../pages/examples/ui-components/formatting-toolbar-buttons/formatting-toolbar-buttons.page';
 import { OverviewPage } from '../pages/overview.page';
 
@@ -58,6 +59,10 @@ export const appRoutes: Route[] = [
         path: 'ui-components/formatting-toolbar-buttons',
         component: FormattingToolbarButtonsPage,
       },
+      {
+        path: 'ui-components/formatting-side-menu-buttons',
+        component: FormattingSideMenuButtonsPage,
+      },
       { path: '**', redirectTo: 'overview' },
     ],
   },

docs/src/pages/examples/examples.page.ts

@@ -106,6 +106,13 @@ import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
         routerLink="ui-components/formatting-toolbar-buttons"
         >Formatting Toolbar Buttons</a
       >
+      <a
+        hlmBtn
+        variant="ghost"
+        class="justify-start"
+        routerLink="ui-components/formatting-side-menu-buttons"
+        >Formatting Side Menu Buttons</a
+      >
     </aside>
     <main class="overflow-hidden py-6">
       <router-outlet class="hidden"></router-outlet>

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

@@ -0,0 +1,66 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { PartialBlock } from '@blocknote/core';
+import {
+  BasicTextStyleButtonComponent,
+  BnaDragHandleMenuComponent,
+  BnaEditorComponent,
+  BnaSideMenuComponent,
+  BnaSideMenuControllerDirective,
+} from '@dytab/block-note-angular';
+import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
+import { RemoveBlockButtonComponent } from './remove-block-button.component';
+
+@Component({
+  selector: 'bna-basic-setup-example',
+  standalone: true,
+  imports: [
+    CommonModule,
+    BnaEditorComponent,
+    BasicTextStyleButtonComponent,
+    HlmButtonDirective,
+    BnaSideMenuControllerDirective,
+    BnaSideMenuComponent,
+    RemoveBlockButtonComponent,
+    BnaDragHandleMenuComponent,
+  ],
+  template: `<bna-editor [initialContent]="initialContent">
+    <bna-side-menu-controller>
+      <bna-side-menu>
+        <bna-remove-block-button /> <bna-drag-handle-menu-btn
+      /></bna-side-menu>
+    </bna-side-menu-controller>
+  </bna-editor> `,
+})
+export class FormattingSideMenuButtonsExample {
+  initialContent: PartialBlock[] = [
+    {
+      type: 'paragraph',
+      content: 'Welcome to this demo!',
+    },
+    {
+      type: 'paragraph',
+      content: '<- Notice the new button in the side menu',
+    },
+    {
+      type: 'paragraph',
+      content: 'Click it to remove the hovered block',
+    },
+    {
+      type: 'paragraph',
+    },
+  ];
+}
+
+export const formattingSideMenuButtonsExampleCode = `import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { BnaEditorComponent } from '@dytab/block-note-angular';
+
+@Component({
+  standalone: true,
+  imports: [CommonModule, BnaEditorComponent],
+  template: \` <bna-editor [initialContent]="initialContent" /> \`,
+})
+export class BasicSetupExample {
+  initialContent = undefined;
+}`;

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

@@ -0,0 +1,58 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import {
+  HlmTabsComponent,
+  HlmTabsContentDirective,
+  HlmTabsListComponent,
+  HlmTabsTriggerDirective,
+} from '@spartan-ng/ui-tabs-helm';
+import { hlmP } from '@spartan-ng/ui-typography-helm';
+import { Highlight } from 'ngx-highlightjs';
+import { CodeComponent } from '../../../../shared/code/code.component';
+import { DemoBoxComponent } from '../../../../shared/layout/demo-box.component';
+import { TabsComponent } from '../../../../shared/layout/example-tabs.component';
+import { SectionIntroComponent } from '../../../../shared/layout/section-intro.component';
+import {
+  FormattingSideMenuButtonsExample,
+  formattingSideMenuButtonsExampleCode,
+} from './formatting-side-menu-buttons.example';
+
+@Component({
+  standalone: true,
+  imports: [
+    CommonModule,
+    SectionIntroComponent,
+    DemoBoxComponent,
+    HlmTabsComponent,
+    HlmTabsListComponent,
+    HlmTabsContentDirective,
+    HlmTabsTriggerDirective,
+    TabsComponent,
+    CodeComponent,
+    FormattingSideMenuButtonsExample,
+    Highlight,
+  ],
+  template: `
+    <bna-section-intro name="Adding Formatting Toolbar Buttons">
+      <p class="${hlmP} mb-8">
+        In this example, we add a blue text/background color and code style
+        button to the Formatting Toolbar.
+      </p>
+      <p>
+        <strong>Try it out</strong>: Select some text to open the Formatting
+        Toolbar, and click one of the new buttons!
+      </p>
+    </bna-section-intro>
+    <hlm-tabs tab="preview">
+      <bna-example-tabs firstTab="Preview" secondTab="Code">
+        <bna-demo-box firstTab>
+          <bna-basic-setup-example />
+        </bna-demo-box>
+        <bna-code [code]="exampleCode" secondTab />
+      </bna-example-tabs>
+    </hlm-tabs>
+  `,
+})
+export class FormattingSideMenuButtonsPage {
+  exampleCode = formattingSideMenuButtonsExampleCode;
+}

docs/src/pages/examples/ui-components/formatting-side-menu-buttons/remove-block-button.component.spec.ts

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

docs/src/pages/examples/ui-components/formatting-side-menu-buttons/remove-block-button.component.ts

@@ -0,0 +1,41 @@
+import { CommonModule } from '@angular/common';
+import { Component, effect } from '@angular/core';
+import { Block } from '@blocknote/core';
+import { BlockNoteAngularService } from '@dytab/block-note-angular';
+import { provideIcons } from '@ng-icons/core';
+import { lucideTrash } from '@ng-icons/lucide';
+import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
+import { HlmIconComponent } from '@spartan-ng/ui-icon-helm';
+
+@Component({
+  selector: 'bna-remove-block-button',
+  standalone: true,
+  imports: [CommonModule, HlmButtonDirective, HlmIconComponent],
+  providers: [provideIcons({ lucideTrash })],
+  template: ` <button hlmBtn size="xs" variant="ghost" (click)="deleteBlock()">
+    <hlm-icon size="xs" name="lucideTrash" />
+  </button>`,
+  styles: ``,
+})
+export class RemoveBlockButtonComponent {
+  block?: Block;
+  constructor(public blockNoteAngularService: BlockNoteAngularService) {
+    effect(() => {
+      const editor = blockNoteAngularService.editor();
+      if (!editor) {
+        return;
+      }
+      editor.sideMenu.onUpdate((state) => {
+        this.block = state.block;
+      });
+    });
+  }
+
+  deleteBlock() {
+    const editor = this.blockNoteAngularService.editor();
+    if (!editor || !this.block) {
+      return;
+    }
+    this.blockNoteAngularService.editor()!.removeBlocks([this.block]);
+  }
+}

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

@@ -4,3 +4,7 @@ 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/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';
+export * from './lib/components/bna-side-menu/default-buttons/add-block-button/bna-add-block-button.component';

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

@@ -15,11 +15,17 @@
       </bna-formatting-toolbar>
     </bna-formatting-toolbar-controller>
   </ng-container>
-
-  <bna-side-menu-controller class="text-gray-500">
-    <bna-add-block-btn />
-    <bna-drag-handle-menu-btn />
-  </bna-side-menu-controller>
+  <div #sideMenuController>
+    <ng-content select="bna-side-menu-controller"></ng-content>
+  </div>
+  <ng-container *ngIf="!sideMenuController.hasChildNodes()">
+    <bna-side-menu-controller>
+      <bna-side-menu>
+        <bna-add-block-btn />
+        <bna-drag-handle-menu-btn />
+      </bna-side-menu>
+    </bna-side-menu-controller>
+  </ng-container>
   <bna-view-controller
     class="block ProseMirror bn-editor relative bn-default-styles"
   />

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

@@ -40,6 +40,7 @@ import { BnaFilePanelComponent } from '../components/bna-file-panel/bna-file-pan
 import { BnaFormattingToolbarControllerDirective } from '../components/bna-formatting-toolbar/bna-formatting-toolbar-controller.directive';
 import { BnaFormattingToolbarComponent } from '../components/bna-formatting-toolbar/bna-formatting-toolbar.component';
 import { BnaSideMenuControllerDirective } from '../components/bna-side-menu/bna-side-menu-controller.directive';
+import { BnaSideMenuComponent } from '../components/bna-side-menu/bna-side-menu.component';
 import { BnaAddBlockButtonComponent } from '../components/bna-side-menu/default-buttons/add-block-button/bna-add-block-button.component';
 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';
@@ -73,6 +74,7 @@ import { BlockNoteAngularService } from '../services/block-note-angular.service'
     HlmInputDirective,
     BnaFilePanelControllerDirective,
     BnaFormattingToolbarComponent,
+    BnaSideMenuComponent,
   ],
   providers: [BlockNoteAngularService],
   selector: 'bna-editor',

libs/block-note-angular/src/lib/components/bna-side-menu/bna-side-menu.component.css

@@ -0,0 +1 @@
+<ng-content></ng-content>

libs/block-note-angular/src/lib/components/bna-side-menu/bna-side-menu.component.html

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

libs/block-note-angular/src/lib/components/bna-side-menu/bna-side-menu.component.spec.ts

@@ -0,0 +1,14 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'bna-side-menu',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './bna-side-menu.component.html',
+  styleUrl: './bna-side-menu.component.css',
+  host: {
+    class: 'text-gray-500',
+  },
+})
+export class BnaSideMenuComponent {}