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

kkarsten62 commented 1 day ago

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: grafik Typing lowercase l ==> ok grafik Typing a space ==> ok grafik 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. grafik Workaround is to type two spaces grafik Same behavior with uppercase L grafik When typing a char which is not l or L then also ok grafik

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 commented 1 day ago

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 commented 1 day ago

... 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.

ajaxorg / ace