Skip to content

Commit e14feda

Browse files
FMuksFMuks
committed
feat: add manipulating block example
1 parent de337a7 commit e14feda

File tree

4 files changed

+196
-0
lines changed

4 files changed

+196
-0
lines changed

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,9 @@ import { AlertBlockPage } from '../pages/examples/custom/alert-block/alert-block
66
import { ExamplesPage } from '../pages/examples/examples.page';
77
import { ConvertToHtmlPage } from '../pages/examples/interoperability/convert-to-html/convert-to-html.page';
88
import { OverviewPage } from '../pages/overview.page';
9+
import {
10+
ManipulatingBlocksPage
11+
} from '../pages/examples/basic/manipulating-blocks/manipulating-blocks.page';
912

1013
export const appRoutes: Route[] = [
1114
{ path: '', redirectTo: 'overview', pathMatch: 'full' },
@@ -22,6 +25,10 @@ export const appRoutes: Route[] = [
2225
path: 'basic/all-blocks',
2326
component: AllBlocksPage,
2427
},
28+
{
29+
path: 'basic/manipulating-blocks',
30+
component: ManipulatingBlocksPage,
31+
},
2532
{
2633
path: 'custom/alert-block',
2734
component: AlertBlockPage,

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

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
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 { BlockNoteEditor } from '@blocknote/core';
6+
7+
@Component({
8+
selector: 'bna-manipulating-blocks-example',
9+
standalone: true,
10+
imports: [CommonModule, BnaEditorComponent, HlmButtonDirective],
11+
template: `
12+
<div class="flex gap-2">
13+
<button hlmBtn size="sm" type="button" (click)="insertFirstBlock()">Insert First Block</button>
14+
<button hlmBtn size="sm" type="button" (click)="updateFirstBlock()">Update First Block</button>
15+
<button hlmBtn size="sm" type="button" (click)="removeFirstBlock()">Remove First Block</button>
16+
<button hlmBtn size="sm" type="button" (click)="replaceFirstBlock()">Replace First Block</button>
17+
</div>
18+
<bna-editor [initialContent]="initialContent" (onEditorReady)="editorReady($event)" />
19+
`,
20+
})
21+
export class ManipulatingBlocksExample{
22+
initialContent = undefined;
23+
editor!: BlockNoteEditor;
24+
25+
async editorReady(editor: BlockNoteEditor) {
26+
this.editor = editor;
27+
}
28+
29+
insertFirstBlock(){
30+
this.editor.insertBlocks(
31+
[
32+
{
33+
content:
34+
"This block was inserted at " +
35+
new Date().toLocaleTimeString(),
36+
},
37+
],
38+
this.editor.document[0],
39+
"before"
40+
)
41+
}
42+
43+
updateFirstBlock(){
44+
this.editor.updateBlock(this.editor.document[0], {
45+
content:
46+
"This block was updated at " + new Date().toLocaleTimeString(),
47+
})
48+
}
49+
50+
removeFirstBlock(){
51+
this.editor.removeBlocks([this.editor.document[0]])
52+
}
53+
54+
replaceFirstBlock(){
55+
this.editor.replaceBlocks(
56+
[this.editor.document[0]],
57+
[
58+
{
59+
content:
60+
"This block was replaced at " +
61+
new Date().toLocaleTimeString(),
62+
},
63+
]
64+
)
65+
}
66+
}
67+
68+
export const manipulatingBlocksExampleCode = `import { CommonModule } from '@angular/common';
69+
import { Component } from '@angular/core';
70+
import { BnaEditorComponent } from '@dytab/block-note-angular';
71+
import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
72+
import { BlockNoteEditor } from '@blocknote/core';
73+
74+
@Component({
75+
selector: 'bna-manipulating-blocks-example',
76+
standalone: true,
77+
imports: [CommonModule, BnaEditorComponent, HlmButtonDirective],
78+
template: \`
79+
<div class="flex gap-2">
80+
<button hlmBtn size="sm" type="button" (click)="insertFirstBlock()">Insert First Block</button>
81+
<button hlmBtn size="sm" type="button" (click)="updateFirstBlock()">Update First Block</button>
82+
<button hlmBtn size="sm" type="button" (click)="removeFirstBlock()">Remove First Block</button>
83+
<button hlmBtn size="sm" type="button" (click)="replaceFirstBlock()">Replace First Block</button>
84+
</div>
85+
<bna-editor [initialContent]="initialContent" (onEditorReady)="editorReady($event)" />
86+
\`,
87+
})
88+
export class ManipulatingBlocksExample{
89+
initialContent = undefined;
90+
editor!: BlockNoteEditor;
91+
92+
async editorReady(editor: BlockNoteEditor) {
93+
this.editor = editor;
94+
}
95+
96+
insertFirstBlock(){
97+
this.editor.insertBlocks(
98+
[
99+
{
100+
content:
101+
"This block was inserted at " +
102+
new Date().toLocaleTimeString(),
103+
},
104+
],
105+
this.editor.document[0],
106+
"before"
107+
)
108+
}
109+
110+
updateFirstBlock(){
111+
this.editor.updateBlock(this.editor.document[0], {
112+
content:
113+
"This block was updated at " + new Date().toLocaleTimeString(),
114+
})
115+
}
116+
117+
removeFirstBlock(){
118+
this.editor.removeBlocks([this.editor.document[0]])
119+
}
120+
121+
replaceFirstBlock(){
122+
this.editor.replaceBlocks(
123+
[this.editor.document[0]],
124+
[
125+
{
126+
content:
127+
"This block was replaced at " +
128+
new Date().toLocaleTimeString(),
129+
},
130+
]
131+
)
132+
}
133+
}`;

‎docs/src/pages/examples/basic/manipulating-blocks/manipulating-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+
ManipulatingBlocksExample,
17+
manipulatingBlocksExampleCode,
18+
} from './manipulating-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+
ManipulatingBlocksExample,
33+
Highlight,
34+
],
35+
template: `
36+
<bna-section-intro name="Manipulating Blocks">
37+
<p class="${hlmP} mb-8">
38+
This example shows 4 buttons to manipulate the first block using the <code>insertBlocks</code>, <code>updateBlock</code>, <code>removeBlocks</code> and <code>replaceBlocks</code> methods.
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-manipulating-blocks-example />
45+
</bna-demo-box>
46+
<bna-code [code]="exampleCode" secondTab />
47+
</bna-example-tabs>
48+
</hlm-tabs>
49+
`,
50+
})
51+
export class ManipulatingBlocksPage{
52+
exampleCode = manipulatingBlocksExampleCode;
53+
}

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,9 @@ import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
2323
<a hlmBtn variant="ghost" routerLink="basic/minimal" class="justify-start"
2424
>Basic Setup</a
2525
>
26+
<a hlmBtn variant="ghost" routerLink="basic/manipulating-blocks" class="justify-start"
27+
>Manipulating Blocks</a
28+
>
2629
<a
2730
hlmBtn
2831
variant="ghost"

0 commit comments

Comments
 (0)