Initial commit

snippets-frontend/components/snippet-editor.tsx

@@ -0,0 +1,87 @@
+'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()
+}