ajaxorg / ace

Ace (Ajax.org Cloud9 Editor)
https://ace.c9.io
Other
26.78k stars 5.29k forks source link

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

Open kkarsten62 opened 2 weeks ago

kkarsten62 commented 2 weeks 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 2 weeks 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 2 weeks 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.

andredcoliveira commented 2 weeks ago

Issue does not reproduce on my laptop:

Screenshot 2024-11-11 at 12 19 33

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

andredcoliveira commented 2 weeks ago

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

kkarsten62 commented 2 weeks ago

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! grafik grafik

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

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

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.