how to add new line on to textarea on copy to clipboard?

Question

This is my copy to clipboard code, I am using textarea but when i am pasting what i copied on code, everything is just on one line:

const CopyButton = ({ text }: { text: string }) => {
  const init_val = 'Copy';
  const [btn_val, set_value] = useState(init_val);
  const copyToClipboard = () => {
    const textField = document.createElement('textarea');
    textField.innerText = text;
    document.body.appendChild(textField);
    textField.select();
    document.execCommand('copy');
    textField.remove();
    set_value('Copied!');
    setTimeout(() => {
      set_value(init_val);
    }, 1500);
  };

  return (
    <button className='copy-to-clipboard' onClick={copyToClipboard}>
      {btn_val}
    </button>
  );
};

I am thinking of solving this with regexp but don't know how and can't seem to find a solution around.

Answer 1

You have to use white-space: pre, since HTML removes white space. You can try the following code:

const CopyButton = ({ text }: { text: string }) => {
const init_val = 'Copy';
const [btn_val, set_value] = React.useState(init_val);
const copyToClipboard = () => {
  const textField = document.createElement('textarea');
  var newParagraph = document.createElement('p');
  var newContent = document.createTextNode("Samson's SR500 headphones offer exceptional sonic \nclarity and comfort in a durable, lightweight design \nperfect for studio and movile applications.");
  newParagraph.appendChild(newContent)
  document.body.appendChild(newParagraph);
  document.body.style ="white-space: pre";
  textField.select();
  document.execCommand('copy');
  textField.remove();
  set_value('Copied!');
  setTimeout(() => {
    set_value(init_val);
  }, 1500);
};

return (
  <div>
    <button className='copy-to-clipboard' onClick={copyToClipboard}>
        {btn_val}
    </button>
  </div>


 );
};

References:

• Stack Overflow. How do I preserve line breaks when getting text from a textarea? stack overflow. https://stackoverflow.com/a/40426477/8121551 (accessed October 31, 2019)
• Jennifer Madden. Creating Line Breaks in JavaScript Strings. http://jennifermadden.com/javascript/lineBreaks.html (accessed October 31, 2019)
• moz://a. Document.createElement(). MDN web docs moz://a. https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement (accessed October 31, 2019)

Answer 2

You need to use textField.innerHTML or textField.textContent , textField.innerText will remove certain characters such as new lines.

Be careful using innerHTML because this will allow users of the copy function to insert their own HTML in your site which could cause an Cross Site Scripting (XSS) issue.

Answer 3

Interesting piece of code. Could you provide the HTML / CSS that you use with the code?

Answer 4

as you can see on my code i am using innerText, I digged in around and tried using textContent and it worked, just replace innerText to textContent on my code:

textField.textContent = text;