Skip to content

Instantly share code, notes, and snippets.

@Posandu
Last active May 12, 2022 15:51
Show Gist options
  • Save Posandu/8ac1b0cfabb1507d3c5d8470d56c44a8 to your computer and use it in GitHub Desktop.
Save Posandu/8ac1b0cfabb1507d3c5d8470d56c44a8 to your computer and use it in GitHub Desktop.
wysiwyg editor
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment