The code editor lets users edit an asset’s underlying code. When the code is saved, the preview iframe is refreshed to view the changes. The code editor component uses CodeMirror plugin for the text editor, along with CodeMirror add-ons to reproduce handy features such as:
- match brackets when one is selected
- automatically insert a closing bracket
- comment out selected line(s) ( Ctrl + / )
- format the code ( Alt + Shift + F )
- fold code
- hints – NOTE: this is not implemented yet
State
The code editor edits state.code. The code’s current value is stored in state._code on key down. When using Cmd + Z to undo, the editor will set the text to an empty string if there is nothing left to undo, so we prevent changes from setting the code to an empty string.
When the code editor is unmounted, the current value of the code is saved in the store using the setCodeDoc Redux action. This makes sure that changing layouts doesn’t delete unsaved changes.
Error Reporting
The code editor listens to window messages. If a shaderError message is received, the corresponding errors are shown in the code using the CodeMirror addLineWidget method.