Code Editor

import CodeEditor from 'frui/fields/CodeEditor';

Copy

Props

The following props are accepted by CodeEditor.

Name	Type	Required	Notes
className	string	No	Standard HTML class names
defaultValue	string	No	Default value (uncontrolled)
extensions	Object[]	No	Set of CodeMirror extensions that can be added
language	string	No	Language to use
name	string	No	Used for React Server Components.
numbers	boolean	No	Toggle line numbers (defaults to false; ineffective when using basic setup).
onChange	Function	No	Event handler when value has changed
onUpdate	Function	No	Event handler when value updates
setup	string	No	CodeMirror setup options ('minimal' \| 'basic' \| 'custom')
value	string	No	Default value (controlled)

Basics

A CodeEditor is not a standard input field but a specialized component for editing code that wraps around the CodeMirror component. A hidden Input component is used to store the value.

The following is a basic example of a CodeEditor.

<CodeEditor
  value='console.log("Hello world!");'
  name={'code-editor'}
  setup={'basic'}
  language='javascript'
  className='w-[50%] min-h-40 bg-white'
/>

Copy

Languages

CodeEditor supports a variety of languages out of the box.

Choose an Option

<CodeEditor setup={'basic'} language="" className='w-[50%] min-h-40 bg-white'/>

Copy

Unsupported Languages

Language support extensions can also be passed into the editor via the extensions prop.


import { cpp } from '@codemirror/lang-cpp';

function CPPCodeEditor () {
  return <CodeEditor extensions={[ cpp() ]} setup='basic'/>
}

Copy

Other languages might not have language support provided by CodeMirror. Refer to CodeMirror documentation for details on providing language support.

Events

onUpdate is like onChange except the value is passed instead of the change event.

<CodeEditor onUpdate={(value) => alert(value)} setup={'basic'} value='<div>Hello World</div>' language='html' />

Copy

On Change

The onChange event is triggered when the value has changed. The following arguments are passed to the event handler:

Name	Type	Sample
event	Event Object	see: Change Event

On Update

The onUpdate event is triggered when the value has been updated. The following arguments are passed to the event handler:

Name	Type	Sample
value	string	`foobar`

Checklist

Color Picker