Toggle

Loading...
Files
components/demo.tsx
'use client';

import React from 'react';

import { Plate } from '@udecode/plate/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/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

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

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