feat: editor can be overwritten

apps/docs/src/pages/examples/custom/custom-editor/custom-editor.example.ts

@@ -0,0 +1,101 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
+import {
+  Block,
+  BlockNoteEditor,
+  BlockNoteSchema,
+  defaultBlockSpecs,
+  defaultInlineContentSpecs,
+  defaultStyleSpecs,
+  PartialBlock,
+} from '@blocknote/core';
+import {
+  BlockNoteAngularService,
+  BlockNoteEditorOptionsType,
+  BnaAddBlockButtonComponent,
+  BnaDeleteBlockItemComponent,
+  BnaDragHandleMenuComponent,
+  BnaEditorComponent,
+  BnaSideMenuComponent,
+  BnaSideMenuControllerDirective,
+} from '@dytab/ngx-blocknote';
+import {
+  BrnDialogContentDirective,
+  BrnDialogDescriptionDirective,
+  BrnDialogTitleDirective,
+  BrnDialogTriggerDirective,
+} from '@spartan-ng/ui-dialog-brain';
+import { ResetBlockButtonComponent } from '../../ui-components/adding-side-menu-drag-handle-items/reset-block-button.component';
+import {
+  HlmButtonDirective,
+  HlmCheckboxComponent,
+  HlmDialogComponent,
+  HlmDialogContentComponent,
+  HlmDialogFooterComponent,
+  HlmDialogHeaderComponent,
+  HlmInputDirective,
+} from '@dytab/ui';
+import { alertBlock } from '../alert-block/alert-block';
+
+const schema = BlockNoteSchema.create({
+  blockSpecs: {
+    ...defaultBlockSpecs,
+    alert: alertBlock,
+  },
+  inlineContentSpecs: { ...defaultInlineContentSpecs },
+  styleSpecs: { ...defaultStyleSpecs },
+});
+
+@Component({
+  selector: 'bna-custom-editor-example',
+  standalone: true,
+  imports: [
+    CommonModule,
+    BnaEditorComponent,
+    HlmButtonDirective,
+    BnaAddBlockButtonComponent,
+    BnaDeleteBlockItemComponent,
+    BnaDragHandleMenuComponent,
+    BnaSideMenuComponent,
+    BnaSideMenuControllerDirective,
+    ResetBlockButtonComponent,
+    HlmDialogComponent,
+    HlmDialogContentComponent,
+    BrnDialogContentDirective,
+    HlmDialogHeaderComponent,
+    BrnDialogTitleDirective,
+    BrnDialogDescriptionDirective,
+    BrnDialogTriggerDirective,
+    HlmDialogFooterComponent,
+    HlmCheckboxComponent,
+    ReactiveFormsModule,
+    HlmInputDirective,
+  ],
+  providers: [BlockNoteAngularService],
+  template: `
+    <bna-editor
+      [initialContent]="initialContent"
+      [editor]="editor"
+    />
+  `,
+})
+export class CustomEditorExample {
+  editor = BlockNoteEditor.create({ schema });
+
+  initialContent: PartialBlock<typeof schema.blockSchema>[] = [
+    {
+      type: 'paragraph',
+      content: 'test',
+    },
+    {
+      type: 'alert',
+      props: {
+        type: 'warning',
+      },
+      content: 'Hallo Welt.',
+    },
+  ];
+}
+
+export const apiContentBlockExampleCode = ``;

apps/docs/src/pages/examples/custom/custom-editor/custom-editor.page.ts

@@ -0,0 +1,43 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { BnaEditorComponent } from '@dytab/ngx-blocknote';
+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 {
+  CustomEditorExample,
+  apiContentBlockExampleCode,
+} from './custom-editor.example';
+import { HlmButtonDirective, hlmP, HlmTabsComponent } from '@dytab/ui';
+
+@Component({
+  standalone: true,
+  imports: [
+    CommonModule,
+    BnaEditorComponent,
+    HlmButtonDirective,
+    SectionIntroComponent,
+    CodeComponent,
+    DemoBoxComponent,
+    HlmTabsComponent,
+    TabsComponent,
+    CustomEditorExample,
+  ],
+  template: `<bna-section-intro name="Custom Editor">
+      <p class="${hlmP} mb-8">
+        In this example, we want to give a custom editor as input
+      </p>
+    </bna-section-intro>
+    <hlm-tabs tab="preview">
+      <bna-example-tabs firstTab="Preview" secondTab="Code">
+        <bna-demo-box firstTab>
+          <bna-custom-editor-example />
+        </bna-demo-box>
+        <bna-code [code]="exampleCode" secondTab />
+      </bna-example-tabs>
+    </hlm-tabs>`,
+})
+export class CustomEditorPage {
+  exampleCode = apiContentBlockExampleCode;
+}

apps/docs/src/pages/examples/shared/examples.ts

@@ -19,6 +19,7 @@ import { FormattingToolbarButtonsPage } from '../ui-components/formatting-toolba
 import { Example, ExampleGroup } from './example.type';
 import { FormPage } from '../basic/form/form.page';
 import { ServerSideRenderingPage } from '../backend/server-side-rendering/server-side-rendering.page';
+import { CustomEditorPage } from '../custom/custom-editor/custom-editor.page';
 
 //This will be added to The app routes and also to the links in the examples
 export const exampleLinks: Example[] = [
@@ -100,6 +101,12 @@ export const exampleLinks: Example[] = [
     name: 'Mentions Menu',
     component: MentionsMenuPage,
   },
+  {
+    groupName: 'Custom',
+    url: 'custom/editor',
+    name: 'Custom Editor',
+    component: CustomEditorPage,
+  },
   {
     groupName: 'Extensions',
     url: 'extensions/heading-block',

libs/ngx-blocknote/src/lib/components/file-panel/bna-file-panel.component.ts

@@ -39,42 +39,25 @@ export class BnaFilePanelComponent implements OnInit {
   fileControl = new FormControl();
 
   constructor(private blockNoteAngularService: BlockNoteAngularService) {
-    console.log('build');
     const editor = this.blockNoteAngularService.editor();
-    // useEditorContentOrSelectionChange(() => {
-    //   const block = editor.getTextCursorPosition().block;
-    //   const selectedBlocks = this.blockNoteAngularService.selectedBlocks();
-    //   this.focusedBlock.set(block as any);
-    //   console.log(
-    //     'update focused block',
-    //     block,
-    //     selectedBlocks[0],
-    //     this.focusedBlock()
-    //   );
-    // }, editor);
     editor.filePanel?.onUpdate(async (filePanelState) => {
       if (!filePanelState.show) {
         this.focusedBlock.set(undefined);
       } else {
         this.focusedBlock.set(filePanelState.block);
       }
     });
-    effect(() => {
-      console.log('changed', this.focusedBlock());
-    });
   }
 
   ngOnInit() {
     const editor = this.blockNoteAngularService.editor();
     const block = editor.getTextCursorPosition().block;
-    const selectedBlocks = this.blockNoteAngularService.selectedBlocks();
     this.focusedBlock.set(block as any);
   }
 
   async onFileInputChanged(event: Event) {
     const editor = this.blockNoteAngularService.editor();
     const focusedBlock = this.focusedBlock();
-    console.log()
     if (!editor.uploadFile || !focusedBlock) {
       console.error('uploadFile was not provided in editor options');
       return;

libs/ngx-blocknote/src/lib/components/formatting-toolbar/default-buttons/create-link/bna-create-link.component.ts

@@ -77,7 +77,6 @@ export class BnaCreateLinkComponent {
   dict = this.blockNoteAngularService.editor().dictionary;
 
   constructor(private blockNoteAngularService: BlockNoteAngularService) {
-    console.log(this.dict);
     this.blockNoteAngularService.editor().onSelectionChange(() => {
       this.initialValue = this.getInitialValue();
     });

libs/ngx-blocknote/src/lib/editor/bna-editor.component.ts

@@ -148,7 +148,20 @@ export class BnaEditorComponent<
   selectedBlocks = output<Block<BSchema, ISchema, SSchema>[]>();
   onEditorReady = output<BlockNoteEditor<BSchema, ISchema, SSchema>>();
 
-  editor = this.createEditor(undefined);
+  @Input()
+  set editor(editor: BlockNoteEditor<BSchema, ISchema, SSchema>) {
+    this._editor = editor;
+    this.blockNoteAngularService.setEditor(editor);
+    this.createEditorListeners(editor);
+  }
+
+  get editor(): BlockNoteEditor<BSchema, ISchema, SSchema> {
+    return this._editor;
+  }
+
+  private _editor: BlockNoteEditor<BSchema, ISchema, SSchema> =
+    this.createEditor(undefined);
+
   firstTimeInitialized = false;
 
   constructor(private blockNoteAngularService: BlockNoteAngularService) {