JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//cdn.jsdelivr.net/medium-editor/latest/css/medium-editor.min.css">
<link rel="stylesheet" href="https://rawgit.com/yabwe/medium-editor/master/dist/css/themes/tim.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.css">
<script src="https://rawgit.com/alvarotrigo/medium-editor/master/dist/js/medium-editor.js"></script>
<div class="editable">
    Just a beautiful text Just a beautiful text Just a beautiful text Just a beautiful text Just a beautiful text Just a beautiful text Just a beautiful text Just a beautiful text
</div>

CSS

::selection {
    color: #000;
    /* WebKit/Blink Browsers */
    background-color: #b1d7fe;
}

::-moz-selection {
    color: #ccc;
    /* Gecko Browsers */
    background-color: #b1d7fe;
}

.editable,
.editable:focus {
    outline: 0px solid transparent;
}

JavaScript

var currentTextSelection;

/**
* Gets the color of the current text selection
*/
function getCurrentTextColor(){
    return $(editor.getSelectedParentElement()).css('color');
}

/**
 * Custom `color picker` extension
 */
var ColorPickerExtension = MediumEditor.extensions.button.extend({
    name: "colorPicker",
    action: "applyForeColor",
    aria: "color picker",
    contentDefault: "<span class='editor-color-picker'>Text Color<span>",

    init: function() {
        this.button = this.document.createElement('button');
        this.button.classList.add('medium-editor-action');
        this.button.innerHTML = '<b>Text color</b>';
		
        //init spectrum color picker for this button
        initPicker(this.button);
        
        //use our own handleClick instead of the default one
        this.on(this.button, 'click', this.handleClick.bind(this));
    },
     handleClick: function (event) {
     	 //keeping record of the current text selection
         currentTextSelection = editor.exportSelection();
         
         //sets the color of the current selection on the color picker
         $(this.button).spectrum("set", getCurrentTextColor());

		 //from here on, it was taken form the default handleClick
         event.preventDefault();
         event.stopPropagation();

         var action = this.getAction();

         if (action) {
             this.execAction(action);
         }
     }
});

var pickerExtension = new ColorPickerExtension();

function setColor(color) {
    var finalColor = color ? color.toRgbString() : 'rgba(0,0,0,0)';

    pickerExtension.base.importSelection(currentTextSelection);
    pickerExtension.document.execCommand("styleWithCSS", false, true);
    pickerExtension.document.execCommand("foreColor", false, finalColor);
}

function initPicker(element) {
    $(element).spectrum({
        allowEmpty: true,
        color: "#f00",
        showInput: true,
        showAlpha: true,
        showPalette: true,
        showInitial: true,
     ...