Cursor misplaced while typing in Tracy console

[gebeer]

Hi all,

I am experiencing a very strange issue inside the Tracy console for some time now. While typing, suddenly the new characters get inserted 1 position off to the left of the cursor.

This is best demonstrated by a short clip:

It makes editing impossible. This started happening on some installs for some time. But now is happening on all. I thought this must be a caching issue then. But it is happening across browsers (FF, Brave, Chrome - all on Linux).

No JS errors in the  dev console.

I did a related search for ace editor that came up with
https://stackoverflow.com/questions/15183031/ace-editor-cursor-behaves-incorrectly  
https://github.com/ajaxorg/ace/issues/2548  
https://pretagteam.com/question/wrong-cursor-position-with-ace-editor-in-safari 

They all refer to a problem with none monospaced fonts used in the editor (specifically on iOs and Linux). Digging through the CSS, I found this rule which is injected in a style attribute by Tracy `<style nonce="" class="tracy-debug">`:

.ace_editor, .ace_editor * {
    font-family: 'Monaco','Menlo','Ubuntu Mono','Consolas','source-code-pro',monospace!important;
}

When changing the rule to include Courier New, it works:

.ace_editor, .ace_editor * {
    font-family: 'Courier New', 'Monaco','Menlo','Ubuntu Mono','Consolas','source-code-pro',monospace!important;
}

This might be just an issue on Linux. Can anybody confirm this for other operating systems?

@adrian would it be possible to include Courier New in the font-family? This seems to be injected through site/modules/TracyDebugger/scripts/ace-editor/ace.js. So I'm not sure if you have influence on the contents of that file. A search on the ace issue tracker reveiles quite a few related issues. So the problem is well known but hasn't been fixed in years. As a quick fix, I added the extra font to ace.js but this will be gone with the next update.

Oh wait, actually this is defined in site/modules/TracyDebugger/styles/styles.css around line 1787. I added Courier New there:

.ace_editor,
.ace_editor * {
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', 'Courier New', monospace !important;
}

Would be great if this could be included in one of the next updates.

[adrian]

Hi @gebeer - thanks for taking the time to debug.

I actually only ever see that if I have an emoji character in the console. Regular characters don't cause that for me, but maybe that is environment based.

I've added Courier New for you, but I would have though that the "monospace" option at the end would have taken care of things in any environment.

I have also updated ACE to the latest version.

Let me know if you have any more troubles with it.

[gebeer]

10 hours ago, adrian said:

Hi @gebeer - thanks for taking the time to debug.

I actually only ever see that if I have an emoji character in the console. Regular characters don't cause that for me, but maybe that is environment based.

I've added Courier New for you, but I would have though that the "monospace" option at the end would have taken care of things in any environment.

I have also updated ACE to the latest version.

Let me know if you have any more troubles with it.

Great, thank you so much for the quick fix. Everything working smoothly and I'm having fun again working with the console.

Yeah, I thought that the monospace option should take care of that, too. But, obviously, this was not the case.

Cheers