From c68f86851ba3628fd5f88d1dc2c4780fa9fbf7ae Mon Sep 17 00:00:00 2001
From: Felix Feng <felixfeng33@gmail.com>
Date: Sun, 17 Nov 2024 21:02:30 +0800
Subject: [PATCH] docs

---
 .changeset/thin-dragons-deny.md               |  5 ++++
 .../src/lib/plate/demo/values/mediaValue.tsx  | 24 +++++++++++++++++++
 .../plate/demo/values/usePlaygroundValue.ts   |  3 ++-
 .../default/plate-ui/media-upload-toast.tsx   |  1 +
 .../placeholder/utils/validateFileItem.ts     |  4 ++--
 5 files changed, 34 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/thin-dragons-deny.md

diff --git a/.changeset/thin-dragons-deny.md b/.changeset/thin-dragons-deny.md
new file mode 100644
index 0000000000..826becdeaa
--- /dev/null
+++ 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
index 0fdfd3889c..6ab7bdb62c 100644
--- 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
index 02efcf7658..f0a16a8b39 100644
--- 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
index ce39cb2e79..ab899deff9 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
@@ -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
index 42b94a97dc..6125bbb9fb 100644
--- 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!,
       });
   }