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

[shemene]

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?

[shemene]

@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/monaco-editor@0.41.0/min/vs' } }); // try different versions

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

[德布罗煜]

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/monaco-editor@0.45.0/min/vs',
  },
});

Maybe this would help.