JSFiddle - React, Tailwind, and code Playground

by tsdexter

HTML

<div contenteditable="true">text text more text <span>and a text in a span</span></div>
<input type="text" />
<textarea></textarea>

JavaScript

window.text = "";
window.bold = false;
window.italic = false;

document.onkeydown = (e) => {
	const evtobj = window.event ? event : e;
  	// console.log(evtobj.keyCode, evtobj.ctrlKey);
  	if (evtobj.keyCode == 66 && evtobj.ctrlKey) {
      	console.log("embolden");
    	window.bold = !window.bold;
    };
};

window.conversion = {
	bold: {
    	a: "๐—ฎ",
        b: "๐—ฏ",
        c: "๐—ฐ",
        d: "๐—ฑ",
        e: "๐—ฒ",
        f: "๐—ณ",
        g: "๐—ด",
        h: "๐—ต",
        i: "๐—ถ",
        j: "๐—ท",
        k: "๐—ธ",
        l: "๐—น",
        m: "๐—บ",
        n: "๐—ป",
        o: "๐—ผ",
        p: "๐—ฝ",
        q: "๐—พ",
        r: "๐—ฟ",
        s: "๐˜€",
        t: "๐˜",
        u: "๐˜‚",
        v: "๐˜ƒ",
        w: "๐˜„",
        x: "๐˜…",
        y: "๐˜†"
    }
}

window.addEventListener('keypress', (e) => {
  	const evtobj = window.event ? event : e;
  	const el = document.activeElement;
  	const text = el.value || el.innerText;
  	if (!evtobj.ctrlKey) {
		const c = String.fromCharCode(evtobj.which);
      	const n = window.bold && window.conversion.bold[c] ? window.conversion.bold[c] : c;        
      	el.value = text.length > 0 ? text.substring(0, text.length - 1) + n : n;
    }
});