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

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.

Optionsobject

Collapse all

    The string representing the caption.

    Whether the caption component is selected.

    Whether the caption component is in read-only mode.

<CaptionTextarea>

Props

Collapse all

    State for the caption textarea.

Optionsobject

Collapse all

    Reference to the textarea element.

    The value of the caption displayed in the textarea.

    Function to update the caption value.

    Whether the caption component is in read-only mode.

    The caption element.