Adding a new Quill format

Anvil Q&A
1

Quill is turning out to be fairly annoying to customize!

What I’d like to do is add some additional formats, so that my custom buttons can actually modify the underlying HTML stored in Quill. Quill filters out any HTML not defined in formats, so I can’t just use pasteHTML to force the HTML into the editor, and there doesn’t seem to be any way to disable that (not even if you use their dangerouslyPasteHTML function). Their advice if you want to use your own HTML without adding new Quill formats is to use a different editor.

I found this Javascript from the Quill documentation, and modified it for a new format I’d like to add:

let Inline = Quill.import('blots/inline');

class BigBlot extends Inline { }
BigBlot .blotName = 'sizeup';
BigBlot .tagName = 'big';

Quill.register(BigBlot );

First Try In Python

big = Quill['import']('blots/inline')

class BigBlot(big)
  pass

BigBlot.blotName = 'sizeup'
BigBlot.tagName = 'big'

Quill.register(BigBlot)

That failed on the inheritance, as did various other permutations (class BigBlot(type(big)), class BigBlot(big.__class__), and class BigBlot(type(big.__class__))).

I have to copy what’s returned, otherwise I’m overwriting the tag name for the default style.

Second Try In Javascript

I also tried putting the Javascript directly into the native libraries section, but apparently the Quill Javascript isn’t loaded when the native libraries execute.

Third Try In Javascript

I then tried forcing the Quill Javascript to load before the Javascript to add a new format. That led to a Quill error about a non-existent format.

Fourth Try Back In Python

I tried going out to Javascript to create a copy of the object, e.g.:

big = Quill['import']('blots/inline')
big = window.Object.create(big)

BigBlot.blotName = 'sizeup'
BigBlot.tagName = 'big'

Quill.register(BigBlot)

That caused Anvil to give an Internal Error when applying the format.

I clearly have no idea how to do what I’m trying to do. Can any Quill/Javascript experts point me in the right direction?

Here’s a clone link for a small app where I’ve been playing with this: Anvil | Login

2

For anyone following - first worth noting that this is regarding the Quill wrapper in anvil-extras. Which works with a javascript library.

Worth considering posting these as issues in the anvil-extras github since they’re intertwined with the component itself rather than anvil specific questions.

Also would be good to see where you’re getting the javascript snippets from… I can’t vouch for whether the snippets do the thing that is intended.

First try python
Yeah class inheritance won’t work between javascript and python classes. That’s probably the edge of the javascript and python interaction capabilities. Maybe it’ll be possible at some point.

Second/Thrid try javascript
In the unreleased anvil extras defining this in native libraries will work so long as you also include the Quill script in native libraries. But that’s not currently available.

Context
Looks like I anticipated this issue a release too late :man_shrugging:
One feautre of anvil extras is that if you don’t use a component you don’t get the baggage.
So the Quill javascript library is only added when you use the Quill component.
Which means it’s not yet available in Native libraries.
Force adding it in native libraries ends up causing a double import of Quill and the latest version wins.
This will be corrected in the next release where the double import won’t happen.

So the following will work in the next release:

<!-- Native Libraries -->
<script src="//cdn.quilljs.com/1.3.6/quill.min.js"></script>
<script>
let Inline = Quill.import('blots/inline');

class BigBlot extends Inline { }
BigBlot.blotName = 'sizeup';
BigBlot.tagName = 'big';

Quill.register(BigBlot );
</script>

To achieve this now

<!-- Native Libraries -->
<script>
function addBigBlot() {
    let Inline = Quill.import('blots/inline');

    class BigBlot extends Inline { }
    BigBlot.blotName = 'sizeup';
    BigBlot.tagName = 'big';

    Quill.register(BigBlot );
}
</script>

# Python
import anvil_extras.Quill # adds Quill library
anvil.js.call("addBigBlot")
3

Were you able to get that working in the clone? I think I’ve put everything in where it should go, but the format still isn’t applying.

4

Could you paste links to the javascript code snippets/Quill docs - I don’t have context to what it’s supposed to be able to do…

5

It was from this section: Cloning Medium with Parchment - Quill

I can’t vouch for whether it actually works or not, either, I may be pulling code entirely out of context since I’m finding Quill to be so extremely difficult to work with. If this isn’t something you’ve done before, don’t spend much time on it. I may end up following Quill’s advice and switching to an editor that makes what I want to do easier.

1 Like
6

Yeah I think you might be right there. Quill does what it does very well, but it looks like you want the Quill editor to be something it’s not. My understanding is that Quill is a “rich text editor” rather than a full on “WYSIWYG” text editor. With some advanced javascript it might work out but by the time you’ve worked out the advanced javascript there’s probably a better library out there.

That’s probably what led @divyeshlakhotia to work on this:

7

I’m currently working with GitHub - jaredreich/pell: 📝 the simplest and smallest WYSIWYG text editor for web, with no depe, and have gotten more done in half an hour with it than in a few hours with Quill. It’s exceedingly lightweight and works the way I think.

Thanks anyway for the help with Quill. I’ve been using the Javascript bridge more and more, and it’s good to know more about how to work with it.

1 Like
8

anvil-extras is always open to pull requests if you get to a place where the component can be shared :wink:

1 Like
9

Quill editor indeed has lots of problems. It has no support for Paragraph spacings and writes in its own Delta Format so I had to run a program to replace those with the standards HTML.

By the way have you tried

quill.root.innerHTML

I have not used Quill from the latest version but in the last version, I had some issues with making Quill display images so I used the innerHTML.

You can do something like this

self.quill_1._quill.root.innerHTML='html'

If you haven’t tried this out, I think it’s worth a try.