<RichTextMenu.Control>

Render a custom rich text control. Always use inside <RichTextMenu.Group>. See included controls.

<RichTextMenu.Control
  icon={<Quote />}
  title="Quote"
  onClick={() => editor.chain().focus().toggleBlockquote().run()}
/>

Control Props

Prop	Example	Type	Status
`icon`	`<Quote />`	ReactNode	Required
`title`	`"Quote"`	string	Required
`onClick`	`() => {}`	Function	Required
`active`	`true`	Boolean	-
`disabled`	`true`	Boolean	-

Required props

icon

The icon to render for the control, as a React node. Puck uses lucide-react internally.

<RichTextMenu.Control
  icon={<Quote />}
  title="Quote"
  onClick={() => editor.chain().focus().toggleBlockquote().run()}
/>

title

An title for the icon control, for accessibility.

<RichTextMenu.Control
  icon={<Quote />}
  title="Quote"
  onClick={() => editor.chain().focus().toggleBlockquote().run()}
/>

onClick

A callback to trigger when the control is clicked.

<RichTextMenu.Control
  icon={<Quote />}
  title="Quote"
  onClick={() => editor.chain().focus().toggleBlockquote().run()}
/>

Optional props

active

Whether or not this control is currently active.

<RichTextMenu.Control
  icon={<Quote />}
  title="Quote"
  onClick={() => editor.chain().focus().toggleBlockquote().run()}
  active={editorState?.isBlockquote}
/>

disabled

Whether or not this control is currently disabled.

<RichTextMenu.Control
  icon={<Quote />}
  title="Quote"
  onClick={() => editor.chain().focus().toggleBlockquote().run()}
  disabled={editorState?.canBlockquote}
/>

<RichTextMenu.Group>Configuration