Skip to content

Commit d02c596

Browse files
m-ristom-risto
committed
feat: allow full customization of formatting toolbar
1 parent c5a8073 commit d02c596

File tree

10 files changed

+69
-60
lines changed

10 files changed

+69
-60
lines changed

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

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { PartialBlock } from '@blocknote/core';
44
import {
55
BasicTextStyleButtonComponent,
66
BnaEditorComponent,
7+
BnaFormattingToolbarComponent,
78
BnaFormattingToolbarControllerDirective,
89
} from '@dytab/block-note-angular';
910

@@ -15,11 +16,14 @@ import {
1516
BnaEditorComponent,
1617
BnaFormattingToolbarControllerDirective,
1718
BasicTextStyleButtonComponent,
19+
BnaFormattingToolbarComponent,
1820
],
1921
template: `<bna-editor [initialContent]="initialContent">
2022
<bna-formatting-toolbar-controller>
21-
<bna-basic-text-style-button [basicTextStyle]="'italic'" />
22-
<bna-basic-text-style-button [basicTextStyle]="'bold'" />
23+
<bna-formatting-toolbar>
24+
<bna-basic-text-style-button [basicTextStyle]="'italic'" />
25+
<bna-basic-text-style-button [basicTextStyle]="'bold'" />
26+
</bna-formatting-toolbar>
2327
</bna-formatting-toolbar-controller>
2428
</bna-editor> `,
2529
})

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
export * from './lib/block-note-editor/bna-editor.component';
22
export * from './lib/interfaces/block-note-editor-options.type';
33
export * from './lib/components/bna-formatting-toolbar/bna-formatting-toolbar-controller.directive';
4+
export * from './lib/components/bna-formatting-toolbar/bna-formatting-toolbar.component';
45
export * from './lib/components/buttons/basic-text-style-button/basic-text-style-button.component';

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

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,20 @@
11
<div class="block h-full py-3 bn-container">
22
@if(isInitialized){
3-
<!-- <div #ref><ng-content select="[test]"></ng-content></div>-->
4-
<!-- <ng-container *ngIf="!ref.hasChildNodes()">-->
3+
<div #formattingToolbar>
4+
<ng-content select="bna-formatting-toolbar-controller"></ng-content>
5+
</div>
6+
<ng-container *ngIf="!formattingToolbar.hasChildNodes()">
57
<bna-formatting-toolbar-controller>
6-
<div class="bn-toolbar">
8+
<bna-formatting-toolbar>
79
<bna-basic-text-style-button [basicTextStyle]="'bold'" />
810
<bna-basic-text-style-button [basicTextStyle]="'italic'" />
911
<bna-basic-text-style-button [basicTextStyle]="'underline'" />
1012
<bna-text-align-button [alignment]="'left'" />
1113
<bna-text-align-button [alignment]="'center'" />
1214
<bna-text-align-button [alignment]="'right'" />
13-
</div>
15+
</bna-formatting-toolbar>
1416
</bna-formatting-toolbar-controller>
15-
<!-- </ng-container>-->
17+
</ng-container>
1618

1719
<bna-side-menu-controller class="text-gray-500">
1820
<bna-add-block-btn />

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ import {
3838
import { BnaFilePanelControllerDirective } from '../components/bna-file-panel/bna-file-panel-controller.directive';
3939
import { BnaFilePanelComponent } from '../components/bna-file-panel/bna-file-panel.component';
4040
import { BnaFormattingToolbarControllerDirective } from '../components/bna-formatting-toolbar/bna-formatting-toolbar-controller.directive';
41+
import { BnaFormattingToolbarComponent } from '../components/bna-formatting-toolbar/bna-formatting-toolbar.component';
4142
import { BnaSideMenuControllerDirective } from '../components/bna-side-menu/bna-side-menu-controller.directive';
4243
import { BnaAddBlockButtonComponent } from '../components/bna-side-menu/default-buttons/add-block-button/bna-add-block-button.component';
4344
import { BnaDragHandleMenuComponent } from '../components/bna-side-menu/default-buttons/drag-handle-menu/bna-drag-handle-menu.component';
@@ -71,6 +72,7 @@ import { BlockNoteAngularService } from '../services/block-note-angular.service'
7172
BnaFilePanelComponent,
7273
HlmInputDirective,
7374
BnaFilePanelControllerDirective,
75+
BnaFormattingToolbarComponent,
7476
],
7577
providers: [BlockNoteAngularService],
7678
selector: 'bna-editor',

‎libs/block-note-angular/src/lib/components/bna-formatting-toolbar/bna-formatting-toolbar.component.css

Whitespace-only changes.

‎libs/block-note-angular/src/lib/components/bna-formatting-toolbar/bna-formatting-toolbar.component.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<ng-content></ng-content>

‎libs/block-note-angular/src/lib/components/bna-formatting-toolbar/bna-formatting-toolbar.component.spec.ts

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { ComponentFixture, TestBed } from '@angular/core/testing';
2+
import { BnaFormattingToolbarComponent } from './bna-formatting-toolbar.component';
3+
4+
describe('BnaFormattingToolbarComponent', () => {
5+
let component: BnaFormattingToolbarComponent;
6+
let fixture: ComponentFixture<BnaFormattingToolbarComponent>;
7+
8+
beforeEach(async () => {
9+
await TestBed.configureTestingModule({
10+
imports: [BnaFormattingToolbarComponent],
11+
}).compileComponents();
12+
13+
fixture = TestBed.createComponent(BnaFormattingToolbarComponent);
14+
component = fixture.componentInstance;
15+
fixture.detectChanges();
16+
});
17+
18+
it('should create', () => {
19+
expect(component).toBeTruthy();
20+
});
21+
});

‎libs/block-note-angular/src/lib/components/bna-formatting-toolbar/bna-formatting-toolbar.component.ts

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { CommonModule } from '@angular/common';
2+
import { Component } from '@angular/core';
3+
4+
@Component({
5+
selector: 'bna-formatting-toolbar',
6+
standalone: true,
7+
imports: [CommonModule],
8+
templateUrl: './bna-formatting-toolbar.component.html',
9+
styleUrl: './bna-formatting-toolbar.component.css',
10+
host: {
11+
class: 'bn-toolbar',
12+
},
13+
})
14+
export class BnaFormattingToolbarComponent {}

‎nx.json

Lines changed: 7 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,7 @@
22
"$schema": "./node_modules/nx/schemas/nx-schema.json",
33
"defaultBase": "origin/main",
44
"namedInputs": {
5-
"default": [
6-
"{projectRoot}/**/*",
7-
"sharedGlobals"
8-
],
5+
"default": ["{projectRoot}/**/*", "sharedGlobals"],
96
"production": [
107
"default",
118
"!{projectRoot}/.eslintrc.json",
@@ -25,13 +22,8 @@
2522
"targetDefaults": {
2623
"@angular-devkit/build-angular:application": {
2724
"cache": true,
28-
"dependsOn": [
29-
"^build"
30-
],
31-
"inputs": [
32-
"production",
33-
"^production"
34-
]
25+
"dependsOn": ["^build"],
26+
"inputs": ["production", "^production"]
3527
},
3628
"@nx/eslint:lint": {
3729
"cache": true,
@@ -65,13 +57,8 @@
6557
},
6658
"@nx/angular:ng-packagr-lite": {
6759
"cache": true,
68-
"dependsOn": [
69-
"^build"
70-
],
71-
"inputs": [
72-
"production",
73-
"^production"
74-
]
60+
"dependsOn": ["^build"],
61+
"inputs": ["production", "^production"]
7562
}
7663
},
7764
"plugins": [
@@ -93,6 +80,7 @@
9380
"unitTestRunner": "jest"
9481
},
9582
"@nx/angular:component": {
83+
"style": "css",
9684
"prefix": "bna"
9785
},
9886
"@schematics/angular:directive": {
@@ -101,9 +89,7 @@
10189
},
10290
"defaultProject": "docs",
10391
"release": {
104-
"projects": [
105-
"block-note-angular"
106-
],
92+
"projects": ["block-note-angular"],
10793
"version": {
10894
"conventionalCommits": true
10995
},

‎tsconfig.base.json

Lines changed: 10 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -11,49 +11,27 @@
1111
"importHelpers": true,
1212
"target": "es2022",
1313
"module": "esnext",
14-
"lib": [
15-
"es2020",
16-
"dom"
17-
],
14+
"lib": ["es2020", "dom"],
1815
"skipLibCheck": true,
1916
"skipDefaultLibCheck": true,
2017
"strict": true,
2118
"baseUrl": ".",
2219
"paths": {
23-
"@dytab/block-note-angular": [
24-
"libs/block-note-angular/src/index.ts"
25-
],
26-
"@spartan-ng/ui-button-helm": [
27-
"libs/ui/ui-button-helm/src/index.ts"
28-
],
29-
"@spartan-ng/ui-card-helm": [
30-
"libs/ui/ui-card-helm/src/index.ts"
31-
],
32-
"@spartan-ng/ui-icon-helm": [
33-
"libs/ui/ui-icon-helm/src/index.ts"
34-
],
35-
"@spartan-ng/ui-menu-helm": [
36-
"libs/ui/ui-menu-helm/src/index.ts"
37-
],
20+
"@dytab/block-note-angular": ["libs/block-note-angular/src/index.ts"],
21+
"@spartan-ng/ui-button-helm": ["libs/ui/ui-button-helm/src/index.ts"],
22+
"@spartan-ng/ui-card-helm": ["libs/ui/ui-card-helm/src/index.ts"],
23+
"@spartan-ng/ui-icon-helm": ["libs/ui/ui-icon-helm/src/index.ts"],
24+
"@spartan-ng/ui-input-helm": ["libs/ui/ui-input-helm/src/index.ts"],
25+
"@spartan-ng/ui-menu-helm": ["libs/ui/ui-menu-helm/src/index.ts"],
3826
"@spartan-ng/ui-scrollarea-helm": [
3927
"libs/ui/ui-scrollarea-helm/src/index.ts"
4028
],
41-
"@spartan-ng/ui-tabs-helm": [
42-
"libs/ui/ui-tabs-helm/src/index.ts"
43-
],
44-
"@spartan-ng/ui-tooltip-helm": [
45-
"libs/ui/ui-tooltip-helm/src/index.ts"
46-
],
29+
"@spartan-ng/ui-tabs-helm": ["libs/ui/ui-tabs-helm/src/index.ts"],
30+
"@spartan-ng/ui-tooltip-helm": ["libs/ui/ui-tooltip-helm/src/index.ts"],
4731
"@spartan-ng/ui-typography-helm": [
4832
"libs/ui/ui-typography-helm/src/index.ts"
49-
],
50-
"@spartan-ng/ui-input-helm": [
51-
"libs/ui/ui-input-helm/src/index.ts"
5233
]
5334
}
5435
},
55-
"exclude": [
56-
"node_modules",
57-
"tmp"
58-
]
36+
"exclude": ["node_modules", "tmp"]
5937
}

0 commit comments

Comments
 (0)