okld / streamlit-ace Goto Github PK

Hey, streamlit_ace is great stuff.

I am having issues though making the "markers" option do anything. Am I correct to think that it takes a list of dicts looking like

{'startRow': 1, 'startCol': 0, 'endRow': 302, 'endCol': 0, 'className': 'red', 'type': 'text'}

And "red" needs to be defined as CSS class via st.markdown()?

If not, how does it work?

Thanks

If I install streamlit-ace with streamlit-nightly already installed, it'll install streamlit which causes issues with the nightly version:

$ pip list | grep streamlit
streamlit-nightly             0.70.1.dev20201101

$ pip install streamlit-ace

$ pip list | grep streamlit
streamlit                     0.71.0
streamlit-ace                 0.0.4
streamlit-nightly             0.70.1.dev20201101

Hi.

I want to populate the ACE editor with the content from a file before editing. This works, but I want the user to be able to pick another files' content on the fly and then the ACE editors value should be changed. But this does not seem to work...

Am I missing something here?

Would you have any idea how this could be achieved?

Cheers,
C

The submit button should be toggleable so that we can remove it and have st.button submit button. It should behave like the default streamlit textbox and on an external submit it should fetch the text value.
Normal streamlit behaviour:

text = st.text_input('my input')
submit = st.button('submit')
if submit:
    st.write(text)

with streamlit-ace

val = st_ace('input json', height=350,
                             language='json', theme='twilight', wrap=True, auto_update=False)
if val:
   st.write(val) # this will always write on startup since we have given a default value.

Hi. With this component, I wish to make a voice-controlled code editor. So, each time a user presses a button, I want the value/code in the editor to be updated with the text in the user's voice.
But, I am not able to do this because of the way streamlit works. I face multiple 'key error' if I wrap the component with a function.
Else, the code in editor contains only the new text...

Can you please help me out with this?

the demo link is broken: https://share.streamlit.io/okld/streamlit-gallery/main?p=ace-editor

ideally there would be more documentation on the readme page for quick configuration reference

I am wondering how I could reset state of the editor. I found that I could set initial text with value key but updating it later does not seem to change anything. Here is my attempt

import streamlit as st
from streamlit_ace import st_ace


LANGUAGE = "yaml"
THEME = "twilight"

if 'manifest' not in st.session_state:
    st.session_state.manifest = ""

reset = st.button("Reset!")
if reset:
    st.session_state.manifest = ""

print(st.session_state.manifest == "")

content = st_ace(
    value=st.session_state.manifest,
    placeholder="# Paste your manifest here",
    language=LANGUAGE,
    theme=THEME,
    font_size=14,
    tab_size=4,
    min_lines=45,
    auto_update=True,
    key="ace",
)

if content:
    st.session_state.manifest = content
    st.subheader("Content")
    st.code(content, language=LANGUAGE)

Currently, these:

  // Set default prop values that shouldn't be exposed to python
  args.enableBasicAutocompletion = true
  args.enableLiveAutocompletion = true

are deliberately not exposed to the Python side.

For some languages (e.g., Markdown) being able to turn auto completion off would be great, though.

It's not clear what does the apply button do

Hi, is there any way to get the value of the streamlit widget as an input to the code inside the Ace editor and execute the code (entered by the user) and print out the result of executed code?

Example:

# Get user input
user_input = st.slider(
    'Input:',
    0.0, 100.0
)

# Spawn a new Ace editor
content = st_ace()

# Printout the result
output = exec(content)
st.text(content)

I tried using the exec() function but as it only returns a None I cannot print out the results. I also tried the eval() but it gives me an error.

Thanks you!

Was just using an app on mobile that uses this editor and the problem on mobile is that I can't do CTRL + Enter to make changes, because that's not a keyboard option on mobile! Would be great to have another way to do this - a button option for example.

Can you add more examples like this and show them in main page and explain them.

code_editor = st_ace(language='python', theme="monokai", keybinding="emacs", height=400, value="your code here",font_size=14, tab_size=4, show_gutter=True, show_print_margin=True, wrap=True, auto_update=False, readonly=True)

I have a strange problem that occurs randomly.
I have deployed a streamlit app that uses streamlit_ace editor. When I visit the web page, I get the following error
sometimes and other times it works fine!

Your app is having trouble loading the streamlit_ace.ace component.

(The app is attempting to load the component from **, and hasn't received its "streamlit:componentReady"** message.)

If this is a development build, have you started the dev server?
If this is a release build, have you compiled the frontend?

I have it deployed here and here
It works consistently when run from my laptop with the exact same dependency and versions installed.
here's the output when the app is run locally.

I don't think this is an issue with streamlit-ace, however, I am hoping someone here might recognise the issue and guide me.
If it helps, the source is hosted here

This is slightly related to #25.
I want to use the editor to edit a selected file on the filesystem - read at the beginning and write on any change.
With st.text_area I'am able to achieve this by using the on_change callback together with custom key.

But st_ace doesn't support on_change callback and yet it's not able to read content of the key which I provide.

st.session_state["content"] = "This is some content"
st_ace(key="content")

The editor's content remains empty and yet the st.session_state["content"] is not updated on change. However, if I remove the prepared session state and only use the second line, the st.session_state["content"] is updated properly on each change.

Here is my working example with st.text_area:

import streamlit as st
import os

def on_change_callback():
    with open("file.txt", "w") as f:
        f.write(st.session_state["content"])

if not os.path.exists("file.txt"):
    open("file.txt", "w").close()
with open("file.txt", "r") as f:
    st.session_state["content"] = f.read()

    st.text_area("file.txt", key="content", on_change=on_change_callback)

This allows me to edit the file.txt, update it multiple times and always have the correct content on the filesystem (and thus read the file again in another components).

Thanks for any help!

I am having the same issue as described here: https://stackoverflow.com/questions/8021821/arrow-keys-and-delete-work-in-ace-editor-but-typing-text-doesnt-work

I cannot type code into the editor even when it's set to editable. Only arrow keys and delete work.

You can see the bug in action on the 'Ice' page here: https://share.streamlit.io/spiruel/satschool/main/app.py

Is there a way to overcome this in streamlit?

Thanks

Hi,
Thanks for providing this awesome widgets!!
I have read the issue #25 and #28.

My idea is to apply the streamlit-ace to display the log file, and the log file will keep changing (i.e., It will keep adding some information into the log file.)

Here is my current code which was referred from #25.

        with open('/var/log/out.log') as f:
            lines = f.read()
            content = st_ace(value=lines)

Is it possible to keep displaying the log file information this goal?

Thank you!!

BR,
Chieh

Hi,

I am relatively new to Streamlit. I was wondering if it was possible to automatically print the output of the code defined in the value parameter.

content = st_ace(
    value = """a = 2 \n b = 3 \n c = a + b \n print(c)""",
    placeholder=" a = 2",
    language='python',
    theme='dracula',
    show_print_margin=True,
    auto_update=True
)

# Display editor's content as you type
content

I would want to print the output of c to the Streamlit app. Is there a specific way I should be defining this?

Any input would be gretaly appreciated.

Thank you for your time,

Henry

Is there any way to set the default text? I could use the placeholder but I want to build a feature where the user can edit the placeholder text. With the functionality right now, as soon as the user types in the text box, the placeholder text disappears.

Is there any way to change the width and height of the ace editor widget?

The editor component only shows up when the iOS device is set to "Request Desktop Website".

Even manually spoofing the user agent does not work.

Any iOS/iPadOS device (even DevTools) will not show the editor at all.

I found that when the yaml file is too long, it is good to have a scroll bar there. Thank you again for your great streamlit component.

Hi there,

I tried using streamlit-ace as the editor for SQL in my streamlit app and it works great for me.

But compared to input like st.text_area, I find the streamlit-ace editor will automatically submit the query in the editor every time I change the query, for example, when I enter a query like SELECT * FROM my_table, the streamlit will be re-run every time when I type a character in the editor, which cause some unnecessary failed requests because the query is partial. I've no idea if this is caused by the streamlit component API or the streamlit-ace editor itself. Is there any way I can change this behavior to something like st.text_area so that I can manually apply the query using Command + Enter (I am using macOS) when the query is fully typed into the editor? Thanks.

How is It possible to load an already existing file into the streamlit-ace editor?

I am sorry, if this is not the right place to put the request. I am new to GitHub.

One of my use cases involves a desire to have the ace editor automatically resize. The Ace Editor React Component appears to have this capability built in but requires setting the "max_lines" property to javascript Infinite. If we could assign the max_lines property infinity with either float('inf') or the string "Infinity" this would enable the auto resize functionality.

Alternatively, the default could be sent to Infinite so that the editor resizes by default but becomes fixed when the max_lines property is manually assigned.