50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1o6_421saitt-.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1o6_421saitt-.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T1636,'use client'; import * as React from 'react'; import type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu'; import { CalendarIcon, ChevronRightIcon, Code2, Columns3Icon, FileCodeIcon, FilmIcon, Heading1Icon, Heading2Icon, Heading3Icon, ImageIcon, Link2Icon, ListIcon, ListOrderedIcon, MinusIcon, PenToolIcon, PilcrowIcon, PlusIcon, QuoteIcon, RadicalIcon, SquareIcon, SuperscriptIcon, TableIcon, TableOfContentsIcon, } from 'lucide-react'; import { KEYS } from 'platejs'; import { type PlateEditor, useEditorRef } from 'platejs/react'; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from '@/components/ui/dropdown-menu'; import { insertBlock, insertInlineElement, } from '@/registry/components/editor/transforms'; import { ToolbarButton, ToolbarMenuGroup } from './toolbar'; type Group = { group: string; items: Item[]; }; type Item = { icon: React.ReactNode; value: string; onSelect: (editor: PlateEditor, 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.ul, }, { icon: , label: 'Numbered list', value: KEYS.ol, }, { icon: , label: 'To-do list', value: KEYS.listTodo, }, { 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, }, { icon: , label: 'Excalidraw', value: KEYS.excalidraw, }, { icon: , label: 'Code Drawing', value: KEYS.codeDrawing, }, ].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} ))} ))} ); } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L50",null,{"namespace":"@catalogs","registryDependencies":["dropdown-menu","https://platejs.org/r/toolbar.json","https://platejs.org/r/transforms.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"src/registry/ui/insert-toolbar-button.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]