KSnippets/snippets-frontend/components/snippet-editor.tsx

'use client'

import { useMemo } from 'react'
import CodeMirror from '@uiw/react-codemirror'
import { javascript } from '@codemirror/lang-javascript'
import { json } from '@codemirror/lang-json'
import { markdown } from '@codemirror/lang-markdown'
import { python } from '@codemirror/lang-python'
import { rust } from '@codemirror/lang-rust'
import { sql } from '@codemirror/lang-sql'
import { xml } from '@codemirror/lang-xml'
import { css } from '@codemirror/lang-css'
import { go } from '@codemirror/lang-go'
import { java } from '@codemirror/lang-java'
import { cpp } from '@codemirror/lang-cpp'
import { yaml } from '@codemirror/lang-yaml'
import { oneDark } from '@codemirror/theme-one-dark'

type Props = {
  value: string
  filename: string
  onChange?: (value: string) => void
  readOnly?: boolean
}

function languageFor(filename: string) {
  const extension = filename.split('.').pop()?.toLowerCase()
  if (!extension) return null
  if (['js', 'jsx', 'ts', 'tsx', 'mjs', 'cjs'].includes(extension)) {
    return javascript({ jsx: true, typescript: extension.includes('ts') })
  }
  if (['html', 'xml', 'svg'].includes(extension)) return xml()
  if (['css', 'scss', 'less'].includes(extension)) return css()
  if (extension === 'go') return go()
  if (['java', 'kt', 'kts'].includes(extension)) return java()
  if (['c', 'cpp', 'cc', 'cxx', 'h', 'hpp', 'cs'].includes(extension)) return cpp()
  if (['yaml', 'yml'].includes(extension)) return yaml()
  if (extension === 'json') return json()
  if (['md', 'markdown'].includes(extension)) return markdown()
  if (extension === 'py') return python()
  if (extension === 'rs') return rust()
  if (extension === 'sql') return sql()

  return null
}

export function SnippetEditor({ value, filename, onChange, readOnly = false }: Props) {
  const extensions = useMemo(() => {
    const language = languageFor(filename)
    return language ? [language] : []
  }, [filename])

  return (
      <div className="overflow-hidden rounded-xl border border-border bg-editor shadow-sm">
        <CodeMirror
            value={value}
            height="min(58vh, 560px)"
            extensions={extensions}
            theme={oneDark}
            onChange={onChange}
            readOnly={readOnly}
            basicSetup={{
              lineNumbers: true,
              foldGutter: true,
              highlightActiveLine: !readOnly,
              autocompletion: !readOnly
            }}
            className="snippet-codemirror font-mono text-sm"
            aria-label={readOnly ? 'Snippet content' : 'Snippet editor'}
        />
      </div>
  )
}

export function languageLabel(filename: string) {
  const extension = filename.split('.').pop()?.toUpperCase()
  return extension && extension.length <= 6 ? extension : 'TEXT'
}

export function rawSnippetUrl(id: string) {
  return `http://127.0.0.1:6868/${encodeURIComponent(id)}?mode=raw`
}

export function snippetUrl(id: string) {
  if (typeof window === 'undefined') return `/${encodeURIComponent(id)}`
  return new URL(`/${encodeURIComponent(id)}`, window.location.origin).toString()
}