Lemma Markdown Editor

1"use client"
2 
3import * as React from "react"
4import ReactMarkdown from "react-markdown"
5import remarkGfm from "remark-gfm"
6import { Eye, Edit3, SplitSquareHorizontal } from "lucide-react"
7import { Button } from "@/components/lemma/ui/button"
8import { Tabs, TabsList, TabsTrigger } from "@/components/lemma/ui/tabs"
9import { Textarea } from "@/components/lemma/ui/textarea"
10import { cn } from "@/components/lemma/lib/utils"
11 
12export type LemmaMarkdownEditorAppearance = "default" | "minimal" | "borderless" | "contained"
13export type LemmaMarkdownEditorDensity = "compact" | "comfortable" | "spacious"
14export type LemmaMarkdownEditorRadius = "none" | "sm" | "md" | "lg" | "xl"
15export type LemmaMarkdownEditorMode = "write" | "preview" | "split"
16 
17export interface LemmaMarkdownEditorProps {
18  value?: string
19  defaultValue?: string
20  onChange?: (value: string) => void
21  placeholder?: string
22  mode?: LemmaMarkdownEditorMode
23  onModeChange?: (mode: LemmaMarkdownEditorMode) => void
24  minRows?: number
25  readOnly?: boolean
26  appearance?: LemmaMarkdownEditorAppearance
27  density?: LemmaMarkdownEditorDensity
28  radius?: LemmaMarkdownEditorRadius
29  title?: React.ReactNode
30  actions?: React.ReactNode
31  className?: string
32}
33 
34export function LemmaMarkdownEditor({
35  value,
36  defaultValue = "",
37  onChange,
38  placeholder = "Write markdown...",
39  mode,
40  onModeChange,
41  minRows = 12,
42  readOnly,
43  appearance = "default",
44  density = "comfortable",
45  radius = "lg",
46  title,
47  actions,
48  className,
49}: LemmaMarkdownEditorProps) {
50  const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue)
51  const [uncontrolledMode, setUncontrolledMode] = React.useState<LemmaMarkdownEditorMode>("split")
52  const currentValue = value ?? uncontrolledValue
53  const currentMode = mode ?? uncontrolledMode
54 
55  const setValue = React.useCallback((nextValue: string) => {
56    if (value == null) setUncontrolledValue(nextValue)
57    onChange?.(nextValue)
58  }, [onChange, value])
59 
60  const setMode = React.useCallback((nextMode: LemmaMarkdownEditorMode) => {
61    if (mode == null) setUncontrolledMode(nextMode)
62    onModeChange?.(nextMode)
63  }, [mode, onModeChange])
64 
65  return (
66    <div
67      data-appearance={appearance}
68      data-density={density}
69      data-radius={radius}
70      className={cn("lemma-markdown-editor flex min-h-0 flex-col overflow-hidden", surfaceClassName(appearance, radius), className)}
71    >
72// … truncated