docs

udecode · Nov 21, 2024 · d7e5765 · d7e5765
1 parent d9b09fd
commit d7e5765
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 30 deletions.
diff --git a/apps/www/content/docs/media.mdx b/apps/www/content/docs/media.mdx
@@ -19,6 +19,8 @@ docs:
     title: Media Upload Toast
   - route: /docs/components/media-toolbar-button
     title: Media Toolbar Button
+  - route: https://pro.platejs.org/docs/examples/upload
+    title: Upload
   - route: https://pro.platejs.org/docs/components/media-toolbar
     title: Media Toolbar
 ---
@@ -56,6 +58,7 @@ docs:
 - **Upload experience**:
   - Real-time progress tracking
   - Preview during upload
+  - Automatically converts the placeholder to the appropriate media element (image, video, audio, file) once the upload or embed is submitted
   - Error handling
   - File size validation
   - Type validation
@@ -236,6 +239,15 @@ export function useUploadFile({
 }
 ```
 
+## Examples
+
+### Plate UI
+
+Refer to the preview above.
+
+### Plate Plus
+
+<ComponentPreviewPro name="upload-pro" />
 
 ## Plugins
 

diff --git a/apps/www/src/registry/registry-examples.ts b/apps/www/src/registry/registry-examples.ts
@@ -26,46 +26,27 @@ export const proExamples: Registry = [
   {
     doc: {
       description: `- Integration with [UploadThing](https://uploadthing.com/)
-- Support for various media types: images, videos, audio, and files
 - Use slash commands for quick insertion
+- Displays clickable placeholders for various media types (image, video, audio, file)
+- Opens a popover with two tabs when the placeholder is clicked:
+  - Upload tab: Allows uploading local files directly
+  - Embed tab: Enables pasting embed links for media content
 - Image-specific features:
-  - **Better loading animation and image replacement**
-  - Resize using vertical edge bars
+  - **Better loading rendering and image replacement**
   - Alignment options
-  - Caption support
   - Expand/collapse view
-  - Easy download
+  - Download button
 - Video-specific features:
   - Lazy load
-  - Resize using vertical edge bars
   - Alignment options
   - Caption support
   - View original source
-- Audio and file upload support
-- Ability to embed media via URL
+- Beautifully crafted UI
 `,
-      // {/* - Multiple upload methods:
-      //   - Drag & drop files from your computer
-      //   - Paste images directly from clipboard */}
-      // {/* - Block menu for easy modification of uploaded content */}
     },
     name: 'upload-pro',
     type: 'registry:pro',
   },
-  {
-    doc: {
-      description: `- Displays clickable placeholders for various media types (image, video, audio, file)
-- Opens a popover with two tabs when the placeholder is clicked:
-  - Upload tab: Allows uploading local files directly
-  - Embed tab: Enables pasting embed links for media content
-- Automatically converts the placeholder to the appropriate media element (image, video, audio, file) once the upload or embed is submitted
-- Validates URLs and file types for each media category
-- Beautifully crafted UI`,
-    },
-    // TODO in pro
-    name: 'media-placeholder-pro',
-    type: 'registry:pro',
-  },
   {
     doc: {
       description: `- Open the menu via the drag button or the three-dot menu on specific blocks (e.g. images)

diff --git a/apps/www/src/registry/registry-ui.ts b/apps/www/src/registry/registry-ui.ts
@@ -1130,7 +1130,7 @@ export const uiNodes: Registry = [
         { route: '/docs/media' },
         { route: siteConfig.links.plateProComponent('media-audio-element') },
       ],
-      examples: ['media-demo'],
+      examples: ['media-demo', 'upload-pro'],
     },
     files: ['plate-ui/media-audio-element.tsx'],
     name: 'media-audio-element',
@@ -1152,7 +1152,7 @@ export const uiNodes: Registry = [
         { route: '/docs/api/resizable' },
         { route: siteConfig.links.plateProComponent('media-embed-element') },
       ],
-      examples: ['media-demo', 'media-toolbar-pro'],
+      examples: ['media-demo', 'upload-pro'],
     },
     files: ['plate-ui/media-embed-element.tsx'],
     name: 'media-embed-element',
@@ -1173,7 +1173,7 @@ export const uiNodes: Registry = [
         { route: '/docs/media' },
         { route: siteConfig.links.plateProComponent('media-file-element') },
       ],
-      examples: ['media-demo'],
+      examples: ['media-demo', 'upload-pro'],
     },
     files: ['plate-ui/media-file-element.tsx'],
     name: 'media-file-element',
@@ -1214,7 +1214,7 @@ export const uiNodes: Registry = [
         { route: '/docs/api/resizable' },
         { route: siteConfig.links.plateProComponent('media-video-element') },
       ],
-      examples: ['media-demo', 'media-toolbar-pro'],
+      examples: ['media-demo', 'upload-pro'],
     },
     files: ['plate-ui/media-video-element.tsx'],
     name: 'media-video-element',