feat: add inputs for editor specs

Author: m-risto

src/app/app.component.html

@@ -1,2 +1,2 @@
-<bna-test-editor/>
-<bna-custom-block-example></bna-custom-block-example>
+<!--<bna-test-editor/>-->
+<bna-custom-alert-block-example></bna-custom-alert-block-example>

src/app/app.component.ts

@@ -1,14 +1,17 @@
 import { Component } from '@angular/core';
 import { RouterModule } from '@angular/router';
+import { CustomAlertBlockExampleComponent } from '../examples/custom-alert-block/custom-alert-block-example.component';
 import { TestHostBlockNodeEditorComponent } from '../ui/block-note-editor/_usage/test-host.component';
 import { NxWelcomeComponent } from './nx-welcome.component';
-import {
-  CustomBlockExampleComponent
-} from '../examples/custom-blocks/custom-block-example.component';
 
 @Component({
   standalone: true,
-  imports: [NxWelcomeComponent, RouterModule, TestHostBlockNodeEditorComponent, CustomBlockExampleComponent],
+  imports: [
+    NxWelcomeComponent,
+    RouterModule,
+    TestHostBlockNodeEditorComponent,
+    CustomAlertBlockExampleComponent,
+  ],
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',

src/examples/alert/alert-block.ts renamed to src/examples/custom-alert-block/alert-block.ts

@@ -19,7 +19,7 @@ const alertRender = (
   editor: BlockNoteEditor<any, any, any>
 ) => {
   const div = document.createElement('p');
-  div.textContent = 'ALER asdasdT';
+  div.textContent = 'Alert';
 
   return {
     dom: div,

src/examples/custom-blocks/custom-block-example.component.css renamed to src/examples/custom-alert-block/custom-alert-block-example.component.css

@@ -8,6 +8,7 @@
     <bna-editor
       formControlName="editor"
       class="block min-h-52 bg-gray-200 rounded"
+      [blockSpecs]="blockSpecs"
 
     />
     @if (control.invalid && control.touched) {

src/examples/custom-blocks/custom-block-example.component.html renamed to src/examples/custom-alert-block/custom-alert-block-example.component.html

@@ -1,16 +1,16 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { CustomBlockExampleComponent } from './custom-block-example.component';
+import { CustomAlertBlockExampleComponent } from './custom-alert-block-example.component';
 
 describe('CustomBlockExampleComponent', () => {
-  let component: CustomBlockExampleComponent;
-  let fixture: ComponentFixture<CustomBlockExampleComponent>;
+  let component: CustomAlertBlockExampleComponent;
+  let fixture: ComponentFixture<CustomAlertBlockExampleComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [CustomBlockExampleComponent],
+      imports: [CustomAlertBlockExampleComponent],
     }).compileComponents();
 
-    fixture = TestBed.createComponent(CustomBlockExampleComponent);
+    fixture = TestBed.createComponent(CustomAlertBlockExampleComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/examples/custom-blocks/custom-block-example.component.spec.ts renamed to src/examples/custom-alert-block/custom-alert-block-example.component.spec.ts

@@ -0,0 +1,58 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import {
+  NonNullableFormBuilder,
+  ReactiveFormsModule,
+  Validators,
+} from '@angular/forms';
+import { Block, BlockSpecs, defaultBlockSpecs } from '@blocknote/core';
+import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
+import { BnaEditorComponent } from '../../ui/block-note-editor/_component/bna-editor.component';
+import { alertBlock } from './alert-block';
+
+@Component({
+  selector: 'bna-custom-alert-block-example',
+  standalone: true,
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    BnaEditorComponent,
+    HlmButtonDirective,
+  ],
+  templateUrl: './custom-alert-block-example.component.html',
+  styleUrl: './custom-alert-block-example.component.css',
+})
+export class CustomAlertBlockExampleComponent {
+  constructor(private formBuilder: NonNullableFormBuilder) {}
+
+  form = this.formBuilder.group({
+    editor: this.formBuilder.control<Block[] | undefined>(
+      [
+        {
+          id: '262bf9c4-3c2a-4543-bc47-49976ec904c3',
+          type: 'alert',
+          props: {},
+          content: [],
+          children: [],
+        },
+        //TODO: remove cast
+      ] as any,
+      Validators.required
+    ),
+  });
+  blockSpecs: BlockSpecs = {
+    ...defaultBlockSpecs,
+    alert: alertBlock,
+  };
+
+  get control() {
+    return this.form.controls.editor;
+  }
+
+  submit() {
+    this.form.markAllAsTouched();
+    if (!this.form.valid) return;
+
+    console.log('submitted', this.form.value);
+  }
+}

src/examples/custom-alert-block/custom-alert-block-example.component.ts

@@ -17,13 +17,14 @@ import {
   Block,
   BlockNoteEditor,
   BlockNoteSchema,
+  BlockSpecs,
   defaultBlockSpecs,
   defaultInlineContentSpecs,
   defaultStyleSpecs,
   DefaultSuggestionItem,
   getDefaultSlashMenuItems,
-  insertOrUpdateBlock,
-  PartialBlock,
+  InlineContentSpecs,
+  StyleSpecs,
 } from '@blocknote/core';
 import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
 import { HlmCardDirective } from '@spartan-ng/ui-card-helm';
@@ -36,7 +37,6 @@ import {
   HlmMenuSeparatorComponent,
   HlmMenuShortcutComponent,
 } from '@spartan-ng/ui-menu-helm';
-import { alertBlock } from '../../../examples/alert/alert-block';
 import { BnaFormattingToolbarDirective } from '../../components/bna-formatting-toolbar/bna-formatting-toolbar.directive';
 import { BnaSideMenuDirective } from '../../components/bna-side-menu/bna-side-menu.directive';
 import { BnaAddBlockButtonComponent } from '../../components/bna-side-menu/default-buttons/add-block-button/bna-add-block-button.component';
@@ -84,7 +84,10 @@ export class BnaEditorComponent implements ControlValueAccessor {
   formControl = input<FormControl>();
   formControlName = input<string>();
   labelForId = input<string>();
-  //TODO: add input for blocks, ...
+  blockSpecs = input<BlockSpecs>();
+  inlineContentSpecs = input<InlineContentSpecs>();
+  styleSpecs = input<StyleSpecs>();
+  inputSlashMenuItems = input<DefaultSuggestionItem[]>();
 
   isDisabled = false;
 
@@ -93,8 +96,6 @@ export class BnaEditorComponent implements ControlValueAccessor {
 
   addedElement = 0;
 
-  // formattingToolbar!: FormattingToolbar;
-
   constructor(
     @Optional()
     @Host()
@@ -129,56 +130,35 @@ export class BnaEditorComponent implements ControlValueAccessor {
   }
 
   createEditor(initialContent: Block[]) {
+    const blockSpecs = this.blockSpecs();
+    const inlineContentSpecs = this.inlineContentSpecs();
+    const styleSpecs = this.styleSpecs();
     this.editor = BlockNoteEditor.create({
       trailingBlock: false,
       schema: BlockNoteSchema.create({
-        blockSpecs: {
-          // enable the default blocks if desired
-          ...defaultBlockSpecs,
-
-          // Add your own custom blocks:
-          alert: alertBlock,
-        },
-        inlineContentSpecs: {
-          // enable the default inline content if desired
-          ...defaultInlineContentSpecs,
-
-          // Add your own custom inline content:
-          // customInlineContent: CustomInlineContent,
-        },
-        styleSpecs: {
-          // enable the default styles if desired
-          ...defaultStyleSpecs,
-
-          // Add your own custom styles:
-          // customStyle: CustomStyle
-        },
+        blockSpecs: blockSpecs ? blockSpecs : { ...defaultBlockSpecs },
+        inlineContentSpecs: inlineContentSpecs
+          ? inlineContentSpecs
+          : { ...defaultInlineContentSpecs },
+        styleSpecs: styleSpecs
+          ? styleSpecs
+          : {
+              ...defaultStyleSpecs,
+            },
       }),
       initialContent: initialContent,
-      //TODO: remove cast
     }) as unknown as BlockNoteEditor;
     this.slashMenuItems = this.getSlashMenuItems(this.editor);
     this.editor.onChange((data) => {
       this.onChange(data.document);
     });
   }
 
-  getSlashMenuItems(editor: BlockNoteEditor) {
-    return [...getDefaultSlashMenuItems(editor)];
-  }
-
-  addBlock() {
-    // Block that the text cursor is currently in.
-    // New block we want to insert.
-    const helloWorldBlock: PartialBlock = {
-      type: 'paragraph',
-      content: [{ type: 'text', text: 'Hello World', styles: { bold: true } }],
-    };
-
-    this.addedElement += 1;
-    // Inserting the new block after the current one.
-    insertOrUpdateBlock(this.editor, helloWorldBlock);
-    this.editor.suggestionMenus.closeMenu();
+  getSlashMenuItems(editor: BlockNoteEditor): DefaultSuggestionItem[] {
+    const slashMenuItems = this.inputSlashMenuItems();
+    return slashMenuItems
+      ? slashMenuItems
+      : [...getDefaultSlashMenuItems(editor)];
   }
 
   registerOnChange(fn: unknown) {
@@ -193,10 +173,4 @@ export class BnaEditorComponent implements ControlValueAccessor {
     this.isDisabled = isDisabled;
     this.editor.isEditable = !isDisabled;
   }
-
-  toggleStyle($event: MouseEvent, style: string) {
-    $event.preventDefault();
-    $event.stopPropagation();
-    this.editor.toggleStyles({ [style]: true });
-  }
 }