Sync/template

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';
 

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>

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';
 

templates/plate-playground-template/.env.example

@@ -0,0 +1,2 @@
+OPENAI_API_KEY=
+UPLOADTHING_TOKEN=

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:
 

templates/plate-playground-template/package.json

@@ -20,14 +20,15 @@
     "@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",
     "@radix-ui/react-slot": "^1.1.0",
     "@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",