Code Editor

import { CodeEditor } from '@hanzo/ui'

export function Default() {
  return (
    <CodeEditor
      language="javascript"
      height={220}
      defaultValue={`function fibonacci(n) {\n  if (n <= 1) return n\n  return fibonacci(n - 1) + fibonacci(n - 2)\n}\n\nconsole.log(fibonacci(10))`}
    />
  )
}

export function Controlled() {
  const [code, setCode] = useState("// type some code here\n")

  return (
    <YStack gap="$3">
      <CodeEditor value={code} onChange={setCode} language="typescript" height={180} />
      <XStack gap="$2" items="center">
        <Button variant="outline" size="sm" onClick={() => setCode("// reset\n")}>
          Reset
        </Button>
        <Button variant="outline" size="sm" onClick={() => setCode("")}>
          Clear
        </Button>
        <Text fontFamily="$mono" fontSize="$1" color="$soft">
          {code.length} chars
        </Text>
      </XStack>
    </YStack>
  )
}

export function ReadOnly() {
  return (
    <CodeEditor
      readOnly
      showLanguageSelector={false}
      showCopyButton={false}
      lineNumbers={false}
      language="sql"
      height={140}
      defaultValue={`SELECT id, email\nFROM users\nWHERE created_at >= NOW() - INTERVAL '30 days'`}
    />
  )
}

export function FixedLanguage() {
  return (
    <CodeEditor
      showLanguageSelector={false}
      wordWrap="off"
      language="go"
      height={160}
      defaultValue={`func worker(id int, jobs <-chan int, results chan<- int) {\n\tfor job := range jobs {\n\t\tresults <- job * 2\n\t}\n}`}
    />
  )
}

export function Themed() {
  return (
    <CodeEditor
      theme="dark"
      language="rust"
      height={160}
      defaultValue={`fn main() {\n    let mut cache = Cache::new(3);\n    cache.insert("key1", "value1");\n    println!("{:?}", cache);\n}`}
    />
  )
}

Types

export type CodeEditorTheme = 'light' | 'dark' | 'auto'

export type CodeEditorWordWrap = 'on' | 'off' | 'wordWrapColumn' | 'bounded'

export interface CodeEditorProps extends Omit<YStackProps, 'children' | 'height' | 'theme' | 'onChange'> {
  /** A controlled value; omit it and set `defaultValue` to let the field own its text. */
  value?: string
  defaultValue?: string
  language?: string
  /** The height of the field; the toolbar sits above it, unsized. */
  height?: string | number
  theme?: CodeEditorTheme
  onChange?: (value: string) => void
  /** Called once, after mount, with the field's `<textarea>`. */
  onMount?: (element: HTMLTextAreaElement) => void
  readOnly?: boolean
  lineNumbers?: boolean
  /** Accepted and ignored: a plain text field has no surface to draw a minimap on. */
  minimap?: boolean
  wordWrap?: CodeEditorWordWrap
  fontSize?: number
  showCopyButton?: boolean
  showLanguageSelector?: boolean
  availableLanguages?: readonly string[]
  /**
   * The field's accessible name. A text field with none is announced as
   * "edit text" with nothing to say what it holds; a file's path is the usual
   * answer. Defaults to "Code".
   */
  label?: string
}

Exports