CodeEditor

A CodeMirror-backed JSX/JavaScript editor with syntax highlighting, dark/light theming, and Tab-to-indent.

Installation

npx dafink-ui add code-editor

Requires: @uiw/react-codemirror, @codemirror/lang-javascript, @codemirror/autocomplete

Demo

Props

Name	Type	Default	Description
value	string	-	Required. The current code string.
onChange	(value: string) => void	-	Required. Fires with the updated value on every edit.
extensions	Extension[]	[]	Extra CodeMirror extensions layered on top of the built-ins, e.g. a project-specific autocompletion({ override: [...] }) call.
aria-label	string	-	Accessible name for the editor region.
className	string	""	Additional Tailwind classes merged onto the root wrapper.
minHeight	string	-	CSS min-height for the editor surface (e.g. "200px"). Keeps the editor from collapsing to a single line on short content.

Accessibility

CodeMirror gives the editable surface its own role="textbox" and aria-multiline="true" by default, plus whatever aria-labelis passed in. This wrapper repurposes Tab for indentation instead of leaving it as the standard way to move focus off the editor, so Escape is the intentional way out: it blurs the editor and returns focus to the surrounding page, avoiding a WCAG 2.1.2 keyboard trap. Everything else (arrow-key caret movement, selection, undo/redo) is CodeMirror's own default keymap, unmodified by this component.

Key	Function
`tab`	Indents the current line, or accepts the selected autocomplete suggestion if a completion popup is open.
`escape`	Blurs the editor, returning focus to the surrounding page.