Media Placeholder

Installation

npm install @udecode/plate-media

Usage

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.

editor.tf.insert.filePlaceholder

Inserts a file placeholder element.

editor.tf.insert.imagePlaceholder

Inserts an image placeholder element.

editor.tf.insert.videoPlaceholder

Inserts a video placeholder element.

Types

TPlaceholderElement

type TPlaceholderElement = TElement & {
  mediaType: string;
};