Caption

1'use client';
2 
3import * as React from 'react';
4 
5import type { VariantProps } from 'class-variance-authority';
6 
7import {
8  Caption as CaptionPrimitive,
9  CaptionTextarea as CaptionTextareaPrimitive,
10  useCaptionButton,
11  useCaptionButtonState,
12} from '@platejs/caption/react';
13import { createPrimitiveComponent } from '@udecode/cn';
14import { cva } from 'class-variance-authority';
15 
16import { Button } from '@/components/ui/button';
17import { cn } from '@/lib/utils';
18 
19const captionVariants = cva('max-w-full', {
20  defaultVariants: {
21    align: 'center',
22  },
23  variants: {
24    align: {
25      center: 'mx-auto',
26      left: 'mr-auto',
27      right: 'ml-auto',
28    },
29  },
30});
31 
32export function Caption({
33  align,
34  className,
35  ...props
36}: React.ComponentProps<typeof CaptionPrimitive> &
37  VariantProps<typeof captionVariants>) {
38  return (
39    <CaptionPrimitive
40      {...props}
41      className={cn(captionVariants({ align }), className)}
42    />
43  );
44}
45 
46export function CaptionTextarea(
47  props: React.ComponentProps<typeof CaptionTextareaPrimitive>
48) {
49  return (
50    <CaptionTextareaPrimitive
51      {...props}
52      className={cn(
53        'mt-2 w-full resize-none border-none bg-inherit p-0 font-[inherit] text-inherit',
54        'focus:outline-none focus:[&::placeholder]:opacity-0',
55        'text-center print:placeholder:text-transparent',
56        props.className
57      )}
58    />
59  );
60}
61 
62export const CaptionButton = createPrimitiveComponent(Button)({
63  propsHook: useCaptionButton,
64  stateHook: useCaptionButtonState,
65});