JSFiddle - React, Tailwind, and code Playground

HTML

<p>
    <input id="backup" type="button" value="Backup Range" /> 
    <input id="color1" type="button" value="Fore Color" /> 
    <input id="color2" type="button" value="BG Color" />
</p>
<p contenteditable="true">Testing my text here to see if we can highlight it.</p>

JavaScript

var zss_editor = {};

// The current selection
zss_editor.currentSelection;

zss_editor.backuprange = function(){
	var selection = window.getSelection();
	zss_editor.currentSelection = selection.getRangeAt(0);
	zss_editor.currentSelection.setEnd(zss_editor.currentSelection.startContainer, zss_editor.currentSelection.startOffset);
}

zss_editor.restorerange = function(){
	var selection = window.getSelection();
	selection.removeAllRanges();
	selection.addRange(zss_editor.currentSelection);
	console.log(zss_editor.currentSelection);
}

zss_editor.setTextColor = function(color) {
    zss_editor.restorerange();
	document.execCommand("styleWithCSS", null, true);
	document.execCommand('foreColor', false, color);
	document.execCommand("styleWithCSS", null, false);
}

zss_editor.setBackgroundColor = function(color) {
    zss_editor.restorerange();
	document.execCommand("styleWithCSS", null, true);
	document.execCommand('hiliteColor', false, color);
	document.execCommand("styleWithCSS", null, false);
}

$('#backup').click(function() {
    zss_editor.backuprange();
});

$('#color1').click(function() {
    zss_editor.setTextColor('#007AFF');
});

$('#color2').click(function() {
    zss_editor.setBackgroundColor('#007AFF');
});