diff --git a/apps/www/public/r/styles/default/transforms.json b/apps/www/public/r/styles/default/transforms.json
index 0cff51e2ad..b2f420e595 100644
--- a/apps/www/public/r/styles/default/transforms.json
+++ b/apps/www/public/r/styles/default/transforms.json
@@ -13,7 +13,7 @@
   ],
   "files": [
     {
-      "content": "'use client';\n\nimport type { PlateEditor } from '@udecode/plate-common/react';\n\nimport { insertCallout } from '@udecode/plate-callout';\nimport { CalloutPlugin } from '@udecode/plate-callout/react';\nimport { insertCodeBlock } from '@udecode/plate-code-block';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport {\n  type TElement,\n  type TNodeEntry,\n  getBlockAbove,\n  getBlocks,\n  getNodeEntry,\n  insertNodes,\n  removeEmptyPreviousBlock,\n  setNodes,\n  unsetNodes,\n  withoutNormalizing,\n} from '@udecode/plate-common';\nimport { insertDate } from '@udecode/plate-date';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { insertToc } from '@udecode/plate-heading';\nimport { TocPlugin } from '@udecode/plate-heading/react';\nimport { INDENT_LIST_KEYS, ListStyleType } from '@udecode/plate-indent-list';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { insertColumnGroup, toggleColumnGroup } from '@udecode/plate-layout';\nimport { LinkPlugin, triggerFloatingLink } from '@udecode/plate-link/react';\nimport { insertEquation, insertInlineEquation } from '@udecode/plate-math';\nimport {\n  EquationPlugin,\n  InlineEquationPlugin,\n} from '@udecode/plate-math/react';\nimport {\n  insertAudioPlaceholder,\n  insertFilePlaceholder,\n  insertMedia,\n  insertVideoPlaceholder,\n} from '@udecode/plate-media';\nimport {\n  AudioPlugin,\n  FilePlugin,\n  ImagePlugin,\n  MediaEmbedPlugin,\n  VideoPlugin,\n} from '@udecode/plate-media/react';\nimport { insertTable } from '@udecode/plate-table';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { Path } from 'slate';\n\nconst ACTION_THREE_COLUMNS = 'action_three_columns';\n\nconst insertList = (editor: PlateEditor, type: string) => {\n  insertNodes(\n    editor,\n    editor.api.create.block({\n      indent: 1,\n      listStyleType: type,\n    }),\n    { select: true }\n  );\n};\n\nconst insertBlockMap: Record<\n  string,\n  (editor: PlateEditor, type: string) => void\n> = {\n  [ACTION_THREE_COLUMNS]: (editor) =>\n    insertColumnGroup(editor, { layout: 3, select: true }),\n  [AudioPlugin.key]: (editor) =>\n    insertAudioPlaceholder(editor, { select: true }),\n  [CalloutPlugin.key]: (editor) => insertCallout(editor, { select: true }),\n  [CodeBlockPlugin.key]: (editor) => insertCodeBlock(editor, { select: true }),\n  [EquationPlugin.key]: (editor) => insertEquation(editor, { select: true }),\n  [FilePlugin.key]: (editor) => insertFilePlaceholder(editor, { select: true }),\n  [INDENT_LIST_KEYS.todo]: insertList,\n  [ImagePlugin.key]: (editor) =>\n    insertMedia(editor, {\n      select: true,\n      type: ImagePlugin.key,\n    }),\n  [ListStyleType.Decimal]: insertList,\n  [ListStyleType.Disc]: insertList,\n  [MediaEmbedPlugin.key]: (editor) =>\n    insertMedia(editor, {\n      select: true,\n      type: MediaEmbedPlugin.key,\n    }),\n  [TablePlugin.key]: (editor) => insertTable(editor, {}, { select: true }),\n  [TocPlugin.key]: (editor) => insertToc(editor, { select: true }),\n  [VideoPlugin.key]: (editor) =>\n    insertVideoPlaceholder(editor, { select: true }),\n};\n\nconst insertInlineMap: Record<\n  string,\n  (editor: PlateEditor, type: string) => void\n> = {\n  [DatePlugin.key]: (editor) => insertDate(editor, { select: true }),\n  [InlineEquationPlugin.key]: (editor) =>\n    insertInlineEquation(editor, '', { select: true }),\n  [LinkPlugin.key]: (editor) => triggerFloatingLink(editor, { focused: true }),\n};\n\nexport const insertBlock = (editor: PlateEditor, type: string) => {\n  withoutNormalizing(editor, () => {\n    if (type in insertBlockMap) {\n      insertBlockMap[type](editor, type);\n    } else {\n      const path = getBlockAbove(editor)?.[1];\n\n      if (!path) return;\n\n      const at = Path.next(path);\n\n      insertNodes(editor, editor.api.create.block({ type }), {\n        at,\n        select: true,\n      });\n    }\n\n    removeEmptyPreviousBlock(editor);\n  });\n};\n\nexport const insertInlineElement = (editor: PlateEditor, type: string) => {\n  if (insertInlineMap[type]) {\n    insertInlineMap[type](editor, type);\n  }\n};\n\nconst setList = (\n  editor: PlateEditor,\n  type: string,\n  entry: TNodeEntry<TElement>\n) => {\n  setNodes(\n    editor,\n    editor.api.create.block({\n      indent: 1,\n      listStyleType: type,\n    }),\n    {\n      at: entry[1],\n    }\n  );\n};\n\nconst setBlockMap: Record<\n  string,\n  (editor: PlateEditor, type: string, entry: TNodeEntry<TElement>) => void\n> = {\n  [ACTION_THREE_COLUMNS]: (editor) => toggleColumnGroup(editor, { layout: 3 }),\n  [INDENT_LIST_KEYS.todo]: setList,\n  [ListStyleType.Decimal]: setList,\n  [ListStyleType.Disc]: setList,\n};\n\nexport const setBlockType = (\n  editor: PlateEditor,\n  type: string,\n  { at }: { at?: Path } = {}\n) => {\n  withoutNormalizing(editor, () => {\n    const setEntry = (entry: TNodeEntry<TElement>) => {\n      const [node, path] = entry;\n\n      if (node[IndentListPlugin.key]) {\n        unsetNodes(editor, [IndentListPlugin.key, 'indent'], { at: path });\n      }\n      if (type in setBlockMap) {\n        return setBlockMap[type](editor, type, entry);\n      }\n      if (node.type !== type) {\n        editor.setNodes<TElement>({ type }, { at: path });\n      }\n    };\n\n    if (at) {\n      const entry = getNodeEntry<TElement>(editor, at);\n\n      if (entry) {\n        setEntry(entry);\n\n        return;\n      }\n    }\n\n    const entries = getBlocks(editor);\n\n    entries.forEach((entry) => setEntry(entry));\n  });\n};\n\nexport const getBlockType = (block: TElement) => {\n  if (block[IndentListPlugin.key]) {\n    if (block[IndentListPlugin.key] === ListStyleType.Decimal) {\n      return ListStyleType.Decimal;\n    } else if (block[IndentListPlugin.key] === INDENT_LIST_KEYS.todo) {\n      return INDENT_LIST_KEYS.todo;\n    } else {\n      return ListStyleType.Disc;\n    }\n  }\n\n  return block.type;\n};\n",
+      "content": "'use client';\n\nimport type { PlateEditor } from '@udecode/plate-common/react';\n\nimport { insertCallout } from '@udecode/plate-callout';\nimport { CalloutPlugin } from '@udecode/plate-callout/react';\nimport { insertCodeBlock } from '@udecode/plate-code-block';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport {\n  type TElement,\n  type TNodeEntry,\n  getBlockAbove,\n  getBlocks,\n  getNodeEntry,\n  insertNodes,\n  removeEmptyPreviousBlock,\n  setNodes,\n  unsetNodes,\n  withoutNormalizing,\n} from '@udecode/plate-common';\nimport { insertDate } from '@udecode/plate-date';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { insertToc } from '@udecode/plate-heading';\nimport { TocPlugin } from '@udecode/plate-heading/react';\nimport { INDENT_LIST_KEYS, ListStyleType } from '@udecode/plate-indent-list';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { insertColumnGroup, toggleColumnGroup } from '@udecode/plate-layout';\nimport { ColumnItemPlugin, ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LinkPlugin, triggerFloatingLink } from '@udecode/plate-link/react';\nimport { insertEquation, insertInlineEquation } from '@udecode/plate-math';\nimport {\n  EquationPlugin,\n  InlineEquationPlugin,\n} from '@udecode/plate-math/react';\nimport {\n  insertAudioPlaceholder,\n  insertFilePlaceholder,\n  insertMedia,\n  insertVideoPlaceholder,\n} from '@udecode/plate-media';\nimport {\n  AudioPlugin,\n  FilePlugin,\n  ImagePlugin,\n  MediaEmbedPlugin,\n  VideoPlugin,\n} from '@udecode/plate-media/react';\nimport { insertTable } from '@udecode/plate-table';\nimport {\n  TableCellPlugin,\n  TablePlugin,\n  TableRowPlugin,\n} from '@udecode/plate-table/react';\nimport { Path } from 'slate';\n\nexport const STRUCTURAL_TYPES = [\n  ColumnPlugin.key,\n  ColumnItemPlugin.key,\n  TablePlugin.key,\n  TableRowPlugin.key,\n  TableCellPlugin.key,\n];\n\nconst ACTION_THREE_COLUMNS = 'action_three_columns';\n\nconst insertList = (editor: PlateEditor, type: string) => {\n  insertNodes(\n    editor,\n    editor.api.create.block({\n      indent: 1,\n      listStyleType: type,\n    }),\n    { select: true }\n  );\n};\n\nconst insertBlockMap: Record<\n  string,\n  (editor: PlateEditor, type: string) => void\n> = {\n  [ACTION_THREE_COLUMNS]: (editor) =>\n    insertColumnGroup(editor, { layout: 3, select: true }),\n  [AudioPlugin.key]: (editor) =>\n    insertAudioPlaceholder(editor, { select: true }),\n  [CalloutPlugin.key]: (editor) => insertCallout(editor, { select: true }),\n  [CodeBlockPlugin.key]: (editor) => insertCodeBlock(editor, { select: true }),\n  [EquationPlugin.key]: (editor) => insertEquation(editor, { select: true }),\n  [FilePlugin.key]: (editor) => insertFilePlaceholder(editor, { select: true }),\n  [INDENT_LIST_KEYS.todo]: insertList,\n  [ImagePlugin.key]: (editor) =>\n    insertMedia(editor, {\n      select: true,\n      type: ImagePlugin.key,\n    }),\n  [ListStyleType.Decimal]: insertList,\n  [ListStyleType.Disc]: insertList,\n  [MediaEmbedPlugin.key]: (editor) =>\n    insertMedia(editor, {\n      select: true,\n      type: MediaEmbedPlugin.key,\n    }),\n  [TablePlugin.key]: (editor) => insertTable(editor, {}, { select: true }),\n  [TocPlugin.key]: (editor) => insertToc(editor, { select: true }),\n  [VideoPlugin.key]: (editor) =>\n    insertVideoPlaceholder(editor, { select: true }),\n};\n\nconst insertInlineMap: Record<\n  string,\n  (editor: PlateEditor, type: string) => void\n> = {\n  [DatePlugin.key]: (editor) => insertDate(editor, { select: true }),\n  [InlineEquationPlugin.key]: (editor) =>\n    insertInlineEquation(editor, '', { select: true }),\n  [LinkPlugin.key]: (editor) => triggerFloatingLink(editor, { focused: true }),\n};\n\nexport const insertBlock = (editor: PlateEditor, type: string) => {\n  withoutNormalizing(editor, () => {\n    if (type in insertBlockMap) {\n      insertBlockMap[type](editor, type);\n    } else {\n      const path = getBlockAbove(editor)?.[1];\n\n      if (!path) return;\n\n      const at = Path.next(path);\n\n      insertNodes(editor, editor.api.create.block({ type }), {\n        at,\n        select: true,\n      });\n    }\n\n    removeEmptyPreviousBlock(editor);\n  });\n};\n\nexport const insertInlineElement = (editor: PlateEditor, type: string) => {\n  if (insertInlineMap[type]) {\n    insertInlineMap[type](editor, type);\n  }\n};\n\nconst setList = (\n  editor: PlateEditor,\n  type: string,\n  entry: TNodeEntry<TElement>\n) => {\n  setNodes(\n    editor,\n    editor.api.create.block({\n      indent: 1,\n      listStyleType: type,\n    }),\n    {\n      at: entry[1],\n    }\n  );\n};\n\nconst setBlockMap: Record<\n  string,\n  (editor: PlateEditor, type: string, entry: TNodeEntry<TElement>) => void\n> = {\n  [ACTION_THREE_COLUMNS]: (editor) => toggleColumnGroup(editor, { layout: 3 }),\n  [INDENT_LIST_KEYS.todo]: setList,\n  [ListStyleType.Decimal]: setList,\n  [ListStyleType.Disc]: setList,\n};\n\nexport const setBlockType = (\n  editor: PlateEditor,\n  type: string,\n  { at }: { at?: Path } = {}\n) => {\n  withoutNormalizing(editor, () => {\n    const setEntry = (entry: TNodeEntry<TElement>) => {\n      const [node, path] = entry;\n\n      if (node[IndentListPlugin.key]) {\n        unsetNodes(editor, [IndentListPlugin.key, 'indent'], { at: path });\n      }\n      if (type in setBlockMap) {\n        return setBlockMap[type](editor, type, entry);\n      }\n      if (node.type !== type) {\n        editor.setNodes<TElement>({ type }, { at: path });\n      }\n    };\n\n    if (at) {\n      const entry = getNodeEntry<TElement>(editor, at);\n\n      if (entry) {\n        setEntry(entry);\n\n        return;\n      }\n    }\n\n    const entries = getBlocks(editor, { mode: 'lowest' });\n\n    entries.forEach((entry) => setEntry(entry));\n  });\n};\n\nexport const getBlockType = (block: TElement) => {\n  if (block[IndentListPlugin.key]) {\n    if (block[IndentListPlugin.key] === ListStyleType.Decimal) {\n      return ListStyleType.Decimal;\n    } else if (block[IndentListPlugin.key] === INDENT_LIST_KEYS.todo) {\n      return INDENT_LIST_KEYS.todo;\n    } else {\n      return ListStyleType.Disc;\n    }\n  }\n\n  return block.type;\n};\n",
       "path": "components/editor/transforms.ts",
       "target": "components/editor/transforms.ts",
       "type": "registry:component"
diff --git a/apps/www/public/r/styles/default/turn-into-dropdown-menu.json b/apps/www/public/r/styles/default/turn-into-dropdown-menu.json
index ae8eff211a..6f99cfcdf2 100644
--- a/apps/www/public/r/styles/default/turn-into-dropdown-menu.json
+++ b/apps/www/public/r/styles/default/turn-into-dropdown-menu.json
@@ -21,7 +21,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport {\n  ParagraphPlugin,\n  focusEditor,\n  useEditorRef,\n  useSelectionFragmentProp,\n} from '@udecode/plate-common/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { INDENT_LIST_KEYS, ListStyleType } from '@udecode/plate-indent-list';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport {\n  ChevronRightIcon,\n  Columns3Icon,\n  FileCodeIcon,\n  Heading1Icon,\n  Heading2Icon,\n  Heading3Icon,\n  ListIcon,\n  ListOrderedIcon,\n  PilcrowIcon,\n  QuoteIcon,\n  SquareIcon,\n} from 'lucide-react';\n\nimport {\n  getBlockType,\n  setBlockType,\n} from '@/components/editor/transforms';\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuTrigger,\n  useOpenState,\n} from './dropdown-menu';\nimport { ToolbarButton } from './toolbar';\n\nconst turnIntoItems = [\n  {\n    icon: <PilcrowIcon />,\n    keywords: ['paragraph'],\n    label: 'Text',\n    value: ParagraphPlugin.key,\n  },\n  {\n    icon: <Heading1Icon />,\n    keywords: ['title', 'h1'],\n    label: 'Heading 1',\n    value: HEADING_KEYS.h1,\n  },\n  {\n    icon: <Heading2Icon />,\n    keywords: ['subtitle', 'h2'],\n    label: 'Heading 2',\n    value: HEADING_KEYS.h2,\n  },\n  {\n    icon: <Heading3Icon />,\n    keywords: ['subtitle', 'h3'],\n    label: 'Heading 3',\n    value: HEADING_KEYS.h3,\n  },\n  {\n    icon: <ListIcon />,\n    keywords: ['unordered', 'ul', '-'],\n    label: 'Bulleted list',\n    value: ListStyleType.Disc,\n  },\n  {\n    icon: <ListOrderedIcon />,\n    keywords: ['ordered', 'ol', '1'],\n    label: 'Numbered list',\n    value: ListStyleType.Decimal,\n  },\n  {\n    icon: <SquareIcon />,\n    keywords: ['checklist', 'task', 'checkbox', '[]'],\n    label: 'To-do list',\n    value: INDENT_LIST_KEYS.todo,\n  },\n  {\n    icon: <ChevronRightIcon />,\n    keywords: ['collapsible', 'expandable'],\n    label: 'Toggle list',\n    value: TogglePlugin.key,\n  },\n  {\n    icon: <FileCodeIcon />,\n    keywords: ['```'],\n    label: 'Code',\n    value: CodeBlockPlugin.key,\n  },\n  {\n    icon: <QuoteIcon />,\n    keywords: ['citation', 'blockquote', '>'],\n    label: 'Quote',\n    value: BlockquotePlugin.key,\n  },\n  {\n    icon: <Columns3Icon />,\n    label: '3 columns',\n    value: 'action_three_columns',\n  },\n];\n\nexport function TurnIntoDropdownMenu(props: DropdownMenuProps) {\n  const editor = useEditorRef();\n  const openState = useOpenState();\n\n  const value = useSelectionFragmentProp({\n    defaultValue: ParagraphPlugin.key,\n    getProp: (node) => getBlockType(node as any),\n  });\n  const selectedItem = React.useMemo(\n    () =>\n      turnIntoItems.find(\n        (item) => item.value === (value ?? ParagraphPlugin.key)\n      ) ?? turnIntoItems[0],\n    [value]\n  );\n\n  return (\n    <DropdownMenu modal={false} {...openState} {...props}>\n      <DropdownMenuTrigger asChild>\n        <ToolbarButton pressed={openState.open} tooltip=\"Turn into\" isDropdown>\n          {selectedItem.label}\n        </ToolbarButton>\n      </DropdownMenuTrigger>\n\n      <DropdownMenuContent\n        className=\"ignore-click-outside/toolbar min-w-0\"\n        align=\"start\"\n      >\n        <DropdownMenuRadioGroup\n          value={value}\n          onValueChange={(type) => {\n            setBlockType(editor, type);\n            focusEditor(editor);\n          }}\n          label=\"Turn into\"\n        >\n          {turnIntoItems.map(({ icon, label, value: itemValue }) => (\n            <DropdownMenuRadioItem\n              key={itemValue}\n              className=\"min-w-[180px]\"\n              value={itemValue}\n            >\n              {icon}\n              {label}\n            </DropdownMenuRadioItem>\n          ))}\n        </DropdownMenuRadioGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport {\n  ParagraphPlugin,\n  focusEditor,\n  useEditorRef,\n  useSelectionFragmentProp,\n} from '@udecode/plate-common/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { INDENT_LIST_KEYS, ListStyleType } from '@udecode/plate-indent-list';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport {\n  ChevronRightIcon,\n  Columns3Icon,\n  FileCodeIcon,\n  Heading1Icon,\n  Heading2Icon,\n  Heading3Icon,\n  ListIcon,\n  ListOrderedIcon,\n  PilcrowIcon,\n  QuoteIcon,\n  SquareIcon,\n} from 'lucide-react';\n\nimport {\n  STRUCTURAL_TYPES,\n  getBlockType,\n  setBlockType,\n} from '@/components/editor/transforms';\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuTrigger,\n  useOpenState,\n} from './dropdown-menu';\nimport { ToolbarButton } from './toolbar';\n\nconst turnIntoItems = [\n  {\n    icon: <PilcrowIcon />,\n    keywords: ['paragraph'],\n    label: 'Text',\n    value: ParagraphPlugin.key,\n  },\n  {\n    icon: <Heading1Icon />,\n    keywords: ['title', 'h1'],\n    label: 'Heading 1',\n    value: HEADING_KEYS.h1,\n  },\n  {\n    icon: <Heading2Icon />,\n    keywords: ['subtitle', 'h2'],\n    label: 'Heading 2',\n    value: HEADING_KEYS.h2,\n  },\n  {\n    icon: <Heading3Icon />,\n    keywords: ['subtitle', 'h3'],\n    label: 'Heading 3',\n    value: HEADING_KEYS.h3,\n  },\n  {\n    icon: <ListIcon />,\n    keywords: ['unordered', 'ul', '-'],\n    label: 'Bulleted list',\n    value: ListStyleType.Disc,\n  },\n  {\n    icon: <ListOrderedIcon />,\n    keywords: ['ordered', 'ol', '1'],\n    label: 'Numbered list',\n    value: ListStyleType.Decimal,\n  },\n  {\n    icon: <SquareIcon />,\n    keywords: ['checklist', 'task', 'checkbox', '[]'],\n    label: 'To-do list',\n    value: INDENT_LIST_KEYS.todo,\n  },\n  {\n    icon: <ChevronRightIcon />,\n    keywords: ['collapsible', 'expandable'],\n    label: 'Toggle list',\n    value: TogglePlugin.key,\n  },\n  {\n    icon: <FileCodeIcon />,\n    keywords: ['```'],\n    label: 'Code',\n    value: CodeBlockPlugin.key,\n  },\n  {\n    icon: <QuoteIcon />,\n    keywords: ['citation', 'blockquote', '>'],\n    label: 'Quote',\n    value: BlockquotePlugin.key,\n  },\n  {\n    icon: <Columns3Icon />,\n    label: '3 columns',\n    value: 'action_three_columns',\n  },\n];\n\nexport function TurnIntoDropdownMenu(props: DropdownMenuProps) {\n  const editor = useEditorRef();\n  const openState = useOpenState();\n\n  const value = useSelectionFragmentProp({\n    defaultValue: ParagraphPlugin.key,\n    getProp: (node) => getBlockType(node as any),\n    structuralTypes: STRUCTURAL_TYPES,\n  });\n  const selectedItem = React.useMemo(\n    () =>\n      turnIntoItems.find(\n        (item) => item.value === (value ?? ParagraphPlugin.key)\n      ) ?? turnIntoItems[0],\n    [value]\n  );\n\n  return (\n    <DropdownMenu modal={false} {...openState} {...props}>\n      <DropdownMenuTrigger asChild>\n        <ToolbarButton pressed={openState.open} tooltip=\"Turn into\" isDropdown>\n          {selectedItem.label}\n        </ToolbarButton>\n      </DropdownMenuTrigger>\n\n      <DropdownMenuContent\n        className=\"ignore-click-outside/toolbar min-w-0\"\n        align=\"start\"\n      >\n        <DropdownMenuRadioGroup\n          value={value}\n          onValueChange={(type) => {\n            setBlockType(editor, type);\n            focusEditor(editor);\n          }}\n          label=\"Turn into\"\n        >\n          {turnIntoItems.map(({ icon, label, value: itemValue }) => (\n            <DropdownMenuRadioItem\n              key={itemValue}\n              className=\"min-w-[180px]\"\n              value={itemValue}\n            >\n              {icon}\n              {label}\n            </DropdownMenuRadioItem>\n          ))}\n        </DropdownMenuRadioGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n",
       "path": "plate-ui/turn-into-dropdown-menu.tsx",
       "target": "components/plate-ui/turn-into-dropdown-menu.tsx",
       "type": "registry:ui"