47 lines
1.2 KiB
Plaintext
47 lines
1.2 KiB
Plaintext
|
---
|
||
|
|
title: Add media
|
||
|
|
description: Insert uploaded media and resolve images pasted or dragged into the editor.
|
||
|
|
order: 30
|
||
|
|
toc:
|
||
|
|
- id: image-and-video
|
||
|
|
title: Image and video
|
||
|
|
- id: clipboard-images
|
||
|
|
title: Clipboard images
|
||
|
|
- id: editing-media
|
||
|
|
title: Editing media
|
||
|
|
---
|
||
|
|
|
||
|
|
## Image and video {#image-and-video}
|
||
|
|
|
||
|
|
The default `Image` and `Video` actions open built-in input dialogs. A custom uploader can hand the completed payload directly to the action:
|
||
|
|
|
||
|
|
```tsx
|
||
|
|
<Image>
|
||
|
|
{({ execute }) => (
|
||
|
|
<ImageUploader
|
||
|
|
onUploaded={({ src, alt, caption }) => execute({ src, alt, caption })}
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
</Image>
|
||
|
|
```
|
||
|
|
|
||
|
|
## Clipboard images {#clipboard-images}
|
||
|
|
|
||
|
|
The full preset includes `ClipboardImages`. For production, resolve pasted and dropped files through object storage:
|
||
|
|
|
||
|
|
```tsx
|
||
|
|
<ClipboardImages
|
||
|
|
resolveImage={async (file, { reportProgress, signal }) => {
|
||
|
|
const uploaded = await uploadImage(file, {
|
||
|
|
signal,
|
||
|
|
onProgress: reportProgress,
|
||
|
|
})
|
||
|
|
return { alt: file.name, src: uploaded.url }
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
```
|
||
|
|
|
||
|
|
## Editing media {#editing-media}
|
||
|
|
|
||
|
|
Selected images support resizing, captions, alignment, and visible or keyboard deletion. Non-image clipboard files remain under normal browser handling.
|