<drayman-code-editor />

Code Editor powered by CodeMirror library.

Example of usage

export const component: DraymanComponent = async ({ forceUpdate }) => {
    let code = `console.log('Hello, World!')`;

    return () => {

        return (
            <drayman-code-editor
                label="Amazing code"
                language="javascript"
                value={code}
                onValueChange={async ({ value }) => {
                    code = value;
                    await forceUpdate();
                }}
            />
        );
    }
}

Hierarchy

DraymanCodeEditor
DraymanElementsProps
- DraymanCodeEditorProps

Index

Properties

Optional disabled

disabled: boolean

Wether code editor should be disabled.

Optional label

label: string

Label shown above the editor.

Optional language

The language of the code editor. By default, the language is set to 'javascript'.

Optional onReady

onReady: ElementEvent<{}>

Executed when the browser-side editor is ready.

Optional onValueChange

onValueChange: ElementEvent<{ value: string }>

Executed with an input value from user.

Optional readOnly

readOnly: boolean

Wether code editor should be read only.

Optional ref

ref: string

Optional style

style: CSS

Optional value

value: string

Value of the code editor.