Upload

.changeset/poor-doors-tease.md

@@ -0,0 +1,13 @@
+---
+'@udecode/plate-media': minor
+---
+
+PlaceholderPlugin:
+New `updateUploadHistory` `withHistoryMark` `isHistoryMarking` to fix undo to the loading state.
+`editor.insert.insertMedia` add options
+
+
+MediaEmbedPlugin:
+Added a floating media toolbar for entering URLs to embed media.
+New api `hideFloating` `openFloating` tf `embed` 
+New hooks `useMediaFloatingToolbar`

apps/www/content/docs/components/changelog.mdx

@@ -11,6 +11,11 @@ Use the [CLI](https://platejs.org/docs/components/cli) to install the latest ver
 
 ## November 2024 #16
 
+### November 14 #16.7
+
+Remove `media-toolbar-button`, Use `media-dropdown-menu` instead.
+Add `ToolbarSplitButton` in `toolbar.tsx`.
+
 ### November 13 #16.6
 
 - `resizable`: hide `ResizeHandle` when read-only

apps/www/content/docs/upload.mdx

@@ -6,6 +6,9 @@ docs:
     title: Upload
 ---
 
+
+<ComponentPreview name="playground-demo" id="upload" />
+
 {/* ### UploadThing Integration
 
 This component uses UploadThing for file uploads. UploadThing provides a simple and efficient way to handle file uploads in your application.

apps/www/package.json

@@ -153,6 +153,7 @@
     "react-dom": "^18.3.1",
     "react-lite-youtube-embed": "^2.4.0",
     "react-markdown": "9.0.1",
+    "react-player": "2.16.0",
     "react-resizable-panels": "^2.0.22",
     "react-syntax-highlighter": "^15.5.0",
     "react-tweet": "^3.2.1",
@@ -171,6 +172,7 @@
     "ts-morph": "^22.0.0",
     "unist-builder": "4.0.0",
     "unist-util-visit": "^5.0.0",
+    "use-file-picker": "2.1.2",
     "vaul": "0.9.0"
   },
   "devDependencies": {

apps/www/public/r/index.json

@@ -2332,11 +2332,11 @@
     },
     "files": [
       {
-        "path": "plate-ui/media-toolbar-button.tsx",
+        "path": "plate-ui/media-dropdown-menu.tsx",
         "type": "registry:ui"
       }
     ],
-    "name": "media-toolbar-button",
+    "name": "media-dropdown-menu",
     "registryDependencies": [
       "toolbar"
     ],

apps/www/public/r/styles/default/ai-demo.json

@@ -9,7 +9,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"

apps/www/public/r/styles/default/align-demo.json

@@ -4,7 +4,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"