Quilljs integration as a custom react component?

Custom Components
1

I’m following the tutorial here - Introduction :: Streamlit Components Tutorial
to learn how to create a custom react component.

There’s a library called Quill js that’s a web based editor, and I’d like to integrate that as a streamlit component…would the integration work something like the Ace Editor integration: Ace Editor

Here’s a codepen showing how to integrate Quill into React - https://codepen.io/alexkrolick/pen/xgyOXQ?editors=0010 - based on this, it “looks like” there should be a way to integrate these…trying to make sure I’m headed in right direction.

1 Like
2

Hey @Jeremy_Goodrich welcome to the community!

Thanks for following my tutorial (and sorry for any roadbumps you encountered).

Just to get more info, what feature from Streamlit Ace is missing that you would want in Quill :slight_smile: ?

Fanilo

3

I’m open to any editor integrated :slight_smile: The end goal is to recreate something like huggingface’s auto complete / recommendations in a web interface. I’m a writer - I use Scrivener on macbook pro, it gives suggestions as you type which make me write faster, but a custom trained GPT-2 based on my novels (which I have, in a juypter notebook) inside the text editor would be infinitely better than the generic, non-fine tuned model in the Huggingface web app.

From what I can get via Jupyter command line, this would save me ~10-15% in creating a first draft, potentially, so it has a lot of value to me personally.

autcomplete-suggestions
autcomplete-suggestions974×366 13.8 KB

2 Likes
4

Hello @Jeremy_Goodrich, welcome to the forum!

I’ve just released a first version of a basic Quill component. However, it doesn’t support auto-completion, and I didn’t find any Quill plugin for that so far, except this quill-placeholder-autocomplete which doesn’t seem to implement exactly what we want.

Maybe it’d require to implement a brand new plugin for Quill :confused:
Or maybe with another editor it could be easier to implement, hopefully…

5

Same issue with CKEditor: https://ckeditor.com/docs/ckeditor4/latest/features/autocomplete.html. Their auto-completion feature implies to start your word with pre-configured characters like @ or #.

However in the same page, there’s a small tutorial on how to create a custom auto-complete plugin.

For now, you can try to display recommendations outside Quill’s component, even though it’s not ideal for the moment. And in the long run, except if there’s an editor with customizable auto-completion, making a CKEditor or Quill plugin could work.