Simply reloading a page, or navigating away and back reverts the lock state.

Left Panel: Array of Token Types with check boxes for adding highlights
Center: Text Form for adding code. Can click on token to highlight
Right: Display token name, Syntax DB description and Code Snippet

Just display each token with a check box

Right now Redis allows for storing arbitrary JSON as a string body. Ideally, this should be changed to accept only JSON that has the right structure.

https://github.com/evilstreak/markdown-js

This would stop the parsing and enter "Annotation Mode"

Include support for more tokens

Save Snippet will save the entire state of the snippet.

1. Open a modal that allows you to name and confirm the snippet
2. Confirm posts to redis that

When a user clicks the save button, if the snippet doesn't have a title, he/she should be prompted to enter a title

It has too much real estate. Shrink it down/move it/whatever

Use express server
Link to master branch of codesplainUI
Include Python parser with the codebase

I propose making a toolbar for the snippet editor to provide a hub for modifying options for the editor, such as

• Snippet name (Add or change name)
• Snippet language
• Lock button
• Save/Save As
• Clear
• Turn On/Off Highlight(maybe)

Creating a new snippet currently involves navigating back to the home screen manually in the browser bar. There should be a button that does this for the user.

Checking multiple boxes will highlight tokens in different colors

Webpack build takes about 30 seconds right now.

The annotation panel/window would be editable.

• Add a Save button that saves that annotation to the state "Annotations" array
• Click cancel to exit annotation.
• Clicking outside the box does nothing

Update the parser packaged with the UI to include the changes introduced here: maryvilledev/codesplain@32a38fa

Add an Express.js server that allows the app to interface with the Redis instance, and will also serve the React application.

https://devcenter.heroku.com/articles/heroku-redis#connecting-in-node-js

LanguageSelector is related to the SnippetArea component, yet is in a different area from it. We should move it on top of the SnippetArea,

I like that you can see the "Go" language selector, but we should disable that selection until we have that functionality

The code for obtaining an AST of live input now exists. The JSON chunking code from the demo_ui project needs to be ported in order to process those ASTs.

Recreate Joel's live parsing in the Material UI. No highlighting required. Just parse and create the tree in real time.

The express server wraps a small API for Redis key-value stores. Add tests

Keep things that are simply rendered components (Components) apart from things that hold state and do function calls (Containers)

https://medium.com/@learnreact/container-components-c0e67432e005#.52skwr12a

Filters that share a token type (ForLoop) would be displayed as []ForLoop(2)

If you create a snippet and save, then return to that page, the syntax highlighting will be gone.

Links to #85

The right column should only be the annotations tabs until other displays are supported

Add to toolbar

Bold and Outlined

The information is a bit redundant and this will help clean up the UI

Until we are actually pulling in parsers by language only display python as an option

Blocked by: issue #28

The info panel has the text "Click on a line number to add an annotation or display one" before the view is locked, but this is misleading because you cannot add annotations before locking the code.