Toolbar

PreviousNext

Fixed and floating toolbars for your editor.

PlusFixed ToolbarFloating Toolbar
Loading...

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 components.

Add Kit

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

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 content
  • render.afterEditable: Renders FloatingToolbar 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.

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>
  );
}

Creating Mark Button

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.
  • 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 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',
  },
];

Insert Toolbar Button

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);
    },
  })),
}

Plate Plus

Plugins

FixedToolbarKit

Plugin that renders a fixed toolbar above the editor content.

Options

  • render.beforeEditable () => ReactNode

    Renders the fixed toolbar before the editor content. Contains FixedToolbarButtons by default.

FloatingToolbarKit

Plugin that renders a floating toolbar that appears on text selection.

Options

Collapse all

  • render.afterEditable () => ReactNode

    Renders the floating toolbar as an overlay after the editor. Contains FloatingToolbarButtons by default.

工具栏组合框(Combobox)