C0VM.ts Editor

We have implemented the C0 Code editor using CodeMirror 6. The C0 Editor is defined in src/components/c0-editor.tsx.

The CodeMirror provides an extensions interface for us to add features on the original code editor. The editors we have loaded is shown below:

<ReactCodeMirror
    theme="light"
    basicSetup={false}
    onUpdate={(v) => 
        {if (v.docChanged) this.props.updateContent(v.state.doc.toString())}
    }
    extensions={[
        breakpointGutter,
        LoadDocumentPlugin,
        basicSetup(),
        keymap.of([indentWithTab]),
        indentUnit.of("    "),
        language.of(BC0Language),
        execLineHighlighter,
]}/>

onUpdate

When the code editor has an update and the update contains docChange, the editor component will call the state-update function in C0VMApplciation component (root component) to set the EditorContent state to be consistent with the content of editor.

breakpointGutter

Defined in /src/components/editor_extensions/breakpoint_marker.ts, this extension will handle the toggle, display and disable of breakpoints in the bc0 code.

By clicking on the left of line number, one can activate/deactivate a breakpoint on a specific line.

When a breakpoint on a specific line is activated, a 🔴 sign will be displayed on the left of line number, as shown below:

execLineHighlighter

Defined in /src/components/editor_extensions/exec_position.ts, this extension will read the lineNumber from C0_RUNTIME global variable and render a yellow highlight on the line currently being executed.

The yellow highlight indicate that Line 19 is just executed in C0VM

LoadDocumentPlugin

Defined in /src/components/editor_extensions/blank_load.ts, this extension will show up a prompt to guide user to import files into the C0VM code editor through standard file-selection panel.

image