Toggle

PreviousNext
Toggle ElementToggle Button
Loading...
Files
components/demo.tsx
'use client';

import * as React from 'react';

import { Plate, usePlateEditor } from 'platejs/react';

import { EditorKit } from '@/components/editor/editor-kit';
import { Editor, EditorContainer } from '@/components/ui/editor';

import { DEMO_VALUES } from './values/demo-values';

export default function Demo({ id }: { id: string }) {
  const editor = usePlateEditor({
    plugins: EditorKit,
    value: DEMO_VALUES[id],
  });

  return (
    <Plate editor={editor}>
      <EditorContainer variant="demo">
        <Editor />
      </EditorContainer>
    </Plate>
  );
}

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.

'use client';
 
import { TogglePlugin } from '@platejs/toggle/react';
 
import { IndentKit } from '@/components/editor/plugins/indent-kit';
import { ToggleElement } from '@/components/ui/toggle-node';
 
export const ToggleKit = [
  ...IndentKit,
  TogglePlugin.withComponent(ToggleElement),
];

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

Collapse all

    Set of open toggle IDs.

    • Default: new Set()

    Function to check if toggle is open.

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

    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

    Array of element IDs to toggle.

    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

    Whether button is pressed.

useToggleToolbarButton

Hook for handling toggle toolbar button behavior.

State

Collapse all

    Whether button is pressed.

Returnsobject

Collapse all

    Props for toggle button.

useToggleButtonState

Hook for getting toggle button state.

Get toggle button state.

Parameters

Collapse all

    Toggle element ID.

Returnsobject

Collapse all

    Toggle element ID.

    Whether toggle is expanded.

useToggleButton

Hook for handling toggle button behavior.

Handle toggle button behavior.

Parameters

Collapse all

    Toggle element ID.

    Whether toggle is expanded.

Returnsobject

Collapse all

    Toggle element ID.

    Whether toggle is expanded.

    Props for toggle button.

Table of ContentsBold