51:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 52:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 53:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 54:T1543,'use client'; import * as React from 'react'; import type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu'; import { CalendarIcon, ChevronRightIcon, Columns3Icon, FileCodeIcon, FilmIcon, Heading1Icon, Heading2Icon, Heading3Icon, ImageIcon, Link2Icon, ListIcon, ListOrderedIcon, MinusIcon, PilcrowIcon, PlusIcon, QuoteIcon, RadicalIcon, SquareIcon, SuperscriptIcon, TableIcon, TableOfContentsIcon, } from 'lucide-react'; import { KEYS } from 'platejs'; import { useEditorRef } from 'platejs/react'; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from '@/components/ui/dropdown-menu'; import { insertBlock, insertInlineElement, } from '@/registry/components/editor/transforms-classic'; import { ToolbarButton, ToolbarMenuGroup } from './toolbar'; type Group = { group: string; items: Item[]; }; type Item = { icon: React.ReactNode; value: string; onSelect: (editor: any, value: string) => void; focusEditor?: boolean; label?: string; }; const groups: Group[] = [ { group: 'Basic blocks', items: [ { icon: , label: 'Paragraph', value: KEYS.p, }, { icon: , label: 'Heading 1', value: 'h1', }, { icon: , label: 'Heading 2', value: 'h2', }, { icon: , label: 'Heading 3', value: 'h3', }, { icon: , label: 'Table', value: KEYS.table, }, { icon: , label: 'Code', value: KEYS.codeBlock, }, { icon: , label: 'Quote', value: KEYS.blockquote, }, { icon: , label: 'Divider', value: KEYS.hr, }, ].map((item) => ({ ...item, onSelect: (editor, value) => { insertBlock(editor, value); }, })), }, { group: 'Lists', items: [ { icon: , label: 'Bulleted list', value: KEYS.ulClassic, }, { icon: , label: 'Numbered list', value: KEYS.olClassic, }, { icon: , label: 'To-do list', value: KEYS.taskList, }, { icon: , label: 'Toggle list', value: KEYS.toggle, }, ].map((item) => ({ ...item, onSelect: (editor, value) => { insertBlock(editor, value); }, })), }, { group: 'Media', items: [ { icon: , label: 'Image', value: KEYS.img, }, { icon: , label: 'Embed', value: KEYS.mediaEmbed, }, ].map((item) => ({ ...item, onSelect: (editor, value) => { insertBlock(editor, value); }, })), }, { group: 'Advanced blocks', items: [ { icon: , label: 'Table of contents', value: KEYS.toc, }, { icon: , label: '3 columns', value: 'action_three_columns', }, { focusEditor: false, icon: , label: 'Equation', value: KEYS.equation, }, ].map((item) => ({ ...item, onSelect: (editor, value) => { insertBlock(editor, value); }, })), }, { group: 'Inline', items: [ { icon: , label: 'Link', value: KEYS.link, }, { focusEditor: true, icon: , label: 'Date', value: KEYS.date, }, { focusEditor: true, icon: , label: 'Footnote', value: 'action_footnote', }, { focusEditor: false, icon: , label: 'Inline Equation', value: KEYS.inlineEquation, }, ].map((item) => ({ ...item, onSelect: (editor, value) => { insertInlineElement(editor, value); }, })), }, ]; export function InsertToolbarButton(props: DropdownMenuProps) { const editor = useEditorRef(); const [open, setOpen] = React.useState(false); return ( {groups.map(({ group, items: nestedItems }) => ( {nestedItems.map(({ icon, label, value, onSelect }) => ( { onSelect(editor, value); editor.tf.focus(); }} > {icon} {label} ))} ))} ); } 4d:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[]}],["$","$L51",null,{"registryDependencies":["dropdown-menu","https://platejs.org/r/toolbar.json","https://platejs.org/r/transforms-classic.json"]}]]}],["$","$L52",null,{"sourceUrl":"https://platejs.org/r/insert-toolbar-classic-button.json","proxyUrl":"https://shadcnregistry.com/r/plate/insert-toolbar-classic-button","itemId":"@plate/insert-toolbar-classic-button"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L53",null,{"files":[{"path":"src/registry/ui/insert-toolbar-classic-button.tsx","content":"$54","type":"registry:ui"}]}]]}],"$L55"]}]

Insert Toolbar Classic Button

Installation

Files

components

Styles