# Code coverage report for src/components/features/snippet-editor/MonacoEditor.tsx

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

95.71% Statements 67/70
100% Branches 6/6
75% Functions 3/4
95.71% Lines 67/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
    711x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x

    1x
    1x
    51x
    51x
    51x
    51x
    51x
    51x
    51x
    51x
    51x
    51x
    51x
    51x
    51x
    51x
    51x
    51x
    51x
    51x
    51x
    51x
    51x
    51x
    51x
    51x
    51x
    51x
    51x
    51x
    51x
    51x
    51x
    51x
    51x
    51x
    51x
    51x
    51x
    51x
    51x
    51x
    51x
    51x
     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>
      )
    }