JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<script src="//cdn.quilljs.com/1.3.6/quill.js"></script>
<link rel="stylesheet" href="//cdn.quilljs.com/1.3.6/quill.snow.css">
<div id="editor">
  <p>Dear [GuestName],</p>
  <p>Please check how I can have my cake and eat it too!</p>
  <br />
  <br />
  <p>
    Thanks,
  </p>
  <p>
    [HotelName]
  </p>
</div>

CSS

.custom-icon {
  background: #444;
  color: #fff;
  height: 20px;
  width: 20px;
  display: block;
  font-size: 10px;
  padding: 8px 0px 0px 2px;
  border-radius: 2px;
}

#editor {
  height: 375px;
}

.ql-snow .ql-picker-label {
  padding-right: 25px;
}

.ql-snow .ql-picker {
  height: auto;
}

.ql-toolbar.ql-snow .ql-formats:last-child {
  float: right;
}

.ql-snow .custom-drop .ql-picker.ql-expanded .ql-picker-options {
  margin-left: -47px;
}

.ql-snow .ql-picker-options {
  padding: 0px;
}

.ql-snow .ql-picker-options .ql-picker-item {
  padding: 4px 8px;
}

.dropopt {
  font-size: 10px;
}

.dropopt div:first-child {
  font-size: 9px;
  text-align: center;
  background: #e0e0e0;
  color: #353535;
  margin-top: 6px;
  padding: 2px;
}

.dropopt span {
  cursor: pointer;
  padding: 8px 2px;
  width: 50%;
  text-align: center;
}

.dropopt span:first-child {
  float: left;
}

.dropopt span:last-child {
  float: right;
}

.dropopt .on {
  background: #01aeef;
  /* border: 1px solid #ffcc01; */
  color: #fff;
}

JavaScript

//Setting quill with custom dropdown
  var quill = new Quill('#editor', {
    theme: 'snow',
    modules: {
      toolbar: {
        container: [
          [{
            'font': []
          }],
          [{
            'size': ['small', false, 'large', 'huge']
          }],
          ['bold', 'italic', 'underline', 'strike'],
          [{
            'color': []
          }, {
            'background': []
          }],
          [{
            'list': 'ordered'
          }, {
            'list': 'bullet'
          }],
          [{
            'script': 'sub'
          }, {
            'script': 'super'
          }],
          ['clean'],
          ['image'],
          [{
            'placeholder': ['[GuestName]', '[HotelName]']
          }] // my custom dropdown

        ],
        handlers: {
          "placeholder": function(value) {
            if (value) {
              const cursorPosition = this.quill.getSelection().index;
              this.quill.insertText(cursorPosition, value);
              this.quill.setSelection(cursorPosition + value.length);
            }
          }
        }
      }
    }
  });

  // We need to manually supply the HTML content of our custom dropdown list
  const placeholderPickerItems = Array.prototype.slice.call(document.querySelectorAll('.ql-placeholder .ql-picker-item'));

  placeholderPickerItems.forEach(item => item.textContent = item.dataset.value);

  document.querySelector('.ql-placeholder .ql-picker-label').innerHTML = '<span class="custom-icon">fn</span>' + document.querySelector('.ql-placeholder .ql-picker-label').innerHTML;
  //<img src="https://icooon-mono.com/i/icon_15223/icon_152230_256.jpg" height="18" style="margin-top:4px;">

  $('.ql-formats:last-child').addClass('custom-drop');

  $('.custom-drop .ql-picker-options').append('<div class="dropopt"><div>View</div><div><span class="on">Variable</span><span class="">Resolve</span></div></div>');

  $(".dropopt span").click(function() {
    $(".dropopt...