Docs
Toggle

Toggle

Add Toggles to your document.

Toggle ElementToggle Button

🦚 Toggle

Create toggles with multiple levels of indentation
Level 1 toggle
Inside level 1 toggle
Level 2 toggle
Inside level 2 toggle
After toggles

Features

  • Add toggles to your document.
    • Toggles are closed by default, and can be opened to reveal the content inside.
  • Refer to the Indent documentation for more information.

Plugin dependencies

Installation

npm install @udecode/plate-indent @udecode/plate-node-id @udecode/plate-toggle

Usage

// ...
import { createIndentPlugin } from '@udecode/plate-indent';
import { createNodeIdPlugin } from '@udecode/plate-node-id';
import { createTogglePlugin, ELEMENT_TOGGLE } from '@udecode/plate-toggle';
 
const plugins = [
  // ...otherPlugins,
  createHeadingPlugin(),
  createParagraphPlugin(),
  createIndentPlugin({
    inject: {
      props: {
        validTypes: [ELEMENT_TOGGLE, ELEMENT_PARAGRAPH, ELEMENT_H1],
      },
    },
  }),
  createNodeIdPlugin(),
  createTogglePlugin(),
];

API

createTogglePlugin

openNextToggles

Marks the block at the current selection as an open toggle. Use this function right before inserting a block so that the toggle is expanded upon insertion.

Parameters

Collapse all

    The editor instance.

toggleIds

Toggles the open state of toggles.

Parameters

Collapse all

    The editor instance.

    An array of element ids.

    Set to true if you want to expand all toggles regardless of their current state. Set to false if you want to collapse all toggles regardless of their current state.

API Components

useToggleToolbarButtonState

Returns

Collapse all

    A boolean indicating whether the button is pressed or not.

useToggleToolbarButton

A behavior hook for the toggle toolbar button.

State

Collapse all

    A boolean indicating whether the button is pressed or not.

Returns

Collapse all

useToggleButtonState

Parameters

Collapse all

    The id of the toggle element.

Returns

Collapse all

    The id of the toggle element.

    A boolean indicating whether the toggle is open (expanded) or not (collapsed).

useToggleButton

A behavior hook for the toggle button that expands or collapses a toggle element.

Parameters

Collapse all

    The id of the toggle element.

    A boolean indicating whether the toggle is open (expanded) or not (collapsed).

Returns

Collapse all

    The id of the toggle element.

    A boolean indicating whether the toggle is open (expanded) or not (collapsed).

TableEditable Voids