Auto-suggest and live documentation on Khan Academy CS

A new feature familiar to many programmers went live on Khan Academy's programming editor: Auto-suggest, parameter information, and live documentation.

I did a small screencast of that feature when it was introduced as a hackathon project, and before it went live, here.

We expect this feature to:

• Reduce the number of times you need to interrupt your workflow to scroll down to the documentation.
• Save time when writing programs by allowing you to click, tab, or navigate to an auto-suggested function call without having to type it all.
• Make it easier to learn the ProcessingJS library by allowing you to get inline help.

There are 3 main parts to this feature and all of them are included as part of the recently open sourced live-editor:

Inline auto-suggest:

Inline auto-suggest

The ACE editor does provide autocomplete, but we had to modify it to disallow some keywords that we ban (like window), and add the ProcessingJS keywords that we add to the environment.

Parameter help:

Shows you the parameters for the current function call.  The current parameter is displayed in bold and blue.

Parameter help detects when you’re specifying function parameters, and will do a lookup for you.

It will show you the function name, and a list of its parameters.   As you type an argument, it will bold and color the current parameter.

Live documentation:

Highlight over the function name, or parameter to get a description of what the function does.

This allows you to hover over the parameter help and get a description of each function name and parameter relating to the current function.

Click on any function name to go to an example program using that function.