| import type * as React from 'react' |
| import { type RefObject, useRef } from 'react' |
|
|
| import { CodeEditor, type CodeEditorApi } from '@/components/chat/code-editor' |
| import { Button } from '@/components/ui/button' |
| import { Codicon } from '@/components/ui/codicon' |
| import { Tip } from '@/components/ui/tooltip' |
| import { useI18n } from '@/i18n' |
| import { cn } from '@/lib/utils' |
|
|
| |
| |
| const ICON_BUTTON = |
| 'size-5 cursor-pointer rounded-[4px] text-muted-foreground/70 hover:bg-(--ui-control-active-background) hover:text-foreground' |
|
|
| interface JsonDocumentEditorProps { |
| apiRef?: RefObject<CodeEditorApi | null> |
| className?: string |
| disabled?: boolean |
| filePath?: string |
| header?: React.ReactNode |
| highlight?: null | { from: number; to: number } |
| initialValue: string |
| onChange: (value: string) => void |
| onCursorChange?: (pos: number) => void |
| onFormatJsonError: (error: string) => void |
| onSave?: () => void |
| remountKey?: number | string |
| trailing?: React.ReactNode |
| } |
|
|
| |
| export function JsonDocumentEditor({ |
| apiRef, |
| className, |
| disabled, |
| filePath = 'document.json', |
| header, |
| highlight, |
| initialValue, |
| onChange, |
| onCursorChange, |
| onFormatJsonError, |
| onSave, |
| remountKey, |
| trailing |
| }: JsonDocumentEditorProps) { |
| const { t } = useI18n() |
| const localApi = useRef<CodeEditorApi | null>(null) |
| const editorApi = apiRef ?? localApi |
|
|
| return ( |
| <div className={cn('flex min-h-0 flex-1 flex-col overflow-hidden', className)}> |
| <div className="flex h-8 shrink-0 items-center gap-2 px-3"> |
| {header ? ( |
| <span className="flex min-w-0 items-center gap-1.5 text-[0.68rem] text-(--ui-text-tertiary)">{header}</span> |
| ) : null} |
| <div className="ml-auto flex items-center gap-1"> |
| <Tip label={t.common.formatJson}> |
| <Button |
| aria-label={t.common.formatJson} |
| className={ICON_BUTTON} |
| disabled={disabled} |
| onClick={() => { |
| const result = editorApi.current?.formatJson() |
| |
| if (result && !result.ok) { |
| onFormatJsonError(result.error) |
| } |
| }} |
| size="icon" |
| variant="ghost" |
| > |
| <Codicon name="json" size="0.8125rem" /> |
| </Button> |
| </Tip> |
| {trailing} |
| </div> |
| </div> |
| <div className="min-h-0 flex-1"> |
| <CodeEditor |
| apiRef={editorApi} |
| disabled={disabled} |
| filePath={filePath} |
| formatJson |
| highlight={highlight} |
| initialValue={initialValue} |
| key={remountKey} |
| onChange={onChange} |
| onCursorChange={onCursorChange} |
| onFormatJsonError={onFormatJsonError} |
| onSave={onSave} |
| /> |
| </div> |
| </div> |
| ) |
| } |
|
|
