Posandu/wysiwyg-editor.html

## wysiwyg-editor.html
<!DOCTYPE html>
<html>

<head>
    <style>
        *,
        *::before,
        *::after {
            box-sizing: border-box;
        }

        body {
            margin: 30px;
            background-color: #1a1b26;
        }

        .container,
        .backdrop,
        textarea {
            width: var(--width);
            height: var(--height);
        }

        .highlights,
        textarea {
            padding: 10px;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            font-size: 16px;
            letter-spacing: 1px;
        }

        .container {
            display: block;
            margin: 0 auto;
            transform: translateZ(0);
            -webkit-text-size-adjust: none;
            background: #24283b;
        }

        .container,
        .container * {

            scrollbar-color: dark;

        }

        .backdrop {
            position: absolute;
            z-index: 1;
            overflow: auto;
            pointer-events: none;
            transition: transform 1s;
        }

        .highlights {
            white-space: pre-wrap;
            word-wrap: break-word;
            color: #cfc9c2;
            background-color: #24283b;
        }

        textarea {
            display: block;
            position: absolute;
            z-index: 2;
            margin: 0;
            border: none;
            border-radius: 0;
            color: transparent;
            background-color: transparent;
            overflow: auto;
            transition: transform 1s;
            caret-color: #fff;
            outline: none;
        }

        mark {
            border-radius: 3px;
            color: red;
            background-color: transparent;
        }

        b {
            color: #a9b1d6;
            font-weight: inherit;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="backdrop">
            <div class="highlights"></div>
        </div>

        <textarea>
            **bold**
*italic*
~~strikethrough~~
> quote
```
            code
```
        </textarea>
    </div>

    <script type="text/javascript">
        const container = document.querySelector('.container');
        const backdrop = document.querySelector('.backdrop');
        const highlights = document.querySelector('.highlights');
        const textarea = document.querySelector('textarea');

        function applyHighlights(text) {
            text = text
                .replace(/\n$/g, '\n\n')
                /* Bold */
                .replace(/\*\*(.*?)\*\*/g, '<b><span style=color:#7a7a7aaa>**</span>$1<span style=color:#7a7a7aaa>**</span></b>')
                /* Italic */
                .replace(/\*(.*?)\*/g, '<i><span style=color:#7a7a7aaa>*</span>$1<span style=color:#7a7a7aaa>*</span></i>')
                /* Strikethrough */
                .replace(/~~(.*?)~~/g, '<span style=color:#7a7a7aaa>~~</span><s>$1</s><span style=color:#7a7a7aaa>~~</span>')
                /* Quote */
                .replace(/^>(.*)/gm, '<span style=color:#7a7a7aaa>></span>$1')
                /* Code */
                .replace(/```([a-z]+\s)?([\s\S]*?)```/g,
                    '<span style=color:#7a7a7aaa>```<span style=color:#242842>$1</span></span>$2<span style=color:#7a7a7aaa>```</span></span>')

            return text;
        }

        function handleInput() {
            const text = textarea.value;
            const highlightedText = applyHighlights(text);
            highlights.innerHTML = highlightedText;
        }

        function handleScroll() {
            const scrollTop = textarea.scrollTop;
            backdrop.scrollTop = scrollTop;

            const scrollLeft = textarea.scrollLeft;
            backdrop.scrollLeft = scrollLeft;
        }

        function handleSize() {
            const width = textarea.offsetWidth;
            const height = textarea.offsetHeight;

            container.style.setProperty('--width', `${width}px`);
            container.style.setProperty('--height', `${height}px`);
        }

        function bindEvents() {
            textarea.oninput = handleInput;
            textarea.onscroll = handleScroll;
            textarea.onmousemove = handleSize;
        }

        bindEvents();
        handleInput();
        handleSize();
    </script>
</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<style>
	*,
	*::before,
	*::after {
	box-sizing: border-box;
	}

	body {
	margin: 30px;
	background-color: #1a1b26;
	}

	.container,
	.backdrop,
	textarea {
	width: var(--width);
	height: var(--height);
	}

	.highlights,
	textarea {
	padding: 10px;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-size: 16px;
	letter-spacing: 1px;
	}

	.container {
	display: block;
	margin: 0 auto;
	transform: translateZ(0);
	-webkit-text-size-adjust: none;
	background: #24283b;
	}

	.container,
	.container * {

	scrollbar-color: dark;

	}

	.backdrop {
	position: absolute;
	z-index: 1;
	overflow: auto;
	pointer-events: none;
	transition: transform 1s;
	}

	.highlights {
	white-space: pre-wrap;
	word-wrap: break-word;
	color: #cfc9c2;
	background-color: #24283b;
	}

	textarea {
	display: block;
	position: absolute;
	z-index: 2;
	margin: 0;
	border: none;
	border-radius: 0;
	color: transparent;
	background-color: transparent;
	overflow: auto;
	transition: transform 1s;
	caret-color: #fff;
	outline: none;
	}

	mark {
	border-radius: 3px;
	color: red;
	background-color: transparent;
	}

	b {
	color: #a9b1d6;
	font-weight: inherit;
	}
	</style>
	</head>

	<body>
	<div class="container">
	<div class="backdrop">
	<div class="highlights"></div>
	</div>

	<textarea>
	bold
	italic
	~~strikethrough~~
	> quote
	```
	code
	```
	</textarea>
	</div>

	<script type="text/javascript">
	const container = document.querySelector('.container');
	const backdrop = document.querySelector('.backdrop');
	const highlights = document.querySelector('.highlights');
	const textarea = document.querySelector('textarea');

	function applyHighlights(text) {
	text = text
	.replace(/\n$/g, '\n\n')
	/* Bold */
	.replace(/\\(.?)\\/g, '<b><span style=color:#7a7a7aaa></span>$1<span style=color:#7a7a7aaa>*</span></b>')
	/* Italic */
	.replace(/\(.?)\/g, '<i><span style=color:#7a7a7aaa></span>$1<span style=color:#7a7a7aaa>*</span></i>')
	/* Strikethrough */
	.replace(/~~(.*?)~~/g, '<span style=color:#7a7a7aaa>~~</span><s>$1</s><span style=color:#7a7a7aaa>~~</span>')
	/* Quote */
	.replace(/^>(.*)/gm, '<span style=color:#7a7a7aaa>></span>$1')
	/* Code */
	.replace(/```([a-z]+\s)?([\s\S]*?)```/g,
	'<span style=color:#7a7a7aaa>```<span style=color:#242842>$1</span></span>$2<span style=color:#7a7a7aaa>```</span></span>')

	return text;
	}

	function handleInput() {
	const text = textarea.value;
	const highlightedText = applyHighlights(text);
	highlights.innerHTML = highlightedText;
	}

	function handleScroll() {
	const scrollTop = textarea.scrollTop;
	backdrop.scrollTop = scrollTop;

	const scrollLeft = textarea.scrollLeft;
	backdrop.scrollLeft = scrollLeft;
	}

	function handleSize() {
	const width = textarea.offsetWidth;
	const height = textarea.offsetHeight;

	container.style.setProperty('--width', `${width}px`);
	container.style.setProperty('--height', `${height}px`);
	}

	function bindEvents() {
	textarea.oninput = handleInput;
	textarea.onscroll = handleScroll;
	textarea.onmousemove = handleSize;
	}

	bindEvents();
	handleInput();
	handleSize();
	</script>
	</body>

	</html>