Media
Embed medias like videos or tweets into your document.
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-mediaUsage
import { CaptionPlugin } from '@udecode/plate-caption/react';
import { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';
import { SelectOnBackspacePlugin } from '@udecode/plate-select';
const plugins = [
// ...otherPlugins,
CaptionPlugin.configure({
options: { plugins: [ImagePlugin, MediaEmbedPlugin] },
}),
ImagePlugin,
MediaEmbedPlugin,
SelectOnBackspacePlugin.configure({
options: {
query: {
allow: [ImagePlugin.key, MediaEmbedPlugin.key],
},
},
}),
];Plugins
ImagePlugin
Options
Extends MediaPluginOptions.
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.
MediaEmbedPlugin
Options extends MediaPluginOptions.
API Placeholder
editor.tf.insert.audioPlaceholder
Inserts a placeholder. Converts to an audio element when completed.
Parameters
Options for the insert nodes transform.
editor.tf.insert.filePlaceholder
Inserts a placeholder. Converts to a file element when completed.
Parameters
Options for the insert nodes transform.
editor.tf.insert.imagePlaceholder
Inserts a placeholder. Converts to an image element when completed.
Parameters
Options for the insert nodes transform.
editor.tf.insert.videoPlaceholder
Inserts a placeholder. Converts to a video element when completed.
Parameters
Options for the insert nodes transform.
API Media
insertMedia
Inserts media (image or media embed) into the editor. The type of media to insert is determined by the type parameter.
Parameters
The editor instance.
parseMediaUrl
Parses a media URL and returns the data associated with it based on the configured rules of the media plugin.
Parameters
The editor instance.
submitFloatingMedia
Submits the floating media element by setting its URL and performing necessary transformations.
Parameters
The editor instance.
MediaPluginOptions
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.
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 ID for the embedded content.
The component to be rendered for the embedded content.
API Image
insertImage
Inserts an image element into the editor.
Parameters
The editor instance.
The URL or ArrayBuffer of the image.
Additional options for inserting the image element.
isImageUrl
Checks if a given URL is a valid image URL.
Parameters
The URL to check.
withImageUpload
Enhances the editor to support pasting images from the clipboard.
Parameters
The editor instance.
The plate plugin.
withImageEmbed
Enhances the editor to automatically insert an image when a URL is pasted.
Parameters
The editor instance.
The plate plugin.
API Media Embed
insertMediaEmbed
Inserts a media embed element at the current selection.
Parameters
The editor instance.
parseIframeUrl
Parses the URL of an iframe embed.
Parameters
The URL or embed code of the iframe.
parseTwitterUrl
Parses a Twitter URL and extracts the tweet ID.
Parameters
The Twitter URL.
Returns
An object containing the tweet ID and provider if the parsing is successful. Returns undefined if the URL is not valid or does not match any supported video providers.
parseVideoUrl
Parses a video URL and extracts the video ID and provider-specific embed URL.
Parameters
The video URL.
Returns
An object containing the video ID and provider if the parsing is successful. Returns undefined if the URL is not valid or does not match any supported video providers.
API Components
useResizable
A behavior hook for resizable elements.
State
The alignment of the content within the resizable element.
The minimum width that the resizable element can be adjusted to.
The maximum width that the resizable element can be adjusted to.
A function to set the width of the node, which is used when resizing.
A function to set the width of the resizable element directly.
The current width of the resizable element. This can be a string (e.g., a percentage or 'auto') or a number (representing pixels).
Returns
A React reference to the outermost div wrapping the resizable element.
Props to be spread on the outermost div wrapping the resizable element.
Props to be spread on the resizable element.
useFloatingMediaEditButton
A behavior hook for a floating media edit button.
Returns
useFloatingMediaUrlInput
A behavior hook for a floating media URL input.
Props
The default value for the URL input field.
Returns
useImage
A behavior hook for an image element.
Returns
useMediaState
A state hook for a media element.
Parameters
Returns
The alignment of the media element.
Whether the media element is currently focused.
Whether the media element is currently selected.
Whether the editor is in read-only mode.
The parsed embed data of the media element.
Whether the media element is a tweet.
Whether the media element is a video.
Whether the media element is a YouTube video.
useMediaToolbarButton
A behavior hook for a media toolbar button.
Parameters
Returns
Customizable and extensible.