-
Notifications
You must be signed in to change notification settings - Fork 37.4k
Description
Does this issue occur when all extensions are disabled?: Yes
- monaco-editor version: 0.45.0(5e5af013f8d295555a7210df0d5f2cea0bf5dd56)
- Browser: AppleWebKit
- OS Version: iPhone OS 16_3_1 like Mac OS X
- User-Agent:Mozilla/5.0 (iPhone; CPU iPhone OS 16_3_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148/0.1.0/Mobile_Lunar/4.3.8/codemao
Steps to Reproduce:
The issue can be reproduced as long as:
- Ensure to use the Monaco editor embedded in AppleWebKit on an iPhone, ensuring that the user agent does not contain the word "Macintosh" but includes "AppleWebKit".
- Make sure the user agent does not contain the word "safari" or "chrome".
When embedded in AppleWebKit on an iPhone, the usability of the Monaco editor is severely compromised. You can only focus into the editor, seeing the cursor blinking at the beginning of the first line, and cannot change the cursor to other positions in the rows and columns (which also means you cannot select text, etc.).
However, it works fine in Google Chrome, Safari, or on Mac and Android devices. I found the following related issues and fixed the problem by adding 'user-select: auto':
- Can't click anywhere except last line, if embedded in WebKit controller on Mac monaco-editor#1255
- Native text selection appears in code editor #44517
I'm raising this issue mainly to inquire whether the official team has considered adding the 'enable-user-select' class when the user-agent 'isWebkitWebView'. Could you please provide some insights into the reason behind this decision? Thank you very much! @alexdima
Here are some details about this issue:
By debugging the relevant source code (_actualDoHitTestWithCaretRangeFromPoint), I found that after the user touches the screen, when the editor performs hit testing, the range returned by the caretRangeFromPoint method is null. Therefore, the hit test ultimately returns null, and we cannot obtain information about the hit object.
This results in the inability to change the cursor position.
Upon further inspection of the source code, it was found that when running in an environment where the user agent contains the words 'Safari', 'Chrome', or 'Macintosh', it works fine.
// microsoft/vscode/src/vs/editor/browser/config/editorConfiguration.ts
function getExtraEditorClassName(): string {
let extra = '';
if (!browser.isSafari && !browser.isWebkitWebView) {
// Use user-select: none in all browsers except Safari and native macOS WebView
extra += 'no-user-select ';
}
if (browser.isSafari) {
// See https://github.com/microsoft/vscode/issues/108822
extra += 'no-minimap-shadow ';
extra += 'enable-user-select ';
}
if (platform.isMacintosh) {
extra += 'mac ';
}
return extra;
}
// microsoft/vscode/src/vs/base/browser/browser.ts
export const isFirefox = (userAgent.indexOf('Firefox') >= 0);
export const isWebKit = (userAgent.indexOf('AppleWebKit') >= 0);
export const isChrome = (userAgent.indexOf('Chrome') >= 0);
export const isSafari = (!isChrome && (userAgent.indexOf('Safari') >= 0));
export const isWebkitWebView = (!isChrome && !isSafari && isWebKit);
export const isElectron = (userAgent.indexOf('Electron/') >= 0);
export const isAndroid = (userAgent.indexOf('Android') >= 0);