# All files / src/components/features/snippet-editor MonacoEditor.tsx

0% Statements 0/70
0% Branches 0/1
0% Functions 0/1
0% Lines 0/70

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    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

     import { lazy, Suspense } from 'react'
    import { Skeleton } from '@/components/ui/skeleton'
    import { configureMonacoTypeScript, getMonacoLanguage } from '@/lib/monaco-config'
    import type { Monaco } from '@monaco-editor/react'

    const Editor = lazy(() => import('@monaco-editor/react'))

    interface MonacoEditorProps {
      value: string
      onChange: (value: string) => void
      language: string
      height?: string
      readOnly?: boolean
    }

    function EditorLoadingSkeleton({ height = '400px' }: { height?: string }) {
      return (
        <div className="space-y-2" style={{ height }}>
          <Skeleton className="h-full w-full rounded-md" />
        </div>
      )
    }

    function handleEditorBeforeMount(monaco: Monaco) {
      configureMonacoTypeScript(monaco)
    }

    export function MonacoEditor({
      value,
      onChange,
      language,
      height = '400px',
      readOnly = false
    }: MonacoEditorProps) {
      const monacoLanguage = getMonacoLanguage(language)

      return (
        <Suspense fallback={<EditorLoadingSkeleton height={height} />}>
          <Editor
            height={height}
            language={monacoLanguage}
            value={value}
            onChange={(newValue) => onChange(newValue || '')}
            theme="vs-dark"
            beforeMount={handleEditorBeforeMount}
            options={{
              minimap: { enabled: false },
              fontSize: 14,
              lineNumbers: 'on',
              scrollBeyondLastLine: false,
              automaticLayout: true,
              tabSize: 2,
              wordWrap: 'on',
              readOnly,
              scrollbar: {
                vertical: 'auto',
                horizontal: 'auto',
                useShadows: false,
              },
              padding: {
                top: 12,
                bottom: 12,
              },
              fontFamily: 'JetBrains Mono, monospace',
              fontLigatures: true,
            }}
          />
        </Suspense>
      )
    }