Is "drag and drop" possible to do?

Not sure if there's same issue with other plugins, but can't build ui-playground

I get

g:\___DEV___\Adobe\uxp-photoshop-plugin-samples-main\ui-playground
λ npm run build

> [email protected] build
> webpack --mode production

node:internal/crypto/hash:71
  this[kHandle] = new _Hash(algorithm, xofLen);
                  ^

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:71:19)
    at Object.createHash (node:crypto:133:10)
    at module.exports (g:\___DEV___\Adobe\uxp-photoshop-plugin-samples-main\ui-playground\node_modules\webpack\lib\util\createHash.js:135:53)
    at NormalModule._initBuildHash (g:\___DEV___\Adobe\uxp-photoshop-plugin-samples-main\ui-playground\node_modules\webpack\lib\NormalModule.js:417:16)
    at handleParseError (g:\___DEV___\Adobe\uxp-photoshop-plugin-samples-main\ui-playground\node_modules\webpack\lib\NormalModule.js:471:10)
    at g:\___DEV___\Adobe\uxp-photoshop-plugin-samples-main\ui-playground\node_modules\webpack\lib\NormalModule.js:503:5
    at g:\___DEV___\Adobe\uxp-photoshop-plugin-samples-main\ui-playground\node_modules\webpack\lib\NormalModule.js:358:12
    at g:\___DEV___\Adobe\uxp-photoshop-plugin-samples-main\ui-playground\node_modules\loader-runner\lib\LoaderRunner.js:373:3
    at iterateNormalLoaders (g:\___DEV___\Adobe\uxp-photoshop-plugin-samples-main\ui-playground\node_modules\loader-runner\lib\LoaderRunner.js:214:10)
    at iterateNormalLoaders (g:\___DEV___\Adobe\uxp-photoshop-plugin-samples-main\ui-playground\node_modules\loader-runner\lib\LoaderRunner.js:221:10)
    at g:\___DEV___\Adobe\uxp-photoshop-plugin-samples-main\ui-playground\node_modules\loader-runner\lib\LoaderRunner.js:236:3
    at context.callback (g:\___DEV___\Adobe\uxp-photoshop-plugin-samples-main\ui-playground\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
    at g:\___DEV___\Adobe\uxp-photoshop-plugin-samples-main\ui-playground\node_modules\babel-loader\lib\index.js:44:71 {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Node.js v18.12.1

README says to use manifest from dist, which does not exist also

I havent change anythig in plugin, just change manifest version from 4 to 5 in manifest.json
Then there is javascript error in debugger console in photoshop plugin. And plugin is not working.
I think manifest 4 is very old, there is lot of new functionality working only on 5 version, so would be nice if examples would work in manifest 5, to make a kind of boilerplate for plugins, in other case they are not very useful now .
Edit:
"network": {
"allowCodeGenerationFromStrings": true
},
is fixing it, but i think this is not super secure

cc @macdonst

This issue is a single instance of #17

As per this request: https://forums.creativeclouddeveloper.com/t/anyone-using-firebase-with-their-uxp-plugin/3640

I'm not 100 % sure if it's possible to integrate the Firebase libraries, meaning that this includes first evaluating if it is possible to do so.

Is it possible to drag an image from UXP Panel and drop it in the PS app?
I have already created Auto Icon Plugin which is a library of icon collections. If I could use the native PS Drag and drop it could be really nice but unfortunately, I couldn't find a way to do that and I was forced to use an import button in the UI.
Is there any plan to implement this feature?

Thanks.

I wana get CSS meta from layer, but i don't know how to query from

const app = require('photoshop').app;
const currentDocument = app.activeDocument;
const { layerTree } = currentDocument;

// There are no css mets in layerTree or layer 

Can you help me ? @pklaschka

The current slider/gradient rendering is not ideal. Let's separate them out a bit more visually so that the slider doesn't overlay the gradient.

In desktop-helper-sample electron's main file electron.js has nodeIntegration set to true. This is considered unsafe and not necessary to run this sample.
See also Electron docs

More secure would be:

webPreferences: {
        nodeIntegration: false,
        contextIsolation: true,
    },

Modern react development practices favour functional react and hooks rather than classes. Having a sample with classes can confuse new developers who don't yet have a lot of experience.

It would be great to either have current starter re-written in a functional way or provide a functional starter.

Hi,

I followed your instructions.
I installed dependencies: npm install -> it's OK

npm run build :
PS E:\Develop\Photoshop\UXP\uxp-photoshop-plugin-samples\ui-react-starter> npm run build

[email protected] build E:\Develop\Photoshop\UXP\uxp-photoshop-plugin-samples\ui-react-starter
webpack --mode development

[webpack-cli] Failed to load 'E:\Develop\Photoshop\UXP\uxp-photoshop-plugin-samples\ui-react-starter\webpack.config.js' config
[webpack-cli] Invalid options object. Copy Plugin has been initialized using an options object that does not match the API schema.

• options[0] should be an object:
  object { patterns, options? }
  npm ERR! code ELIFECYCLE
  npm ERR! errno 2
  npm ERR! [email protected] build: webpack --mode development
  npm ERR! Exit status 2
  npm ERR!
  npm ERR! Failed at the [email protected] build script.
  npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\kaci\AppData\Roaming\npm-cache_logs\2021-06-21T15_19_11_850Z-debug.log
PS E:\Develop\Photoshop\UXP\uxp-photoshop-plugin-samples\ui-react-starter>

node --version
v14.17.1
npm --version
6.14.13

npm list webpack-cli
[email protected] E:\Develop\Photoshop\UXP\uxp-photoshop-plugin-samples\ui-react-starter
`-- [email protected]

OS: Windows 10
IDE: VS Code: 1.57.1

Thx
kaci

I think making a CLI app that can create a Basic UXP starter boilerplate for React, Vuejs or native js makes the plugin creation workflow cleaner and faster than before. Simply developers can select the Appropriate Framework and get started.

As a good practice, it would be helpful to have sample-specific .gitignore file that could include dist and node_modules

I tested and changed tooltip for some component type by Kitchen Sink sample

• tooltip right appear always over the element despite placement="right" defined
  e.g. 1.
  <sp-checkbox class="tooltip">Web component
<sp-tooltip open placement="right" variant="info">I'm a tooltip!</sp-tooltip>
</sp-checkbox>
  e.g. 2.
  <sp-detail class="tooltip">TEXT FIELD
<sp-tooltip open placement="right" variant="info">I'm a tooltip!</sp-tooltip>
</sp-detail>

• textfield toolbox does not work
  <sp-textfield class="tooltip" placeholder="Type Something.">
<sp-tooltip open placement="right" variant="info">I'm a tooltip!</sp-tooltip>
</sp-textfield>

I don't know maybe this the planned operation but I think this is not right.

Thx
Karoly

• Use the new manifest (v4)
• Use Spectrum UXP
• Use a panel & modal dialog
• Interact with the document in some way (we can keep this quite basic)

One approach might be to find an existing sample for XD or Ps and make it cross-app.

Note for Kerri and Ash: Where should the sample live? Maybe new repo.

We have a similar example for Adobe XD in our old XD samples repo here:
https://github.com/AdobeXD/plugin-samples/tree/master/how-to-export-a-rendition

This sample would be an informative starting point for the UI, but the host app API mechanism for exporting the renditions will be different since the host app APIs vary app-to-app.

This will most likely require some contact with the Photoshop API team to learn how to build this.

• Migrate this CEP test extension to UXP
• Document the process
• Write a guide and a blog post about the experience

Note: @amandahuarng has already started this process, but more contributions are welcome!

Q: Where should this workflow happen?

A: Via a browser workflow.

1. Redirect through the browser
2. Present auth workflow
3. Give token back to plugin
4. Store in secureStorage

You will likely want to build the plugin and a standalone server app that the plugin can communicate with.

I've been developing a C++ plugin to run a bunch of commands on current loaded file.
i.e. if I want to load a custom color profile from a file I can run such a sequence

Auto_Desc convertDescriptor;
      DescriptorTypeID runtimeEventID;
      Auto_Ref convertReference;
      Auto_Desc convertResult(false);

      METHOD_INFO("Loading profile data of size") << dataLength << LOG_NL;

      SPErr error = sPSActionReference->PutIdentifier(convertReference, classDocument, docId);
      CHECK_ERROR("PutIdentifier", error)

      error = sPSActionDescriptor->PutReference(convertDescriptor, keyNull, convertReference);
      CHECK_ERROR("PutReference", error)

      error = sPSActionDescriptor->PutData(convertDescriptor, keyTo, dataLength, pData);
      CHECK_ERROR("PutData", error)

      error = sPSActionDescriptor->PutEnumerated(convertDescriptor, keyIntent, typeIntent, enumColorimetric);
      CHECK_ERROR("PutEnumerated", error)

      error = sPSActionDescriptor->PutBoolean(convertDescriptor, keyMapBlack, true);
      CHECK_ERROR("PutBoolean", error)

      error = sPSActionDescriptor->PutBoolean(convertDescriptor, keyDither, true);
      CHECK_ERROR("PutBoolean", error)

      error = sPSActionDescriptor->PutBoolean(convertDescriptor, keyFlatten, true);
      CHECK_ERROR("PutBoolean", error)

      error = sPSActionDescriptor->PutInteger(convertDescriptor, keyShadowMode, -1);
      CHECK_ERROR("PutInteger", error)

      error = sPSActionControl->StringIDToTypeID("convertToProfile", &runtimeEventID);
      CHECK_ERROR("StringIDToTypeID", error)

      error = sPSActionControl->Play(&convertResult, runtimeEventID, convertDescriptor, plugInDialogSilent);
      CHECK_ERROR("Play", error)

or if I want to load a selection I can run something like this

  bool PhotoShopBridge::LoadSelection(const LoadSelectionCommand &command) {
    METHOD_START("PhotoShopBridge::LoadSelection")

      Auto_Ref reference1;
      Auto_Ref reference2;
      Auto_Desc result(false);
      Auto_Desc descriptor;

      auto name = command.entityName();
      auto type = command.type();
      if (type.empty())
        type = "l";

      SPErr error = PIUSelectByID(classDocument, command.documentId());
      CHECK_ERROR("PIUSelectByID", error)

      error = sPSActionReference->PutProperty(reference1, classChannel, keySelection);
      CHECK_ERROR("PutProperty", error)

      error = sPSActionDescriptor->PutReference(descriptor, keyNull, reference1.get());
      CHECK_ERROR("PutReference", error)

      if (!name.empty()) {
        if (type == "l") {
          error = sPSActionReference->PutEnumerated(reference2, classChannel, typeChannel, enumTransparency);
          CHECK_ERROR("PutEnumerated", error)

          error = sPSActionReference->PutName(reference2, classLayer, name.c_str());
          CHECK_ERROR("PutName", error)
        } else {
          error = sPSActionReference->PutName(reference2, classChannel, name.c_str());
          CHECK_ERROR("PutName", error)
        }
      } else {
        error = sPSActionReference->PutEnumerated(reference2, classChannel, typeOrdinal, enumTarget);
        CHECK_ERROR("PutEnumerated", error)
      }

      error = sPSActionDescriptor->PutReference(descriptor, keyTo, reference2.get());
      CHECK_ERROR("PutReference", error)
      error = sPSActionControl->Play(&result, eventSet, descriptor, plugInDialogSilent);
      CHECK_ERROR("Play", error)

    METHOD_END
  }

the main downside for this plugin is that I cannot achieve a native look and feel for it.
So I decided to give UXP a try, so far is was quite easy to create the needed interface and have a native look and feel, but I see no way of running a command as I do in the C++ plugin? Is there any solution for this?

So far, I have 2 plugins,

• UXP - for UI and various parameters to be set by users
• C++ - to execute various commands I need.
  for now, I managed to send commands from UXP to C++ and vice-versa and it works well, but then I don't know how to deploy correctly the C++ plugin? Can I download it with UXP version and run the installer as it has dependencies to 3rd party C++ libraries?
  If not, what's the process for it?

Or better yet, how do I execute all those commands from UXP using JavaScript.

Thx

I trying to develop a plugin for personal use in React so I used the Ui-React-Sample and its builds rights and throws no error in yarn while it does when I do it in NPM which was because of the wrong version of webpack; but the end problem I face is that the UXP dev tool does not load the plugin and throws an error stating the following:

Action: Plugin Load
com.adobe.uxp.starter.react
Plugin Load Failed.
No applications are connected to the service. Make sure the target application is running and connected to the service.

Screenshot of inside the UXP Dev tool desktop app

System Config:
i7 Intel 10th Gen
Windows 11 Home
16 GB ram
1Tb SSD
Adobe UXP Developer Tool Ver: 1.5.0.8
Using VIM as the Editor
And Powershell for terminal

Presumably, uxp refers to the @adobe/uxp-devtools-cli NPM package => we should probably define this as a development dependency in the samples that use it

Create a sample in the language of your choice (python, Go, pHp) that communicates with a plugin via websockets.

• Note: Plugins can be websocket clients, but cannot be servers.
• Check out the NodeJS sample for an example of this (I'm not sure where this is cc: @kerrishotts)

Example ideas:

• Communicate with Blender to update textures
• Use a Photoshop layer to trigger an Arduino to interact with the physical world (like turning on an actual blender)

• Take this sample CEP panel
• Make use of our CEP Getting Started Guide
• Migrate the panel to UXP
• Write a guide and/or blog post about the experience

Running react sample, this is what I get.
But nothing is clickable and nothing seems to work.

Where can I find a working example written using modern React patterns and best practices?
Documentation would also be great, samples don't do a good job explaining how to setup the environment and start development.

From the Photoshop roadmap: https://trello.com/c/jHpH0I7T

uxp-photoshop-plugin-samples/ui-svelte-starter/webpack.config.js

Can you add all the modules ie photoshop for the externals otherwise require('photoshop') etc fail.

Develop a plugin for Photoshop which lets you search for Unsplash images and display the top 10 results in a grid form inside the plugin window. Then you can just drag and drop the image into your workspace.

We already have a ui-react-starter sample that shows developers how to get start building plugin UI with React.

We'd like to have a similar starter for other frameworks, for example:

• Angular
• Vue (covered by #26)
• Svelte
• etc

This issue can broken out by framework so different contributors are welcome to work on a sample for their chosen framework. We recommend that you consider taking up creating the equivalent sample for XD as well.

• decode image
• modify data
• display modified image in UXP UI
• (optionally) write back to the host app

• Create a round trip with communicating data
  • Host app to help app, and vice versa
  • Detect if the helper app is running
• Might be good to use Electron

Hi there!

Thanks for providing these great examples. I've been able to successfully load a few of them but I was having an issue with ui-react-starter. When running yarn install the preinstall script is kicking off and it is requiring a package-lock.json that doesn't exist.

Since the guide for this plugin is recommending to use yarn it is safe to remove the use of the preinstall script because the sole purpose of npm-force-resolutions is to mimic yarn's dependencies resolution without needing yarn. We will also need to commit the yarn.lock to make it work properly.

With these changes I am able to run the plugin on my end:

Happy to submit a PR if needed but the repo is currently not open to outside contributions :)

build the ui-playground panel and open in debug mode.

click the copy to clipboard.

Error:

Uncaught Error: Failed to create Clipboard object. Clipboard access not supported for 3rd party plugins yet. 
    at new e.exports (uxp://uxp-internal/domjs_scripts.js:2)
    at H.get clipboard [as clipboard] (uxp://uxp-internal/domjs_scripts.js:2)
    at EditorPanel_EditorPanel.copyToClipboard (EditorPanel.jsx?297d:37)
    at Object.ba (react-dom.production.min.js?ca5d:14)
    at ja (react-dom.production.min.js?ca5d:14)
    at ka (react-dom.production.min.js?ca5d:14)
    at oa (react-dom.production.min.js?ca5d:15)
    at lc (react-dom.production.min.js?ca5d:52)
    at jc (react-dom.production.min.js?ca5d:51)
    at mc (react-dom.production.min.js?ca5d:52)

• Save data like an API key via plugin UI (probably dialog)
• Reload/read data from storage

https://github.com/AdobeDocs/uxp-photoshop-plugin-samples/blob/main/layer-creation-js-sample/index.js has, as part of the batchplay,
"bounds": { "_obj": "rectangle", "top": 100, "left": 100, "bottom": 400, "right": 500 }
gives me a box 1667 pixels wide and 1250 tall. I've screenshotted it next to the rulers.

If I change the top and left to 0.0, the box gets bigger. It's now 2083 x 1667, which given that's one of the same numbers as before, says there is a scaling issue somewhere.

I found this out when I was attempting to produce and centre other boxes on defined points, so it is just possible I did something to my instance of Photoshop, such as over-writing the anchor points, that has made this happen. I recorded the orginal change as an action and exported JavaScript to use. However, I've closed and re-opened Photoshop, to no avail. In either case, I think it should not be happening. I'm afraid I can't test it in a pre-Action-copy-and-paste state.

Having went through the setup guidelines and picking react starter, running npm run watch results in an error:

Built at: 02/02/2021 9:37:48 AM
              Asset       Size  Chunks             Chunk Names
   icons/icon_D.png  568 bytes          [emitted]  
icons/[email protected]   1.01 KiB          [emitted]  
   icons/icon_N.png  535 bytes          [emitted]  
icons/[email protected]  995 bytes          [emitted]  
         index.html  186 bytes          [emitted]  
           index.js   2.47 MiB    main  [emitted]  main
            main.js  897 bytes          [emitted]  
      manifest.json   1.76 KiB          [emitted]  
Entrypoint main = index.js
[./node_modules/css-loader/dist/cjs.js!./src/styles.css] 563 bytes {main} [built]
[./src/controllers/CommandController.jsx] 365 bytes {main} [built] [failed] [1 error]
[./src/controllers/PanelController.jsx] 364 bytes {main} [built] [failed] [1 error]
[./src/index.jsx] 1.61 KiB {main} [built]
[./src/panels/Demos.jsx] 272 bytes {main} [built]
[./src/panels/MoreDemos.jsx] 546 bytes {main} [built]
[./src/styles.css] 520 bytes {main} [built]
[os] external "os" 42 bytes {main} [built]
[uxp] external "uxp" 42 bytes {main} [built]
    + 21 hidden modules

ERROR in ./src/controllers/PanelController.jsx 4:2
Module parse failed: Unexpected character '#' (4:2)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| import ReactDOM from "react-dom";
| export class PanelController {
>   #id = null;
|   #root = null;
|   #attachment = null;
 @ ./src/index.jsx 4:0-68 22:28-43 38:32-47

ERROR in ./src/components/ColorPicker.jsx 5:2
Module parse failed: Unexpected character '#' (5:2)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| import "./ColorPicker.css";
| export class ColorPicker extends React.Component {
>   #sldR;
|   #sldG;
|   #sldB;
 @ ./src/panels/Demos.jsx 2:0-60 5:99-110
 @ ./src/index.jsx

ERROR in ./src/controllers/CommandController.jsx 8:2
Module parse failed: Unexpected character '#' (8:2)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| import ReactDOM from "react-dom";
| export class CommandController {
>   #id = null;
|   #root = null;
|   #Component = null;
 @ ./src/index.jsx 5:0-72 10:28-45
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] build: `webpack --mode development`
npm ERR! Exit status 2

Creating a Photoshop plugin sample that would be capable of detecting objects and recognizing them in images using 3rd-party APIs.

I'm building a plugin to grab icons from the plugin to photoshop and this is my code which works fine, but I want to create a new layer with the icon/image inside and not open a new tab...

const tempFolder = await fs.getTemporaryFolder()
const file_entry = await tempFolder.getEntry(iconName)
await app.open(file_entry)

There is no configuration for production build of Webpack.

As an Example, After i added Production configuration for UI React Starter the bundle Size reduced from 2.6 MB to 155KB and in another example reduced from 22MB to 1.5MB.
It is Essential to have such that configuration for better performance and lower bundle Size.

Instruction to Add Configuration

1. Add a new script in package.json:"build:prod": "webpack --mode production"
2. Open webpack.config.js, change the structure from module.exports = {} to module.exports = (env, options) => ({})
3. If there is a devtool specified in webpack.config.js, edit that like this: devtool: options.mode === 'production' ? 'none' : 'cheap-eval-source-map'

Thanks for your wonderful works on UXP platfrom, I already added these configuration for Production build, If you allow me i can make a pull request.

Hello, I have configured hello-world-panel-js-sample with tailwindcss. I think using tailwindcss in uxp is really time saver.
I can make a pull request if you are interested but im not sure how can i push the branch to make PR.

Please let me know.

There's a specific library developers need to use for this (jszip), so we want to guide them on which one and how to use it.

Use it to:

• Import a zip
  • Import a zip of images
• Export a zip
  • Export artboard(s) to zip
  • Allow user to use file picker to select images/files to zip and save
• Ex
  • Icon generator

Cf. https://forums.creativeclouddeveloper.com/t/bug-rendering-img-causes-error/4564

Reported by: "Tobjoern"

Through my investigation I figured out, that it has something to do with the HTML markup, as the error sometimes disappears when different elements are uncommented or removed, though there are no clear patterns.

Error message:

Exception while invoking panel method on Plugin Id: com.adobe.uxp.starter.vue3, Panel Id: helloworld, Entrypoint: create, TypeError: Cannot read property 'firstChild' of undefined
    at insertStaticContent (webpack-internal:///./node_modules/@vue/runtime-dom/dist/runtime-dom.esm-bundler.js:231)
    at mountStaticNode (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4679)
    at patch (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4627)
    at mountChildren (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4828)
    at processFragment (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4999)
    at patch (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4634)
    at ReactiveEffect.componentUpdateFn [as fn] (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:5180)
    at ReactiveEffect.run (webpack-internal:///./node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js:223)
    at setupRenderEffect (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:5299)
    at mountComponent (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:5082)

Reproduction is available at: https://github.com/Tobjoern/ui-vue-3-starter-bug

I created a project using 'ui-react'starter', using the code:

useEffect(() => {
        const setUnconnected = () => {
            setIsConnected(false)
        }

        const setConnected = () => {
            setIsConnected(true)
        }

        window.addEventListener('online', setConnected)

        window.addEventListener('offline', setUnconnected)

        return () => {
            window.removeEventListener('online', setConnected)
            window.removeEventListener('offline', setConnected)
        }
    }, [])

I get the following error:

Uncaught Error: Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at Z (index.js:27543:404)
    at ./node_modules/react/cjs/react.production.min.js.exports.useState (index.js:27549:277)
    at Main (index.js:37249:120)
    at renderWithHooks (index.js:15334:18)
    at mountIndeterminateComponent (index.js:18013:13)
    at beginWork (index.js:19127:16)
    at e.exports.callCallback (index.js:719:14)
    at uxp://uxp-internal/domjs_scripts.js:2:8784
    at I (uxp://uxp-internal/domjs_scripts.js:2:8676)
    at uxp://uxp-internal/domjs_scripts.js:2:8168

It is very likely that there actually is something wrong with my React code, since I'm not a React expert, but the project seems to be misconfigured in some way, as the debug log is minified.

Thanks for the new OAuth sample UXP plugin for PS, but what we really need is a serverless solution that relies on the UXP plugin being able to listen for & capture the localhost: "callback" from the OAuth provider in question.

Create a UXP plugin for Photoshop that:

1. Lists the user's installed plugins
2. Identifies which plugins are CEP and which are UXP
3. For CEP plugins, if the are distributed via the Exchange, display the developer's contact information.
4. Supplies the user with text such as "Ask your developer to consider migrating this plugin to UXP."

Note:

• CEP is no longer supported on Mac M1 running natively, ideally the plugin could also detect this state and inform the user with additional resources about using Rosetta Mode.
• One way to get a list of installed plugins is by running a the --list all command.

Help developers migrate their plugins from CEP to UXP by writing a helper app, a linter, a library, or another tool of your choice.