Recently I've been struggling to write codes within the browser inside a textarea. Before I switch to firefox there is a chrome plugin called wasavi which neatly overlay the textarea with a Vim editor.

But the plugin fails in firefox. And I couldn't find any alternatives that was better or acceptable then that.

So I decided to make one myself. Project links below.

Using the textarea

The idea of using only the textarea is to minimize the footprint left on the original html. But actually this approach has some drawbacks such as unable to do syntax highlighting or have matching brackets automatically highlighted.

Since I do not intend to create a full-fledged Vim inside the textarea. I will not implements plugins nor .vimrc ( although it is doable ). This is designed for lightweight use or casually writing demo codes online.

Approach

The textarea will be treated as a screen buffer, which each rows is a line of buffer ( called LineBuffer ). This basically allows me to do ... everything. Since the textarea is my screen. I need an API to *drive* the screen. Which means I need to create an engine ( called LineFeeder ) that renders the text from Vim.

I also planned to implement the split-screen feature I used all the time. Which I couldn't find any in currently available web-vim plugins. Using this approach I believe I could later manipulate the content instance much more easier.

Reverse engineering Vim

Instead of reading the Vim source codes ( which I think it is impossible for me to comprehend ). I *reverse engineered* it by mimicking the behavior for each button I pressed.

HJKL

The first thing have been implemented is the basic navigation of vim ( hjkl ). Because of wordwrapping It was unexpectedly hard to make and it already totals about 1600 lines of code. I could easily see how big this project will become.

The most tricky part for me is to translate the screen mapping. Calculating the offset of the cursor of it's position relative to content and the screen is too damn hard. ( I seem to be weak for these type of programming ). There were so many factors to check to keep the display intact, and I didn't even look into the *nowrap* mode yet.

Next I will be implementing the aixu commands.