Hi Beyz,
Copying text isn’t really a Photoshop or React concern but rather one of JavaScript. Modern browsers support copying text to the clipboard using navigator.clipboard.writeText("This text will be copied"). However, looking at the UXP docs on the topic, UXP uses a nonstandard format, navigator.clipboard.writeText({ 'text/plain': 'This text will be copied.' }). The notes in those docs lead me to believe this will be changed in the future. So be sure to keep an eye on changes so that your plugin doesn’t break.
To do what you want specifically, you will need to copy of the value of the input. While there are many ways to get the input of a React component, the preferred way is to use “controlled components”. That is, you store the value in react state, update the state when the input changes, and then if you want to copy the text, you grab that value from the state.
In your case, you’re using a readonly input, where updating the value isn’t important, so I’ll leave that out of this explanation. Instead, just put your value in a variable, use that as the value of the input, and then also use that value in your copy button.
const MyPlugin = () => {
// This is our text to copy.
const value = "I’m copied!";
// This is our button click handler.
const onCopyButtonClick = () => {
navigator.clipboard.writeText({ 'text/plain': value });
};
// Here we have the text area, which displays the text in its value
// We also have a button which, when clicked, will run our click handler.
return (
<div>
<TextArea classLabel="textarea" isReadOnly label="Info" value={value} />
<button onClick={onCopyButtonClick}>Copy Text</button>
</div>
);
};
As to the topic of why your input is not overflowing as expected, that’s a tricky answer. ReactSpectrum isn’t intended for use in UXP extensions. I don’t know what it’s intended use is, but I assume web interfaces for Adobe stuff. While I imagine you could probably eventually troubleshoot your issue using them, your questions will typically fall into the “¯_(ツ)_/¯ they’re not supported” category. You’ll probably do better getting help sticking with the supported technologies.
So here’s where you get into the 
part of Adobe development. What you want are Spectrum UXP. These are web components that are mostly analogous to the ReactSpectrum stuff, but there are some key differences you’ll discover along the way. Web components also don’t always play nicely with React as relates to event handling, so you may be in for a bumpy road if you’re not familiar with all the technologies you’re working with. The best way forward is to just plow on ahead until you start to hit weird behavior, and then search these forums for earlier posts about how people have handled the Spectrum UXP in react.
With all that said, start with the Spectrum UXP components and see if your issue persists there. If so, then you can know you’re at least troubleshooting something that’s supported.
Best of luck!
