Skip to content

Commit

Permalink
🐛(frontend) add default toolbar buttons
Browse files Browse the repository at this point in the history
We are overriding the default toolbar to add the
markdown and ai buttons. By doing that we were
missing some default buttons that are useful depend
on the block type. This commit adds the default
buttons to the toolbar.
  • Loading branch information
AntoLC committed Oct 18, 2024
1 parent e35671c commit 4f9bbf8
Showing 1 changed file with 3 additions and 36 deletions.
Original file line number Diff line number Diff line change
@@ -1,14 +1,8 @@
import '@blocknote/mantine/style.css';
import {
BasicTextStyleButton,
BlockTypeSelect,
ColorStyleButton,
CreateLinkButton,
FormattingToolbar,
FormattingToolbarController,
NestBlockButton,
TextAlignButton,
UnnestBlockButton,
getFormattingToolbarItems,
} from '@blocknote/react';
import React from 'react';

Expand All @@ -18,42 +12,15 @@ import { MarkdownButton } from './MarkdownButton';
export const BlockNoteToolbar = () => {
return (
<FormattingToolbarController
formattingToolbar={() => (
formattingToolbar={({ blockTypeSelectItems }) => (
<FormattingToolbar>
<BlockTypeSelect key="blockTypeSelect" />
{getFormattingToolbarItems(blockTypeSelectItems)}

{/* Extra button to do some AI powered actions */}
<AIGroupButton key="AIButton" />

{/* Extra button to convert from markdown to json */}
<MarkdownButton key="customButton" />

<BasicTextStyleButton basicTextStyle="bold" key="boldStyleButton" />
<BasicTextStyleButton
basicTextStyle="italic"
key="italicStyleButton"
/>
<BasicTextStyleButton
basicTextStyle="underline"
key="underlineStyleButton"
/>
<BasicTextStyleButton
basicTextStyle="strike"
key="strikeStyleButton"
/>
{/* Extra button to toggle code styles */}
<BasicTextStyleButton key="codeStyleButton" basicTextStyle="code" />

<TextAlignButton textAlignment="left" key="textAlignLeftButton" />
<TextAlignButton textAlignment="center" key="textAlignCenterButton" />
<TextAlignButton textAlignment="right" key="textAlignRightButton" />

<ColorStyleButton key="colorStyleButton" />

<NestBlockButton key="nestBlockButton" />
<UnnestBlockButton key="unnestBlockButton" />

<CreateLinkButton key="createLinkButton" />
</FormattingToolbar>
)}
/>
Expand Down

0 comments on commit 4f9bbf8

Please sign in to comment.