[anvil-extras] Trouble customizing Quill toolbar buttons

It’s all doable.
What do you want the custom button to be able to do?


How do you get the javascript Quill object and use the import?

import anvil_extras.Quill # this will add Quill to window
from anvil.js.window import Quill
icons = Quill["import"]("ui/icons")
# js proxy objects can use subscript notation 
# which gets around using .import
# (we could also have used getattr(Quill, "import")
icons['foo'] = '<i class="fa fa-eye"></i>'
# taken from a quill github issue https://github.com/quilljs/quill/issues/1099

How to use a custom button in Quill?

It’s probably not the right approach since it’s not documented in Quill.
But, that placeholder element for the button foo adds a class ql-foo to the button
We can access that button using some anvil.js

    quill_dom = anvil.js.get_dom_node(self.quill_1)
    foo_btn = quill_dom.querySelector('.ql-foo')
    foo_btn.addEventListener('click', self.foo)

We can’t use the getModule('toolbar') approach since quill doesn’t know anything about a foo button control. Whereas it knows about a bold button control.

Note:
The suggested approach to custom buttons in the quill docs is to create your own toolbar container

This would work too but it’s (even) more of a faff.