TinyMCE, CKEditor, and Froala allow you to copy-paste HTML tables (e.g. from an email or Wikipedia) directly into the HTML textarea and the HTML table structure and tags are preserved.
For an additional example, my web-based email client can also do this. I can copy an HTML table from an email I received into an email I am sending, and the table structure will be preserved.
I understand that these editors are not just HTML textareas, rather they are rich text editors. My question: What browser capabilities allow for rich text editing? How do they do this?
From what I can tell, every time I copy-paste some HTML into a textarea, the browser strips out all HTML tags.
The answer is that HTML is very flexible and you aren't limited to the default behavior of input elements for user interaction. Specifically how it handles non plaintext paste, the answer is it isn't simple.
Luckily there are a few open source rich text editors. For example, in ckeditor it is handled by the clipboard pipeline which takes the paste event and applies the correct styling in the editor.
Here's a minimal answer. Thank you to Andrew Gillis for directing me to the CKEditor source code that had something similar.
<html>
<head>
</head>
<body>
<textarea class="rich" cols="40" rows="8"></textarea>
</body>
<script>
const target = document.querySelector('textarea.rich');
target.addEventListener('paste', (event) => {
const clipboard_data = (event.clipboardData || window.clipboardData);
const text_paste_content = clipboard_data.getData('text/plain');
const html_paste_content = clipboard_data.getData('text/html');
// This what we see by default
console.log(text_paste_content)
// This is the raw HTML that can be used to make "rich" content
console.log(html_paste_content)
});
</script>
</html>
When you paste into the textarea, you will have access to the raw HTML through the html_paste_content variable.
Often these editors will have a user-visible <div> element as the element that renders the table and a hidden <textarea> element that contains the actual markup that will be sent to the server when the form is submitted.