Trying out ACE as simple touch display (iPad) editor


ACE web editor

When I go coding on the go, I currently have a very basic text field on my mobile devices to code in. There is no code highlighting or code completion or anything like that; just a boring text field like Notepad. Now there are (apparently) hordes of people who like to write code in Notepad, but I am not one of them.

The first step to get productive on iOS or Android devices when writing code  is to download a better keyboard. With the standard keyboard, it is really not possible to do much of anything on either device as far as coding is concerned. For iOS I selected ProType ; despite the bad reviews (which are mostly about the condensed style of the keyboard), I found that after a bit of getting used to, it works really well and much faster than the default keyboard for mostly anything, including chat, but definitely for coding.

For Android I use the Hacker’s keyboard which is great; on tablets it’s brilliant, but on phones it does the trick as well.

With that out of the way i’m capable of writing code relatively ok in a ‘notepad’ like TextView, but it’s of course not optimal. So then you have the options to buy some component which does highlighting and possibly code completion for you; there are a few of those but they are not very complete nor very well done. Writing something myself is an option but it will take too much time and it won’t be very robust for months or even years probably. So I opted to try integrating something open source. While it is not a native solution, ACE is a very complete code editor written in Javascript, which seems to run relatively well on mobile browsers. A native solution would have been a lot better, but I cannot find any which are advanced enough to use; Scintilla definitely is, but it does not work on Android and it would take me quite a bit of time to integrate it properly in iOS.

To properly use ACE I would need to integrate it into a WebView to integrate it into my IDE. And that is where it gets hairy. I used ACE before on the iPad on a site which uses a few tricks to make it work properly on a tablet and it was quite ok to work with. At least more than enough to like this as a solution for my IDE. In theory.

Wrapped in a WebView in Xamarin Forms (Github link) for iOS and Android, I believed I had something ok to work with. Then the issues started; obviously the scrolling in the editor is not related to the scrolling in the WebView and as such didn’t actually work at all.

Things like this should make it possible to get that to work on a touch screen, but you won’t get it to work very well unfortunately. I experimented a bit with connecting the native UIScrollView coordinates to the scrollBy() of the ACE editor but that didn’t help either.

The most stable result I got was using;

  1. public AceWebViewRenderer() {
  2. ((UIWebView)this.NativeView).ScrollView.Bounces = false;
  3. ((UIWebView)this.NativeView).ScrollView.ScrollEnabled = false;
  5. }

However that was very far from perfect as well. Things that are broken and hard to fix (as far as I know):

  • scrolling
  • double cursor when you have text far to the right (CodeMirror always has this)
  • second delay when moving the cursor by tapping
  • completions like () {} [] are very annoying to work with on a touch screen

Because I lack time in experimenting further and the current results are not very positive, I think I will try to find something else to resolve this. The perfect solution, to me, would be an editor (and keyboard additions) like the one used in Codea; it works well and is robust. I believe it to be fully custom made though which, unfortunately, seems the most satisfying route at this moment…

Still hoping for a better solution…

Comments are closed.