You are viewing the legacy documentation of Plasma featuring the components from the@coveord/plasma-react and @coveord/plasma-style packages. Those packages are deprecated and replaced by the @coveord/plasma-mantine package.

Code Editor

A code editor is a text area that allows users to edit code. A coding syntax is built in.

View source

1
import {CodeEditor, CodeMirrorModes} from '@coveord/plasma-react';
2

3
const defaultValue = `from math import pi as PI
4
print(PI) // 3.141592653589793
5
`;
6

7
const Demo = () => <CodeEditor value={defaultValue} mode={CodeMirrorModes.Python} options={{lineWrapping: true}} />;
8
export default Demo;

Props

Name	Type	Description
`mode`required	`any`	The mode to use as syntax highlighting in the form of a MIME type. You can use values from the CodeMirrorModes constant to help you out.
`value`required	`string`	The initial value
`className`	`string`	CSS classes to add on the container element
`collapsibleId`	`string`	If rendered inside a Collapsible component, you need to specify the collapsible id otherwise the editor might not be showing its content properly
`extraKeywords`	`string[]`	Additionnal keywords to suggest to the user when the suggestion menu is opened with CTRL + Space.
`id`	`string`	The unique identifier that will be used to retrieve the value from the PlasmaState
`onChange`	`(code: string) => void`	A callback function executed when the content of the editor changes code–The content of the editor after the change
`onMount`	`(codemirror: Controlled) => void`	A callback function executed when the editor is mounted to the DOM
`options`	`EditorConfiguration`	Additional editor options
`readOnly`	`boolean`	When true, the content of the editor will not be editable

Examples

Read only

1
import {CodeEditor, CodeMirrorModes} from '@coveord/plasma-react';
2

3
const defaultValue = `from math import pi as PI
4
print(PI) // 3.141592653589793
5
`;
6

7
const Demo = () => <CodeEditor value={defaultValue} mode={CodeMirrorModes.Python} readOnly />;
8
export default Demo;

Best Practices

A code editor displays code snippets that users can review or edit.

Be extremely careful when allowing users to edit code, as it greatly increases the risk of errors. Provide a code editor only when its expected users are well-informed developers.

The code editor should:

Preferably take the full width of the section it appears in to reduce line wrap friction.
Be long enough to display a significant portion of the code and allow users to review it comfortably.

Labeling

Keep titles short, preferably under three words. Provide a descriptive title without action verbs. For example, write "Plugin script" rather than "Write a script".

Help Text and Instructions

Help text should explain how or where the code is used, or provide external references regarding the programming language to use. Help text should be short, preferably on one line.

A placeholder should provide a temporary example when the code editor is empty. Add a placeholder only if a short example can allow users to get started without referring to external resources.

Feedback and Validation

Code editors support syntax formatting and basic programming language validation.

Most of the code validation takes place once changes are saved. Writing proper error messages is important to help users troubleshoot their own errors. Consider providing links to troubleshooting documentation in error messages.

If possible, consider adding a way for users to test their code before moving on through their journey. For instance, adding a button to test a script before saving it is a good practice.

Related Components

If your use case doesn't match the guidelines above, consider using one of the following components instead:

JSON editor - When the user needs to input code using JSON syntax.

Edit guidelines