Skip to content

Commit ac105ed

Browse files
m-ristom-risto
committed
feat: add basic block note typings
1 parent 167b546 commit ac105ed

File tree

18 files changed

+324
-223
lines changed

18 files changed

+324
-223
lines changed

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

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { CommonModule } from '@angular/common';
22
import { Component } from '@angular/core';
3-
import { Block, BlockNoteEditor } from '@blocknote/core';
3+
import { Block, BlockNoteEditor, PartialBlock } from '@blocknote/core';
44
import { BnaEditorComponent } from '@dytab/block-note-angular';
55

66
@Component({
@@ -24,7 +24,7 @@ import { BnaEditorComponent } from '@dytab/block-note-angular';
2424
`,
2525
})
2626
export class BlocksJsonExample {
27-
initialContent = [
27+
initialContent: PartialBlock[] = [
2828
{
2929
type: 'paragraph',
3030
content: [
@@ -38,8 +38,7 @@ export class BlocksJsonExample {
3838
},
3939
],
4040
},
41-
//TODO: remove cast
42-
] as any;
41+
];
4342
editor!: BlockNoteEditor;
4443

4544
content = '';

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

Lines changed: 32 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,90 +1,57 @@
11
import { CommonModule } from '@angular/common';
22
import { Component } from '@angular/core';
3-
import { BnaEditorComponent } from '@dytab/block-note-angular';
3+
import { BlockNoteSchema, defaultBlockSpecs } from '@blocknote/core';
4+
import {
5+
BlockNoteEditorOptionsType,
6+
BnaEditorComponent,
7+
} from '@dytab/block-note-angular';
48
import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
5-
import { BlockSpecs, defaultBlockSpecs } from '@blocknote/core';
69

710
@Component({
811
selector: 'bna-removing-default-blocks-example',
912
standalone: true,
1013
imports: [CommonModule, BnaEditorComponent, HlmButtonDirective],
1114
template: `
12-
<bna-editor [initialContent]="initialContent" [blockSpecs]="blockSpecs" />
15+
<bna-editor [initialContent]="initialContent" [options]="options" />
1316
`,
1417
})
15-
export class RemovingDefaultBlocksExample{
18+
export class RemovingDefaultBlocksExample {
1619
initialContent = undefined;
17-
18-
blockSpecs: BlockSpecs = {
19-
...defaultBlockSpecs,
20-
audio: undefined as never,
21-
image: undefined as never,
20+
options: BlockNoteEditorOptionsType = {
21+
schema: BlockNoteSchema.create({
22+
blockSpecs: {
23+
...defaultBlockSpecs,
24+
audio: undefined as never,
25+
image: undefined as never,
26+
},
27+
}),
2228
};
2329
}
2430

2531
export const removingDefaultBlocksExampleCode = `import { CommonModule } from '@angular/common';
2632
import { Component } from '@angular/core';
27-
import { BnaEditorComponent } from '@dytab/block-note-angular';
33+
import { BlockNoteSchema, defaultBlockSpecs } from '@blocknote/core';
34+
import {
35+
BlockNoteEditorOptionsType,
36+
BnaEditorComponent,
37+
} from '@dytab/block-note-angular';
2838
import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
29-
import { BlockNoteEditor } from '@blocknote/core';
3039
3140
@Component({
32-
selector: 'bna-manipulating-blocks-example',
41+
selector: 'bna-removing-default-blocks-example',
3342
standalone: true,
3443
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+
template: \` <bna-editor [initialContent]="initialContent" [options]="options"/> \`,
4445
})
45-
export class ManipulatingBlocksExample{
46+
export class RemovingDefaultBlocksExample {
4647
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-
}
48+
options: BlockNoteEditorOptionsType = {
49+
schema: BlockNoteSchema.create({
50+
blockSpecs: {
51+
...defaultBlockSpecs,
52+
audio: undefined as never,
53+
image: undefined as never,
54+
},
55+
}),
56+
};
9057
}`;

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

Lines changed: 44 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { CommonModule } from '@angular/common';
22
import { Component } from '@angular/core';
3-
import { Block, BlockNoteEditor } from '@blocknote/core';
3+
import { Block, BlockNoteEditor, PartialBlock } from '@blocknote/core';
44
import { BnaEditorComponent } from '@dytab/block-note-angular';
55

66
@Component({
@@ -26,7 +26,7 @@ import { BnaEditorComponent } from '@dytab/block-note-angular';
2626
`,
2727
})
2828
export class SelectionBlocksExample {
29-
initialContent = [
29+
initialContent: PartialBlock[] = [
3030
{
3131
type: 'paragraph',
3232
content: 'Welcome to this demo!',
@@ -38,7 +38,7 @@ export class SelectionBlocksExample {
3838
{
3939
type: 'paragraph',
4040
},
41-
] as any;
41+
];
4242
editor!: BlockNoteEditor;
4343
selectedBlocks = 0;
4444
content = '';
@@ -51,13 +51,51 @@ export class SelectionBlocksExample {
5151

5252
export const selectionBlocksExampleCode = `import { CommonModule } from '@angular/common';
5353
import { Component } from '@angular/core';
54+
import { Block, BlockNoteEditor, PartialBlock } from '@blocknote/core';
5455
import { BnaEditorComponent } from '@dytab/block-note-angular';
5556
5657
@Component({
58+
selector: 'bna-selection-blocks-example',
5759
standalone: true,
5860
imports: [CommonModule, BnaEditorComponent],
59-
template: \` <bna-editor [initialContent]="initialContent" /> \`,
61+
template: \`
62+
<p>Input (BlockNote Editor)</p>
63+
<bna-editor
64+
class="h-[250px] block"
65+
[initialContent]="initialContent"
66+
(selectedBlocks)="onSelectionChanged($event)"
67+
/>
68+
<p>
69+
Selection Blocks (JSON): <strong>{{ selectedBlocks }}</strong> Blocks
70+
selected
71+
</p>
72+
<div
73+
class="border border-black bg-background rounded min-h-20 w-full p-2 max-h-[400px] overflow-auto"
74+
>
75+
<pre><code>{{ content }}</code></pre>
76+
</div>
77+
\`,
6078
})
61-
export class BasicSetupExample {
62-
initialContent = undefined;
79+
export class SelectionBlocksExample {
80+
initialContent: PartialBlock[] = [
81+
{
82+
type: 'paragraph',
83+
content: 'Welcome to this demo!',
84+
},
85+
{
86+
type: 'paragraph',
87+
content: 'Select different blocks to see the JSON change below',
88+
},
89+
{
90+
type: 'paragraph',
91+
},
92+
];
93+
editor!: BlockNoteEditor;
94+
selectedBlocks = 0;
95+
content = '';
96+
97+
onSelectionChanged(data: Block[]) {
98+
this.selectedBlocks = data.length;
99+
this.content = JSON.stringify(data, null, 2);
100+
}
63101
}`;

0 commit comments

Comments
 (0)