Docs
Media Placeholder
Media Placeholder
Media placeholders to be used as clickable placeholders for various media types (image, video, audio, file).
Installation
npm install @udecode/plate-mediaUsage
import {
AudioPlugin,
FilePlugin,
ImagePlugin,
MediaEmbedPlugin,
PlaceholderPlugin,
VideoPlugin,
} from '@udecode/plate-media/react';const plugins = [
// ...otherPlugins,
PlaceholderPlugin,
];const components = {
// ...otherComponents,
[PlaceholderPlugin.key]: MediaPlaceholderElement,
};- MediaPlaceholderElement (Plus)
Examples
Plate UI
Work in progress.
Plate Plus
- 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
- Automatically converts the placeholder to the appropriate media element (image, video, audio, file) once the upload or embed is submitted
- Validates URLs and file types for each media category
- Beautifully crafted UI
Plugins
PlaceholderPlugin
Media placeholder element plugin.
Transforms
editor.tf.insert.audioPlaceholder
Inserts an audio placeholder element.
Parameters
Collapse all
Options for the insert nodes transform.
editor.tf.insert.filePlaceholder
Inserts a file placeholder element.
Parameters
Collapse all
Options for the insert nodes transform.
editor.tf.insert.imagePlaceholder
Inserts an image placeholder element.
Parameters
Collapse all
Options for the insert nodes transform.
editor.tf.insert.videoPlaceholder
Inserts a video placeholder element.
Parameters
Collapse all
Options for the insert nodes transform.
Types
TPlaceholderElement
type TPlaceholderElement = TElement & {
mediaType: string;
};