SITES-26787: Document the Event Listener in Universal Editor (#109)

* SITES-26787: Document the Event Listener in Universal Editor

* SITES-28468: Documentation for navigateTo API

* SITES-28468: Documentation for navigateTo API

Author: VladimirZaets

gatsby-config.js

@@ -306,6 +306,10 @@ module.exports = {
           {
             title: "Retrieving Data from the Universal Editor",
             path: "/services/aem-universal-editor/api/data/"
+          },
+          {
+            title: "Triggering Universal Editor actions from the extension",
+            path: "/services/aem-universal-editor/api/actions/"
           }
         ]
       },

src/pages/services/aem-universal-editor/api/actions/editable-block-example.png

@@ -0,0 +1,70 @@
+---
+title: Universal Editor Extensibility
+description: Actions that can be performed from extensions
+contributors:
+  - https://github.com/AdobeDocs/uix
+---
+
+# Actions that can be performed from extensions
+
+Understand the fundamentals required to develop an extension for the Universal Editor.
+
+## List of actions:
+
+### Navigate To
+
+Universal Editor provides `navigateTo` action, enables switching the URL to the editor content page from the extension.
+To execute this action, an extension developer can call the navigateTo method on connection.host.editorActions and provide the new content URL as a parameter.
+
+#### API
+Method: `navigateTo`
+
+| Param      | Type     | Description                                                                                                                                                                                                                        |
+|------------|----------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| href       | `string` | Path to the content page                                                                                                                                                                                                           |
+
+
+Example: 
+`guestConnection.host.editorActions.navigateTo(href: string);`
+
+### Select Editables
+The `selectEditables` action allows an extension developer to select an editable block for editing. An editable block refers to the portion of content that can be modified within the Universal Editor.
+
+Editable block example:
+![editable-block-example.png](editable-block-example.png)
+
+The extension developer can retrieve the list of all editable blocks from the [editor state](https://developer.adobe.com/uix/docs/services/aem-universal-editor/api/data/#editor-state). This can be achieved by using `await guestConnection.host.editorState.get()` api.
+
+#### API
+
+Method: `selectEditables`
+
+| Param      | Type                | Description                     |
+|------------|---------------------|---------------------------------|
+| editables       | `Array` | The list of Editables to select |
+
+Example: `guestConnection.host.editorActions.selectEditables(editables: Editable[]);`
+
+### Update
+
+The update action enables an extension developer to modify the data within a specific editable block.
+
+At present, only a single field can be updated per call, and only the replace operation is supported. If the provided patch does not adhere to these rules, an error will be triggered.
+
+
+#### API
+
+Method: `update`
+
+| Param      | Type     | Description                                          |
+|------------|----------|------------------------------------------------------|
+| target       | `Object` | The editable to update                               |
+| patch       | `Arrap`  | The path to the specific edirable property to update |
+
+Example:
+`guestConnection.host.editorActions.update({ target: Target, patch: JSONPatch });`
+
+Example for updating a field with the name title:
+`update({ target: { editable }, patch: [{ op: "replace", path: "/title", value: "New title" }] })`
+
+

src/pages/services/aem-universal-editor/api/actions/index.md

@@ -37,3 +37,33 @@ You can send events to the remote application using the `triggerEvent` method.
 | eventName | `string` | ✔️ | Name of the event | 
 | selector  | `string` | ✔️ | A valid CSS selector string|
 | payload  | Serializable `object`| An object that, in addition of the properties defined in the Event Constructor |
+
+
+### Subscribing to events:
+To listen to events sent by the Universal Editor, you can subscribe to them using the next declaration:
+
+```js
+    function ExtensionRegistration() {
+  const init = async () => {
+    const guestConnection = await register({
+      id: extensionId,
+      methods: {
+        events: {
+          listen: (eventName, data) => {
+            console.log(`Extension registered to listen to event: ${eventName}. The event data: ${JSON.stringify(data)}`);
+          }
+        },
+      }
+    });
+
+  };
+  init().catch((error) => console.error(error));
+
+  return <Text>IFrame for integration with Host (AEM)...</Text>
+}
+
+```
+
+The extension has the capability to subscribe to a wide range of events offered by the Universal Editor, enabling seamless integration and enhanced functionality.
+
+For a comprehensive list of all available events and the corresponding response interfaces, please refer to the [Universal Editor Events documentation](https://experienceleague.adobe.com/en/docs/experience-manager-cloud-service/content/implementing/developing/universal-editor/events).