Toggle

Add toggles to your document.

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

import React from 'react';

import { Plate } from '@udecode/plate-common/react';

import { editorPlugins } from '@/components/editor/plugins/editor-plugins';
import { useCreateEditor } from '@/components/editor/use-create-editor';
import { Editor, EditorContainer } from '@/components/plate-ui/editor';

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

export default function Demo({ id }: { id: string }) {
  const editor = useCreateEditor({
    plugins: [...editorPlugins],
    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.
  • 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 { ParagraphPlugin } from '@udecode/plate-common/react';
import { NodeIdPlugin } from '@udecode/plate-node-id';
import { IndentPlugin } from '@udecode/plate-indent/react';
import { TogglePlugin } from '@udecode/plate-toggle/react';
 
const plugins = [
  // ...otherPlugins,
  HeadingPlugin,
  IndentPlugin.configure({
    inject: {
      targetPlugins: [TogglePlugin.key, ParagraphPlugin.key, HEADING_KEYS.h1],
    },
  }),
  NodeIdPlugin,
  TogglePlugin,
];

Plugins

TogglePlugin

Options

Collapse all

    A set of open toggle IDs.

    A function to determine if a toggle is open.

    A function to determine if some toggles are closed.

API

editor.api.toggle.toggleIds

Toggles the open state of toggles.

Parameters

Collapse all

    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. If null, it will toggle the current state.

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.

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).

Table of ContentsTrailing Block