From zbeyens. The source code is available on GitHub.

Plate
PlatePliteEditorsTemplates
GitHub16kGitHub
DiscordDiscord
    • Stream
    • Copilot
  • Discussion
    • Comments
    • Suggestion
    • Basic Blocks
      • Blockquote
      • Heading
      • Horizontal Rule
    • Callout
    • Code Block
    • Column
    • Date
    • Equation
    • Link
    • List Classic
    • Media
    • MentionElement
    • Table
    • Table of Contents
    • Footnote
    • Toggle
  • Marks
    • Bold
    • Italic
    • Underline
    • Code
    • Highlight
    • Keyboard Input
    • Strikethrough
    • Subscript
    • Superscript
      • Font
      • Line Height
      • Text Align
    • Indent
    • List
      • Exit Break
      • Single Block
      • Trailing Block
    • Autoformat
    • Block Menu
    • Block Placeholder
    • Combobox
      • Emoji
      • MentionElement
      • Slash Command
    • Cursor Overlay
    • Drag & Drop
    • Navigation Feedback
    • Tabbable
    • Toolbar
    • Yjs
    • Multi SelectEditor
    • CSV
    • DOCX
    • HTML
    • Markdown

Toggle

PreviousNext

Add toggles to your document.

Toggle ElementToggle Button
Loading…
FootnoteMarks

On This Page

FeaturesKit UsageInstallationAdd KitManual UsageInstallationAdd PluginsConfigure PluginsAdd Toolbar ButtonTurn Into Toolbar ButtonInsert Toolbar ButtonPluginsTogglePluginAPIeditor.plugin(TogglePlugin).api.toggleKeysHooksuseToggleToolbarButtonStateuseToggleToolbarButtonuseToggleButtonStateuseToggleButton
Build your editor
Production-ready AI template and reusable components.
Get all-access

Features

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

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 { BaseTogglePlugin } from '@platejs/toggle';
import { TogglePlugin } from '@platejs/toggle/react';
import { ChevronRight } from 'lucide-react';
import {
  type PlateElementProps,
  PlateElement,
  useEditor,
  useEditorPlugin,
  usePluginStore,
} from 'platejs/react';
import * as React from 'react';
 
import { Button } from '@/components/ui/button';
import { IndentKit } from '@/components/editor/indent';
 
export function ToggleElement(props: PlateElementProps<typeof TogglePlugin>) {
  const editor = useEditor();
  const { element } = props;
  const toggleKey = editor.key(element);
  const open = usePluginStore(BaseTogglePlugin, 'openKeys').has(toggleKey);
  const { api } = useEditorPlugin(BaseTogglePlugin);
 
  return (
    <PlateElement {...props} className="pl-6">
      <Button
        size="icon"
        variant="ghost"
        className="absolute top-0 -left-0.5 size-6 cursor-pointer items-center justify-center rounded-md p-px text-muted-foreground transition-colors select-none hover:bg-accent [&_svg]:size-4"
        contentEditable={false}
        onClick={(event) => {
          event.preventDefault();
          api.toggleKeys([toggleKey]);
        }}
        onMouseDown={(event) => {
          event.preventDefault();
        }}
      >
        <ChevronRight
          className={
            open
              ? 'rotate-90 transition-transform duration-75'
              : 'rotate-0 transition-transform duration-75'
          }
        />
      </Button>
      {props.children}
    </PlateElement>
  );
}
 
export const ToggleKit = [
  ...IndentKit,
  TogglePlugin.configure({ component: ToggleElement }),
];
'use client';
 
import { BaseTogglePlugin } from '@platejs/toggle';
import { TogglePlugin } from '@platejs/toggle/react';
import { ChevronRight } from 'lucide-react';
import {
  type PlateElementProps,
  PlateElement,
  useEditor,
  useEditorPlugin,
  usePluginStore,
} from 'platejs/react';
import * as React from 'react';
 
import { Button } from '@/components/ui/button';
import { IndentKit } from '@/components/editor/indent';
 
export function ToggleElement(
  • IndentKit: Provides indent support for toggle elements.
  • ToggleElement: Renders toggle elements.

Add Kit

Add the kit to your plugins:

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

Manual Usage

Installation

pnpm add @platejs/indent @platejs/toggle
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,
  ],
});
import { IndentPlugin } from '@platejs/indent/react';
import { 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 { PLUGINS } from 'platejs';
import { createPlateEditor } from 'platejs/react';
import { ToggleElement } from '@/components/editor/toggle';
 
const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    IndentPlugin.configure({
      targetPlugins: [
        PLUGINS.heading, PLUGINS.heading, PLUGINS.heading, PLUGINS.heading, PLUGINS.heading, PLUGINS.heading,
        PLUGINS.paragraph,
        PLUGINS
  • component: Assigns ToggleElement to render toggle elements.
  • IndentPlugin.targetPlugins: Configures which element plugin names 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: PLUGINS.toggle,
}
{
  icon: <ChevronRightIcon />,
  label: 'Toggle list',
  value: PLUGINS.toggle,
}

Insert Toolbar Button

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

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

Plugins

TogglePlugin

Plugin for managing toggle functionality.

Optionsobject

    Set of open toggle node keys.

    • Default: new Set()

    Function to check if toggle is open.

    • Default: (key) => openKeys.has(key)

    Function to check if any toggles are closed.

    • Default: (keys) => keys.some(key => !isOpen(key))

API

editor.plugin(TogglePlugin).api.toggleKeys

Toggles the open state of specified toggles.

Toggle open state of toggles.

Parameters

    Node keys of the toggle elements.

    Force toggle state:

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

Hooks

useToggleToolbarButtonState

Hook for getting toggle toolbar button state.

Returnsobject

    Whether button is pressed.

useToggleToolbarButton

Hook for handling toggle toolbar button behavior.

State

    Whether button is pressed.

Returnsobject

    Props for toggle button.

useToggleButtonState

Hook for getting toggle button state.

Get toggle button state.

Parameters

    Toggle element node key.

Returnsobject

    Toggle element node key.

    Whether toggle is expanded.

useToggleButton

Hook for handling toggle button behavior.

Handle toggle button behavior.

Parameters

    Toggle element node key.

    Whether toggle is expanded.

Returnsobject

    Toggle element node key.

    Whether toggle is expanded.

    Props for toggle button.

props
:
PlateElementProps
<
typeof
TogglePlugin>) {
const editor = useEditor();
const { element } = props;
const toggleKey = editor.key(element);
const open = usePluginStore(BaseTogglePlugin, 'openKeys').has(toggleKey);
const { api } = useEditorPlugin(BaseTogglePlugin);
return (
<PlateElement {...props} className="pl-6">
<Button
size="icon"
variant="ghost"
className="absolute top-0 -left-0.5 size-6 cursor-pointer items-center justify-center rounded-md p-px text-muted-foreground transition-colors select-none hover:bg-accent [&_svg]:size-4"
contentEditable={false}
onClick={(event) => {
event.preventDefault();
api.toggleKeys([toggleKey]);
}}
onMouseDown={(event) => {
event.preventDefault();
}}
>
<ChevronRight
className={
open
? 'rotate-90 transition-transform duration-75'
: 'rotate-0 transition-transform duration-75'
}
/>
</Button>
{props.children}
</PlateElement>
);
}
export const ToggleKit = [
...IndentKit,
TogglePlugin.configure({ component: ToggleElement }),
];
({
plugins: [
// ...otherPlugins,
...ToggleKit,
],
});
from
'@platejs/toggle/react'
;
import { createPlateEditor } from 'platejs/react';
const editor = createPlateEditor({
plugins: [
// ...otherPlugins,
IndentPlugin,
TogglePlugin,
],
});
.toggle,
],
}),
TogglePlugin.configure({ component: ToggleElement }),
],
});
import { IndentPlugin } from '@platejs/indent/react';
import { TogglePlugin } from '@platejs/toggle/react';
import { PLUGINS } from 'platejs';
import { createPlateEditor } from 'platejs/react';
import { ToggleElement } from '@/components/editor/toggle';
 
const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    IndentPlugin.configure({
      targetPlugins: [
        PLUGINS.heading, PLUGINS.heading, PLUGINS.heading, PLUGINS.heading, PLUGINS.heading, PLUGINS.heading,
        PLUGINS.paragraph,
        PLUGINS.toggle,
      ],
    }),
    TogglePlugin.configure({ component: ToggleElement }),
  ],
});