Temptextarea/index.html at main · CollaborativeTextArea/Temptextarea · GitHub

1
<!DOCTYPE html><html><head><title>textarea</title><link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/atom-one-light.min.css" media="(prefers-color-scheme: light)"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/atom-one-dark.min.css" media="(prefers-color-scheme: dark)"><meta name="viewport" content="width=device-width, initial-scale=0.2"><style>html,body{margin:0;height:100%;overflow:hidden;font-family:sans-serif}#popup{position:fixed;top:10px;left:50%;transform:translateX(-50%);background:#fmfmfm;padding:30px;border-radius:1px;z-index:100}#closeBtn{position:absolute;top:1px;right:5px;cursor:pointer;font-weight:bold}#editorWrapper{position:fixed;inset:0;width:100%;height:100%}#editor{position:absolute;top:0;left:0;width:100%;height:100%;padding:0;font-family:'Roboto Mono',monospace;background:transparent;color:transparent;z-index:2;caret-color:black;border:none;resize:none;overflow:auto;font-size:16px;white-space:pre;line-height:1.2}#editor:focus{outline:none}#codeBlock{position:absolute;top:0;left:0;width:100%;height:100%;padding:0;overflow:auto;background:white;color:black;font-family:'Roboto Mono',monospace;white-space:pre;pointer-events:none;line-height:1.2}@media(prefers-color-scheme:dark){#editor{color:white;caret-color:white}#codeBlock{background:#1e1e1e;color:#dcdcdc}#popup,#popup *{color:#aaa}}</style><script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script></head><body><div id="popup"><span id="closeBtn">x</span><input id="peerIdInput" placeholder="Enter Peer ID"><button id="connectBtn">Connect</button><div id="myId">Your Peer ID :</div><div>,</div><div>you cannot join your own peer id btw also YOUR IP CAN GET LEAKED IN THE PROCESS OF</div><div>PEER2PEER use VPN to stay anonymous incase the person connected</div><div>knows how to Get peoples ip from peer2peer</div><div><link><a href="https://github.com/CollaborativeTextArea/textarea/blob/main/Important.md">Important</a></div></div><div id="editorWrapper" style="box-sizing:content-box;"><textarea id="editor" spellcheck="false" wrap="off" style="background:transparent;color:transparent;box-sizing:content-box;"></textarea><pre><code id="codeBlock" spellcheck="false"></code></pre></div><script src="https://cdn.jsdelivr.net/npm/peerjs@1.4.7/dist/peerjs.min.js"></script><script>let e=document.getElementById("editor"),i=document.getElementById("peerIdInput"),b=document.getElementById("connectBtn"),m=document.getElementById("myId"),c=document.getElementById("closeBtn"),codeBlock=document.getElementById("codeBlock"),p=new Peer(),conns={},myId,lastValue="",lastHighlight="";function updateCode(){let t=e.value;codeBlock.textContent=t;if(t!==lastHighlight){lastHighlight=t;codeBlock.className="hljs";let r=hljs.highlightAuto(t);codeBlock.innerHTML=r.value;}}function scheduleHighlight(){updateCode()}function sendToPeers(t){for(let k in conns)conns[k].send(JSON.stringify({text:t,path:[myId]}))}function handleLocalChange(){scheduleHighlight();let t=e.value;if(t!==lastValue){lastValue=t;sendToPeers(t)}}e.addEventListener("input",handleLocalChange);e.addEventListener("paste",handleLocalChange);e.addEventListener("scroll",()=>{requestAnimationFrame(()=>{e.scrollTop = Math.min(e.scrollTop, codeBlock.scrollHeight - codeBlock.clientHeight); codeBlock.scrollTop = e.scrollTop; codeBlock.scrollLeft = e.scrollLeft;codeBlock.scrollTop=e.scrollTop;codeBlock.scrollLeft=e.scrollLeft})});e.addEventListener("keydown",ev=>{if(ev.key==='Enter'){ev.preventDefault();let c=e.selectionStart,l=e.value.substring(0,c).split('\n').pop(),ind=l.match(/^\s*/)[0];e.setRangeText('\n'+ind,c,c,'end');scheduleHighlight();handleLocalChange()}});p.on("open",id=>{myId=id;m.innerText="Your Peer ID: "+id});p.on("connection",conn=>{conns[conn.peer]=conn;setup(conn)});b.onclick=()=>{let t=i.value.trim();if(!t)return alert("Enter a Peer ID to connect");if(t===myId)return alert("You cannot join your own Peer ID");if(!conns[t]){let n=p.connect(t);conns[t]=n;setup(n)}};c.onclick=()=>document.getElementById("popup").style.display="none";function cursorShift(o,n,c){let s=0,eo=o.length,en=n.length;while(s<eo&&s<en&&o[s]===n[s])s++;while(eo>s&&en>s&&o[eo-1]===n[en-1]){eo--;en--}return en-eo}function setup(conn){conn.on("open",()=>{if(e.value)conn.send(JSON.stringify({text:e.value,path:[myId]}));updateCode()});conn.on("data",d=>{let data=JSON.parse(d);if(data.path.includes(myId))return;let cur=e.selectionStart,shift=cursorShift(lastValue,data.text);e.value=data.text;lastValue=data.text;scheduleHighlight();e.selectionStart=e.selectionEnd=Math.max(0,Math.min(data.text.length,cur+shift));data.path.push(myId);for(let k in conns)if(!data.path.includes(k))conns[k].send(JSON.stringify({text:data.text,path:[...data.path]}))});conn.on("close",()=>delete conns[conn.peer])}setInterval(()=>{codeBlock.className="hljs";codeBlock.innerHTML=hljs.highlightAuto(codeBlock.textContent).value},5000);updateCode();window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change',()=>hljs.highlightElement(codeBlock));</script></body></html>