Customize Orion Editor to have multiple cursors on Eclipse Che

Last month I have talked about a pluggable editor for your website. If you haven’t seen it yet just go here and take a look. 🙂 As you all know Eclipse Che is a cloud based developer IDE. This IDE uses Orion as the editor. Since this is an open source product we can customize the editor as we want. You can simply develop extensions for eclipse che by referring this tutorial

I am currently working on a GSOC project and as the first stage of that I have to add some features for pair-programming using Eclipse Che. You can start the pair programming session on Eclipse Che using this repository. All the instructions that you will need is there. 😀 Still I am at the development phase and I thought of sharing what I have done so far. So please take a look at the bellow video.

Eclipse che provides some apis to do this very easily. If you follow the above tutorial on developing extensions you can simply develop an extension.  Follow below steps to add multiple cursors.

  • Using dependency injection inject “EditorAgent” in to your extension.  Following code does the rest of the work.
this.activeEditor = editorAgent.getActiveEditor();
if (activeEditor instanceof TextEditorPresenter){
   this.textEditor = (TextEditorPresenter)activeEditor;
int pos = textEditor.getDocument().getCursorOffset();
final TextPosition from = textEditor.getDocument().getPositionFromIndex(pos);
final TextPosition to = textEditor.getDocument().getPositionFromIndex(pos);
final TextRange textRange = new TextRange(from, to);
String annotationStyle = RESOURCES.getCSS().pairProgramminig();

If you have managed to do this you can add any kind of annotation very easily. 🙂 Please note that I have created a CSS file and it contains the required css for this arrow.  Youu can find all the requires source code from bellow links.

That’s it. If you need to know more, feel free to contact me 😉

2 Comments Add yours

  1. Tyler says:

    This feature is the one that I most excited about coming into Eclipse Che. And there are 100s in progress. Cannot wait to test this out!

  2. Pingback: Eclipse Che | Blog

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.