├── .env.example ├── .github ├── CONTRIBUTING.md ├── ISSUE_TEMPLATE.md ├── PULL_REQUEST_TEMPLATE.md ├── dependabot.yml ├── linters │ ├── .markdown-lint.yml │ ├── .markdownlint.yml │ └── .yaml-lint.yml ├── scripts │ └── get-path-prefix.js ├── super-linter.env └── workflows │ ├── algolia-indexing.yml │ ├── deploy.yml │ └── github-pages.yml ├── .gitignore ├── .yarn └── releases │ └── yarn-3.2.1.cjs ├── .yarnrc.yml ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── COPYRIGHT ├── LICENSE ├── README.md ├── gatsby-config.js ├── package.json ├── reference-recipes.js ├── site-config.js ├── src └── pages │ ├── changelog │ ├── PluginsMenu.png │ └── index.md │ ├── illustration.png │ ├── index.md │ ├── introduction │ ├── applications │ │ └── ids.md │ ├── essentials │ │ ├── dev-tools │ │ │ ├── ccd-allapps-udt.png │ │ │ ├── devmode.png │ │ │ ├── index.md │ │ │ └── macos-elevated-permissions.png │ │ └── tech-stack │ │ │ └── index.md │ ├── index.md │ └── next-steps │ │ ├── distribution │ │ ├── distribution-options │ │ │ └── index.md │ │ ├── images │ │ │ ├── install-warning.png │ │ │ ├── marketplace.png │ │ │ ├── package-failed.png │ │ │ ├── package-success.png │ │ │ ├── udt-package-menu.png │ │ │ ├── verify-failed.png │ │ │ └── what-now.png │ │ ├── index.md │ │ └── packaging │ │ │ └── index.md │ │ └── script-and-plugin │ │ └── index.md │ ├── known-issues │ └── index.md │ ├── plugins │ ├── advanced │ │ ├── example-icon.svg │ │ ├── file.jpg │ │ ├── index.md │ │ ├── more.jpg │ │ ├── network.jpg │ │ ├── react.jpg │ │ └── ui.jpg │ ├── concepts │ │ ├── entry-points │ │ │ ├── index.md │ │ │ └── ui-options.jpg │ │ ├── index.md │ │ └── manifest │ │ │ ├── index.md │ │ │ └── table-styles.css │ ├── getting-started │ │ ├── connected-apps.png │ │ ├── create-plugin.png │ │ ├── index.md │ │ ├── load-plugin.png │ │ ├── loaded-plugin.png │ │ └── reload-plugin.png │ ├── index.md │ └── tutorials │ │ ├── _tbd_best-practices │ │ └── index.md │ │ ├── _tbd_plugin_icons │ │ ├── adding-command-entrypoints │ │ ├── command-plugin.png │ │ └── index.md │ │ ├── importing-modules │ │ └── index.md │ │ ├── index.md │ │ ├── inter-plugin-comm │ │ └── index.md │ │ ├── plugin-lifecycle-hooks │ │ └── index.md │ │ └── udt-deep-dive │ │ ├── images │ │ ├── connected-apps.png │ │ ├── create-plugin.png │ │ ├── empty-workspace.png │ │ ├── udt-debugger.png │ │ ├── udt-failure-log.png │ │ ├── udt-gear-icon.png │ │ ├── udt-load-failed.png │ │ ├── udt-load-successful.png │ │ └── udt-logs.png │ │ ├── index.md │ │ ├── plugin-management.md │ │ ├── plugin-workflows.md │ │ └── working-with-react.md │ ├── resources │ ├── _tbd_troubleshooting │ │ └── index.md │ ├── fundamentals │ │ ├── apis │ │ │ └── index.md │ │ ├── create-ui │ │ │ └── index.md │ │ ├── dom-versioning │ │ │ └── index.md │ │ ├── index.md │ │ ├── manifest │ │ │ └── index.md │ │ ├── measurements-and-positioning │ │ │ ├── index.md │ │ │ └── transform-panel.png │ │ └── object-model │ │ │ ├── id-om.png │ │ │ └── index.md │ ├── index.md │ ├── migration-guides │ │ ├── cep │ │ │ └── index.md │ │ ├── extendscript │ │ │ └── index.md │ │ └── index.md │ ├── recipes │ │ ├── _recipe_template.md │ │ ├── _tbd_drag_n_drop.md │ │ ├── _tbd_promise.md │ │ ├── _tbd_react.md │ │ ├── _tbd_ui_icons.md │ │ ├── clipboard │ │ │ └── index.md │ │ ├── css-styling │ │ │ └── index.md │ │ ├── debug │ │ │ └── index.md │ │ ├── document-changes │ │ │ ├── Image2.png │ │ │ ├── Image3.png │ │ │ ├── Image4.png │ │ │ ├── Image5.png │ │ │ ├── Image6.png │ │ │ ├── Image7.png │ │ │ └── index.md │ │ ├── file-operation │ │ │ └── index.md │ │ ├── flyout-menu │ │ │ ├── flyoutmenu.png │ │ │ └── index.md │ │ ├── host-info │ │ │ └── index.md │ │ ├── html-elements │ │ │ ├── index.md │ │ │ └── sample-dialog.png │ │ ├── html-events │ │ │ └── index.md │ │ ├── indesign-events │ │ │ └── index.md │ │ ├── indesign-menus │ │ │ └── index.md │ │ ├── index.md │ │ ├── launch-process │ │ │ ├── index.md │ │ │ ├── open-external.png │ │ │ └── open-path.png │ │ ├── network │ │ │ └── index.md │ │ ├── persistent-storage-migration │ │ │ ├── CCD-setting.png │ │ │ └── index.md │ │ ├── rtl │ │ │ ├── 1.png │ │ │ └── index.md │ │ ├── storage │ │ │ └── index.md │ │ └── xml │ │ │ └── index.md │ └── starter-kits │ │ ├── create-plugin-template.png │ │ ├── index.md │ │ └── scripts-panel.png │ ├── scripts │ ├── advanced │ │ ├── example-icon.svg │ │ ├── file.jpg │ │ ├── index.md │ │ ├── more.jpg │ │ ├── network.jpg │ │ ├── react.jpg │ │ └── ui.jpg │ ├── concepts │ │ ├── global-await │ │ │ └── index.md │ │ ├── index.md │ │ └── script-lifespan │ │ │ └── index.md │ ├── getting-started │ │ ├── hello-world-updated.png │ │ ├── hello-world.png │ │ ├── index.md │ │ └── running_a_script.png │ ├── idjs.png │ ├── index.md │ └── tutorials │ │ ├── _tbd_create_dialog.md │ │ ├── arguments │ │ └── index.md │ │ ├── debug │ │ ├── index.md │ │ ├── step1.png │ │ └── step2.png │ │ ├── ids-object-model │ │ └── index.md │ │ ├── index.md │ │ ├── script-result │ │ └── index.md │ │ └── tips-tricks │ │ ├── 1.png │ │ ├── 2.png │ │ ├── 3.png │ │ ├── 4.png │ │ ├── 5.png │ │ └── index.md │ └── support │ └── index.md ├── static └── petstore.test.json └── yarn.lock /.env.example: -------------------------------------------------------------------------------- 1 | REPO_GITHUB_TOKEN= 2 | REPO_OWNER=AdobeDocs 3 | REPO_NAME=dev-site-documentation-template 4 | REPO_BRANCH=main 5 | -------------------------------------------------------------------------------- /.github/CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | Thanks for choosing to contribute! 4 | 5 | The following are a set of guidelines to follow when contributing to this project. 6 | 7 | ## Code Of Conduct 8 | 9 | This project adheres to the Adobe [code of conduct](../CODE_OF_CONDUCT.md). By participating, 10 | you are expected to uphold this code. Please report unacceptable behavior to 11 | [Grp-opensourceoffice@adobe.com](mailto:Grp-opensourceoffice@adobe.com). 12 | 13 | ## Have A Question? 14 | 15 | Start by filing an issue. The existing committers on this project work to reach 16 | consensus around project direction and issue solutions within issue threads 17 | (when appropriate). 18 | 19 | ## Contributor License Agreement 20 | 21 | All third-party contributions to this project must be accompanied by a signed contributor 22 | license agreement. This gives Adobe permission to redistribute your contributions 23 | as part of the project. [Sign our CLA](https://opensource.adobe.com/cla.html). You 24 | only need to submit an Adobe CLA one time, so if you have submitted one previously, 25 | you are good to go! 26 | 27 | ## Code Reviews 28 | 29 | All submissions should come in the form of pull requests and need to be reviewed 30 | by project committers. Read [GitHub's pull request documentation](https://help.github.com/articles/about-pull-requests/) 31 | for more information on sending pull requests. 32 | 33 | Lastly, please follow the [pull request template](PULL_REQUEST_TEMPLATE.md) when 34 | submitting a pull request! 35 | 36 | ## From Contributor To Committer 37 | 38 | We love contributions from our community! If you'd like to go a step beyond contributor 39 | and become a committer with full write access and a say in the project, you must 40 | be invited to the project. The existing committers employ an internal nomination 41 | process that must reach lazy consensus (silence is approval) before invitations 42 | are issued. If you feel you are qualified and want to get more deeply involved, 43 | feel free to reach out to existing committers to have a conversation about that. 44 | 45 | ## Security Issues 46 | 47 | Security issues shouldn't be reported on this issue tracker. Instead, [file an issue to our security experts](https://helpx.adobe.com/security/alertus.html). 48 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | ### Expected Behaviour 5 | 6 | ### Actual Behaviour 7 | 8 | ### Reproduce Scenario (including but not limited to) 9 | 10 | #### Steps to Reproduce 11 | 12 | #### Platform and Version 13 | 14 | #### Sample Code that illustrates the problem 15 | 16 | #### Logs taken while reproducing problem 17 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | ## Description 4 | 5 | 6 | 7 | ## Related Issue 8 | 9 | 10 | 11 | 12 | 13 | 14 | ## Motivation and Context 15 | 16 | 17 | 18 | ## How Has This Been Tested? 19 | 20 | 21 | 22 | 23 | 24 | ## Screenshots (if appropriate): 25 | 26 | ## Types of changes 27 | 28 | 29 | 30 | - [ ] Bug fix (non-breaking change which fixes an issue) 31 | - [ ] New feature (non-breaking change which adds functionality) 32 | - [ ] Breaking change (fix or feature that would cause existing functionality to change) 33 | 34 | ## Checklist: 35 | 36 | 37 | 38 | 39 | - [ ] I have signed the [Adobe Open Source CLA](https://opensource.adobe.com/cla.html). 40 | - [ ] My code follows the code style of this project. 41 | - [ ] My change requires a change to the documentation. 42 | - [ ] I have updated the documentation accordingly. 43 | - [ ] I have read the **CONTRIBUTING** document. 44 | - [ ] I have added tests to cover my changes. 45 | - [ ] All new and existing tests passed. 46 | -------------------------------------------------------------------------------- /.github/dependabot.yml: -------------------------------------------------------------------------------- 1 | version: 2 2 | updates: 3 | # Enable version updates for npm 4 | - package-ecosystem: "npm" 5 | # Look for `package.json` and `lock` files in the `root` directory 6 | directory: "/" 7 | # Check the npm registry for updates every day (weekdays) 8 | schedule: 9 | interval: "daily" 10 | allow: 11 | - dependency-name: "@adobe/gatsby-theme-aio" 12 | versioning-strategy: increase 13 | open-pull-requests-limit: 25 14 | labels: 15 | - "dependencies" 16 | ignore: 17 | # Ignore updates to package 18 | - dependency-name: "gatsby" 19 | -------------------------------------------------------------------------------- /.github/linters/.markdown-lint.yml: -------------------------------------------------------------------------------- 1 | --- 2 | ########################### 3 | ########################### 4 | ## Markdown Linter rules ## 5 | ########################### 6 | ########################### 7 | 8 | # Linter rules doc: 9 | # - https://github.com/DavidAnson/markdownlint/blob/main/doc/Rules.md 10 | # 11 | # Note: 12 | # To comment out a single error: 13 | # 14 | # any violations you want 15 | # 16 | # 17 | 18 | # Default state for all rules 19 | default: false 20 | 21 | ################# 22 | # Rules by tags # 23 | ################# 24 | blanks-around-fences: true # Fenced code blocks should be surrounded by blank lines 25 | blanks-around-headings: true # Headings should be surrounded by blank lines 26 | blanks-around-lists: true # Lists should be surrounded by blank lines 27 | code-block-style: 28 | style: "fenced" 29 | code-fence-style: 30 | style: "backtick" 31 | emphasis-style: 32 | style: "consistent" 33 | fenced-code-language: true # Fenced code blocks should have a language specified 34 | heading-start-left: true # Headings must start at the beginning of the line 35 | heading-style: 36 | style: "atx" 37 | hr-style: true # Horizontal rule style 38 | list-indent: true # Inconsistent indentation for list items at the same level 39 | no-empty-links: true 40 | no-missing-space-atx: true # No space after hash on atx style heading 41 | no-multiple-blanks: true # Multiple consecutive blank lines 42 | no-reversed-links: true 43 | no-space-in-code: true 44 | no-space-in-emphasis: true 45 | no-space-in-links: true 46 | no-trailing-spaces: true 47 | single-trailing-newline: true # Files should end with a single newline character 48 | strong-style: 49 | style: "consistent" 50 | ul-style: 51 | style: "consistent" 52 | -------------------------------------------------------------------------------- /.github/linters/.markdownlint.yml: -------------------------------------------------------------------------------- 1 | --- 2 | ########################### 3 | ########################### 4 | ## Markdown Linter rules ## 5 | ########################### 6 | ########################### 7 | 8 | # Linter rules doc: 9 | # - https://github.com/DavidAnson/markdownlint/blob/main/doc/Rules.md 10 | # 11 | # Note: 12 | # To comment out a single error: 13 | # 14 | # any violations you want 15 | # 16 | # 17 | 18 | # Default state for all rules 19 | default: false 20 | 21 | ################# 22 | # Rules by tags # 23 | ################# 24 | blanks-around-fences: true # Fenced code blocks should be surrounded by blank lines 25 | blanks-around-headings: true # Headings should be surrounded by blank lines 26 | blanks-around-lists: true # Lists should be surrounded by blank lines 27 | code-block-style: 28 | style: "fenced" 29 | code-fence-style: 30 | style: "backtick" 31 | emphasis-style: 32 | style: "consistent" 33 | fenced-code-language: true # Fenced code blocks should have a language specified 34 | heading-start-left: true # Headings must start at the beginning of the line 35 | heading-style: 36 | style: "atx" 37 | hr-style: true # Horizontal rule style 38 | list-indent: true # Inconsistent indentation for list items at the same level 39 | no-empty-links: true 40 | no-missing-space-atx: true # No space after hash on atx style heading 41 | no-multiple-blanks: true # Multiple consecutive blank lines 42 | no-reversed-links: true 43 | no-space-in-code: true 44 | no-space-in-emphasis: true 45 | no-space-in-links: true 46 | no-trailing-spaces: true 47 | single-trailing-newline: true # Files should end with a single newline character 48 | strong-style: 49 | style: "consistent" 50 | ul-style: 51 | style: "consistent" 52 | -------------------------------------------------------------------------------- /.github/linters/.yaml-lint.yml: -------------------------------------------------------------------------------- 1 | --- 2 | ########################################### 3 | # These are the rules used for # 4 | # linting all the yaml files in the stack # 5 | # NOTE: # 6 | # You can disable line with: # 7 | # # yamllint disable-line # 8 | ########################################### 9 | rules: 10 | braces: 11 | level: warning 12 | min-spaces-inside: 0 13 | max-spaces-inside: 0 14 | min-spaces-inside-empty: 1 15 | max-spaces-inside-empty: 5 16 | brackets: 17 | level: warning 18 | min-spaces-inside: 0 19 | max-spaces-inside: 0 20 | min-spaces-inside-empty: 1 21 | max-spaces-inside-empty: 5 22 | colons: 23 | level: warning 24 | max-spaces-before: 0 25 | max-spaces-after: 1 26 | commas: 27 | level: warning 28 | max-spaces-before: 0 29 | min-spaces-after: 1 30 | max-spaces-after: 1 31 | comments: disable 32 | comments-indentation: disable 33 | document-end: disable 34 | document-start: 35 | level: warning 36 | present: true 37 | empty-lines: 38 | level: warning 39 | max: 2 40 | max-start: 0 41 | max-end: 0 42 | hyphens: 43 | level: warning 44 | max-spaces-after: 1 45 | indentation: 46 | level: warning 47 | spaces: consistent 48 | indent-sequences: true 49 | check-multi-line-strings: false 50 | key-duplicates: enable 51 | line-length: 52 | level: warning 53 | max: 100 54 | allow-non-breakable-words: true 55 | allow-non-breakable-inline-mappings: true 56 | new-line-at-end-of-file: disable 57 | new-lines: 58 | type: unix 59 | trailing-spaces: disable 60 | -------------------------------------------------------------------------------- /.github/scripts/get-path-prefix.js: -------------------------------------------------------------------------------- 1 | // This script retrieves the pathPrefix from the gatsby-config.js file. 2 | // It serves as an example for how to set up external javascript functions 3 | // outside workflow .yml files when they get too big or complex to keep them inline. 4 | 5 | // Documentation for the actions/github-script: 6 | // https://github.com/actions/github-script#run-a-separate-file 7 | 8 | module.exports = async ({ core }) => { 9 | const { pathPrefix } = await require('../../gatsby-config.js'); 10 | 11 | if (!pathPrefix) { 12 | core.setFailed( 13 | `The pathPrefix in the site's gatsby-config.js file is missing. 14 | 15 | To fix this, open your gatsby-config.js file, and add it to the config object: 16 | 17 | module.exports = { 18 | pathPrefix: "/commerce/frontend-core/", 19 | ... 20 | }` 21 | ); 22 | } else if (pathPrefix === '/') { 23 | core.setFailed( 24 | `The pathPrefix in the site's gatsby-config.js file is set to "/". This is not allowed. 25 | 26 | To fix this, change the pathPrefix to include a name that starts and ends with "/": 27 | 28 | pathPrefix: "/commerce/frontend - core/" 29 | 30 | This name identifies the site within the developer.adobe.com domain: 31 | https://developer.adobe.com/document-services/. 32 | ` 33 | ); 34 | } else { 35 | if (!pathPrefix.startsWith('/') || !pathPrefix.endsWith('/')) { 36 | core.setFailed( 37 | `The pathPrefix in the site's gatsby-config.js file does not start or end with "/". 38 | 39 | To fix this, change the pathPrefix to include a name that starts and ends with "/". 40 | For example: "/document-services/" or "/commerce/cloud-tools/". 41 | 42 | This is required by convention because of the way we construct site URLs. 43 | For example: https://developer.adobe.com + /document-services/ + path/to/files/. 44 | ` 45 | ); 46 | } 47 | } 48 | core.setOutput('path_prefix', pathPrefix); 49 | }; 50 | -------------------------------------------------------------------------------- /.github/super-linter.env: -------------------------------------------------------------------------------- 1 | IGNORE_GITIGNORED_FILES=true 2 | VALIDATE_GITLEAKS=true 3 | VALIDATE_MARKDOWN=true 4 | MARKDOWN_CONFIG_FILE=.markdownlint.yml 5 | VALIDATE_YAML=true 6 | VALIDATE_JSON=true 7 | -------------------------------------------------------------------------------- /.github/workflows/algolia-indexing.yml: -------------------------------------------------------------------------------- 1 | --- 2 | name: Search Indexing 3 | on: 4 | workflow_dispatch: 5 | inputs: 6 | mode: 7 | description: 'Type of indexing. "index" to push to Algolia, "console" for dry run.' 8 | required: true 9 | default: "index" 10 | type: choice 11 | options: 12 | - console 13 | - index 14 | 15 | jobs: 16 | build-and-index: 17 | runs-on: ubuntu-latest 18 | steps: 19 | - name: Checkout 20 | uses: actions/checkout@v4 21 | 22 | - name: Setup Node v18 for Yarn v4 23 | uses: actions/setup-node@v3 24 | with: 25 | node-version: "18.19.0" # Current LTS version 26 | 27 | - name: Enable Corepack for Yarn 28 | run: corepack enable 29 | 30 | - name: Install Dependencies 31 | run: yarn install 32 | env: 33 | YARN_ENABLE_IMMUTABLE_INSTALLS: false 34 | 35 | - name: Build site 36 | run: yarn build 37 | 38 | env: 39 | NODE_OPTIONS: "--max_old_space_size=8192" 40 | PREFIX_PATHS: true # equivalent to --prefix-paths flag for 'gatsby build' 41 | REPO_GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 42 | REPO_OWNER: ${{ github.repository_owner }} 43 | REPO_NAME: ${{ github.event.repository.name }} 44 | REPO_BRANCH: ${{ github.ref_name }} 45 | GATSBY_ALGOLIA_APPLICATION_ID: ${{ secrets.AIO_ALGOLIA_APPLICATION_ID }} 46 | GATSBY_ALGOLIA_SEARCH_API_KEY: ${{ secrets.AIO_ALGOLIA_SEARCH_API_KEY }} 47 | ALGOLIA_WRITE_API_KEY: ${{ secrets.AIO_ALGOLIA_WRITE_API_KEY }} 48 | ALGOLIA_INDEXATION_MODE: ${{ github.event.inputs.mode || 'index' }} 49 | GATSBY_ALGOLIA_INDEX_NAME: ${{ secrets.ALGOLIA_INDEX_NAME || github.event.repository.name }} 50 | GATSBY_FEDS_PRIVACY_ID: ${{ secrets.AIO_FEDS_PRIVACY_ID }} 51 | GATSBY_SITE_DOMAIN_URL: https://developer.adobe.com 52 | -------------------------------------------------------------------------------- /.github/workflows/github-pages.yml: -------------------------------------------------------------------------------- 1 | --- 2 | name: Github Pages 3 | on: 4 | push: 5 | branches: [main] 6 | jobs: 7 | build-and-deploy: 8 | runs-on: ubuntu-latest 9 | steps: 10 | - name: Checkout 11 | uses: actions/checkout@v3 12 | - name: Yarn Install 13 | uses: bahmutov/npm-install@v1 14 | - name: Build 15 | run: | 16 | export NODE_OPTIONS="--max_old_space_size=4096" 17 | yarn build 18 | env: 19 | PREFIX_PATHS: true # works like --prefix-paths flag for 'gatsby build' 20 | PATH_PREFIX: ${{ github.event.repository.name }} 21 | ADOBE_LAUNCH_SRC: ${{ secrets.AIO_ADOBE_LAUNCH_SRC }} 22 | ADOBE_LAUNCH_SRC_INCLUDE_IN_DEVELOPMENT: ${{ secrets.ADOBE_LAUNCH_SRC_INCLUDE_IN_DEVELOPMENT }} 23 | REPO_GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 24 | REPO_OWNER: ${{ github.event.repository.owner.login }} 25 | REPO_NAME: ${{ github.event.repository.name }} 26 | REPO_BRANCH: ${{ github.ref_name }} 27 | GOOGLE_OAUTH_CLIENT_ID: ${{ secrets.GOOGLE_OAUTH_CLIENT_ID }} 28 | GOOGLE_OAUTH_CLIENT_SECRET: ${{ secrets.GOOGLE_OAUTH_CLIENT_SECRET }} 29 | GOOGLE_DOCS_TOKEN: ${{ secrets.GOOGLE_DOCS_TOKEN }} 30 | GOOGLE_DOCS_FOLDER_ID: ${{ secrets.GOOGLE_DOCS_FOLDER_ID }} 31 | - name: Deploy to GH Pages 32 | uses: JamesIves/github-pages-deploy-action@v4 33 | with: 34 | token: ${{ secrets.GITHUB_TOKEN }} 35 | branch: gh-pages # The branch the action should deploy to. 36 | folder: public # The folder the action should deploy. 37 | clean: true # Automatically remove deleted files from deploy branch 38 | - name: GH Pages URL 39 | id: gh-pages-url 40 | run: | 41 | echo "View GH-Pages: $(https://adobedocs.github.io/${{ github.event.repository.name }})" 42 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | # OS and IDE generated files # 3 | ############################## 4 | .DS_Store 5 | .vscode 6 | .history 7 | .idea 8 | .editorconfig 9 | 10 | # npm yarn 11 | node_modules 12 | package.lock 13 | yarn-error.log 14 | .pnp.* 15 | .yarn/* 16 | 17 | # keep in repo 18 | !.gitignore 19 | !.yarn.lock 20 | !.yarnrc.yml 21 | !.yarn/patches 22 | !.yarn/plugins 23 | !.yarn/releases 24 | !.yarn/sdks 25 | !.yarn/versions 26 | 27 | # gatsby files 28 | .env 29 | .cache 30 | public 31 | 32 | # cypress 33 | cypress/videos 34 | cypress/screenshots 35 | 36 | # lerna 37 | lerna-debug.log 38 | 39 | # local actions 40 | .actrc 41 | .secrets 42 | local-test.yml 43 | 44 | # yalc 45 | .yalc 46 | yalc.lock -------------------------------------------------------------------------------- /.yarnrc.yml: -------------------------------------------------------------------------------- 1 | --- 2 | nodeLinker: node-modules 3 | yarnPath: .yarn/releases/yarn-3.2.1.cjs 4 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Adobe Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as 6 | contributors and maintainers pledge to making participation in our project and 7 | our community a harassment-free experience for everyone, regardless of age, body 8 | size, disability, ethnicity, gender identity and expression, level of experience, 9 | nationality, personal appearance, race, religion, or sexual identity and 10 | orientation. 11 | 12 | ## Our Standards 13 | 14 | Examples of behavior that contributes to creating a positive environment 15 | include: 16 | 17 | * Using welcoming and inclusive language. 18 | * Being respectful of differing viewpoints and experiences. 19 | * Gracefully accepting constructive criticism. 20 | * Focusing on what is best for the community. 21 | * Showing empathy towards other community members. 22 | 23 | Examples of unacceptable behavior by participants include: 24 | 25 | * The use of sexualized language or imagery and unwelcome sexual attention or 26 | advances. 27 | * Trolling, insulting/derogatory comments, and personal or political attacks. 28 | * Public or private harassment. 29 | * Publishing others' private information, such as a physical or electronic 30 | address, without explicit permission. 31 | * Other conduct which could reasonably be considered inappropriate in a 32 | professional setting. 33 | 34 | ## Our Responsibilities 35 | 36 | Project maintainers are responsible for clarifying the standards of acceptable 37 | behavior and are expected to take appropriate and fair corrective action in 38 | response to any instances of unacceptable behavior. 39 | 40 | Project maintainers have the right and responsibility to remove, edit, or 41 | reject comments, commits, code, wiki edits, issues, and other contributions 42 | that are not aligned to this Code of Conduct, or to ban temporarily or 43 | permanently any contributor for other behaviors that they deem inappropriate, 44 | threatening, offensive, or harmful. 45 | 46 | ## Scope 47 | 48 | This Code of Conduct applies both within project spaces and in public spaces 49 | when an individual is representing the project or its community. Examples of 50 | representing a project or community include using an official project e-mail 51 | address, posting via an official social media account, or acting as an appointed 52 | representative at an online or offline event. Representation of a project may be 53 | further defined and clarified by project maintainers. 54 | 55 | ## Enforcement 56 | 57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 58 | reported by contacting the project team at Grp-opensourceoffice@adobe.com. All 59 | complaints will be reviewed and investigated and will result in a response that 60 | is deemed necessary and appropriate to the circumstances. The project team is 61 | obligated to maintain confidentiality with regard to the reporter of an incident. 62 | Further details of specific enforcement policies may be posted separately. 63 | 64 | Project maintainers who do not follow or enforce the Code of Conduct in good 65 | faith may face temporary or permanent repercussions as determined by other 66 | members of the project's leadership. 67 | 68 | ## Attribution 69 | 70 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, 71 | available at [https://contributor-covenant.org/version/1/4][version]. 72 | 73 | [homepage]: https://contributor-covenant.org 74 | [version]: https://contributor-covenant.org/version/1/4/ -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contribute 2 | 3 | Contribute by writing recipes/samples etc 4 | 5 | Some of the topics that should eventually be added are: 6 | - [How to manage plugin icons](./src/pages/plugins/tutorials/_tbd_plugin_icons) 7 | - Working example for using `index.js` as starting point in plugins instead of `index.html` 8 | - Tutorial on multi-panel plugin 9 | - Tutorial on converting an existing script to plugin 10 | - Tutorial on 'How to protect your plugin' 11 | - Tutorial on 'Customizing your plugin' by changing the icons, labels, etc. 12 | - Tutorial on 'How to secure your plugin' 13 | - Tutorial on 'How to create multi-app plugin and packaging instructions 14 | - Explain support of source maps for React and other such frameworks 15 | - Upgrade CEP -> UXP migration guide 16 | - Recipe on Webview 17 | - Not much in detail 18 | - Provide reference to UDT starter 19 | - HTMLWebview element 20 | - Recipe for migrating from Spectrum widgets to SWC 21 | - Tutorials from XD, such as Localization (https://adobexdplatform.com/plugin-docs/reference/structure/manifest.html#menu-localization and visit more) 22 | -------------------------------------------------------------------------------- /COPYRIGHT: -------------------------------------------------------------------------------- 1 | © Copyright 2015-2020 Adobe. All rights reserved. 2 | 3 | Adobe holds the copyright for all the files found in this repository. 4 | 5 | See the LICENSE file for licensing information. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Adobe I/O Documentation Template 2 | 3 | This is a site template built with the [Adobe I/O Theme](https://github.com/adobe/aio-theme). 4 | 5 | View the [demo](https://adobedocs.github.io/dev-site-documentation-template/) running on Github Pages. 6 | 7 | ## Where to ask for help 8 | 9 | The slack channel #adobeio-onsite-onboarding is our main point of contact for help. Feel free to join the channel and ask any questions. 10 | 11 | ## How to develop 12 | 13 | For local development, simply use : 14 | ``` 15 | $ yarn install 16 | $ yarn dev 17 | ``` 18 | (also use `yarn clean`) 19 | 20 | For the documentation developer, please read these sections on how to: 21 | - [Arrange the structure content of your docs](https://github.com/adobe/aio-theme#content-structure) 22 | - [Linking to pages](https://github.com/adobe/aio-theme#links) 23 | - [Using assets](https://github.com/adobe/aio-theme-aio#assets) 24 | - [Setting Global Navigation](https://github.com/adobe/aio-theme#global-navigation) 25 | - [Setting Side Navigation](https://github.com/adobe/aio-theme#side-navigation) 26 | - [Using content blocks](https://github.com/adobe/aio-theme#jsx-blocks) 27 | - [Notes on using Markdown](https://github.com/adobe/aio-theme#writing-enhanced-markdown) 28 | 29 | For more in-depth [instructions](https://github.com/adobe/aio-theme#getting-started). 30 | 31 | 32 | ## How to test 33 | 34 | - To run the configured linters locally (requires [Docker](https://www.docker.com/)): 35 | 36 | ```shell 37 | yarn lint 38 | ``` 39 | 40 | > NOTE If you cannot use Docker, you can install the linters separately. In `.github/super-linter.env`, see which linters are enabled, and find the tools being used for linting in [Supported Linters](https://github.com/github/super-linter#supported-linters). 41 | 42 | - To check internal links locally 43 | 44 | ```shell 45 | yarn test:links 46 | ``` 47 | 48 | - To build and preview locally: 49 | 50 | ```shell 51 | yarn start 52 | ``` 53 | 54 | ## How to deploy 55 | 56 | For any team that wishes to deploy to the adobe.io and stage.adobe.io website, they must be in contact with the dev-site team. Teams will be given a path that will follow the pattern `adobe.io/{product}/`. This will allow doc developers to setup their subpaths to look something like: 57 | ``` 58 | adobe.io/{product}/docs 59 | adobe.io/{product}/community 60 | adobe.io/{product}/community/code_of_conduct 61 | adobe.io/{product}/community/contribute 62 | ``` 63 | 64 | ### Launching a deploy 65 | 66 | You can deploy using the GitHub actions deploy workflow see [deploy instructions](https://github.com/adobe/aio-theme#deploy-to-azure-storage-static-websites). 67 | 68 | ## Redirections 69 | - `https://developer.adobe.com/indesign/uxp/guides/` -> `https://developer.adobe.com/indesign/uxp/` 70 | - `https://developer.adobe.com/indesign/uxp/server/` -> `https://developer.adobe.com/indesign/uxp/` 71 | - `https://developer.adobe.com/indesign/uxp/recipes/` -> `https://developer.adobe.com/indesign/uxp/` 72 | - `https://developer.adobe.com/indesign/uxp/uxp-scripting-samples/` -> `https://developer.adobe.com/indesign/uxp/` 73 | 74 | ## URLs 75 | During InDesign v18.5 release, we revamped the information architecture of the whole site. This will break previously (prior to v18.5) bookmarked URLs. 76 | 77 | 78 | ## Search metadata 79 | - Add titles and descriptions at a minimum (https://github.com/adobe/aio-theme#frontmatter). No titles mean no indexing. 80 | - Keywords help with Google SEO but only work as filters within dev site 81 | ## Contribute 82 | 83 | ### Recipes 84 | Use the [template](./src/pages/resources/recipes/_recipe_template.md) for recipes and make sure you provide all the necessary details. Open a pull request. -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "name": "uxp-indesign", 4 | "version": "1.0.12", 5 | "license": "Apache-2.0", 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/AdobeDocs/uxp-indesign" 9 | }, 10 | "author": { 11 | "name": "Stephan Ringel", 12 | "url": "https://github.com/icaraps" 13 | }, 14 | "dependencies": { 15 | "@adobe/gatsby-theme-aio": "^4.14.4", 16 | "gatsby": "4.22.0", 17 | "react": "^17.0.2", 18 | "react-dom": "^17.0.2" 19 | }, 20 | "scripts": { 21 | "start": "gatsby build && gatsby serve", 22 | "start:prefix": "gatsby build --prefix-paths && gatsby serve --prefix-paths", 23 | "dev": "gatsby develop", 24 | "dev:https": "gatsby develop --https --host localhost.corp.adobe.com --port 9000", 25 | "build": "gatsby build", 26 | "serve": "gatsby serve", 27 | "clean": "gatsby clean", 28 | "test:links": "remark src/pages --quiet --frail", 29 | "lint": "docker run --rm -e RUN_LOCAL=true --env-file '.github/super-linter.env' -v \"$PWD\":/tmp/lint github/super-linter:slim-v4.10.1" 30 | }, 31 | "remarkConfig": { 32 | "plugins": [ 33 | "remark-validate-links" 34 | ] 35 | }, 36 | "packageManager": "yarn@3.2.1", 37 | "devDependencies": { 38 | "remark-cli": "^11.0.0", 39 | "remark-validate-links": "^12.1.0" 40 | }, 41 | "resolutions": { 42 | "sharp": "0.33.0", 43 | "gatsby-sharp": "1.12.0" 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /reference-recipes.js: -------------------------------------------------------------------------------- 1 | module.exports = [ 2 | { 3 | "title": "File Operations", 4 | "path": "/resources/recipes/file-operation/" 5 | }, 6 | { 7 | "title": "Storage", 8 | "path": "/resources/recipes/storage/" 9 | }, 10 | { 11 | "title": "Network I/O", 12 | "path": "/resources/recipes/network/" 13 | }, 14 | { 15 | "title": "Clipboard", 16 | "path": "/resources/recipes/clipboard/" 17 | }, 18 | { 19 | "title": "Processes", 20 | "path": "/resources/recipes/launch-process/" 21 | }, 22 | { 23 | "title": "CSS Styling", 24 | "path": "/resources/recipes/css-styling/" 25 | }, 26 | { 27 | "title": "HTML Elements", 28 | "path": "/resources/recipes/html-elements/" 29 | }, 30 | { 31 | "title": "HTML Events", 32 | "path": "/resources/recipes/html-events/" 33 | }, 34 | { 35 | "title": "Debug", 36 | "path": "/resources/recipes/debug/" 37 | }, 38 | { 39 | "title": `Host Information`, 40 | "path": "/resources/recipes/host-info/" 41 | }, 42 | { 43 | "title": `Changes to Document`, 44 | "path": "/resources/recipes/document-changes/" 45 | }, 46 | { 47 | "title": 'InDesign Events', 48 | "path": '/resources/recipes/indesign-events/' 49 | }, 50 | { 51 | "title": 'InDesign Menus', 52 | "path": '/resources/recipes/indesign-menus/' 53 | }, 54 | { 55 | "title": `XML`, 56 | "path": "/resources/recipes/xml/" 57 | }, 58 | { 59 | "title": `Right-to-left`, 60 | "path": "/resources/recipes/rtl/" 61 | }, 62 | { 63 | "title": `Flyout Menus`, 64 | "path": "resources/recipes/flyout-menu" 65 | }, 66 | { 67 | "title": `Persistent Storage Migration`, 68 | "path": "resources/recipes/persistent-storage-migration" 69 | } 70 | ] 71 | -------------------------------------------------------------------------------- /site-config.js: -------------------------------------------------------------------------------- 1 | export const siteConfig = { 2 | uxpApiPath: process.env.GATSBY_UXP_API_PATH, 3 | root: process.env.GATSBY_ROOT 4 | }; -------------------------------------------------------------------------------- /src/pages/changelog/PluginsMenu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AdobeDocs/uxp-indesign/ca701e5635baf08511aa5a747a74c14d9871fad0/src/pages/changelog/PluginsMenu.png -------------------------------------------------------------------------------- /src/pages/illustration.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AdobeDocs/uxp-indesign/ca701e5635baf08511aa5a747a74c14d9871fad0/src/pages/illustration.png -------------------------------------------------------------------------------- /src/pages/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Overview - UXP for Adobe InDesign 3 | description: This is the overview page of UXP for Adobe InDesign 4 | contributors: 5 | - https://github.com/oihamza 6 | --- 7 | 8 | 9 | 10 | ![Hero image](./illustration.png) 11 | 12 | 13 | # UXP for Adobe InDesign 14 | 15 | Welcome to the world of UXP (**U**nified E**x**tensibility **P**latform) in Adobe InDesign! 16 | 17 | 18 | 19 | #### Resources 20 | 21 | - [What's new](./changelog/) 22 | - [UXP APIs](/indesign/uxp/reference/uxp-api/) 23 | - [InDesign APIs](/indesign/dom/api/) 24 | - [Scripts](./scripts/getting-started) 25 | - [Plugins](./plugins/getting-started/) 26 | - [Creative Cloud Developer Forums](https://forums.creativeclouddeveloper.com/c/indesign/) 27 | 28 | 29 | ## Getting started 30 | UXP allows you to accomplish tasks, and make changes to a document or its contents quickly. 31 | Get started by [learning about UXP](./introduction/) and setting up your environment with [essential tools](./introduction/essentials/tech-stack/). 32 | 33 | ## Scripts and plugins 34 | UXP offers you two ways of extending the application's capabilities - scripts and plugins. Begin by knowing the [difference between them](./introduction/next-steps/script-and-plugin/) and finding a suitable choice for your use case. Followed by, writing your very first [script](./scripts/) or [plugin](./plugins/). 35 | 36 | ## Resources and API references 37 | Learn the [fundamental concepts](./resources/fundamentals/) needed to develop UXP scripts and plugins and find bite-size [recipes](./resources/recipes/) for common use cases. 38 | 39 | Since UXP is still evolving, keep an eye out for the [latest APIs](./changelog/) in recent releases and their references in [UXP APIs](/indesign/uxp/reference/uxp-api/) and [InDesign APIs](/indesign/dom/api/). 40 | 41 | Check out the [sample repository](https://github.com/AdobeDocs/uxp-indesign-samples) that has ready-made plugins and scripts to help you set up popular frameworks easily. 42 | 43 | ## Share & Distribute 44 | Share your work with your family, friends and more users by distributing it via Adobe Marketplace. Learn more [here](./introduction/next-steps/distribution/). 45 | 46 | ## Migration 47 | Find [guides for migrating](./resources/migration-guides/) from other extensibility platforms into UXP. 48 | 49 | ## Join the community 50 | Join the worldwide community of Creative Cloud Developers who are building plugins and integrations to empower creativity. Need support? [Click here](./support/). 51 | 52 | Here are a few other ways to get involved: 53 | - Join the [Creative Cloud Developer Forums](https://forums.creativeclouddeveloper.com/c/indesign/) to meet other developers, ask questions, and offer help. 54 | - Subscribe to the [Adobe Creative Cloud Developer Newsletter](https://www.adobe.com/subscription/ccdevnewsletter.html). 55 | 56 | 57 | -------------------------------------------------------------------------------- /src/pages/introduction/applications/ids.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Introduction to InDesign Server 3 | description: Setup local environment for InDesign server 4 | keywords: 5 | - UXP InDesign Server 6 | - InDesign Server setup 7 | contributors: 8 | - https://github.com/padmkris123 9 | --- 10 | 11 | # InDesign Server 12 | 13 | Adobe InDesign Server software is a layout and composition engine that powers automated publishing solutions. InDesign Server is based on the desktop version of InDesign but has no built-in user interface. 14 | 15 | Start by [learning more InDesign Server](https://helpx.adobe.com/in/indesign/using/indesign-server.html) and set up your local environment to [get started with UXP scripts](../../scripts/getting-started/) 16 | -------------------------------------------------------------------------------- /src/pages/introduction/essentials/dev-tools/ccd-allapps-udt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AdobeDocs/uxp-indesign/ca701e5635baf08511aa5a747a74c14d9871fad0/src/pages/introduction/essentials/dev-tools/ccd-allapps-udt.png -------------------------------------------------------------------------------- /src/pages/introduction/essentials/dev-tools/devmode.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AdobeDocs/uxp-indesign/ca701e5635baf08511aa5a747a74c14d9871fad0/src/pages/introduction/essentials/dev-tools/devmode.png -------------------------------------------------------------------------------- /src/pages/introduction/essentials/dev-tools/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: UXP developer tools 3 | description: Tools used for effectively developing in UXP 4 | keywords: 5 | - Code Editor 6 | - UDT 7 | - UXP Developer Tool 8 | contributors: 9 | - https://github.com/padmkris123 10 | --- 11 | 12 | # Developer Tools 13 | 14 | While writing UXP scripts and plugins, the following tools will make your job easier. 15 | 16 | ## Code Editor 17 | A good text editor is necessary for you to organize your project effectively. Any modern developer-friendly text editor should work, but one of the popular choices is [Visual Studio Code](https://code.visualstudio.com), which has deep integrations with the other pieces needed for UXP, and a wide variety of its plugins to help with code formatting, syntax checking, JSON parsing, and so on. 18 | 19 | 20 | ## UXP Developer Tool (UDT) 21 | 22 | The Adobe UXP Developer Tool (UDT) makes it easy to create, load, manage, and debug UXP-based plugins and scripts for UXP-powered applications. 23 | 24 | Additionally, for plugins, 25 | - It has a playground where you can try out and experiment with APIs 26 | - It lets you create a `.ccx` - A UXP plugin package ready for distribution. 27 | - And offers a variety of easy-to-use templates and samples, to begin with. 28 | 29 | 30 | 31 | **IMPORTANT**: 32 | The Adobe UXP Developer Tool requires elevated privileges to function correctly. If your administrator does not enable your ability to elevate to Administrator privileges, you'll be unable to use this tool. 33 | 34 | ### Installation 35 | Install UDT by clicking [here](https://creativecloud.adobe.com/apps/download/uxp-developer-tools) or by following these steps: 36 | 1. Launch Adobe Creative Cloud Application. If not installed, [download and install Creative Cloud](https://creativecloud.adobe.com/apps/download/creative-cloud). 37 | 2. Sign in with your Adobe account if not already signed in. 38 | 3. Click on `All apps` section, and you should see "UXP Developer Tools" listed. 39 | ![Creative cloud](./ccd-allapps-udt.png) 40 | 4. Click on the `Install` button for the `UXP Developer Tools` card to start the installation. 41 | 42 | ### Launching for the first time 43 | 44 | When you launch the Developer Tool for the first time, you'll be prompted to enable Developer Mode. This is required for you to load plugins in development into the application. 45 | 46 | ![Enable Developer Mode](./devmode.png) 47 | 48 | Once you click `Enable`, elevated permissions will be requested, and you may be required to enter your password or approve an action from the Developer Tool. 49 | 50 | ![Elevated Permissions request](./macos-elevated-permissions.png) 51 | 52 | If you have problems with this step, you can also configure Developer Mode manually, although you must have Administrative privileges to do so: 53 | 1. Quit the UXP Developer Tool 54 | 2. Navigate to `/Library/Application Support/Adobe/UXP/Developer` on macOS, or `%CommonProgramFiles%/Adobe/UXP/Developer` on Windows. (If the folder does not exist, you can create it -- you'll need administrative rights.) 55 | 3. Create a new file named `settings.json` with the following contents (You'll need administrative rights to save the file): 56 | ```json 57 | {"developer" : true} 58 | ``` 59 | 4. Launch the UXP Developer Tool again. 60 | 61 | For now, successfully installing UDT is sufficient. We will understand UDT in more depth, once you write your first script or plugin. 62 | 63 | 68 | -------------------------------------------------------------------------------- /src/pages/introduction/essentials/dev-tools/macos-elevated-permissions.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AdobeDocs/uxp-indesign/ca701e5635baf08511aa5a747a74c14d9871fad0/src/pages/introduction/essentials/dev-tools/macos-elevated-permissions.png -------------------------------------------------------------------------------- /src/pages/introduction/essentials/tech-stack/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Prerequisites for UXP 3 | description: Set of tools and programming languages developers should know before developing in UXP 4 | keywords: 5 | - Tech stack 6 | - UXP Prerequisites 7 | - Programming languages 8 | - System requirements 9 | - Frameworks setup 10 | contributors: 11 | - https://github.com/padmkris123 12 | --- 13 | 14 | # Programming languages 15 | 16 | As mentioned earlier, UXP is a modern JavaScript (ECMA2015 or ES6) based extensibility platform. 17 | 18 | To begin, a little bit of knowledge of web technologies, such as JavaScript, HTML, and CSS, is required. There are some great materials available on the web that can teach you the basics but here are some of our recommendations. Feel free to use other sources to read about these topics. 19 | 20 | 21 | 22 | Please remember that since JavaScript, HTML or CSS are the foundational web technologies, online tutorials often assume that you are about to use them in a browser or a server-side JS engine. 23 | 24 | UXP is **not** a full-blown browser or server-side JS engine like NodeJS. Though it allows you to use the same syntax, it does not intend to behave like a browser and consequently will support only a subset of the web APIs. This means, not all the HTML Elements or CSS classes or JavaScript APIs will be available in the UXP world. 25 | 26 | ## System requirements 27 | Your system must meet these minimum requirements for [InDesign](https://helpx.adobe.com/in/indesign/system-requirements.html) and [InDesign Server](https://helpx.adobe.com/indesign/kb/system-requirements-indesign-server.html) applications. 28 | 29 | ## Reading material 30 | Start by getting acquainted with the basics of JS, HTML, and CSS. 31 | 32 | - [Introduction to JavaScript](https://javascript.info/intro) and its [basics](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics) 33 | - [JavaScript versions](https://www.w3schools.com/js/js_versions.asp) and [ECMA2015 (or ES6)](https://www.w3schools.com/js/js_es6.asp) 34 | - [HTML Basics](https://www.w3schools.com/html/html_intro.asp) 35 | - [CSS Basics](https://www.w3schools.com/css/css_intro.asp), [syntax](https://www.w3schools.com/css/css_syntax.asp), and [selectors](https://www.w3schools.com/css/css_selectors.asp) 36 | 37 | Apart from the basics, the following additional topics will also come in handy. You need not go through each of them right away, but do bookmark them for later as it will help you understand the code snippets much more easily. 38 | 39 | - [Document Object Model or HTML DOM](https://eloquentjavascript.net/14_dom.html) and the global [window](https://www.w3schools.com/jsref/obj_window.asp) and [document](https://www.w3schools.com/jsref/prop_win_document.asp) object 40 | - [DOM Events](https://javascript.info/introduction-browser-events) 41 | - [Adding CSS](https://www.w3schools.com/css/css_howto.asp) 42 | - [CSS layout using flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) 43 | - [Promise](https://javascript.info/promise-basics) 44 | - [Async/await](https://javascript.info/async-await) 45 | - Different ways of declaring JS functions - [traditional style](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/function) vs using the [fat arrow](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) 46 | 47 | ## Chrome debug tool (CDT) 48 | One of the easiest ways to debug these technologies is by using the Chrome Debug Tool. We will be using the same within our developer tool called UDT, which stands for the UXP Developer Tool. A high-level understanding of CDT will be very useful for you later. 49 | 50 | Please familiarize yourself with the [Chrome Debug tool](https://developer.chrome.com/docs/devtools/overview/), especially the ways to [access DOM](https://developer.chrome.com/docs/devtools/dom/), [modify CSS](https://developer.chrome.com/docs/devtools/css/) and [debug JS](https://developer.chrome.com/docs/devtools/javascript/) by adding breakpoints. 51 | 52 | ## Frameworks 53 | So far we have spoken about plain JS, HTML, and CSS. However, the industry offers various frameworks that act as an abstract layer on top of these web technologies. These frameworks aim to provide you with a quicker, and more efficient way of writing reusable code. 54 | 55 | React, Vue, and Svelte are some of the popular frameworks, that developers often find useful. To use such frameworks is optional and is your personal choice. But, since these are one layer above the plain web technologies, you would require additional tools to run such projects. 56 | 57 | - [Node.js](https://nodejs.org/en/): a JavaScript runtime environment. It's often used as a backend server in web environments. Go to the [Node.js download page](https://nodejs.org/en/download/), download the installer for your platform, and run it. This will also install `npm`. 58 | - [npm](https://www.npmjs.com): a "package manager" bundled with Node which helps manage your project's dependencies (i.e., other code and files that are needed to make your plugin work). 59 | - [yarn](https://yarnpkg.com): a "better" package manager than npm for Node. To install yarn you'll need to have npm installed first (see above). After that, use this command: 60 | 61 | ```bash 62 | npm install yarn --global 63 | ``` 64 | -------------------------------------------------------------------------------- /src/pages/introduction/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Introduction 3 | description: Introduction to UXP 4 | keywords: 5 | - Introduction 6 | - UXP Prerequisites 7 | - Local set up 8 | - What is UXP 9 | contributors: 10 | - https://github.com/padmkris123 11 | --- 12 | 13 | # InDesign and Unified Extensibility Platform (UXP) 14 | 15 | InDesign, along with its counterpart InDesign Server, supports UXP. 16 | 17 | UXP is a JavaScript ES6 (ECMA2015) based extensibility platform that helps you automate, optimize and extend the capabilities of your favorite Adobe Creative Cloud products. It provides a comprehensive solution that lets you use web technologies to build controls for the desktop application. 18 | 19 | 20 | 21 | An **IMPORTANT** thing to note is that though UXP enables you to use web technologies, it should not be mistaken as a browser. Certain concepts of the browser will never be available in the UXP world but the platform offers a plethora of capabilities that allows you to build powerful and creative solutions. 22 | 23 | With UXP you can, 24 | 1. Automate the myriad, small, annoying tasks that you face every day. 25 | 2. Achieve creative effects that would be difficult or impossible to attain by other means. 26 | 3. Customize InDesign to match your work habits and layouts. 27 | 4. Create a fluent user interface for users to interact with. 28 | 29 | UXP is also available in other apps such as XD and Photoshop. And in the future, it will be added to more applications. 30 | 31 | Developing in UXP requires you to have basic knowledge of JavaScript, HTML, and CSS. But don't worry if you aren't there yet. We have suggested a few courses and materials that will help you begin and understand our APIs. 32 | 33 | You can choose to write a single JavaScript file and execute them as scripts. Or, create something more complex and elaborate with persistent and fluent UI in the form of plugins. Within plugins too, you can either write a 'command' or a 'panel' plugin based on how you would like the users to interact with them. We will learn about all these in the subsequent section that will help you make the right choice suiting your needs. 34 | 35 | Lastly, you can share your UXP plugin and scripts with others as well. Plugins can also be distributed in Adobe's Marketplace giving you access to millions of application users at once. Alternatively, you can distribute them via your distribution channels. 36 | 37 | Welcome once again to UXP! The next few sections take you one level deeper into the UXP world. Make sure to read further and set up the essential developer tools. 38 | 39 | -------------------------------------------------------------------------------- /src/pages/introduction/next-steps/distribution/distribution-options/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Share & Distribute 3 | description: Options to share and distribute plugins and scripts 4 | keywords: 5 | - Distribute UXP scripts 6 | - Distribute UXP plugins 7 | - ccx package 8 | - Marketplace 9 | contributors: 10 | - https://github.com/padmkris123 11 | --- 12 | 13 | # Distribution Options 14 | 15 | Once you have a packaged your code correctly, you're ready to distribute it. 16 | 17 | ## Distributing scripts 18 | A UXP script can be directly shared. Just share your `.idjs` file with your family and friends and they can run it after importing it within the Scripts panel. 19 | 20 | ## Distributing plugins 21 | 22 | While sharing your plugins, you have a couple of options: 23 | 24 | 25 | 26 | ### Distribute on Creative Cloud Plugin Marketplace 27 | 28 | Use the Developer Distribution portal to submit your plugin to the Plugin Marketplace to reach a large number of users. 29 | Users can download your plugin directly in the Creative Cloud desktop app. 30 | 31 | - [Developer Distribution Documentation](https://developer.adobe.com/developer-distribution/creative-cloud/docs/guides/) 32 | 33 | ### Direct distribution with `.ccx` files 34 | 35 | Give the plugin to your family, friends, and workmates. You can email the `.ccx` file or, more likely, put it on a cloud folder somewhere for them to download. All they need to do is double-click the `.ccx` file to install using the Creative Cloud application. It's that easy! Be aware that distributing this way will require them to click through the "Do you trust this?" warning dialog boxes that appear after they double-click. 36 | -------------------------------------------------------------------------------- /src/pages/introduction/next-steps/distribution/images/install-warning.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AdobeDocs/uxp-indesign/ca701e5635baf08511aa5a747a74c14d9871fad0/src/pages/introduction/next-steps/distribution/images/install-warning.png -------------------------------------------------------------------------------- /src/pages/introduction/next-steps/distribution/images/marketplace.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AdobeDocs/uxp-indesign/ca701e5635baf08511aa5a747a74c14d9871fad0/src/pages/introduction/next-steps/distribution/images/marketplace.png -------------------------------------------------------------------------------- /src/pages/introduction/next-steps/distribution/images/package-failed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AdobeDocs/uxp-indesign/ca701e5635baf08511aa5a747a74c14d9871fad0/src/pages/introduction/next-steps/distribution/images/package-failed.png -------------------------------------------------------------------------------- /src/pages/introduction/next-steps/distribution/images/package-success.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AdobeDocs/uxp-indesign/ca701e5635baf08511aa5a747a74c14d9871fad0/src/pages/introduction/next-steps/distribution/images/package-success.png -------------------------------------------------------------------------------- /src/pages/introduction/next-steps/distribution/images/udt-package-menu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AdobeDocs/uxp-indesign/ca701e5635baf08511aa5a747a74c14d9871fad0/src/pages/introduction/next-steps/distribution/images/udt-package-menu.png -------------------------------------------------------------------------------- /src/pages/introduction/next-steps/distribution/images/verify-failed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AdobeDocs/uxp-indesign/ca701e5635baf08511aa5a747a74c14d9871fad0/src/pages/introduction/next-steps/distribution/images/verify-failed.png -------------------------------------------------------------------------------- /src/pages/introduction/next-steps/distribution/images/what-now.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AdobeDocs/uxp-indesign/ca701e5635baf08511aa5a747a74c14d9871fad0/src/pages/introduction/next-steps/distribution/images/what-now.png -------------------------------------------------------------------------------- /src/pages/introduction/next-steps/distribution/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Share & Distribute 3 | description: Options to share and distribute 4 | keywords: 5 | - Share UXP scripts 6 | - Share UXP plugins 7 | - Distribute UXP scripts 8 | - Distribute UXP plugins 9 | contributors: 10 | - https://github.com/padmkris123 11 | --- 12 | 13 | # Share your work with others 14 | Unless you've written a script/plugin solely for yourself, you're probably going to want to share it with others. This section explains how to take your plugin into the wider world, and let other users know about it. 15 | -------------------------------------------------------------------------------- /src/pages/introduction/next-steps/distribution/packaging/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Share & Distribute 3 | description: Options to share and distribute 4 | keywords: 5 | - Packaging UXP scripts 6 | - Packaging UXP plugins 7 | - ccx 8 | - idjs 9 | - plugin bundle 10 | contributors: 11 | - https://github.com/padmkris123 12 | --- 13 | 14 | # Packaging 15 | As the first step, you need to prepare your script or plugin for sharing. 16 | 17 | ## Scripts 18 | Preparing your scripts for sharing needs no additional steps. The `.idjs` file can be shared as it is with other developers and users. 19 | 20 | ## Plugins 21 | UXP plugins are distributed in the form of a `.ccx` file. Under the hood, this is a zip file. 22 | 23 | 24 | 25 | **IMPORTANT notes**: 26 | - Unless you have some special requirements, you should not be creating this zip file yourself. 27 | - Before you package your plugin for distribution outside your own computer, make sure you've obtained a valid plugin ID from the [Developer Distribution portal](https://developer.adobe.com/developer-distribution/creative-cloud/docs/guides/plugin_id/) 28 | . Without an id (which goes in the `id` field of your plugin's `manifest.json` file), you won't be able to distribute your plugin in the Creative Cloud Marketplace. 29 | 30 | 31 | 32 | ### Packaging a plugin 33 | Taking your plugin code and packaging it has never been easier. 34 | 35 | Using the [UXP Developer Tool](../../devtool/), choose `Package` from the Actions menu (the ellipsis on the right side of the Developer Tool window, on the same line as your plugin name): 36 | 37 | ![Package Menu](../images/udt-package-menu.png) 38 | 39 | This shows a "Select target directory" dialog. Choose a directory where your built plugin `.ccx` file should reside. 40 | 41 | After the `.ccx` file has been created, you should see this message at the bottom of the Developer Tool window: 42 | 43 | ![Package Success](../images/package-success.png) 44 | 45 | If instead, you see this: 46 | 47 | ![Package Failed](../images/package-failed.png) 48 | 49 | Click on `Details` to view a window that shows why the packaging failed. 50 | 51 | Once your `.ccx` file has been built, you should test it locally before doing anything else. To install a .ccx file into any Creative Cloud application, double-click it. This will open the Creative Cloud application, and you'll get a warning that your plugin hasn't been verified by Adobe: 52 | 53 | ![Verify Failed](../images/verify-failed.png) 54 | 55 | Since you wrote the plugin, it's probably safe to install. Click `Install` and you'll see another warning: 56 | 57 | ![Install Warning](../images/install-warning.png) 58 | 59 | Since, in this case, *you* are the third-party developer, it's safe to click OK. Obviously, if someone else sends you a `.ccx` file and you get this dialog, you should make sure you trust the person who sent it. 60 | 61 | Now that you have your plugin installed, test it again to make sure the packaged version performs correctly. Then move on to [Options for Distribution](../distribution-options) to get your plugin out into the world. 62 | -------------------------------------------------------------------------------- /src/pages/introduction/next-steps/script-and-plugin/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Scripts & Plugins 3 | description: Details about scripts and plugins to compare 4 | keywords: 5 | - UXP Scripts 6 | - UXP Plugins 7 | - Scripts vs plugins 8 | - Comparison of UXP Scripts & Plugins 9 | - Difference between Scripts & Plugins 10 | contributors: 11 | - https://github.com/padmkris123 12 | --- 13 | 14 | # UXP Scripts and Plugins 15 | 16 | UXP offers two ways of extending the application's capabilities. You can choose between a script or a plugin. 17 | 18 | A script is a single JavaScript file, with a special file extension based on the application you are developing it for. For example, in InDesign, these files have a `.idjs` file extension, and it is `.psjs` in Photoshop. On the other hand, a plugin can have multiple JS, HTML or CSS, almost like a web project, but most importantly a manifest that has the required configurations. 19 | 20 | The following table will let you compare other differences.

21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 63 | 66 | 69 | 70 | 71 | 72 | 73 | 75 | 76 | 77 | 78 | 79 | 84 | 85 | 86 |
ScriptsPlugins
CompatibilityInDesign, and InDesign Server (since InDesign v18.0)InDesign only (since InDesign v18.5)
FilesA single JavaScript file. 40 | Javascript

41 | + HTML and CSS (optional)

42 | + manifest.json
Manifest valuesThe application has predefined values for the manifest that cannot be alteredRequires you to specifically configure manifest.json and provides flexibility
Extensions`.idjs``.ccx` for sharing, otherwise a regular folder can be used to load and test with the help of UDT.
User interfaceYou can ask users for input only via modal dialogs.Along with modal dialogs, you can build elaborate UI within persistent panels
Distributable

61 | (Privately, own distribution channel or via Adobe Marketplace) 62 |

64 | You can share your `.idjs` file with others who can include it in the scripts panel.

65 | However, scripts are not distributable via Adobe Marketplace.

 67 | Once you create a packaged plugin with a `.ccx` extension, you can share it with others in multiple ways - privately, or via Adobe Marketplace or your own distribution channel.

68 |
SetupQuickest and easiest to set up.We offer multiple starter templates for you to get the setup up and running in no time. However, it requires some amount of understanding of the plugin `manifest`.

74 | Also, if you wish to use popular frameworks such as React, Vue etc, it is possible only within plugins and may require additional setup steps.
Miscellaneous- 80 | You have three flavors within plugins - command, panel and hybrid plugins.

81 | A command plugin, also referred to as a modal plugin sometimes, is almost like a headless plugin that can occasionally ask for user inputs with the help of modal dialogs (like scripts). It is the best way to convert your existing script into a plugin to make it distributable.



82 | A panel plugin has a persistent UI.



83 | Hybrid plugins, which will be available in the future, can let you use the power of C++ libraries alongside JavaScript.
87 | 88 |

89 | 90 | Hope the above table helps you in deciding the best route suitable for your use case. Next, we recommend you write your first [script](../../scripts/getting-started) or [plugin](../../plugins/getting-started). 91 | -------------------------------------------------------------------------------- /src/pages/known-issues/index.md: -------------------------------------------------------------------------------- 1 | # -------------------------------------------------------------------------------- /src/pages/plugins/advanced/example-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 8 | 9 | S 3DMaterials 18 N 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /src/pages/plugins/advanced/file.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AdobeDocs/uxp-indesign/ca701e5635baf08511aa5a747a74c14d9871fad0/src/pages/plugins/advanced/file.jpg -------------------------------------------------------------------------------- /src/pages/plugins/advanced/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Advanced Topics 3 | --- 4 | 5 | # Advanced topics 6 | 7 | There's a lot more to plugin development than what we've covered so far. For more advanced topics, please have a look at the [resources section](). Among other things, you'll find information about: 8 | 9 | 10 | 11 | ![Folder icon](file.jpg) 12 | 13 | #### File I/O 14 | 15 | Save data to and load data from the file system 16 | 17 | [File I/O](../../resources/recipes/file-operation/) 18 | 19 | ![Network icon](network.jpg) 20 | 21 | #### Network I/O 22 | 23 | Make network requests to fetch data from the internet 24 | 25 | [Network I/O](../../resources/recipes/network/) 26 | 27 | ![Application window icon](ui.jpg) 28 | 29 | #### User Interface 30 | 31 | Add a variety of UI elements to your plugin 32 | 33 | [Adding User Interfaces](../../resources/fundamentals/create-ui/) 34 | 35 | 44 | 45 | ![Ellipsis](more.jpg) 46 | 47 | #### And much more 48 | 49 | See all the resources available to you for plugin development 50 | 51 | [All resources](../../resources/) 52 | 53 | -------------------------------------------------------------------------------- /src/pages/plugins/advanced/more.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AdobeDocs/uxp-indesign/ca701e5635baf08511aa5a747a74c14d9871fad0/src/pages/plugins/advanced/more.jpg -------------------------------------------------------------------------------- /src/pages/plugins/advanced/network.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AdobeDocs/uxp-indesign/ca701e5635baf08511aa5a747a74c14d9871fad0/src/pages/plugins/advanced/network.jpg -------------------------------------------------------------------------------- /src/pages/plugins/advanced/react.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AdobeDocs/uxp-indesign/ca701e5635baf08511aa5a747a74c14d9871fad0/src/pages/plugins/advanced/react.jpg -------------------------------------------------------------------------------- /src/pages/plugins/advanced/ui.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AdobeDocs/uxp-indesign/ca701e5635baf08511aa5a747a74c14d9871fad0/src/pages/plugins/advanced/ui.jpg -------------------------------------------------------------------------------- /src/pages/plugins/concepts/entry-points/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Plugin entry points 3 | description: Details of plugin entrypoints 4 | keywords: 5 | - plugin entry points 6 | - UXP commands 7 | - UXP panels 8 | contributors: 9 | - https://github.com/padmkris123 10 | --- 11 | 12 | # UXP Entry Points 13 | 14 | Plugins can have multiple entry points. An entrypoint is a way for a plugin to be invoked. 15 | 16 | There are two types of entry points: `commands` and `panels`. 17 | 18 | - Commands are _"run and forget"_ entry points that are invoked by the user, such as a menu item or a keyboard shortcut. 19 | - Panels have a panel that can be opened by the user from the UI. The user can then interact with the panel. 20 | 21 | The main difference between the two is that panels can have a persistent UI. Commands are invoked and then disappear. 22 | 23 | However, both commands and panels can show modal dialogs. Modal dialogs are a special type of UI that blocks the user from interacting with the rest of the application until the dialog is closed. Modal dialogs are useful for getting information from the user. 24 | 25 | 26 | ![Mock up screenshot of a generic Adobe Creative cloud app with a modal dialog titled "Dialog UI" and a panel titled "Panel UI" being open](ui-options.jpg) 27 | -------------------------------------------------------------------------------- /src/pages/plugins/concepts/entry-points/ui-options.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AdobeDocs/uxp-indesign/ca701e5635baf08511aa5a747a74c14d9871fad0/src/pages/plugins/concepts/entry-points/ui-options.jpg -------------------------------------------------------------------------------- /src/pages/plugins/concepts/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Plugin concepts 3 | description: Crucial concepts for creating UXP plugins 4 | keywords: 5 | - UXP plugin concepts 6 | contributors: 7 | - https://github.com/padmkris123 8 | --- 9 | 10 | # Concepts 11 | 12 | Before you start developing plugins for InDesign, it's important to understand the basic concepts of InDesign plugin architecture. This section will introduce you to some of the most important concepts like entrypoints and the manifest file. 13 | -------------------------------------------------------------------------------- /src/pages/plugins/concepts/manifest/table-styles.css: -------------------------------------------------------------------------------- 1 | .manifest-table > td p:first-child { 2 | margin-top: 0; 3 | } 4 | 5 | .manifest-table > td:not(:last-child) { 6 | width: 0; 7 | } 8 | 9 | .manifest-table > td:nth-child(3), 10 | .manifest-table > th:nth-child(3) { 11 | display: none; 12 | } 13 | -------------------------------------------------------------------------------- /src/pages/plugins/getting-started/connected-apps.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AdobeDocs/uxp-indesign/ca701e5635baf08511aa5a747a74c14d9871fad0/src/pages/plugins/getting-started/connected-apps.png -------------------------------------------------------------------------------- /src/pages/plugins/getting-started/create-plugin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AdobeDocs/uxp-indesign/ca701e5635baf08511aa5a747a74c14d9871fad0/src/pages/plugins/getting-started/create-plugin.png -------------------------------------------------------------------------------- /src/pages/plugins/getting-started/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Get started - UXP plugin 3 | description: Steps to create a simple UXP plugin 4 | keywords: 5 | - UXP Plugin 6 | - Getting started 7 | - First plugin 8 | - Simple plugin 9 | - Hello world 10 | contributors: 11 | - https://github.com/padmkris123 12 | --- 13 | 14 | # Building your first plugin 15 | 16 | This tutorial will walk you through the process of building your first plugin. You will learn how to create a plugin, add a command to it, and then run it in InDesign. 17 | 18 | ## Prerequisites 19 | 20 | Before you start, make sure you have the following software installed on your machine: 21 | 22 | - **InDesign 2023 (v18.5)** or later (can be installed from the _Creative Cloud Desktop_ app) 23 | - **UXP Developer Tool v1.9** (can be [installed from the _Creative Cloud Desktop_ app](https://creativecloud.adobe.com/apps/download/uxp-developer-tools)) 24 | - A **code editor** of your choice (for example, [Visual Studio Code](https://code.visualstudio.com/)) 25 | 26 | ## Steps 27 | 28 | ### Step 1: Create a plugin 29 | 30 | You can create your plugin directly in the UXP Developer Tool. To do so, open the UXP Developer Tool and click **Create Plugin**. 31 | 32 | This opens a dialog where you can enter the details for your plugin: 33 | 34 |
35 | Screenshot of the create plugin dialog 36 |
The create plugin dialog
37 |
38 | 39 | In the dialog, enter the following information: 40 | 41 | | Field | Value | 42 | |--------------------------|-------------------| 43 | | Name | My First Plugin | 44 | | Host Application | Adobe InDesign | 45 | | Host Application Version | 18.5 | 46 | | Template | quick-starter | 47 | 48 | Then click **Select Folder** and choose a location on your machine where you want to create the plugin. 49 | 50 | The UXP Developer Tool will create a new folder with the name you specified in the location you specified. The folder will contain the following files: 51 | 52 | ``` 53 | My First Plugin 54 | ├── manifest.json 55 | ├── index.html 56 | └── index.js 57 | ``` 58 | 59 | ### Step 2: Run the plugin 60 | 61 | Now that you have created your plugin, you can run it in InDesign. 62 | 63 | First things first, you'll need to run InDesign. You can verify that UDT is connected to the app by checking the connected apps panel. 64 | 65 | Then, in the UXP Developer Tool, in the row for your plugin, click **⋯ → Load**: 66 | 67 |
68 | Screenshot of the UXP Developer Tool with the load button highlighted 69 |
The load button
70 |
71 | 72 | This will load your plugin into InDesign. You should see the plugin's panel appear in InDesign: 73 | 74 |
75 | Screenshot of InDesign with the plugin panel open 76 |
The plugin panel
77 |
78 | 79 | ### Step 3: Make a change 80 | 81 | Now that you have your plugin running in InDesign, let's make this plugin your own. 82 | 83 | Open the `index.html` file in your code editor. You should see the following code: 84 | 85 | ```html 86 | 87 | 88 | 89 | 90 | 91 |

Hello World!

92 | 93 | 94 | 95 | ``` 96 | 97 | This is the HTML code that defines the content of your plugin's panel. You can change it to whatever you want. 98 | 99 | For example, you could change the heading to say "My First Plugin": 100 | 101 | ```html 102 |

My First Plugin

103 | ``` 104 | 105 | Or you could add a paragraph below the heading: 106 | 107 | ```html 108 |

This is my first plugin.

109 | ``` 110 | 111 | To see your changes, you'll need to reload the plugin in InDesign. To do so, in the UXP Developer Tool, in the row for your plugin, click **⋯ → Reload**: 112 | 113 |
114 | Screenshot of the UXP Developer Tool with the reload button highlighted 115 |
The reload button
116 |
117 | 118 | 119 | 120 | If you make any changes to the `manifest.json` file, you'll need to fully unload and reload the plugin. To do so, in the UXP Developer Tool, in the row for your plugin, click **⋯ → Unload** and **⋯ → Load**: 121 | 122 | 123 | ## Next steps 124 | 125 | Congratulations! You have successfully created your first plugin. Next, we'll take a look at some of the concepts that are important for plugin development. 126 | -------------------------------------------------------------------------------- /src/pages/plugins/getting-started/load-plugin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AdobeDocs/uxp-indesign/ca701e5635baf08511aa5a747a74c14d9871fad0/src/pages/plugins/getting-started/load-plugin.png -------------------------------------------------------------------------------- /src/pages/plugins/getting-started/loaded-plugin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AdobeDocs/uxp-indesign/ca701e5635baf08511aa5a747a74c14d9871fad0/src/pages/plugins/getting-started/loaded-plugin.png -------------------------------------------------------------------------------- /src/pages/plugins/getting-started/reload-plugin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AdobeDocs/uxp-indesign/ca701e5635baf08511aa5a747a74c14d9871fad0/src/pages/plugins/getting-started/reload-plugin.png -------------------------------------------------------------------------------- /src/pages/plugins/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: UXP plugins in InDesign 3 | description: UXP plugins in InDesign 4 | keywords: 5 | - UXP Plugins 6 | - What are UXP plugins 7 | contributors: 8 | - https://github.com/padmkris123 9 | --- 10 | 11 | # UXP Plugins 12 | 13 | InDesign v18.5 introduces UXP plugins. 14 | 15 | With plugins, you can build extensive UI and more interacting components for the users. Read the [introduction to scripts and plugins](../introduction/next-steps/script-and-plugin/) to understand if plugins are the right fit for your use case before proceeding. 16 | 17 | This section will help you write your first plugin, and explain important concepts required to understand how plugins work. 18 | 19 | -------------------------------------------------------------------------------- /src/pages/plugins/tutorials/_tbd_best-practices/index.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ### Status: Needs work (P2) 6 | 7 | Author: Extensibility team (@pakrishn)

8 | Work with ID team

9 | 10 | 11 | # 12 | 13 | 20 | -------------------------------------------------------------------------------- /src/pages/plugins/tutorials/_tbd_plugin_icons: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | ### Status: Needs work (P2) 5 | 6 | Author: Extensibility team (@pakrishn)

7 | Work with ID team

8 | 9 | 10 | # -------------------------------------------------------------------------------- /src/pages/plugins/tutorials/adding-command-entrypoints/command-plugin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AdobeDocs/uxp-indesign/ca701e5635baf08511aa5a747a74c14d9871fad0/src/pages/plugins/tutorials/adding-command-entrypoints/command-plugin.png -------------------------------------------------------------------------------- /src/pages/plugins/tutorials/adding-command-entrypoints/index.md: -------------------------------------------------------------------------------- 1 | # Adding command entrypoints to your plugin 2 | 3 | Command entrypoints are the most common type of entrypoint. They allow you to add commands to the InDesign user interface. When the user runs a command, your plugin can perform a variety of actions, such as opening a dialog and changing the document. 4 | 5 | ## Adding a command entrypoint to the manifest 6 | 7 | In your `manifest.json` file, register a new `command`-type entrypoint: 8 | 9 | ```json 10 | { 11 | // ... 12 | entrypoints: [ 13 | { 14 | type: "command", 15 | id: "myCommand", 16 | label: "My Command", 17 | } 18 | ] 19 | } 20 | ``` 21 | 22 | This will add a new command entrypoint with the ID `"myCommand"` (this will be important later) to your plugin. It will show up as _My Command_ in the InDesign user interface. 23 | 24 | ## Adding a function to handle the command 25 | 26 | Now, we need some code that gets run when the command gets triggered. In your `index.js` file, add a function to handle the command: 27 | 28 | ```js 29 | function myCommandHandler() { 30 | // Do something 31 | } 32 | ``` 33 | 34 | Note that the name of the function doesn't matter. You can name it whatever you want. 35 | 36 | ## Associating the command entrypoint with the command handler 37 | 38 | There are two ways to add a command entrypoint to your plugin's code. 39 | 40 | ### Method 1: Setup entrypoints using the UXP API 41 | 42 | In your JavaScript code (for example, in your `index.js`, add the following code: 43 | 44 | ```js 45 | const { entrypoints } = require("uxp"); 46 | 47 | entrypoints.setup({ 48 | commands: { 49 | myCommand: myCommandHandler 50 | } 51 | }); 52 | ``` 53 | 54 | Note that `myCommand` is the ID of the command entrypoint we registered in the manifest. 55 | 56 | 57 | 58 | You can only call `entrypoints.setup()` once. If you call it more than once, it will throw an error. If you need to add more entrypoints, you need to add them all at once. 59 | 60 | ### Method 2: JavaScript-based main file 61 | 62 | Another method you can use that's especially useful for smaller plugins that only contain command entrypoints is to use a JavaScript-based main file (instead of an HTML file). 63 | 64 | To do so, in your `manifest.json` file, set the `main` property to the path of your `index.js` file: 65 | 66 | ```json 67 | { 68 | // ... 69 | main: "index.js", 70 | // ... 71 | } 72 | ``` 73 | 74 | Then, in your `index.js` file, add the following code: 75 | 76 | ```js 77 | module.exports = { 78 | commands: { 79 | myCommand: myCommandHandler 80 | } 81 | }; 82 | ``` 83 | 84 | Note that `myCommand` is the ID of the command entrypoint we registered in the manifest. 85 | 86 | Now, the HTML file is no longer needed. You can delete it. This is especially useful when converting scripts to plugins. 87 | 88 | ## Conclusion 89 | 90 | That's it! You've added a command entrypoint to your plugin. When you now load your plugin, you should see a new command called _My Command_ in the **Plugins** menu: 91 | 92 |
93 | Screenshot of the Plugins menu with the My Command menu item highlighted 94 |
The My Command menu item
95 |
96 | 97 | When you click on it, the `myCommandHandler()` function will run. 98 | -------------------------------------------------------------------------------- /src/pages/plugins/tutorials/importing-modules/index.md: -------------------------------------------------------------------------------- 1 | # JavaScript Modules 2 | 3 | The beauty of plugins is that it allows you to have more than just one JavaScript file. And in order to manage elaborate projects, you might want to modularize your code and manage it from separate JS files. 4 | 5 | To make use of modules within your code, you will need a mechanism to include the modules within other files. JavaScript has never had the `#include` syntax of C and its descendants, nor the `import` of Python. Instead, the `require` statement helps you do so. 6 | 7 | Here's how to use them: 8 | 9 | 10 | 11 | #### index.js 12 | ```js 13 | // specify the path of the JS file that has the required module 14 | const { foo, bar } = require("./includeMe.js"); 15 | . . . 16 | const result = foo(3); // will return 6 17 | ``` 18 | 19 | #### includeMe.js 20 | ```js 21 | // declare the module 22 | function foo(someNumber) { 23 | return(someNumber * 2); 24 | } 25 | function bar() { 26 | return(42); 27 | } 28 | module.exports = { 29 | foo, 30 | bar 31 | } 32 | ``` 33 | 34 | The `require` in UXP isn't as robust as some other include systems (e.g., it doesn't search any global paths to find the file you want), but careful use of relative paths allows you to structure your plugin directory the way you want. For example, you can have a subdirectory named `lib` and require a file in there this way: 35 | 36 | `const { foo, bar } = require("./lib/includeMe.js");` 37 | 38 | -------------------------------------------------------------------------------- /src/pages/plugins/tutorials/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Plugin tutorials 3 | description: Tutorials for UXP plugins 4 | keywords: 5 | - UXP plugin tutorials 6 | contributors: 7 | - https://github.com/padmkris123 8 | --- 9 | 10 | # Tutorials 11 | 12 | This section contains tutorials that will help you get started with plugin development. They will walk you step by step through solving common tasks for plugin development. 13 | There is no need to follow the tutorials in order. You can jump around and follow the ones that interest you. 14 | Next to the tutorials, we also have more in-depth guides and resources on more advanced topics. You can find them in the [advanced topics section](../advanced/index.md). 15 | -------------------------------------------------------------------------------- /src/pages/plugins/tutorials/inter-plugin-comm/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Inter Plugin Communication 3 | description: Communicate to another plugin 4 | keywords: 5 | - UXP ipc 6 | - inter plugin 7 | contributors: 8 | - https://github.com/padmkris123 9 | --- 10 | 11 | # Inter Plugin Communication 12 | 13 | UXP allows communication between plugins that are installed in the same application. 14 | 15 | This is particularly handy when you know a certain task is already automated by another plugin and you would like to invoke it instead of duplicating the effort. But make sure the user is not caught by surprise. Your plugin should call out such dependencies to ensure flawless functioning of your plugin. 16 | 17 | The `Plugin Manager` module provides APIs that will help establish the connection. But before we take a look at an example, be sure to be well-versed in these topics 18 | - [Plugin entrypoints](../../concepts/entry-points/) 19 | - [Manifest permission module](../../concepts/manifest/#permissionsdefinition) 20 | 21 | Additionally, you will need 22 | - A basic knowledge of the plugin you are going to communicate with. This includes: 23 | - the plugin `id` 24 | - available `entrypoints` 25 | - the structure of arguments to be passed (if applicable) 26 | - `enablePluginCommunication` permission for your plugin 27 | 28 | ## System requirements 29 | Please make sure your local environment uses the following application versions before proceeding. 30 | - InDesign v18.5 or higher 31 | - UDT v1.9.0 or higher 32 | - Manifest version v5 or higher 33 | 34 | ## Example 35 | 36 | **Caller Plugin** 37 | 38 | 39 | 40 | #### manifest 41 | ```json 42 | { 43 | "requiredPermissions": { 44 | "ipc": { 45 | "enablePluginCommunication": true 46 | } 47 | } 48 | } 49 | ``` 50 | 51 | #### JavaScript 52 | ```js 53 | const { pluginManager } = require("uxp"); 54 | function communicateWithAnotherPlugin() { 55 | try { 56 | const allPlugins = pluginManager.plugins; 57 | const plugin = Array.from(allPlugins).find(plugin => plugin.id === "com.adobe.example.coolPlugin"); 58 | if (plugin && plugin.enabled) { 59 | console.log('All commands:', plugin.manifest.commands); 60 | console.log('All panels:', plugin.manifest.panels); 61 | 62 | /* Show the plugin panel; Note that panels can only be made visible -- you can't ask to hide the panel */ 63 | plugin.showPanel("simplePanel"); 64 | 65 | plugin.invokeCommand("simpleCommand"); 66 | 67 | /* Send an argument to the command */ 68 | const name = { 69 | firstName: "John", 70 | lastName: "Doe" 71 | }; 72 | plugin.invokeCommand("commandWithInput", name); 73 | } else { 74 | // prompt the user to install or enable the plugin before trying again 75 | } 76 | } catch (e) { 77 | console.error(e); 78 | } 79 | } 80 | ``` 81 | 82 | **Callee Plugin** 83 | 84 | 85 | 86 | #### manifest 87 | ```json 88 | { 89 | "id": "com.adobe.example.coolPlugin", 90 | "name": "The cool plugin", 91 | "main": "index.html", 92 | "entrypoints": [ 93 | { 94 | "type": "command", 95 | "id": "simpleCommand", 96 | "label": "Do your thing" 97 | }, 98 | { 99 | "type": "command", 100 | "id": "commandWithInput", 101 | "label": "Do you thing with inputs" 102 | }, 103 | { 104 | "type": "panel", 105 | "id": "simplePanel", 106 | "label": {"default": "Do your thing with UI"}, 107 | // ... 108 | } 109 | ], 110 | } 111 | ``` 112 | 113 | #### JavaScript 114 | ```js 115 | const { entrypoints } = require("uxp"); 116 | entrypoints.setup({ 117 | commands: { 118 | simpleCommand: () => doThing(), 119 | commandWithInput: (args) => doThing(args) 120 | }, 121 | panels: { 122 | simplePanel: { 123 | show({node} = {}) { /* ... */} 124 | } 125 | } 126 | }); 127 | 128 | function doThing(args) { 129 | console.log('Executed a command to do something cool', args && args.data[0]); 130 | } 131 | ``` 132 | 133 | ## Additional notes 134 | - You may not see any error if the entrypoint is not found. Therefore, we advise you to use `plugin.manifest.commands` and `plugin.manifest.panels` to select from the complete list of entrypoints. 135 | - Invoking a plugin installed/running on a different application is not possible 136 | - Passing methods in the argument object is also not possible 137 | - There is a possibility that the user might have disabled a particular plugin via Adobe Creative Cloud Desktop App. Check the plugin's availability by using `plugin.enabled` before invoking. 138 | 139 | 140 | ## Reference docs 141 | - [Plugin Manager](/indesign/uxp/reference/uxp-api/reference-js/Modules/uxp/Plugin%20Manager/PluginManager/) 142 | -------------------------------------------------------------------------------- /src/pages/plugins/tutorials/plugin-lifecycle-hooks/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Plugin Lifecycle events 3 | description: Use plugin life cycle events to carry out load/unload routines 4 | keywords: 5 | - plugin hooks 6 | - lifecycle 7 | contributors: 8 | - https://github.com/padmkris123 9 | --- 10 | 11 | 12 | # Plugin Lifecycle events 13 | You can detect whether or not your plugin panel is visible with the help of UXP APIs 14 | 15 | 16 | 17 | **IMPORTANT** 18 | 19 | This is only applicable to plugins with a panel. You cannot detect the execution of a command plugin via these hooks. 20 | Familiarize yourself with [plugin entrypoints](../../concepts/entry-points/) to know the difference between a command and a panel plugin. 21 | 22 | Also, for plugins that have multiple panels, you cannot differentiate between them, at present. 23 | 24 | 25 | ## Example 26 | 27 | 28 | 29 | #### JavaScript 30 | ```js 31 | const entrypoints = require("uxp").entrypoints; 32 | entrypoints.setup({ 33 | panels: { 34 | "mainPanel": { 35 | create(rootNode) { 36 | return new Promise(function (resolve, reject) { 37 | console.log('Plugin panel created'); 38 | resolve(); 39 | }); 40 | }, 41 | destroy(rootNode) { 42 | return new Promise(function (resolve, reject) { 43 | console.log('Destroy panel'); 44 | resolve(); 45 | }); 46 | } 47 | } 48 | } 49 | }); 50 | ``` 51 | 52 | #### manifest 53 | ```json 54 | { 55 | /**/ 56 | "entrypoints": [{ 57 | "type": "panel", 58 | "id": "mainPanel", 59 | "label": "My plugin", 60 | "minimumSize": { 61 | "width": 400, 62 | "height": 400 63 | }, 64 | "maximumSize": { 65 | "width": 800, 66 | "height": 800 67 | }, 68 | "preferredDockedSize": { 69 | "width": 400, 70 | "height": 400 71 | }, 72 | "preferredFloatingSize": { 73 | "width": 600, 74 | "height": 600 75 | } 76 | }] 77 | } 78 | ``` 79 | 80 | 84 | -------------------------------------------------------------------------------- /src/pages/plugins/tutorials/udt-deep-dive/images/connected-apps.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AdobeDocs/uxp-indesign/ca701e5635baf08511aa5a747a74c14d9871fad0/src/pages/plugins/tutorials/udt-deep-dive/images/connected-apps.png -------------------------------------------------------------------------------- /src/pages/plugins/tutorials/udt-deep-dive/images/create-plugin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AdobeDocs/uxp-indesign/ca701e5635baf08511aa5a747a74c14d9871fad0/src/pages/plugins/tutorials/udt-deep-dive/images/create-plugin.png -------------------------------------------------------------------------------- /src/pages/plugins/tutorials/udt-deep-dive/images/empty-workspace.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AdobeDocs/uxp-indesign/ca701e5635baf08511aa5a747a74c14d9871fad0/src/pages/plugins/tutorials/udt-deep-dive/images/empty-workspace.png -------------------------------------------------------------------------------- /src/pages/plugins/tutorials/udt-deep-dive/images/udt-debugger.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AdobeDocs/uxp-indesign/ca701e5635baf08511aa5a747a74c14d9871fad0/src/pages/plugins/tutorials/udt-deep-dive/images/udt-debugger.png -------------------------------------------------------------------------------- /src/pages/plugins/tutorials/udt-deep-dive/images/udt-failure-log.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AdobeDocs/uxp-indesign/ca701e5635baf08511aa5a747a74c14d9871fad0/src/pages/plugins/tutorials/udt-deep-dive/images/udt-failure-log.png -------------------------------------------------------------------------------- /src/pages/plugins/tutorials/udt-deep-dive/images/udt-gear-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AdobeDocs/uxp-indesign/ca701e5635baf08511aa5a747a74c14d9871fad0/src/pages/plugins/tutorials/udt-deep-dive/images/udt-gear-icon.png -------------------------------------------------------------------------------- /src/pages/plugins/tutorials/udt-deep-dive/images/udt-load-failed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AdobeDocs/uxp-indesign/ca701e5635baf08511aa5a747a74c14d9871fad0/src/pages/plugins/tutorials/udt-deep-dive/images/udt-load-failed.png -------------------------------------------------------------------------------- /src/pages/plugins/tutorials/udt-deep-dive/images/udt-load-successful.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AdobeDocs/uxp-indesign/ca701e5635baf08511aa5a747a74c14d9871fad0/src/pages/plugins/tutorials/udt-deep-dive/images/udt-load-successful.png -------------------------------------------------------------------------------- /src/pages/plugins/tutorials/udt-deep-dive/images/udt-logs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AdobeDocs/uxp-indesign/ca701e5635baf08511aa5a747a74c14d9871fad0/src/pages/plugins/tutorials/udt-deep-dive/images/udt-logs.png -------------------------------------------------------------------------------- /src/pages/plugins/tutorials/udt-deep-dive/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Adobe UXP Developer Tool 3 | description: The Adobe UXP Developer Tool makes it easy to create, load, debug, and package UXP-based plugins. 4 | keywords: 5 | - Load plugins 6 | - Debug plugins 7 | - UDT for plugins 8 | - UDT deep dive 9 | contributors: 10 | - https://github.com/padmkris123 11 | --- 12 | 13 | # Adobe UXP Developer Tool 14 | 15 | UDT can help you manage, build and test your plugins more efficiently. 16 | 17 | Assuming that you already have successfully installed UDT and created your first plugin using it, let's deep-dive into other capabilities it offers. 18 | 19 | 20 | ## Side pane 21 | The side pane lets you view some basic settings within UDT. 22 | 23 | 24 | ### Connected apps 25 | 26 | The left pane shows UXP-powered applications that are "connected" to the tool. UDT can only load plugins into applications that are up and running. As soon as you start or launch the apps you should be able to see them under 'Connected Applications'. 27 | 28 | ![Example of connected apps](./images/connected-apps.png) 29 | 30 | If for some reason you don't; it means UDT is unable to connect to the app. Make sure you're running a version that supports UXP. 31 | 32 | ### Preferences 33 | 34 | ![UDT gear icon sheet](./images/udt-gear-icon.png) 35 | 36 | Update your preferences, should you need to change the Service Port, which UDT uses to communicate with host applications or switch to a different theme. 37 | 38 | 39 | ### Logs 40 | 41 | Open the logs panel to view logs from UDT and the host application. 42 | 43 | ![UDT logs](./images/udt-logs.png) 44 | 45 | 46 | ## Read more 47 | 48 | 49 | 50 | [Plugin management](plugin-management/) 51 | 52 | Create or Add new plugins to your workspace 53 | 54 | 55 | 56 | [Plugin workflows](plugin-workflows/) 57 | 58 | Load, debug, watch your plugins into the app. 59 | 60 | 61 | 62 | [Working with React](working-with-react/) 63 | 64 | Advanced workflows when working with React-based plugins. 65 | -------------------------------------------------------------------------------- /src/pages/plugins/tutorials/udt-deep-dive/plugin-management.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Plugin Management 3 | description: Information on how to manage your list of plugins in the UXP Developer Tool. 4 | keywords: 5 | - Create plugins 6 | - Remove plugins 7 | - Load plugin 8 | - Add plugin into UDT 9 | contributors: 10 | - https://github.com/padmkris123 11 | --- 12 | 13 | # Plugin management 14 | 15 | The UXP Developer Tool allows you to create plugins from templates and add existing ones to your developer workspace. 16 | 17 | You can add as many plugins as you want in the UXP Developer Tool. You can either create the plugin folder structure and files from scratch and click the `Add Plugin` button in the Tool, or you can click the `Create Plugin` button to have it created for you, wizard-style. 18 | 19 | ## Creating a new plugin 20 | 21 | As demonstrated while writing your first plugin, "Create Plugin" lets you select a template and create a new plugin instantly. Just fill out the name and select a template. It's that simple! 22 | 23 | ## Adding an existing plugin 24 | 25 | You're not limited to creating new plugins from the Developer Tool – you can add plugins that you've already started as well. 26 | 27 | * Click **Add Plugin** 28 | * A file picker will appear. This picker expects you to pick the `manifest.json` in your plugin folder. 29 | * Once you close the picker, the plugin will be added to your workspace. 30 | 31 | ## Removing a plugin 32 | 33 | If you're building a lot of plugins, you may find that the workspace may be getting cluttered. You can remove a plugin from the workspace by checking the plugin's associated checkbox and clicking **Remove Selected** (in the upper-right corner). 34 | 35 | 36 | 37 | Removing a plugin from the Developer Tool's workspace does **not** remove the plugin from your storage. You can always add the plugin back later. 38 | 39 | 40 | Once you have at least one plugin added to your workspace, let's look at the actions you can perform on them in the [next section](./plugin-workflows). 41 | 42 | -------------------------------------------------------------------------------- /src/pages/plugins/tutorials/udt-deep-dive/plugin-workflows.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Plugin Workflows 3 | description: Row actions that can be performed on each plugin. 4 | keywords: 5 | - Load plugins 6 | - Debug 7 | - Reload 8 | - Unload 9 | - Watch 10 | - Package 11 | - plugin in UDT 12 | contributors: 13 | - https://github.com/padmkris123 14 | --- 15 | 16 | # Plugin workflows 17 | 18 | Once you've added a plugin to your developer workspace, there are several things you can do with it. All of the following features are accessed via the **•••**/**Actions** dropdown associated with each plugin. 19 | 20 | ## Load plugin 21 | 22 | Plugins added to the developer workspace do not automatically get added to their supported host application. Instead, once you launch the host application, you should tell the plugin (**••• > Load**) to launch in the host. This allows you to use the marketplace version of your plugin while you're not doing active development, but load up the development version when you need to make a new version of the plugin. 23 | 24 | Plugins that load successfully will show a small green notification at the bottom of the screen indicating that the plugin was loaded. 25 | 26 | ![Load Successful](./images/udt-load-successful.png) 27 | 28 | If a plugin _fails_ to load, a small red notification will appear with a **Details** link. 29 | 30 | ![Load Failed](./images/udt-load-failed.png) 31 | 32 | Clicking the `Details` link in this message will show an error log indicating why the plugin failed to load: 33 | 34 | ![Failure Log](./images/udt-failure-log.png) 35 | 36 | Once your plugin is loaded, you'll typically use the **Reload** action if you need to see any changes in your plugin's behavior. However, if you make changes to your plugin's `manifest.json` file, you'll want to completely **Unload** and **Load** your plugin from scratch. 37 | 38 | 39 | ## Watching and Reloading 40 | 41 | Selecting the `Watch` item from the Actions menu causes the Developer Tool to watch for any changes in your code on disk. 42 | Whenever you make a change to a file in your project, UDT will reload your plugin automatically. This makes for a very rapid code->make mistakes->fix mistakes->reload cycle. 43 | 44 | You can also reload your plugin manually by selecting `Reload` from the Actions menu. If you have `Watch` enabled, you shouldn't have to do this. But some people are superstitious. 45 | 46 | However, for manifest changes, this action does _not_ refresh the changes. For that, you should **Unload** and **Load** the plugin again. 47 | 48 | ## Debug your plugin 49 | 50 | You can also debug your plugin by choosing `Debug` from the Actions menu. This brings up a window like this: 51 | 52 | ![Debug Window](./images/udt-debugger.png) 53 | 54 | In this debugger (which resembles the Chrome Developer tool) you can look at the console log, and do the usual debugger things such as setting breakpoints, stepping into and out of functions, walking through code, inspecting elements, and more. 55 | 56 | You may also instruct to "break on start" when debugging your plugins. The plugin will immediately break into the debugger when it is loaded so that you can trace through the plugin's initialization routines. Select `More` from the Actions menu and check on 'Break on start'. 57 | 58 | Once you're done with debugging, you can close the debugger window. 59 | 60 | ## Package your plugins for distribution 61 | 62 | Once you've got a plugin that's ready for sharing, after it's been thoroughly polished and debugged, you'll need to package it as a "ccx" file. 63 | - First, make sure you get a plugin ID from the [Developer Distribution portal](https://developer.adobe.com/developer-distribution/creative-cloud/docs/guides/plugin_id/) website before packaging your plugin for distribution. 64 | - Create a ccx file by choosing the `Package` option in the Actions menu. 65 | - Select a folder to store the ccx file. Note that the plugin package will always be named after the plugin's ID. 66 | 67 | To find more details about distributing your plugin, see [Sharing Your Plugin](../../../introduction/next-steps/distribution/). 68 |



69 | 70 | --- 71 | 72 | The **Advanced** section allows you to specify the plugin's build folder, relative to its `manifest.json` file. This is particularly useful when [working with React](./working-with-react/) or other bundlers. 73 | 74 | -------------------------------------------------------------------------------- /src/pages/plugins/tutorials/udt-deep-dive/working-with-react.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Working with framework 3 | description: UDT setup for frameworks 4 | keywords: 5 | - Frameworks 6 | - React plugin 7 | - Vue 8 | - Svelte 9 | contributors: 10 | - https://github.com/padmkris123 11 | --- 12 | 13 | # Working with React 14 | 15 | When working with React, other frameworks, or bundlers like Webpack and Parcel, you'll need to understand how to effectively use them inside the developer tool. There are various options available to you, depending on your workflow needs. 16 | 17 | ## Adding a plugin to the workspace 18 | 19 | In this particular scenario, you'll essentially have _two_ `manifest.json` files. One will be in your plugin's source code directory, and the other will be in your plugin's distribution directory. 20 | 21 | You can load either one of these, but you need to be aware of the differences. 22 | 23 | * Adding a plugin using the distribution `manifest.json` means that you're loading the plugin from the distribution folder entirely. If your plugin build steps involve removing and recreating the distribution folder, or cleaning all the files within the folder, your plugin may not reload correctly in the developer tool. 24 | * Adding a plugin using the source `manifest.json` is the preferred option, but you'll also need to edit the plugin's options. Open **••• > Options**, click **Advanced**, and then enter the _relative_ path (from the `manifest.json` file you selected) to your plugin's distribution folder. This will load the plugin in the same manner as the previous point, but any build steps that remove or recreate the distribution folder won't impact reloading the plugin in the developer tool. 25 | 26 | Another important note is that if you're adding a plugin that uses a bundler or framework make sure you install its dependencies by running `npm install` or `yarn install`. The Developer Tool will not do this for you. 27 | 28 | ## Watching your plugin 29 | 30 | When using bundlers or frameworks, you'll typically have a build step that watches your plugins for changes. The developer tool does not know about your build steps, so if you want the developer tool to reload automatically when changes are detected, you'll need to: 31 | 32 | * Run your plugin `watch` build process in a terminal 33 | * **••• > Watch** the desired plugin from the Developer Tool 34 | 35 | When your `watch` build process detects a change, it'll rebuild the plugin, and this will cause the Developer Tool to see the resulting build changes and reload the plugin in the host. 36 | 37 | -------------------------------------------------------------------------------- /src/pages/resources/_tbd_troubleshooting/index.md: -------------------------------------------------------------------------------- 1 | 19 | 20 | -------------------------------------------------------------------------------- /src/pages/resources/fundamentals/apis/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Understanding UXP APIs 3 | description: The difference between UXP core and host-specific APIs 4 | keywords: 5 | - APIs 6 | - UXP core 7 | - DOM APIs 8 | - InDesign APIs 9 | contributors: 10 | - https://github.com/padmkris123 11 | --- 12 | 13 | # APIs within UXP 14 | 15 | We assume that you have been able to write your first [script](../../../scripts/getting-started/) or [plugin](../../../plugins/getting-started/) successfully by now. For writing more complex tasks, you will need access to more APIs. But first, let's understand what types of APIs are available and where to find them. 16 | 17 | The UXP platform has two main constituents 18 | 1. Core UXP APIs 19 | 2. Host-specific APIs 20 | 21 | You will see a few examples of these APIs in the [recipes](../../recipes/) but for now, just try and understand the difference between them. 22 | 23 | ## UXP Core APIs 24 | These APIs enable you to create user interfaces, perform file operations, make network calls, etc. 25 | 26 | The method to mount or use these APIs may vary. Many of them are directly available in the global scope, such as [Crypto](/indesign/uxp/reference/uxp-api/reference-js/Global%20Members/Crypto/) and [Documents](/indesign/uxp/reference/uxp-api/reference-js/Global%20Members/HTML%20DOM/Document/). But for certain modules, you first need to seek permission in the manifest (for plugins) or mount it specifically using `require()`. For example, `require(os)` or `require('uxp').shell`. 27 | 28 | ## Host-specific APIs 29 | These APIs are meant for modifying or interacting with the document. 30 | 31 | 32 | 33 | **IMPORTANT**

34 | 35 | Note that these are also referred to as **Document Object Model (DOM) APIs** and **Object Model View (OMV)**. Throughout our documentation, we will use InDesign APIs, DOM APIs or OMV interchangeably.

36 | 37 | Also, keep in mind that, these should **not** be confused with the HTML DOM which serves your plugin/script UI. 38 | 39 | You will learn more about the mounting technique in the [InDesign API](../dom-versioning/) topic. 40 | 41 | ## Example 42 | 43 | Let's imagine you want to write a script/plugin that 44 | 1. Reads a text from a file in the user's system. 45 | 2. Adds the text to the document. 46 | 3. And, applies certain modifications to it. 47 | 48 | For Step #1, since you would like to access the user's file system, you will use the UXP API's `localFileSystem` or `fs` module.

49 | In Steps #2 and 3, since you need to update the document, you will use the DOM APIs. 50 | 51 | ## Updates and releases 52 | 53 | We are still evolving the API surface and future releases will support more capabilities. Therefore, each release will have updates to both - DOM and UXP APIs. 54 | 55 | The [What's new](../../../changelog) section, lists all the new features, changes, and fixes carried by the latest release. The DOM APIs are versioned as per the application version. However, you need to pay attention to the UXP version associated with each release. 56 | 57 | When your plugin/script intends to use a specific UXP API, the host application must support that version of UXP. For example, InDesign v18.5 supports UXP v7.1, but if you use an API from UXP v7.2, your plugin/script will not work and lead to unexpected errors. Pay attention to the minimum compatible versions of UXP and the host application called out in the API references, examples and samples. 58 | 59 | To determine the minimum UXP version supported by the application, you have a couple of options 60 | 1. In UDT, once you have InDesign running and it appears under 'Connected apps', you will see the UXP version displayed along with the InDesign version number. 61 | 2. Programmatically, you can query the host information using UXP APIs. Use the example from [this recipe](../../recipes/host-info). 62 | 3. [What's new](../../../changelog) section, will mention the UXP version number for each release. 63 | -------------------------------------------------------------------------------- /src/pages/resources/fundamentals/dom-versioning/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: InDesign DOM APIs 3 | description: DOM APIs and way to mount it. 4 | keywords: 5 | - DOM Versions 6 | - InDesign DOM 7 | contributors: 8 | - https://github.com/padmkris123 9 | --- 10 | 11 | # InDesign DOM APIs 12 | InDesign APIs (aka Document Object Model DOM or OMV) is used to create and modify the application document and content. 13 | 14 | 15 | 16 | **Prior to v18.4**, the InDesign DOM was available in the global space by default. 17 | 18 | **Starting v18.4**, InDesign DOM is available only as a JavaScript module and should be retrieved on a need basis using `require()`. 19 | 20 | To access the InDesign DOM APIs from v18.4 onwards, use 21 | 22 | ```js 23 | const myInDesign = require("indesign"); 24 | const app = myInDesign.app; 25 | ``` 26 | 27 | ## DOM version 28 | DOM versioning refers to the specific version of InDesign Document Object Model. By specifying a version, you can ensure that your script/plugin remains forward compatible, which means it will work with newer versions of InDesign, even if DOM has changed in subsequent releases. 29 | 30 | The available DOM versions as of today are **3.0, 4.0, 5.0, 6.0, 7.0, 7.5, 8.0, 9.0, 10.0, 10.1, 10.2, 11.0, 11.2, 11.3, 11.4, 12.0, 12.1, 13.0, 13.1, 14.0, 15.0, 15.1, 16.0, 16.1, 16.2, 17.0, 18.0** 31 | 32 | To know which version of DOM API your app is currently using, you can use 33 | ```js 34 | const myInDesign = require("indesign"); 35 | const app = myInDesign.app; 36 | console.log(app.scriptPreferences.version); 37 | ``` 38 | 39 | To switch to a particular version of DOM API, use 40 | ```js 41 | const myInDesign = require("indesign-16.1"); 42 | ``` 43 | The above will make sure that going forward you will be using v16.1 DOM APIs. 44 | 45 | **NOTE** that if you retrieved a specific DOM version (let's assume 'A') and then did `require("indesign")`, it will fetch the same DOM version 'A'. For example, 46 | 47 | ```js 48 | const inDesignAppV17 = require("indesign-17.0").app; 49 | const inDesignApp = require("indesign").app; 50 | 51 | console.log(`Versions: ${inDesignAppV17.scriptPreferences.version} and ${inDesignApp.scriptPreferences.version} will be v17.0`); 52 | ``` 53 | 54 | Also note that you cannot work with two different DOM versions at the same time. `require("indesign");` assumes that there will be no further change in the DOM version. In the below example, the object `inDesignV17` will be 'undefined'. 55 | ```js 56 | const inDesign = require("indesign"); 57 | const inDesignV17 = require("indesign-17.0"); 58 | ``` 59 | 60 | Once you have the right DOM API version, use the [API reference](/indesign/dom/api/) to access available objects, methods etc. -------------------------------------------------------------------------------- /src/pages/resources/fundamentals/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Fundamentals 3 | description: 4 | contributors: 5 | - https://github.com/padmkris123 6 | --- 7 | 8 | # Fundamentals 9 | 10 | You must read the topics under this section to grasp a good understanding of UXP as a platform. 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/pages/resources/fundamentals/manifest/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Manifest for scripts and plugins 3 | description: Explains how permission module works for scripts and plugins 4 | keywords: 5 | - manifest for scripts 6 | - manifest concept 7 | contributors: 8 | - https://github.com/padmkris123 9 | --- 10 | 11 | # UXP manifest 12 | 13 | Manifest is a significant underlying concept in UXP development. Simply put, it is a set of configurations to make your script or plugin work correctly. 14 | 15 | This tutorial's intention is only to make you aware of how scripts and plugins are influenced by manifest under the hood so that you can interpret the samples and recipes easily. 16 | 17 | In the case of plugins, it is mandatory to set up these configurations with the help of a `manifest.json` file. 18 | 19 | In scripts, however, these configurations are fixed and invisible. Almost as if the manifest is non-existent. You can not and do not need to manage it explicitly. 20 | 21 | ## Permission module for Scripts 22 | 23 | One of the key modules in the manifest that drives the access and working of many APIs is the 'permission' module. We elaborated on the meaning of each permission and the various options in great detail in the [plugin manifest section](../../../plugins/concepts/manifest/#permissionsdefinition). And for the sake of completeness, the table below summarizes the permissions implicitly defined for **scripts**. 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 |
Permission moduleValueDescription
clipboard"readAndWrite"Allows you to read from and write to the clipboard.
localFileSystem"fullAccess"Enables full file system access.
network"all"Allows access to network
webviewanyAccess to any domain
launchProcessanyFull access to launch applications and files
allowCodeGenerationFromStringsfalseNot applicable for scripts.
66 | 67 | **Note:** The permissions for scripts may appear to be more lenient compared to plugins, but plugins have their advantage. The details in the [introduction to scrips and plugins](../../../introduction/next-steps/script-and-plugin/) can help you determine a suitable match for your use case. 68 | -------------------------------------------------------------------------------- /src/pages/resources/fundamentals/measurements-and-positioning/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Measurement & positioning 3 | description: 4 | keywords: 5 | - 6 | contributors: 7 | - https://github.com/padmkris123 8 | --- 9 | 10 | # Measurements and positioning 11 | 12 | All items and objects in InDesign are positioned on the page according to the measurements you choose. It's helpful to know how the InDesign coordinate system works and what measurement units it uses. 13 | 14 | ### Coordinates 15 | InDesign, like every other page layout and drawing program, uses simple, two-dimensional geometry to set the position of objects on a page or spread. The horizontal component of a coordinate pair is referred to as x; the vertical component as y. You can see these coordinates in the Transform panel or Control when you select an object using the Selection tool. 16 | 17 | ![Transform panel](./transform-panel.png) 18 | 19 | 20 | 21 | Note that, 22 | - The coordinates are measured relative to the **current** location of the ruler's zero point. 23 | - In the vertical (or y) axis, coordinates below the zero point are positive numbers; coordinates above the zero point are negative numbers. 24 | - The coordinates for the location of a path point are returned in x and y order. You should set the coordinates of the path point, in the same order. 25 | - The coordinates of a bounding box of an object are represented in an array containing four coordinates. It is defined (in order) the top, left, bottom, and right edges of the bounding box (or y1, x1, y2,x2). 26 | 27 | ### Working with measurement units 28 | 29 | InDesign returns coordinates and other measurement values using the publication's current measurement units. However, in some cases, these units don't resemble the measurement values shown in the InDesign Transform panel. For example, if the current measurement system is picas, InDesign returns fractional values as decimals rather than using the picas-and-points notation used by the Transform panel. "1p6," for example, is returned as "1.5." InDesign does this because your scripts/plugins would have trouble trying to perform arithmetic operations using measurement strings; for instance, trying to add "0p3.5" to "13p4" produces an error while adding .2916 to 13.333 (the converted pica measurements) does not. 30 | 31 | If you are adding, subtracting, multiplying, or dividing specific measurement values, it is recommended to first set the corresponding measurement units, before the operation. In the end, you can set the measurement units back to whatever they were before. 32 | 33 | You can set measurement values using numbers (for example, 14.65) or strings (for example, "1p7.1"). If you use numbers, InDesign uses the publication's current units of measurement. If you send measurement strings (see the table below), InDesign uses the units of measurement specified in the string. 34 | 35 | Alternatively, you can use measurement overrides, like many of the sample scripts. A measurement override is a string containing a special character, as shown in the following table: 36 | 37 | 38 | 39 | | Override | Meaning | Example | 40 | |-----------|------------------------------------------------|---------| 41 | | c | Ciceros (add didots after the c, if necessary) | 1.4c | 42 | | cm | Centimeters | .635cm | 43 | | i (or in) | Inches | .25i | 44 | | mm | Millimeters | 6.35mm | 45 | | p | Picas (add points after the p, if necessary) | 1p6 | 46 | | pt | Points | 18pt | 47 | -------------------------------------------------------------------------------- /src/pages/resources/fundamentals/measurements-and-positioning/transform-panel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AdobeDocs/uxp-indesign/ca701e5635baf08511aa5a747a74c14d9871fad0/src/pages/resources/fundamentals/measurements-and-positioning/transform-panel.png -------------------------------------------------------------------------------- /src/pages/resources/fundamentals/object-model/id-om.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AdobeDocs/uxp-indesign/ca701e5635baf08511aa5a747a74c14d9871fad0/src/pages/resources/fundamentals/object-model/id-om.png -------------------------------------------------------------------------------- /src/pages/resources/fundamentals/object-model/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Object model 3 | description: 4 | keywords: 5 | - Hierarchy 6 | - Object model 7 | contributors: 8 | - https://github.com/padmkris123 9 | --- 10 | 11 | # Object model 12 | 13 | Understanding the object model of an InDesign document is the key to finding the object you want to work with. 14 | 15 | The following figure is an overview of the InDesign object model. Objects in your publication are arranged in a specific order: frames are on pages, which are inside a document, which is inside the InDesign application object. This hierarchy of objects is referred to as the object model and these objects together make up an InDesign publication. 16 | 17 | ![InDesign object model](id-om.png) 18 | 19 | **NOTE** that the diagram isn't a comprehensive list of the objects available to InDesign; instead, it's a conceptual framework for understanding the relationships between the types of objects and the overall structure of how they are organized. 20 | 21 | 22 | The objects in the diagram are described briefly in the following section: 23 | ## Application 24 | 25 | | Term | What it represents | 26 | | ------------------------- | ---------------------------------------------------------------- | 27 | | Application _defaults_ | Application default settings, such as colors, paragraph styles, and object styles. Application defaults affect all new documents. | 28 | | Application _methods_ | JavaScript(Objects also haveExtend Script)The application can take actions such as finding and changing text, copying the selection, creating new documents, and opening libraries. | 29 | | Application _preferences_ | For example, text preferences, PDF export preferences, and document preferences. Many of the preferences objects also exist at the document level. Just as in the user interface, application preferences are applied to new documents. Document preferences change the settings of a specific document. | 30 | | Application _properties_ | The properties of the application, for example, the full path to the application, the locale of the application, and the user name. | 31 | 32 | 33 | ## Books 34 | A collection of open books. 35 | 36 | 37 | ## Libraries 38 | A collection of open libraries. 39 | 40 | 41 | ## Document 42 | An InDesign document 43 | 44 | 45 | | Term | What it represents | 46 | | ------------------------- | ---------------------------------------------------------------- | 47 | | Document defaults | Document default settings, such as colors, paragraph styles, and text formatting defaults. | 48 | | Document elements | For example, the stories, imported graphics, and pages of a document. The figure that precedes this table shows pages and stories because those objects are essential containers for other objects, but document elements also include rectangles, ovals, groups, XML elements, and any other type of object you can import or create. | 49 | | Document methods | Sample Scripts with UXP APIsThe documents can take actions such as closing a document, printing a document, and exporting a document. | 50 | | Document preferences | The preferences of a document, such as guide preferences, view preferences, and document preferences. | 51 | | Document properties | For example, the document filename, number of pages, and zero point location. | 52 | | Documents | A collection of open documents. | 53 | 54 | ### Pages or spreads 55 | The pages or spreads in an InDesign document. 56 | 57 | | Term | What it represents | 58 | | ------------------------- | ---------------------------------------------------------------- | 59 | | Page | A single page within the document. | 60 | | Page _items_ | Any object you can create or place on a page. There are many types of page items, such as text frames, rectangles, graphic lines, or groups. | 61 | 62 | 63 | ### Stories 64 | The text within an InDesign document. 65 | 66 | | Term | What it represents | 67 | | ------------------------- | ---------------------------------------------------------------- | 68 | | Text objects | Characters, words, lines, paragraphs, and text columns are examples of text objects in an InDesign story. | 69 | -------------------------------------------------------------------------------- /src/pages/resources/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Resources for developers 3 | description: Resources for developers to build UXP scripts and plugins 4 | keywords: 5 | - Deep dive 6 | - Fundamentals 7 | - How tos 8 | - Recipes 9 | - Contribute 10 | - Migration guides 11 | contributors: 12 | - https://github.com/padmkris123 13 | --- 14 | 15 | # Resources 16 | 17 | By now, we hope that you have already tried a simple script or plugin by following the getting-started guides. 18 | 19 | The resources here are meant for you to deep dive into UXP and build something more useful for real-world scenarios. These topics are mostly common to both - scripts and plugins, with minor variations sometimes. 20 | 21 | Start by reading the [fundamentals](./fundamentals/), and move to the [recipes](./recipes/) that aim to provide bite-size examples for common use cases. And then, explore the APIs in the [References](/indesign/uxp/changelog/) section. 22 | 23 | ## Contribute 24 | If you think there is an important topic that is missing, please contribute to the [sample repo](https://github.com/AdobeDocs/uxp-indesign-samples). You can call out the topic that is missing by creating a bug. Or, share your recipe with the community by creating a pull request. -------------------------------------------------------------------------------- /src/pages/resources/migration-guides/cep/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: CEP to UXP 3 | description: 4 | keywords: 5 | - CEP 6 | contributors: 7 | - https://github.com/padmkris123 8 | --- 9 | 10 | # CEP to UXP 11 | 12 | Migrate from [CEP panel](https://github.com/Adobe-CEP/CEP-Resources/blob/master/CEP_11.x/Documentation/CEP%2011.1%20HTML%20Extension%20Cookbook.md) to UXP by following the [migration Guide](https://github.com/Adobe-CEP/CEP-Resources/tree/master/UXP-Migration-Guide). 13 | 14 | -------------------------------------------------------------------------------- /src/pages/resources/migration-guides/extendscript/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: ExtendScript to UXP 3 | description: Migrate ExtendScript to UXP 4 | keywords: 5 | - ExtendScript 6 | contributors: 7 | - https://github.com/padmkris123 8 | --- 9 | 10 | # ExtendScript to UXP 11 | ExtendScript uses an older version of JavaScript (ES3). In contrast, UXP uses the V8 JavaScript engine which supports ES6; this has several notable features lacking in ExtendScript. 12 | 13 | Not all the newer features of ES6 are used and/or supported in the UXP world, but as an ExtendScript developer, you should familiarize yourself with ECMAScript ES6 so you can understand the sample code. 14 | 15 | This page goes over how ExtendScript can be rewritten in UXP script in simple steps. 16 | 17 | For scripts, 18 | 1. Save the file with `.idjs` extension. 19 | 2. Update the script for unsupported methods 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 35 | 41 | 47 | 48 | 49 | 50 | 53 | 62 | 71 | 72 | 73 | 74 | 77 | 81 | 85 | 86 | 87 | 88 | 91 | 95 | 99 | 100 | 101 | 102 | 105 | 109 | 113 | 114 | 115 | 116 | 118 | 120 | 122 | 123 | 124 | 125 | 127 | 129 | 131 | 132 | 133 | 134 |
DifferencesExtendScriptUXPApplicable To
subscript operator [ ]

33 | Collection objects returned by InDesign like documents and paragraphs will not support subscript operator [ ] to access element at a particular index. The alternative is to use the method by name item()Objects like app.selection which is of type Array will support subscript operator. 34 | 		36 | {` 37 | for (j = 0; j < app.selection[0].paragraphs.length; j++) { 38 | var item = app.selection[0].paragraphs[j]; 39 | } 40 | `} 42 | {` 43 | for (j = 0; j < app.selection[0].paragraphs.length; j++) { 44 | var item = app.selection[0].paragraphs.item(j); 45 | } 46 | `}All Versions
Object.constructor.name

51 | Object.constructor.name which is a standard property in JS will return an empty string ("") for DOM objects. Alternatively, use the object.constructorName property. 52 | 		54 | {` 55 | switch(myPageItem.constructor.name) { 56 | case "Rectangle": 57 | case "Oval": 58 | ... 59 | break; 60 | } 61 | `} 63 | {` 64 | switch(myPageItem.constructorName) { 65 | case "Rectangle": 66 | case "Oval": 67 | ... 68 | break; 69 | } 70 | `}Prior to v18.4
Comparison operators(== and ===)

75 | Comparison operators(== and ===) on InDesign DOM objects will always return false unless the objects have same reference. Instead use method equals() 76 | 		78 | {` 79 | if (myPath.pathType == PathType.closedPath) { ... } 80 | `} 82 | {` 83 | if (myPath.pathType.equals(PathType.closedPath)) { ... } 84 | `} All Versions
instanceof

89 | The instanceof keyword isn't supported for InDesign DOM objects. Instead using object.constructorName property. 90 | 		92 | {` 93 | if (app.selection[0].paragraphs[0].appliedParagraphStyle.parent instanceof ParagraphStyleGroup) { ... } 94 | `} 96 | {` 97 | if (app.selection[0].paragraphs.item(0).parent.constructorName == "ParagraphStyleGroup") { ... } 98 | `} Prior to v18.4
Global object 'document'

103 | Global object 'document' is not supported now. Instead, use app.activeDocument 104 | 		106 | {` 107 | document.findText() 108 | `} 110 | {` 111 | app.activeDocument.findText() 112 | `} All Versions
ActiveScript app.activeScript 117 | app.activeScript returns the current running script as a file object on which you can access other properties. 119 | app.activeScript returns the path of the current script as a string. No other properties can be accessed on app.activeScript 121 | Prior to v18.4
Fetching the InDesign Server arguments passed to a script. 126 | var myArg = app.scriptArgs.getValue("*argumentName*"); 128 | let arguments = script.args; Learn More 130 | v18.4 Onwards
135 | -------------------------------------------------------------------------------- /src/pages/resources/migration-guides/index.md: -------------------------------------------------------------------------------- 1 | # Migration Guides 2 | 3 | Migrate from other extensibility platforms to UXP. 4 | 5 | If you have an existing ExtendScript or CEP extension that you would like to port to UXP this section provides a few guidelines that will help you during the process. -------------------------------------------------------------------------------- /src/pages/resources/recipes/_recipe_template.md: -------------------------------------------------------------------------------- 1 | 7 | 8 | # Topic Heading 9 | 10 | 11 | 12 | 13 | 14 | 15 | Plugins and Scripts 16 | 17 | **In plugins**, lorem ipsum. 18 | 19 | **In scripts**, lorem ipsum. 20 | 21 | 22 | 23 | ## System requirements 24 | Please make sure your local environment uses the following application versions before proceeding. 25 | - InDesign v18.5 or higher 26 | - UDT v1.9.0 or higher 27 | - Manifest version v5 or higher 28 | 29 | 30 | ## Example 31 | 32 | 33 | 34 | 35 | #### HTML 36 | ```html 37 | ``` 38 | 39 | #### JavaScript 40 | ```js 41 | async function foo() { 42 | // do something 43 | } 44 | ``` 45 | 46 | #### manifest 47 | ```json 48 | ``` 49 | 50 | 51 | Screenshot illustrating the output (if applicable) 52 | 53 | ## Additional notes 54 | 55 | 56 | ## Reference material 57 | 58 | - 59 | 60 | -------------------------------------------------------------------------------- /src/pages/resources/recipes/_tbd_drag_n_drop.md: -------------------------------------------------------------------------------- 1 | # -------------------------------------------------------------------------------- /src/pages/resources/recipes/_tbd_promise.md: -------------------------------------------------------------------------------- 1 | 2 | link to some material 3 | soemthing that falls out of 4 | 5 | Example - phone notification 6 | 7 | 8 | ``` 9 | async function showDialog() { 10 | 11 | return new Promise((resolve, reject) => { 12 | try{ 13 | let dialog = createDialog(); 14 | document.body.appendChild(dialog).showModal(); 15 | 16 | const closeBtn = document.getElementById("close"); 17 | closeBtn.addEventListener("click", () => { 18 | console.log("clicked on the close btton"); 19 | dialog.close(); 20 | }) 21 | 22 | // add listeners on the dialog close and cancel and resolve/reject the promise returned in one of them. 23 | // or you can have a button done in the dialog and can resolve the promise on the click of the button, 24 | // but make sure that a promise is returned and that is resolved/rejected later else dialog wont show up. 25 | dialog.addEventListener("cancel", () => { 26 | console.log("dialog cancel called"); 27 | reject("dialog cancel called"); 28 | }); 29 | 30 | dialog.addEventListener("close", () => { 31 | console.log("dialog Close called"); 32 | resolve("dialog Close called"); 33 | }); 34 | } catch (e) { 35 | console.log(e); 36 | reject(e); 37 | } 38 | }) 39 | } 40 | 41 | // wait for the dialog to be closed 42 | await showDialog(); 43 | 44 | // Dialog creation and setting CSS styles for elements using anonymous method 45 | function createDialog() { 46 | const dialog = document.createElement("dialog"); 47 | // dialog.style.height = "200px"; 48 | // dialog.style.width = "600px"; 49 | 50 | dialog.style.color = "white"; 51 | 52 | const div = document.createElement("div"); 53 | div.style.display = "flex"; 54 | div.style.flexDirection = "column"; 55 | div.style.height = "300px"; 56 | div.style.width = "400px"; 57 | div.style.alignItems = "center"; 58 | 59 | const header = document.createElement("h2"); 60 | header.id = "head"; 61 | header.style.color = "white"; 62 | header.textContent = "Dialog Created by a script."; 63 | div.appendChild(header); 64 | 65 | 66 | const image = document.createElement("img"); 67 | image.src = "https://1000logos.net/wp-content/uploads/2021/04/Adobe-logo.png"; 68 | image.style.marginTop = "30px"; 69 | div.appendChild(image); 70 | 71 | const closeBtn = document.createElement("sp-button"); 72 | closeBtn.id = "close"; 73 | closeBtn.style.height = "30px"; 74 | closeBtn.textContent = "Close"; 75 | closeBtn.style.marginTop = "10px"; 76 | div.appendChild(closeBtn); 77 | 78 | 79 | dialog.appendChild(div); 80 | return dialog; 81 | } 82 | ``` 83 | 84 | 85 | https://javascript.info/promise-basics -------------------------------------------------------------------------------- /src/pages/resources/recipes/_tbd_react.md: -------------------------------------------------------------------------------- 1 | # -------------------------------------------------------------------------------- /src/pages/resources/recipes/_tbd_ui_icons.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 3 -------------------------------------------------------------------------------- /src/pages/resources/recipes/clipboard/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Clipboard 3 | description: Read and write content from and to the clipboard. 4 | keywords: 5 | - Read write 6 | - Clipboard sample 7 | contributors: 8 | - https://github.com/padmkris123 9 | --- 10 | 11 | # Clipboard 12 | Read and write content from and to the clipboard. 13 | 14 | 15 | ## System requirements 16 | Please make sure your local environment uses the following application versions before proceeding. 17 | - InDesign v18.5 or higher 18 | - UXP version v7.1 or higher 19 | - Manifest version v5 or higher 20 | 21 | 22 | 23 | 24 | Plugins and Scripts 25 | 26 | **In plugins**, you should seek permission for `clipboard` access in the manifest.

IMPORTANT: Read about the [manifest permissions](../../../plugins/concepts/manifest/#permissionsdefinition) before you proceed. 27 | 28 | **In scripts**, the permission for `clipboard` is fixed. You can ignore the manifest details in the following examples. Learn about these values in the [manifest fundamentals section](../../fundamentals/manifest/). 29 | 30 | 31 | ## Example 32 | 33 | 34 | 35 | #### JavaScript 36 | ```js 37 | async function foo() { 38 | const clipboard = navigator.clipboard; 39 | 40 | // Setting content for clipboard 41 | clipboard.setContent({ 'text/plain': "Test string to validate clipboard setContent" }) 42 | .then(() => { 43 | console.log("Data successfully set on clipboard"); 44 | }, (error) => { 45 | console.error("Error while setting data on clipboard:", error); 46 | }); 47 | 48 | 49 | // Reading from clipboard and printing 50 | clipboard.getContent() 51 | .then((result) => { 52 | console.log(`Data from clipboard: ${result["text/plain"]}`); 53 | }, (error) => { 54 | console.error("Error while reading data from clipboard:", error); 55 | }); 56 | } 57 | ``` 58 | 59 | #### manifest 60 | ```json 61 | { 62 | "requiredPermissions": { 63 | "clipboard": "readAndWrite" 64 | } 65 | } 66 | ``` 67 | 68 | ## Additional notes 69 | - Set the permission to "read" if your script/plugin only intends to read from the clipboard. 70 | 71 | 72 | ## Reference material 73 | - [Clipboard](/indesign/uxp/reference/uxp-api/reference-js/Global%20Members/Data%20Transfers/Clipboard/) APIs 74 | 75 | 76 | -------------------------------------------------------------------------------- /src/pages/resources/recipes/css-styling/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: CSS styling 3 | description: Techniques to style UI in UXP 4 | keywords: 5 | - CSS in UXP 6 | contributors: 7 | - https://github.com/padmkris123 8 | --- 9 | 10 | # CSS styling 11 | Spectrum is Adobe's design system, used across multiple applications. We recommend that you use Spectrum-based controls wherever possible for UI, for consistency. In fact, UXP offers a ready-made Spectrum-styled UI library. 12 | 13 | 14 | While you are exploring importing a stylesheet or making tweaks, you should keep in mind that **UXP is not a browser**. Its architecture does not (and will not) support all the CSS properties. For example, UXP cannot support grid layout innately. The ones that are supported are listed in the [API reference docs](./#reference-material). 15 | 16 | 17 | 18 | Scripts and plugins 19 | 20 | **In scripts**, since you don't have an HTML file as such, you will have to rely on adding styling via JavaScript to your UI components. 21 | 22 | **In plugins**, you have a lot more flexibility to manage CSS styling. You can add it via CSS classes or use inline styling or add it via JavaScript. 23 | 24 | ## System requirements 25 | Please make sure your local environment uses the following application versions before proceeding. 26 | - InDesign v18.5 or higher 27 | - UDT v1.9.0 or higher 28 | - Manifest version v5 or higher 29 | 30 | ## Example 31 | Example to add a background color to divs in three different ways: 32 | - CSS class 33 | - Inline style 34 | - Via JavaScript 35 | 36 | 37 | 38 | #### HTML 39 | ```html 40 |
41 |

Styling from CSS class

42 |
43 | 44 |
45 |

Inline styling

46 |
47 | 48 |
49 |

Styling from JS

50 |
51 | ``` 52 | 53 | #### JavaScript 54 | ```js 55 | const exampleDiv = document.getElementById("exampleDiv"); 56 | exampleDiv.style.backgroundColor = 'orange'; 57 | ``` 58 | 59 | #### CSS 60 | ```css 61 | .green { 62 | background-color: green; 63 | } 64 | ``` 65 | 66 | ## Additional notes 67 | - **CSS preprocessors**: UXP understands pure CSS only. Using CSS preprocessors such as SASS or SCSS is possible, provided you transpile your code to a CSS stylesheet before using it. Additionally, you will require a tool like Webpack to create your plugin bundle correctly and a slightly different way to [debug using UDT](../../../plugins/tutorials/udt-deep-dive/working-with-react/) (similar to React framework setup). 68 | 69 | 70 | ## Reference material 71 | - [CSS reference](/indesign/uxp/reference/uxp-api/reference-css/) 72 | - [Spectrum-styled components](/indesign/uxp/reference/uxp-api/reference-spectrum/) 73 | 74 | 75 | 76 | -------------------------------------------------------------------------------- /src/pages/resources/recipes/debug/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Debugging 3 | description: Simple ways to debug in UXP 4 | keywords: 5 | - console 6 | - alerts 7 | contributors: 8 | - https://github.com/padmkris123 9 | --- 10 | 11 | # Debugging 12 | 13 | While writing complex logic, you might be in the cycle of testing/debugging your code. Although UDT -> Debug lets you set breakpoints and debug your code using Chrome Debug Tool, these couple of techniques may also prove handy. 14 | 15 | ## System requirements 16 | Please make sure your local environment uses the following application versions before proceeding. 17 | - InDesign v18.5 or higher 18 | - UDT v1.9.0 or higher 19 | - Manifest version v5 or higher 20 | 21 | 22 | ## Console logs 23 | 24 | 25 | 26 | #### JavaScript 27 | ```js 28 | async function foo() { 29 | console.log("foo"); // writes "foo" to the UXP Developer Tool console. 30 | console.error("foo error"); // does the same thing, but the text is shown in red so errors are more easily seen. 31 | } 32 | ``` 33 | 34 | ## Alerts 35 | Create a modal dialog that pauses the execution of your script/plugin until you dismiss it. 36 | 37 | 38 | 39 | #### JavaScript 40 | 41 | ```js 42 | function alert(msg) { 43 | const { app } = require("indesign"); 44 | const dialog = app.dialogs.add(); 45 | const col = dialog.dialogColumns.add(); 46 | const colText = col.staticTexts.add(); 47 | colText.staticLabel = `${msg}`; 48 | 49 | dialog.canCancel = false; 50 | dialog.show(); 51 | dialog.destroy(); 52 | return; 53 | } 54 | 55 | async function foo() { 56 | alert("foo"); 57 | } 58 | ``` 59 | 60 | ## Additional notes 61 | - [UXP Alerts](/indesign/uxp/reference/uxp-api/reference-js/Global%20Members/HTML%20DOM/alert/) are currently not supported in InDesign. 62 | 63 | -------------------------------------------------------------------------------- /src/pages/resources/recipes/document-changes/Image2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AdobeDocs/uxp-indesign/ca701e5635baf08511aa5a747a74c14d9871fad0/src/pages/resources/recipes/document-changes/Image2.png -------------------------------------------------------------------------------- /src/pages/resources/recipes/document-changes/Image3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AdobeDocs/uxp-indesign/ca701e5635baf08511aa5a747a74c14d9871fad0/src/pages/resources/recipes/document-changes/Image3.png -------------------------------------------------------------------------------- /src/pages/resources/recipes/document-changes/Image4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AdobeDocs/uxp-indesign/ca701e5635baf08511aa5a747a74c14d9871fad0/src/pages/resources/recipes/document-changes/Image4.png -------------------------------------------------------------------------------- /src/pages/resources/recipes/document-changes/Image5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AdobeDocs/uxp-indesign/ca701e5635baf08511aa5a747a74c14d9871fad0/src/pages/resources/recipes/document-changes/Image5.png -------------------------------------------------------------------------------- /src/pages/resources/recipes/document-changes/Image6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AdobeDocs/uxp-indesign/ca701e5635baf08511aa5a747a74c14d9871fad0/src/pages/resources/recipes/document-changes/Image6.png -------------------------------------------------------------------------------- /src/pages/resources/recipes/document-changes/Image7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AdobeDocs/uxp-indesign/ca701e5635baf08511aa5a747a74c14d9871fad0/src/pages/resources/recipes/document-changes/Image7.png -------------------------------------------------------------------------------- /src/pages/resources/recipes/flyout-menu/flyoutmenu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AdobeDocs/uxp-indesign/ca701e5635baf08511aa5a747a74c14d9871fad0/src/pages/resources/recipes/flyout-menu/flyoutmenu.png -------------------------------------------------------------------------------- /src/pages/resources/recipes/flyout-menu/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | keywords: 3 | - API Documentation 4 | - UXP 5 | - Flyout Menu 6 | - Hamburger Menu 7 | title: Flyout Menus in UXP InDesign 8 | --- 9 | 10 | # Flyout Menus 11 | 12 | A flyout menu in InDesign is shown when the user clicks on the hamburger icon at the top right of your panel. You can use them to invoke operations that, for one reason or another, you don't want to take up real estate on your panel. 13 | 14 | ![Flyout Menu](./flyoutmenu.png) 15 | 16 | 17 | 18 | 19 | 20 | Plugins and Scripts 21 | 22 | **In plugins**, Supported. 23 | 24 | **In scripts**, Not Supported. 25 | 26 | ## System requirements 27 | 28 | Please make sure your local environment uses the following application versions before proceeding. 29 | - InDesign v20.0 or higher 30 | 31 | 32 | For flexibility, flyout menus are defined by supplying a JSON structure to UXP at runtime, as in the example below. 33 | 34 | ## Defining Flyout Menus 35 | 36 | Flyout menus are defined by a JSON structure that's passed to the UXP `entrypoints.setup` method. The JSON tells UXP what the menuitems are, and what to do when they're invoked. In the following example, there are three starship-related menuitems. When a menuitem is chosen by the user ("invoked"), UXP calls the plugin-defined function `handleFlyout`. 37 | 38 | ```js 39 | const { entrypoints } = require("uxp"); 40 | // the setup() function tells UXP how to handle 41 | // the entrypoints defined in your manifest.json file. 42 | entrypoints.setup({ 43 | panels: { 44 | my_panel_entrypoint: { 45 | show() { 46 | // put any initialization code for your plugin here. 47 | }, 48 | menuItems: [ 49 | {id: "setWarpFactor", label: "Warp Factor 1"}, 50 | {id: "raiseShields", label: "Shields Up"}, 51 | {id: "makeItSo", label: "Engage"} 52 | ], 53 | invokeMenu(id) { 54 | handleFlyout(id); 55 | } 56 | } 57 | } 58 | }); 59 | ``` 60 | 61 | ## Handling Flyouts 62 | 63 | The `handleFlyout` function (defined above) gets passed the flyout menu id. It can use this id to dispatch code to handle each menuitem, as shown below. 64 | 65 | ```js 66 | function handleFlyout(id) { 67 | switch (id) { 68 | case "setWarpFactor": { 69 | console.log("Aye captain"); 70 | break; 71 | } 72 | case "raiseShields": { 73 | console.log("Shields at 40 percent"); 74 | break; 75 | } 76 | case "makeItSo": { 77 | console.log("Warp drive is offline"); 78 | break; 79 | } 80 | } 81 | } 82 | ``` -------------------------------------------------------------------------------- /src/pages/resources/recipes/host-info/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Host information 3 | description: Find the host info to determine locale, os etc 4 | keywords: 5 | - Host API 6 | - code sample 7 | - locale 8 | contributors: 9 | - https://github.com/padmkris123 10 | --- 11 | 12 | # Host Environment 13 | Sometimes it's necessary to find out the host environment where a plugin or script is running. You can find a range of information such as the host OS, locale, home folder, installed application version, etc, by using UXP APIs. 14 | 15 | ## System requirements 16 | Please make sure your local environment uses the following application versions before proceeding. 17 | - InDesign v18.5 or higher 18 | - UDT v1.9.0 or higher 19 | - Manifest version v5 or higher 20 | 21 | ## Example 22 | 23 | 24 | #### JavaScript 25 | ```js 26 | async function foo() { 27 | const { host, versions } = require('uxp'); 28 | const osInfo = require('os'); 29 | 30 | console.log(`System information: ${osInfo.platform()} v${osInfo.release()}`); 31 | console.log(`Application: ${host.name} v${host.version} powered by ${versions.uxp}`); 32 | } 33 | ``` 34 | 35 | #### Output 36 | ``` 37 | System information: darwin v21.1.0 38 | Application: InDesign v18.5.0 powered by uxp-7.1.0 39 | ``` 40 | 41 | 42 | ## Reference material 43 | - [Host](/indesign/uxp/reference/uxp-api/reference-js/Modules/uxp/Host%20Information/Host/) APIs 44 | - [Versions](/indesign/uxp/reference/uxp-api/reference-js/Modules/uxp/Versions/Versions/) APIs 45 | - [OS](/indesign/uxp/reference/uxp-api/reference-js/Modules/os/OS/) APIs 46 | 47 | -------------------------------------------------------------------------------- /src/pages/resources/recipes/html-elements/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: HTML elements 3 | description: Ways to create HTML elements 4 | keywords: 5 | - User interface 6 | - UI in UXP 7 | contributors: 8 | - https://github.com/padmkris123 9 | --- 10 | 11 | # HTML Elements 12 | 13 | UXP core APIs let you create renditions but depending on whether you are writing scripts or plugins, you can create UI either by using HTML tags or just stick to JavaScript. 14 | 15 | 16 | 17 | Scripts and plugins 18 | 19 | **In scripts**, you only have the option to create UI from the `.idjs` script (JavaScript) file. Moreover, remember that scripts only allow you to create UI within a modal dialog. 20 | 21 | **In plugins**, a panel can be created both ways - using HTML tags or JavaScript. However, command plugins behave similarly to scripts and can create only modal dialogs from JavaScript. 22 | 23 | Let's take 'dialog' as an example and demonstrate both ways. You can extend the same principle to other HTML Elements 24 | 25 | ## System requirements 26 | Please make sure your local environment uses the following application versions before proceeding. 27 | - InDesign v18.5 or higher 28 | - UDT v1.9.0 or higher 29 | - Manifest version v5 or higher 30 | 31 | ## Using HTML 32 | 33 | 34 | 35 | 36 | #### HTML 37 | ```html 38 | 39 | 40 |
41 |

Well hello!

42 |

A dialog built using HTML tags

43 |
44 | 45 | ``` 46 | 47 | #### JavaScript 48 | ```js 49 | const showDialogBtn = document.getElementById("showDialog"); 50 | showDialogBtn.addEventListener("click", showDialog); 51 | function showDialog() { 52 | const dialog = document.getElementById("sampleDialog"); 53 | dialog.show(); 54 | dialog.addEventListener("cancel", () => { 55 | console.log("Dialog dismissed"); 56 | }); 57 | } 58 | ``` 59 | 60 | #### CSS 61 | ```css 62 | #sampleDialog > div { 63 | display: flex; 64 | flex-direction: column; 65 | height: 300px; 66 | width: 400px; 67 | align-items: center; 68 | } 69 | #sampleDialog > div > p { 70 | margin-top: 30px; 71 | } 72 | ``` 73 | 74 | ## Using only JavaScript 75 | 76 | 77 | 78 | #### HTML 79 | ```html 80 | 81 | ``` 82 | 83 | #### JavaScript 84 | ```js 85 | const showDialogBtn = document.getElementById("showDialog"); 86 | showDialogBtn.addEventListener("click", showDialog); 87 | function showDialog() { 88 | // create dialog 89 | const dialog = document.createElement("dialog"); 90 | 91 | const div = document.createElement("div"); 92 | div.style.display = "flex"; 93 | div.style.flexDirection = "column"; 94 | div.style.height = "300px"; 95 | div.style.width = "400px"; 96 | div.style.alignItems = "center"; 97 | 98 | const header = document.createElement("h1"); 99 | header.textContent = "Well hello!!"; 100 | div.appendChild(header); 101 | 102 | const para = document.createElement("p"); 103 | para.textContent = "A dialog built using HTML tags"; 104 | div.appendChild(para); 105 | 106 | dialog.appendChild(div); 107 | 108 | // show dialog 109 | document.body.appendChild(dialog).showModal(); 110 | 111 | dialog.addEventListener("cancel", () => { 112 | console.log("Dialog dismissed"); 113 | }); 114 | } 115 | ``` 116 | 117 | ![Sample dialog](sample-dialog.png) 118 | 119 | ## Additional notes 120 | - Creating dialogs within scripts can sometimes be a little tricky requiring you to handle the showing/hiding with async/promises. Check out the script tutorial on modal dialogs.

50 | (Create the Scripts folder if it does not already exist but this may require admin access.) 51 | 2. Alternatively, put the script inside the Scripts Panel folder in your preferences folder. Your preferences folder is at:

52 | macOS: `/Users//Library/Preferences/Adobe InDesign/Version 18.0//Scripts`

53 | Windows: `C:\Users\\AppData\Roaming\Adobe\InDesign\Version 18.0\\Scripts`

54 | Above, `` is your user name and `` references your location and language, for example, en_US. 55 | 56 | Save the script as a plain-text file with the `.idjs` file extension. 57 | 58 | ### Step 3: Run the script 59 | 60 | Now that you have created your script, you can run it in InDesign. Open the Scripts panel by selecting Window > Utilities > Scripts menu option. 61 | 62 | Find your saved script, and then double-click on the script name. You can also right-click on the script name and then click on `run` in the drop-down menu. 63 | 64 | ![Running a script](running_a_script.png) 65 | 66 | 67 | ![First script output](hello-world.png) 68 | 69 | ### Step 4: Make a change 70 | 71 | Now that you have your script running in InDesign, let's make a slight change to see how it works. 72 | 73 | To edit a script shown in the Scripts panel, select the script and choose 'Edit Script' from the menu. This should open your script in a text editor. 74 | 75 | Let's add the following, to update the font and size of the text 76 | 77 | ```js 78 | let myFont = app.fonts.item("Arial"); 79 | let myPage = myDocument.pages.item(0); 80 | 81 | var myParagraph = myTextFrame.paragraphs.item(0); 82 | myParagraph.appliedFont = myFont; 83 | myParagraph.pointSize = 48; 84 | ``` 85 | 86 | To see your changes, you'll need to save the changes and rerun the script by double-clicking on it from the Scripts panel. 87 | 88 | ![Updated first script output](hello-world-updated.png) 89 | 90 | ## Next steps 91 | 92 | Congratulations! You have successfully created your first script in InDesign. Next, we'll take a look at some of the concepts that are important for script development. 93 | -------------------------------------------------------------------------------- /src/pages/scripts/getting-started/running_a_script.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AdobeDocs/uxp-indesign/ca701e5635baf08511aa5a747a74c14d9871fad0/src/pages/scripts/getting-started/running_a_script.png -------------------------------------------------------------------------------- /src/pages/scripts/idjs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AdobeDocs/uxp-indesign/ca701e5635baf08511aa5a747a74c14d9871fad0/src/pages/scripts/idjs.png -------------------------------------------------------------------------------- /src/pages/scripts/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: UXP Powered Scripts for InDesign 3 | description: UXP Scripts Reference for InDesign 4 | # openAPISpec: /petstore.json 5 | --- 6 | 7 | # UXP Scripts 8 | 9 | **InDesign v18.0** onwards supports UXP scripts. 10 | 11 | Scripts are the quickest and easiest way to automate tasks. Read the introduction to [Scripts & Plugins](../introduction/next-steps/script-and-plugin/) to understand if scripts are the right fit for your use case before proceeding. 12 | 13 | This section will help you write your first script, and explain important concepts required to understand how scripts work. 14 | -------------------------------------------------------------------------------- /src/pages/scripts/tutorials/_tbd_create_dialog.md: -------------------------------------------------------------------------------- 1 | # -------------------------------------------------------------------------------- /src/pages/scripts/tutorials/arguments/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | keywords: 3 | - UXP Scripts Arguments 4 | - InDesign Server Arguments 5 | - DoScript Arguments 6 | --- 7 | # Passing Arguments 8 | 9 | Since InDesign v18.4 arguments/parameters can be passed to UXP scripts. 10 | 11 | You can use the `script.args` API to access the arguments passed to the script as an array. 12 | 13 | ## Usage 14 | Use the following to fetch the arguments passed to the script as an array: 15 | 16 | ```js 17 | const script = require("uxp").script; 18 | let argsArray = script.args 19 | ``` 20 | 21 | 22 | Arguments cannot be passed from the InDesign application directly. We can pass arguments to a script directly using InDesign Server only. 23 | 24 | ## Passing Arguments to InDesign Server 25 | You can pass arguments to InDesign Server through the `sampleclient`. 26 | 27 | Specify all the necessary information, such as the port number, script name, and arguments. Pass the arguments as a string where the `=` sign separates the key and the value. The `script.args` API returns an array of strings where the elements are the key/value pairs of arguments specified while executing the script. Here’s an example: 28 | 29 | **Command to Pass Arguments to IDS Scripts** 30 | ``` 31 | ../../../../mac/debug_cocoa64/sampleclient -host localhost:12345 testArgs.idjs "arg1=100" "arg2=200" 32 | ``` 33 | 34 | ```js 35 | const script = require("uxp").script; 36 | let ar = script.args; 37 | script.setResult(ar); 38 | ``` 39 | 40 | The result after executing this script on InDesign Server is shown on the client side. 41 | 42 | ``` 43 | Script result (LIST, 2): 44 | (std__string): arg1=100 45 | (std__string): arg2=200 46 | ``` 47 | 48 | ## Passing Arguments to InDesign Server/ InDesign App Via doScript() 49 | Passing arguments to another UXP script is possible with the help of the `doScript` API. 50 | 51 | You can pass a variable of type array as the third parameter of the doScript API call. Unlike on InDesign Server, `script.args` fetches the values of the arguments passed to the external script. Here’s an example: 52 | 53 | ```js 54 | //caller.idjs 55 | const myInDesign = require("indesign"); 56 | const app = myInDesign.app; 57 | const argsArray = [100,200]; 58 | app.doScript("PATH_TO_CALLED/called.idjs", myInDesign.ScriptLanguage.UXPSCRIPT, argsArray); 59 | ``` 60 | 61 | ```js 62 | //called.idjs 63 | const script = require("uxp").script; 64 | consoel.log(script.args); 65 | ``` 66 | 67 | ``` 68 | [console] 100,200 69 | ``` -------------------------------------------------------------------------------- /src/pages/scripts/tutorials/debug/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: UXP scripts in UDT 3 | description: Debug UXP scripts using UDT 4 | keywords: 5 | - UDT 6 | - Scripts logs 7 | - debug scripts 8 | contributors: 9 | - https://github.com/padmkris123 10 | --- 11 | 12 | # Debugging a Script 13 | This page goes over how to debug common problems you may run into. 14 | 15 | Quick tips for logs: 16 | * The UXP logs and `console.log` from scripts get written to the following locations

17 | For the InDesign versions below 19.2 -

18 | - macOS: `/Users//Library/Caches/UXPLogs/`

19 | - Windows: `C:\Users\\AppData\Local\Temp\UXPLogs`

20 | 21 | From InDesign 19.2 version onwards log paths have changed as below -

22 | - Adobe InDesign -

23 | macOS: `/Users//Library/Logs/Adobe/Adobe InDesign /`

24 | Windows: `C:\Users\\AppData\Roaming\Adobe\InDesign\Logs`

25 | - Adobe InDesign Server -

26 | macOS: `/Users//Library/Logs/Adobe/Adobe InDesign Server /`

27 | Windows: `C:\Users\\AppData\Roaming\Adobe\InDesign Server\Logs`

28 | 29 | If you find multiple files in the location, pick the one with the latest timestamp. 30 | * All the sample scripts have a try/catch block. Any exceptions raised from the InDesign side will be caught and dumped to the console or displayed on the dialog box. 31 | * Interpreter parsing errors go directly to the UXP logs. 32 | 33 | ## Debugging Script files using UDT 34 | 35 | Script files are executed in the same context as UXP plugins. Using [UXP Developer Tool](https://creativecloud.adobe.com/apps/download/uxp-developer-tools) (UDT) v1.7.0, you can step through and debug a script. 36 | 37 | You can debug script files in UDT by clicking on "Connected Apps", choosing InDesign, and then adding your script from there: 38 | 39 | ![step 1 of loading an InDesign script into UDT](step1.png) 40 | 41 | ![step 2 of loading an InDesign script into UDT](step2.png) 42 | 43 | Once you've loaded a script in, you can debug with a breakpoint activated. From here you set breakpoints or Step Into the script files. -------------------------------------------------------------------------------- /src/pages/scripts/tutorials/debug/step1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AdobeDocs/uxp-indesign/ca701e5635baf08511aa5a747a74c14d9871fad0/src/pages/scripts/tutorials/debug/step1.png -------------------------------------------------------------------------------- /src/pages/scripts/tutorials/debug/step2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AdobeDocs/uxp-indesign/ca701e5635baf08511aa5a747a74c14d9871fad0/src/pages/scripts/tutorials/debug/step2.png -------------------------------------------------------------------------------- /src/pages/scripts/tutorials/ids-object-model/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Object model in indesign server 3 | description: 4 | keywords: 5 | - InDesign server 6 | contributors: 7 | - https://github.com/padmkris123 8 | --- 9 | 10 | # UXP Scripts for InDesign Server 11 | Since InDesign v18.0, InDesign Server supports UXP Scripts as well. 12 | 13 | 14 | For running UXP Scripts in InDesign Server, you need both - InDesign and InDesign Server. It will be easier if you start by writing a script for InDesign and then make changes to the object model based on InDesign Server. Or else, to see the result of your script in InDesign Server, you would have to save the document and open it using InDesign, or export the document and view the exported file in another program (like Acrobat ® or Adobe Reader®). If you use InDesign to develop your InDesign Server scripts, you can reduce your development time dramatically. 15 | 16 | *Note: These examples assume that you are entering and running the script on the system on which InDesign Server is installed. For instructions on running scripts using the Test Client or SOAP commands, see [Introduction to InDesign Server](../../../introduction/_tbd_applications/) Development. 17 | 18 | 19 | ## Object Model 20 | 21 | 22 | 23 | The InDesign Object Model is described in the [Resources](../../../resources/fundamentals/object-model/) section. However, InDesign Server's object model differs slightly. 24 | 25 | Keep the following in mind when you write UXP scripts specifically for InDesign Server. 26 | 27 | ### Active document 28 | Many InDesign scripts refer to the front-most document in the user interface using the active document property of the application object. This property does not exist in InDesign Server. Instead, you can refer to documents by their index or name. 29 | 30 | ### Active script 31 | Many InDesign scripts refer to the currently running script to locate other script files or resources. InDesign Server does not have this property. Instead, locate the assets the script will need in specific locations on your server or system, then refer to those locations using complete file paths. 32 | 33 | ### Active windows and spreads 34 | InDesign scripts often refer to the active window or the active spread of the active window. These user-interface properties are not supported by InDesign Server. 35 | 36 | ### Selection 37 | As you would expect, InDesign Server does not have an object corresponding to the user selection. When you convert scripts from InDesign, you must remove any reference to the selection and provide references to objects based on other qualities (like the object id, index, or label). 38 | 39 | ### Dialogs 40 | InDesign can create modal dialog boxes using the dialog object and populate them with common user-interface controls, like checkboxes, text-entry fields, and radio buttons. InDesign Server does not support the dialog object or any user-interface controls. 41 | 42 | ### Copy and paste 43 | Because InDesign Server has no user interface, it also lacks the copy and paste features of InDesign. Instead of using copy and paste, use duplicate and move. Both methods can create copies of objects and can move objects from one document to another. 44 | 45 | -------------------------------------------------------------------------------- /src/pages/scripts/tutorials/index.md: -------------------------------------------------------------------------------- 1 | # Tutorials 2 | 3 | This section contains tutorials that will help you get started with script development. They will walk you step by step through solving common tasks for script development. 4 | There is no need to follow the tutorials in order. You can jump around and follow the ones that interest you. 5 | Next to the tutorials, we also have more in-depth guides and resources on more advanced topics. You can find them in the [advanced topics section](../advanced/index.md). 6 | -------------------------------------------------------------------------------- /src/pages/scripts/tutorials/script-result/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: UXP Script result 3 | description: Return a script result 4 | keywords: 5 | - script result 6 | contributors: 7 | - https://github.com/padmkris123 8 | --- 9 | 10 | # Setting Script Result 11 | 12 | Since InDesign v18.4, you can "set result" of a UXP script. 13 | 14 | After execution, a script can return a result, which could be used for evaluating the outcome of script execution. The result can be set using `script.setResult()` API as shown below. 15 | 16 | ## Setting the result 17 | The following line sets the result of the UXP script being executed to the string `"Hello World!"`. 18 | 19 | ```js 20 | // called.idjs 21 | const script = require("uxp").script; 22 | script.setResult("Hello World!"); 23 | ``` 24 | 25 | 26 | ## Reading the script result 27 | The below code snippets demonstrate how to read the script result of another script. 28 | 29 | ```js 30 | // caller.idjs 31 | const myInDesign = require("indesign"); 32 | const app = myInDesign.app; 33 | const resultOfCalledScript = app.doScript("PATH_TO_CALLED.IDJS/called.idjs", myInDesign.ScriptLanguage.UXPSCRIPT); 34 | console.log(resultOfCalledScript); 35 | ``` 36 | 37 | Scripts can return a result by setting the appropriate value using `setResult()` API. This result is returned to the entity that invoked this script. If this script was executed from InDesign's scripts panel, then the result is ignored. 38 | However, for scripts executed in InDesign Server, the result value is returned to the client that requested the script execution. If the script is forked by another script using `app.doScript()` API the result value set by 'called' script is returned to the 'caller' script, as illustrated above. 39 | 40 | 41 | The result after executing this script on InDesign Server is shown on the client side.  42 | 43 | ``` 44 | Script result (std__string): Hello World! 45 | ``` 46 | -------------------------------------------------------------------------------- /src/pages/scripts/tutorials/tips-tricks/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AdobeDocs/uxp-indesign/ca701e5635baf08511aa5a747a74c14d9871fad0/src/pages/scripts/tutorials/tips-tricks/1.png -------------------------------------------------------------------------------- /src/pages/scripts/tutorials/tips-tricks/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AdobeDocs/uxp-indesign/ca701e5635baf08511aa5a747a74c14d9871fad0/src/pages/scripts/tutorials/tips-tricks/2.png -------------------------------------------------------------------------------- /src/pages/scripts/tutorials/tips-tricks/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AdobeDocs/uxp-indesign/ca701e5635baf08511aa5a747a74c14d9871fad0/src/pages/scripts/tutorials/tips-tricks/3.png -------------------------------------------------------------------------------- /src/pages/scripts/tutorials/tips-tricks/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AdobeDocs/uxp-indesign/ca701e5635baf08511aa5a747a74c14d9871fad0/src/pages/scripts/tutorials/tips-tricks/4.png -------------------------------------------------------------------------------- /src/pages/scripts/tutorials/tips-tricks/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AdobeDocs/uxp-indesign/ca701e5635baf08511aa5a747a74c14d9871fad0/src/pages/scripts/tutorials/tips-tricks/5.png -------------------------------------------------------------------------------- /src/pages/scripts/tutorials/tips-tricks/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Tips and tricks for UXP scripts 3 | description: quick tips for working with scripts 4 | keywords: 5 | - idjs 6 | - code editor 7 | - scripts panel 8 | contributors: 9 | - https://github.com/padmkris123 10 | --- 11 | 12 | # Tips and tricks for UXP scripts 13 | Additional tips and tricks that will help you while developing UXP Scripts. 14 | 15 | ## Scripts panel 16 | 17 | The InDesign Scripts panel is the easiest and best way to run most InDesign scripts. If the panel is not already visible, you can display it by choosing Window > Utilities > Scripts. 18 | 19 | ### Editing scripts 20 | To edit a script shown in the Scripts panel, select the script and choose Edit Script from the Scripts panel menu. Alternatively, you can hold down the Option (macOS) or Alt (Windows) key and double-click the script's name. This opens the script in the editor you defined for the script file type. 21 | 22 | ### Open folder 23 | To open the folder containing a script shown in the Scripts panel, select the script and choose Reveal in Finder (macOS) or Reveal in Explorer (Windows). Alternatively, you can hold down the Command (macOS) or Ctrl-Shift (Windows) keys and double-click the script's name. The script folder opens in the Finder (macOS) or Explorer (Windows). 24 | 25 | ### Keyboard shortcuts 26 | 27 | To add a keyboard shortcut for a script, choose Edit > Keyboard Shortcuts, select `[Default]` from the Set menu, then choose Product Area > Scripts. A list of the scripts in your Scripts panel appears. Select a script and assign a keyboard shortcut as you would for any other InDesign feature. 28 | 29 | 30 | ## Run script during application startup 31 | 32 | To run a specific script when InDesign starts, put it inside a folder named "Startup Scripts" inside the Scripts folder 33 | - macOS - `/Applications/Adobe InDesign 2023/Scripts/startup scripts` 34 | - Windows - `%APPDATA%\Adobe\InDesign\Version 19.0\en_US\Scripts\startup scripts` 35 | 36 | Adjust the version number of InDesign in the above path based on your local environment. And create the folders if it does not already exist. 37 | 38 | 39 | ## Associate a Text-Editor for .idjs Files 40 | 41 | Associate idjs files to your preferred editor by following these steps: 42 | 43 | ### On Mac 44 | 1. Right-click any `.idjs` file 45 | 2. Click "Get Info" 46 | 3. Under "Open With", select an editor of your choice from the application list 47 | 4. If not visible in the list, click "Other", and select an editor from the "Applications" folder, and click "Add" 48 | 5. Click the button that says "Change All" and then "Continue". 49 | 50 | ![Mac Text-Editor Association for .idjs Files](1.png) 51 | 52 | ![Mac Text-Editor Association for .idjs Files](2.png) 53 | 54 | ![Mac Text-Editor Association for .idjs Files](3.png) 55 | 56 | ### On Windows: 57 | 1. Right-click any `.idjs` file 58 | 2. Click "Open with" 59 | 3. Select an editor of your choice from the application list 60 | 4. If not visible in the list, click "Choose another app", and if needed, "More apps" → "Look for another app on this PC" 61 | 5. Navigate to the directory containing the editor and select it 62 | 6. Enable "Always use this app to open .idjs files". 63 | 64 | ![Windows Text-Editor Association for .idjs Files](4.png) 65 | 66 | ![Windows Text-Editor Association for .idjs Files](5.png) 67 | 68 | -------------------------------------------------------------------------------- /src/pages/support/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Community - UXP for InDesign 3 | description: This is the community page of UXP for InDesign 4 | keywords: 5 | - Prerelease 6 | - Community 7 | - Forums 8 | - Support 9 | - feedback 10 | - bug 11 | --- 12 | 13 | 14 | 15 | # Community 16 | 17 | Learn where to ask questions, report bugs, make feature requests, and spark discussions. 18 | 19 | 20 | 21 | ## Developer forums 22 | 23 | [Adobe Community Forums, InDesign Scripting](https://community.adobe.com/t5/indesign/ct-p/ct-indesign?page=1&sort=latest_replies&lang=all&tabid=all&topics=label-scripting) 24 | 25 | Open discussion and support with community experts and Adobe staff. 26 | 27 | 28 | 29 | ## InDesign Server Forum 30 | 31 | [InDesign Server Developers](https://community.adobe.com/t5/indesign/ct-p/ct-indesign?page=1&sort=latest_replies&filter=all&lang=all&tabid=discussions&topics=label-serverdevelopers) 32 | 33 | Chat with other InDesign Server Developers. 34 | 35 | 36 | 37 | ## Product Bugs and Feedback 38 | 39 | [InDesign on UserVoice](https://indesign.uservoice.com/) 40 | 41 | If you have product feedback or find bugs to report, use InDesign's UserVoice forum. 42 | 43 | 44 | 45 | ## InDesign Prerelease 46 | 47 | [InDesign Prerelease](https://www.adobeprerelease.com/beta/C6DFA254-C40C-4EEB-8F6D-F4AEDA2E6171) 48 | 49 | A Non-Disclosure Agreement is required to join. Once you're in, you can chat about prereleases in [the prerelease forums](https://forums.adobeprerelease.com/indesign/categories). 50 | 51 | 52 | 53 | ## InDesign Developers Prerelease 54 | 55 | [InDesign Developers Prerelease](https://www.adobeprerelease.com/beta/D1A76A97-F7DC-4552-DE3C-FF5F211C7492) 56 | 57 | A Non-Disclosure Agreement is required to join. If you're interested in InDesign's C++ SDK or InDesign Server, you'll want to join the InDesign Developers Prerelease program in addition to the InDesign Prerelease program. Once you're in, you can chat about prereleases in [the prerelease forums](https://forums.adobeprerelease.com/indesigndev/categories). Please note that if you applied and more than a week has passed, please email wwds@adobe.com to request access. -------------------------------------------------------------------------------- /static/petstore.test.json: -------------------------------------------------------------------------------- 1 | { 2 | "swagger": "2.0", 3 | "info": { 4 | "description": "This is a sample server Petstore server. You can find out more about Swagger at [http://swagger.io](http://swagger.io) or on [irc.freenode.net, #swagger](http://swagger.io/irc/). For this sample, you can use the api key `special-key` to test the authorization filters.", 5 | "version": "1.0.6", 6 | "title": "Swagger Petstore", 7 | "termsOfService": "http://swagger.io/terms/", 8 | "contact": { "email": "apiteam@swagger.io" }, 9 | "license": { 10 | "name": "Apache 2.0", 11 | "url": "http://www.apache.org/licenses/LICENSE-2.0.html" 12 | } 13 | }, 14 | "host": "petstore.swagger.io", 15 | "basePath": "/v2", 16 | "tags": [ 17 | { 18 | "name": "BEFORE_NEW", 19 | "readonly": true, 20 | "type": "String", 21 | "array": false, 22 | "description": "Dispatched before a Document is created. This event bubbles. This event is cancelable.", 23 | "value": "beforeNew" 24 | }, 25 | { 26 | "name": "BEFORE_OPEN", 27 | "readonly": true, 28 | "type": "String", 29 | "array": false, 30 | "description": "Dispatched before a Document is opened. This event bubbles. This event is cancelable.", 31 | "value": "beforeOpen" 32 | }, 33 | { 34 | "name": "AFTER_CLOSE", 35 | "readonly": true, 36 | "type": "String", 37 | "array": false, 38 | "description": "Dispatched after a Document is closed. This event bubbles. This event is not cancelable.", 39 | "value": "afterClose" 40 | }, 41 | { 42 | "name": "AFTER_CONTEXT_CHANGED", 43 | "readonly": true, 44 | "type": "String", 45 | "array": false, 46 | "description": "Dispatched after the active context changes. This event bubbles. This event is not cancelable.", 47 | "value": "afterContextChanged" 48 | }, 49 | { 50 | "name": "AFTER_SELECTION_CHANGED", 51 | "readonly": true, 52 | "type": "String", 53 | "array": false, 54 | "description": "Dispatched after the active selection changes. This event bubbles. This event is not cancelable.", 55 | "value": "afterSelectionChanged" 56 | }, 57 | { 58 | "name": "AFTER_SELECTION_ATTRIBUTE_CHANGED", 59 | "readonly": true, 60 | "type": "String", 61 | "array": false, 62 | "description": "Dispatched after an attribute on the active selection changes. This event bubbles. This event is not cancelable.", 63 | "value": "afterSelectionAttributeChanged" 64 | }, 65 | { 66 | "name": "BEFORE_DEACTIVATE", 67 | "readonly": true, 68 | "type": "String", 69 | "array": false, 70 | "description": "Dispatched before the Application becomes inactive. This event bubbles. This event is not cancelable.", 71 | "value": "beforeDeactivate" 72 | }, 73 | { 74 | "name": "AFTER_ACTIVATE", 75 | "readonly": true, 76 | "type": "String", 77 | "array": false, 78 | "description": "Dispatched after the Application becomes active. This event bubbles. This event is not cancelable.", 79 | "value": "afterActivate" 80 | }, 81 | { 82 | "name": "BEFORE_QUIT", 83 | "readonly": true, 84 | "type": "String", 85 | "array": false, 86 | "description": "Dispatched before the Application is quit. Allows the quit to be canceled. This event bubbles. This event is cancelable.", 87 | "value": "beforeQuit" 88 | }, 89 | { 90 | "name": "AFTER_QUIT", 91 | "readonly": true, 92 | "type": "String", 93 | "array": false, 94 | "description": "Dispatched when the Application is quitting. Since the quit has been committed, it can not be canceled. This event bubbles. This event is not cancelable.", 95 | "value": "afterQuit" 96 | } 97 | ] 98 | } 99 | --------------------------------------------------------------------------------