Histor/media placeholder

.changeset/witty-eels-agree.md

@@ -0,0 +1,5 @@
+---
+'@udecode/plate-media': patch
+---
+
+Fix editor crash when inserting media into an empty paragraph.

apps/www/content/docs/media-placeholder.mdx

@@ -25,6 +25,7 @@ npm install @udecode/plate-media
 ```
 
 ## Usage
+
 How to configuration the backend see [Upload](/docs/upload).
 
 ```tsx
@@ -59,11 +60,82 @@ const components = {
 };
 ```
 
+### UploadThing Integration
+
+The UploadThing integration provides an easy way to handle file uploads in your editor. Follow these steps to set it up:
+
+1. Install the required dependencies:
+
+   ```bash
+   npm install @uploadthing/react uploadthing
+   ```
+
+2. Install the [media-placeholder-element](/docs/components/media-placeholder-element) component.
+
+3. Set up the UploadThing API route by copying the [example implementation](https://github.com/udecode/plate/blob/main/templates/plate-playground-template/src/app/api/uploadthing/core.ts).
+
+4. Get your UploadThing API key from the [dashboard](https://uploadthing.com/dashboard) and add it to your `.env` file:
+   ```bash
+   UPLOADTHING_SECRET=your_secret_key
+   ```
+
+### Using your own backend
+
+To implement your own backend for file uploads:
+
+1. Remove the UploadThing implementation:
+
+   ```bash
+   lib/uploadthing/
+   api/uploadthing/
+   ```
+
+2. Create your own upload hook:
+
+   ```ts
+   function useUploadFile() {
+     // Your implementation here
+     return {
+       isUploading: boolean,
+       progress: number,
+       uploadFile: (file: File) => Promise<UploadedFile>,
+       uploadedFile: UploadedFile | undefined,
+       uploadingFile: File | undefined,
+     };
+   }
+   ```
+
+3. The hook should match the interface expected by the media placeholder component:
+   ```ts
+   interface UploadedFile {
+     key: string;
+     url: string;
+     name: string;
+     size: number;
+     type: string;
+   }
+   ```
+
+## Examples
+
+<ComponentPreview name="playground-demo" id="mediaPlaceholder" />
+
+### Plate UI
+
+Refer to the preview above.
+
+### Plate Plus
+
+<ComponentPreviewPro name="upload-pro" />
+
+## Plugins
 
-## UploadOptions
+### PlaceholderPlugin
 
-### uploadConfig
+Media placeholder element plugin.
 
+<APIOptions>
+<APIItem name="uploadConfig" type="Partial<Record<AllowedFileType, MediaItemConfig>>" optional>
 Configuration for different file types:
 
 - You can use this option to configure upload limits for each file type, including:
@@ -129,45 +201,26 @@ Configuration for different file types:
   ] as const;
   ```
 
-### disableEmptyPlaceholder
-
-`boolean` (default: `false`)
+</APIItem>
 
+<APIItem name="disableEmptyPlaceholder" type="boolean" optional>
 Disable empty placeholder when no file is selected.
 
-### disableFileDrop
-
-`boolean` (default: `false`)
+- **Default:** `false`
+</APIItem>
 
+<APIItem name="disableFileDrop" type="boolean" optional>
 Whether we can undo to the placeholder after the file upload is complete.
 
-### maxFileCount
-
-`number` (default: `5`)
+- **Default:** `false`
+</APIItem>
 
+<APIItem name="maxFileCount" type="number" optional>
 Maximum number of files that can be uploaded at once.
 
-### multiple
-
-`boolean` (default: `true`)
-
-Whether multiple files can be uploaded in one time.
-
-## Examples
-
-### Plate UI
-
-Refer to the preview above.
-
-### Plate Plus
-
-<ComponentPreviewPro name="upload-pro" />
-
-## Plugins
-
-### PlaceholderPlugin
-
-Media placeholder element plugin.
+- **Default:** `5`
+</APIItem>
+</APIOptions>
 
 ## Transforms
 

packages/media/src/react/placeholder/PlaceholderPlugin.tsx

@@ -180,12 +180,12 @@ export const PlaceholderPlugin = toTPlatePlugin<
 
             if (getNodeString(node).length === 0) {
               removeNodes(editor, { at: path });
-              tf.insert.media(files, { at: path });
+              tf.insert.media(files, { at: path, nextBlock: false });
               inserted = true;
             }
           }
           if (!inserted) {
-            tf.insert.media(files);
+            tf.insert.media(files, { nextBlock: false });
           }
 
           return true;

packages/media/src/react/placeholder/transforms/insertMedia.ts

@@ -4,6 +4,7 @@ import {
   type InsertNodesOptions,
   insertNodes,
   nanoid,
+  withoutMergingHistory,
   withoutNormalizing,
 } from '@udecode/plate-common';
 import { Path } from 'slate';
@@ -94,7 +95,9 @@ export const insertMedia = (
     );
 
     if (disableEmptyPlaceholder) {
-      withHistoryMark(editor, insert);
+      withoutMergingHistory(editor, () => {
+        withHistoryMark(editor, insert);
+      });
     } else {
       withoutNormalizing(editor, insert);
     }

packages/media/src/react/placeholder/utils/history.ts

@@ -6,9 +6,10 @@ import { PlaceholderPlugin } from '../PlaceholderPlugin';
 const historyMarks = new WeakMap<PlateEditor, boolean>();
 
 export const withHistoryMark = (editor: PlateEditor, fn: () => void) => {
+  const prev = isHistoryMarking(editor);
   historyMarks.set(editor, true);
   fn();
-  historyMarks.set(editor, false);
+  historyMarks.set(editor, prev);
 };
 
 export const isHistoryMarking = (editor: PlateEditor): boolean => {