Skip to content

Commit 35fb92e

Browse files
FMuksFMuks
committed
feat: add removing default block example
1 parent e14feda commit 35fb92e

File tree

4 files changed

+153
-0
lines changed

4 files changed

+153
-0
lines changed

‎docs/src/app/app.routes.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,9 @@ import { OverviewPage } from '../pages/overview.page';
99
import {
1010
ManipulatingBlocksPage
1111
} from '../pages/examples/basic/manipulating-blocks/manipulating-blocks.page';
12+
import {
13+
RemovingDefaultBlocksPage
14+
} from '../pages/examples/basic/removing-default-blocks/removing-default-blocks.page';
1215

1316
export const appRoutes: Route[] = [
1417
{ path: '', redirectTo: 'overview', pathMatch: 'full' },
@@ -29,6 +32,10 @@ export const appRoutes: Route[] = [
2932
path: 'basic/manipulating-blocks',
3033
component: ManipulatingBlocksPage,
3134
},
35+
{
36+
path: 'basic/removing-default-blocks',
37+
component: RemovingDefaultBlocksPage,
38+
},
3239
{
3340
path: 'custom/alert-block',
3441
component: AlertBlockPage,

‎docs/src/pages/examples/basic/removing-default-blocks/removing-default-blocks.example.ts

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
import { CommonModule } from '@angular/common';
2+
import { Component } from '@angular/core';
3+
import { BnaEditorComponent } from '@dytab/block-note-angular';
4+
import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
5+
import { BlockSpecs, defaultBlockSpecs } from '@blocknote/core';
6+
7+
@Component({
8+
selector: 'bna-removing-default-blocks-example',
9+
standalone: true,
10+
imports: [CommonModule, BnaEditorComponent, HlmButtonDirective],
11+
template: `
12+
<bna-editor [initialContent]="initialContent" [blockSpecs]="blockSpecs" />
13+
`,
14+
})
15+
export class RemovingDefaultBlocksExample{
16+
initialContent = undefined;
17+
18+
blockSpecs: BlockSpecs = {
19+
...defaultBlockSpecs,
20+
audio: undefined as never,
21+
image: undefined as never,
22+
};
23+
}
24+
25+
export const removingDefaultBlocksExampleCode = `import { CommonModule } from '@angular/common';
26+
import { Component } from '@angular/core';
27+
import { BnaEditorComponent } from '@dytab/block-note-angular';
28+
import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
29+
import { BlockNoteEditor } from '@blocknote/core';
30+
31+
@Component({
32+
selector: 'bna-manipulating-blocks-example',
33+
standalone: true,
34+
imports: [CommonModule, BnaEditorComponent, HlmButtonDirective],
35+
template: \`
36+
<div class="flex gap-2">
37+
<button hlmBtn size="sm" type="button" (click)="insertFirstBlock()">Insert First Block</button>
38+
<button hlmBtn size="sm" type="button" (click)="updateFirstBlock()">Update First Block</button>
39+
<button hlmBtn size="sm" type="button" (click)="removeFirstBlock()">Remove First Block</button>
40+
<button hlmBtn size="sm" type="button" (click)="replaceFirstBlock()">Replace First Block</button>
41+
</div>
42+
<bna-editor [initialContent]="initialContent" (onEditorReady)="editorReady($event)" />
43+
\`,
44+
})
45+
export class ManipulatingBlocksExample{
46+
initialContent = undefined;
47+
editor!: BlockNoteEditor;
48+
49+
async editorReady(editor: BlockNoteEditor) {
50+
this.editor = editor;
51+
}
52+
53+
insertFirstBlock(){
54+
this.editor.insertBlocks(
55+
[
56+
{
57+
content:
58+
"This block was inserted at " +
59+
new Date().toLocaleTimeString(),
60+
},
61+
],
62+
this.editor.document[0],
63+
"before"
64+
)
65+
}
66+
67+
updateFirstBlock(){
68+
this.editor.updateBlock(this.editor.document[0], {
69+
content:
70+
"This block was updated at " + new Date().toLocaleTimeString(),
71+
})
72+
}
73+
74+
removeFirstBlock(){
75+
this.editor.removeBlocks([this.editor.document[0]])
76+
}
77+
78+
replaceFirstBlock(){
79+
this.editor.replaceBlocks(
80+
[this.editor.document[0]],
81+
[
82+
{
83+
content:
84+
"This block was replaced at " +
85+
new Date().toLocaleTimeString(),
86+
},
87+
]
88+
)
89+
}
90+
}`;

‎docs/src/pages/examples/basic/removing-default-blocks/removing-default-blocks.page.ts

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import { CommonModule } from '@angular/common';
2+
import { Component } from '@angular/core';
3+
import {
4+
HlmTabsComponent,
5+
HlmTabsContentDirective,
6+
HlmTabsListComponent,
7+
HlmTabsTriggerDirective,
8+
} from '@spartan-ng/ui-tabs-helm';
9+
import { hlmP } from '@spartan-ng/ui-typography-helm';
10+
import { Highlight } from 'ngx-highlightjs';
11+
import { CodeComponent } from '../../../../shared/code/code.component';
12+
import { DemoBoxComponent } from '../../../../shared/layout/demo-box.component';
13+
import { TabsComponent } from '../../../../shared/layout/example-tabs.component';
14+
import { SectionIntroComponent } from '../../../../shared/layout/section-intro.component';
15+
import {
16+
RemovingDefaultBlocksExample,
17+
removingDefaultBlocksExampleCode,
18+
} from './removing-default-blocks.example';
19+
20+
@Component({
21+
standalone: true,
22+
imports: [
23+
CommonModule,
24+
SectionIntroComponent,
25+
DemoBoxComponent,
26+
HlmTabsComponent,
27+
HlmTabsListComponent,
28+
HlmTabsContentDirective,
29+
HlmTabsTriggerDirective,
30+
TabsComponent,
31+
CodeComponent,
32+
RemovingDefaultBlocksExample,
33+
Highlight,
34+
],
35+
template: `
36+
<bna-section-intro name="Removing Default Blocks from Schema">
37+
<p class="${hlmP} mb-8">
38+
This example shows how to change the default schema and disable the Audio and Image blocks. To do this, we pass in a custom schema based on the built-in, default schema, with two specific blocks removed.
39+
</p>
40+
</bna-section-intro>
41+
<hlm-tabs tab="preview">
42+
<bna-example-tabs firstTab="Preview" secondTab="Code">
43+
<bna-demo-box firstTab>
44+
<bna-removing-default-blocks-example />
45+
</bna-demo-box>
46+
<bna-code [code]="exampleCode" secondTab />
47+
</bna-example-tabs>
48+
</hlm-tabs>
49+
`,
50+
})
51+
export class RemovingDefaultBlocksPage{
52+
exampleCode = removingDefaultBlocksExampleCode;
53+
}

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,9 @@ import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
2626
<a hlmBtn variant="ghost" routerLink="basic/manipulating-blocks" class="justify-start"
2727
>Manipulating Blocks</a
2828
>
29+
<a hlmBtn variant="ghost" routerLink="basic/removing-default-blocks" class="justify-start"
30+
>Removing Default Blocks</a
31+
>
2932
<a
3033
hlmBtn
3134
variant="ghost"

0 commit comments

Comments
 (0)