Skip to content

Commit f193a0b

Browse files
m-ristom-risto
committed
feat: add first version of formatting toolbar buttons example
1 parent 40d47eb commit f193a0b

File tree

6 files changed

+152
-3
lines changed

6 files changed

+152
-3
lines changed

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import { AlertBlockPage } from '../pages/examples/custom/alert-block/alert-block
1111
import { ApiContentBlockPage } from '../pages/examples/custom/api-content-block/api-content-block.page';
1212
import { ExamplesPage } from '../pages/examples/examples.page';
1313
import { ConvertToHtmlPage } from '../pages/examples/interoperability/convert-to-html/convert-to-html.page';
14+
import { FormattingToolbarButtonsPage } from '../pages/examples/ui-components/formatting-toolbar-buttons/formatting-toolbar-buttons.page';
1415
import { OverviewPage } from '../pages/overview.page';
1516

1617
export const appRoutes: Route[] = [
@@ -53,6 +54,10 @@ export const appRoutes: Route[] = [
5354
path: 'interoperability/convert-to-html',
5455
component: ConvertToHtmlPage,
5556
},
57+
{
58+
path: 'ui-components/formatting-toolbar-buttons',
59+
component: FormattingToolbarButtonsPage,
60+
},
5661
{ path: '**', redirectTo: 'overview' },
5762
],
5863
},

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,14 @@ import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
9898
routerLink="interoperability/convert-to-html"
9999
>Converting Blocks to HTML</a
100100
>
101+
Ui Components
102+
<a
103+
hlmBtn
104+
variant="ghost"
105+
class="justify-start"
106+
routerLink="ui-components/formatting-toolbar-buttons"
107+
>Formatting Toolbar Buttons</a
108+
>
101109
</aside>
102110
<main class="overflow-hidden py-6">
103111
<router-outlet class="hidden"></router-outlet>

‎docs/src/pages/examples/ui-components/formatting-toolbar-buttons/formatting-toolbar-buttons.example.ts

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
import { CommonModule } from '@angular/common';
2+
import { Component } from '@angular/core';
3+
import { PartialBlock } from '@blocknote/core';
4+
import {
5+
BnaEditorComponent,
6+
BnaFormattingToolbarDirective,
7+
} from '@dytab/block-note-angular';
8+
9+
@Component({
10+
selector: 'bna-basic-setup-example',
11+
standalone: true,
12+
imports: [CommonModule, BnaEditorComponent, BnaFormattingToolbarDirective],
13+
template: `<bna-editor [initialContent]="initialContent">
14+
<!-- <bna-formatting-toolbar [editor]=""> </bna-formatting-toolbar>-->
15+
</bna-editor> `,
16+
})
17+
export class FormattingToolbarButtonsExample {
18+
initialContent: PartialBlock[] = [
19+
{
20+
type: 'paragraph',
21+
content: 'Welcome to this demo!',
22+
},
23+
{
24+
type: 'paragraph',
25+
content: [
26+
{
27+
type: 'text',
28+
text: 'You can now toggle ',
29+
styles: {},
30+
},
31+
{
32+
type: 'text',
33+
text: 'blue',
34+
styles: { textColor: 'blue', backgroundColor: 'blue' },
35+
},
36+
{
37+
type: 'text',
38+
text: ' and ',
39+
styles: {},
40+
},
41+
{
42+
type: 'text',
43+
text: 'code',
44+
styles: { code: true },
45+
},
46+
{
47+
type: 'text',
48+
text: ' styles with new buttons in the Formatting Toolbar',
49+
styles: {},
50+
},
51+
],
52+
},
53+
{
54+
type: 'paragraph',
55+
content: 'Select some text to try them out',
56+
},
57+
{
58+
type: 'paragraph',
59+
},
60+
];
61+
}
62+
63+
export const formattingToolbarButtonsExampleCode = `import { CommonModule } from '@angular/common';
64+
import { Component } from '@angular/core';
65+
import { BnaEditorComponent } from '@dytab/block-note-angular';
66+
67+
@Component({
68+
standalone: true,
69+
imports: [CommonModule, BnaEditorComponent],
70+
template: \` <bna-editor [initialContent]="initialContent" /> \`,
71+
})
72+
export class BasicSetupExample {
73+
initialContent = undefined;
74+
}`;

‎docs/src/pages/examples/ui-components/formatting-toolbar-buttons/formatting-toolbar-buttons.page.ts

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
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+
FormattingToolbarButtonsExample,
17+
formattingToolbarButtonsExampleCode,
18+
} from './formatting-toolbar-buttons.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+
FormattingToolbarButtonsExample,
33+
Highlight,
34+
],
35+
template: `
36+
<bna-section-intro name="Adding Formatting Toolbar Buttons">
37+
<p class="${hlmP} mb-8">
38+
In this example, we add a blue text/background color and code style
39+
button to the Formatting Toolbar.
40+
</p>
41+
<p>
42+
<strong>Try it out</strong>: Select some text to open the Formatting
43+
Toolbar, and click one of the new buttons!
44+
</p>
45+
</bna-section-intro>
46+
<hlm-tabs tab="preview">
47+
<bna-example-tabs firstTab="Preview" secondTab="Code">
48+
<bna-demo-box firstTab>
49+
<bna-basic-setup-example />
50+
</bna-demo-box>
51+
<bna-code [code]="exampleCode" secondTab />
52+
</bna-example-tabs>
53+
</hlm-tabs>
54+
`,
55+
})
56+
export class FormattingToolbarButtonsPage {
57+
exampleCode = formattingToolbarButtonsExampleCode;
58+
}

‎libs/block-note-angular/src/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
export * from './lib/block-note-editor/bna-editor.component';
22
export * from './lib/interfaces/block-note-editor-options.type';
3+
export * from './lib/components/bna-formatting-toolbar/bna-formatting-toolbar.directive';

‎libs/block-note-angular/src/lib/block-note-editor/bna-editor.component.html

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
<div class="block h-full py-3 bn-container">
22
@if(isInitialized){
3-
<bna-formatting-toolbar [editor]="editor">
3+
<div #ref><ng-content></ng-content></div>
4+
<ng-container *ngIf="!ref.hasChildNodes()">
5+
<bna-formatting-toolbar [editor]="editor">
46
<div class="bn-toolbar">
57
<bna-basic-text-style-button
68
[editor]="editor"
@@ -18,12 +20,13 @@
1820
<bna-text-align-button [editor]="editor" [alignment]="'center'" />
1921
<bna-text-align-button [editor]="editor" [alignment]="'right'" />
2022
</div>
21-
</bna-formatting-toolbar>
23+
</bna-formatting-toolbar>
24+
</ng-container>
25+
2226
<bna-side-menu [editor]="editor" class="text-gray-500">
2327
<bna-add-block-btn [editor]="editor" />
2428
<bna-drag-handle-menu-btn [editor]="editor" />
2529
</bna-side-menu>
26-
2730
<bna-view [editor]="editor" class="block ProseMirror bn-editor relative bn-default-styles" />
2831
<bna-file-panel [editor]="editor" class="z-index-3">
2932
</bna-file-panel>

0 commit comments

Comments
 (0)