Reference email picture
Basically, I want to create this type of mailbox where users can customize their posts. But I don't know how to make it bold/italic/quoted
I think you want to provide users with a standard form of text parsing, and Markdown has the functionality you require.
You can try to use a Markdown parser like this:
const textarea = document.querySelector('textarea'); const content = document.querySelector('.content'); const update = () => content.innerHTML = marked.parse(textarea.value); textarea.addEventListener('input', update); textarea.value = '**Bold** \n*Italic*' update();
html, body { margin: 0; height: 100%; } .container { display: flex; height: 100%; } .container>* { flex: 1; }
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> <div class="container"> <textarea></textarea> <div class="content"></div> </div>
I think you want to provide users with a standard form of text parsing, and Markdown has the functionality you require.
You can try to use a Markdown parser like this: