ace-editor: Strange behaviour when typing char 'l' char 'space',

[kkarsten62]

Describe the bug

When typing char l char space char l then editor is confused. Not possible then to type correctly more text into that line.

This happens only on lowercase char l and uppercase char L and it happens when setShowInvisibles is set to true.

Here are my settings:

	this.aceEditor = ace.edit(this.divAreaEditor.id); //Configure AceEditor
	this.aceEditor.setTheme("ace/theme/sqlserver");
	this.aceEditor.setFontSize("32px");
	this.aceEditor.setKeyboardHandler("ace/keyboard/vim");
	this.aceEditor.setShowInvisibles(true);
	this.aceEditor.setShowPrintMargin(false);
	this.aceEditor.session.setMode("ace/mode/markdown");
	this.aceEditor.session.setUseWrapMode(true);
	this.aceEditor.session.setUseSoftTabs(false);
	this.aceEditor.session.on("change", function(delta) {that.onChangeEditor();});

Expected Behavior

Normal behavior on all char sequences.

Current Behavior

There is no crash. Only editor is confused.

Reproduction Steps

Example:
Start empty editor:

Typing lowercase l ==> ok

Typing a space ==> ok

Typing a next l ==> not ok, editor line is confused. Input marker is behind EOL sign. Not possible to type correcty more text into that line.

Workaround is to type two spaces

Same behavior with uppercase L

When typing a char which is not l or L then also ok

This can easily reproduce here:
https://ace.c9.io/build/kitchen-sink.html

Possible Solution

No response

Additional Information/Context

No response

Ace Version / Browser / OS / Keyboard layout

V1.36.4 / Firefox and Librewolf / Fedora 40 Workstation / German

[nightwing]

Seems like the monospace font on your system has some unwanted ligatures, could you try adding the following css to check this?

.ace_editor {
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0;
}

[kkarsten62]

... could you try adding the following css to check this?

I append it to the ace.css file. ==> Same behavior!
I check:
On my Tablet, also with Fedora 40 and Firefox ==> Same behavior!
On my Tablet, also with Fedora 40 and Brave Webbrowser ==> Same behavior!
On my mobile phone with GrapheneOS and Vanadium ==> Ok.

I can simply reproduce on https://ace.c9.io/build/kitchen-sink.html
I checked Show Invisibles to true and it's same behavior as in my webpage environment.

[andredcoliveira]

Issue does not reproduce on my laptop:

Using Firefox 131.0.2 (aarch64) with macOS 14.7.1 (23H222) (macbook pro)

[andredcoliveira]

Have you been able to reproduce with any non-Fedora, @kkarsten62?

[kkarsten62]

Have you been able to reproduce with any non-Fedora, @kkarsten62?

Thanks for your helping hand.
Yes as already said:
"On my mobile phone with GrapheneOS and Vanadium Webbrowser ==> Ok."

Additionally:
I tested on a Laptop with Ubuntu 22.04 and Firefox ==> Ok.

On Fedora with Firefox/Librewolf: When setting the option Settings | Fonts | Advanced... | Allow pages to choose their own fonts, instead of your selections above to false then it is also Ok!

This can easily reproduce. It indicates for me:
When AceEditor can/must used it's own font ==> not Ok.
When AceEditor is forced to used the given LibreWolf/Firefox font ==> Ok.
But disabling Allow pages to choose their own fonts, instead of your selections above is not an option for me, because the appearance of text font on other webpages is not really good.

So question for me are:
What kind of font is AceEditor using?
Can I change the font by an AceEditor option?
Should I report it to the Fedora community as well?

[nightwing]

by default ace uses the following css font: 12px / normal 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'Source Code Pro', 'source-code-pro', monospace; perhaps one of the fonts in this list is broken on fedora? could you try disabling them one by one to see which one is causing the issue?

[kkarsten62]

by default ace uses the following css font: 12px / normal 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'Source Code Pro', 'source-code-pro', monospace; perhaps one of the fonts in this list is broken on fedora? could you try disabling them one by one to see which one is causing the issue?

I checked the given fonts with the following settings:

	this.aceEditor.setOptions({
		keyboardHandler: "ace/keyboard/vim"
		, theme: "ace/theme/sqlserver"
		, showInvisibles: true
		, showPrintMargin: false
		, fontFamily: "monospace"
		, fontSize: "12px"
		, relativeLineNumbers: true
	});
	this.aceEditor.session.setMode("ace/mode/markdown");
	this.aceEditor.session.setUseWrapMode(true);
	this.aceEditor.session.setUseSoftTabs(false);
	this.aceEditor.session.on("change", function(delta) {this.onChangeEditor();});
	this.aceEditor.setValue(content, -1);

Monaco ==> Not Ok
Menlo ==> Not Ok
Ubuntu Mono ==> Not Ok
Consolas ==> Not Ok
Source Code Pro ==> Not Ok
source-code-pro ==> Not Ok
monospace ==> Ok!

So monospace is the only one which is working correctly. For me this font looks good, so I will just use this settings.