Its primary goal is to act as an alive cheatsheet. It has to be compact and yet accurate.

Some jobs to decrease its (vertical) size:

• Group related keys (e.g. hjkl, ()) into a line. done.
• Make use of keysDisp property of commandList elements. done.

Some jobs to handle its interactiveness in more elegant way:

• Use assign classes to each elements. done.
• Don't show or hide the whole group. Just hide it when all its children are hidden. partially done.

Some jobs to help newbies:

• Add "new" keyword depend on quest progress.
• Add ex commands to key list.

• Treat Esc key as special command. (e42d45c)
• Build FSM for visual mode, as it accepts motion first and then operation. (85e7d3a)
• Display key helps horizontally. (cba2e0d)
• Add tips that introduces some core commands. (started writing.)
• Adjust sizes of left-middle-right panes. (120e4e3)
• Show text buffer. (22403dc)
• Better error handling for wrong input or command abort. (b18adda)
• Implement FSM for repeat count. (226c5cb)
• Consider partial keys to lookahead display. (e3cd211)

Continue from #1.

The problem we want to solve is to defining a function such that

• Given
  • A keypress
  • History of keypresses (hope this is omitted)
  • Current State (using custom FSM)
  • Current vim mode (could be included in FSM)
• Returns
  • LIst of legal keypresses.

a.k.a. clipboard, or registers.

Vim has many registers. Most of them are named like a and b. And there is an unnamed buffer (actually named as "). This unnamed buffer is updated every time I execute the change, copy, or delete command.

Since this project is for beginners, just displaying the unnamed buffer will be enough.
Major reason for showing register is to demonstrate that delete operation is actually cut operation.

In keymap/vim.js, is a private class Register. It has methods like setText(), toString() and so on.
I can hook up a CodeMirror signal and pass its content thorugh signal argument.

Vim Grammar
http://takac.github.io/2013/01/30/vim-grammar/
http://takac.github.io/assets/grammar-slide.html
http://stackoverflow.com/questions/1218390/what-is-your-most-productive-shortcut-with-vim/
http://yanpritzker.com/2011/12/16/learn-to-speak-vim-verbs-nouns-and-modifiers/

http://regexone.com/lesson/2
Use "notes" on the right.

Some elements in CodeMirror (and the ones defined in vim keymap) are styled as element styles. I want them to be styled through CSS classes. The list of missing parts is:

• CodeMirror-linenumbers: font color
• CodeMirror-dialog: font color, font color on error
• Selected text should refer to CodeMirror-selected and CodeMirror-focused.CodeMirror-selected.

Two cases are involved.

1. In normal mode, press "cc". This is "change this line" command. So Vim should result in insert mode. CodeMirror seems to work correctly, but the FSM does not.
2. In visual mode, press "c". This terminates the visual mode and allow changing that part. So again, Vim should end up in insert mode. Both CodeMirror and the FSM arrives in Normal mode.

• Go to next level via closing this file. A shell-like frame replaces vim area and let user choose a level, or next level, redo this level with simple command.
• Each level is a file. All the descriptions are inside vim. There should be an area to test this behaviour. i.e. practice targets.
• Number of levels should be around 10. Too many will exhaust the learner.

Requirements:

1. Use live keys sets (do not use defaultKeyMap[]. overrides from API calls should be considered)
2. One function to build (Mode, Key) -> (command name or command type)
3. Another function to build (command type [, keybuf]) -> (command candidates)