4e:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 4f:T1b0c,--- title: Toolbar description: Fixed and floating toolbars for your editor. docs: - route: https://pro.platejs.org/docs/examples/floating-toolbar title: Plus - route: /docs/components/fixed-toolbar title: Fixed Toolbar - route: /docs/components/floating-toolbar title: Floating Toolbar --- ## Features - **Fixed Toolbar**: Persistent toolbar that sticks to the top of the editor - **Floating Toolbar**: Contextual toolbar that appears on text selection - **Customizable Buttons**: Easily add, remove, and reorder toolbar buttons - **Responsive Design**: Adapts to different screen sizes and content - **Plugin Integration**: Seamless integration with Plate plugins and UI components ## Kit Usage ### Installation The fastest way to add toolbar functionality is with the `FixedToolbarKit` and `FloatingToolbarKit`, which include pre-configured toolbar plugins along with their [Plate UI](/docs/installation/plate-ui) components. - [`FixedToolbar`](/docs/components/fixed-toolbar): Renders a persistent toolbar above the editor - [`FixedToolbarButtons`](/docs/components/fixed-toolbar-buttons): Pre-configured button set for the fixed toolbar - [`FloatingToolbar`](/docs/components/floating-toolbar): Renders a contextual toolbar on text selection - [`FloatingToolbarButtons`](/docs/components/floating-toolbar-buttons): Pre-configured button set for the floating toolbar ### Add Kit ```tsx import { 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, ], }); ``` ## Manual Usage ### Create Plugins ```tsx 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: () => ( ), }, }); const floatingToolbarPlugin = createPlatePlugin({ key: 'floating-toolbar', render: { afterEditable: () => ( ), }, }); const editor = createPlateEditor({ plugins: [ // ...otherPlugins, fixedToolbarPlugin, floatingToolbarPlugin, ], }); ``` - `render.beforeEditable`: Renders [`FixedToolbar`](/docs/components/fixed-toolbar) above the editor content - `render.afterEditable`: Renders [`FloatingToolbar`](/docs/components/floating-toolbar) as an overlay after the editor ### Customizing Fixed Toolbar Buttons The `FixedToolbarButtons` component contains the default set of buttons for the fixed toolbar. To customize it, you can edit `components/ui/fixed-toolbar-buttons.tsx`. ### Customizing Floating Toolbar Buttons Similarly, you can customize the floating toolbar by editing `components/ui/floating-toolbar-buttons.tsx`. ### Creating Custom Button This example shows a button that inserts custom text into the editor. ```tsx import { useEditorRef } from 'platejs/react'; import { CustomIcon } from 'lucide-react'; import { ToolbarButton } from '@/components/ui/toolbar'; export function CustomToolbarButton() { const editor = useEditorRef(); return ( { // Custom action editor.tf.insertText('Custom text'); }} tooltip="Custom Action" > ); } ``` ### Creating Mark Button For toggling marks like bold or italic, you can use the [`MarkToolbarButton`](/docs/components/mark-toolbar-button) component. It simplifies the process by handling the toggle state and action automatically. This example creates a "Bold" button. ```tsx import { BoldIcon } from 'lucide-react'; import { MarkToolbarButton } from '@/components/ui/mark-toolbar-button'; export function BoldToolbarButton() { return ( ); } ``` - `nodeType`: Specifies the mark to toggle (e.g., `bold`, `italic`). - `tooltip`: Provides a helpful tooltip for the button. - The `MarkToolbarButton` uses `useMarkToolbarButtonState` to get the toggle state and `useMarkToolbarButton` to get the `onClick` handler and other props. ### Turn Into Toolbar Button The [`TurnIntoToolbarButton`](/docs/components/turn-into-toolbar-button) 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: ```tsx const turnIntoItems = [ // ... existing items { icon: , keywords: ['custom', 'special'], label: 'Custom Block', value: 'custom-block', }, ]; ``` ### Insert Toolbar Button The [`InsertToolbarButton`](/docs/components/insert-toolbar-button) 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: ```tsx { group: 'Basic blocks', items: [ // ... existing items { icon: , label: 'Custom Block', value: 'custom-block', }, ].map((item) => ({ ...item, onSelect: (editor, value) => { insertBlock(editor, value); }, })), } ``` ## Plate Plus ## Plugins ### `FixedToolbarKit` Plugin that renders a fixed toolbar above the editor content. Renders the fixed toolbar before the editor content. Contains FixedToolbarButtons by default. ### `FloatingToolbarKit` Plugin that renders a floating toolbar that appears on text selection. Renders the floating toolbar as an overlay after the editor. Contains FloatingToolbarButtons by default. 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L4e",null,{"files":[{"path":"../../content/docs/(plugins)/(functionality)/toolbar.mdx","content":"$4f","type":"registry:file","target":"content/docs/plate/(plugins)/(functionality)/toolbar.mdx"}],"className":"h-[70svh] min-h-80"}]]}]