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:Td26,'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, ListIcon, ListOrderedIcon, 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-classic'; import { ToolbarButton, ToolbarMenuGroup } from './toolbar'; import { turnIntoItems as baseTurnIntoItems } from './turn-into-toolbar-button'; // Map standard list items to classic versions const listItemsMap: Record = { [KEYS.listTodo]: { icon: , keywords: ['checklist', 'task', 'checkbox', '[]'], label: 'To-do list', value: KEYS.taskList, }, [KEYS.ol]: { icon: , keywords: ['ordered', 'ol', '1'], label: 'Numbered list', value: KEYS.olClassic, }, [KEYS.ul]: { icon: , keywords: ['unordered', 'ul', '-'], label: 'Bulleted list', value: KEYS.ulClassic, }, }; const turnIntoItems = baseTurnIntoItems.map((item) => item.value in listItemsMap ? listItemsMap[item.value] : item ); 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} ))} ); } 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/turn-into-toolbar-classic-button.json","proxyUrl":"https://shadcnregistry.com/r/plate/turn-into-toolbar-classic-button","itemId":"@plate/turn-into-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/turn-into-toolbar-classic-button.tsx","content":"$54","type":"registry:ui"}]}]]}],"$L55"]}]

Turn Into Toolbar Classic Button

Installation

Files

components

Styles