VimArea - Day 1 - hjkl
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.
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.
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.
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.
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.
Articles in the series
VimArea - Day 30 - :'<,'>, marks and PRINT ( incomplete )
VimArea - Day 27 - Other *common* commands
VimArea - Day 25 - VA_REC
VimArea - Day 23 - The quirky tab character
VimArea - Day 16 - line shifting
VimArea - Day 14 - VISUAL - selections
VimArea - Day 13 - The command bar
VimArea - Day 10 - The wicked PUT command
VimArea - Day 9 - VISUAL - SyntaxAnalyzer
VimArea - Day 7 - Complicated control schema
VimArea - Day 5 - Commands ( failed )
VimArea - Day 2 - aixu
VimArea - Day 1 - hjkl
VimArea - Day 27 - Other *common* commands
VimArea - Day 25 - VA_REC
VimArea - Day 23 - The quirky tab character
VimArea - Day 16 - line shifting
VimArea - Day 14 - VISUAL - selections
VimArea - Day 13 - The command bar
VimArea - Day 10 - The wicked PUT command
VimArea - Day 9 - VISUAL - SyntaxAnalyzer
VimArea - Day 7 - Complicated control schema
VimArea - Day 5 - Commands ( failed )
VimArea - Day 2 - aixu
VimArea - Day 1 - hjkl
Useful Links
Project home | DemoTue Mar 15 2016 18:16:20 GMT+0000 (Coordinated Universal Time)
Last modified: Sun Apr 10 2022 07:16:57 GMT+0000 (Coordinated Universal Time)
Comments
No comments here.
Do you even comment?
website:
Not a valid website
Invalid email format
Please enter your email
*Name:
Please enter a name
Submit
抱歉,Google Recaptcha 服務被牆掉了,所以不能回覆了