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.
The features that you could use to do that are not yet built into the component. I recommend you make a feature request (issue) on the github and I will get around to it when I can.
Just want to let you know that I have added a new command called returnSelection which will return the selected text in the response dictionary.
You can add a button or a shortcut to trigger the response. For more on adding a button that triggers this new command, see the Advanced Usage section of the docs.
For example,
import json
import streamlit as st
from code_editor import code_editor
# code editor config variables
height = [19, 22]
language="python"
theme="default"
shortcuts="vscode"
focus=False
wrap=True
editor_btns = [{
"name": "Run",
"feather": "Play",
"primary": true,
"hasText": true,
"showWithIcon": true,
"commands": ["returnSelection"],
"style": {"bottom": "0.44rem", "right": "0.4rem"}
}]
sample_python_code = '''# This is some sample code
a=2
if a > 1:
print("The value is greater than 1")
'''
# code editor
response_dict = code_editor(sample_python_code, height = height, lang=language, theme=theme, shortcuts=shortcuts, focus=focus, buttons=editor_btns, options={"wrap": wrap})
# show response dict
if len(response_dict['id']) != 0 and ( response_dict['type'] == "selection" or response_dict['type'] == "submit" ):
st.write(response_dict)
This new command exists in the newest version (currently 0.1.12) on npm.
Hello, great work!
Iāve gone through the documentation yet I havenāt figured out how to enable interpretation within the code sample (sample_python_code). In your example the string is fixed, however, can it be adjusted by the user within the application and received by a variable (sample_python_code)?
If I understand you correctly, yes. Perhaps it is not explained very well in the docs (I will try to improve the docs more in the future), but the content of the code editor is editable and changeable and to get the changed code back (as the response/return value in streamlit), you have to trigger a response command. There are two ways to do so, by adding a button that calls the response command when clicked, or by setting a keyboard shortcut.
By default, code editor works like st.text_area. For the user to āsubmitā the text in the text area, they have to press Ctrl + Enter when they are done changing the text. Same thing with code editor. The default behavior is that the user needs to press Ctrl + Enter keyboard shortcut after they are done changing the code in the editor and they want the changes seen by the app. Behind the scenes, the Ctrl + Enter keyboard shortcut triggers the submit command which is one of the response commands that can be used to send back stuff to the streamlit app.
You can test this out in the demo. Change the code in the editor and then press Ctrl + Enter. To see it working with a button, open the Components expander and check the custom buttons checkbox. Then when you hover over the editor, the custom buttons will appear. Fyi, the Run button at the bottom triggers the submit command and so should do the same thing as the keyboard shortcut when you click it.
Now, what happens when one of these response commands are triggered? Well, what happens is that the code_editor function in the streamlit script returns a dictionary containing the code among other things like response type and response id and cursor position when response was triggered.
Hello, this may be a late response however Iād like to pitch in on how to capture the selected code parameter to perform actions upon. Iād also love to see line numbering added to this code editor. @bouzidanas
import json
import streamlit as st
from code_editor import code_editor
# code editor config variables
height = [19, 22]
language="python"
theme="default"
shortcuts="vscode"
focus=False
wrap=True
editor_btns = [{
"name": "Run",
"feather": "Play",
"primary": True,
"hasText": True,
"showWithIcon": True,
"commands": ["submit"],
"style": {"bottom": "0.44rem", "right": "0.4rem"}
}]
sample_python_code = '''# This is some sample code
a=2
if a > 1:
print("The value is greater than 1")
'''
# code editor
response_dict = code_editor(sample_python_code, height = height, lang=language, theme=theme, shortcuts=shortcuts, focus=focus, buttons=editor_btns, options={"wrap": wrap})
# show response dict
if len(response_dict['id']) != 0 and ( response_dict['type'] == "selection" or response_dict['type'] == "submit" ):
# Capture the text part
code_text = response_dict['text']
st.code(code_text, language='python') #Captured the code parameter.
Line numbering isnt turned on by default but you can turn it on with one of the config options so in the code_editor function just add options={"wrap": True, "showLineNumbers": True}
Appologies! There is a typo in my previous response to you. It is showLineNumbers plural instead of showLineNumber . I will correct my previous comment! The list of options can be found here
Thanks for stopping by! We use cookies to help us understand how you interact with our website.
By clicking āAccept allā, you consent to our use of cookies. For more information, please see our privacy policy.
Cookie settings
Strictly necessary cookies
These cookies are necessary for the website to function and cannot be switched off. They are usually only set in response to actions made by you which amount to a request for services, such as setting your privacy preferences, logging in or filling in forms.
Performance cookies
These cookies allow us to count visits and traffic sources so we can measure and improve the performance of our site. They help us understand how visitors move around the site and which pages are most frequently visited.
Functional cookies
These cookies are used to record your choices and settings, maintain your preferences over time and recognize you when you return to our website. These cookies help us to personalize our content for you and remember your preferences.
Targeting cookies
These cookies may be deployed to our site by our advertising partners to build a profile of your interest and provide you with content that is relevant to you, including showing you relevant ads on other websites.
) and thus I do not consider it production ready.
