72 lines
2.0 KiB
TypeScript
72 lines
2.0 KiB
TypeScript
|
import type { ComponentProps } from "react"
|
||
|
|
import { ContentEditable } from "@lexical/react/LexicalContentEditable"
|
||
|
|
import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary"
|
||
|
|
import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin"
|
||
|
|
import { cn } from "@workspace/ui/lib/utils"
|
||
|
|
|
||
|
|
import { LexicalActionTree } from "./actions-view"
|
||
|
|
import { useLexicalActions } from "./actions-context"
|
||
|
|
import { LexicalActionRuntimeProvider } from "./toolbar"
|
||
|
|
import { useLexicalMessage } from "./i18n"
|
||
|
|
import { lexicalMessages } from "./messages"
|
||
|
|
|
||
|
|
export interface LexicalContentProps {
|
||
|
|
className?: string
|
||
|
|
placeholder?: string
|
||
|
|
}
|
||
|
|
|
||
|
|
export type LexicalFooterProps = ComponentProps<"div">
|
||
|
|
|
||
|
|
export function LexicalContent({
|
||
|
|
className,
|
||
|
|
placeholder,
|
||
|
|
}: LexicalContentProps) {
|
||
|
|
const resolvedPlaceholder = useLexicalMessage(
|
||
|
|
placeholder ?? lexicalMessages.contentPlaceholder
|
||
|
|
)
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="relative">
|
||
|
|
<RichTextPlugin
|
||
|
|
contentEditable={
|
||
|
|
<ContentEditable
|
||
|
|
aria-placeholder={resolvedPlaceholder}
|
||
|
|
placeholder={
|
||
|
|
<div
|
||
|
|
data-slot="lexical-placeholder"
|
||
|
|
className="pointer-events-none absolute start-3 top-4 text-sm text-muted-foreground"
|
||
|
|
>
|
||
|
|
{resolvedPlaceholder}
|
||
|
|
</div>
|
||
|
|
}
|
||
|
|
className={cn("min-h-52 px-3 py-2 text-sm outline-none", className)}
|
||
|
|
/>
|
||
|
|
}
|
||
|
|
ErrorBoundary={LexicalErrorBoundary}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export function LexicalFooter({
|
||
|
|
className,
|
||
|
|
children,
|
||
|
|
...props
|
||
|
|
}: LexicalFooterProps) {
|
||
|
|
const actions = useLexicalActions("footer")
|
||
|
|
|
||
|
|
if (actions.length === 0 && children == null) return null
|
||
|
|
|
||
|
|
return (
|
||
|
|
<LexicalActionRuntimeProvider>
|
||
|
|
<div
|
||
|
|
className={cn("flex items-center gap-1 border-t px-3 py-2", className)}
|
||
|
|
{...props}
|
||
|
|
>
|
||
|
|
<LexicalActionTree items={actions} />
|
||
|
|
{children}
|
||
|
|
</div>
|
||
|
|
</LexicalActionRuntimeProvider>
|
||
|
|
)
|
||
|
|
}
|