docs

udecode · Nov 17, 2024 · c68f868 · c68f868
1 parent 4cf188c
commit c68f868
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 3 deletions.
diff --git a/.changeset/thin-dragons-deny.md b/.changeset/thin-dragons-deny.md
@@ -0,0 +1,5 @@
+---
+'@udecode/plate-media': patch
+---
+
+Fix error message.
diff --git a/apps/www/src/lib/plate/demo/values/mediaValue.tsx b/apps/www/src/lib/plate/demo/values/mediaValue.tsx
@@ -19,9 +19,33 @@ export const imageValue: any = (
   </fragment>
 );
 
+export const mediaPlaceholderValue: any = (
+  <fragment>
+    <hh2>Upload</hh2>
+    <hp indent={1} listStyleType="disc">
+      Easily upload media files by dragging and dropping them into the editor or
+      using the file picker. The editor provides:
+    </hp>
+    <hp indent={1} listStyleType="disc">
+      Real-time upload status and progress tracking
+    </hp>
+    <hp indent={1} listStyleType="disc">
+      Configurable file size limits and batch upload settings
+    </hp>
+    <hp indent={1} listStyleType="disc">
+      Clear error messages for any upload issues
+    </hp>
+    <hp indent={1} listStyleType="disc">
+      Try it now - drag an image from your desktop or click the upload button in
+      the toolbar
+    </hp>
+  </fragment>
+);
+
 export const mediaValue: any = (
   <fragment>
     {imageValue}
+    {mediaPlaceholderValue}
 
     <hh2>Embed</hh2>
     <hp>Embed various types of content, such as videos and tweets:</hp>

diff --git a/apps/www/src/lib/plate/demo/values/usePlaygroundValue.ts b/apps/www/src/lib/plate/demo/values/usePlaygroundValue.ts
@@ -95,7 +95,8 @@ export const usePlaygroundValue = (id?: ValueId): Value => {
     if (enabled.a) value.push(...linkValue);
     if (enabled.hr) value.push(...horizontalRuleValue);
     if (enabled.table) value.push(...tableValue);
-    if (enabled.img || enabled.media_embed) value.push(...mediaValue);
+    if (enabled.img || enabled.media_embed || enabled.media_placeholder)
+      value.push(...mediaValue);
     if (enabled.column) value.push(...columnValue);
     if (enabled.mention) value.push(...mentionValue);
     if (enabled.date) value.push(...dateValue);

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
@@ -13,6 +13,7 @@ export const useUploadErrorToast = () => {
     if (!uploadError) return;
 
     const { code, data } = uploadError;
+    console.log('🚀 ~ useEffect ~ data:', data);
 
     switch (code) {
       case UploadErrorCode.INVALID_FILE_SIZE: {

diff --git a/packages/media/src/react/placeholder/utils/validateFileItem.ts b/packages/media/src/react/placeholder/utils/validateFileItem.ts
@@ -3,7 +3,7 @@ import type { AllowedFileType } from '../internal/mimes';
 
 import { type FileSize, type MediaItemConfig, UploadErrorCode } from '../type';
 import { createUploadError } from './createUploadError';
-import { bytesToFileSize, fileSizeToBytes } from './fileSizeToBytes';
+import { fileSizeToBytes } from './fileSizeToBytes';
 
 export const validateFileItem = (
   files: File[],
@@ -32,7 +32,7 @@ export const validateFileItem = (
       throw createUploadError(UploadErrorCode.TOO_LARGE, {
         fileType: key,
         files: [f],
-        maxFileSize: bytesToFileSize(bytes),
+        maxFileSize: maxFileSize!,
       });
   }