@choice-ui/code-editor-react

A modern React code editor component built on CodeMirror 6.

Installation

pnpm add @choice-ui/code-editor-react

Usage

import { CodeEditor } from "@choice-ui/code-editor-react"
import { useState } from "react"

function App() {
  const [code, setCode] = useState("")

  return (
    <CodeEditor
      value={code}
      onChange={setCode}
      className="h-64 rounded-md border"
    />
  )
}

Read-only Mode

<CodeEditor value={code} readonly />

Custom Extensions

import { javascript } from "@codemirror/lang-javascript"
import { oneDark } from "@codemirror/theme-one-dark"

<CodeEditor
  value={code}
  onChange={setCode}
  customExtensions={[javascript(), oneDark]}
/>

With Ref

import { useRef } from "react"
import { CodeEditor, CodeEditorRef } from "@choice-ui/code-editor-react"

function App() {
  const editorRef = useRef<CodeEditorRef>(null)

  const handleClick = () => {
    const position = editorRef.current?.getCursorPosition()
    console.log(position)
  }

  return <CodeEditor ref={editorRef} value={code} onChange={setCode} />
}

Props

| Prop | Type | Description | |------|------|-------------| | value | string | Current code value | | onChange | (value: string, viewUpdate: ViewUpdate) => void | Value change handler | | autoFocus | boolean | Auto-focus on mount | | className | string | Additional CSS class names | | customExtensions | Extension[] | Custom CodeMirror extensions | | lineWrapping | boolean | Enable line wrapping | | onCursorChange | (position: CursorPosition) => void | Cursor position change handler | | onEditorUpdate | (update: ViewUpdate) => void | Editor update handler | | onFormat | (formattedCode: string) => void | Code format handler | | onSelectionChange | (characterCount: number) => void | Selection change handler | | placeholder | string \| HTMLElement | Placeholder when empty | | readonly | boolean | Read-only mode |

Ref Methods

| Method | Return Type | Description | |--------|-------------|-------------| | getEditor() | EditorView \| null | Get CodeMirror EditorView instance | | getCursorPosition() | CursorPosition \| null | Get current cursor position | | getSelectedCharacterCount() | number | Get selected character count |

License

MIT