Problem with horizontal scrolling.

[B4PT0R]

Hello Anas !

I've been using your component for a while now and this is by far the most useful and aesthetic one as a code editor for Streamlit.

I'm using it to create a Streamlit notebook currently.

I'm encountering a slight but annoying issue : I don't seem to be able to figure out how to enable the text to expand horizontally beyond the initial width of the widget. The horizontal scrolling works but only reveals empty space, and long lines get cropped.

To reproduce the problem easily, in an empty editor (default config without wordwrap), just press 'a' continuously, you will see that past a certain point the line gets cropped into invisibility, even though it continues to expand.

The cursor can go in that empty space and come back, so I think it's just a display parameter of the inner editor that should be corrected, but I didn't find the appropriate one. (Actually, I've noticed the same problem in all your demos as well). Tried every possible "overflow-x":"auto" kinda stuff without success.

I've had the same problem with all the versions I tried (now using 0.1.20)

Do you have an idea what goes wrong ?

For the record here is the code I'm using to implement my notebook code cell editor:

from code_editor import code_editor

class editor_output_parser:
    def __init__(self):
        self.last_id=None

    def __call__(self,output):
        content=output["text"]
        if 'id' in output and not output['id']==self.last_id:
            self.last_id=output['id']
            if not output["type"]=='':
                event=output["type"]
            else:
                event=None
        else:
            event=None
        return event,content


def editor(*args,**kwargs):

    buttons=[
        {
            "name": "Run",
            "feather": "Play",
            "primary": True,
            "hasText": False,
            "alwaysOn":True,
            "showWithIcon": True,
            "commands": [
                ["response","run"]
            ],
            "style": {
            "bottom": "0.44rem",
            "right": "0.4rem"
            }
        }
    ]


    params=dict(
        theme='default',
        buttons=buttons,
        options={
            "showLineNumbers":True
        },
        props={ 
            "enableBasicAutocompletion": False, 
            "enableLiveAutocompletion": False, 
            "enableSnippets": False
        }
    )

    params.update(**kwargs)

    output=code_editor(*args,**params)
    return output

[bouzidanas]

Hi!

I appreciate you using it!

Can you post a gif or screenshot?

I ask because I cannot replicate the problem when i ran your example. I pressed a for a very long time!

[bouzidanas]

Hi again,

The issue appears on firefox but not chrome. I am working on seeing why.

Nevermind. It is an issue that pops up when page is zoomed!!!!

[B4PT0R]

I'm using firefox, indeed.

Zoomed or not I get the issue...

[bouzidanas]

Can you double check the no zoom for me. I have narrowed the issue down to some CSS rules that have to do with hidpi

[B4PT0R]

Tried zoom 100%, more, less... problem anyway !
I'm on Linux Lubuntu, with firefox 126.0.1 64bits

[B4PT0R]

Tried on my Dad's computer on Windows 13 with latest version of Firefox esr, no problem...
Ok it probably has mostly do with my specific computer/browser setup. At least it's not me doing something wrong, or a general issue with your component.

Thank you for responding quickly Anas !

Cheers !

[bouzidanas]

Thanks for the quick responses. I had to check. Thanks to you, I now understand why it appears in firefox no matter what for you.

The problematic code in ace.js:

exports.HI_DPI = useragent.isWin
    ? typeof window !== "undefined" && window.devicePixelRatio >= 1.5
    : true;
if (useragent.isChromeOS)
    exports.HI_DPI = false;
if (typeof document !== "undefined") {
    var div = document.createElement("div");
    if (exports.HI_DPI && div.style.transform !== undefined)
        exports.HAS_CSS_TRANSFORMS = true;
    if (!useragent.isEdge && typeof div.style.animationName !== "undefined")
        exports.HAS_CSS_ANIMATION = true;
    div = null;
}
if (exports.HAS_CSS_TRANSFORMS) {
    exports.translate = function (element, tx, ty) {
        element.style.transform = "translate(" + Math.round(tx) + "px, " + Math.round(ty) + "px)";
    };
}
else {
    exports.translate = function (element, tx, ty) {
        element.style.top = Math.round(ty) + "px";
        element.style.left = Math.round(tx) + "px";
    };
}

});

A class is added when the HI_DPI condition is met:

if (dom.HI_DPI)
            dom.addCssClass(this.container, "ace_hidpi");

which results in the following CSS being active:

.ace_hidpi .ace_text-layer,
.ace_hidpi .ace_gutter-layer,
.ace_hidpi .ace_content,
.ace_hidpi .ace_gutter {
contain: strict;
}
.ace_hidpi .ace_text-layer > .ace_line, 
.ace_hidpi .ace_text-layer > .ace_line_group {
contain: strict;
}

I am trying to figure out how to fix this but it might take some time. The reason it appears on Firefox to you is because window.devicePixelRatio >= 1.5 for you. For Chrome, HI_DPI is set to false no matter what. But strangely, the class is still added when window.devicePixelRatio >= 1.5 is true on Chrome too.

I will work on this more when I get more time later today.

I appreciate your help!

[B4PT0R]

Ok, I see you're already on track! Good luck with the CSS shenanigans... Definitely not my cup of tea ! :)

[B4PT0R]

Hello Anas.

Just in case it might help you, the problem also arises on my mobile (firefox for Android).

Cheers !

Baptiste

Btw, if you wanna see your component in action you can check the app I'm working on here.
Any feedback from you would be much appreciated.

[bouzidanas]

That is really cool!

That is also a crazy coincidence because I am also building a jupyter notebook in streamlit! It not yet on github but I did build a streamlit package for more secure python code execution. I like how clean and intuitive your app is.

As far as fixing the CSS issue, I am still working on it. Right now I have managed to disable it but I think there is a reason that HIDPI stuff exists and I am trying to get it working correctly.

[B4PT0R]

Hey Anas,

Thank you for the feedback. Your port of Pyodide to Streamlit seems very nice and useful, actually I was looking for something like this in many occasions. Will definitely use it.

For the issue with the component, I installed chromium and still have the problem. Idk, maybe it's more an OS related issue than a browser one (I'm on Lubuntu).

Cheers!