How to copy value of adobe/react-spectrum component TextArea?

Hello,

I want to create a text area that shows the copiable text (with a scroll when required). The scroll does not appear when overflow happened. It does not scroll. (How can I solve this?)

Also, the text is only copiable with a right click but I want to create a button for a copy. (I could not make the ‘clipboard’ work on my project. Are there any ‘copy’ suggestions?)

Screen Shot 2022-09-09 at 16.27.11

“react”: “^17.0.2”

manifest.json

{
“id”: “10001”,
“name”: “UXP React Start Plugin”,
“version”: “1.0.0”,
“main”: “index.html”,
“manifestVersion”: 5,
“host”: [
{
“app”: “PS”,
“minVersion”: “23.4.0”
}
],
“requiredPermissions”: {

"clipboard": "readAndWrite", ...

Here is the code piece for the component I use;

component.jsx

<TextArea classLabel='textarea' isReadOnly label="Info" value='When typing into a text area and reaching the end of the field on a number-height text area, the cursor should remain as static in the bottom right corner (for left-to-right languages) while text above it overflows through the top of the field. When the field loses focus, text should overflow through the bottom of the text area, showing the beginning of the text' />

component.css

.textarea {
  position: relative;
  max-height: 16px;
  overflow: auto;
  flex-direction: column;
}

I am new to React and UXP development, and I would like to learn about how to achieve these. Any help appreciated!

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 :roll_eyes: 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!

It does not scroll. (How can I solve this?)

You can’t. At this moment. Workarounds fail too.