| 1 | "use client"; |
| 2 | |
| 3 | import { cn } from "@/lib/utils"; |
| 4 | import { cva } from "class-variance-authority"; |
| 5 | import { PlateLeaf, type PlateLeafProps } from "platejs/react"; |
| 6 | |
| 7 | type PresentationLeafVariant = "primary" | "secondary" | "text" | "heading"; |
| 8 | |
| 9 | const caretVariant = cva("bg-transparent caret-primary", { |
| 10 | variants: { |
| 11 | variant: { |
| 12 | primary: "text-(--presentation-primary)", |
| 13 | secondary: "text-(--presentation-secondary)", |
| 14 | text: "[font-family:var(--presentation-body-font)] text-(--presentation-text) caret-primary", |
| 15 | heading: |
| 16 | "[font-family:var(--presentation-heading-font)] font-bold text-(--presentation-heading) caret-primary", |
| 17 | }, |
| 18 | }, |
| 19 | }); |
| 20 | |
| 21 | function getPresentationLeafVariant(variant: unknown): PresentationLeafVariant { |
| 22 | switch (variant) { |
| 23 | case "primary": |
| 24 | case "secondary": |
| 25 | case "heading": |
| 26 | return variant; |
| 27 | default: |
| 28 | return "text"; |
| 29 | } |
| 30 | } |
| 31 | |
| 32 | export function PresentationLeafElement({ |
| 33 | className, |
| 34 | children, |
| 35 | ref, |
| 36 | leaf, |
| 37 | ...props |
| 38 | }: PlateLeafProps) { |
| 39 | const variant = getPresentationLeafVariant( |
| 40 | (leaf as { variant?: unknown }).variant, |
| 41 | ); |
| 42 | return ( |
| 43 | <PlateLeaf |
| 44 | ref={ref} |
| 45 | leaf={leaf} |
| 46 | className={cn(caretVariant({ variant }), className)} |
| 47 | {...props} |
| 48 | > |
| 49 | {children} |
| 50 | </PlateLeaf> |
| 51 | ); |
| 52 | } |
| 53 | |
| 54 | PresentationLeafElement.displayName = "PresentationLeafElement"; |
| 55 |