JSFiddle - React, Tailwind, and code Playground
HTML
<div id="text" contenteditable="true">
<li>This is the first paragraph.</li>
<li>This is the second.</li>
<li>This is the third.</li>
</div>
<div id="savebox">
<textarea id="textarea">Copy & paste here with breaks in between each list item.</textarea>
</div>
CSS
li {
list-style-type: none;
}
#savebox {
float: right;
}
#textarea {
height: 200px;
width: 200px;
}
JavaScript
//create global variable to store copied text.
var s;
//listen to copy for your element
$("#text").on("copy", function() {
//get selected text while coping
s = window.getSelection().toString();
//customize breaklines to be double
s = s.replace(/\n/g, "\n\n");
//add break line to the end and more text
s += "\n" + "- More text says you are welcome";
//HTML will displays as plain text in textarea
s += "\n" + "- <p>Hello world</p>";
});
// listen to paste
$("#textarea").on("paste", function() {
//set value with your customized copied text
$("#textarea").val(s);
return false;
});