Media
Embed medias like videos or tweets into your document.
📸 Image
📺 Embed
Features
- Allows insertion of embeddable media: images, videos, and tweets.
- Supports multiple media providers: video, youtube, vimeo, dailymotion, youku, coub, twitter.
- Editable captions.
- Resizable.
- Use Plate Cloud for easy cloud uploads and server-side image resizing.
Installation
npm install @udecode/plate-mediaPlugins
import {
ELEMENT_IMAGE,
ELEMENT_MEDIA_EMBED,
createImagePlugin,
createMediaEmbedPlugin,
} from '@udecode/plate-media';
import { createSelectOnBackspacePlugin } from '@udecode/plate-select';
const plugins = [
// ...otherPlugins,
createImagePlugin(),
createMediaEmbedPlugin(),
createSelectOnBackspacePlugin({
options: {
query: {
allow: [ELEMENT_IMAGE, ELEMENT_MEDIA_EMBED],
},
},
}),
];API Media
MediaPlugin
Common attributes shared by image and media embed plugins.
Attributes
A function to check whether a text string is a URL.
A function to transform the URL.
List of rules. The first rule that matches the URL will be used, i.e. its component will be used to render the media.
Disables captions for media if set to true.
EmbedUrlData
A type defining the data returned from parsing an embed URL.
Attributes
The URL of the embedded content.
The provider of the embedded content.
The unique identifier for the embedded content.
The component to be rendered for the embedded content.
insertMedia
parseMediaUrl
submitFloatingMedia
API Image
createImagePlugin
Attributes
Options extends MediaPlugin.
An optional method that will upload the image to a server. The method receives the base64 dataUrl of the uploaded image, and should return the URL of the uploaded image.
Disables file upload on data insertion if set to true.
Disables URL embed on data insertion if set to true.
insertImage
isImageUrl
withImageUpload
withImageEmbed
API Media Embed
createMediaEmbedPlugin
Options extends MediaPlugin.