From d57e625fb016d581471984d443692a594fbb152d Mon Sep 17 00:00:00 2001
From: felixfeng33 <felixfeng33@users.noreply.github.com>
Date: Sun, 17 Nov 2024 02:28:03 +0000
Subject: [PATCH] docs

---
 apps/www/public/r/styles/default/fixed-toolbar-buttons.json | 2 +-
 apps/www/public/r/styles/default/media-plugins.json         | 2 +-
 apps/www/public/r/styles/default/media-toolbar-button.json  | 2 +-
 yarn.lock                                                   | 6 +++---
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/apps/www/public/r/styles/default/fixed-toolbar-buttons.json b/apps/www/public/r/styles/default/fixed-toolbar-buttons.json
index c549829b19..62cdc29da1 100644
--- a/apps/www/public/r/styles/default/fixed-toolbar-buttons.json
+++ b/apps/www/public/r/styles/default/fixed-toolbar-buttons.json
@@ -13,7 +13,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React, { useState } from 'react';\n\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  SubscriptPlugin,\n  SuperscriptPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { useEditorReadOnly } from '@udecode/plate-common/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n} from '@udecode/plate-font/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { ListStyleType } from '@udecode/plate-indent-list';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport {\n  AudioPlugin,\n  FilePlugin,\n  ImagePlugin,\n  VideoPlugin,\n} from '@udecode/plate-media/react';\nimport {\n  BaselineIcon,\n  BoldIcon,\n  Code2Icon,\n  HighlighterIcon,\n  ItalicIcon,\n  KeyboardIcon,\n  PaintBucketIcon,\n  SparklesIcon,\n  StrikethroughIcon,\n  SubscriptIcon,\n  SuperscriptIcon,\n  UnderlineIcon,\n} from 'lucide-react';\n\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from './accordion';\nimport { AIToolbarButton } from './ai-toolbar-button';\nimport { AlignDropdownMenu } from './align-dropdown-menu';\nimport { ColorDropdownMenu } from './color-dropdown-menu';\nimport { CommentToolbarButton } from './comment-toolbar-button';\nimport { EmojiDropdownMenu } from './emoji-dropdown-menu';\nimport { RedoToolbarButton, UndoToolbarButton } from './history-toolbar-button';\nimport { IndentListToolbarButton } from './indent-list-toolbar-button';\nimport { IndentTodoToolbarButton } from './indent-todo-toolbar-button';\nimport { IndentToolbarButton } from './indent-toolbar-button';\nimport { InsertDropdownMenu } from './insert-dropdown-menu';\nimport { LineHeightDropdownMenu } from './line-height-dropdown-menu';\nimport { LinkToolbarButton } from './link-toolbar-button';\nimport { MarkToolbarButton } from './mark-toolbar-button';\nimport { MediaToolbarButton } from './media-toolbar-button';\nimport { ModeDropdownMenu } from './mode-dropdown-menu';\nimport { MoreToolbarButton } from './more-toolbar-button';\nimport { OutdentToolbarButton } from './outdent-toolbar-button';\nimport { TableDropdownMenu } from './table-dropdown-menu';\nimport { ToggleToolbarButton } from './toggle-toolbar-button';\nimport { ToolbarGroup } from './toolbar';\nimport { TurnIntoDropdownMenu } from './turn-into-dropdown-menu';\n\nexport function FixedToolbarButtons() {\n  const [value, setValue] = useState('');\n  const expanded = value === 'toolbar';\n\n  return (\n    <Accordion\n      className=\"w-full\"\n      onValueChange={setValue}\n      type=\"single\"\n      collapsible\n    >\n      <AccordionItem className=\"border-b-0\" value=\"toolbar\">\n        <PrimaryButtons expanded={expanded} />\n        <AccordionContent className=\"p-0\">\n          <ExpandedButtons />\n        </AccordionContent>\n      </AccordionItem>\n    </Accordion>\n  );\n}\n\nfunction PrimaryButtons({ expanded }: { expanded: boolean }) {\n  const readOnly = useEditorReadOnly();\n\n  return (\n    <div className=\"flex w-full\">\n      {!readOnly && (\n        <>\n          <ToolbarGroup>\n            <UndoToolbarButton />\n            <RedoToolbarButton />\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <AIToolbarButton\n              className=\"gap-1.5 text-purple-600 hover:text-purple-700 dark:text-purple-400 dark:hover:text-purple-500\"\n              tooltip=\"Edit, generate, and more\"\n            >\n              <SparklesIcon className=\"!size-3.5\" />\n              Ask AI\n            </AIToolbarButton>\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <InsertDropdownMenu />\n            <TurnIntoDropdownMenu />\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <MarkToolbarButton nodeType={BoldPlugin.key} tooltip=\"Bold (⌘+B)\">\n              <BoldIcon />\n            </MarkToolbarButton>\n\n            <MarkToolbarButton\n              nodeType={ItalicPlugin.key}\n              tooltip=\"Italic (⌘+I)\"\n            >\n              <ItalicIcon />\n            </MarkToolbarButton>\n\n            <MarkToolbarButton\n              nodeType={UnderlinePlugin.key}\n              tooltip=\"Underline (⌘+U)\"\n            >\n              <UnderlineIcon />\n            </MarkToolbarButton>\n\n            <MarkToolbarButton\n              nodeType={StrikethroughPlugin.key}\n              tooltip=\"Strikethrough (⌘+⇧+M)\"\n            >\n              <StrikethroughIcon />\n            </MarkToolbarButton>\n\n            <MarkToolbarButton nodeType={CodePlugin.key} tooltip=\"Code (⌘+E)\">\n              <Code2Icon />\n            </MarkToolbarButton>\n\n            <ColorDropdownMenu\n              nodeType={FontColorPlugin.key}\n              tooltip=\"Text color\"\n            >\n              <BaselineIcon />\n            </ColorDropdownMenu>\n\n            <ColorDropdownMenu\n              nodeType={FontBackgroundColorPlugin.key}\n              tooltip=\"Background color\"\n            >\n              <PaintBucketIcon />\n            </ColorDropdownMenu>\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <AlignDropdownMenu />\n\n            <IndentListToolbarButton nodeType={ListStyleType.Disc} />\n            <IndentListToolbarButton nodeType={ListStyleType.Decimal} />\n            <IndentTodoToolbarButton />\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <LinkToolbarButton />\n            <ToggleToolbarButton />\n            <TableDropdownMenu />\n            <EmojiDropdownMenu />\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <MediaToolbarButton nodeType={ImagePlugin.key} />\n            <MediaToolbarButton nodeType={VideoPlugin.key} />\n          </ToolbarGroup>\n        </>\n      )}\n\n      <div className=\"grow\" />\n\n      <ToolbarGroup>\n        <CommentToolbarButton />\n        <ModeDropdownMenu />\n        <AccordionTrigger className=\"p-0\" hideIcon>\n          <MoreToolbarButton pressed={expanded} tooltip=\"More\" />\n        </AccordionTrigger>\n      </ToolbarGroup>\n    </div>\n  );\n}\n\nfunction ExpandedButtons() {\n  return (\n    <div className=\"mt-1 flex w-full\">\n      <ToolbarGroup>\n        <LineHeightDropdownMenu />\n        <OutdentToolbarButton />\n        <IndentToolbarButton />\n      </ToolbarGroup>\n\n      <ToolbarGroup>\n        <MediaToolbarButton nodeType={AudioPlugin.key} />\n        <MediaToolbarButton nodeType={FilePlugin.key} />\n      </ToolbarGroup>\n\n      <ToolbarGroup>\n        <MarkToolbarButton nodeType={HighlightPlugin.key} tooltip=\"Highlight\">\n          <HighlighterIcon />\n        </MarkToolbarButton>\n\n        <MarkToolbarButton nodeType={KbdPlugin.key} tooltip=\"Keyboard input\">\n          <KeyboardIcon />\n        </MarkToolbarButton>\n\n        <MarkToolbarButton\n          nodeType={SuperscriptPlugin.key}\n          tooltip=\"Superscript\"\n        >\n          <SuperscriptIcon />\n        </MarkToolbarButton>\n\n        <MarkToolbarButton nodeType={SubscriptPlugin.key} tooltip=\"Subscript\">\n          <SubscriptIcon />\n        </MarkToolbarButton>\n      </ToolbarGroup>\n    </div>\n  );\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  SubscriptPlugin,\n  SuperscriptPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { useEditorReadOnly } from '@udecode/plate-core/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n} from '@udecode/plate-font/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { ListStyleType } from '@udecode/plate-indent-list';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport {\n  AudioPlugin,\n  FilePlugin,\n  ImagePlugin,\n  VideoPlugin,\n} from '@udecode/plate-media/react';\nimport {\n  BaselineIcon,\n  BoldIcon,\n  Code2Icon,\n  HighlighterIcon,\n  ItalicIcon,\n  KeyboardIcon,\n  PaintBucketIcon,\n  SparklesIcon,\n  StrikethroughIcon,\n  SubscriptIcon,\n  SuperscriptIcon,\n  UnderlineIcon,\n} from 'lucide-react';\n\nimport { AIToolbarButton } from './ai-toolbar-button';\nimport { AlignDropdownMenu } from './align-dropdown-menu';\nimport { ColorDropdownMenu } from './color-dropdown-menu';\nimport { CommentToolbarButton } from './comment-toolbar-button';\nimport { EmojiDropdownMenu } from './emoji-dropdown-menu';\nimport { RedoToolbarButton, UndoToolbarButton } from './history-toolbar-button';\nimport { IndentListToolbarButton } from './indent-list-toolbar-button';\nimport { IndentTodoToolbarButton } from './indent-todo-toolbar-button';\nimport { IndentToolbarButton } from './indent-toolbar-button';\nimport { InsertDropdownMenu } from './insert-dropdown-menu';\nimport { LineHeightDropdownMenu } from './line-height-dropdown-menu';\nimport { LinkToolbarButton } from './link-toolbar-button';\nimport { MarkToolbarButton } from './mark-toolbar-button';\nimport { MediaToolbarButton } from './media-toolbar-button';\nimport { ModeDropdownMenu } from './mode-dropdown-menu';\nimport { OutdentToolbarButton } from './outdent-toolbar-button';\nimport { TableDropdownMenu } from './table-dropdown-menu';\nimport { ToggleToolbarButton } from './toggle-toolbar-button';\nimport { ToolbarGroup } from './toolbar';\nimport { TurnIntoDropdownMenu } from './turn-into-dropdown-menu';\n\nexport function FixedToolbarButtons() {\n  const readOnly = useEditorReadOnly();\n\n  return (\n    <div className=\"flex w-full\">\n      {!readOnly && (\n        <>\n          <ToolbarGroup>\n            <UndoToolbarButton />\n            <RedoToolbarButton />\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <AIToolbarButton\n              className=\"gap-1.5 text-purple-600 hover:text-purple-700 dark:text-purple-400 dark:hover:text-purple-500\"\n              tooltip=\"Edit, generate, and more\"\n            >\n              <SparklesIcon className=\"!size-3.5\" />\n              Ask AI\n            </AIToolbarButton>\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <InsertDropdownMenu />\n            <TurnIntoDropdownMenu />\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <MarkToolbarButton nodeType={BoldPlugin.key} tooltip=\"Bold (⌘+B)\">\n              <BoldIcon />\n            </MarkToolbarButton>\n\n            <MarkToolbarButton\n              nodeType={ItalicPlugin.key}\n              tooltip=\"Italic (⌘+I)\"\n            >\n              <ItalicIcon />\n            </MarkToolbarButton>\n\n            <MarkToolbarButton\n              nodeType={UnderlinePlugin.key}\n              tooltip=\"Underline (⌘+U)\"\n            >\n              <UnderlineIcon />\n            </MarkToolbarButton>\n\n            <MarkToolbarButton\n              nodeType={StrikethroughPlugin.key}\n              tooltip=\"Strikethrough (⌘+⇧+M)\"\n            >\n              <StrikethroughIcon />\n            </MarkToolbarButton>\n\n            <MarkToolbarButton nodeType={CodePlugin.key} tooltip=\"Code (⌘+E)\">\n              <Code2Icon />\n            </MarkToolbarButton>\n\n            <ColorDropdownMenu\n              nodeType={FontColorPlugin.key}\n              tooltip=\"Text color\"\n            >\n              <BaselineIcon />\n            </ColorDropdownMenu>\n\n            <ColorDropdownMenu\n              nodeType={FontBackgroundColorPlugin.key}\n              tooltip=\"Background color\"\n            >\n              <PaintBucketIcon />\n            </ColorDropdownMenu>\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <AlignDropdownMenu />\n\n            <IndentListToolbarButton nodeType={ListStyleType.Disc} />\n            <IndentListToolbarButton nodeType={ListStyleType.Decimal} />\n            <IndentTodoToolbarButton />\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <LinkToolbarButton />\n            <ToggleToolbarButton />\n            <TableDropdownMenu />\n            <EmojiDropdownMenu />\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <MediaToolbarButton nodeType={ImagePlugin.key} />\n            <MediaToolbarButton nodeType={VideoPlugin.key} />\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <LineHeightDropdownMenu />\n            <OutdentToolbarButton />\n            <IndentToolbarButton />\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <MediaToolbarButton nodeType={AudioPlugin.key} />\n            <MediaToolbarButton nodeType={FilePlugin.key} />\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <MarkToolbarButton\n              nodeType={HighlightPlugin.key}\n              tooltip=\"Highlight\"\n            >\n              <HighlighterIcon />\n            </MarkToolbarButton>\n\n            <MarkToolbarButton\n              nodeType={KbdPlugin.key}\n              tooltip=\"Keyboard input\"\n            >\n              <KeyboardIcon />\n            </MarkToolbarButton>\n\n            <MarkToolbarButton\n              nodeType={SuperscriptPlugin.key}\n              tooltip=\"Superscript\"\n            >\n              <SuperscriptIcon />\n            </MarkToolbarButton>\n\n            <MarkToolbarButton\n              nodeType={SubscriptPlugin.key}\n              tooltip=\"Subscript\"\n            >\n              <SubscriptIcon />\n            </MarkToolbarButton>\n          </ToolbarGroup>\n        </>\n      )}\n\n      <div className=\"grow\" />\n\n      <ToolbarGroup>\n        <CommentToolbarButton />\n        <ModeDropdownMenu />\n        {/* <MoreToolbarButton pressed={expanded} tooltip=\"More\" /> */}\n      </ToolbarGroup>\n    </div>\n  );\n}\n",
       "path": "plate-ui/fixed-toolbar-buttons.tsx",
       "target": "components/plate-ui/fixed-toolbar-buttons.tsx",
       "type": "registry:ui"
diff --git a/apps/www/public/r/styles/default/media-plugins.json b/apps/www/public/r/styles/default/media-plugins.json
index 85a4df3d0c..64e0ad9e48 100644
--- a/apps/www/public/r/styles/default/media-plugins.json
+++ b/apps/www/public/r/styles/default/media-plugins.json
@@ -5,7 +5,7 @@
   ],
   "files": [
     {
-      "content": "'use client';\n\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport {\n  AudioPlugin,\n  FilePlugin,\n  ImagePlugin,\n  MediaEmbedPlugin,\n  PlaceholderPlugin,\n  VideoPlugin,\n} from '@udecode/plate-media/react';\n\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport { MediaUploadToast } from '@/components/plate-ui/media-upload-toast';\n\nexport const mediaPlugins = [\n  ImagePlugin.extend({\n    options: {\n      disableUploadInsert: true,\n    },\n    render: { afterEditable: ImagePreview },\n  }),\n  MediaEmbedPlugin,\n  VideoPlugin,\n  AudioPlugin,\n  FilePlugin,\n  CaptionPlugin.configure({\n    options: { plugins: [ImagePlugin, MediaEmbedPlugin] },\n  }),\n  PlaceholderPlugin.configure({\n    render: {\n      afterEditable: () => <MediaUploadToast />,\n    },\n  }),\n] as const;\n",
+      "content": "'use client';\n\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport {\n  AudioPlugin,\n  FilePlugin,\n  ImagePlugin,\n  MediaEmbedPlugin,\n  PlaceholderPlugin,\n  VideoPlugin,\n} from '@udecode/plate-media/react';\n\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport { MediaUploadToast } from '@/components/plate-ui/media-upload-toast';\n\nexport const mediaPlugins = [\n  ImagePlugin.extend({\n    options: {\n      disableUploadInsert: true,\n    },\n    render: { afterEditable: ImagePreview },\n  }),\n  MediaEmbedPlugin,\n  VideoPlugin,\n  AudioPlugin,\n  FilePlugin,\n  CaptionPlugin.configure({\n    options: { plugins: [ImagePlugin, MediaEmbedPlugin] },\n  }),\n  PlaceholderPlugin.configure({\n    options: {\n      disableEmptyPlaceholder: true,\n    },\n    render: {\n      afterEditable: () => <MediaUploadToast />,\n    },\n  }),\n] as const;\n",
       "path": "components/editor/plugins/media-plugins.tsx",
       "target": "components/editor/plugins/media-plugins.tsx",
       "type": "registry:component"
diff --git a/apps/www/public/r/styles/default/media-toolbar-button.json b/apps/www/public/r/styles/default/media-toolbar-button.json
index 511c8345b6..2961218f6e 100644
--- a/apps/www/public/r/styles/default/media-toolbar-button.json
+++ b/apps/www/public/r/styles/default/media-toolbar-button.json
@@ -17,7 +17,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React, { useCallback, useEffect, useState } from 'react';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\nimport { cn } from '@udecode/cn';\nimport { useEditorRef } from '@udecode/plate-core/react';\nimport {\n  AudioPlugin,\n  FilePlugin,\n  ImagePlugin,\n  VideoPlugin,\n} from '@udecode/plate-media/react';\nimport { insertNodes } from '@udecode/slate';\nimport { focusEditor } from '@udecode/slate-react';\nimport {\n  AudioLinesIcon,\n  FileUpIcon,\n  FilmIcon,\n  ImageIcon,\n  LinkIcon,\n} from 'lucide-react';\nimport { useFilePicker } from 'use-file-picker';\n\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n} from './alert-dialog';\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuTrigger,\n  useOpenState,\n} from './dropdown-menu';\nimport { Input } from './input';\nimport {\n  ToolbarSplitButton,\n  ToolbarSplitButtonPrimary,\n  ToolbarSplitButtonSecondary,\n} from './toolbar';\nconst MEDIA_CONFIG: Record<\n  string,\n  {\n    accept: string[];\n    icon: React.ReactNode;\n    placeholder: string;\n    title: string;\n    tooltip: string;\n  }\n> = {\n  [AudioPlugin.key]: {\n    accept: ['audio/*'],\n    icon: <AudioLinesIcon className=\"size-4\" />,\n    placeholder: 'https://example.com/audio.mp3',\n    title: 'Insert Audio',\n    tooltip: 'Audio',\n  },\n  [FilePlugin.key]: {\n    accept: ['*'],\n    icon: <FileUpIcon className=\"size-4\" />,\n    placeholder: 'https://example.com/file.pdf',\n    title: 'Insert File',\n    tooltip: 'File',\n  },\n  [ImagePlugin.key]: {\n    accept: ['image/*'],\n    icon: <ImageIcon className=\"size-4\" />,\n    placeholder: 'https://example.com/image.jpg',\n    title: 'Insert Image',\n    tooltip: 'Image',\n  },\n  [VideoPlugin.key]: {\n    accept: ['video/*'],\n    icon: <FilmIcon className=\"size-4\" />,\n    placeholder: 'https://example.com/video.mp4',\n    title: 'Insert Video',\n    tooltip: 'Video',\n  },\n};\n\nexport function MediaToolbarButton({\n  children,\n  nodeType,\n  ...props\n}: DropdownMenuProps & { nodeType: string }) {\n  const currentConfig = MEDIA_CONFIG[nodeType];\n\n  const editor = useEditorRef();\n  const openState = useOpenState();\n\n  const { openFilePicker } = useFilePicker({\n    accept: currentConfig.accept,\n    multiple: true,\n    onFilesSelected: ({ plainFiles: updatedFiles }) => {\n      (editor as any).tf.insert.media(updatedFiles);\n    },\n  });\n\n  const [dialogOpen, setDialogOpen] = useState(false);\n\n  const [url, setUrl] = useState('');\n\n  const embedMedia = useCallback(() => {\n    setDialogOpen(false);\n    insertNodes(editor, {\n      children: [{ text: '' }],\n      name: nodeType === FilePlugin.key ? url.split('/').pop() : undefined,\n      type: nodeType,\n      url,\n    });\n  }, [editor, nodeType, url]);\n\n  useEffect(() => {\n    if (!dialogOpen) {\n      focusEditor(editor);\n      setUrl('');\n    }\n  }, [dialogOpen, editor]);\n\n  return (\n    <>\n      <DropdownMenu {...openState} modal={false} {...props}>\n        <ToolbarSplitButton pressed={openState.open}>\n          <ToolbarSplitButtonPrimary\n            onClick={() => openFilePicker()}\n            onMouseDown={(e) => e.preventDefault()}\n            tooltip={currentConfig.tooltip}\n          >\n            {currentConfig.icon}\n          </ToolbarSplitButtonPrimary>\n\n          <DropdownMenuTrigger asChild>\n            <ToolbarSplitButtonSecondary />\n          </DropdownMenuTrigger>\n        </ToolbarSplitButton>\n\n        <DropdownMenuContent\n          className={cn('min-w-0 data-[state=closed]:hidden')}\n          align=\"start\"\n        >\n          <DropdownMenuRadioGroup>\n            <DropdownMenuRadioItem\n              value=\"upload\"\n              onSelect={() => openFilePicker()}\n              hideIcon\n            >\n              <div className=\"flex items-center gap-2\">\n                {currentConfig.icon}\n                <span className=\"text-sm\">Upload from computer</span>\n              </div>\n            </DropdownMenuRadioItem>\n            <DropdownMenuRadioItem\n              value=\"url\"\n              onSelect={() => setDialogOpen(true)}\n              hideIcon\n            >\n              <div className=\"flex items-center gap-2\">\n                <LinkIcon />\n                <span className=\"text-sm\">Insert via URL</span>\n              </div>\n            </DropdownMenuRadioItem>\n          </DropdownMenuRadioGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n\n      <AlertDialog open={dialogOpen} onOpenChange={setDialogOpen}>\n        <AlertDialogContent>\n          <AlertDialogHeader>\n            <AlertDialogTitle>{currentConfig.title}</AlertDialogTitle>\n            <AlertDialogDescription className=\"flex items-center gap-2\">\n              {currentConfig.icon}\n              <Input\n                variant=\"underline\"\n                value={url}\n                onChange={(e) => setUrl(e.target.value)}\n                onKeyDown={(e) => {\n                  if (e.key === 'Enter') embedMedia();\n                }}\n                placeholder={currentConfig.placeholder}\n                h=\"sm\"\n                autoFocus\n              />\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>CANCEL</AlertDialogCancel>\n            <AlertDialogAction onClick={embedMedia}>\n              {currentConfig.title.toUpperCase()}\n            </AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </>\n  );\n}\n",
+      "content": "'use client';\n\nimport React, { useCallback, useEffect, useState } from 'react';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\nimport { cn } from '@udecode/cn';\nimport { useEditorRef } from '@udecode/plate-core/react';\nimport {\n  AudioPlugin,\n  FilePlugin,\n  ImagePlugin,\n  VideoPlugin,\n} from '@udecode/plate-media/react';\nimport { insertNodes } from '@udecode/slate';\nimport { focusEditor } from '@udecode/slate-react';\nimport {\n  AudioLinesIcon,\n  FileUpIcon,\n  FilmIcon,\n  ImageIcon,\n  LinkIcon,\n} from 'lucide-react';\nimport { useFilePicker } from 'use-file-picker';\n\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n} from './alert-dialog';\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuTrigger,\n  useOpenState,\n} from './dropdown-menu';\nimport { Input } from './input';\nimport {\n  ToolbarSplitButton,\n  ToolbarSplitButtonPrimary,\n  ToolbarSplitButtonSecondary,\n} from './toolbar';\nconst MEDIA_CONFIG: Record<\n  string,\n  {\n    accept: string[];\n    icon: React.ReactNode;\n    title: string;\n    tooltip: string;\n  }\n> = {\n  [AudioPlugin.key]: {\n    accept: ['audio/*'],\n    icon: <AudioLinesIcon className=\"size-4\" />,\n    title: 'Insert Audio',\n    tooltip: 'Audio',\n  },\n  [FilePlugin.key]: {\n    accept: ['*'],\n    icon: <FileUpIcon className=\"size-4\" />,\n    title: 'Insert File',\n    tooltip: 'File',\n  },\n  [ImagePlugin.key]: {\n    accept: ['image/*'],\n    icon: <ImageIcon className=\"size-4\" />,\n    title: 'Insert Image',\n    tooltip: 'Image',\n  },\n  [VideoPlugin.key]: {\n    accept: ['video/*'],\n    icon: <FilmIcon className=\"size-4\" />,\n    title: 'Insert Video',\n    tooltip: 'Video',\n  },\n};\n\nexport function MediaToolbarButton({\n  children,\n  nodeType,\n  ...props\n}: DropdownMenuProps & { nodeType: string }) {\n  const currentConfig = MEDIA_CONFIG[nodeType];\n\n  const editor = useEditorRef();\n  const openState = useOpenState();\n\n  const { openFilePicker } = useFilePicker({\n    accept: currentConfig.accept,\n    multiple: true,\n    onFilesSelected: ({ plainFiles: updatedFiles }) => {\n      (editor as any).tf.insert.media(updatedFiles);\n    },\n  });\n\n  const [dialogOpen, setDialogOpen] = useState(false);\n\n  const [url, setUrl] = useState('');\n\n  const embedMedia = useCallback(() => {\n    setDialogOpen(false);\n    insertNodes(editor, {\n      children: [{ text: '' }],\n      name: nodeType === FilePlugin.key ? url.split('/').pop() : undefined,\n      type: nodeType,\n      url,\n    });\n  }, [editor, nodeType, url]);\n\n  useEffect(() => {\n    if (!dialogOpen) {\n      focusEditor(editor);\n      setUrl('');\n    }\n  }, [dialogOpen, editor]);\n\n  return (\n    <>\n      <DropdownMenu {...openState} modal={false} {...props}>\n        <ToolbarSplitButton pressed={openState.open}>\n          <ToolbarSplitButtonPrimary\n            onClick={() => openFilePicker()}\n            onMouseDown={(e) => e.preventDefault()}\n            tooltip={currentConfig.tooltip}\n          >\n            {currentConfig.icon}\n          </ToolbarSplitButtonPrimary>\n\n          <DropdownMenuTrigger asChild>\n            <ToolbarSplitButtonSecondary />\n          </DropdownMenuTrigger>\n        </ToolbarSplitButton>\n\n        <DropdownMenuContent\n          className={cn('min-w-0 data-[state=closed]:hidden')}\n          align=\"start\"\n        >\n          <DropdownMenuRadioGroup>\n            <DropdownMenuRadioItem\n              value=\"upload\"\n              onSelect={() => openFilePicker()}\n              hideIcon\n            >\n              <div className=\"flex items-center gap-2\">\n                {currentConfig.icon}\n                <span className=\"text-sm\">Upload from computer</span>\n              </div>\n            </DropdownMenuRadioItem>\n            <DropdownMenuRadioItem\n              value=\"url\"\n              onSelect={() => setDialogOpen(true)}\n              hideIcon\n            >\n              <div className=\"flex items-center gap-2\">\n                <LinkIcon />\n                <span className=\"text-sm\">Insert via URL</span>\n              </div>\n            </DropdownMenuRadioItem>\n          </DropdownMenuRadioGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n\n      <AlertDialog open={dialogOpen} onOpenChange={setDialogOpen}>\n        <AlertDialogContent>\n          <AlertDialogHeader>\n            <AlertDialogTitle>{currentConfig.title}</AlertDialogTitle>\n            <AlertDialogDescription className=\"flex items-center gap-2\">\n              <div className=\"group relative w-full\">\n                <label\n                  className=\"absolute top-1/2 block -translate-y-1/2 cursor-text px-1 text-sm text-muted-foreground/70 transition-all group-focus-within:pointer-events-none group-focus-within:top-0 group-focus-within:cursor-default group-focus-within:text-xs group-focus-within:font-medium group-focus-within:text-foreground has-[+input:not(:placeholder-shown)]:pointer-events-none has-[+input:not(:placeholder-shown)]:top-0 has-[+input:not(:placeholder-shown)]:cursor-default has-[+input:not(:placeholder-shown)]:text-xs has-[+input:not(:placeholder-shown)]:font-medium has-[+input:not(:placeholder-shown)]:text-foreground\"\n                  htmlFor=\"input-32\"\n                >\n                  <span className=\"inline-flex bg-background px-2\">URL</span>\n                </label>\n                <Input\n                  id=\"input-32\"\n                  value={url}\n                  onChange={(e) => setUrl(e.target.value)}\n                  onKeyDown={(e) => {\n                    if (e.key === 'Enter') embedMedia();\n                  }}\n                  placeholder=\"\"\n                  type=\"email\"\n                  autoFocus\n                />\n              </div>\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Cancel</AlertDialogCancel>\n            <AlertDialogAction onClick={embedMedia}>Accept</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </>\n  );\n}\n",
       "path": "plate-ui/media-toolbar-button.tsx",
       "target": "components/plate-ui/media-toolbar-button.tsx",
       "type": "registry:ui"
diff --git a/yarn.lock b/yarn.lock
index d677b7033f..f99eb82feb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6204,7 +6204,7 @@ __metadata:
   dependencies:
     "@udecode/plate-combobox": "npm:40.0.0"
     "@udecode/plate-markdown": "npm:40.0.5"
-    "@udecode/plate-selection": "npm:40.0.0"
+    "@udecode/plate-selection": "npm:40.1.0"
     ai: "npm:^3.4.10"
     lodash: "npm:^4.17.21"
   peerDependencies:
@@ -7090,7 +7090,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@udecode/plate-selection@npm:40.0.0, @udecode/plate-selection@workspace:^, @udecode/plate-selection@workspace:packages/selection":
+"@udecode/plate-selection@npm:40.1.0, @udecode/plate-selection@workspace:^, @udecode/plate-selection@workspace:packages/selection":
   version: 0.0.0-use.local
   resolution: "@udecode/plate-selection@workspace:packages/selection"
   dependencies:
@@ -7308,7 +7308,7 @@ __metadata:
     "@udecode/plate-reset-node": "npm:40.0.0"
     "@udecode/plate-resizable": "npm:40.0.0"
     "@udecode/plate-select": "npm:40.0.0"
-    "@udecode/plate-selection": "npm:40.0.0"
+    "@udecode/plate-selection": "npm:40.1.0"
     "@udecode/plate-slash-command": "npm:40.0.0"
     "@udecode/plate-suggestion": "npm:40.0.0"
     "@udecode/plate-tabbable": "npm:40.0.0"