36 lines
2.0 KiB
TypeScript
36 lines
2.0 KiB
TypeScript
import * as React from 'react'
|
|
import CodeEditorPrimitive from '@uiw/react-textarea-code-editor'
|
|
|
|
import { cn } from '@/lib/utils'
|
|
|
|
function CodeEditor({
|
|
className,
|
|
...props
|
|
}: React.ComponentProps<typeof CodeEditorPrimitive>) {
|
|
return (
|
|
<CodeEditorPrimitive
|
|
data-slot="textarea"
|
|
className={cn(
|
|
'bg-transparent!',
|
|
'text-base! md:text-sm! field-sizing-content!',
|
|
'text-foreground! overflow-visible!',
|
|
'[&>.w-tc-editor-preview]:px-3! [&>.w-tc-editor-preview]:py-2! [&>.w-tc-editor-preview]:m-0! [&>.w-tc-editor-preview]:min-h-16!',
|
|
'[&>.w-tc-editor-preview]:rounded-md! [&>.w-tc-editor-preview]:bg-transparent! [&>.w-tc-editor-preview]:dark:bg-input/30! [&>.w-tc-editor-preview]:shadow-xs! [&>.w-tc-editor-preview]:transition-[color,box-shadow]!',
|
|
'[&>.w-tc-editor-preview]:text-base! [&>.w-tc-editor-preview]:md:text-sm! [&>.w-tc-editor-preview]:field-sizing-content!',
|
|
'[&>.w-tc-editor-preview]:text-foreground! [&>.w-tc-editor-preview]:placeholder:text-muted-foreground!',
|
|
'[&>.w-tc-editor-preview]:outline-none!',
|
|
'[&>.w-tc-editor-preview]:border! [&>.w-tc-editor-preview]:border-input!',
|
|
'[&>.w-tc-editor-text]:px-3! [&>.w-tc-editor-text]:py-2! [&>.w-tc-editor-text]:m-0!',
|
|
'[&>.w-tc-editor-text]:text-base! [&>.w-tc-editor-text]:md:text-sm! [&>.w-tc-editor-text]:field-sizing-content!',
|
|
'[&>.w-tc-editor-text]:text-foreground! [&>.w-tc-editor-text]:placeholder:text-muted-foreground! [&>.w-tc-editor-text]:opacity-100!',
|
|
'[&>.w-tc-editor-text]:subpixel-antialiased!',
|
|
'[&>.w-tc-editor-text]:disabled:cursor-not-allowed! [&:has(>.w-tc-editor-text:disabled)]:opacity-50!',
|
|
'[&:has(>.w-tc-editor-text[aria-invalid="true"])]:[&>.w-tc-editor-preview]:ring-destructive/20! dark:[&:has(>.w-tc-editor-text[aria-invalid="true"])]:[&>.w-tc-editor-preview]:ring-destructive/40! [&:has(>.w-tc-editor-text[aria-invalid="true"])]:[&>.w-tc-editor-preview]:border-destructive!',
|
|
className,
|
|
)}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|
|
|
|
export { CodeEditor } |