Media Placeholder

Installation

npm install @udecode/plate-media

Usage

How to configuration the backend see Upload.

import {
  AudioPlugin,
  FilePlugin,
  ImagePlugin,
  MediaEmbedPlugin,
  PlaceholderPlugin,
  VideoPlugin,
} from '@udecode/plate-media/react';

const plugins = [
  // ...otherPlugins,
  PlaceholderPlugin.configure({
    options: {
      disableEmptyPlaceholder: true,
    },
    render: {
      afterEditable: () => <MediaUploadToast />,
    },
  }),
];

const components = {
  // ...otherComponents,
  [PlaceholderPlugin.key]: MediaPlaceholderElement,
};

UploadOptions

uploadConfig

Configuration for different file types:

• You can use this option to configure upload limits for each file type, including:

  • Maximum file count (e.g. maxFileCount: 1)
  • Maximum file size (e.g. maxFileSize: '8MB')
  • Minimum file count (e.g. minFileCount: 1)
  • mediaType: Used for passing to the media-placeholder-elements file to distinguish between different file types and their progress bar styles.

  default configuration:

    uploadConfig: {
      audio: {
        maxFileCount: 1,
        maxFileSize: '8MB',
        mediaType: AudioPlugin.key,
        minFileCount: 1,
      },
      blob: {
        maxFileCount: 1,
        maxFileSize: '8MB',
        mediaType: FilePlugin.key,
        minFileCount: 1,
      },
      image: {
        maxFileCount: 3,
        maxFileSize: '4MB',
        mediaType: ImagePlugin.key,
        minFileCount: 1,
      },
      pdf: {
        maxFileCount: 1,
        maxFileSize: '4MB',
        mediaType: FilePlugin.key,
        minFileCount: 1,
      },
      text: {
        maxFileCount: 1,
        maxFileSize: '64KB',
        mediaType: FilePlugin.key,
        minFileCount: 1,
      },
      video: {
        maxFileCount: 1,
        maxFileSize: '16MB',
        mediaType: VideoPlugin.key,
        minFileCount: 1,
      },
    },

  Copy

  here is all allowed file types (keys for uploadConfig):

  export const ALLOWED_FILE_TYPES = [
    'image',
    'video',
    'audio',
    'pdf',
    'text',
    'blob',
  ] as const;

  Copy

disableEmptyPlaceholder

boolean (default: false)

Disable empty placeholder when no file is selected.

disableFileDrop

boolean (default: false)

Whether we can undo to the placeholder after the file upload is complete.

maxFileCount

number (default: 5)

Maximum number of files that can be uploaded at once.

multiple

boolean (default: true)

Whether multiple files can be uploaded in one time.

Examples

Plate UI

Refer to the preview above.

Plate Plus

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;
};