From 2408604b7b7db042d228ee9c5e71cdb37b35de26 Mon Sep 17 00:00:00 2001 From: Matthias risto Date: Wed, 28 Aug 2024 09:54:06 +0200 Subject: [PATCH] feat: editor can be overwritten --- .../custom-editor/custom-editor.example.ts | 101 ++++++++++++++++++ .../custom-editor/custom-editor.page.ts | 43 ++++++++ .../src/pages/examples/shared/examples.ts | 7 ++ .../file-panel/bna-file-panel.component.ts | 17 --- .../create-link/bna-create-link.component.ts | 1 - .../src/lib/editor/bna-editor.component.ts | 15 ++- 6 files changed, 165 insertions(+), 19 deletions(-) create mode 100644 apps/docs/src/pages/examples/custom/custom-editor/custom-editor.example.ts create mode 100644 apps/docs/src/pages/examples/custom/custom-editor/custom-editor.page.ts 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 new file mode 100644 index 0000000..b8cd873 --- /dev/null +++ b/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: ` + + `, +}) +export class CustomEditorExample { + editor = BlockNoteEditor.create({ schema }); + + initialContent: PartialBlock[] = [ + { + type: 'paragraph', + content: 'test', + }, + { + type: 'alert', + props: { + type: 'warning', + }, + content: 'Hallo Welt.', + }, + ]; +} + +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 new file mode 100644 index 0000000..099c8d0 --- /dev/null +++ b/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: ` +

+ In this example, we want to give a custom editor as input +

+ + + + + + + + + `, +}) +export class CustomEditorPage { + exampleCode = apiContentBlockExampleCode; +} diff --git a/apps/docs/src/pages/examples/shared/examples.ts b/apps/docs/src/pages/examples/shared/examples.ts index 6b7d970..e72a1f1 100644 --- a/apps/docs/src/pages/examples/shared/examples.ts +++ b/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', diff --git a/libs/ngx-blocknote/src/lib/components/file-panel/bna-file-panel.component.ts b/libs/ngx-blocknote/src/lib/components/file-panel/bna-file-panel.component.ts index 54b8ff5..fcc32b7 100644 --- a/libs/ngx-blocknote/src/lib/components/file-panel/bna-file-panel.component.ts +++ b/libs/ngx-blocknote/src/lib/components/file-panel/bna-file-panel.component.ts @@ -39,19 +39,7 @@ 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); @@ -59,22 +47,17 @@ export class BnaFilePanelComponent implements OnInit { 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; diff --git a/libs/ngx-blocknote/src/lib/components/formatting-toolbar/default-buttons/create-link/bna-create-link.component.ts b/libs/ngx-blocknote/src/lib/components/formatting-toolbar/default-buttons/create-link/bna-create-link.component.ts index 397e881..fe3a4b1 100644 --- a/libs/ngx-blocknote/src/lib/components/formatting-toolbar/default-buttons/create-link/bna-create-link.component.ts +++ b/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(); }); diff --git a/libs/ngx-blocknote/src/lib/editor/bna-editor.component.ts b/libs/ngx-blocknote/src/lib/editor/bna-editor.component.ts index c9f2f58..0a28c60 100644 --- a/libs/ngx-blocknote/src/lib/editor/bna-editor.component.ts +++ b/libs/ngx-blocknote/src/lib/editor/bna-editor.component.ts @@ -148,7 +148,20 @@ export class BnaEditorComponent< selectedBlocks = output[]>(); onEditorReady = output>(); - editor = this.createEditor(undefined); + @Input() + set editor(editor: BlockNoteEditor) { + this._editor = editor; + this.blockNoteAngularService.setEditor(editor); + this.createEditorListeners(editor); + } + + get editor(): BlockNoteEditor { + return this._editor; + } + + private _editor: BlockNoteEditor = + this.createEditor(undefined); + firstTimeInitialized = false; constructor(private blockNoteAngularService: BlockNoteAngularService) {