QuillJS Reload toolbar controls - quill

Question

I am using QuillJS and I need to add some controls to toolbar during runtime. Is there any way to make it from code after whole Quill has been initialized?
This is how I make it now.
quillEditor.getModule('toolbar').addHandler('color', (value) => {
if (value == 'new-color') {
value = prompt('Give me hex color baby!');
// unfortunately this code does not work
let n = toolbar.querySelector('select.ql-color');
n.innerHTML += '<option value="'+value+'"></option>';
}
quillEditor.format('color', value);
console.log("Color handler", value);
});

Answer 1

It looks like you're only adding the new options to the select element which is hidden. The element used in the UI to select colors is a span with the class ql-picker-options.
Check out this snippet
var tools = [
['bold', 'italic', 'underline', 'strike'],
[{'color': ['red', 'blue', 'green', 'new-color']}]
]
var quillEditor = new Quill('#editor-container', {
modules: {
toolbar: tools
},
theme: 'snow'
});
var toolbar = document.querySelector('.ql-toolbar');
quillEditor.getModule('toolbar').addHandler('color', (value) => {
if (value == 'new-color') {
value = prompt('Give me hex color baby!');
// This element is what the user sees
let uiSelect = toolbar.querySelector('.ql-color .ql-picker-options');
// This is a hidden element
let select = toolbar.querySelector('select.ql-color');
uiSelect.innerHTML += '<span class="ql-picker-item ql-primary" data-value="'+value+'" style="background-color: '+value+';"></span>';
select.innerHTML += '<option value="'+value+'"></option>';
}
quillEditor.format('color', value);
});
.ql-color .ql-picker-options [data-value=new-color] {
background: none !important;
width: 90px !important;
height: 20px !important;
}
.ql-color .ql-picker-options [data-value=new-color]:before {
content: 'New Color';
}
<script src="//cdn.quilljs.com/1.3.4/quill.min.js"></script>
<link href="//cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet"/>
<link href="//cdn.quilljs.com/1.3.4/quill.core.css" rel="stylesheet"/>
<div id="editor-container"></div>
Then with insertBefore(), you could keep the "New Color" option at the end.