1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
|
"use client"
import { cn } from "@lib/utils"
import { dmSansClassName } from "@/lib/fonts"
import { TextEditor } from "../../text-editor"
import { motion, AnimatePresence } from "motion/react"
import { Button } from "@repo/ui/components/button"
import { Loader2 } from "lucide-react"
export interface TextEditorProps {
documentId: string
editorResetNonce: number
initialEditorContent: string | undefined
hasUnsavedChanges: boolean
isSaving: boolean
onContentChange: (content: string) => void
onSave: () => void
onReset: () => void
}
export function TextEditorContent({
documentId,
editorResetNonce,
initialEditorContent,
hasUnsavedChanges,
isSaving,
onContentChange,
onSave,
onReset,
}: TextEditorProps) {
return (
<>
<div className="p-4 overflow-y-auto flex-1 scrollbar-thin">
<TextEditor
key={`${documentId}-${editorResetNonce}`}
content={initialEditorContent}
onContentChange={onContentChange}
onSubmit={onSave}
/>
</div>
<AnimatePresence>
{hasUnsavedChanges && (
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: 20 }}
transition={{ duration: 0.2 }}
className="absolute bottom-4 left-1/2 -translate-x-1/2 flex items-center gap-3 px-4 py-2 bg-[#1B1F24] rounded-full shadow-[0_4px_20px_rgba(0,0,0,0.4),inset_1px_1px_1px_rgba(255,255,255,0.1)]"
>
<span className="text-sm text-[#737373]">Unsaved changes</span>
<Button
variant="ghost"
size="sm"
onClick={onReset}
disabled={isSaving}
className="text-[#737373]/80 hover:text-white rounded-full px-3"
>
Cancel
</Button>
<Button
variant="insideOut"
size="sm"
onClick={onSave}
disabled={isSaving}
className="hover:text-white rounded-full px-4"
>
{isSaving ? (
<>
<Loader2 className="size-4 animate-spin mr-1" />
Saving...
</>
) : (
<>
Save
<span
className={cn(
"bg-[#21212180] border border-[#73737333] text-[#737373] rounded-sm px-1 py-0.5 text-[10px] flex items-center justify-center",
dmSansClassName(),
)}
>
⌘+Enter
</span>
</>
)}
</Button>
</motion.div>
)}
</AnimatePresence>
</>
)
}
|