JSFiddle - React, Tailwind, and code Playground

by Dörnesz Tamás

HTML

<input type="button" onclick="SzSz({s:'>',e:'<'})" value=">.<">
<input type="button" onclick="SzSz({s:'„',e:'”'})" value="quote">
<input type="button" onclick="SzSz({mod:'sm'})" value="lower">
<input type="button" onclick="SzSz({tag:'small'})" value="small">
<input type="button" onclick="SzSz({tag:'a'})" value="href">
<input type="button" onclick="SzSz({mod:'list'})" value="list">
<input type="button" onclick="SzSz({mod:'clr'})" value="clear">
<input type="button" onclick="SzSz({mod:'br'})" value="br">

<div contenteditable="true">Some 
editable text.<br>
dgfg Select <br>
some and press<br>
on of the <br>
buttons above.
dgfg Select <br>
some and press<br>
on of the <br>
buttons above.</div>

JavaScript

function insertTag(html, isBefore) {
  var range = window.getSelection().getRangeAt(0);
  var selectionContents = range.extractContents();
  var div = document.createElement("div");
  div.style.color = "yellow";
  div.appendChild(selectionContents);
  range.insertNode(div);
}
function SzSz(a) {
	if(a.s === undefined)a.s="";
	if(a.e === undefined)a.e="";
  var selObj = window.getSelection();
  var selRange = selObj.getRangeAt(0);
  var selectedText = selObj.toString();
  var extract=selRange.extractContents();
  var insert, frag, node, lastnode;
  if(a.mod !== undefined){
  	if(a.mod=='sm')selectedText = selectedText.toLowerCase();  
  }
	if(a.mod=='list'){
		var arr=selectedText.split("\n");
    selectedText="<ul>\n<li>"+arr.join("</li>\n<li>")+"</li>\n</ul>";
	}
	if(a.mod=='clr'){
    selectedText=selectedText.replace(/\n/g, "<br>\n");
	}
	if(a.mod=='br'){
    selectedText+="<br>";
	}
  
  if (window.getSelection) {
  	if (selObj.getRangeAt && selObj.rangeCount) {
  	    selRange.collapse(true);
        if(a.tag !== undefined){
          insert = document.createElement(a.tag);
          //insert.style.color = "yellow";
          if(a.tag=="a"){
          	//a.setAttribute("href", "somelink url");
            insert.href= prompt('Hivatkozás:', selectedText);
          }
          insert.appendChild(extract);
        }else{
          insert = document.createDocumentFragment();
          var el = document.createElement("div");
          el.innerHTML = a.s+selectedText+a.e;
          while((node=el.firstChild)){lastNode=insert.appendChild(node);}
        }
  	    selRange.insertNode(insert);
  	}
  }
}

function insertHtmlAtSelectionEnd(html, isBefore) {
    var sel, range, node;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = window.getSelection().getRangeAt(0);
            range.collapse(isBefore);

            // Range.createContextualFragment() would be useful here but was
  ...