Code Editor

Overview

The Code Editor, as the name implies, is where the actual editing of user javascript takes place. It features line numbers, syntax highlighting, and will subtly highlight the line that the user is currently editing. While the application is in "execution mode", the code editor will go into read-only mode, and will highlight the line currently being stepped over.

Technical Walkthrough

The actual functionality of the Code Editor component is provided by Ace Editor. We are able to use it in our project using a React wrapper for Ace called react-ace. The Editor component found in view/editor/index.js serves as a wrapper for react-ace, allowing us to hook up our own props to the Ace Editor. The Editor component is instantiated in view/index.js and receives four props:

isRunning : A boolean reflecting whether the application is in execution mode. If true, Ace editor is set to read-only mode.

highlightedLine : If the application is in execution mode, the currently highlighted line in the Ace editor is set to this value.

handleCodeChange : The function that is called whenever the text value of the Ace editor changes. This function is originally defined in view/index.js. It sets the code attribute of the state of the Interpreter component in view/index.js to reflect the most up-to-date contents of the Code Editor.

code : This is the value of the code attribute of the Interpreter component. The contents of the Ace editor are set to this prop. It is done this way to ensure that the contents of the Code Editor are properly synchronized with the code that will be sent over to the interpreter upon execution.