SlateVim

Create or join an existing room via HomePage
You standard plaintext editor opens up in insert mode.
GIF
As you or your partner types, the text gets synced in realtime.
GIF
The magic happens in normal mode where you can execute the vim commands you want.

SlateVim

📖 Introduction

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.

⚙️ Preliminaries

Installation and set up

Ensure that you have node installed.
Ensure that you have yarn installed.

> 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.

👨‍💻 Command Summary

Normal Mode

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`

Insert Mode

Switch mode

Action	Command
Change to Normal Mode	`Escape`

🐱‍👤 Challenges we ran into

Handling change events in Slate.js to sync text across users.
GraphQL on AWS Amplify gave some trouble while storing the user data.

🏆 Accomplishments that we are proud of

A working demo at the end of the week while working with new technologies.
Integrating GraphQL swiftly was a great experience.

🧭 What we learnt

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.