JSFiddle - React, Tailwind, and code Playground

by Anov Siradj

HTML

<script src="https://anovsiradj.github.io/webapp.js"></script>
<h1>Multiline To Inline</h1>
<textarea autofocus="off"></textarea>
<pre></pre>

CSS

textarea,pre {
	width: 49%;
	border: 1px solid #888;
	height: 75vh;
	padding: 0;
	margin: 0;
}

textarea {
	float: left;
}

pre {
	float: right;
}

JavaScript

dump.type = 'log';

var input = document.querySelector('textarea');
var output = document.querySelector('pre');

var transform = () => {
	output.innerText = input.value.split(/[\n\t]/g).join('');
};

input.addEventListener('focus', () => input.select());
output.addEventListener('click', () => getSelection().selectAllChildren(output));

input.addEventListener('input', debounce(transform, 333));

input.value = "hello\nworld";
input.dispatchEvent(new Event('input'));