51: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"] 52: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"] 53:T1239,'use client'; import * as React from 'react'; import type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu'; import type { TElement } from 'platejs'; import { DropdownMenuItemIndicator } from '@radix-ui/react-dropdown-menu'; import { CheckIcon, ChevronRightIcon, Code2, Columns3Icon, FileCodeIcon, Heading1Icon, Heading2Icon, Heading3Icon, Heading4Icon, Heading5Icon, Heading6Icon, ListIcon, ListOrderedIcon, PilcrowIcon, QuoteIcon, SquareIcon, } from 'lucide-react'; import { KEYS } from 'platejs'; import { useEditorRef, useSelectionFragmentProp } from 'platejs/react'; import { DropdownMenu, DropdownMenuContent, DropdownMenuRadioItem, DropdownMenuTrigger, } from '@/components/ui/dropdown-menu'; import { getBlockType, setBlockType, } from '@/registry/components/editor/transforms'; import { ToolbarButton, ToolbarMenuGroup } from './toolbar'; export const turnIntoItems = [ { icon: , keywords: ['paragraph'], label: 'Text', value: KEYS.p, }, { icon: , keywords: ['title', 'h1'], label: 'Heading 1', value: 'h1', }, { icon: , keywords: ['subtitle', 'h2'], label: 'Heading 2', value: 'h2', }, { icon: , keywords: ['subtitle', 'h3'], label: 'Heading 3', value: 'h3', }, { icon: , keywords: ['subtitle', 'h4'], label: 'Heading 4', value: 'h4', }, { icon: , keywords: ['subtitle', 'h5'], label: 'Heading 5', value: 'h5', }, { icon: , keywords: ['subtitle', 'h6'], label: 'Heading 6', value: 'h6', }, { icon: , keywords: ['unordered', 'ul', '-'], label: 'Bulleted list', value: KEYS.ul, }, { icon: , keywords: ['ordered', 'ol', '1'], label: 'Numbered list', value: KEYS.ol, }, { icon: , keywords: ['checklist', 'task', 'checkbox', '[]'], label: 'To-do list', value: KEYS.listTodo, }, { icon: , keywords: ['collapsible', 'expandable'], label: 'Toggle list', value: KEYS.toggle, }, { icon: , keywords: ['```'], label: 'Code', value: KEYS.codeBlock, }, { icon: , keywords: [ 'code-drawing', 'diagram', 'plantuml', 'graphviz', 'flowchart', 'mermaid', ], label: 'Code Drawing', value: KEYS.codeDrawing, }, { icon: , keywords: ['citation', 'blockquote', '>'], label: 'Quote', value: KEYS.blockquote, }, { icon: , label: '3 columns', value: 'action_three_columns', }, ]; export function TurnIntoToolbarButton(props: DropdownMenuProps) { const editor = useEditorRef(); const [open, setOpen] = React.useState(false); const value = useSelectionFragmentProp({ defaultValue: KEYS.p, getProp: (node) => getBlockType(node as TElement), }); const selectedItem = React.useMemo( () => turnIntoItems.find((item) => item.value === (value ?? KEYS.p)) ?? turnIntoItems[0], [value] ); return ( {selectedItem.label} { e.preventDefault(); editor.tf.focus(); }} align="start" > { setBlockType(editor, type); }} label="Turn into" > {turnIntoItems.map(({ icon, label, value: itemValue }) => ( {icon} {label} ))} ); } 50:["$","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,["$","$L51",null,{"namespace":"@catalogs","registryDependencies":["dropdown-menu","https://platejs.org/r/toolbar.json","https://platejs.org/r/transforms.json"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"src/registry/ui/turn-into-toolbar-button.tsx","content":"$53","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]