Docs
Caption

Caption

Add captions to your blocks.

Draggable

📸 Image

Add images by either uploading them or providing the image URL:

Customize image captions and resize images.

📺 Embed

Embed various types of content, such as videos and tweets:



Features

  • Arrow navigation should select caption within a block.

Installation

npm install @udecode/plate-caption

Usage

import { CaptionPlugin } from '@udecode/plate-caption/react';
import { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';
 
const plugins = [
  // ...otherPlugins,
  CaptionPlugin,
  ImagePlugin,
  MediaEmbedPlugin,
];
 
const editor = createPlateEditor({
  plugins,
  override: {
    plugins: {
      [CaptionPlugin.key]: {
        plugins: [ImagePlugin.key, MediaEmbedPlugin.key],
      },
    },
  },
});

Plugins

CaptionPlugin

Options

Collapse all

    The plugin keys of the blocks that have caption.

    Path to focus at the end of the caption.

    Path to focus at the start of the caption.

    ID of the visible caption.

    Whether the caption is visible.

API

TCaptionElement

Attributes

Collapse all

    Extends TElement.

    Caption value.

API Components

Caption

Props

Collapse all

CaptionTextarea

Props

Collapse all

Block SelectionCollaboration