JSFiddle - React, Tailwind, and code Playground

HTML

<textarea onkeyup="f(this.value)" id="c" placeholder="Code"></textarea><br/>
<input type="checkbox" id="b" onchange="f(document.getElementById('c').value)" checked/>&nbsp;<label for="b">Show directions</label><br/>
<pre id="a"></pre>

JavaScript

function f(a){a=a.split("\n");var b=a.map(function(a){return a.length}).sort()[a.length-1];a=a.map(function(a){return(a+Array(b+1).join(" ")).substring(0,b)});var c=a[0].split("").map(function(c,b){return a.map(function(a){return a[b]}).join("")});a=[a.join(""),a.reverse().join(""),c.join(""),c.reverse().join("")];a=a.concat(a.map(function(a){return a.split("").reverse().join("")}));document.getElementById("a").innerHTML=a.map(function(c,b){return document.getElementById("b").checked?c+"   "+"LLTTRRBB"[b]+"T"+"RRBBLLTT"[b]+"-"+"TBLRBTRL"[b]+"T"+"BTRLTBLR"[b]:c;}).join("\n")};