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

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.

• FixedToolbar: Renders a persistent toolbar above the editor
• FixedToolbarButtons: Pre-configured button set for the fixed toolbar
• FloatingToolbar: Renders a contextual toolbar on text selection
• FloatingToolbarButtons: Pre-configured button set for the floating toolbar

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