Sample manifest json autocomplete in Vs Code and Cursor

samples/manifest-json-autocomplete/.gitignore

@@ -0,0 +1,3 @@
+.DS_Store
+dist/
+node_modules/

samples/manifest-json-autocomplete/.vscode/express-add-on-manifest.schema.json

@@ -0,0 +1,152 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "title": "Adobe Express Add-on Manifest",
+  "description": "Manifest file that defines the metadata for your add-on and how it should behave",
+  "type": "object",
+  "additionalProperties": false,
+  "properties": {
+    "testId": {
+      "type": "string",
+      "description": "Used to uniquely identify an add-on among other add-ons during development workflows only. This is auto-generated and inserted into the manifest by the CLI when an add-on is created. This is mandatory in the development workflow and ignored in add-ons submitted to the marketplace."
+    },
+    "name": {
+      "type": "string",
+      "description": "Add-on name for development workflow only. The name provided in the UI during submission is used in all other workflows."
+    },
+    "version": {
+      "type": "string",
+      "pattern": "^[0-9]+\\.[0-9]+\\.[0-9]+$",
+      "description": "Add-on version in 'major.minor.patch' format (e.g. '1.2.0')"
+    },
+    "manifestVersion": {
+      "type": "number",
+      "description": "Version of the manifest schema (e.g. 2)"
+    },
+    "requirements": {
+      "type": "object",
+      "description": "Specify the apps the add-on is applicable for",
+      "additionalProperties": false,
+      "properties": {
+        "apps": {
+          "type": "array",
+          "description": "Add-on authors can specify the apps that the add-on is intended for",
+          "minItems": 1,
+          "items": {
+            "type": "object",
+            "additionalProperties": false,
+            "properties": {
+              "name": {
+                "type": "string",
+                "enum": ["Express"],
+                "description": "Currently supported values: 'Express'"
+              },
+              "apiVersion": {
+                "type": "number",
+                "enum": [1],
+                "description": "API version that the add-on uses. Currently supported values: 1"
+              },
+              "supportedDeviceClass": {
+                "type": "array",
+                "description": "Supported platforms by the add-on. If not specified, the default value assumed is: ['desktop']",
+                "items": {
+                  "type": "string",
+                  "enum": ["desktop"],
+                  "description": "Browser on desktop"
+                }
+              }
+            },
+            "required": ["name", "apiVersion"]
+          }
+        },
+        "experimentalApis": {
+          "type": "boolean",
+          "description": "Add-ons can opt to use experimental apis by specifying this flag. This flag is only allowed during development and needs to be removed during submission."
+        },
+        "supportsTouch": {
+          "type": "boolean",
+          "description": "Whether the add-on supports touch-only devices. If not specified, the default value assumed is false."
+        },
+        "renditionPreview": {
+          "type": "boolean",
+          "description": "Ensure premium content preview is properly handled for free users when add-ons create renditions."
+        }
+      },
+      "required": ["apps"]
+    },
+    "entryPoints": {
+      "type": "array",
+      "description": "An entry point for your add-on. At least one is required.",
+      "minItems": 1,
+      "items": {
+        "type": "object",
+        "additionalProperties": false,
+        "properties": {
+          "type": {
+            "type": "string",
+            "enum": ["panel"],
+            "description": "The type of the entry point. Currently supported values: 'panel'"
+          },
+          "id": {
+            "type": "string",
+            "description": "Identifier for the entry point. Must be unique within the add-on."
+          },
+          "main": {
+            "type": "string",
+            "description": "Main file for this entry point when launched."
+          },
+          "documentSandbox": {
+            "type": "string",
+            "description": "File containing the JavaScript code to use with the document sandbox SDK and Adobe Express Document APIs."
+          },
+          "permissions": {
+            "type": "object",
+            "description": "The permissions defined for this entry point",
+            "additionalProperties": false,
+            "properties": {
+              "sandbox": {
+                "type": "array",
+                "description": "List of iframe sandbox permissions",
+                "items": {
+                  "type": "string",
+                  "enum": [
+                    "allow-popups",
+                    "allow-popups-to-escape-sandbox",
+                    "allow-presentation",
+                    "allow-downloads"
+                  ],
+                  "description": "allow-popups: Allows popups (such as window.open(), target='_blank', or showModalDialog()). Note: If this permission is not set and you're using popups, the popup will silently fail to open. \n allow-popups-to-escape-sandbox: Allows a sandboxed document to open new windows without forcing the sandboxing flags upon them \n allow-presentation: Lets the add-on start a presentation session \n allow-downloads: Allows downloading files through an <a> or <area> element with the download attribute, as well as through the navigation that leads to a download of a file"
+                }
+              },
+              "oauth": {
+                "type": "array",
+                "description": "List of 3rd party auth server domains for which OAuth workflow may be requested. eg. [\"www.dropbox.com\"]",
+                "items": {
+                  "type": "string",
+                  "format": "hostname"
+                }
+              },
+              "clipboard": {
+                "type": "array",
+                "description": "The allowed values for the list of clipboard permissions. Currently, clipboard-write is supported and allows an add-on to write arbitrary data to the clipboard",
+                "items": {
+                  "type": "string",
+                  "enum": ["clipboard-write"]
+                }
+              },
+              "microphone": {
+                "type": ["string", "boolean"],
+                "description": "The allowlists value used in iframe 'allow' attribute. Enables the add-on to access the user's microphone for audio input."
+              },
+              "camera": {
+                "type": ["string", "boolean"],
+                "description": "The allowlists value used in iframe 'allow' attribute. Enables the add-on to access the user's camera for video input."
+              }
+            }
+          }
+        },
+        "required": ["type", "id", "main"]
+      }
+    }
+  },
+  "required": ["version", "manifestVersion", "requirements", "entryPoints"]
+}

samples/manifest-json-autocomplete/.vscode/settings.json

@@ -0,0 +1,8 @@
+{
+  "json.schemas": [
+    {
+      "fileMatch": ["src/manifest.json"],
+      "url": "./.vscode/express-add-on-manifest.schema.json"
+    }
+  ]
+}

samples/manifest-json-autocomplete/README.md

@@ -0,0 +1,43 @@
+## Demo
+
+Below is a demonstration of the manifest autocomplete feature:
+
+![Demo](demo.gif)
+
+## Enabling Manifest Autocomplete in VS Code/Cursor
+
+To enable JSON schema-based autocomplete for `src/manifest.json` in VS Code/Cursor:
+
+1. Open (or create) `.vscode/settings.json` in your project root.
+2. Download the [.vscode/express-add-on-manifest.schema.json](.vscode/express-add-on-manifest.schema.json) file to your `.vscode/` directory.
+3. Add the following configuration:
+
+```json
+{
+  "json.schemas": [
+    {
+      "fileMatch": ["src/manifest.json"],
+      "url": "./.vscode/express-add-on-manifest.schema.json"
+    }
+  ]
+}
+```
+
+This will enable autocomplete and validation for `src/manifest.json` based on the schema defined in `.vscode/express-add-on-manifest.schema.json`.
+
+## About
+
+This project has been created with _@adobe/create-ccweb-add-on_. As an example, this Add-on demonstrates how to get started with Add-on development using React and TypeScript with Document Sandbox Runtime.
+
+## Tools
+
+- HTML
+- CSS
+- React
+- TypeScript
+
+## Setup
+
+1. To install the dependencies, run `npm install`.
+2. To build the application, run `npm run build`.
+3. To start the application, run `npm run start`.

samples/manifest-json-autocomplete/package.json

@@ -0,0 +1,37 @@
+{
+    "name": "manifest-json-autocomplete",
+    "version": "1.0.0",
+    "description": "Adobe Creative Cloud Web Add-on.",
+    "scripts": {
+        "clean": "ccweb-add-on-scripts clean",
+        "build": "ccweb-add-on-scripts build --use webpack",
+        "start": "ccweb-add-on-scripts start --use webpack",
+        "package": "ccweb-add-on-scripts package --use webpack"
+    },
+    "keywords": [
+        "Adobe",
+        "Creative Cloud Web",
+        "Add-on",
+        "panel"
+    ],
+    "dependencies": {
+        "@swc-react/button": "1.7.0",
+        "@swc-react/theme": "1.7.0",
+        "react": "18.2.0",
+        "react-dom": "18.2.0"
+    },
+    "devDependencies": {
+        "@adobe/ccweb-add-on-scripts": "^3.1.0",
+        "@types/adobe__ccweb-add-on-sdk": "^1.3.0",
+        "@types/react": "18.2.21",
+        "@types/react-dom": "18.2.7",
+        "copy-webpack-plugin": "11.0.0",
+        "css-loader": "6.8.1",
+        "html-webpack-plugin": "5.5.3",
+        "style-loader": "3.3.3",
+        "ts-loader": "9.5.1",
+        "typescript": "5.3.2",
+        "webpack": "5.98.0",
+        "webpack-cli": "6.0.1"
+    }
+}

samples/manifest-json-autocomplete/src/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta
+            name="description"
+            content="Get started with Add-on development using React and TypeScript with Document Sandbox Runtime"
+        />
+        <meta name="keywords" content="Adobe, Express, Add-On, React, TypeScript, Document Sandbox Runtime" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Get Started</title>
+    </head>
+    <body>
+        <div id="root"></div>
+    </body>
+</html>

samples/manifest-json-autocomplete/src/manifest.json

@@ -0,0 +1,22 @@
+{
+  "testId": "1654d367-b2b2-41fe-9a92-b6af4d8a771e",
+  "name": "Manifest Json Autocomplete",
+  "version": "1.0.0",
+  "manifestVersion": 2,
+  "requirements": {
+    "apps": [
+      {
+        "name": "Express",
+        "apiVersion": 1
+      }
+    ]
+  },
+  "entryPoints": [
+    {
+      "type": "panel",
+      "id": "panel1",
+      "main": "index.html",
+      "documentSandbox": "code.js"
+    }
+  ]
+}

samples/manifest-json-autocomplete/src/models/DocumentSandboxApi.ts

@@ -0,0 +1,4 @@
+// This interface declares all the APIs that the document sandbox runtime ( i.e. code.ts ) exposes to the UI/iframe runtime
+export interface DocumentSandboxApi {
+    createRectangle(): void;
+}

samples/manifest-json-autocomplete/src/sandbox/code.ts

@@ -0,0 +1,39 @@
+import addOnSandboxSdk from "add-on-sdk-document-sandbox";
+import { editor } from "express-document-sdk";
+import { DocumentSandboxApi } from "../models/DocumentSandboxApi";
+
+// Get the document sandbox runtime.
+const { runtime } = addOnSandboxSdk.instance;
+
+function start(): void {
+    // APIs to be exposed to the UI runtime
+    // i.e., to the `App.tsx` file of this add-on.
+    const sandboxApi: DocumentSandboxApi = {
+        createRectangle: () => {
+            const rectangle = editor.createRectangle();
+
+            // Define rectangle dimensions.
+            rectangle.width = 240;
+            rectangle.height = 180;
+
+            // Define rectangle position.
+            rectangle.translation = { x: 10, y: 10 };
+
+            // Define rectangle color.
+            const color = { red: 0.32, green: 0.34, blue: 0.89, alpha: 1 };
+
+            // Fill the rectangle with the color.
+            const rectangleFill = editor.makeColorFill(color);
+            rectangle.fill = rectangleFill;
+
+            // Add the rectangle to the document.
+            const insertionParent = editor.context.insertionParent;
+            insertionParent.children.append(rectangle);
+        }
+    };
+
+    // Expose `sandboxApi` to the UI runtime.
+    runtime.exposeApi(sandboxApi);
+}
+
+start();

samples/manifest-json-autocomplete/src/sandbox/tsconfig.json

@@ -0,0 +1,10 @@
+{
+    "extends": "../../tsconfig.json",
+    "compilerOptions": {
+        "lib": ["ES2020"],
+        "module": "ES2020",
+        "target": "ES2020",
+        "types": ["@types/adobe__ccweb-add-on-sdk"]
+    },
+    "include": ["./**/*"]
+}

samples/manifest-json-autocomplete/src/ui/components/App.css

@@ -0,0 +1,5 @@
+.container {
+    margin: 24px;
+    display: flex;
+    flex-direction: column;
+}

samples/manifest-json-autocomplete/src/ui/components/App.tsx

@@ -0,0 +1,34 @@
+// To support: system="express" scale="medium" color="light"
+// import these spectrum web components modules:
+import "@spectrum-web-components/theme/express/scale-medium.js";
+import "@spectrum-web-components/theme/express/theme-light.js";
+
+// To learn more about using "swc-react" visit:
+// https://opensource.adobe.com/spectrum-web-components/using-swc-react/
+import { Button } from "@swc-react/button";
+import { Theme } from "@swc-react/theme";
+import React from "react";
+import { DocumentSandboxApi } from "../../models/DocumentSandboxApi";
+import "./App.css";
+
+import { AddOnSDKAPI } from "https://new.express.adobe.com/static/add-on-sdk/sdk.js";
+
+const App = ({ addOnUISdk, sandboxProxy }: { addOnUISdk: AddOnSDKAPI; sandboxProxy: DocumentSandboxApi }) => {
+    function handleClick() {
+        sandboxProxy.createRectangle();
+    }
+
+    return (
+        // Please note that the below "<Theme>" component does not react to theme changes in Express.
+        // You may use "addOnUISdk.app.ui.theme" to get the current theme and react accordingly.
+        <Theme system="express" scale="medium" color="light">
+            <div className="container">
+                <Button size="m" onClick={handleClick}>
+                    Create Rectangle
+                </Button>
+            </div>
+        </Theme>
+    );
+};
+
+export default App;