[APPEXT-878] Editor api docs

content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/_index.md

@@ -42,3 +42,4 @@ Here is a list of how-tos for you to begin with:
 * [How to Show a Popup Notification Using Web API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/notification-api/)
 * [How to View User Preferences Using Web API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/preference-api/)
 * [How to Show a Modal Dialog Using Web API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/dialog-api/)
+* [How to Open Documents Using Web API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/editor-api/)

content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/dialog-api.md

@@ -2,7 +2,6 @@
 title: "Open a Modal Dialog Using Web API"
 linktitle: "Open a Modal Dialog"
 url: /apidocs-mxsdk/apidocs/web-extensibility-api-11/dialog-api/
-weight: 60
 ---
 
 ## Introduction

content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/dockable-pane-api.md

@@ -2,7 +2,6 @@
 title: "Create a Dockable Pane Using Web API"
 linktitle: "Dockable Pane"
 url: /apidocs-mxsdk/apidocs/web-extensibility-api-11/dockable-pane-api/
-weight: 10
 ---
 
 ## Introduction

content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/editor-api.md

@@ -0,0 +1,93 @@
+---
+title: "Open a Document Editor Using Web API"
+linktitle: "Open a Document Editor"
+url: /apidocs-mxsdk/apidocs/web-extensibility-api-11/editor-api/
+---
+
+## Introduction
+
+This how-to describes how to open an existing document editor in Studio Pro from within an extension.
+
+## Prerequisites
+
+This how-to uses the results of [Get Started with the Web Extensibility API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/getting-started/). Complete that how-to before starting this one. You should also be familiar with creating menus as described in [Create a Menu Using Web API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/menu-api/).
+
+## Opening a Document Editor
+
+Create a menu item. This is done inside the `loaded` event in `Main`. For more information, see [Create a Menu Using Web API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/menu-api/).
+
+This menu action will look for the `Home_Page` document in `MyFirstModule` (however, you can use any module or any document in your app). It will then open it with the editor API. For more information, see [Access a Mendix Model Using Web API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/model-api/).
+
+For this example, add an event listener for the `menuItemActivated` event for when a menu is clicked. When the event triggers, do the following:
+
+1. Look for the page by its name, and by the name of its containing module using the `studioPro.app.model.pages` API. 
+2. Call `studioPro.ui.editors.editDocument` to open the document by passing its ID. 
+
+See the code sample below to see how this is done:
+
+```typescript
+import { IComponent, studioPro, Menu, Primitives } from "@mendix/extensions-api";
+
+const menuId = "open-home-page";
+
+studioPro.ui.extensionsMenu.addEventListener("menuItemActivated", async args => {
+    if (args.menuId === menuId) {
+        const [page] = await studioPro.app.model.pages.loadAll(
+            (info: Primitives.UnitInfo) => info.moduleName === "MyFirstModule" && info.name === "Home_Web"
+        );
+
+        await studioPro.ui.editors.editDocument(page.$ID);
+    }
+});
+
+export const component: IComponent = {
+    async loaded() {
+        const menu: Menu = {
+            caption: "Open Home Page",
+            menuId
+        };
+
+        await studioPro.ui.extensionsMenu.add(menu);
+    }
+};
+```
+
+## Active Documents
+
+The editor API notifies the extension when the active document tab is activated in Studio Pro, via the `activeDocumentChanged` event. It also provides this information on demand, via the `studioPro.ui.editors.getActiveDocument` method.
+
+Both the `getActiveDocument` method and the `activeDocumentChanged` event args returns a `ActiveDocumentInfo` object, which contains the document's name, type, container, module name, and id.
+
+See the sample code below:
+
+```typescript
+studioPro.ui.editors.addEventListener("activeDocumentChanged", async ({ activeDocument }) => {
+    if (activeDocument) {
+        studioPro.ui.notifications.show({
+            title: "Document Changed Notification",
+            message: `Name: ${activeDocument.documentName}\nID: ${activeDocument.documentId}\nType: ${activeDocument.documentType}\nModule: ${activeDocument.moduleName}`,
+            displayDurationInSeconds: 5
+        });
+    }
+});
+
+studioPro.ui.extensionsMenu.addEventListener("menuItemActivated", async args => {
+    if (args.menuId === "getActiveDocumentMenu") {
+        const activeDocument: ActiveDocumentInfo = studioPro.ui.editors.getActiveDocument();
+
+        if (activeDocument) {
+            studioPro.ui.notifications.show({
+                title: "Active Document",
+                message: `Name: ${activeDocument.documentName}\nID: ${activeDocument.documentId}\nType: ${activeDocument.documentType}\nModule: ${activeDocument.moduleName}`,
+                displayDurationInSeconds: 5
+            });
+        }
+    }
+});
+```
+
+## Extensibility Feedback
+
+If you would like to provide us with additional feedback, you can complete a small [survey](https://survey.alchemer.eu/s3/90801191/Extensibility-Feedback).
+
+Any feedback is appreciated.

content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/local-app-files-api.md

@@ -2,7 +2,6 @@
 title: "Interact With Local App Files Using Web API"
 linktitle: "Local Files"
 url: /apidocs-mxsdk/apidocs/web-extensibility-api-11/local-app-files-api/
-weight: 20
 ---
 
 ## Introduction

content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/menu-api.md

@@ -2,7 +2,6 @@
 title: "Create a Menu Using Web API"
 linktitle: "Create Menu"
 url: /apidocs-mxsdk/apidocs/web-extensibility-api-11/menu-api/
-weight: 30
 ---
 
 ## Introduction

content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/messagebox-api.md

@@ -2,7 +2,6 @@
 title: "Show a Message Box Using Web API"
 linktitle: "Message Box"
 url: /apidocs-mxsdk/apidocs/web-extensibility-api-11/messagebox-api/
-weight: 50
 ---
 
 ## Introduction

content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/model-api.md

@@ -2,7 +2,6 @@
 title: "Access a Mendix Model Using Web API"
 linktitle: "Mendix Model"
 url: /apidocs-mxsdk/apidocs/web-extensibility-api-11/model-api/
-weight: 40
 ---
 
 ## Introduction 

content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/notification-api.md

@@ -2,7 +2,6 @@
 title: "Show a Pop-up Notification Using Web API"
 linktitle: "Show Notification"
 url: /apidocs-mxsdk/apidocs/web-extensibility-api-11/notification-api/
-weight: 30
 ---
 
 ## Introduction

content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/preference-api.md

@@ -2,7 +2,6 @@
 title: "Show User's Preferences Using Web API"
 linktitle: "Show User's Preferences"
 url: /apidocs-mxsdk/apidocs/web-extensibility-api-11/preference-api/
-weight: 30
 ---
 
 ## Introduction

content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/tab-api.md

@@ -2,7 +2,6 @@
 title: "Open a Tab Using Web API"
 linktitle: "Open a Tab"
 url: /apidocs-mxsdk/apidocs/web-extensibility-api-11/tab-api/
-weight: 60
 ---
 
 ## Introduction