# C0VM.ts Editor

We have implemented the C0 Code editor using [CodeMirror 6](https://codemirror.net/). 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:

```typescript
<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:

![Screenshot 2022-06-10 234630](https://user-images.githubusercontent.com/47029019/173171386-5e226244-e260-482a-b8f3-4b041210891a.png)

#### 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.

![Screenshot 2022-06-10 234906](https://user-images.githubusercontent.com/47029019/173171395-2a55f3d4-23fa-4901-bae7-a8383d038503.png)

*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](https://user-images.githubusercontent.com/47029019/177196461-b45b19c2-df06-4eae-9d68-97590404435b.png)