How to add a custom dropdown aka picker to the quill toolbar?

Okay so I spent quite some time researching this question and trying various solutions - without success.

How can I add my custom dropdown menu (aka “picker”) to the quill toolbar?

Here are some - all non-working - approaches I tried so far:

1. Using HTML

<div id="toolbar">
	<select class="ql-myDropdown">
		<option value="1">Option 1</option>
		<option value="2">Option 2</option>
		<option value="3">Option 3</option>
		<option value="4">Option 4</option>
		<option value="5">Option 5</option>
	</select>
</div>
<div id="editor">
</div>

2. Using JavScript in a new Quill instance

var quill = new Quill('#editor', {
    modules: {
        toolbar:
        [
          [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
          [{ 'size': ['small', false, 'large', 'huge'] }],
          ['bold', 'italic', 'underline', 'strike',],
          [{ 'myDropdown': ['Option 1', 'Option 2', 'Option 3', 'Option 4', 'Option 5'] }],
    	  ['clean']
        ]
    },
    theme: 'snow'
});

3. Using a quill import

var myDropdown = quill.import('ui/picker');
myDropdown = ['Option 1', 'Option 2', 'Option 3', 'Option 4', 'Option 5'];
quill.register(myDropdown, true);

While 2. is the most promising solution - as it does add a picker at the right place and inside Quill; but the heck - it’s just an empty dropdown list?

So honestly I think it would be great, if adding custom dropdowns to Quill would also be explicitely covered in the quill docs. Same as for regular click-buttons.

Thanks for any help! Oliver

P.s. a related question has been closed without any insights #1543

[oliveratgithub]

So a good soul @quannt over here provided me a jsfiddle demonstrating, what one needs in order to add a custom dropdown picker in Quill: https://jsfiddle.net/q7jferw3/

Basically quilljs can create the dropdown list for you but you need to manually supply the HTML content (which is not the clearest thing in the world)

Thanks again!!

[RockStanley]

Quill uses CSS pseudo class to specify content for each toolbar dropdown menu, so do the menu label.

For example:

/* static label */
.ql-picker.ql-customoption .ql-picker-label:before {
    content: "Select Language";     /* never changes its content as this menu's label changes */
}
/* dynamic label */
.ql-picker.ql-customoption .ql-picker-label:before[data-value="en"]:before {
    content: "English";
}
/* options */
.ql-picker.ql-customoption .ql-picker-item[data-value="en"]:before {
    content: "English";
}
.ql-picker.ql-customoption .ql-picker-item[data-value="zh"]:before {
    content: "中文";
}
/* you need to specify rules as many as your options */

then for the easy part, define the handler:

new Quill(selector, {
  modules: {
    toolbar: {
      /* ... */
      handlers: {
        'customoption': function(lang: string) {
          /* do something with lang */
        }
      }
    }
  }
}

addition: maybe you need to manually specify a padding for the picker label, otherwise it will overlap the pseudo class content.

.ql-picker.ql-customoption .ql-picker-label {
    padding-right: 18px;
}

I traced through the source code to derive this solution.