Skip to content

Commit

Permalink
fix: only override slash menu with slash-menu-controller
Browse files Browse the repository at this point in the history
  • Loading branch information
m-risto committed Sep 17, 2024
1 parent 2acbba9 commit cf89262
Show file tree
Hide file tree
Showing 9 changed files with 217 additions and 4 deletions.
7 changes: 7 additions & 0 deletions apps/docs/src/app/pages/examples/shared/examples.ts
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import { ConvertToHtmlPage } from '../interoperability/convert-to-html/convert-t
import { AddingSideMenuDragHandleItemsPage } from '../ui-components/adding-side-menu-drag-handle-items/adding-side-menu-drag-handle-items.page';
import { FormattingSideMenuButtonsPage } from '../ui-components/formatting-side-menu-buttons/formatting-side-menu-buttons.page';
import { FormattingToolbarButtonsPage } from '../ui-components/formatting-toolbar-buttons/formatting-toolbar-buttons.page';
import { ReplacingSlashMenuPage } from '../ui-components/replacing-slash-menu/replacing-slash-menu.page';
import { Example, ExampleGroup } from './example.type';
import { FormPage } from '../basic/form/form.page';
import { ServerSideRenderingPage } from '../backend/server-side-rendering/server-side-rendering.page';
Expand Down Expand Up @@ -128,6 +129,12 @@ export const exampleLinks: Example[] = [
name: 'Adding Drag Handle Menu Items',
component: AddingSideMenuDragHandleItemsPage,
},
{
groupName: 'Ui Components',
url: 'ui-components/replacing-slash-menu',
name: 'Replacing Slash Menu',
component: ReplacingSlashMenuPage,
},
];

function groupByGroupName(links: Example[]): ExampleGroup[] {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ import { HlmButtonDirective } from '@dytab/ui';
: false,
}"
>
Blue<button></button>
Blue
</button>`,
styles: ``,
})
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { getDefaultSlashMenuItems } from '@blocknote/core';
import { NgxBlocknoteService } from '@dytab/ngx-blocknote';
import { HlmButtonDirective } from '@dytab/ui';

@Component({
selector: 'bna-custom-slash-menu',
standalone: true,
imports: [CommonModule, HlmButtonDirective],
template: `
<div
class="h-full flex flex-col overflow-auto border border-border bg-background shadow-lg shadow-border rounded p-1 min-w-[250px]"
>
@for (item of customSlashItems; track item.key) {
<button
hlmBtn
size="icon"
variant="ghost"
(mousedown)="addItem($event,item)"
class="w-full"
>
{{ item.title }}
</button>
}
</div>
`,
styles: ``,
})
export class CustomSlashMenuComponent {
customSlashItems = getDefaultSlashMenuItems(
this.ngxBlockNoteService.editor(),
);
constructor(public ngxBlockNoteService: NgxBlocknoteService) {}

addItem($event: Event,item: { title: string; onItemClick: () => void }){
$event.preventDefault();
this.ngxBlockNoteService.editor().suggestionMenus.clearQuery();
item.onItemClick();
this.ngxBlockNoteService.editor().suggestionMenus.closeMenu();
this.ngxBlockNoteService.editor().focus()
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { PartialBlock } from '@blocknote/core';
import {
BnaEditorComponent,
BnaSlashMenuControllerComponent,
} from '@dytab/ngx-blocknote';
import { CustomSlashMenuComponent } from './custom-slash-menu.component';

@Component({
selector: 'bna-replacing-slash-menu-example',
standalone: true,
imports: [
CommonModule,
BnaEditorComponent,
CustomSlashMenuComponent,
BnaSlashMenuControllerComponent,
],
template: `<bna-editor [initialContent]="initialContent">
<bna-slash-menu-controller>
<bna-custom-slash-menu />
</bna-slash-menu-controller>
</bna-editor> `,
})
export class ReplacingSlashMenuExample {
initialContent: PartialBlock[] = [
{
type: 'paragraph',
content: 'Welcome to this demo!',
},
{
type: 'paragraph',
content: "Press the '/' key to open the Slash Menu",
},
{
type: 'paragraph',
content: "It's been replaced with a custom component",
},
{
type: 'paragraph',
},
];
}

export const formattingToolbarButtonsExampleCode = `import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { PartialBlock } from '@blocknote/core';
import { HlmButtonDirective } from '@dytab/ui';
import { CustomSlashMenuComponent } from './custom-slash-menu.component';
import {
BnaBasicTextStyleButtonComponent,
BnaEditorComponent,
BnaFormattingToolbarComponent,
BnaFormattingToolbarControllerComponent,
BnaSuggestionsMenuControllerComponent,
} from '@dytab/ngx-blocknote';
@Component({
selector: 'bna-replacing-slash-menu-example',
standalone: true,
imports: [
CommonModule,
BnaEditorComponent,
CustomSlashMenuComponent,
BnaSuggestionsMenuControllerComponent,
],
template: \`<bna-editor [initialContent]="initialContent">
<bna-suggestions-menu-controller triggerCharacter="/">
<bna-custom-slash-menu />
</bna-suggestions-menu-controller>
</bna-editor> \`,
})
export class ReplacingSlashMenuExample {
initialContent: PartialBlock[] = [
{
type: 'paragraph',
content: 'Welcome to this demo!',
},
{
type: 'paragraph',
content: "Press the '/' key to open the Slash Menu",
},
{
type: 'paragraph',
content: "It's been replaced with a custom component",
},
{
type: 'paragraph',
},
];
}`;
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import {
hlmP,
HlmTabsComponent,
HlmTabsContentDirective,
HlmTabsListComponent,
HlmTabsTriggerDirective,
} from '@dytab/ui';
import { Highlight } from 'ngx-highlightjs';
import { CodeComponent } from '../../../../shared/code/code.component';
import { DemoBoxComponent } from '../../../../shared/layout/demo-box.component';
import { TabsComponent } from '../../../../shared/layout/example-tabs.component';
import { SectionIntroComponent } from '../../../../shared/layout/section-intro.component';
import {
ReplacingSlashMenuExample,
formattingToolbarButtonsExampleCode,
} from './replacing-slash-menu.example';

@Component({
standalone: true,
imports: [
CommonModule,
SectionIntroComponent,
DemoBoxComponent,
HlmTabsComponent,
HlmTabsListComponent,
HlmTabsContentDirective,
HlmTabsTriggerDirective,
TabsComponent,
CodeComponent,
ReplacingSlashMenuExample,
Highlight,
],
template: `
<bna-section-intro name="Replacing Slash Menu">
<p class="${hlmP} mb-8">
In this example, we replace the default Slash Menu component with a basic custom one.
</p>
<p>
<strong>Try it out</strong>: Press the "/" key to see the new Slash Menu!
</p>
</bna-section-intro>
<hlm-tabs tab="preview">
<bna-example-tabs firstTab="Preview" secondTab="Code">
<bna-demo-box firstTab>
<bna-replacing-slash-menu-example />
</bna-demo-box>
<bna-code [code]="exampleCode" secondTab />
</bna-example-tabs>
</hlm-tabs>
`,
})
export class ReplacingSlashMenuPage {
exampleCode = formattingToolbarButtonsExampleCode;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { BnaSuggestionsMenuControllerComponent } from './bna-suggestions-menu-controller.component';

@Component({
imports: [CommonModule, BnaSuggestionsMenuControllerComponent],
selector: 'bna-slash-menu-controller',
standalone: true,
template: `<bna-suggestions-menu-controller triggerCharacter="/"
><ng-content></ng-content
></bna-suggestions-menu-controller>`,
})
export class BnaSlashMenuControllerComponent {}
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
export * from './bna-suggestions-menu-controller.component';
export * from './bna-suggestions-menu.component';
export * from './bna-slash-menu-controller.component';
6 changes: 3 additions & 3 deletions libs/ngx-blocknote/src/lib/editor/bna-editor.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -49,14 +49,14 @@
}
</bna-file-panel-controller>
<div #slashMenu>
<ng-content select="bna-formatting-toolbar-controller" />
<ng-content select="bna-slash-menu-controller" />
</div>
@if (!slashMenu.hasChildNodes()) {
<bna-suggestions-menu-controller triggerCharacter="/" class="z-index-3">
<bna-slash-menu-controller>
@if (suggestionMenuShown()) {
<bna-suggestions-menu triggerCharacter="/" />
}
</bna-suggestions-menu-controller>
</bna-slash-menu-controller>
}
<bna-link-toolbar-controller>
@if (linkToolbarShown()) {
Expand Down
2 changes: 2 additions & 0 deletions libs/ngx-blocknote/src/lib/editor/bna-editor.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@ import { BnaSideMenuComponent } from '../components/side-menu/bna-side-menu.comp
import { BnaAddBlockButtonComponent } from '../components/side-menu/default-buttons/add-block-button/bna-add-block-button.component';
import { BnaDragHandleMenuComponent } from '../components/side-menu/drag-handle-menu/bna-drag-handle-menu.component';
import { BnaSuggestionsMenuComponent } from '../components/suggestions-menu';
import { BnaSlashMenuControllerComponent } from '../components/suggestions-menu/bna-slash-menu-controller.component';
import { BnaSuggestionsMenuControllerComponent } from '../components/suggestions-menu/bna-suggestions-menu-controller.component';
import { BnaTableHandlesController } from '../components/table-handles/bna-table-handles-controller.component';
import { BlockNoteEditorOptionsType } from '../interfaces/block-note-editor-options.type';
Expand Down Expand Up @@ -120,6 +121,7 @@ type InitialContent<
BnaFileCaptionButtonComponent,
BnaFileReplaceButtonComponent,
BnaFilePreviewButtonComponent,
BnaSlashMenuControllerComponent,
],
providers: [
NgxBlocknoteService,
Expand Down

0 comments on commit cf89262

Please sign in to comment.