Hi,
I have created a code editor component based on react-ace but whose appearance is customized to fit with Streamlit’s look. I also added the ability/option to add a customizable info bar, menu bar, and customizable buttons.
I am relatively new to Streamlit and was well into this project when I learned of the already existing Ace Editor component (okld’s Ace Editor). However, I believe there are enough differences and additions to warrant sharing.
Warning: This project started as mostly an excuse to learn React (and I got hooked real quick ) and thus I do not consider it production ready.
I just want to add some updates for those who have started using this component or are planning to.
First, streamlit-code-editor has moved to a new location since version 0.0.9. Check it out here:
Second, if you look at the gifs in top post here, you may notice that the editor flashes when any of the settings in the inputs above it are changed. This happens for two reasons:
The editor doesnt have a fixed key set (using key= argument) and so it is replaced by a newly created one each time its arguments change or that part of the page is rerun. This results in the collapsing expanding effect seen in the gif.
The custom themes used by this component are loaded dynamically which results in a delay compared to default theme loaded instantly. This results in the color change that is most noticeable when applying the dark custom theme.
I am happy to say that these issues have been resolve (as far as I can tell). The custom themes are loaded instantly.
The first issue should be resolved by using a fixed key and it is, but using a fixed key removes the ability to update/change/reset the contents of the editor programmatically. This was intentional to prevent loss of the latest edits made by the user. However, the edits arent really lost as they are stored in the edit history so a simple undo will restore anything lost which is what encouraged me to add the ability to force the code editor to respond to changed inputs when key is fixed. To do this, you set the newly added argument, allow_reset=True (defaults to False).
There are other things you will find in the latest version like improved scrollbar behavior and a new bindKey: {"win": "key-combo", "mac": "key-combo"} option for the custom buttons that allows you to set a keyboard shortcut to trigger a button.
) and thus I do not consider it production ready.
