Merge pull request #41 from VladimirZaets/cf-editor-custom-rte-field

cf-editor-custom-rte-field

cf-editor-custom-rte-field/.babelrc

@@ -0,0 +1,5 @@
+{
+  "plugins": [
+    "@babel/plugin-transform-react-jsx"
+  ]
+}

cf-editor-custom-rte-field/.gitignore

@@ -0,0 +1,42 @@
+
+# package directories
+node_modules
+jspm_packages
+
+# build
+build
+dist
+.manifest-dist.yml
+
+# Config
+config.json
+.env*
+.aio
+
+# Adobe I/O console config
+console.json
+
+# Test output
+junit.xml
+
+# IDE & Temp
+.cache
+.idea
+.nyc_output
+.vscode
+coverage
+.aws.tmp.creds.json
+.wskdebug.props.tmp
+
+# Parcel
+.parcel-cache
+
+# OSX
+.DS_Store
+
+# yeoman
+.yo-repository
+
+# logs folder for aio-run-detached
+logs
+

cf-editor-custom-rte-field/README.md

@@ -0,0 +1,81 @@
+# AEM Content Fragment Editor Form Field Customization
+
+A sample extension demonstrating the customization of a form field in the AEM Content Fragment Editor.
+
+## Setup
+
+- Populate the `.env` file in the project root and fill it as shown [below](#env)
+
+## Local Dev
+
+- `aio app run` to start your local Dev server
+- App will run on `localhost:9080` by default
+
+By default the UI will be served locally but actions will be deployed and served from Adobe I/O Runtime. To start a
+local serverless stack and also run your actions locally use the `aio app run --local` option.
+
+## Test & Coverage
+
+- Run `aio app test` to run unit tests for ui and actions
+- Run `aio app test --e2e` to run e2e tests
+
+## Deploy & Cleanup
+
+- `aio app deploy` to build and deploy all actions on Runtime and static files to CDN
+- `aio app undeploy` to undeploy the app
+
+## Config
+
+### `.env`
+
+You can generate this file using the command `aio app use`.
+
+```bash
+# This file must **not** be committed to source control
+
+## please provide your Adobe I/O Runtime credentials
+# AIO_RUNTIME_AUTH=
+# AIO_RUNTIME_NAMESPACE=
+```
+
+### `app.config.yaml`
+
+- Main configuration file that defines an application's implementation.
+- More information on this file, application configuration, and extension configuration
+  can be found [here](https://developer.adobe.com/app-builder/docs/guides/configuration/#appconfigyaml)
+
+#### Action Dependencies
+
+- You have two options to resolve your actions' dependencies:
+
+  1. **Packaged action file**: Add your action's dependencies to the root
+   `package.json` and install them using `npm install`. Then set the `function`
+   field in `app.config.yaml` to point to the **entry file** of your action
+   folder. We will use `webpack` to package your code and dependencies into a
+   single minified js file. The action will then be deployed as a single file.
+   Use this method if you want to reduce the size of your actions.
+
+  2. **Zipped action folder**: In the folder containing the action code add a
+     `package.json` with the action's dependencies. Then set the `function`
+     field in `app.config.yaml` to point to the **folder** of that action. We will
+     install the required dependencies within that directory and zip the folder
+     before deploying it as a zipped action. Use this method if you want to keep
+     your action's dependencies separated.
+
+## Debugging in VS Code
+
+While running your local server (`aio app run`), both UI and actions can be debugged, to do so open the vscode debugger
+and select the debugging configuration called `WebAndActions`.
+Alternatively, there are also debug configs for only UI and each separate action.
+
+## Typescript support for UI
+
+To use typescript use `.tsx` extension for react components and add a `tsconfig.json`
+and make sure you have the below config added
+```
+ {
+  "compilerOptions": {
+      "jsx": "react"
+    }
+  }
+```

cf-editor-custom-rte-field/app.config.yaml

@@ -0,0 +1,3 @@
+extensions:
+  aem/cf-editor/1:
+    $include: src/aem-cf-editor-1/ext.config.yaml

cf-editor-custom-rte-field/hooks/post-deploy.js

@@ -0,0 +1,8 @@
+const chalk = require('chalk')
+
+module.exports = (config) => {
+    console.log(chalk.magenta(chalk.bold('For a developer preview of your UI extension in the AEM environment, follow the URL:')))
+    const appUrl =  `https://${config.ow.namespace}.${config.app.hostname}`
+    const base64EncodedUrl = Buffer.from(appUrl).toString('base64')
+    console.log(chalk.magenta(chalk.bold(`  -> https://experience.adobe.com/aem/extension-manager/preview/${base64EncodedUrl}`)))
+};

cf-editor-custom-rte-field/jest.setup.js

@@ -0,0 +1,15 @@
+/*
+Copyright 2023 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+jest.setTimeout(10000)
+
+beforeEach(() => { })
+afterEach(() => { })