Media Embed Element
A component for embedded media content with resizing and caption support.
Media PluginResizable APIBlock SelectionButtonCaptionInputMedia PopoverPlate ElementPopoverResizableSeparatorMedia Embed Element
Installation
npx shadcx@latest add plate/media-embed-element
Examples
components/demo.tsx
'use client';
import React from 'react';
import { Plate } from '@udecode/plate-common/react';
import { editorPlugins } from '@/components/editor/plugins/editor-plugins';
import { useCreateEditor } from '@/components/editor/use-create-editor';
import { Editor, EditorContainer } from '@/components/plate-ui/editor';
import { DEMO_VALUES } from './values/demo-values';
export default function Demo({ id }: { id: string }) {
const editor = useCreateEditor({
plugins: [...editorPlugins],
value: DEMO_VALUES[id],
});
return (
<Plate editor={editor}>
<EditorContainer variant="demo">
<Editor />
</EditorContainer>
</Plate>
);
}
Plate Plus
- Integration with UploadThing
- 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 rendering and image replacement
- Alignment options
- Expand/collapse view
- Download button
- Video-specific features:
- Lazy load
- Alignment options
- Caption support
- View original source
- Beautifully crafted UI