Skip to main content

Media

This package implements the media plugins for Plate. It allows inserting embeddable media such as images, YouTube or Vimeo videos and tweets into your editor.

For easy cloud uploads of images and attachment including server-side image resizing, please see our official Plate Cloud service and associated plugin.

It also provides the following features:

  • editable caption below the media
  • resizable

Media providers supported by this plugin:

  • video:
    • youtube
    • vimeo
    • dailymotion
    • youku
    • coub
  • twitter

Installation#

npm install @udecode/plate
# or
npm install @udecode/plate-media
npm install @udecode/plate-ui-media

Usage#

import React from 'react';
import { Image } from '@styled-icons/material/Image';
import { OndemandVideo } from '@styled-icons/material/OndemandVideo';
import {
  createImagePlugin,
  createMediaEmbedPlugin,
  createSelectOnBackspacePlugin,
  ELEMENT_IMAGE,
  ELEMENT_MEDIA_EMBED,
  ImageToolbarButton,
  MediaEmbedToolbarButton,
  Plate,
  PlateProvider,
} from '@udecode/plate';
import { basicNodesPlugins } from './basic-nodes/basicNodesPlugins';
import { editableProps } from './common/editableProps';
import { plateUI } from './common/plateUI';
import { mediaValue } from './media/mediaValue';
import { Toolbar } from './toolbar/Toolbar';
import { createMyPlugins, MyValue } from './typescript/plateTypes';

const plugins = createMyPlugins(
  [
    ...basicNodesPlugins,
    createImagePlugin(),
    createMediaEmbedPlugin(),
    createSelectOnBackspacePlugin({
      options: {
        query: {
          allow: [ELEMENT_IMAGE, ELEMENT_MEDIA_EMBED],
        },
      },
    }),
  ],
  {
    components: plateUI,
  }
);

export default () => (
  <PlateProvider<MyValue> plugins={plugins} initialValue={mediaValue}>
    <Toolbar>
      <ImageToolbarButton icon={<Image />} />
      <MediaEmbedToolbarButton icon={<OndemandVideo />} />
    </Toolbar>

    <Plate<MyValue> editableProps={editableProps} />
  </PlateProvider>

Options#

export type EmbedUrlData = {
url?: string;
provider?: string;
id?: string;
component?: RenderFunction<EmbedUrlData>;
};
export type MediaUrlParser = (url: string) => EmbedUrlData | undefined;
export type MediaPluginRule = {
parser: MediaUrlParser;
component?: RenderFunction<EmbedUrlData>;
};
export interface MediaPlugin {
isUrl?: (text: string) => boolean;
/**
* Transforms the url.
*/
transformUrl?: (url: string) => string;
/**
* List of rules. The first rule that matches the url will be used,
* i.e. its component will be used to render the media. Used by `MediaEmbed`.
*/
rules?: MediaPluginRule[];
}
export interface ImagePlugin 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.
*/
uploadImage?: (
dataUrl: string | ArrayBuffer
) => Promise<string | ArrayBuffer> | string | ArrayBuffer;
/**
* Disable file upload on insert data.
*/
disableUploadInsert?: boolean;
/**
* Disable url embed on insert data.
*/
disableEmbedInsert?: boolean;
}

Source Code#

Edit this page