monaco-editor: Arrow Keys and other function keys don't work on iOS (Chrome, Safari)

@ryskin

Sorry, it’s just me here. No need to shame me.

If you care deeply about this support, please submit a PR which implements it.

I sent an old colleague on the UIKit team a link to this thread a few months ago and jokingly shamed him for it. I got a winking emoji back and now finally it’s fixed. He wont fess up to having a part in it but he said we should all thank the WebKit team.

Hey, I wrote the fix for CodeSandbox and the only reason it was possible is because CodeMirror has a specific mode for mobile that uses contenteditable (just like @ericcirone describes in their comment). It’s still a super hacky way of solving it though, it’s polling for the range, so it brings its own performance tradeoffs. Creating a contenteditable mode in Monoco is not a simple task to take on, so unless Microsoft is really motivated in solving this problem I find it unlikely to happen.

To be honest, the real fix should be done at the webkit level. There is an open bug about this for a few years now and I’ve also contacted the webkit team about this, they are aware: https://twitter.com/aadsm/status/1032694940684378112?s=21. I haven’t followed up in the meanwhile though.

I’ve created this PR that shows how I implemented some of the needed functionality for Ace https://github.com/ajaxorg/ace/pull/3172

Can confirm. Arrow Keys on my Smart Folio Keyboard work just fine now. Haven’t done any in-depth testing though.

It is still an issue in iOS 12.2 😦

So many time passed and no news, so simple task to do. Shame on you Microsoft, you won’t support apple products

Any updates on implementing a workaround for this problem? As a lot of new browser-based editors depend on Monaco, this would help users accessing these editors from an iOS device a lot.

i download iPadOS 13

and i use something called code-server https://github.com/cdr/code-server

is VS Code running on a remote server, accessible through the browser and it works perfectly in IPadOs 13 ,

finally i can code using vscode in my ipad pro

Also just to put it out there, CodeMirror has this working, arrow keys, on screen keyboard selection and jump around. It seems they are able to pull this off because for mobile they make their elements contenteditable. When that is on, iOS treats it as like it would a textarea. Anything that can be done on that front with Monaco?

Yup, arrow keys, w/ modifiers work as expected.

You can always play around with https://microsoft.github.io/monaco-editor/ and see what’s being supported there.

@aadsm I hadn’t even noticed Cmd/Ctrl are also borked. Option/Alt does work however. For me, getting arrow keys at all (even through hjkl) would be a huge help. The mode could be toggled through a key combo using alt. Here’s a fiddle which toggles the mode using alt+space: https://jsfiddle.net/14pjo572/

I’m gonna add this hack to my self hosted coder.com instance as it will get me most of what I need for now.

@aadsm

To be honest, the real fix should be done at the webkit level. There is an open bug about this for a few years now and I’ve also contacted the webkit team about this, they are aware:

Have you checked the bug recently? They claim to have fixed it in 12.1.3b2 for “some elements”. It looks like they passed the bug off to the UIKit team. I know someone who’s on that team and I’m gonna bug him personally.

@rebornix I just shot you an email with a way to contact them.

@sean256 Any contact for sending out thank you swag would be appreciated!

Besides, thank you all for catching up, testing and keeping us notified about the progress from WebKit side.

@aadsm, @sean256, same here. Its not working on my MTFP2LL/A. I experienced the problem when using coder.com and opened Bug#250. For what’s its worth, I’ve been trying to attack this problem from different ends. I tried to add the Vimacs extension to get vim mode working so I could h, j, k, l to move around. But I guess the product is still new and they are working out the kinks. I was able to add the extension, but not activate it. Others seem to have experienced the same issue Bug#340.

These are great news and makes me really happy!! I’ve thanked Charles Ying on twitter.

@sean256 yes, that’s a good approach. It’s what I did for both CodeSandbox and Glitch (I wrote about it here https://dev.to/aadsm/extending-glitch-2fe1).

@JacobEvelyn once the bug is fixed then we should be good to go. Seems like a bug to me if it’s not popping up the keyboard, and I’d imagine to be easly fixable.

@sean256 yeah I looked at it at the time, from the comments it seems it still doesn’t work with textareas (they vowed to look into it). Yeah, key events do work on textareas in general so the hjkl solution has always worked. The problem lies with cursor and modifier keys like Cmd/Ctrl.

@aadsm @maxjerin https://jsfiddle.net/t9z72dgj/

You can use hjkl as arrow keys, even on the iPad.

@maxjerin I found a way to intercept and modify KeyEvents and did get other keys to trigger arrow actions in the editor. When I have time I’ll put together a POC.

@aadsm

To be honest, the real fix should be done at the webkit level. There is an open bug about this for a few years now and I’ve also contacted the webkit team about this, they are aware:

Have you checked the bug recently? They claim to have fixed it in 12.1.3b2 for “some elements”. It looks like they passed the bug off to the UIKit team. I know someone who’s on that team and I’m gonna bug him personally.

My iPad MFTL2 software version is 12.1.4 and bug still persists (testing with Smart Keyboard).

@alexandrudima would there be an appetite for solution like the one @tobmaster suggested?

There seems to be a fix for this at codesandbox-client https://github.com/CompuIves/codesandbox-client/issues/507

Maybe it’s possible to use it as well? Having a ubiquitous editor would be awesome.