āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/udecode/plate/(plugins)/(functionality)/toolbar ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
title: Toolbar description: Fixed and floating toolbars for your editor. docs:
The fastest way to add toolbar functionality is with the FixedToolbarKit and FloatingToolbarKit, which include pre-configured toolbar plugins along with their Plate UI components.
FixedToolbar: Renders a persistent toolbar above the editorFixedToolbarButtons: Pre-configured button set for the fixed toolbarFloatingToolbar: Renders a contextual toolbar on text selectionFloatingToolbarButtons: Pre-configured button set for the floating toolbarimport { createPlateEditor } from 'platejs/react';
import { FixedToolbarKit } from '@/components/editor/plugins/fixed-toolbar-kit';
import { FloatingToolbarKit } from '@/components/editor/plugins/floating-toolbar-kit';
const editor = createPlateEditor({
plugins: [
// ...otherPlugins,
...FixedToolbarKit,
...FloatingToolbarKit,
],
});
import { createPlatePlugin } from 'platejs/react';
import { FixedToolbar } from '@/components/ui/fixed-toolbar';
import { FixedToolbarButtons } from '@/components/ui/fixed-toolbar-buttons';
import { FloatingToolbar } from '@/components/ui/floating-toolbar';
import { FloatingToolbarButtons } from '@/components/ui/floating-toolbar-buttons';
const fixedToolbarPlugin = createPlatePlugin({
key: 'fixed-toolbar',
render: {
beforeEditable: () => (
<FixedToolbar>
<FixedToolbarButtons />
</FixedToolbar>
),
},
});
const floatingToolbarPlugin = createPlatePlugin({
key: 'floating-toolbar',
render: {
afterEditable: () => (
<FloatingToolbar>
<FloatingToolbarButtons />
</FloatingToolbar>
),
},
});
const editor = createPlateEditor({
plugins: [
// ...otherPlugins,
fixedToolbarPlugin,
floatingToolbarPlugin,
],
});
render.beforeEditable: Renders FixedToolbar above the editor contentrender.afterEditable: Renders FloatingToolbar as an overlay after the editorThe FixedToolbarButtons component contains the default set of buttons for the fixed toolbar.
To customize it, you can edit components/ui/fixed-toolbar-buttons.tsx.
Similarly, you can customize the floating toolbar by editing components/ui/floating-toolbar-buttons.tsx.
This example shows a button that inserts custom text into the editor.
import { useEditorRef } from 'platejs/react';
import { CustomIcon } from 'lucide-react';
import { ToolbarButton } from '@/components/ui/toolbar';
export function CustomToolbarButton() {
const editor = useEditorRef();
return (
<ToolbarButton
onClick={() => {
// Custom action
editor.tf.insertText('Custom text');
}}
tooltip="Custom Action"
>
<CustomIcon />
</ToolbarButton>
);
}
For toggling marks like bold or italic, you can use the MarkToolbarButton component. It simplifies the process by handling the toggle state and action automatically.
This example creates a "Bold" button.
import { BoldIcon } from 'lucide-react';
import { MarkToolbarButton } from '@/components/ui/mark-toolbar-button';
export function BoldToolbarButton() {
return (
<MarkToolbarButton nodeType="bold" tooltip="Bold (ā+B)">
<BoldIcon />
</MarkToolbarButton>
);
}
nodeType: Specifies the mark to toggle (e.g., bold, italic).tooltip: Provides a helpful tooltip for the button.MarkToolbarButton uses useMarkToolbarButtonState to get the toggle state and useMarkToolbarButton to get the onClick handler and other props.The TurnIntoToolbarButton provides a dropdown menu to convert the current block into different types (headings, lists, quotes, etc.).
To add a new block type to the turn-into options, edit the turnIntoItems array:
const turnIntoItems = [
// ... existing items
{
icon: <CustomIcon />,
keywords: ['custom', 'special'],
label: 'Custom Block',
value: 'custom-block',
},
];
The InsertToolbarButton provides a dropdown menu to insert various elements (blocks, lists, media, inline elements).
To add a new insertable item, add it to the appropriate group in the groups array:
{
group: 'Basic blocks',
items: [
// ... existing items
{
icon: <CustomIcon />,
label: 'Custom Block',
value: 'custom-block',
},
].map((item) => ({
...item,
onSelect: (editor, value) => {
insertBlock(editor, value);
},
})),
}
FixedToolbarKitPlugin that renders a fixed toolbar above the editor content.
<API name="FixedToolbarKit"> <APIOptions> <APIItem name="render.beforeEditable" type="() => ReactNode"> Renders the fixed toolbar before the editor content. Contains FixedToolbarButtons by default. </APIItem> </APIOptions> </API>FloatingToolbarKitPlugin that renders a floating toolbar that appears on text selection.
<API name="FloatingToolbarKit"> <APIOptions> <APIItem name="render.afterEditable" type="() => ReactNode"> Renders the floating toolbar as an overlay after the editor. Contains FloatingToolbarButtons by default. </APIItem> </APIOptions> </API>ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā