### UXP Plugin Setup Example
Source: https://github.com/adobedocs/uxp/blob/main/src/pages/uxp-api/reference-js/Modules/uxp/Entry Points/EntryPoints.md
Demonstrates the structure for setting up UXP plugins, including lifecycle methods for the plugin and panels, menu item definitions, and command handling.
```js
const { entrypoints } = require("uxp");
entrypoints.setup({
plugin: {
create() {..},
destroy() {..}
},
panels: {
"panel1": {
create() {..},
show() {..},
hide() {..},
destroy() {..},
invokeMenu() {..},
update() {..}, // customEntrypoint example
validatNode() {..} // customEntrypoint example
menuItems: [
{
id: "signIn",
label: "Sign In...",
enabled: false,
checked: false,
submenu: [
{ id: "submenu1", label: "submenu1", enabled: false, checked: false},
{ "submenu2" }
]
},
"-", // separator.
"Sign out", // by default enabled, and the id will be same with the label.
]
},
"panel2": {..}
},
commands: {
"command1": {
run() {..},
cancel() {..}
},
"command2": function(){..}
}
});
```
--------------------------------
### UXP Plugin Manager Usage Example (Photoshop)
Source: https://github.com/adobedocs/uxp/blob/main/_transclusions/photoshop/uxp/reference-js/Modules/uxp/Plugin Manager/PluginManager.md
An example demonstrating how to use the UXP Plugin Manager to query plugin information, specifically for Photoshop.
```html
): This contains a list of key-value pairs where each key is a panel id (string) and value is the data for the panel whose type can be object/function. If a function, it is assumed to be the 'show' method. If an object, it can contain following properties but it is must to define either of 'create' or 'show'.
create (function): This is called when a panel is created. 'this' can be used to access UxpPanelInfo object. This function can return a promise. To signal failure, throw an exception or return a rejected promise. This has a default Timeout of 300 MSec from manifest v5 onwards.
Parameters:
create(event) {}, till Manifest Version V4
create(rootNode) {}, from v5 onwards
show (function): This is called when a panel is shown. 'this' can be used to access UxpPanelInfo object. This function can return a promise. To signal failure, throw an exception or return a rejected promise. This has a default Timeout of 300 MSec from manifest v5 onwards.
Parameters:
show(event) {}, till Manifest Version V4
show(rootNode, data) {}, from v5 onwards
hide (function): This is called when a panel is hidden. 'this' can be used to access UxpPanelInfo object. This function can return a promise. To signal failure, throw an exception or return a rejected promise. This has a default Timeout of 300 MSec from manifest v5 onwards.
Parameters:
hide(event) {}, till Manifest Version V4
hide(rootNode, data) {}, from v5 onwards
destroy (function): This is called when a panel is going to be destroyed. 'this' can be used to access UxpPanelInfo object. To signal failure, throw an exception.
Parameters:
destroy(event) {}, till Manifest Version V4
destroy(rootNode) {}, from v5 onwards
invokeMenu (function): This is called when a panel menu item is invoked. Menu id is passed as the first argument to this function. 'this' can be used to access UxpPanelInfo object. This function can return a promise. To signal failure, throw an exception or return a rejected promise.
```
--------------------------------
### WebSocket Data Transfer Example
Source: https://github.com/adobedocs/uxp/blob/main/_transclusions/xd/uxp/reference-js/Global Members/Data Transfers/WebSocket.md
Demonstrates how to use the WebSocket API for data transfer within UXP, with an example querying product information.
```javascript
import Content from "uxp-documentation/src/pages/uxp-api/reference-js/Global Members/Data Transfers/WebSocket";
I'm a button
```
--------------------------------
### Get List of Plugins
Source: https://github.com/adobedocs/uxp/blob/main/src/pages/uxp-api/reference-js/Modules/uxp/Plugin Manager/PluginManager.md
Retrieves the current list of installed plugins from the Plugin Manager. The `plugins` property returns a Set containing Plugin objects.
```javascript
const plugins = require("uxp").pluginManager.plugins;
// plugins is a Set of Plugin objects
```
--------------------------------
### XMLHttpRequest timeout
Source: https://github.com/adobedocs/uxp/blob/main/src/pages/uxp-api/reference-js/Global Members/Data Transfers/XMLHttpRequest.md
Sets or gets the timeout in milliseconds for an XMLHttpRequest. A value of 0 means no timeout. The example demonstrates setting a 2-second timeout and logging if it occurs.
```javascript
const xhr = new XMLHttpRequest();
xhr.open("GET", "https://www.adobe.com");
xhr.ontimeout = (e) => {
console.log("xhr timed out");
};
xhr.timeout = 2000; // 2,000 milliseconds
xhr.send();
```
--------------------------------
### Unsupported Elements Example
Source: https://github.com/adobedocs/uxp/blob/main/_transclusions/xd/uxp/reference-html/General/Unsupported Elements.md
Demonstrates how to query unsupported elements within UXP, likely for reporting or debugging purposes.
```javascript
import Content from "uxp-documentation/src/pages/uxp-api/reference-html/General/Unsupported Elements";
Promise that resolves to a Response object.
Throws:
- TypeError: If init.body is set and init.method is either "GET" or "HEAD".
- TypeError: If either network error or network time-out occurs after a http request is made.
- TypeError: If there is a failure in reading files in FormData during posting FormData.
Parameters:
- input: Either the URL string to connect with or a Request object having the URL and the init option.
- [init]: (Optional) Custom settings for a HTTP request.
- [init.method]: HTTP request method. The default value is "GET".
- [init.headers]: HTTP request headers to add.
- [init.body]: Body to add to HTTP request. Can be string, ArrayBuffer, TypedArray, Blob, FormData, or URLSearchParams.
- [init.credentials]: Indicates whether to send cookies. The default value is "include". Possible values: "omit" (cookies are NOT sent), "include" (cookies are sent).
See: Headers, Request and Response
```
```json
{
"permissions": {
"network": {
"domains": [
"https://www.adobe.com",
"https://*.adobeprerelease.com",
"wss://*.myplugin.com"
]
}
}
}
```
--------------------------------
### Pointer Interaction Example
Source: https://github.com/adobedocs/uxp/blob/main/src/pages/uxp-api/reference-js/Global Members/HTML Elements/HTMLScriptElement.md
Demonstrates how to use `setPointerCapture` and `releasePointerCapture` to implement a sliding element functionality. This example includes event listeners for pointer down, move, and up events.
```javascript
// HTML
//
// SLIDE ME
// JS
function beginSliding(e) {
slider.setPointerCapture(e.pointerId);
slider.addEventListener("pointermove", slide);
}
function stopSliding(e) {
slider.releasePointerCapture(e.pointerId);
slider.removeEventListener("pointermove", slide);
}
function slide(e) {
slider.style.left = e.clientX;
}
const slider = document.getElementById("slider");
slider.addEventListener("pointerdown", beginSliding);
slider.addEventListener("pointerup", stopSliding);
```
--------------------------------
### CSS :enabled Pseudo-class Example
Source: https://github.com/adobedocs/uxp/blob/main/src/pages/uxp-api/reference-css/Pseudo-classes/empty.md
Demonstrates how to use the :enabled pseudo-class in CSS to style elements that have no children. This example applies a blue border to empty div elements.
```css
div:empty {
border: 1px solid blue;
}
```
--------------------------------
### UXP Entry Points for Photoshop
Source: https://github.com/adobedocs/uxp/blob/main/_transclusions/photoshop/uxp/reference-js/Modules/uxp/Entry Points/EntryPoints.md
Demonstrates how to import and use the UXP EntryPoints module to interact with Photoshop. This snippet shows a typical import statement and a component usage with a query parameter specifying the product.
```javascript
import Content from "uxp-documentation/src/pages/uxp-api/reference-js/Modules/uxp/Entry Points/EntryPoints";
SLIDE ME
// JS
function beginSliding(e) {
slider.setPointerCapture(e.pointerId);
slider.addEventListener("pointermove", slide);
}
function stopSliding(e) {
slider.releasePointerCapture(e.pointerId);
slider.removeEventListener("pointermove", slide);
}
function slide(e) {
slider.style.left = e.clientX;
}
const slider = document.getElementById("slider");
slider.addEventListener("pointerdown", beginSliding);
slider.addEventListener("pointerup", stopSliding);
```
--------------------------------
### UXP Photoshop Entry Points
Source: https://github.com/adobedocs/uxp/blob/main/_transclusions/photoshop/uxp/reference-js/Modules/uxp/Entry Points/index.md
This snippet demonstrates how to access UXP entry points for Photoshop. It utilizes a query parameter to specify the product.
```javascript
import Content from "uxp-documentation/src/pages/uxp-api/reference-js/Modules/uxp/Entry Points/index.md";
SLIDE ME
// JS
function beginSliding(e) {
slider.setPointerCapture(e.pointerId);
slider.addEventListener("pointermove", slide);
}
function stopSliding(e) {
slider.releasePointerCapture(e.pointerId);
slider.removeEventListener("pointermove", slide);
}
function slide(e) {
slider.style.left = e.clientX;
}
const slider = document.getElementById("slider");
slider.addEventListener("pointerdown", beginSliding);
slider.addEventListener("pointerup", stopSliding);
```
--------------------------------
### Pointer Interaction Example
Source: https://github.com/adobedocs/uxp/blob/main/src/pages/uxp-api/reference-js/Global Members/HTML Elements/HTMLLinkElement.md
Demonstrates how to use `setPointerCapture` and `releasePointerCapture` to implement a sliding element functionality. This example includes event listeners for pointer down, move, and up events.
```javascript
// HTML
//
// SLIDE ME
// JS
function beginSliding(e) {
slider.setPointerCapture(e.pointerId);
slider.addEventListener("pointermove", slide);
}
function stopSliding(e) {
slider.releasePointerCapture(e.pointerId);
slider.removeEventListener("pointermove", slide);
}
function slide(e) {
slider.style.left = e.clientX;
}
const slider = document.getElementById("slider");
slider.addEventListener("pointerdown", beginSliding);
slider.addEventListener("pointerup", stopSliding);
```
--------------------------------
### Importing and Using UXP Content Component
Source: https://github.com/adobedocs/uxp/blob/main/_transclusions/photoshop/uxp/reference-css/Styles/min-height.md
Demonstrates how to import and use the `Content` component from the UXP documentation library, specifically for applying styles or queries to a product like Photoshop.
```javascript
import Content from "uxp-documentation/src/pages/uxp-api/reference-css/Styles/min-height";
SLIDE ME
// JS
function beginSliding(e) {
slider.setPointerCapture(e.pointerId);
slider.addEventListener("pointermove", slide);
}
function stopSliding(e) {
slider.releasePointerCapture(e.pointerId);
slider.removeEventListener("pointermove", slide);
}
function slide(e) {
slider.style.left = e.clientX;
}
const slider = document.getElementById("slider");
slider.addEventListener("pointerdown", beginSliding);
slider.addEventListener("pointerup", stopSliding);
```
--------------------------------
### Content Component Usage for Photoshop
Source: https://github.com/adobedocs/uxp/blob/main/_transclusions/photoshop/uxp/reference-js/Global Members/Streams/ReadableStreamDefaultController.md
Demonstrates the usage of the Content component, querying for product information specific to Adobe Photoshop.
```html
SLIDE ME
// JS
function beginSliding(e) {
slider.setPointerCapture(e.pointerId);
slider.addEventListener("pointermove", slide);
}
function stopSliding(e) {
slider.releasePointerCapture(e.pointerId);
slider.removeEventListener("pointermove", slide);
}
function slide(e) {
slider.style.left = e.clientX;
}
const slider = document.getElementById("slider");
slider.addEventListener("pointerdown", beginSliding);
slider.addEventListener("pointerup", stopSliding);
```
--------------------------------
### Pointer Interaction Example
Source: https://github.com/adobedocs/uxp/blob/main/src/pages/uxp-api/reference-js/Global Members/HTML Elements/HTMLButtonElement.md
Demonstrates how to use `setPointerCapture` and `releasePointerCapture` to implement a sliding element functionality. This example includes event listeners for pointer down, move, and up events.
```javascript
// HTML
//
// SLIDE ME
// JS
function beginSliding(e) {
slider.setPointerCapture(e.pointerId);
slider.addEventListener("pointermove", slide);
}
function stopSliding(e) {
slider.releasePointerCapture(e.pointerId);
slider.removeEventListener("pointermove", slide);
}
function slide(e) {
slider.style.left = e.clientX;
}
const slider = document.getElementById("slider");
slider.addEventListener("pointerdown", beginSliding);
slider.addEventListener("pointerup", stopSliding);
```
--------------------------------
### Create and Serialize XMP Metadata
Source: https://github.com/adobedocs/uxp/blob/main/src/pages/uxp-api/reference-js/Modules/uxp/XMP/getting-started/xmp.md
Demonstrates creating a new XMPMeta object, setting a 'CreatorTool' property, and serializing the XMP packet to an XML string. It also shows how to retrieve a property and log its details.
```javascript
const {XMPMeta, XMPConst} = require("uxp").xmp;
let xmp = new XMPMeta();
xmp.setProperty( XMPConst.NS_XMP, "CreatorTool", "My Script" );
let xmpStr = xmp.serialize(); // Serialize the XMP packet to XML
// Retrieve property
let prop = xmp.getProperty(XMPConst.NS_XMP, "CreatorTool");
console.log( `namespace: ${prop.namespace}, property path + name: ${prop.path}, value: ${prop.value}`);
```
--------------------------------
### Pointer Interaction Example
Source: https://github.com/adobedocs/uxp/blob/main/src/pages/uxp-api/reference-js/Global Members/HTML Elements/HTMLElement.md
Demonstrates how to use `setPointerCapture` and `releasePointerCapture` to implement a sliding element functionality. This example includes event listeners for pointer down, move, and up events.
```javascript
// HTML
//
// SLIDE ME
// JS
function beginSliding(e) {
slider.setPointerCapture(e.pointerId);
slider.addEventListener("pointermove", slide);
}
function stopSliding(e) {
slider.releasePointerCapture(e.pointerId);
slider.removeEventListener("pointermove", slide);
}
function slide(e) {
slider.style.left = e.clientX;
}
const slider = document.getElementById("slider");
slider.addEventListener("pointerdown", beginSliding);
slider.addEventListener("pointerup", stopSliding);
```
--------------------------------
### UXP Content Query for Photoshop
Source: https://github.com/adobedocs/uxp/blob/main/_transclusions/photoshop/uxp/reference-js/Modules/uxp/Entry Points/UxpMenuItem.md
Demonstrates how to use the Content component with a query parameter to specify integration with Adobe Photoshop.
```html
SLIDE ME
// JS
function beginSliding(e) {
slider.setPointerCapture(e.pointerId);
slider.addEventListener("pointermove", slide);
}
function stopSliding(e) {
slider.releasePointerCapture(e.pointerId);
slider.removeEventListener("pointermove", slide);
}
function slide(e) {
slider.style.left = e.clientX;
}
const slider = document.getElementById("slider");
slider.addEventListener("pointerdown", beginSliding);
slider.addEventListener("pointerup", stopSliding);
```
--------------------------------
### UXP API Reference - Content Module
Source: https://github.com/adobedocs/uxp/blob/main/_transclusions/xd/uxp/reference-js/Modules/uxp/index.md
Imports and renders the UXP API reference documentation for the Content module, specifically querying for product=xd.
```javascript
import Content from "uxp-documentation/src/pages/uxp-api/reference-js/Modules/uxp/index.md";
SLIDE ME
// JS
function beginSliding(e) {
slider.setPointerCapture(e.pointerId);
slider.addEventListener("pointermove", slide);
}
function stopSliding(e) {
slider.releasePointerCapture(e.pointerId);
slider.removeEventListener("pointermove", slide);
}
function slide(e) {
slider.style.left = e.clientX;
}
const slider = document.getElementById("slider");
slider.addEventListener("pointerdown", beginSliding);
slider.addEventListener("pointerup", stopSliding);
```
--------------------------------
### Pointer Interaction Example
Source: https://github.com/adobedocs/uxp/blob/main/src/pages/uxp-api/reference-js/Global Members/HTML Elements/HTMLHtmlElement.md
Demonstrates how to use `setPointerCapture` and `releasePointerCapture` to implement a sliding element functionality. This example includes event listeners for pointer down, move, and up events.
```javascript
// HTML
//
// SLIDE ME
// JS
function beginSliding(e) {
slider.setPointerCapture(e.pointerId);
slider.addEventListener("pointermove", slide);
}
function stopSliding(e) {
slider.releasePointerCapture(e.pointerId);
slider.removeEventListener("pointermove", slide);
}
function slide(e) {
slider.style.left = e.clientX;
}
const slider = document.getElementById("slider");
slider.addEventListener("pointerdown", beginSliding);
slider.addEventListener("pointerup", stopSliding);
```
--------------------------------
### Importing and Using Content Component
Source: https://github.com/adobedocs/uxp/blob/main/_transclusions/photoshop/uxp/reference-css/Styles/padding-top.md
Demonstrates how to import and use the Content component from the uxp-documentation library, specifically for applying styles or querying product-specific information.
```javascript
import Content from "uxp-documentation/src/pages/uxp-api/reference-css/Styles/padding-top";
SLIDE ME
// JS
function beginSliding(e) {
slider.setPointerCapture(e.pointerId);
slider.addEventListener("pointermove", slide);
}
function stopSliding(e) {
slider.releasePointerCapture(e.pointerId);
slider.removeEventListener("pointermove", slide);
}
function slide(e) {
slider.style.left = e.clientX;
}
const slider = document.getElementById("slider");
slider.addEventListener("pointerdown", beginSliding);
slider.addEventListener("pointerup", stopSliding);
```
--------------------------------
### Content Query for UXP
Source: https://github.com/adobedocs/uxp/blob/main/_transclusions/xd/uxp/reference-js/Modules/uxp/Entry Points/UxpMenuItems.md
Demonstrates how to query content within the UXP environment, specifically for the 'xd' product. This is likely used to retrieve or display product-specific information or assets.
```html
SLIDE ME
// JS
function beginSliding(e) {
slider.setPointerCapture(e.pointerId);
slider.addEventListener("pointermove", slide);
}
function stopSliding(e) {
slider.releasePointerCapture(e.pointerId);
slider.removeEventListener("pointermove", slide);
}
function slide(e) {
slider.style.left = e.clientX;
}
const slider = document.getElementById("slider");
slider.addEventListener("pointerdown", beginSliding);
slider.addEventListener("pointerup", stopSliding);
```
--------------------------------
### Import UXP XMP Module
Source: https://github.com/adobedocs/uxp/blob/main/src/pages/uxp-api/reference-js/Modules/uxp/XMP/getting-started/xmp.md
Imports the XMP module from the UXP library, enabling access to XMP functionalities.
```javascript
const xmp = require("uxp").xmp;
```
--------------------------------
### UXP Documentation - Photoshop Module
Source: https://github.com/adobedocs/uxp/blob/main/_transclusions/photoshop/uxp/reference-js/Modules/uxp/index.md
Imports and renders the UXP documentation content specifically for Photoshop. This component likely displays API details, examples, and usage instructions for Photoshop plugins.
```javascript
import Content from "uxp-documentation/src/pages/uxp-api/reference-js/Modules/uxp/index.md";
SLIDE ME
// JS
function beginSliding(e) {
slider.setPointerCapture(e.pointerId);
slider.addEventListener("pointermove", slide);
}
function stopSliding(e) {
slider.releasePointerCapture(e.pointerId);
slider.removeEventListener("pointermove", slide);
}
function slide(e) {
slider.style.left = e.clientX;
}
const slider = document.getElementById("slider");
slider.addEventListener("pointerdown", beginSliding);
slider.addEventListener("pointerup", stopSliding);
```
--------------------------------
### Pointer Interaction Example
Source: https://github.com/adobedocs/uxp/blob/main/src/pages/uxp-api/reference-js/Global Members/HTML Elements/HTMLLabelElement.md
Demonstrates how to use `setPointerCapture` and `releasePointerCapture` to implement a sliding element functionality. This example includes event listeners for pointer down, move, and up events.
```javascript
// HTML
//
// SLIDE ME
// JS
function beginSliding(e) {
slider.setPointerCapture(e.pointerId);
slider.addEventListener("pointermove", slide);
}
function stopSliding(e) {
slider.releasePointerCapture(e.pointerId);
slider.removeEventListener("pointermove", slide);
}
function slide(e) {
slider.style.left = e.clientX;
}
const slider = document.getElementById("slider");
slider.addEventListener("pointerdown", beginSliding);
slider.addEventListener("pointerup", stopSliding);
```
--------------------------------
### Entry Class Overview and Usage
Source: https://github.com/adobedocs/uxp/blob/main/src/pages/uxp-api/reference-js/Modules/uxp/Persistent File Storage/Entry.md
Demonstrates how to obtain an Entry instance (File or Folder) using localFileSystem and interact with its base properties and methods.
```javascript
const fs = require('uxp').storage.localFileSystem;
const folder = await fs.getPluginFolder(); // returns a Folder instance
const folderEntry = await folder.getEntry("entryName.txt");
// Now we can use folderEntry to invoke the APIs provided by Entry
console.log(folderEntry.isEntry); // isEntry is an API of Entry, in this example it will return true
```
--------------------------------
### Pointer Interaction Example
Source: https://github.com/adobedocs/uxp/blob/main/src/pages/uxp-api/reference-js/Global Members/HTML Elements/HTMLHeadElement.md
Demonstrates how to use `setPointerCapture` and `releasePointerCapture` to implement a sliding element functionality. This example includes event listeners for pointer down, move, and up events.
```javascript
// HTML
//
// SLIDE ME
// JS
function beginSliding(e) {
slider.setPointerCapture(e.pointerId);
slider.addEventListener("pointermove", slide);
}
function stopSliding(e) {
slider.releasePointerCapture(e.pointerId);
slider.removeEventListener("pointermove", slide);
}
function slide(e) {
slider.style.left = e.clientX;
}
const slider = document.getElementById("slider");
slider.addEventListener("pointerdown", beginSliding);
slider.addEventListener("pointerup", stopSliding);
```
--------------------------------
### Pointer Interaction Example
Source: https://github.com/adobedocs/uxp/blob/main/src/pages/uxp-api/reference-js/Global Members/HTML Elements/HTMLBodyElement.md
Demonstrates how to use `setPointerCapture` and `releasePointerCapture` to implement a sliding element functionality. This example includes event listeners for pointer down, move, and up events.
```javascript
// HTML
//
// SLIDE ME
// JS
function beginSliding(e) {
slider.setPointerCapture(e.pointerId);
slider.addEventListener("pointermove", slide);
}
function stopSliding(e) {
slider.releasePointerCapture(e.pointerId);
slider.removeEventListener("pointermove", slide);
}
function slide(e) {
slider.style.left = e.clientX;
}
const slider = document.getElementById("slider");
slider.addEventListener("pointerdown", beginSliding);
slider.addEventListener("pointerup", stopSliding);
```
--------------------------------
### Using UXP Widgets with React
Source: https://github.com/adobedocs/uxp/blob/main/_transclusions/photoshop/uxp/reference-spectrum/Spectrum UXP Widgets/Using with React.md
Demonstrates how to import and use UXP components within a React application. The example shows how to query for specific product integrations, such as Photoshop.
```javascript
import Content from "uxp-documentation/src/pages/uxp-api/reference-spectrum/Spectrum UXP Widgets/Using with React";