From 536a43d30e3325c2fb3829fcde5025d3a94b3ca4 Mon Sep 17 00:00:00 2001
From: Eugenio Romano <eromano@users.noreply.github.com>
Date: Mon, 13 Sep 2021 11:09:41 +0100
Subject: [PATCH] Custom viewer extension documentation (#2292)

---
 docs/abn-tree.yml                        |  3 +-
 docs/extending/extensibility-features.md |  1 +
 docs/tutorials/README.md                 |  1 +
 docs/tutorials/custom-viewer.md          | 85 ++++++++++++++++++++++++
 4 files changed, 89 insertions(+), 1 deletion(-)
 create mode 100644 docs/tutorials/custom-viewer.md

diff --git a/docs/abn-tree.yml b/docs/abn-tree.yml
index 0b49096f1..722de5ed3 100644
--- a/docs/abn-tree.yml
+++ b/docs/abn-tree.yml
@@ -42,6 +42,7 @@
       - how-to-create-your-first-extension.md: How to create your first extension
       - content-metadata.md: How to customize Content Metadata
       - file-lists.md: How to customize File lists
-      - file-preview.md: How to customize File Preview
+      - file-preview.md: How to call File Preview from a plugin
+      - custom-viewer.md: How to customize File Viewer
       - search-form.md: How to customize The Search Form
 - help.md: 'Get help'
diff --git a/docs/extending/extensibility-features.md b/docs/extending/extensibility-features.md
index 6fc7015ee..70affd999 100644
--- a/docs/extending/extensibility-features.md
+++ b/docs/extending/extensibility-features.md
@@ -19,6 +19,7 @@ You can create plugins that change, toggle, or extend the following areas:
   - buttons
   - menu buttons
   - separators
+- File viewer  
 - Viewer actions
   - "Open With" entries
   - toolbar entries
diff --git a/docs/tutorials/README.md b/docs/tutorials/README.md
index c59ffcb9d..7d70815d4 100644
--- a/docs/tutorials/README.md
+++ b/docs/tutorials/README.md
@@ -14,6 +14,7 @@ Learn more about developing with the Alfresco Content Application.
 - [How to create your first extension](/tutorials/how-to-create-your-first-extension)
 - [How to install an existing extension](/tutorials/how-to-install-an-existing-extension)
 - [Custom Route](/tutorials/custom-route)
+- [Custom Viewer](/tutorials/custom-viewer)
 - [Dialog Actions](/tutorials/dialog-actions)
 - [File Preview](/tutorials/file-preview)
 - [File Lists](/tutorials/file-lists)
diff --git a/docs/tutorials/custom-viewer.md b/docs/tutorials/custom-viewer.md
new file mode 100644
index 000000000..3bbccb1b9
--- /dev/null
+++ b/docs/tutorials/custom-viewer.md
@@ -0,0 +1,85 @@
+---
+Title: Custom file preview
+---
+
+## Custom file preview
+
+Supports dynamically-loaded viewer preview extensions.
+
+See the [ACA monaco extension](https://github.com/eromano/aca-monaco-extension) for
+an example of a real working viewer extension project.
+
+## Class members
+
+### Properties
+
+| Name | Type | Default value | Description |
+| ---- | ---- | ------------- | ----------- |
+| extension | `string` |  | File extension (.jpg, .png, etc) for the viewer. |
+| id | `string` |  | ID string of the component to preview. |
+| node | `Node` |  | Node containing the content to display. |
+| url | `string` |  | URL of the content in the repository. |
+
+## Details
+
+To create your custom extension viewer you need to create the following files in a separate project:
+
+The Module needs to declare the ID of your extension:
+
+```ts
+export class YourExtensionViewerModule {
+  constructor(extensions: ExtensionService) {
+    extensions.setComponents({
+      'your-extension.main.component': YourExtensionViewerComponent
+    });
+  }
+}
+```
+
+Your extension contains the business logic:
+
+```ts
+import { Node } from '@alfresco/js-api';
+import { ViewerExtensionInterface } from '@alfresco/adf-extensions';
+
+@Component({
+  selector: 'your-extension-viewer',
+  template: '<div> This is your custom extension viewer template</div>',
+  styleUrls: ['./your-extension-view.component.css'],
+  encapsulation: ViewEncapsulation.None
+})
+export class YourExtensionViewerComponent implements ViewerExtensionInterface {
+
+  showToolbar = true;
+
+  @Input()
+  url: string;
+
+  @Input()
+  node: Node;
+  
+  
+  ....YOUR CUSTOM LOGIC
+}
+```
+
+You also need to provide in your `app.extension.json` its details:
+
+```JSON
+{
+  "$version": "1.0.0",
+  "$name": "my viewer extension",
+  "$description": "my viewer  plugin",
+  "features": {
+    "viewer": {
+      "content": [
+        {
+          "id": "dev.tools.viewer.viewer",
+          "fileExtension": ["png", "jpg"],
+          "component": "your-extension.main.component"
+        }
+      ]
+    }
+  }
+}
+```