Codesandbox-client: Monaco VIM Support

[CompuIves]

Create VIM support for the Monaco editor, allows us to drop codemirror.

[rebornix]

Hi, this is Peng from VSCode team. I was thinking about adding Vim support for Monaco as well (very likely as an extension). I'm maintaining VSCodeVim (Vim emulator for VSCode) at the same time, considering VSCode API and Monaco API share the same semantics, we may be able to reuse most of the code logic in VSCodeVim.

BTW, your work is insanely awesome (especially when you need to tweak Monaco to make it running smoothly with other components).

[CompuIves]

Hey @rebornix, thank you so much for your work on vscode! I want to thank you and your team for making Monaco standalone, it's really valuable for the online editor progression.

VIM support for Monaco would be really valuable. I'd like to help in any possible way. I know that I'm getting ahead of myself, but If you need any kind of access to CodeSandbox for the extension I can add it. There already is a package called codesandbox-api that's inspired by vscode to give access to some editor features (like showing notifications, renaming modules).

[rebornix]

@CompuIves thanks for all your kind words ;) I dig into our monaco interface and try to see how easy it is to build similar Vim extensions on top of it but unluckily it's not as powerful as VSCode one (which we did some undocumented change to unlock Vim). However due to Monaco's AMD nature, we can easily require necessary module and make the API ourselves.

For example, the API we need to implement Vim is changing the behavior of type. VSCode/Monaco internal/external operations are all registered as commands so to override the default type command can be done in following way

require(['vs/platform/commands/common/commands'], function(command) { 
   var oldTypeCmd = command.CommandsRegistry.getCommand('type');
   var oldHandler = oldTypeCmd.handler
   command.CommandsRegistry.registerCommand('type', function(accessor, args) {
     console.log(args); 
     oldHandler(accessor, args);
   });
});

The rest of the work is just implementing the handler (but it is not as simple as it sounds like). I'm not sure how far you have gone with codesandbox-api, it sounds pretty promising to have another layer of abstraction to make Monaco extension authoring easier, it would be great if I can have access to it ;) Thanks in advance.

BTW, I saw you mentioned a react wrapper for Monaco in https://github.com/babel/website/issues/1287#issuecomment-320487447 . It's another interesting topic as it's not intuitive to adopt Monaco within React, it would be awesome that there is mature React component which helps ppl out (especially webpack configuration).

Lastly it's my first time seeing ppl make really good grammar/theming for React in Monaco, considering there is no code to reuse (unless we move to TextMate syntax one day), well done!

[Arthelon]

I've been using this library as a React wrapper for monaco-editor

[CompuIves]

@rebornix Thank you very much for this info, this is incredibly valuable! codesandbox-api is really basic at this moment, it's in the repo: you can find the barebones here: https://github.com/CompuIves/codesandbox-client/tree/master/src/node_modules/codesandbox-api. It's really basic, but we can easily expand functionality, it's also in TypeScript ;D. For example the type example, we could also show in the UI which type is selected using codesandbox-api.

Yep, I'm using a custom version of the library @Arthelon mentioned, but it took me quite some time to support eg. JSX syntax highlighting (I'm currently adding classnames based on AST nodes, very inefficient but works atm) and ATA. Planning to make this an 'official' library with good support.

[rebornix]

I'd like to share more of my investigation with Vim in Monaco. The fastest way is always converting one existing Vim extension for VSCode to Monaco one. If you take a look at VSCodeVim's code, you'll know that following changes need to be done when porting it to Monaco

• The core part of the Vim emulator should be off VSCode. For example, VSCodeVim defines all motions, operators and actions in https://github.com/VSCodeVim/Vim/tree/master/src/actions, in which we'd better get rid off vscode.xxx API and use Monaco ones.
• Currently VSCodeVim assumes that there might be multiple editors avail in the workspace and read vscode.activeTextEditor quite often everywhere. However in Monaco, first of all there is no such API to access activeTextEditor as there is no such concept in a webpage. Monaco caller should pass in the editor instance.
• we need to require several AMD module, e.g. vs/platform/commands/common/commands to access private API.

This can be a hackathon project within 1 or 2 day, I can help anyways if someone wants to play with it.

[brijeshb42]

Just published monaco-vim. It is inspired by how ace uses vim bindings using Codemirror's VIM keymap code.

[satya164]

Wow! Thanks so much @brijeshb42! Will give it a try.

[CompuIves]

That is awesome @brijeshb42! Thank you so much! I will also play with it.

[satya164]

@brijeshb42 we're now using it on https://snack.expo.io/ and it's been working great! thanks again :)

[brijeshb42]

@satya164 Yeah, I saw your blog post

[SaraVieira]

Issue closed as we dropped the monaco editor in the latest release