Any Plan for Mobile

[gynet]

I know it may not the original goal of monaco-editor, but it would still be nice it could be able to run in a mobile browser.

[alexdima]

Last I checked, the editor loads fine in mobile browsers. The challenge is to handle typing correctly and to handle selection setting via touch. Any PR welcome.

[Trass3r]

Any news on this? Since the editor is used on godbolt.org now it's pretty bad you can't even change a single letter from a mobile browser. Even with disabled word suggestions it gets messed up.

[barneycarroll]

To whom it may concern, CodeMirror are explicitly working on this currently and seeking funding for it: https://codemirror.net/6/. The current implementation – although far more bare bones than Monaco –works passably well – certainly better than Monaco. Flems.io is a good example.

[JacobEvelyn]

@alexandrudima do you have a sense for where in the vscode codebase a PR would need to touch to add mobile support?

[jnischler]

+1

[kognise]

Any news? This would be awesome, and would greatly improve platforms like Repl.it.

[metasong]

no update?

[amatiasq]

Ping?

[fabiospampinato]

Monaco's mobile experience (Playground) is abysmal compared to that of CodeMirror 6 (Playground), IMHO Monaco should strive to be head and shoulders above anything else, but currently it's just unusable on mobile, I think this gap should be closed as soon as possible as it undermines Monaco's long-term viability.

[alexdima]

@fabiospampinato It would be very helpful to have individual issues with steps around what exact problems you're running into, what platform you are trying, using external keyboards or not, etc.

[fabiospampinato]

@alexdima I'll make standalone issues for each individual problem I can find 👍

[n8sabes]

While I have the Monaco Editor working in a TypeScript React.js project, touch support is so incredibly limited in Monaco, it makes the Monaco Editor a non-starter due to current market penetration of mobile devices.

I would appreciate touch enhancements with simplified working code example that is:

1. TypeScript with React ^17 built from Create React App (CRA) yarn create react-app monaco-mobile-example --template typescript
2. Mobile Touch support for multi-line select, etc.
3. CSS language auto-completion

Problem 1: Touch is limited to one word or insertion point on one line at a time. Problem 2: Roll-up keyboard overlays editor area. This may be best solved within the app itself, but example code would be helpful for a refined UX. If it can be solved within Monaco based on node size/position, that would be ideal.

This has been a feature request since 2016, and other issues remain open such as this one from 2019: Feature request: mobile (touch) support #1504

[trusktr]

Workaround is to use a non-Monaco editor on mobile, then upgrade the experience to Monaco on Desktop.

For mobile, you can use Prism syntax highlighter, along with the contenteditable HTML attribute. It works perfectly on all mobile devices.

For an example of a contenteditable editor using Prism for syntax highlight, see the live code examples here and notice the text is fully editable on mobile (pardon the layout, it is not mobile optimized yet, but text editing works):

https://lume.io/docs/#/examples/hello-world/

If you want to get an idea how to make an "editor" with contenteditable and Prism, see my live-code. It is fairly short. You could easily learn how to do it. Or you could perhaps directly import the Editor Vue component from there and pass it your code string.

To try the live demo, after cloning run

npm install
npm start

Oh, also check out react-live. It does pretty much exactly the same thing, but in React instead of Vue. It also uses a simple regex highlighter (f.e. Prism) with contenteditable.

I think this is the only way to have something now without waiting for VS Code Monaco to be updated.

The only downside is you won't have intellisense or other cool features on mobile, but at least it'll work.

[n8sabes]

@trusktr, thank you. Crazy inefficient, but will use multiple editors as a workaround. Lazy loading will help and will include a switch to enable manually switching between them for unknown edge cases.

What is the most reliable way to determine when to use the mobile (non-Monaco) editor? What about some laptops that include a touch screen?

// Method 1
const isMobile = () => 'ontouchstart' in document.documentElement;

// Method 2
const isMobile = () => /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);

// Method 3
const isMobile = () => !!navigator.maxTouchPoints;

etc...

[trusktr]

That's a good question! I normally just go by screen size for responsiveness, but a desktop user could definitely have a touch screen.

Maybe, if the size is desktop, start with Monaco. If a touch is detected, maybe upon touch interaction inside the Monaco editor a prompt pops up and says something like "The editor does not support touch. Do you wish to switch to a touch-compatible editor without features such as intellisense?"

As for smaller screen sizes, it could just load the Prism + contenteditable editor and never load Monaco. Maybe there's an option for mobile users (in like a setting area or something) to force the Monaco editor (in case they have a keyboard and mouse attached to their phone).

In this way, an isMobile methods could be avoided. If I had to choose one of the above, I'd choose one like method 2.

Maybe method 2 coupled with the size-based heuristics, along with setting having an option to choose mode, and the prompt on desktop in case someone starts touch interaction, may be the best way.

Wish Monaco simply supported touch though.

Someone just needs to finally go in there and update it to use pointer events. It shouldn't be that hard.

[n8sabes]

@trusktr, Good points. I like your pop-up idea to downgrade the editor if a touch event is detected in Monaco. I agree about this getting scheduled. Prism + contenteditable editor looks interesting.

[n8sabes]

@alexdima @rebornix, What will it take for Mobile / Touch to be prioritized? With the market penetration of mobile devices, this seems pretty high value in the ecosystem whereby Microsoft is providing a key enabling technology in the developer/product toolchain (electron/app and web-base).

For anybody interested, here are the related mobile / touch backlog issues over the last five (5) years.

Oct 25, 2016 This Issue -- Any Plan for Mobile #246

Nov 9, 2017 Unable to perform text selection using touch screen #626

Dec 30, 2017 how to select text in mobile phone's brower #682

Mar 13, 2019 Monaco in Mobile #1365

Jul 9, 2019 Feature request: mobile (touch) support #1504

Thank you for bringing it to the attention of the product and development teams.

[Knar33]

I just ran into this on Babylonjs playground's editor, I would love to see this fixed 👍

[bebuch]

The editor is used in GitLib which makes it currently unusable on mobile devices. Please fix it! 🙏

[gynet]

Other newly added features could bring more difficulty to implement or fix this. Therefore, addressing this issue as early as possible would reduce the overall cost. It also aligns with the company's vision, "mobile first, cloud first", Please take this as a higher priority.

[GrahamTheCoder]

After upgrading to the latest version I found the mobile experience went from totally unusable to just clunky. Not sure if that was intentional, or some other factor, but glad to see improvement!

[itpropro]

Any updates on the roadmap for mobile support? It's a little bit strange that Microsoft's mentioned "mobile first" strategy is not considered in one of its most popular products.

[Lemmingh]

The mobile frameworks might be to blame.

Taking a glance at VS Code's source and MDN, I saw so many events are dispatched in abnormal ways on mobile browsers, and workarounds are sometimes unbelievably complex.

[Qbyte248]

Disclaimer: I'm not familiar with the css classes.

I added the div attribute contenteditable = "true" to all divs with class="view-lines monaco-mouse-cursor-text". Then the text selection and cursor placement were much better! (on my iPhone and iPad)

Now I don't know where to add this attribute in this repository.

Note: I copied part of this website and modified the html directly

[quinton-ashley]

I was considering using monaco in a project but since there's no mobile support it's a non-starter. A lot of my students use iPads. Y'all have been hearing the same thing from developers since 2016 and did nothing about it? What a joke lol

[DracoClaw]

HI there! Has there been any updates on this?

[vwkd]

This has bitten me several times including on github.dev. Even only allowing the mobile keyboard to open would already make a difference. It isn’t as easy and tell every website owner to “just fallback to a dumb editor on mobile”. This won’t scale.

At this time, the prevalence of mobile is undeniable. Why does Microsoft actively avoid supporting mobile?

Given that it’s the most upvoted issue in the repo for more than half a decade, I can not help but wonder if Microsoft has some hidden incentives, e.g. they don’t have their own phone OS (RIP Windows Mobile), so supporting mobile use would only help competitors…

[tsenguunchik]

Any update on this?

[Snooz82]

Please reconsider implementing this.

at least in iOS the most missing feature is the possibility to move the cursor with holding space.

enter is also sometimes a bit weird, but the is not that big issue.

[geekalaa]

+1