fix: do not rebuild editor, on custom editor

dytab · Aug 28, 2024 · a6b3d3f · a6b3d3f
1 parent b012863
commit a6b3d3f
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 3 deletions.
diff --git a/apps/docs/src/pages/examples/custom/custom-editor/custom-editor.example.ts b/apps/docs/src/pages/examples/custom/custom-editor/custom-editor.example.ts
@@ -2,12 +2,13 @@ import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import {
-  Block,
   BlockNoteEditor,
   BlockNoteSchema,
   defaultBlockSpecs,
   defaultInlineContentSpecs,
   defaultStyleSpecs,
+  getDefaultSlashMenuItems,
+  insertOrUpdateBlock,
   PartialBlock,
 } from '@blocknote/core';
 import {
@@ -77,6 +78,8 @@ const schema = BlockNoteSchema.create({
     <bna-editor
       [initialContent]="initialContent"
       [editor]="editor"
+      [options]="options"
+      (onEditorReady)="onEditorReady($event)"
     />
   `,
 })
@@ -96,6 +99,41 @@ export class CustomEditorExample {
       content: 'Hallo Welt.',
     },
   ];
+
+  options: BlockNoteEditorOptionsType<
+    typeof schema.blockSchema,
+    typeof schema.inlineContentSchema,
+    typeof schema.styleSchema
+  > = {
+    getSuggestionItems: (editor) => [
+      {
+        key: 'alert',
+        title: 'Alert',
+        onItemClick: () => {
+          insertOrUpdateBlock(editor, {
+            type: 'alert' as never,
+          });
+        },
+        badge: 'BAFD',
+        subtext: 'SUBTEXT',
+        aliases: [
+          'alert',
+          'notification',
+          'emphasize',
+          'warning',
+          'error',
+          'info',
+          'success',
+        ],
+        group: 'Other',
+      },
+      ...getDefaultSlashMenuItems(editor),
+    ],
+  };
+
+  onEditorReady(editor: BlockNoteEditor<typeof schema.blockSchema>) {
+    console.log('editor ready', editor);
+  }
 }
 
 export const apiContentBlockExampleCode = ``;
diff --git a/apps/docs/src/pages/examples/custom/custom-editor/custom-editor.page.ts b/apps/docs/src/pages/examples/custom/custom-editor/custom-editor.page.ts
@@ -6,8 +6,8 @@ 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,
+  CustomEditorExample,
 } from './custom-editor.example';
 import { HlmButtonDirective, hlmP, HlmTabsComponent } from '@dytab/ui';
 

diff --git a/libs/ngx-blocknote/src/lib/editor/bna-editor.component.ts b/libs/ngx-blocknote/src/lib/editor/bna-editor.component.ts
@@ -148,9 +148,12 @@ export class BnaEditorComponent<
   selectedBlocks = output<Block<BSchema, ISchema, SSchema>[]>();
   onEditorReady = output<BlockNoteEditor<BSchema, ISchema, SSchema>>();
 
+  private hasCustomEditor = false;
+
   @Input()
   set editor(editor: BlockNoteEditor<BSchema, ISchema, SSchema>) {
     this._editor = editor;
+    this.hasCustomEditor = true;
     this.blockNoteAngularService.setEditor(editor);
     this.createEditorListeners(editor);
   }
@@ -189,7 +192,7 @@ export class BnaEditorComponent<
   }
 
   ngOnChanges(changes: SimpleChanges) {
-    if (changes['options']) {
+    if (!this.hasCustomEditor && changes['options']) {
       this.editor = this.createEditor(undefined);
       this.onEditorReady.emit(this.editor);
       this.firstTimeInitialized = true;