Streamlit quill component, how to clear contents with button click

[aji]

@okld Hello, I am using your streamlit-quill custom component and was wondering if there was a way to clear the contents of the RTE on a button click. For other widgets I just clear the key or set it to None, but the RTE itself doesn’t reset, even if you clear its key. Also ran into rare occasional problem where the quill component would have trouble loading and would get the yellow warning box. Any fix for this as well? Thanks!

[lkdd-ao]

Hello, I am also using streamlint quill, but I am not sure what exactly the problem you are referring to is? If necessary example code can be provided, I may be able to assist you.

[aji]

Thanks for the reply, my first point of concern was how to clear what’s displayed in the streamlit-quill component after someone writes in it. With other widgets displayed in app, I have a ‘Clear Form’ button which on_click runs a function that sets the session state keys of the widgets to None (st.session_state.key = None) which essentially clears the displayed widgets. Howeve,r when I do the same for streamlit quill component using st_quill(key=‘comment_key’) and do st.session_state.comment_key = None in my Clear Form function, the actual contents behind the scenes of the key of the quill component gets cleared. (If i print the comment key it is now blank, but the contents of what the user had written in the quill component is still displayed.) Is there a way to clear the contents of this quill component such as the main streamlit widgets?

Also, another problem I had was very rarely this component would fail to load. Seems like a issue in general with st components but it is same warning as this but with thest_quill component: Any ideas on “Your app is having trouble loading the st_aggrid.agGrid component”? - Custom Components / streamlit-aggrid - Streamlit

[lkdd-ao]

I understand what you mean. You can refer to my solution, which does not affect the input results of other existing components, but simply covers and replaces st_quill , there will be a reload action, but it does not affect the content presentation.

import streamlit as st
from streamlit_quill import st_quill

if 'key_quill' not in st.session_state:
    st.session_state.key_quill = 0

if st.button(label='Clear content', key='button0'):
    if st.session_state.key_quill:
        st.session_state.key_quill = 0
    else:
        st.session_state.key_quill = 1

with st.form(key='test'):
    st.text_input(label='name', key='name')
    st_quill(key='quill' + str(st.session_state.key_quill), value='', html=True, toolbar=None, readonly=False)
    st.date_input(label='date', key='date')
    st.form_submit_button(label='submit')

Hope you use streamlit_quill went smoothly.

[lkdd-ao]

The issue you mentioned about “st_ggrid” not being reset can be solved under specific conditions using the same method mentioned above, but it may not be applicable to all. We also wish you a smooth use of “st_ggrid”.

[aji]

Thank you very much. This worked for me. One question how would I call the key of the st_quill component in this case? Im using the variable I assign to the st_quill (var = st_quill…) to get contents but would like to use the key if possible. Thanks!

[lkdd-ao]

Of course, you see👇

Both methods can be achieved👇

import streamlit as st
from streamlit_quill import st_quill

if 'key_quill' not in st.session_state:
    st.session_state.key_quill = 0

if st.button(label='Clear content', key='button0'):
    if st.session_state.key_quill == 'quill1':
        st.session_state.key_quill = 'quill' + '0'
    else:
        st.session_state.key_quill = 'quill' + '1'

with st.form(key='test'):
    st.text_input(label='name', key='name')
    with st.container(height=200):
        var = st_quill(key=st.session_state.key_quill, value='', toolbar=None, readonly=False, )
    st.date_input(label='date', key='date')
    if st.form_submit_button(label='submit'):
        st.write(f'var: {var}')
        st.write(f'st.session_state.key: {st.session_state[st.session_state.key_quill]}')

[rishiraj1056singh]

Hi, @okld @aji

I am trying to work with streamlit-quill custom component. However, it’s not working as expected.

What happens is only a few things gets loaded while bold, italic and other functionality is not loaded in streamlit UI.

If u see in the image, First circle shows very huge font for the items, while circle 2 shows the my text input section. (it’s not coming up properly)

In the second image, if u see things haven’t loaded properly.

Can u help this out, so that all items of this component load up properly and i can work with quill bot component.

[lkdd-ao]

You can add ‘html=True’ in ‘st_quill’ to solve this problem.

import streamlit as st
from streamlit_quill import st_quill

var = st_quill(key='quill_write', value='', toolbar=None, readonly=False, html=True)

if st.button(label='Submit'):
    st_quill(key='quill_read', value=var, readonly=True)

[rishiraj1056singh]

The issue still persists. @okld @aji