Toggle

PreviousNext
Toggle ElementToggle Button
Loading...

Features

  • Add toggles to your document
  • Toggles are closed by default, and can be opened to reveal the content inside

Kit Usage

Installation

The fastest way to add toggle functionality is with the ToggleKit, which includes pre-configured TogglePlugin with indent support and their Plate UI components.

Add Kit

Add the kit to your plugins:

import { createPlateEditor } from 'platejs/react';
import { ToggleKit } from '@/components/editor/plugins/toggle-kit';
 
const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    ...ToggleKit,
  ],
});

Manual Usage

Installation

pnpm add @platejs/indent @platejs/toggle

Add Plugins

Include TogglePlugin and IndentPlugin in your Plate plugins array when creating the editor.

import { IndentPlugin } from '@platejs/indent/react';
import { TogglePlugin } from '@platejs/toggle/react';
import { createPlateEditor } from 'platejs/react';
 
const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    IndentPlugin,
    TogglePlugin,
  ],
});

Configure Plugins

Configure the IndentPlugin and TogglePlugin with proper targeting and component assignment.

import { IndentPlugin } from '@platejs/indent/react';
import { TogglePlugin } from '@platejs/toggle/react';
import { createPlateEditor } from 'platejs/react';
import { ToggleElement } from '@/components/ui/toggle-node';
import { KEYS } from 'platejs';
 
const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    IndentPlugin.configure({
      inject: {
        targetPlugins: [...KEYS.heading, KEYS.p, KEYS.toggle],
      },
    }),
    TogglePlugin.withComponent(ToggleElement),
  ],
});
  • withComponent: Assigns ToggleElement to render toggle elements.
  • IndentPlugin.inject.targetPlugins: Configures which element types support indentation, including toggles.

Add Toolbar Button

You can add ToggleToolbarButton to your Toolbar to insert toggle elements.

Turn Into Toolbar Button

You can add this item to the Turn Into Toolbar Button to convert blocks into toggles:

{
  icon: <ChevronRightIcon />,
  label: 'Toggle list',
  value: KEYS.toggle,
}

Insert Toolbar Button

You can add this item to the Insert Toolbar Button to insert toggle elements:

{
  icon: <ChevronRightIcon />,
  label: 'Toggle list',
  value: KEYS.toggle,
}

Plugins

TogglePlugin

Plugin for managing toggle functionality.

Optionsobject

  • openIds optional Set<string>

    Set of open toggle IDs.

    • Default: new Set()

  • isOpen optional (toggleId: string) => boolean

    Function to check if toggle is open.

    • Default: (id) => openIds.has(id)

  • someClosed optional (toggleIds: string[]) => boolean

    Function to check if any toggles are closed.

    • Default: (ids) => ids.some(id => !isOpen(id))

API

api.toggle.toggleIds

Toggles the open state of specified toggles.

Toggle open state of toggles.

Parameters

Collapse all

  • ids string[]

    Array of element IDs to toggle.

  • force optional boolean | null

    Force toggle state:

    • true: expand all toggles
    • false: collapse all toggles
    • null: toggle current state

openNextToggles

Mark block at current selection as open toggle.

Hooks

useToggleToolbarButtonState

Hook for getting toggle toolbar button state.

Returnsobject

Collapse all

  • pressed boolean

    Whether button is pressed.

useToggleToolbarButton

Hook for handling toggle toolbar button behavior.

State

Collapse all

  • pressed boolean

    Whether button is pressed.

Returnsobject

Collapse all

  • props object

    Props for toggle button.

useToggleButtonState

Hook for getting toggle button state.

Get toggle button state.

Parameters

Collapse all

  • toggleId string

    Toggle element ID.

Returnsobject

Collapse all

  • toggleId string

    Toggle element ID.

  • open boolean

    Whether toggle is expanded.

useToggleButton

Hook for handling toggle button behavior.

Handle toggle button behavior.

Parameters

Collapse all

  • toggleId string

    Toggle element ID.

  • open boolean

    Whether toggle is expanded.

Returnsobject

Collapse all

  • toggleId string

    Toggle element ID.

  • open boolean

    Whether toggle is expanded.

  • buttonProps object

    Props for toggle button.

折叠开关自动格式化