Caption

Caption
Loading...
Files
components/demo.tsx
'use client';

import React from 'react';

import { Plate } from '@udecode/plate/react';

import { editorPlugins } from '@/components/editor/plugins/editor-plugins';
import { useCreateEditor } from '@/components/editor/use-create-editor';
import { Editor, EditorContainer } from '@/components/plate-ui/editor';

import { DEMO_VALUES } from './values/demo-values';

export default function Demo({ id }: { id: string }) {
  const editor = useCreateEditor({
    plugins: [...editorPlugins],
    value: DEMO_VALUES[id],
  });

  return (
    <Plate editor={editor}>
      <EditorContainer variant="demo">
        <Editor />
      </EditorContainer>
    </Plate>
  );
}

Features

  • Arrow navigation should select caption within a block.

Installation

npm install @udecode/plate-caption

Usage

import { CaptionPlugin } from '@udecode/plate-caption/react';
import {
  AudioPlugin,
  FilePlugin,
  ImagePlugin,
  MediaEmbedPlugin,
  VideoPlugin,
} from '@udecode/plate-media/react';
const plugins = [
  // ...otherPlugins,
  ImagePlugin,
  VideoPlugin,
  AudioPlugin,
  FilePlugin,
  MediaEmbedPlugin,
  CaptionPlugin.configure({
    options: {
      plugins: [
        ImagePlugin,
        VideoPlugin,
        AudioPlugin,
        FilePlugin,
        MediaEmbedPlugin,
      ],
    },
  }),
];

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.

Types

TCaptionElement

Extends TElement.

Attributes

Collapse all

    Base element type.

    Caption value.

Components

<Caption>

Props

Collapse all

    Options for the caption component.

    State for the caption component.

    Optionsobject

    Collapse all

      Whether the caption component is in read-only mode.

<CaptionTextarea>

Props

Collapse all

    State for the caption textarea.