Callback for change

[calvinchai]

I read through the documentation and found there is no (simple) way to let the editor save user input automatically. Is it possible to have a callback function such as on_change which exists now in all streamlit official widgets?

[marcinsoftem]

I agree.

BTW is there an simple way to submit content by using an external button?

import streamlit as st
import code_editor

output = code_editor.code_editor("print('Hello world!')")

if st.button("Show output"):
    st.write(output)

[bouzidanas]

I have heard a few similar requests.

To be honest, I have been avoiding this issue simply because it seems like it all leads to the same solution which comes with an issue that I think will make the behavior of the editor feel more janky. However, Streamlit now supports partial reruns so maybe now is the time to add the debounced update feature.

Let me give some background that might illuminate why this feature is missing. One of the things I didnt like about the other ace editor component when I tried using it (after learning about it) is that it would rerun the app/script after almost every keypress. And I think you had to set a prop to avoid this. The frequent refreshes made the whole experience so bad that I saw it as a bad thing as it promoted bad UI experiences.

In order for the streamlit script to get data from the code component, the script had to be rerun with this new data. The same would be true with a callback function. But with fragments, the code editor and dependent elements can be the only thing that is rerun and that can perhaps minimize some of the jerkiness.

I think I will add a prop that will allow for a debounced response which will enable auto-updating the dictionary with current contents. I think I will also try and provide an option for updating when the editor loses focus which might prove to be a great compromise.

Thanks for the feedback!

[bouzidanas]

I have some good news to share. I got this feature up and running in version 0.1.4

See here for more: https://discuss.streamlit.io/t/new-component-streamlit-code-editor-a-react-ace-code-editor-customized-to-fit-with-streamlit-with-some-extra-goodies-added-on-top/42868/16

@marcinsoftem you should be able to set response_mode="blur" to achieve the external button trigger effect.

@calvinchai response_mode="debounce" might be more what you are looking for.

[marcinsoftem]

Works great! Kudos for the great job and amazing response time.

[bouzidanas]

and amazing response time.

You caught me in a moment where I had some time and I already knew how to implement the feature cause I did it before a while ago. So the stars aligned lol. Unfortunately, its been a month long wait for @calvinchai

[calvinchai]

Thank you for the great work and timely response!

[g-rutter]

@bouzidanas having the blur feature was really important to me and it was very lucky that I found this closed issue! I don't think the feature is documented - I'd suggest documenting this feature very clearly

[bouzidanas]

@bouzidanas having the blur feature was really important to me and it was very lucky that I found this closed issue! I don't think the feature is documented - I'd suggest documenting this feature very clearly

I am planning a complete rewrite of the docs for the next release (v1.0.0) which will include all the new features that have been added and quite a few examples. I want to get a few fixes completed first and simplify the arguments a little bit before the release.

So hopefully the docs will be updated soon!