A shared vim editor built on slate.js for the enthusiasts out there!
Collaborative tools are the need of the hour. Services like google docs work great, but developers sometimes need a quick share and an environment they are used to. Here is where SlateVim comes in.
Used making Slate.js it offers an excellent text editor along with the commands vim is famous for. It packages the power of Vim with the comfort of Google Docs into one.
> npm install yarn
> yarn --version
1.22.4- Clone the repository.
> git clone https://github.com/ridhambhat/SlateVim.git && cd SlateVim- Install required dependencies with
yarn.
> yarn install- Start development client.
> npm start- Navigate to http://localhost:3000.
Adapted from Vim Cheat Sheet.
Switch mode
| Action | Command |
|---|---|
| Change to Insert Mode | i |
Copy, cut, paste
| Action | Command |
|---|---|
| Yank (copy) line | yy |
| Yank (copy) from cursor position to start of next word | yw |
| Yank (copy) from cursor position to end of line | y$ |
| Yank (copy) from cursor position to start of line | y0 |
| Paste after cursor | p |
| Paste before cursor | P |
| Delete (cut) line | dd |
| Delete (cut) from cursor position to start of next word | dw |
| Delete (cut) from cursor position to end of word | de |
| Delete (cut) from cursor position backwards to start of word | db |
| Delete (cut) from cursor position to end of line | D or d$ |
| Delete (cut) from cursor position to start of line | d0 |
| Delete (cut) single character | x |
| Cut line and enter Insert mode | cc |
| Cut from position to start of next word, then enters Insert Mode | cw |
| Cut from position to end of word, then enters Insert Mode | ce |
| Delete (cut) from cursor position backwards to start of word, then enters Insert Mode | cb |
| Cut to end of line and enter Insert mode | C |
Cursor movement
| Action | Command |
|---|---|
| Move cursor left | h |
| Move cursor down | j |
| Move cursor up | k |
| Move cursor right | l |
| Jump forwards to start of word | w |
| Jump forwards to end of word | e |
| Jump backward to start of word | b |
| Jump to start of line | 0 |
| Jump to end of line | $ |
| Jump to start of document | gg |
| Jump to start of last line | G |
Indenting, dedenting
| Action | Command |
|---|---|
| Indent line one shiftwidth (4 spaces) | >> |
| Dedent line one shiftwidth (4 spaces) | << |
Undo, redo
| Action | Command |
|---|---|
| Undo | u |
| Redo | Ctrl + r |
Switch mode
| Action | Command |
|---|---|
| Change to Normal Mode | Escape |
- Handling change events in Slate.js to sync text across users.
- GraphQL on AWS Amplify gave some trouble while storing the user data.
- A working demo at the end of the week while working with new technologies.
- Integrating GraphQL swiftly was a great experience.
- After digging into the documentation and codebase of Slate.js, we are beginning to understand how it works from the inside.
- Have a better understanding of AWS Amplify and serverless technology.
- Using GraphQL firsthand introduced us to a new way of working with the backend.