Caption

PreviousNext

Add captions to media elements like images, videos, and files.

Caption
Loading...

Features

  • Add captions to images, videos, audio files, and other media elements.
  • Arrow navigation selects caption within a block.
  • Inline caption editing with textarea component.

Kit Usage

Installation

The fastest way to add caption functionality is with the MediaKit, which includes the pre-configured CaptionPlugin along with media plugins and their Plate UI components.

  • Caption: Renders caption components for media elements.

Add Kit

import { createPlateEditor } from 'platejs/react';
import { MediaKit } from '@/components/editor/plugins/media-kit';
 
const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    ...MediaKit,
  ],
});

Manual Usage

Installation

pnpm add @platejs/caption

Add Plugin

import { CaptionPlugin } from '@platejs/caption/react';
import { createPlateEditor } from 'platejs/react';
 
const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    CaptionPlugin,
  ],
});

Configure Plugin

Configure which media plugins should support captions:

import { KEYS } from 'platejs';
import { CaptionPlugin } from '@platejs/caption/react';
import {
  AudioPlugin,
  FilePlugin,
  ImagePlugin,
  MediaEmbedPlugin,
  VideoPlugin,
} from '@platejs/media/react';
 
const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    ImagePlugin,
    VideoPlugin,
    AudioPlugin,
    FilePlugin,
    MediaEmbedPlugin,
    CaptionPlugin.configure({
      options: {
        query: {
          allow: [KEYS.img, KEYS.video, KEYS.audio, KEYS.file, KEYS.mediaEmbed],
        },
      },
    }),
  ],
});
  • query.allow: Array of plugin keys that support captions.

Plugins

CaptionPlugin

Plugin for adding caption functionality to media elements.

Options

  • query REQUIRED { allow: string[] }

    Configuration for which plugins support captions.

  • focusEndPath optional Path

    Path to focus at the end of the caption.

    • Default: null

  • focusStartPath optional Path

    Path to focus at the start of the caption.

    • Default: null

  • visibleId optional string

    ID of the currently visible caption.

    • Default: null

Types

TCaptionElement

Extends TElement.

Attributes

Collapse all

  • caption optional Descendant[]

    Caption value as an array of descendant nodes.

Components

<Caption>

Props

Collapse all

  • options optional object

    Options for the caption component.

  • state optional object

    State for the caption component.

    • Optionsobject

    Collapse all

    • readOnly optional boolean

      Whether the caption component is in read-only mode.

<CaptionTextarea>

Props

Collapse all

  • state object

    State for the caption textarea.

标题组件光标覆盖层