diff --git a/apps/www/src/registry/default/plate-ui/media-placeholder-element.tsx b/apps/www/src/registry/default/plate-ui/media-placeholder-element.tsx
index bf3feedecc..5a3c80c232 100644
--- a/apps/www/src/registry/default/plate-ui/media-placeholder-element.tsx
+++ b/apps/www/src/registry/default/plate-ui/media-placeholder-element.tsx
@@ -6,6 +6,11 @@ import type { ReactNode } from 'react';
 import type { TPlaceholderElement } from '@udecode/plate-media';
 
 import { cn } from '@udecode/cn';
+import {
+  insertNodes,
+  removeNodes,
+  withoutSavingHistory,
+} from '@udecode/plate-common';
 import {
   findNodePath,
   useEditorPlugin,
@@ -21,7 +26,6 @@ import {
   VideoPlugin,
   updateUploadHistory,
 } from '@udecode/plate-media/react';
-import { insertNodes, removeNodes, withoutSavingHistory } from '@udecode/slate';
 import { AudioLines, FileUp, Film, ImageIcon } from 'lucide-react';
 import { useFilePicker } from 'use-file-picker';
 
diff --git a/apps/www/src/registry/default/plate-ui/media-toolbar-button.tsx b/apps/www/src/registry/default/plate-ui/media-toolbar-button.tsx
index 9e3597a3f9..effda61402 100644
--- a/apps/www/src/registry/default/plate-ui/media-toolbar-button.tsx
+++ b/apps/www/src/registry/default/plate-ui/media-toolbar-button.tsx
@@ -5,15 +5,14 @@ import React, { useCallback, useEffect, useState } from 'react';
 import type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';
 
 import { cn } from '@udecode/cn';
-import { useEditorRef } from '@udecode/plate-core/react';
+import { insertNodes } from '@udecode/plate-common';
+import { focusEditor, useEditorRef } from '@udecode/plate-common/react';
 import {
   AudioPlugin,
   FilePlugin,
   ImagePlugin,
   VideoPlugin,
 } from '@udecode/plate-media/react';
-import { insertNodes } from '@udecode/slate';
-import { focusEditor } from '@udecode/slate-react';
 import {
   AudioLinesIcon,
   FileUpIcon,
@@ -171,26 +170,24 @@ export function MediaToolbarButton({
         <AlertDialogContent>
           <AlertDialogHeader>
             <AlertDialogTitle>{currentConfig.title}</AlertDialogTitle>
-            <AlertDialogDescription className="flex items-center gap-2">
-              <div className="group relative w-full">
-                <label
-                  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"
-                  htmlFor="input-32"
-                >
-                  <span className="inline-flex bg-background px-2">URL</span>
-                </label>
-                <Input
-                  id="input-32"
-                  value={url}
-                  onChange={(e) => setUrl(e.target.value)}
-                  onKeyDown={(e) => {
-                    if (e.key === 'Enter') embedMedia();
-                  }}
-                  placeholder=""
-                  type="email"
-                  autoFocus
-                />
-              </div>
+            <AlertDialogDescription className="group relative flex w-full items-center gap-2">
+              <label
+                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"
+                htmlFor="input-32"
+              >
+                <span className="inline-flex bg-background px-2">URL</span>
+              </label>
+              <Input
+                id="input-32"
+                value={url}
+                onChange={(e) => setUrl(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter') embedMedia();
+                }}
+                placeholder=""
+                type="email"
+                autoFocus
+              />
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
diff --git a/apps/www/src/registry/default/plate-ui/media-upload-toast.tsx b/apps/www/src/registry/default/plate-ui/media-upload-toast.tsx
index 9ac3d1faea..ce39cb2e79 100644
--- a/apps/www/src/registry/default/plate-ui/media-upload-toast.tsx
+++ b/apps/www/src/registry/default/plate-ui/media-upload-toast.tsx
@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 
-import { useEditorRef } from '@udecode/plate-core/react';
+import { useEditorRef } from '@udecode/plate-common/react';
 import { PlaceholderPlugin, UploadErrorCode } from '@udecode/plate-media/react';
 import { toast } from 'sonner';
 
diff --git a/templates/plate-playground-template/.env.example b/templates/plate-playground-template/.env.example
new file mode 100644
index 0000000000..372a447bcc
--- /dev/null
+++ b/templates/plate-playground-template/.env.example
@@ -0,0 +1,2 @@
+OPENAI_API_KEY=
+UPLOADTHING_TOKEN=
\ No newline at end of file
diff --git a/templates/plate-playground-template/README.md b/templates/plate-playground-template/README.md
index da3bec43a9..508e72eb4e 100644
--- a/templates/plate-playground-template/README.md
+++ b/templates/plate-playground-template/README.md
@@ -41,6 +41,7 @@ cp .env.example .env.local
 Configure `.env.local`:
 
 - `OPENAI_API_KEY` – OpenAI API key ([get one here](https://platform.openai.com/account/api-keys))
+- `UPLOADTHING_TOKEN` – UploadThing API key ([get one here](https://uploadthing.com/dashboard)) You can also using your own backend
 
 Start the development server:
 
diff --git a/templates/plate-playground-template/package.json b/templates/plate-playground-template/package.json
index e670fa9ce3..f8012fee3b 100644
--- a/templates/plate-playground-template/package.json
+++ b/templates/plate-playground-template/package.json
@@ -20,6 +20,7 @@
     "@radix-ui/react-checkbox": "^1.1.2",
     "@radix-ui/react-context-menu": "^2.2.2",
     "@radix-ui/react-dialog": "^1.1.2",
+    "@radix-ui/react-alert-dialog": "^1.1.1",
     "@radix-ui/react-dropdown-menu": "^2.1.2",
     "@radix-ui/react-popover": "^1.1.2",
     "@radix-ui/react-separator": "^1.1.0",
@@ -27,7 +28,7 @@
     "@radix-ui/react-toolbar": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.3",
     "@udecode/cn": "^39.0.0",
-    "@udecode/plate-ai": "40.0.4",
+    "@udecode/plate-ai": "40.1.0",
     "@udecode/plate-alignment": "^40.0.0",
     "@udecode/plate-autoformat": "^40.0.0",
     "@udecode/plate-basic-elements": "^40.0.2",
@@ -43,7 +44,7 @@
     "@udecode/plate-cursor": "^40.0.0",
     "@udecode/plate-date": "^40.0.0",
     "@udecode/plate-dnd": "40.0.0",
-    "@udecode/plate-docx": "40.0.2",
+    "@udecode/plate-docx": "40.2.0",
     "@udecode/plate-emoji": "^40.0.0",
     "@udecode/plate-excalidraw": "^40.0.0",
     "@udecode/plate-floating": "^40.0.0",
@@ -58,20 +59,26 @@
     "@udecode/plate-layout": "^40.0.0",
     "@udecode/plate-line-height": "^40.0.0",
     "@udecode/plate-link": "^40.0.0",
-    "@udecode/plate-markdown": "^40.0.4",
+    "@udecode/plate-markdown": "40.0.5",
     "@udecode/plate-math": "^40.0.0",
-    "@udecode/plate-media": "40.0.0",
+    "@udecode/plate-media": "40.2.0",
     "@udecode/plate-mention": "40.0.0",
     "@udecode/plate-node-id": "^40.0.0",
     "@udecode/plate-reset-node": "^40.0.0",
     "@udecode/plate-resizable": "^40.0.0",
     "@udecode/plate-select": "^40.0.0",
-    "@udecode/plate-selection": "^40.0.0",
+    "@udecode/plate-selection": "40.1.0",
     "@udecode/plate-slash-command": "^40.0.0",
     "@udecode/plate-tabbable": "^40.0.0",
     "@udecode/plate-table": "^40.0.0",
     "@udecode/plate-toggle": "^40.0.0",
     "@udecode/plate-trailing-block": "^40.0.0",
+    "@uploadthing/react": "7.1.0",
+    "uploadthing": "7.2.0",
+    "zod": "^3.23.8",
+    "react-player": "^2.16.0",
+    "sonner": "^1.5.0",
+    "use-file-picker": "^2.1.2",
     "ai": "^3.4.33",
     "class-variance-authority": "0.7.0",
     "clsx": "^2.1.1",
diff --git a/templates/plate-playground-template/pnpm-lock.yaml b/templates/plate-playground-template/pnpm-lock.yaml
index ba311d64a2..03e34bca64 100644
--- a/templates/plate-playground-template/pnpm-lock.yaml
+++ b/templates/plate-playground-template/pnpm-lock.yaml
@@ -17,6 +17,9 @@ importers:
       '@faker-js/faker':
         specifier: ^9.2.0
         version: 9.2.0
+      '@radix-ui/react-alert-dialog':
+        specifier: ^1.1.1
+        version: 1.1.2(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-avatar':
         specifier: ^1.1.1
         version: 1.1.1(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -51,8 +54,8 @@ importers:
         specifier: ^39.0.0
         version: 39.0.0(@types/react@18.3.12)(class-variance-authority@0.7.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(tailwind-merge@2.5.4)
       '@udecode/plate-ai':
-        specifier: 40.0.4
-        version: 40.0.4(@udecode/plate-common@40.0.3(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-dom@0.111.0(slate@0.110.2))(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)
+        specifier: 40.1.0
+        version: 40.1.0(@udecode/plate-common@40.0.3(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-dom@0.111.0(slate@0.110.2))(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)
       '@udecode/plate-alignment':
         specifier: ^40.0.0
         version: 40.0.0(@udecode/plate-common@40.0.3(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-dom@0.111.0(slate@0.110.2))(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)
@@ -99,8 +102,8 @@ importers:
         specifier: 40.0.0
         version: 40.0.0(@udecode/plate-common@40.0.3(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-dom@0.111.0(slate@0.110.2))(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dnd-html5-backend@16.0.1)(react-dnd@16.0.1(@types/node@22.9.0)(@types/react@18.3.12)(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)
       '@udecode/plate-docx':
-        specifier: 40.0.2
-        version: 40.0.2(@udecode/plate-common@40.0.3(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-dom@0.111.0(slate@0.110.2))(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)
+        specifier: 40.2.0
+        version: 40.2.0(@udecode/plate-common@40.0.3(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-dom@0.111.0(slate@0.110.2))(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)
       '@udecode/plate-emoji':
         specifier: ^40.0.0
         version: 40.0.0(@udecode/plate-common@40.0.3(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-dom@0.111.0(slate@0.110.2))(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)
@@ -144,14 +147,14 @@ importers:
         specifier: ^40.0.0
         version: 40.0.0(@udecode/plate-common@40.0.3(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-dom@0.111.0(slate@0.110.2))(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)
       '@udecode/plate-markdown':
-        specifier: ^40.0.4
-        version: 40.0.4(@udecode/plate-common@40.0.3(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-dom@0.111.0(slate@0.110.2))(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)
+        specifier: 40.0.5
+        version: 40.0.5(@udecode/plate-common@40.0.3(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-dom@0.111.0(slate@0.110.2))(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)
       '@udecode/plate-math':
         specifier: ^40.0.0
         version: 40.0.0(@udecode/plate-common@40.0.3(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-dom@0.111.0(slate@0.110.2))(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)
       '@udecode/plate-media':
-        specifier: 40.0.0
-        version: 40.0.0(@udecode/plate-common@40.0.3(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-dom@0.111.0(slate@0.110.2))(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)
+        specifier: 40.2.0
+        version: 40.2.0(@udecode/plate-common@40.0.3(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-dom@0.111.0(slate@0.110.2))(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)
       '@udecode/plate-mention':
         specifier: 40.0.0
         version: 40.0.0(@udecode/plate-common@40.0.3(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-dom@0.111.0(slate@0.110.2))(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)
@@ -168,8 +171,8 @@ importers:
         specifier: ^40.0.0
         version: 40.0.0(@udecode/plate-common@40.0.3(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-dom@0.111.0(slate@0.110.2))(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)
       '@udecode/plate-selection':
-        specifier: ^40.0.0
-        version: 40.0.0(@udecode/plate-common@40.0.3(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-dom@0.111.0(slate@0.110.2))(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)
+        specifier: 40.1.0
+        version: 40.1.0(@udecode/plate-common@40.0.3(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-dom@0.111.0(slate@0.110.2))(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)
       '@udecode/plate-slash-command':
         specifier: ^40.0.0
         version: 40.0.0(@udecode/plate-common@40.0.3(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-dom@0.111.0(slate@0.110.2))(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)
@@ -185,6 +188,9 @@ importers:
       '@udecode/plate-trailing-block':
         specifier: ^40.0.0
         version: 40.0.0(@udecode/plate-common@40.0.3(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-dom@0.111.0(slate@0.110.2))(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)
+      '@uploadthing/react':
+        specifier: 7.1.0
+        version: 7.1.0(next@15.0.3(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)(uploadthing@7.2.0(next@15.0.3(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(tailwindcss@3.4.14))
       ai:
         specifier: ^3.4.33
         version: 3.4.33(react@18.3.1)(sswr@2.1.0(svelte@5.2.0))(svelte@5.2.0)(vue@3.5.12(typescript@5.6.3))(zod@3.23.8)
@@ -227,6 +233,9 @@ importers:
       react-lite-youtube-embed:
         specifier: ^2.4.0
         version: 2.4.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react-player:
+        specifier: ^2.16.0
+        version: 2.16.0(react@18.3.1)
       react-resizable-panels:
         specifier: ^2.1.6
         version: 2.1.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -248,6 +257,9 @@ importers:
       slate-react:
         specifier: ^0.111.0
         version: 0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2)
+      sonner:
+        specifier: ^1.5.0
+        version: 1.7.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       tailwind-merge:
         specifier: 2.5.4
         version: 2.5.4
@@ -257,6 +269,15 @@ importers:
       tailwindcss-animate:
         specifier: 1.0.7
         version: 1.0.7(tailwindcss@3.4.14)
+      uploadthing:
+        specifier: 7.2.0
+        version: 7.2.0(next@15.0.3(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(tailwindcss@3.4.14)
+      use-file-picker:
+        specifier: ^2.1.2
+        version: 2.1.2(react@18.3.1)
+      zod:
+        specifier: ^3.23.8
+        version: 3.23.8
     devDependencies:
       '@types/node':
         specifier: ^22.9.0
@@ -429,6 +450,11 @@ packages:
     resolution: {integrity: sha512-Z/yiTPj+lDVnF7lWeKCIJzaIkI0vYO87dMpZ4bg4TDrFe4XXLFWL1TbXU27gBP3QccxV9mZICCrnjnYlJjXHOA==}
     engines: {node: '>=6.9.0'}
 
+  '@effect/platform@0.69.8':
+    resolution: {integrity: sha512-zhBhg0c1MHMMo+grOc/6wC2/3UETLroruwrYNZ89uDtXl6EOcP5alFP+vW3NToKDA2o0hRh22KNqq4aixA7xXg==}
+    peerDependencies:
+      effect: ^3.10.3
+
   '@emnapi/runtime@1.3.1':
     resolution: {integrity: sha512-kEBmG8KyqtxJZv+ygbEim+KCGtIq1fC22Ms3S4ziXmYKm8uyoLX0MHONVKwp+9opg390VaKRNt4a7A9NwmpNhw==}
 
@@ -866,6 +892,19 @@ packages:
   '@radix-ui/primitive@1.1.0':
     resolution: {integrity: sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA==}
 
+  '@radix-ui/react-alert-dialog@1.1.2':
+    resolution: {integrity: sha512-eGSlLzPhKO+TErxkiGcCZGuvbVMnLA1MTnyBksGOeGRGkxHiiJUujsjmNTdWTm4iHVSRaUao9/4Ur671auMghQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-arrow@1.1.0':
     resolution: {integrity: sha512-FmlW1rCg7hBpEBwFbjHwCW6AmWLQM6g/v0Sn8XbP9NvmSZ2San1FpQeyPtufzOMSIx7Y4dzjlHoifhp+7NkZhw==}
     peerDependencies:
@@ -1427,8 +1466,8 @@ packages:
       react-dom: '>=16.8.0'
       tailwind-merge: '>=2.2.0'
 
-  '@udecode/plate-ai@40.0.4':
-    resolution: {integrity: sha512-g5kd1tj44g79QmYfZHvCIodTQ3cJ7RjMrkZmJ7BAcq1QQNg4TTNmDS8AaMl0+1DDTIob+a5WQLhl84+BB0ee0g==}
+  '@udecode/plate-ai@40.1.0':
+    resolution: {integrity: sha512-sIYeEcUyxYOcHTcISlEWCWRoX6XODEltPGsBPgU8pFKuWNMIt34g06Q9YB2f211RLIVSikzGhKrhB/ARsL82fg==}
     peerDependencies:
       '@udecode/plate-common': '>=40.0.0'
       react: '>=16.8.0'
@@ -1630,10 +1669,10 @@ packages:
       slate-hyperscript: '>=0.66.0'
       slate-react: '>=0.111.0'
 
-  '@udecode/plate-docx@40.0.2':
-    resolution: {integrity: sha512-s2d/onntJbFQNqyhUrxmBZRm9Cr17u2Gxj03ohHRE067L+jN//XBaGHsTI1KxUAtHfW2s4GemSZZd942xgA8Ag==}
+  '@udecode/plate-docx@40.2.0':
+    resolution: {integrity: sha512-bS4b4OjfnMwUvu+EKc89DbQWIMnTx3bXwt+DypWXaf0WqAUYDyj0WAN/KXshRuyBjju29UE5nL1RjLQNO3Jumw==}
     peerDependencies:
-      '@udecode/plate-common': '>=40.0.2'
+      '@udecode/plate-common': '>=40.0.3'
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
       slate: '>=0.103.0'
@@ -1822,8 +1861,8 @@ packages:
       slate-hyperscript: '>=0.66.0'
       slate-react: '>=0.111.0'
 
-  '@udecode/plate-markdown@40.0.4':
-    resolution: {integrity: sha512-SLg8Dy9kU+04yXrxtgi8JBLSEIirMI3LjNEQkgNjAgttJK4bUFIyzJzB4OIwMJ4dcxOl1MZEvs91kc3ryrvtZQ==}
+  '@udecode/plate-markdown@40.0.5':
+    resolution: {integrity: sha512-Slbwurt3ltrH1Vru+RvBl4WbwtAC9BUgLbcIBiYLU8HDfd7Yr2+uJ568a3BeeT+QiRLONYuC5H2qIOZ38FFwlA==}
     peerDependencies:
       '@udecode/plate-common': '>=40.0.3'
       react: '>=16.8.0'
@@ -1846,10 +1885,10 @@ packages:
       slate-hyperscript: '>=0.66.0'
       slate-react: '>=0.111.0'
 
-  '@udecode/plate-media@40.0.0':
-    resolution: {integrity: sha512-VyubrH9Oj+g3EI34+IUmBBqLEcw7RrSlNwASO563bAxaFydQr56mUVRTmvfL2f4nTqBl99IMNaUqw7z499LPXg==}
+  '@udecode/plate-media@40.2.0':
+    resolution: {integrity: sha512-7J+qMHVD2CzZ1xxoKl5MtnSFz81Y/6rfHIO5v8S2iBdUa5EDuEh7xmI44kNdQ1XCSeZVlkFhqiK1w74v2DzUnw==}
     peerDependencies:
-      '@udecode/plate-common': '>=40.0.0'
+      '@udecode/plate-common': '>=40.0.3'
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
       slate: '>=0.103.0'
@@ -1930,10 +1969,10 @@ packages:
       slate-hyperscript: '>=0.66.0'
       slate-react: '>=0.111.0'
 
-  '@udecode/plate-selection@40.0.0':
-    resolution: {integrity: sha512-ZO9GN3zERY/uGywOaTI8KqVDRF85Gqj97hdAmLVh0HHnJd0HJDEI2v2mu3552/fao+g3q4XXKmYBf630TuCNzg==}
+  '@udecode/plate-selection@40.1.0':
+    resolution: {integrity: sha512-W6QfdIB8YckUVFmSYG1IfKiy6RwG52hW7S9/KzJOBIzcYx0uvmbuUk+0BZHcjSr2RawSV7BwgQqh2f+ZCsNP6A==}
     peerDependencies:
-      '@udecode/plate-common': '>=40.0.0'
+      '@udecode/plate-common': '>=40.0.3'
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
       slate: '>=0.103.0'
@@ -2050,6 +2089,22 @@ packages:
   '@ungap/structured-clone@1.2.0':
     resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
 
+  '@uploadthing/mime-types@0.3.1':
+    resolution: {integrity: sha512-CaEadjn33CzPSLRaU8uL8IRv8MpW9xU5Rg/R45T5In8608dzovDDk0uQ9jzmmLYU5hHt+4v2qugcG/jirm/KEA==}
+
+  '@uploadthing/react@7.1.0':
+    resolution: {integrity: sha512-xySIeTkX0/nYoBA+zC4ze7ickq6TB9LB6793J00iK5ELnfIILjUtR2Uyx17dMyxMkP9lmw4wIjLCwjW4dU1GIw==}
+    peerDependencies:
+      next: '*'
+      react: ^17.0.2 || ^18.0.0
+      uploadthing: 7.2.0
+    peerDependenciesMeta:
+      next:
+        optional: true
+
+  '@uploadthing/shared@7.1.0':
+    resolution: {integrity: sha512-6cdS2hq9jUJFU/tqRKHs5XsDIwc6HdaVI4ka0vRy+IwjPnQBR0iXHwqyCtNNssCCAq4zQxrZr3iNEDPNqc0dqw==}
+
   '@vue/compiler-core@3.5.12':
     resolution: {integrity: sha512-ISyBTRMmMYagUxhcpyEH0hpXRd/KqDU4ymofPgl2XAkY9ZhQ+h0ovEZJIiPop13UmR/54oA2cgMDjgroRelaEw==}
 
@@ -2408,6 +2463,10 @@ packages:
   deep-is@0.1.4:
     resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
 
+  deepmerge@4.3.1:
+    resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==}
+    engines: {node: '>=0.10.0'}
+
   define-data-property@1.1.4:
     resolution: {integrity: sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==}
     engines: {node: '>= 0.4'}
@@ -2486,6 +2545,9 @@ packages:
   eastasianwidth@0.2.0:
     resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
 
+  effect@3.10.3:
+    resolution: {integrity: sha512-+Z5bUhzTeqYlfoPsfXMZG1pYadqLBKARD3xwMIoEAESsOhKFOrUsHHNCy2ZZW3/6oa4wokgT01k1zavA4BAQ4w==}
+
   electron-to-chromium@1.5.25:
     resolution: {integrity: sha512-kMb204zvK3PsSlgvvwzI3wBIcAw15tRkYk+NQdsjdDtcQWTp2RABbMQ9rUBy8KNEOM+/E6ep+XC3AykiWZld4g==}
 
@@ -2724,6 +2786,10 @@ packages:
   extend@3.0.2:
     resolution: {integrity: sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==}
 
+  fast-check@3.23.1:
+    resolution: {integrity: sha512-u/MudsoQEgBUZgR5N1v87vEgybeVYus9VnDVaIkxkkGP2jt54naghQ3PCQHJiogS8U/GavZCUPFfx3Xkp+NaHw==}
+    engines: {node: '>=8.0.0'}
+
   fast-deep-equal@3.1.3:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
 
@@ -2748,10 +2814,21 @@ packages:
     resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==}
     engines: {node: ^10.12.0 || >=12.0.0}
 
+  file-selector@0.2.4:
+    resolution: {integrity: sha512-ZDsQNbrv6qRi1YTDOEWzf5J2KjZ9KMI1Q2SGeTkCJmNNW25Jg4TW4UMcmoqcg4WrAyKRcpBXdbWRxkfrOzVRbA==}
+    engines: {node: '>= 10'}
+
+  file-selector@0.6.0:
+    resolution: {integrity: sha512-QlZ5yJC0VxHxQQsQhXvBaC7VRJ2uaxTf+Tfpu4Z/OcVQJVpZO+DGU0rkoVW5ce2SccxugvpBJoMvUs59iILYdw==}
+    engines: {node: '>= 12'}
+
   fill-range@7.1.1:
     resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
     engines: {node: '>=8'}
 
+  find-my-way-ts@0.1.5:
+    resolution: {integrity: sha512-4GOTMrpGQVzsCH2ruUn2vmwzV/02zF4q+ybhCIrw/Rkt3L8KWcycdC6aJMctJzwN4fXD4SD5F/4B9Sksh5rE0A==}
+
   find-up@5.0.0:
     resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
     engines: {node: '>=10'}
@@ -3163,6 +3240,9 @@ packages:
   lines-and-columns@1.2.4:
     resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
 
+  load-script@1.0.0:
+    resolution: {integrity: sha512-kPEjMFtZvwL9TaZo0uZ2ml+Ye9HUMmPwbYRJ324qF9tqMejwykJ5ggTyvzmrbBeapCAbk98BSbTeovHEEP1uCA==}
+
   locate-character@3.0.0:
     resolution: {integrity: sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==}
 
@@ -3233,6 +3313,9 @@ packages:
   mdast-util-to-string@4.0.0:
     resolution: {integrity: sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==}
 
+  memoize-one@5.2.1:
+    resolution: {integrity: sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==}
+
   mensch@0.3.4:
     resolution: {integrity: sha512-IAeFvcOnV9V0Yk+bFhYR07O3yNina9ANIN5MoXBKYJ/RLYPurd2d0yw14MDhpr9/momp0WofT1bPUh3hkzdi/g==}
 
@@ -3350,6 +3433,9 @@ packages:
   ms@2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
 
+  multipasta@0.2.5:
+    resolution: {integrity: sha512-c8eMDb1WwZcE02WVjHoOmUVk7fnKU/RmUcosHACglrWAuPQsEJv+E8430sXj6jNc1jHw0zrS16aCjQh4BcEb4A==}
+
   mz@2.7.0:
     resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}
 
@@ -3599,6 +3685,9 @@ packages:
     resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
     engines: {node: '>=6'}
 
+  pure-rand@6.1.0:
+    resolution: {integrity: sha512-bVWawvoZoBYpp6yIoQtQXHZjmz35RSVHnUOTefl8Vcjr8snTPY1wnpSPMWekcFwbxI6gtmT7rSYPFvz71ldiOA==}
+
   queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
 
@@ -3634,6 +3723,9 @@ packages:
     peerDependencies:
       react: ^18.3.1
 
+  react-fast-compare@3.2.2:
+    resolution: {integrity: sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==}
+
   react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
 
@@ -3643,6 +3735,11 @@ packages:
       react: '>=18.2.0'
       react-dom: '>=18.2.0'
 
+  react-player@2.16.0:
+    resolution: {integrity: sha512-mAIPHfioD7yxO0GNYVFD1303QFtI3lyyQZLY229UEAp/a10cSW+hPcakg0Keq8uWJxT2OiT/4Gt+Lc9bD6bJmQ==}
+    peerDependencies:
+      react: '>=16.6.0'
+
   react-remove-scroll-bar@2.3.6:
     resolution: {integrity: sha512-DtSYaao4mBmX+HDo5YWYdBWQwYIQQshUV/dVxFxK+KM26Wjwp1gZ6rv6OC3oujI6Bfu6Xyg3TwK533AQutsn/g==}
     engines: {node: '>=10'}
@@ -3858,6 +3955,12 @@ packages:
   slick@1.12.2:
     resolution: {integrity: sha512-4qdtOGcBjral6YIBCWJ0ljFSKNLz9KkhbWtuGvUyRowl1kxfuE1x/Z/aJcaiilpb3do9bl5K7/1h9XC5wWpY/A==}
 
+  sonner@1.7.0:
+    resolution: {integrity: sha512-W6dH7m5MujEPyug3lpI2l3TC3Pp1+LTgK0Efg+IHDrBbtEjyCmCHHo6yfNBOsf1tFZ6zf+jceWwB38baC8yO9g==}
+    peerDependencies:
+      react: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+      react-dom: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+
   sort-object-keys@1.1.3:
     resolution: {integrity: sha512-855pvK+VkU7PaKYPc+Jjnmt4EzejQHyhhF33q31qG8x7maDzkeFhAAThdCYay11CISO+qAMwjOBP+fPZe0IPyg==}
 
@@ -3869,6 +3972,9 @@ packages:
     resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
     engines: {node: '>=0.10.0'}
 
+  sqids@0.3.0:
+    resolution: {integrity: sha512-lOQK1ucVg+W6n3FhRwwSeUijxe93b51Bfz5PMRMihVf1iVkl82ePQG7V5vwrhzB11v0NtsR25PSZRGiSomJaJw==}
+
   sswr@2.1.0:
     resolution: {integrity: sha512-Cqc355SYlTAaUt8iDPaC/4DPPXK925PePLMxyBKuWd5kKc5mwsG3nT9+Mq2tyguL5s7b4Jg+IRMpTRsNTAfpSQ==}
     peerDependencies:
@@ -4103,6 +4209,27 @@ packages:
     peerDependencies:
       browserslist: '>= 4.21.0'
 
+  uploadthing@7.2.0:
+    resolution: {integrity: sha512-x7UAumRF/o+zAkHDP8Re7Qzi3pQF44BZkpsDdubjOE5lNcLw5RQD8WzUPwXKR0hsWEZcR4uoB8LNEDIHT7lAHw==}
+    engines: {node: '>=18.13.0'}
+    peerDependencies:
+      express: '*'
+      fastify: '*'
+      h3: '*'
+      next: '*'
+      tailwindcss: '*'
+    peerDependenciesMeta:
+      express:
+        optional: true
+      fastify:
+        optional: true
+      h3:
+        optional: true
+      next:
+        optional: true
+      tailwindcss:
+        optional: true
+
   uri-js@4.4.1:
     resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
 
@@ -4139,6 +4266,12 @@ packages:
     peerDependencies:
       react: '>=16.8.0'
 
+  use-file-picker@2.1.2:
+    resolution: {integrity: sha512-ZEIzRi1wXeIXDWr5i55gRBVER8rTkSGskDUY94bciTTAZJHlBnOTRLL/LDYjgz6d+US3yELHnRvtBhLxFGtB0A==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      react: '>=16'
+
   use-isomorphic-layout-effect@1.1.2:
     resolution: {integrity: sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==}
     peerDependencies:
@@ -4393,6 +4526,12 @@ snapshots:
       '@babel/helper-string-parser': 7.25.9
       '@babel/helper-validator-identifier': 7.25.9
 
+  '@effect/platform@0.69.8(effect@3.10.3)':
+    dependencies:
+      effect: 3.10.3
+      find-my-way-ts: 0.1.5
+      multipasta: 0.2.5
+
   '@emnapi/runtime@1.3.1':
     dependencies:
       tslib: 2.8.1
@@ -4702,6 +4841,20 @@ snapshots:
 
   '@radix-ui/primitive@1.1.0': {}
 
+  '@radix-ui/react-alert-dialog@1.1.2(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.0
+      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.3.12)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.12)(react@18.3.1)
+      '@radix-ui/react-dialog': 1.1.2(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-slot': 1.1.0(@types/react@18.3.12)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.12
+      '@types/react-dom': 18.3.1
+
   '@radix-ui/react-arrow@1.1.0(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -5288,11 +5441,11 @@ snapshots:
     transitivePeerDependencies:
       - '@types/react'
 
-  '@udecode/plate-ai@40.0.4(@udecode/plate-common@40.0.3(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-dom@0.111.0(slate@0.110.2))(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)':
+  '@udecode/plate-ai@40.1.0(@udecode/plate-common@40.0.3(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-dom@0.111.0(slate@0.110.2))(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)':
     dependencies:
       '@udecode/plate-common': 40.0.3(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-dom@0.111.0(slate@0.110.2))(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)
-      '@udecode/plate-markdown': 40.0.4(@udecode/plate-common@40.0.3(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-dom@0.111.0(slate@0.110.2))(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)
-      '@udecode/plate-selection': 40.0.0(@udecode/plate-common@40.0.3(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-dom@0.111.0(slate@0.110.2))(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)
+      '@udecode/plate-markdown': 40.0.5(@udecode/plate-common@40.0.3(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-dom@0.111.0(slate@0.110.2))(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)
+      '@udecode/plate-selection': 40.1.0(@udecode/plate-common@40.0.3(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-dom@0.111.0(slate@0.110.2))(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)
       lodash: 4.17.21
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
@@ -5524,13 +5677,13 @@ snapshots:
       slate-hyperscript: 0.100.0(slate@0.110.2)
       slate-react: 0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2)
 
-  '@udecode/plate-docx@40.0.2(@udecode/plate-common@40.0.3(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-dom@0.111.0(slate@0.110.2))(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)':
+  '@udecode/plate-docx@40.2.0(@udecode/plate-common@40.0.3(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-dom@0.111.0(slate@0.110.2))(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)':
     dependencies:
       '@udecode/plate-common': 40.0.3(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-dom@0.111.0(slate@0.110.2))(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)
       '@udecode/plate-heading': 40.0.2(@udecode/plate-common@40.0.3(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-dom@0.111.0(slate@0.110.2))(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)
       '@udecode/plate-indent': 40.0.0(@udecode/plate-common@40.0.3(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-dom@0.111.0(slate@0.110.2))(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)
       '@udecode/plate-indent-list': 40.0.0(@udecode/plate-common@40.0.3(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-dom@0.111.0(slate@0.110.2))(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)
-      '@udecode/plate-media': 40.0.0(@udecode/plate-common@40.0.3(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-dom@0.111.0(slate@0.110.2))(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)
+      '@udecode/plate-media': 40.2.0(@udecode/plate-common@40.0.3(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-dom@0.111.0(slate@0.110.2))(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)
       '@udecode/plate-table': 40.0.0(@udecode/plate-common@40.0.3(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-dom@0.111.0(slate@0.110.2))(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
@@ -5722,7 +5875,7 @@ snapshots:
       slate-hyperscript: 0.100.0(slate@0.110.2)
       slate-react: 0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2)
 
-  '@udecode/plate-markdown@40.0.4(@udecode/plate-common@40.0.3(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-dom@0.111.0(slate@0.110.2))(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)':
+  '@udecode/plate-markdown@40.0.5(@udecode/plate-common@40.0.3(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-dom@0.111.0(slate@0.110.2))(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)':
     dependencies:
       '@udecode/plate-common': 40.0.3(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-dom@0.111.0(slate@0.110.2))(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)
       lodash: 4.17.21
@@ -5751,7 +5904,7 @@ snapshots:
       slate-hyperscript: 0.100.0(slate@0.110.2)
       slate-react: 0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2)
 
-  '@udecode/plate-media@40.0.0(@udecode/plate-common@40.0.3(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-dom@0.111.0(slate@0.110.2))(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)':
+  '@udecode/plate-media@40.2.0(@udecode/plate-common@40.0.3(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-dom@0.111.0(slate@0.110.2))(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)':
     dependencies:
       '@udecode/plate-common': 40.0.3(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-dom@0.111.0(slate@0.110.2))(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)
       js-video-url-parser: 0.5.1
@@ -5832,7 +5985,7 @@ snapshots:
       slate-hyperscript: 0.100.0(slate@0.110.2)
       slate-react: 0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2)
 
-  '@udecode/plate-selection@40.0.0(@udecode/plate-common@40.0.3(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-dom@0.111.0(slate@0.110.2))(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)':
+  '@udecode/plate-selection@40.1.0(@udecode/plate-common@40.0.3(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-dom@0.111.0(slate@0.110.2))(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)':
     dependencies:
       '@udecode/plate-common': 40.0.3(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-dom@0.111.0(slate@0.110.2))(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)
       copy-to-clipboard: 3.3.3
@@ -5977,6 +6130,23 @@ snapshots:
 
   '@ungap/structured-clone@1.2.0': {}
 
+  '@uploadthing/mime-types@0.3.1': {}
+
+  '@uploadthing/react@7.1.0(next@15.0.3(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)(uploadthing@7.2.0(next@15.0.3(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(tailwindcss@3.4.14))':
+    dependencies:
+      '@uploadthing/shared': 7.1.0
+      file-selector: 0.6.0
+      react: 18.3.1
+      uploadthing: 7.2.0(next@15.0.3(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(tailwindcss@3.4.14)
+    optionalDependencies:
+      next: 15.0.3(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+
+  '@uploadthing/shared@7.1.0':
+    dependencies:
+      '@uploadthing/mime-types': 0.3.1
+      effect: 3.10.3
+      sqids: 0.3.0
+
   '@vue/compiler-core@3.5.12':
     dependencies:
       '@babel/parser': 7.26.2
@@ -6387,6 +6557,8 @@ snapshots:
 
   deep-is@0.1.4: {}
 
+  deepmerge@4.3.1: {}
+
   define-data-property@1.1.4:
     dependencies:
       es-define-property: 1.0.0
@@ -6464,6 +6636,10 @@ snapshots:
 
   eastasianwidth@0.2.0: {}
 
+  effect@3.10.3:
+    dependencies:
+      fast-check: 3.23.1
+
   electron-to-chromium@1.5.25: {}
 
   emoji-regex@8.0.0: {}
@@ -6852,6 +7028,10 @@ snapshots:
 
   extend@3.0.2: {}
 
+  fast-check@3.23.1:
+    dependencies:
+      pure-rand: 6.1.0
+
   fast-deep-equal@3.1.3: {}
 
   fast-glob@3.3.1:
@@ -6882,10 +7062,20 @@ snapshots:
     dependencies:
       flat-cache: 3.2.0
 
+  file-selector@0.2.4:
+    dependencies:
+      tslib: 2.8.1
+
+  file-selector@0.6.0:
+    dependencies:
+      tslib: 2.8.1
+
   fill-range@7.1.1:
     dependencies:
       to-regex-range: 5.0.1
 
+  find-my-way-ts@0.1.5: {}
+
   find-up@5.0.0:
     dependencies:
       locate-path: 6.0.0
@@ -7291,6 +7481,8 @@ snapshots:
 
   lines-and-columns@1.2.4: {}
 
+  load-script@1.0.0: {}
+
   locate-character@3.0.0: {}
 
   locate-path@6.0.0:
@@ -7423,6 +7615,8 @@ snapshots:
     dependencies:
       '@types/mdast': 4.0.4
 
+  memoize-one@5.2.1: {}
+
   mensch@0.3.4: {}
 
   merge2@1.4.1: {}
@@ -7639,6 +7833,8 @@ snapshots:
 
   ms@2.1.3: {}
 
+  multipasta@0.2.5: {}
+
   mz@2.7.0:
     dependencies:
       any-promise: 1.3.0
@@ -7863,6 +8059,8 @@ snapshots:
 
   punycode@2.3.1: {}
 
+  pure-rand@6.1.0: {}
+
   queue-microtask@1.2.3: {}
 
   raf@3.4.1:
@@ -7896,6 +8094,8 @@ snapshots:
       react: 18.3.1
       scheduler: 0.23.2
 
+  react-fast-compare@3.2.2: {}
+
   react-is@16.13.1: {}
 
   react-lite-youtube-embed@2.4.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
@@ -7903,6 +8103,15 @@ snapshots:
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
 
+  react-player@2.16.0(react@18.3.1):
+    dependencies:
+      deepmerge: 4.3.1
+      load-script: 1.0.0
+      memoize-one: 5.2.1
+      prop-types: 15.8.1
+      react: 18.3.1
+      react-fast-compare: 3.2.2
+
   react-remove-scroll-bar@2.3.6(@types/react@18.3.12)(react@18.3.1):
     dependencies:
       react: 18.3.1
@@ -8186,6 +8395,11 @@ snapshots:
 
   slick@1.12.2: {}
 
+  sonner@1.7.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
   sort-object-keys@1.1.3: {}
 
   sort-package-json@2.10.1:
@@ -8201,6 +8415,8 @@ snapshots:
 
   source-map-js@1.2.1: {}
 
+  sqids@0.3.0: {}
+
   sswr@2.1.0(svelte@5.2.0):
     dependencies:
       svelte: 5.2.0
@@ -8502,6 +8718,16 @@ snapshots:
       escalade: 3.2.0
       picocolors: 1.1.0
 
+  uploadthing@7.2.0(next@15.0.3(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(tailwindcss@3.4.14):
+    dependencies:
+      '@effect/platform': 0.69.8(effect@3.10.3)
+      '@uploadthing/mime-types': 0.3.1
+      '@uploadthing/shared': 7.1.0
+      effect: 3.10.3
+    optionalDependencies:
+      next: 15.0.3(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      tailwindcss: 3.4.14
+
   uri-js@4.4.1:
     dependencies:
       punycode: 2.3.1
@@ -8529,6 +8755,11 @@ snapshots:
       dequal: 2.0.3
       react: 18.3.1
 
+  use-file-picker@2.1.2(react@18.3.1):
+    dependencies:
+      file-selector: 0.2.4
+      react: 18.3.1
+
   use-isomorphic-layout-effect@1.1.2(@types/react@18.3.12)(react@18.3.1):
     dependencies:
       react: 18.3.1
diff --git a/templates/plate-playground-template/src/app/api/uploadthing/core.ts b/templates/plate-playground-template/src/app/api/uploadthing/core.ts
new file mode 100644
index 0000000000..3233c7cb10
--- /dev/null
+++ b/templates/plate-playground-template/src/app/api/uploadthing/core.ts
@@ -0,0 +1,26 @@
+import type { FileRouter } from 'uploadthing/next';
+
+import { createUploadthing } from 'uploadthing/next';
+
+const f = createUploadthing();
+
+// FileRouter for your app, can contain multiple FileRoutes
+export const ourFileRouter = {
+  // Define as many FileRoutes as you like, each with a unique routeSlug
+  imageUploader: f(['image', 'text', 'blob', 'pdf', 'video', 'audio'])
+    // Set permissions and file types for this FileRoute
+    .middleware(async ({ req }) => {
+      // This code runs on your server before upload
+
+      // Whatever is returned here is accessible in onUploadComplete as `metadata`
+      return {};
+    })
+    .onUploadComplete(({ file, metadata }) => {
+      // This code RUNS ON YOUR SERVER after upload
+
+      // !!! Whatever is returned here is sent to the clientside `onClientUploadComplete` callback
+      return { file };
+    }),
+} satisfies FileRouter;
+
+export type OurFileRouter = typeof ourFileRouter;
diff --git a/templates/plate-playground-template/src/app/api/uploadthing/route.ts b/templates/plate-playground-template/src/app/api/uploadthing/route.ts
new file mode 100644
index 0000000000..379d038d96
--- /dev/null
+++ b/templates/plate-playground-template/src/app/api/uploadthing/route.ts
@@ -0,0 +1,11 @@
+import { createRouteHandler } from 'uploadthing/next';
+
+import { ourFileRouter } from './core';
+
+// Export routes for Next App Router
+export const { GET, POST } = createRouteHandler({
+  router: ourFileRouter,
+
+  // Apply an (optional) custom config:
+  // config: { ... },
+});
diff --git a/templates/plate-playground-template/src/components/editor/plugins/block-selection-plugins.ts b/templates/plate-playground-template/src/components/editor/plugins/block-selection-plugins.ts
index ab35e38f68..35edf1fd42 100644
--- a/templates/plate-playground-template/src/components/editor/plugins/block-selection-plugins.ts
+++ b/templates/plate-playground-template/src/components/editor/plugins/block-selection-plugins.ts
@@ -9,14 +9,6 @@ export const blockSelectionPlugins = [
       excludePlugins: ['table', 'code_line', 'column_group', 'column'],
     },
     options: {
-      areaOptions: {
-        behaviour: {
-          scrolling: {
-            speedDivider: 1.5,
-          },
-          startThreshold: 4,
-        },
-      },
       enableContextMenu: true,
     },
   }),
diff --git a/templates/plate-playground-template/src/components/editor/plugins/dnd-plugins.tsx b/templates/plate-playground-template/src/components/editor/plugins/dnd-plugins.tsx
index 6b0db41ba1..f5569c0f58 100644
--- a/templates/plate-playground-template/src/components/editor/plugins/dnd-plugins.tsx
+++ b/templates/plate-playground-template/src/components/editor/plugins/dnd-plugins.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { DndPlugin } from '@udecode/plate-dnd';
-import { ImagePlugin } from '@udecode/plate-media/react';
+import { PlaceholderPlugin } from '@udecode/plate-media/react';
 import { NodeIdPlugin } from '@udecode/plate-node-id';
 
 export const dndPlugins = [
@@ -11,11 +11,8 @@ export const dndPlugins = [
       enableScroller: true,
       onDropFiles: ({ dragItem, editor, target }) => {
         editor
-          .getTransforms(ImagePlugin)
-          .insert.imageFromFiles(dragItem.files, {
-            at: target,
-            nextBlock: false,
-          });
+          .getTransforms(PlaceholderPlugin)
+          .insert.media(dragItem.files, { at: target, nextBlock: false });
       },
     },
   }),
diff --git a/templates/plate-playground-template/src/components/editor/plugins/media-plugins.tsx b/templates/plate-playground-template/src/components/editor/plugins/media-plugins.tsx
index 36fbf3b4e6..2bd9e43722 100644
--- a/templates/plate-playground-template/src/components/editor/plugins/media-plugins.tsx
+++ b/templates/plate-playground-template/src/components/editor/plugins/media-plugins.tsx
@@ -11,9 +11,9 @@ import {
 } from '@udecode/plate-media/react';
 
 import { ImagePreview } from '@/components/plate-ui/image-preview';
+import { MediaUploadToast } from '@/components/plate-ui/media-upload-toast';
 
 export const mediaPlugins = [
-  PlaceholderPlugin,
   ImagePlugin.extend({
     options: {
       disableUploadInsert: true,
@@ -27,4 +27,12 @@ export const mediaPlugins = [
   CaptionPlugin.configure({
     options: { plugins: [ImagePlugin, MediaEmbedPlugin] },
   }),
+  PlaceholderPlugin.configure({
+    options: {
+      disableEmptyPlaceholder: true,
+    },
+    render: {
+      afterEditable: () => <MediaUploadToast />,
+    },
+  }),
 ] as const;
diff --git a/templates/plate-playground-template/src/components/editor/use-create-editor.tsx b/templates/plate-playground-template/src/components/editor/use-create-editor.tsx
index bcfbedccd1..d9c3cf6737 100644
--- a/templates/plate-playground-template/src/components/editor/use-create-editor.tsx
+++ b/templates/plate-playground-template/src/components/editor/use-create-editor.tsx
@@ -31,7 +31,14 @@ import { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';
 import { KbdPlugin } from '@udecode/plate-kbd/react';
 import { ColumnItemPlugin, ColumnPlugin } from '@udecode/plate-layout/react';
 import { LinkPlugin } from '@udecode/plate-link/react';
-import { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';
+import {
+  AudioPlugin,
+  FilePlugin,
+  ImagePlugin,
+  MediaEmbedPlugin,
+  PlaceholderPlugin,
+  VideoPlugin,
+} from '@udecode/plate-media/react';
 import {
   MentionInputPlugin,
   MentionPlugin,
@@ -83,12 +90,18 @@ import { TocElement } from '@/components/plate-ui/toc-element';
 import { ToggleElement } from '@/components/plate-ui/toggle-element';
 import { withDraggables } from '@/components/plate-ui/with-draggables';
 
+import { MediaAudioElement } from '../plate-ui/media-audio-element';
+import { MediaFileElement } from '../plate-ui/media-file-element';
+import { MediaPlaceholderElement } from '../plate-ui/media-placeholder-element';
+import { MediaVideoElement } from '../plate-ui/media-video-element';
+
 export const useCreateEditor = () => {
   return usePlateEditor({
     override: {
       components: withDraggables(
         withPlaceholders({
           [AIPlugin.key]: AILeaf,
+          [AudioPlugin.key]: MediaAudioElement,
           [BlockquotePlugin.key]: BlockquoteElement,
           [BoldPlugin.key]: withProps(PlateLeaf, { as: 'strong' }),
           [CodeBlockPlugin.key]: CodeBlockElement,
@@ -101,6 +114,7 @@ export const useCreateEditor = () => {
           [DatePlugin.key]: DateElement,
           [EmojiInputPlugin.key]: EmojiInputElement,
           [ExcalidrawPlugin.key]: ExcalidrawElement,
+          [FilePlugin.key]: MediaFileElement,
           [HEADING_KEYS.h1]: withProps(HeadingElement, { variant: 'h1' }),
           [HEADING_KEYS.h2]: withProps(HeadingElement, { variant: 'h2' }),
           [HEADING_KEYS.h3]: withProps(HeadingElement, { variant: 'h3' }),
@@ -117,6 +131,7 @@ export const useCreateEditor = () => {
           [MentionInputPlugin.key]: MentionInputElement,
           [MentionPlugin.key]: MentionElement,
           [ParagraphPlugin.key]: ParagraphElement,
+          [PlaceholderPlugin.key]: MediaPlaceholderElement,
           [SlashInputPlugin.key]: SlashInputElement,
           [StrikethroughPlugin.key]: withProps(PlateLeaf, { as: 's' }),
           [SubscriptPlugin.key]: withProps(PlateLeaf, { as: 'sub' }),
@@ -128,6 +143,7 @@ export const useCreateEditor = () => {
           [TocPlugin.key]: TocElement,
           [TogglePlugin.key]: ToggleElement,
           [UnderlinePlugin.key]: withProps(PlateLeaf, { as: 'u' }),
+          [VideoPlugin.key]: MediaVideoElement,
         })
       ),
     },
diff --git a/templates/plate-playground-template/src/components/plate-ui/alert-dialog.tsx b/templates/plate-playground-template/src/components/plate-ui/alert-dialog.tsx
new file mode 100644
index 0000000000..fd3f90a273
--- /dev/null
+++ b/templates/plate-playground-template/src/components/plate-ui/alert-dialog.tsx
@@ -0,0 +1,142 @@
+'use client';
+
+import * as React from 'react';
+
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+import { cn } from '@udecode/cn';
+
+import { buttonVariants } from './button';
+
+const AlertDialog = AlertDialogPrimitive.Root;
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    className={cn(
+      'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0  fixed inset-0 z-50 bg-black/80',
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+));
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
+
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg',
+        className
+      )}
+      {...props}
+    />
+  </AlertDialogPortal>
+));
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
+
+const AlertDialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col space-y-2 text-center sm:text-left',
+      className
+    )}
+    {...props}
+  />
+);
+AlertDialogHeader.displayName = 'AlertDialogHeader';
+
+const AlertDialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
+      className
+    )}
+    {...props}
+  />
+);
+AlertDialogFooter.displayName = 'AlertDialogFooter';
+
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title
+    ref={ref}
+    className={cn('text-lg font-semibold', className)}
+    {...props}
+  />
+));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
+
+const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn('text-muted-foreground text-sm', className)}
+    {...props}
+  />
+));
+AlertDialogDescription.displayName =
+  AlertDialogPrimitive.Description.displayName;
+
+const AlertDialogAction = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action
+    ref={ref}
+    className={cn(buttonVariants(), className)}
+    {...props}
+  />
+));
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
+
+const AlertDialogCancel = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(
+      buttonVariants({ variant: 'outline' }),
+      'mt-2 sm:mt-0',
+      className
+    )}
+    {...props}
+  />
+));
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
+
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+};
diff --git a/templates/plate-playground-template/src/components/plate-ui/block-selection.tsx b/templates/plate-playground-template/src/components/plate-ui/block-selection.tsx
index b0562fe761..7c7c00517a 100644
--- a/templates/plate-playground-template/src/components/plate-ui/block-selection.tsx
+++ b/templates/plate-playground-template/src/components/plate-ui/block-selection.tsx
@@ -5,7 +5,7 @@ import { useBlockSelected } from '@udecode/plate-selection/react';
 import { type VariantProps, cva } from 'class-variance-authority';
 
 export const blockSelectionVariants = cva(
-  'pointer-events-none absolute inset-0 z-[1] bg-brand/[.13] transition-opacity',
+  'bg-brand/[.13] pointer-events-none absolute inset-0 z-[1] transition-opacity',
   {
     defaultVariants: {
       active: true,
diff --git a/templates/plate-playground-template/src/components/plate-ui/fixed-toolbar-buttons.tsx b/templates/plate-playground-template/src/components/plate-ui/fixed-toolbar-buttons.tsx
index 19f8f00f93..aaae0beaad 100644
--- a/templates/plate-playground-template/src/components/plate-ui/fixed-toolbar-buttons.tsx
+++ b/templates/plate-playground-template/src/components/plate-ui/fixed-toolbar-buttons.tsx
@@ -15,7 +15,12 @@ import {
   FontColorPlugin,
 } from '@udecode/plate-font/react';
 import { ListStyleType } from '@udecode/plate-indent-list';
-import { ImagePlugin } from '@udecode/plate-media/react';
+import {
+  AudioPlugin,
+  FilePlugin,
+  ImagePlugin,
+  VideoPlugin,
+} from '@udecode/plate-media/react';
 import {
   BaselineIcon,
   BoldIcon,
@@ -127,10 +132,16 @@ export function FixedToolbarButtons() {
             <IndentToolbarButton />
           </ToolbarGroup>
 
+          <ToolbarGroup>
+            <MediaToolbarButton nodeType={ImagePlugin.key} />
+            <MediaToolbarButton nodeType={VideoPlugin.key} />
+            <MediaToolbarButton nodeType={AudioPlugin.key} />
+            <MediaToolbarButton nodeType={FilePlugin.key} />
+          </ToolbarGroup>
+
           <ToolbarGroup>
             <LinkToolbarButton />
             <ToggleToolbarButton />
-            <MediaToolbarButton nodeType={ImagePlugin.key} />
             <TableDropdownMenu />
             <EmojiDropdownMenu />
             <MoreDropdownMenu />
diff --git a/templates/plate-playground-template/src/components/plate-ui/image-element.tsx b/templates/plate-playground-template/src/components/plate-ui/image-element.tsx
index d5915ce915..34e3f8930d 100644
--- a/templates/plate-playground-template/src/components/plate-ui/image-element.tsx
+++ b/templates/plate-playground-template/src/components/plate-ui/image-element.tsx
@@ -3,7 +3,8 @@
 import React from 'react';
 
 import { cn, withRef } from '@udecode/cn';
-import { withHOC } from '@udecode/plate-common/react';
+import { useEditorRef, withHOC } from '@udecode/plate-common/react';
+import { useDraggable, useDraggableState } from '@udecode/plate-dnd';
 import { Image, ImagePlugin, useMediaState } from '@udecode/plate-media/react';
 import { ResizableProvider, useResizableStore } from '@udecode/plate-resizable';
 
@@ -20,10 +21,19 @@ export const ImageElement = withHOC(
   ResizableProvider,
   withRef<typeof PlateElement>(
     ({ children, className, nodeProps, ...props }, ref) => {
+      const editor = useEditorRef();
+
       const { align = 'center', focused, readOnly, selected } = useMediaState();
 
       const width = useResizableStore().get.width();
 
+      const state = editor.plugins.dnd
+        ? useDraggableState({ element: props.element })
+        : ({} as any);
+
+      const { isDragging } = state;
+      const { handleRef } = useDraggable(state);
+
       return (
         <MediaPopover plugin={ImagePlugin}>
           <PlateElement
@@ -44,10 +54,12 @@ export const ImageElement = withHOC(
                   options={{ direction: 'left' }}
                 />
                 <Image
+                  ref={handleRef}
                   className={cn(
                     'block w-full max-w-full cursor-pointer object-cover px-0',
                     'rounded-sm',
-                    focused && selected && 'ring-2 ring-ring ring-offset-2'
+                    focused && selected && 'ring-ring ring-2 ring-offset-2',
+                    isDragging && 'opacity-50'
                   )}
                   alt=""
                   {...nodeProps}
diff --git a/templates/plate-playground-template/src/components/plate-ui/media-audio-element.tsx b/templates/plate-playground-template/src/components/plate-ui/media-audio-element.tsx
new file mode 100644
index 0000000000..fa0b95a48c
--- /dev/null
+++ b/templates/plate-playground-template/src/components/plate-ui/media-audio-element.tsx
@@ -0,0 +1,44 @@
+'use client';
+
+import React from 'react';
+
+import { cn, withRef } from '@udecode/cn';
+import { withHOC } from '@udecode/plate-common/react';
+import { useMediaState } from '@udecode/plate-media/react';
+import { ResizableProvider } from '@udecode/plate-resizable';
+
+import { Caption, CaptionTextarea } from './caption';
+import { PlateElement } from './plate-element';
+
+export const MediaAudioElement = withHOC(
+  ResizableProvider,
+  withRef<typeof PlateElement>(
+    ({ children, className, nodeProps, ...props }, ref) => {
+      const { align = 'center', readOnly, unsafeUrl } = useMediaState();
+
+      return (
+        <PlateElement
+          ref={ref}
+          className={cn('relative mb-1', className)}
+          {...props}
+        >
+          <figure className="group relative" contentEditable={false}>
+            <div className="h-16">
+              {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
+              <audio className="size-full" src={unsafeUrl} controls />
+            </div>
+
+            <Caption style={{ width: '100%' }} align={align}>
+              <CaptionTextarea
+                className="h-20"
+                readOnly={readOnly}
+                placeholder="Write a caption..."
+              />
+            </Caption>
+          </figure>
+          {children}
+        </PlateElement>
+      );
+    }
+  )
+);
diff --git a/templates/plate-playground-template/src/components/plate-ui/media-file-element.tsx b/templates/plate-playground-template/src/components/plate-ui/media-file-element.tsx
new file mode 100644
index 0000000000..4e08403e14
--- /dev/null
+++ b/templates/plate-playground-template/src/components/plate-ui/media-file-element.tsx
@@ -0,0 +1,62 @@
+'use client';
+
+import React from 'react';
+
+import { cn, withRef } from '@udecode/cn';
+import { withHOC } from '@udecode/plate-common/react';
+import { useMediaState } from '@udecode/plate-media/react';
+import { ResizableProvider } from '@udecode/plate-resizable';
+import { FileUp } from 'lucide-react';
+import { useReadOnly } from 'slate-react';
+
+import { Caption, CaptionTextarea } from './caption';
+import { PlateElement } from './plate-element';
+
+export const MediaFileElement = withHOC(
+  ResizableProvider,
+  withRef<typeof PlateElement>(
+    ({ children, className, nodeProps, ...props }, ref) => {
+      const readOnly = useReadOnly();
+
+      const { name, unsafeUrl } = useMediaState();
+
+      const onDownload = () => {
+        window.open(unsafeUrl);
+      };
+
+      return (
+        <PlateElement
+          ref={ref}
+          className={cn('relative my-px rounded-sm', className)}
+          {...props}
+        >
+          {/* eslint-disable-next-line jsx-a11y/interactive-supports-focus */}
+          <div
+            className="hover:bg-muted group relative m-0 flex cursor-pointer items-center rounded px-0.5 py-[3px]"
+            onClick={onDownload}
+            contentEditable={false}
+            role="button"
+          >
+            <div className="flex items-center gap-1 p-1">
+              <FileUp className="size-5" />
+
+              <div>{name}</div>
+
+              {/* TODO: add size */}
+              {/* <div className="text-muted-foreground">{element.size}</div> */}
+            </div>
+
+            <Caption align="left">
+              <CaptionTextarea
+                className="text-left"
+                readOnly={readOnly}
+                placeholder="Write a caption..."
+              />
+            </Caption>
+          </div>
+          {children}
+        </PlateElement>
+      );
+    }
+  )
+);
diff --git a/templates/plate-playground-template/src/components/plate-ui/media-placeholder-element.tsx b/templates/plate-playground-template/src/components/plate-ui/media-placeholder-element.tsx
new file mode 100644
index 0000000000..8f2eb722d9
--- /dev/null
+++ b/templates/plate-playground-template/src/components/plate-ui/media-placeholder-element.tsx
@@ -0,0 +1,272 @@
+'use client';
+
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import type { ReactNode } from 'react';
+
+import type { TPlaceholderElement } from '@udecode/plate-media';
+
+import { cn } from '@udecode/cn';
+import {
+  insertNodes,
+  removeNodes,
+  withoutSavingHistory,
+} from '@udecode/plate-common';
+import {
+  findNodePath,
+  useEditorPlugin,
+  withHOC,
+  withRef,
+} from '@udecode/plate-common/react';
+import {
+  AudioPlugin,
+  FilePlugin,
+  ImagePlugin,
+  PlaceholderPlugin,
+  PlaceholderProvider,
+  VideoPlugin,
+  updateUploadHistory,
+} from '@udecode/plate-media/react';
+import { AudioLines, FileUp, Film, ImageIcon } from 'lucide-react';
+import { useFilePicker } from 'use-file-picker';
+
+import { useUploadFile } from '@/lib/uploadthing';
+
+import { PlateElement } from './plate-element';
+import { Spinner } from './spinner';
+
+const CONTENT: Record<
+  string,
+  {
+    accept: string[];
+    content: ReactNode;
+    icon: ReactNode;
+  }
+> = {
+  [AudioPlugin.key]: {
+    accept: ['audio/*'],
+    content: 'Add an audio file',
+    icon: <AudioLines />,
+  },
+  [FilePlugin.key]: {
+    accept: ['*'],
+    content: 'Add a file',
+    icon: <FileUp />,
+  },
+  [ImagePlugin.key]: {
+    accept: ['image/*'],
+    content: 'Add an image',
+    icon: <ImageIcon />,
+  },
+  [VideoPlugin.key]: {
+    accept: ['video/*'],
+    content: 'Add a video',
+    icon: <Film />,
+  },
+};
+
+export const MediaPlaceholderElement = withHOC(
+  PlaceholderProvider,
+  withRef<typeof PlateElement>(
+    ({ children, className, editor, nodeProps, ...props }, ref) => {
+      const element = props.element as TPlaceholderElement;
+
+      const { api } = useEditorPlugin(PlaceholderPlugin);
+
+      const { isUploading, progress, uploadFile, uploadedFile, uploadingFile } =
+        useUploadFile('imageUploader');
+
+      const loading = isUploading && uploadingFile;
+
+      const currentContent = CONTENT[element.mediaType];
+
+      const isImage = element.mediaType === ImagePlugin.key;
+
+      const imageRef = useRef<HTMLImageElement>(null);
+
+      const { openFilePicker } = useFilePicker({
+        accept: currentContent.accept,
+        multiple: true,
+        onFilesSelected: ({ plainFiles: updatedFiles }) => {
+          const firstFile = updatedFiles[0];
+          const restFiles = updatedFiles.slice(1);
+
+          replaceCurrentPlaceholder(firstFile);
+
+          restFiles.length > 0 && (editor as any).tf.insert.media(restFiles);
+        },
+      });
+
+      const replaceCurrentPlaceholder = useCallback(
+        (file: File) => {
+          void uploadFile(file);
+          api.placeholder.addUploadingFile(element.id as string, file);
+        },
+        [api.placeholder, element.id, uploadFile]
+      );
+
+      useEffect(() => {
+        if (!uploadedFile) return;
+
+        const path = findNodePath(editor, element);
+
+        withoutSavingHistory(editor, () => {
+          removeNodes(editor, { at: path });
+
+          const node = {
+            children: [{ text: '' }],
+            initialHeight: imageRef.current?.height,
+            initialWidth: imageRef.current?.width,
+            isUpload: true,
+            name: element.mediaType === FilePlugin.key ? uploadedFile.name : '',
+            placeholderId: element.id as string,
+            type: element.mediaType!,
+            url: uploadedFile.url,
+          };
+
+          insertNodes(editor, node, { at: path });
+
+          updateUploadHistory(editor, node);
+        });
+
+        api.placeholder.removeUploadingFile(element.id as string);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+      }, [uploadedFile, element.id]);
+
+      // React dev mode will call useEffect twice
+      const isReplaced = useRef(false);
+      /** Paste and drop */
+      useEffect(() => {
+        if (isReplaced.current) return;
+
+        isReplaced.current = true;
+        const currentFiles = api.placeholder.getUploadingFile(
+          element.id as string
+        );
+
+        if (!currentFiles) return;
+
+        replaceCurrentPlaceholder(currentFiles);
+
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+      }, [isReplaced]);
+
+      return (
+        <PlateElement
+          ref={ref}
+          className={cn('relative my-1', className)}
+          editor={editor}
+          {...props}
+        >
+          {(!loading || !isImage) && (
+            <div
+              className={cn(
+                'bg-muted hover:bg-primary/10 flex cursor-pointer select-none items-center rounded-sm p-3 pr-9'
+              )}
+              onClick={() => !loading && openFilePicker()}
+              contentEditable={false}
+            >
+              <div className="text-muted-foreground/80 relative mr-3 flex [&_svg]:size-6">
+                {currentContent.icon}
+              </div>
+              <div className="text-muted-foreground whitespace-nowrap text-sm">
+                <div>
+                  {loading ? uploadingFile?.name : currentContent.content}
+                </div>
+
+                {loading && !isImage && (
+                  <div className="mt-1 flex items-center gap-1.5">
+                    <div>{formatBytes(uploadingFile?.size ?? 0)}</div>
+                    <div>–</div>
+                    <div className="flex items-center">
+                      <Spinner className="mr-1 size-3.5" />
+                      {progress ?? 0}%
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+
+          {isImage && loading && (
+            <ImageProgress
+              file={uploadingFile}
+              imageRef={imageRef}
+              progress={progress}
+            />
+          )}
+
+          {children}
+        </PlateElement>
+      );
+    }
+  )
+);
+
+export function ImageProgress({
+  className,
+  file,
+  imageRef,
+  progress = 0,
+}: {
+  file: File;
+  className?: string;
+  imageRef?: React.RefObject<HTMLImageElement>;
+  progress?: number;
+}) {
+  const [objectUrl, setObjectUrl] = useState<string | null>(null);
+
+  useEffect(() => {
+    const url = URL.createObjectURL(file);
+    setObjectUrl(url);
+
+    return () => {
+      URL.revokeObjectURL(url);
+    };
+  }, [file]);
+
+  if (!objectUrl) {
+    return null;
+  }
+
+  return (
+    <div className={cn('relative', className)} contentEditable={false}>
+      <img
+        ref={imageRef}
+        className="h-auto w-full rounded-sm object-cover"
+        alt={file.name}
+        src={objectUrl}
+      />
+      {progress < 100 && (
+        <div className="absolute bottom-1 right-1 flex items-center space-x-2 rounded-full bg-black/50 px-1 py-0.5">
+          <Spinner />
+          <span className="text-xs font-medium text-white">
+            {Math.round(progress)}%
+          </span>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function formatBytes(
+  bytes: number,
+  opts: {
+    decimals?: number;
+    sizeType?: 'accurate' | 'normal';
+  } = {}
+) {
+  const { decimals = 0, sizeType = 'normal' } = opts;
+
+  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+  const accurateSizes = ['Bytes', 'KiB', 'MiB', 'GiB', 'TiB'];
+
+  if (bytes === 0) return '0 Byte';
+
+  const i = Math.floor(Math.log(bytes) / Math.log(1024));
+
+  return `${(bytes / Math.pow(1024, i)).toFixed(decimals)} ${
+    sizeType === 'accurate'
+      ? (accurateSizes[i] ?? 'Bytest')
+      : (sizes[i] ?? 'Bytes')
+  }`;
+}
diff --git a/templates/plate-playground-template/src/components/plate-ui/media-toolbar-button.tsx b/templates/plate-playground-template/src/components/plate-ui/media-toolbar-button.tsx
index af5a051daf..38cd80214c 100644
--- a/templates/plate-playground-template/src/components/plate-ui/media-toolbar-button.tsx
+++ b/templates/plate-playground-template/src/components/plate-ui/media-toolbar-button.tsx
@@ -1,28 +1,201 @@
 'use client';
 
-import React from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 
-import { withRef } from '@udecode/cn';
+import type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';
+
+import { cn } from '@udecode/cn';
+import { insertNodes } from '@udecode/plate-common';
+import { focusEditor, useEditorRef } from '@udecode/plate-common/react';
 import {
-  type ImagePlugin,
-  type MediaEmbedPlugin,
-  useMediaToolbarButton,
+  AudioPlugin,
+  FilePlugin,
+  ImagePlugin,
+  VideoPlugin,
 } from '@udecode/plate-media/react';
-import { ImageIcon } from 'lucide-react';
-
-import { ToolbarButton } from './toolbar';
+import {
+  AudioLinesIcon,
+  FileUpIcon,
+  FilmIcon,
+  ImageIcon,
+  LinkIcon,
+} from 'lucide-react';
+import { useFilePicker } from 'use-file-picker';
 
-export const MediaToolbarButton = withRef<
-  typeof ToolbarButton,
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from './alert-dialog';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+  useOpenState,
+} from './dropdown-menu';
+import { Input } from './input';
+import {
+  ToolbarSplitButton,
+  ToolbarSplitButtonPrimary,
+  ToolbarSplitButtonSecondary,
+} from './toolbar';
+const MEDIA_CONFIG: Record<
+  string,
   {
-    nodeType?: typeof ImagePlugin.key | typeof MediaEmbedPlugin.key;
+    accept: string[];
+    icon: React.ReactNode;
+    title: string;
+    tooltip: string;
   }
->(({ nodeType, ...rest }, ref) => {
-  const { props } = useMediaToolbarButton({ nodeType });
+> = {
+  [AudioPlugin.key]: {
+    accept: ['audio/*'],
+    icon: <AudioLinesIcon className="size-4" />,
+    title: 'Insert Audio',
+    tooltip: 'Audio',
+  },
+  [FilePlugin.key]: {
+    accept: ['*'],
+    icon: <FileUpIcon className="size-4" />,
+    title: 'Insert File',
+    tooltip: 'File',
+  },
+  [ImagePlugin.key]: {
+    accept: ['image/*'],
+    icon: <ImageIcon className="size-4" />,
+    title: 'Insert Image',
+    tooltip: 'Image',
+  },
+  [VideoPlugin.key]: {
+    accept: ['video/*'],
+    icon: <FilmIcon className="size-4" />,
+    title: 'Insert Video',
+    tooltip: 'Video',
+  },
+};
+
+export function MediaToolbarButton({
+  children,
+  nodeType,
+  ...props
+}: DropdownMenuProps & { nodeType: string }) {
+  const currentConfig = MEDIA_CONFIG[nodeType];
+
+  const editor = useEditorRef();
+  const openState = useOpenState();
+
+  const { openFilePicker } = useFilePicker({
+    accept: currentConfig.accept,
+    multiple: true,
+    onFilesSelected: ({ plainFiles: updatedFiles }) => {
+      (editor as any).tf.insert.media(updatedFiles);
+    },
+  });
+
+  const [dialogOpen, setDialogOpen] = useState(false);
+
+  const [url, setUrl] = useState('');
+
+  const embedMedia = useCallback(() => {
+    setDialogOpen(false);
+    insertNodes(editor, {
+      children: [{ text: '' }],
+      name: nodeType === FilePlugin.key ? url.split('/').pop() : undefined,
+      type: nodeType,
+      url,
+    });
+  }, [editor, nodeType, url]);
+
+  useEffect(() => {
+    if (!dialogOpen) {
+      focusEditor(editor);
+      setUrl('');
+    }
+  }, [dialogOpen, editor]);
 
   return (
-    <ToolbarButton ref={ref} {...props} {...rest}>
-      <ImageIcon />
-    </ToolbarButton>
+    <>
+      <DropdownMenu {...openState} modal={false} {...props}>
+        <ToolbarSplitButton pressed={openState.open}>
+          <ToolbarSplitButtonPrimary
+            onClick={() => openFilePicker()}
+            onMouseDown={(e) => e.preventDefault()}
+            tooltip={currentConfig.tooltip}
+          >
+            {currentConfig.icon}
+          </ToolbarSplitButtonPrimary>
+
+          <DropdownMenuTrigger asChild>
+            <ToolbarSplitButtonSecondary />
+          </DropdownMenuTrigger>
+        </ToolbarSplitButton>
+
+        <DropdownMenuContent
+          className={cn('min-w-0 data-[state=closed]:hidden')}
+          align="start"
+        >
+          <DropdownMenuRadioGroup>
+            <DropdownMenuRadioItem
+              value="upload"
+              onSelect={() => openFilePicker()}
+              hideIcon
+            >
+              <div className="flex items-center gap-2">
+                {currentConfig.icon}
+                <span className="text-sm">Upload from computer</span>
+              </div>
+            </DropdownMenuRadioItem>
+            <DropdownMenuRadioItem
+              value="url"
+              onSelect={() => setDialogOpen(true)}
+              hideIcon
+            >
+              <div className="flex items-center gap-2">
+                <LinkIcon />
+                <span className="text-sm">Insert via URL</span>
+              </div>
+            </DropdownMenuRadioItem>
+          </DropdownMenuRadioGroup>
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      <AlertDialog open={dialogOpen} onOpenChange={setDialogOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>{currentConfig.title}</AlertDialogTitle>
+            <AlertDialogDescription className="group relative flex w-full items-center gap-2">
+              <label
+                className="text-muted-foreground/70 group-focus-within:text-foreground has-[+input:not(:placeholder-shown)]:text-foreground absolute top-1/2 block -translate-y-1/2 cursor-text px-1 text-sm 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 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"
+                htmlFor="input-32"
+              >
+                <span className="bg-background inline-flex px-2">URL</span>
+              </label>
+              <Input
+                id="input-32"
+                value={url}
+                onChange={(e) => setUrl(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter') embedMedia();
+                }}
+                placeholder=""
+                type="email"
+                autoFocus
+              />
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction onClick={embedMedia}>Accept</AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
   );
-});
+}
diff --git a/templates/plate-playground-template/src/components/plate-ui/media-upload-toast.tsx b/templates/plate-playground-template/src/components/plate-ui/media-upload-toast.tsx
new file mode 100644
index 0000000000..ce39cb2e79
--- /dev/null
+++ b/templates/plate-playground-template/src/components/plate-ui/media-upload-toast.tsx
@@ -0,0 +1,69 @@
+import { useEffect } from 'react';
+
+import { useEditorRef } from '@udecode/plate-common/react';
+import { PlaceholderPlugin, UploadErrorCode } from '@udecode/plate-media/react';
+import { toast } from 'sonner';
+
+export const useUploadErrorToast = () => {
+  const editor = useEditorRef();
+
+  const uploadError = editor.useOption(PlaceholderPlugin, 'error');
+
+  useEffect(() => {
+    if (!uploadError) return;
+
+    const { code, data } = uploadError;
+
+    switch (code) {
+      case UploadErrorCode.INVALID_FILE_SIZE: {
+        toast.error(
+          `The size of files ${data.files
+            .map((f) => f.name)
+            .join(', ')} is invalid`
+        );
+
+        break;
+      }
+      case UploadErrorCode.INVALID_FILE_TYPE: {
+        toast.error(
+          `The type of files ${data.files
+            .map((f) => f.name)
+            .join(', ')} is invalid`
+        );
+
+        break;
+      }
+      case UploadErrorCode.TOO_LARGE: {
+        toast.error(
+          `The size of files ${data.files
+            .map((f) => f.name)
+            .join(', ')} is too large than ${data.maxFileSize}`
+        );
+
+        break;
+      }
+      case UploadErrorCode.TOO_LESS_FILES: {
+        toast.error(
+          `The mini um number of files is ${data.minFileCount} for ${data.fileType}`
+        );
+
+        break;
+      }
+      case UploadErrorCode.TOO_MANY_FILES: {
+        toast.error(
+          `The maximum number of files is ${data.maxFileCount} ${
+            data.fileType ? `for ${data.fileType}` : ''
+          }`
+        );
+
+        break;
+      }
+    }
+  }, [uploadError]);
+};
+
+export const MediaUploadToast = () => {
+  useUploadErrorToast();
+
+  return null;
+};
diff --git a/templates/plate-playground-template/src/components/plate-ui/media-video-element.tsx b/templates/plate-playground-template/src/components/plate-ui/media-video-element.tsx
new file mode 100644
index 0000000000..6108bacecb
--- /dev/null
+++ b/templates/plate-playground-template/src/components/plate-ui/media-video-element.tsx
@@ -0,0 +1,129 @@
+'use client';
+
+import React from 'react';
+import LiteYouTubeEmbed from 'react-lite-youtube-embed';
+import ReactPlayer from 'react-player';
+
+import { cn, withRef } from '@udecode/cn';
+import { useEditorMounted, withHOC } from '@udecode/plate-common/react';
+import { useDraggable, useDraggableState } from '@udecode/plate-dnd';
+import { parseTwitterUrl, parseVideoUrl } from '@udecode/plate-media';
+import { useMediaState } from '@udecode/plate-media/react';
+import { ResizableProvider, useResizableStore } from '@udecode/plate-resizable';
+
+import { Caption, CaptionTextarea } from './caption';
+import { PlateElement } from './plate-element';
+import {
+  Resizable,
+  ResizeHandle,
+  mediaResizeHandleVariants,
+} from './resizable';
+
+export const MediaVideoElement = withHOC(
+  ResizableProvider,
+  withRef<typeof PlateElement>(
+    ({ children, className, nodeProps, ...props }, ref) => {
+      const {
+        align = 'center',
+        embed,
+        isUpload,
+        isYoutube,
+        readOnly,
+        unsafeUrl,
+      } = useMediaState({
+        urlParsers: [parseTwitterUrl, parseVideoUrl],
+      });
+      const width = useResizableStore().get.width();
+
+      const isEditorMounted = useEditorMounted();
+
+      const isTweet = true;
+
+      const state = useDraggableState({ element: props.element });
+      const { isDragging } = state;
+      const { handleRef } = useDraggable(state);
+
+      return (
+        <PlateElement
+          ref={ref}
+          className={cn('relative py-2.5', className)}
+          {...props}
+        >
+          <figure
+            className="relative m-0 cursor-default"
+            contentEditable={false}
+          >
+            <Resizable
+              className={cn(isDragging && 'opacity-50')}
+              align={align}
+              options={{
+                align,
+                maxWidth: isTweet ? 550 : '100%',
+                minWidth: isTweet ? 300 : 100,
+                readOnly,
+              }}
+            >
+              <div className="group/media">
+                <ResizeHandle
+                  className={mediaResizeHandleVariants({ direction: 'left' })}
+                  options={{ direction: 'left' }}
+                />
+
+                <ResizeHandle
+                  className={mediaResizeHandleVariants({ direction: 'right' })}
+                  options={{ direction: 'right' }}
+                />
+
+                {!isUpload && isYoutube && (
+                  <div ref={handleRef}>
+                    <LiteYouTubeEmbed
+                      id={embed!.id!}
+                      title="youtube"
+                      wrapperClass={cn(
+                        'aspect-video rounded-sm',
+                        // focused && selected && 'ring-2 ring-ring ring-offset-2',
+                        'relative block cursor-pointer bg-black bg-cover bg-center [contain:content]',
+                        '[&.lyt-activated]:before:absolute [&.lyt-activated]:before:top-0 [&.lyt-activated]:before:h-[60px] [&.lyt-activated]:before:w-full [&.lyt-activated]:before:bg-top [&.lyt-activated]:before:bg-repeat-x [&.lyt-activated]:before:pb-[50px] [&.lyt-activated]:before:[transition:all_0.2s_cubic-bezier(0,_0,_0.2,_1)]',
+                        '[&.lyt-activated]:before:bg-[url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==)]',
+                        'after:block after:pb-[var(--aspect-ratio)] after:content-[""]',
+                        '[&_>_iframe]:absolute [&_>_iframe]:left-0 [&_>_iframe]:top-0 [&_>_iframe]:size-full',
+                        '[&_>_.lty-playbtn]:z-[1] [&_>_.lty-playbtn]:h-[46px] [&_>_.lty-playbtn]:w-[70px] [&_>_.lty-playbtn]:rounded-[14%] [&_>_.lty-playbtn]:bg-[#212121] [&_>_.lty-playbtn]:opacity-80 [&_>_.lty-playbtn]:[transition:all_0.2s_cubic-bezier(0,_0,_0.2,_1)]',
+                        '[&:hover_>_.lty-playbtn]:bg-[red] [&:hover_>_.lty-playbtn]:opacity-100',
+                        '[&_>_.lty-playbtn]:before:border-y-[11px] [&_>_.lty-playbtn]:before:border-l-[19px] [&_>_.lty-playbtn]:before:border-r-0 [&_>_.lty-playbtn]:before:border-[transparent_transparent_transparent_#fff] [&_>_.lty-playbtn]:before:content-[""]',
+                        '[&_>_.lty-playbtn]:absolute [&_>_.lty-playbtn]:left-1/2 [&_>_.lty-playbtn]:top-1/2 [&_>_.lty-playbtn]:[transform:translate3d(-50%,-50%,0)]',
+                        '[&_>_.lty-playbtn]:before:absolute [&_>_.lty-playbtn]:before:left-1/2 [&_>_.lty-playbtn]:before:top-1/2 [&_>_.lty-playbtn]:before:[transform:translate3d(-50%,-50%,0)]',
+                        '[&.lyt-activated]:cursor-[unset]',
+                        '[&.lyt-activated]:before:pointer-events-none [&.lyt-activated]:before:opacity-0',
+                        '[&.lyt-activated_>_.lty-playbtn]:pointer-events-none [&.lyt-activated_>_.lty-playbtn]:!opacity-0'
+                      )}
+                    />
+                  </div>
+                )}
+
+                {/* TODO: Lazy load */}
+                {isUpload && isEditorMounted && (
+                  <div ref={handleRef}>
+                    <ReactPlayer
+                      height="100%"
+                      url={unsafeUrl}
+                      width="100%"
+                      controls
+                    />
+                  </div>
+                )}
+              </div>
+            </Resizable>
+
+            <Caption style={{ width }} align={align}>
+              <CaptionTextarea
+                readOnly={readOnly}
+                placeholder="Write a caption..."
+              />
+            </Caption>
+          </figure>
+          {children}
+        </PlateElement>
+      );
+    }
+  )
+);
diff --git a/templates/plate-playground-template/src/components/plate-ui/spinner.tsx b/templates/plate-playground-template/src/components/plate-ui/spinner.tsx
new file mode 100644
index 0000000000..94212c23b9
--- /dev/null
+++ b/templates/plate-playground-template/src/components/plate-ui/spinner.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+
+import { cn } from '@udecode/cn';
+import { type VariantProps, cva } from 'class-variance-authority';
+import { type LucideProps, Loader2Icon } from 'lucide-react';
+
+const spinnerVariants = cva('text-muted-foreground animate-spin', {
+  defaultVariants: {
+    size: 'default',
+  },
+  variants: {
+    size: {
+      default: 'size-4',
+      icon: 'size-10',
+      lg: 'size-6',
+      sm: 'size-2',
+    },
+  },
+});
+
+export const Spinner = ({
+  className,
+  size,
+  ...props
+}: Partial<LucideProps & VariantProps<typeof spinnerVariants>>) => (
+  <Loader2Icon
+    className={cn(spinnerVariants({ size }), className)}
+    {...props}
+  />
+);
diff --git a/templates/plate-playground-template/src/components/plate-ui/toolbar.tsx b/templates/plate-playground-template/src/components/plate-ui/toolbar.tsx
index 9720c3624f..576806feb2 100644
--- a/templates/plate-playground-template/src/components/plate-ui/toolbar.tsx
+++ b/templates/plate-playground-template/src/components/plate-ui/toolbar.tsx
@@ -27,12 +27,12 @@ export const ToolbarLink = withCn(
 
 export const ToolbarSeparator = withCn(
   ToolbarPrimitive.Separator,
-  'mx-2 my-1 w-px shrink-0 bg-border'
+  'bg-border mx-2 my-1 w-px shrink-0'
 );
 
 const toolbarButtonVariants = cva(
   cn(
-    'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium text-foreground ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg:not([data-icon])]:size-4'
+    'text-foreground ring-offset-background focus-visible:ring-ring inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg:not([data-icon])]:size-4'
   ),
   {
     defaultVariants: {
@@ -47,9 +47,34 @@ const toolbarButtonVariants = cva(
       },
       variant: {
         default:
-          'bg-transparent hover:bg-muted hover:text-muted-foreground aria-checked:bg-accent aria-checked:text-accent-foreground',
+          'hover:bg-muted hover:text-muted-foreground aria-checked:bg-accent aria-checked:text-accent-foreground bg-transparent',
         outline:
-          'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground',
+          'border-input hover:bg-accent hover:text-accent-foreground border bg-transparent',
+      },
+    },
+  }
+);
+
+const dropdownArrowVariants = cva(
+  cn(
+    'text-foreground focus-visible:ring-ring inline-flex items-center justify-center rounded-r-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50'
+  ),
+  {
+    defaultVariants: {
+      size: 'sm',
+      variant: 'default',
+    },
+    variants: {
+      size: {
+        default: 'h-10 w-6',
+        lg: 'h-11 w-8',
+        sm: 'h-7 w-4',
+      },
+      variant: {
+        default:
+          'hover:bg-muted hover:text-muted-foreground aria-checked:bg-accent aria-checked:text-accent-foreground bg-transparent',
+        outline:
+          'border-input hover:bg-accent hover:text-accent-foreground border border-l-0 bg-transparent',
       },
     },
   }
@@ -98,7 +123,7 @@ const ToolbarButton = withTooltip(
                 </div>
                 <div>
                   <ChevronDown
-                    className="size-3.5 text-muted-foreground"
+                    className="text-muted-foreground size-3.5"
                     data-icon
                   />
                 </div>
@@ -131,6 +156,90 @@ ToolbarButton.displayName = 'ToolbarButton';
 
 export { ToolbarButton };
 
+export const ToolbarSplitButton = React.forwardRef<
+  React.ElementRef<typeof ToolbarToggleGroup>,
+  {
+    pressed?: boolean;
+    tooltip?: string;
+  } & Omit<
+    React.ComponentPropsWithoutRef<typeof ToolbarToggleItem>,
+    'asChild' | 'value'
+  >
+>(({ children, pressed, ...props }, ref) => {
+  return (
+    <ToolbarToggleGroup
+      ref={ref}
+      className="group"
+      disabled={props.disabled}
+      value="single"
+      data-pressed={pressed}
+      type="single"
+    >
+      <button className="flex" type="button">
+        {children}
+      </button>
+    </ToolbarToggleGroup>
+  );
+});
+
+export const ToolbarSplitButtonPrimary = withTooltip(
+  React.forwardRef<
+    React.ElementRef<typeof ToolbarToggleItem>,
+    {
+      className?: string;
+      size?: 'default' | 'lg' | 'sm';
+      variant?: 'default' | 'outline';
+    } & Omit<React.ComponentPropsWithoutRef<typeof ToolbarToggleItem>, 'value'>
+  >(({ children, className, size, variant, ...props }, ref) => {
+    return (
+      <span
+        ref={ref}
+        className={cn(
+          className,
+          toolbarButtonVariants({
+            size,
+            variant,
+          }),
+          'rounded-r-none',
+          'group-data-[pressed=true]:bg-accent group-data-[pressed=true]:text-accent-foreground'
+        )}
+        {...props}
+      >
+        {children}
+      </span>
+    );
+  })
+);
+
+export const ToolbarSplitButtonSecondary = React.forwardRef<
+  HTMLButtonElement,
+  {
+    className?: string;
+    size?: 'default' | 'lg' | 'sm';
+    variant?: 'default' | 'outline';
+  } & React.ButtonHTMLAttributes<HTMLButtonElement>
+>(({ className, size, variant, ...props }, ref) => {
+  return (
+    <span
+      ref={ref}
+      className={cn(
+        className,
+        dropdownArrowVariants({
+          size,
+          variant,
+        }),
+        'group-data-[pressed=true]:bg-accent group-data-[pressed=true]:text-accent-foreground'
+      )}
+      disabled={props.disabled}
+      {...props}
+    >
+      <ChevronDown className="text-muted-foreground size-3.5" data-icon />
+    </span>
+  );
+});
+
+ToolbarSplitButton.displayName = 'ToolbarButton';
+
 export const ToolbarToggleItem = withVariants(
   ToolbarPrimitive.ToggleItem,
   toolbarButtonVariants,
diff --git a/templates/plate-playground-template/src/lib/uploadthing/handle-error.ts b/templates/plate-playground-template/src/lib/uploadthing/handle-error.ts
new file mode 100644
index 0000000000..f04db185ad
--- /dev/null
+++ b/templates/plate-playground-template/src/lib/uploadthing/handle-error.ts
@@ -0,0 +1,27 @@
+import { isRedirectError } from 'next/dist/client/components/redirect';
+import { toast } from 'sonner';
+import { z } from 'zod';
+
+export function getErrorMessage(err: unknown) {
+  const unknownError = 'Something went wrong, please try again later.';
+
+  if (err instanceof z.ZodError) {
+    const errors = err.issues.map((issue) => {
+      return issue.message;
+    });
+
+    return errors.join('\n');
+  } else if (err instanceof Error) {
+    return err.message;
+  } else if (isRedirectError(err)) {
+    throw err;
+  } else {
+    return unknownError;
+  }
+}
+
+export function showErrorToast(err: unknown) {
+  const errorMessage = getErrorMessage(err);
+
+  return toast.error(errorMessage);
+}
diff --git a/templates/plate-playground-template/src/lib/uploadthing/index.ts b/templates/plate-playground-template/src/lib/uploadthing/index.ts
new file mode 100644
index 0000000000..55dcc822a3
--- /dev/null
+++ b/templates/plate-playground-template/src/lib/uploadthing/index.ts
@@ -0,0 +1,5 @@
+export * from './handle-error';
+
+export * from './uploadthing';
+
+export * from './use-upload-file';
diff --git a/templates/plate-playground-template/src/lib/uploadthing/uploadthing.ts b/templates/plate-playground-template/src/lib/uploadthing/uploadthing.ts
new file mode 100644
index 0000000000..90f48864d6
--- /dev/null
+++ b/templates/plate-playground-template/src/lib/uploadthing/uploadthing.ts
@@ -0,0 +1,6 @@
+import type { OurFileRouter } from '@/app/api/uploadthing/core';
+
+import { generateReactHelpers } from '@uploadthing/react';
+
+export const { uploadFiles, useUploadThing } =
+  generateReactHelpers<OurFileRouter>();
diff --git a/templates/plate-playground-template/src/lib/uploadthing/use-upload-file.ts b/templates/plate-playground-template/src/lib/uploadthing/use-upload-file.ts
new file mode 100644
index 0000000000..d4d62b6aef
--- /dev/null
+++ b/templates/plate-playground-template/src/lib/uploadthing/use-upload-file.ts
@@ -0,0 +1,76 @@
+import * as React from 'react';
+
+import type { OurFileRouter } from '@/app/api/uploadthing/core';
+import type {
+  ClientUploadedFileData,
+  UploadFilesOptions,
+} from 'uploadthing/types';
+
+import { toast } from 'sonner';
+
+import { getErrorMessage } from './handle-error';
+import { uploadFiles } from './uploadthing';
+
+export interface UploadedFile<T = unknown> extends ClientUploadedFileData<T> {}
+
+interface UseUploadFileProps
+  extends Pick<
+    UploadFilesOptions<OurFileRouter, keyof OurFileRouter>,
+    'headers' | 'onUploadBegin' | 'onUploadProgress' | 'skipPolling'
+  > {
+  onUploadComplete?: (file: UploadedFile) => void;
+  onUploadError?: (error: unknown) => void;
+}
+
+export function useUploadFile(
+  endpoint: keyof OurFileRouter,
+  { onUploadComplete, onUploadError, ...props }: UseUploadFileProps = {}
+) {
+  const [uploadedFile, setUploadedFile] = React.useState<UploadedFile>();
+  const [uploadingFile, setUploadingFile] = React.useState<File>();
+  const [progress, setProgress] = React.useState<number>(0);
+  const [isUploading, setIsUploading] = React.useState(false);
+
+  async function uploadThing(file: File) {
+    setIsUploading(true);
+    setUploadingFile(file);
+
+    try {
+      const res = await uploadFiles(endpoint, {
+        ...props,
+        files: [file],
+        onUploadProgress: ({ progress }) => {
+          setProgress(Math.min(progress, 100));
+        },
+      });
+
+      setUploadedFile(res[0]);
+
+      onUploadComplete?.(res[0]);
+
+      return uploadedFile;
+    } catch (error) {
+      const errorMessage = getErrorMessage(error);
+
+      const message =
+        errorMessage.length > 0
+          ? errorMessage
+          : 'Something went wrong, please try again later.';
+
+      toast.error(message);
+      onUploadError?.(error);
+    } finally {
+      setProgress(0);
+      setIsUploading(false);
+      setUploadingFile(undefined);
+    }
+  }
+
+  return {
+    isUploading,
+    progress,
+    uploadFile: uploadThing,
+    uploadedFile,
+    uploadingFile,
+  };
+}
diff --git a/yarn.lock b/yarn.lock
index f99eb82feb..c8e876bf61 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6581,7 +6581,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@udecode/plate-docx@npm:40.0.2, @udecode/plate-docx@workspace:^, @udecode/plate-docx@workspace:packages/docx":
+"@udecode/plate-docx@npm:40.2.0, @udecode/plate-docx@workspace:^, @udecode/plate-docx@workspace:packages/docx":
   version: 0.0.0-use.local
   resolution: "@udecode/plate-docx@workspace:packages/docx"
   dependencies:
@@ -6589,7 +6589,7 @@ __metadata:
     "@udecode/plate-heading": "npm:40.0.2"
     "@udecode/plate-indent": "npm:40.0.0"
     "@udecode/plate-indent-list": "npm:40.0.0"
-    "@udecode/plate-media": "npm:40.0.0"
+    "@udecode/plate-media": "npm:40.2.0"
     "@udecode/plate-table": "npm:40.0.0"
     validator: "npm:^13.12.0"
   peerDependencies:
@@ -6949,7 +6949,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@udecode/plate-media@npm:40.0.0, @udecode/plate-media@workspace:^, @udecode/plate-media@workspace:packages/media":
+"@udecode/plate-media@npm:40.2.0, @udecode/plate-media@workspace:^, @udecode/plate-media@workspace:packages/media":
   version: 0.0.0-use.local
   resolution: "@udecode/plate-media@workspace:packages/media"
   dependencies:
@@ -7285,7 +7285,7 @@ __metadata:
     "@udecode/plate-common": "npm:40.0.3"
     "@udecode/plate-csv": "npm:40.0.0"
     "@udecode/plate-diff": "npm:40.0.0"
-    "@udecode/plate-docx": "npm:40.0.2"
+    "@udecode/plate-docx": "npm:40.2.0"
     "@udecode/plate-find-replace": "npm:40.0.0"
     "@udecode/plate-floating": "npm:40.0.0"
     "@udecode/plate-font": "npm:40.0.0"
@@ -7301,7 +7301,7 @@ __metadata:
     "@udecode/plate-link": "npm:40.0.0"
     "@udecode/plate-list": "npm:40.0.0"
     "@udecode/plate-markdown": "npm:40.0.5"
-    "@udecode/plate-media": "npm:40.0.0"
+    "@udecode/plate-media": "npm:40.2.0"
     "@udecode/plate-mention": "npm:40.0.0"
     "@udecode/plate-node-id": "npm:40.0.0"
     "@udecode/plate-normalizers": "npm:40.0.0"