JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
<textarea id="message"></textarea>
JavaScript
function fontStyles()
{
// pridani tlacitek
var form = document.getElementById('message');
var font_styles = document.createElement('div');
font_styles.setAttribute('class', 'font_styles');
font_styles.innerHTML = '<i class="fas fa-bold" id="bold"></i>'
+ '<i class="fas fa-italic" id="italic"></i>'
+ '<i class="fas fa-list-ul" id="list_ul"></i>'
+ '<i class="fas fa-list-ol" id="list_ol"></i>';
form.parentNode.insertBefore(font_styles, form);
// \pridani tlacitek
var bold = document.getElementById("bold");
var italic = document.getElementById("italic");
var listUl = document.getElementById("list_ul");
var listOl = document.getElementById("list_ol");
var message = document.getElementById('message');
if(bold !== null)
{
bold.addEventListener("click", function(){
setMessageContent(message, "**", "", "**", false);
message.focus();
});
}
if(italic !== null)
{
italic.addEventListener("click", function(){
setMessageContent(message, "//", "", "//", false);
message.focus();
});
}
if(listUl !== null)
{
listUl.addEventListener("click", function(){
setMessageContent(message, "\n- ", "", "", true);
message.focus();
});
}
if(listOl !== null)
{
listOl.addEventListener("click", function(){
setMessageContent(message, "\n1) ", "", "", true);
message.focus();
});
}
}
function setMessageContent(message, before, text, after, rowing)
{
var start = message.selectionStart;
var end = message.selectionEnd;
var content = message.value;
var left = content.slice(0, start);
var right = content.slice(end);
var isSelected = start === end ? false : true;
var string = "";
var caretOffset;
if(isSelected)
{
var center = content.slice(start, end);
...