Code Editor

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

Configuration

This JSON configuration is very important

1
import {CodeEditor, useForm} from '@coveord/plasma-mantine';
2

3
const Demo = () => {
4
    const form = useForm({
5
        initialValues: {
6
            config: '{"key":"value"}',
7
        },
8
        validate: {
9
            config: (jsonValue) => {
10
                try {
11
                    const config = JSON.parse(jsonValue);
12
                    if (!config.key) {
13
                        return 'The key must have a value';
14
                    }
15
                } catch {
16
                    return 'Invalid JSON';
17
                }
18
                return null;
19
            },
20
        },
21
        validateInputOnBlur: true,
22
    });
23

24
    return (
25
        <CodeEditor
26
            language="json"
27
            label="Configuration"
28
            description="This JSON configuration is very important"
29
            monacoLoader="cdn"
30
            {...form.getInputProps('config')}
31
        />
32
    );
33
};
34
export default Demo;

Props

Name	Type	Default	Description
`defaultValue`	`string`		Default value for uncontrolled input
`description`	`ReactNode`		Input description, displayed after label
`descriptionProps`	`Record<string, any>`		Props spread to description element
`disabled`	`boolean`
`error`	`ReactNode`		Displays error message after input
`errorProps`	`Record<string, any>`		Props spread to error element
`label`	`ReactNode`		Input label, displayed before input
`labelProps`	`Record<string, any>`		Props spread to label element
`language`	`"plaintext" \| "json" \| "markdown" \| "python" \| "xml"`	`'plaintext'`	The language syntax of the editor
`maxHeight`	`number`		The maximal height of the CodeEditor (label and description included) By default the CodeEditor is adjusted to fill its parent height. In the case where the parent height would be too high for your liking, you can use this prop to set a maximum.
`minHeight`	`number`	`300`	The minimal height of the CodeEditor (label and description included) By default the CodeEditor is adjusted to fill its parent height. In the case where the parent height is too short, it will use this value as minimum.
`monacoLoader`	`"cdn" \| "local"`	`'local'`	Defines how the monaco editor files will be loaded. Note that using `'local'` requires [some additional configuration](https://github.com/suren-atoyan/monaco-react#use-monaco-editor-as-an-npm-package).
`onChange`	`(value: string) => void`		onChange value for controlled input
`onCopy`	`() => void`		Called whenever the copy icon is clicked
`onFocus`	`() => void`		Called whenever the code editor gets the focus
`onSearch`	`() => void`		Called whenever the search icon is clicked
`required`	`boolean`		Adds required attribute to the input and red asterisk on the right side of label
`value`	`string`		Value for controlled input
`withAsterisk`	`boolean`		Determines whether required asterisk should be rendered, overrides required prop, does not add required attribute to the input

Examples

Python language

Extension

Define an extension using Python

1
import {CodeEditor, useForm} from '@coveord/plasma-mantine';
2

3
const Demo = () => {
4
    const form = useForm({
5
        initialValues: {
6
            code: 'def my_extension():\n\tprint("Not implemented yet.")\n\nmy_extension()',
7
        },
8
    });
9

10
    return (
11
        <CodeEditor
12
            language="python"
13
            label="Extension"
14
            description="Define an extension using Python"
15
            monacoLoader="cdn"
16
            {...form.getInputProps('code')}
17
        />
18
    );
19
};
20
export default Demo;

XML language

Some XML structure

XML markup of the add icon svg

1
import {CodeEditor, useForm} from '@coveord/plasma-mantine';
2

3
const Demo = () => {
4
    const form = useForm({
5
        initialValues: {
6
            markup: '<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"><circle cx="8" cy="8" r="6.5" stroke="currentColor"/><path d="M5 8H11M8 5L8 11" stroke="currentColor" stroke-linecap="round"/></svg>',
7
        },
8
    });
9

10
    return (
11
        <CodeEditor
12
            language="xml"
13
            label="Some XML structure"
14
            description="XML markup of the add icon svg"
15
            monacoLoader="cdn"
16
            {...form.getInputProps('markup')}
17
        />
18
    );
19
};
20
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