Quill Editor

Custom Components
1

Hello everyone :wave:

After the Ace Editor component, here’s the WYSIWYG Quill Editor component. The initial request came from the following post: Quilljs integration as a custom react component?

You can pip install streamlit-quill and test the demo script like so:

streamlit run https://raw.githubusercontent.com/okld/streamlit-quill/master/examples/streamlit_quill_demo.py

Demo 1
Demo 11263×667 27.3 KB

Demo 2
Demo 21257×635 35 KB

8 Likes
2

This is awesome @okld!

1 Like
3

Thank you very much @okld!!! I really needed this component!
Anyway I am running some issues, I enclosed three istances of the component in my app, which is an app I use to let the people i work with create an email based on a template.
But when I edit the fields (before I was using a normal text field to input HTML) the app keeps rerunning and sometimes even loses what I was writing in. I guess this is kind of embedded in streamlit as it reruns, but would it be possible to use this editor without the app constantly rerunning?
I have been calling the component this way:
mainTextBody = st_quill(value = data[‘mainTextBody’], html=True , readonly=False, key=“mainTextBody”)

the value data[‘mainTextBody’] comes from a configuration file, as I needed to have a prefilled value from the previous emails so the user can edit it. But while editing, the app reruns and after a while it restores the initial value, losing the edits.

I have three instances of the component, with different keys.

If you have suggestions on how to avoid this it would be great!
Thanks in advance!

4

Hello @anto, welcome to the forum!

Glad you find this component useful!

Does it happen to rerun when data['mainTextBody'] changes?
It’d say that for the moment, it’s a little bit risky to rely on Streamlit keeping changes. I’ll try to investigate that issue anyway, hopefully I’ll find what’s causing the erasing of quill’s content.

5

hi @okld and thanks again to you! Extremely useful for me.
About the rerun, it changes mostly at every digit, and at a certain point after some editing within the quill component, the whole app blanks and the content goes back to what is in the value= field. The app populates the data at the beginning from a .json file , and I use it to populate several st.text_input fields, and select boxes.
Then I have a “confirm” data button at the end, that if pressed, would change the data.
if st.button('Confirm Data'): data['mainTextBody'] = mainTextBody
and all the other input fields. and then I write the email, and save the .json with the updated data.

If you have the possibility to have a look at the code let me know best way to do it. Thanks again!