angularmonaco-editor

Offset between text and cursor with the Monaco editor (Angular) under Chrome / MacOS


Using the editor in an Angular application, we can see an offset between text and cursor. For example, if we want to erase a character at the position of the cursor, the character at two or three position before is deleted.

This only occurs using Chrome under MacOS. We don't have this behavior for Firefox / Safari on MacOS and Chrome / Firefox on Linux. I'm using the version 0.18.1.

Does anyone encounter this problem?


Solution

  • I had this same problem on Windows and it ended up being a font size issue! I can't quite remember, but something like it was calculating based off font-size: x but it was displaying font-size: y, but only in Windows. Double check you don't have a global font size on all divs or something, and that all your font names work on all OSes (e.g. make sure you're not only using Consolas or whatever). I had to do

    #monacodiv div, #monacoDiffEditor div {
      font-family: monospace;
      font-size: unset; 
    }
    

    to get it to work because in our environment we had a global

    body, td, div, p {
        font-family: Lato, Sans-serif;
        font-size: 10pt;
    }
    

    setting that was throwing everything off.