Custom Controls
Ready-to-use custom toolbar controls with live preview and source code.
Pre-built custom toolbar controls — each template has a live Preview tab and a Code tab with the full source you can copy.
All controls use useRichTextEditorContext from @editorcn/editor to access the editor instance. Add them as children inside <RichTextEditor.Toolbar>.
Install all controls at once:
$ pnpm dlx shadcn@latest add "https://editorcn.vercel.app/r/custom-controls"You can also copy the source directly from the Code tab in each control below.
Heading Select
$ pnpm dlx shadcn@latest add "https://editorcn.vercel.app/r/custom-controls/heading-select"A unified dropdown that toggles between paragraph and heading levels (H1–H3). Uses useEditorState from @tiptap/react to keep the select value in sync with the cursor position.
Insert Link Dialog
$ pnpm dlx shadcn@latest add "https://editorcn.vercel.app/r/custom-controls/insert-link-dialog"A dialog that opens when the toolbar button is clicked, with an input field to enter a URL and auto-detection of selected link text.
Highlight Color Popover
$ pnpm dlx shadcn@latest add "https://editorcn.vercel.app/r/custom-controls/highlight-color-popover"A popover with a color swatch grid for highlight colors and a button to remove existing highlights.
Emoji Menu
$ pnpm dlx shadcn@latest add "https://editorcn.vercel.app/r/custom-controls/emoji-menu"A dropdown menu with a grid of emojis that inserts the selected emoji at the cursor position.
Insert Table Dialog
$ pnpm dlx shadcn@latest add "https://editorcn.vercel.app/r/custom-controls/insert-table-dialog"Requires table extensions:
$ pnpm add @tiptap/extension-table @tiptap/extension-table-row @tiptap/extension-table-cell @tiptap/extension-table-headerA dialog that opens when the toolbar button is clicked, with inputs for rows and columns, a header row toggle, and inserts the table on submit.
Font Family Select
$ pnpm dlx shadcn@latest add "https://editorcn.vercel.app/r/custom-controls/font-family-select"Requires text style extensions:
$ pnpm add @tiptap/extension-text-style @tiptap/extension-font-familyA select dropdown that changes the font family of selected text using @tiptap/extension-font-family and @tiptap/extension-text-style.
Font Size
$ pnpm dlx shadcn@latest add "https://editorcn.vercel.app/r/custom-controls/font-size"Requires font-size extension:
$ pnpm dlx shadcn@latest add "https://editorcn.vercel.app/r/custom-controls/font-size-extension"A plus/minus control with a number input to adjust the font size of selected text. Uses the FontSize extension which adds a fontSize attribute to textStyle.