New Component: streamlit-code-editor, a react-ace code editor customized to fit with streamlit with some extra goodies added on top

Custom Components
22

This is very weird behavior. Ill try to look into it more when i have time but clicking buttons inside code editor should cause the script to rerun similar to clicking an st.button. Thats the expected behavior.

23

Hey I just wanted to say THANKS for publishing this awesome component. It’s a perfect addition to data-driven projects that often require editing SQL or JSON blobs.
FWIW, the addition of response_mode=‘blur’ was the killer update that significantly increased its usability. Looking forward to documentation updates with more code examples. Thanks again!

1 Like
24

Hi! Thanks for this editor, it is really complete. One question, how can I update the autocomplete options dynamically? I tried it with the debounce config, I update them, but it ignores it until I rerun the entire app.

26

In order to send new ghost text, you have to rerender/refresh the code editor component. There is a way to refresh the component without refreshing the app by putting the code editor in a fragment.

Btw, the ghost feature is still in experimental phase so it may be buggy.

27

Thanks for the answer. I meant the autocomplete feature. Even though the completions that are sent are updated (I update them with new code in the editor), they remain the same until the app is refreshed.

28

Can you provide test code that shows this issue?

29

This is something similar to what my app does. If you run it, you can see that the recommended options never change:

import streamlit as st
from code_editor import code_editor

editor_config = {
  "enableBasicAutocompletion": True,
  "enableLiveAutocompletion": True
}

def gen_completions(code):

    completions = []

    for i in range(len(code)):
        completions.append({
            "caption": "test" + str(i),
            "value": "test" + str(i),
            "meta": "",
            "name": "test" + str(i),
            "score": 400
        })

    return completions

def editor():

    my_code = 'type code here'

    if 'code_editor' in st.session_state:
        my_code = st.session_state['code_editor']['text']

    code_editor(code=my_code,
                       lang='sql',
                       height=[10, 10000],
                       allow_reset=True,
                       response_mode=["debounce"],
                       options=editor_config,
                       key = 'code_editor',
                       completions=gen_completions(my_code),
                       )


if __name__ == '__main__':
    editor()

image
image1602×754 26.5 KB

1 Like
30

Thanks! I will look into it!

31

Hi, thank you for the great tool. I apologize but I’m still a little confused as to how to execute code that we insert into the code editor. I defined the series of buttons listed in the docs, namely this one

   "name": "Run",
   "feather": "Play",
   "primary": True,
   "hasText": True,
   "showWithIcon": True,
   "commands": ["submit"],
   "style": {"bottom": "0.44rem", "right": "0.4rem"}
 },```

and am trying to execute my code with this, but it only gives back the code that's found in my editor, and doesn't print anything... Any advice would be appreciated thank you
32

Hi. The code editor is just a special text editor but for code. It does not execute code at all. It will return the code along with extra info like what button action the user requested. Its up to you to execute the code and show the result. There are multiple ways to do this. If the code is python, you can use the python eval function to execute the code you get back from the editor. Im not sure about how secure this is. You can also use another package I created for executing python code called streamlit-execute. For javascript code, there are multiple packages you can install. For other languages I dont know.