When clicking inside the editor, the selected text is offset from the actual cursor position.

[deineryao]

This is a page with nested iframes, and the Monaco Editor is embedded within one of the iframes. When clicking at position A inside the editor, the cursor actually moves to position B, and the corresponding text at position B is also highlighted. Based on my deduction, the offset distance is exactly equal to the size of the page occupied by the external elements outside the iframe. When I remove elements outside the iframe, such as elements on the left and top, and then click inside the editor, the focus is normal.

The version of @monaco-editor/react is ^3.8.3.

[suren-atoyan]

@deineryao could you please try to update to the latest version?

[deineryao]

@deineryao could you please try to update to the latest version?

I have tried, but the project is quite old and contains various dependencies. Upgrading it would introduce various issues that render the project unusable. Is there any other alternative solution available?

[suren-atoyan]

try to use loader-config to load a different version of monaco-editor. Like:

import { loader } from '@monaco-editor/react';

loader.config({ paths: { vs: 'https://cdn.jsdelivr.net/npm/[email protected]/min/vs' } }); // try different versions

The issue seems to be related to microsoft/monaco-editor.

[ch1ny]

I had the same question in my programme. And I solved this by updating the version of monaco-editor like this:

import { loader } from '@monaco-editor/react';

loader.config({
  'vs/nls': {
    availableLanguages: {
      '*': 'zh-cn',
    },
  },
  paths: {
    vs: 'https://cdn.jsdelivr.net/npm/[email protected]/min/vs',
  },
});

Maybe this would help.

[JSluowen]

I had the same question in my programme. And I solved this by updating the version of monaco-editor like this:

import { loader } from '@monaco-editor/react';

loader.config({
  'vs/nls': {
    availableLanguages: {
      '*': 'zh-cn',
    },
  },
  paths: {
    vs: 'https://cdn.jsdelivr.net/npm/[email protected]/min/vs',
  },
});

Maybe this would help.

Thank you , I also encountered this problem. Please tell me , What does this configuration mean?

[ch1ny]

I had the same question in my programme. And I solved this by updating the version of monaco-editor like this:

import { loader } from '@monaco-editor/react';

loader.config({
  'vs/nls': {
    availableLanguages: {
      '*': 'zh-cn',
    },
  },
  paths: {
    vs: 'https://cdn.jsdelivr.net/npm/[email protected]/min/vs',
  },
});

Maybe this would help.

Thank you , I also encountered this problem. Please tell me , What does this configuration mean?

It has been a long time since I solved this, so I'm not sure whether my memory was right.

It seemed that a certain version (maybe 0.43.0) of monaco-editor would lead to this case.

This configuration tells monaco to load a certain version (0.45.0) from cdn in runtime.