simple markdown preview extension (#589)

* simple markdown preview extension

* fix lint issues

* github mode

* enable XSS sanitizer by default

* update libs (audit fix)

package.json

@@ -47,6 +47,7 @@
     "@ngrx/store-devtools": "^6.1.0",
     "@ngstack/code-editor": "^0.4.3",
     "@ngx-translate/core": "^10.0.2",
+    "@types/showdown": "^1.7.5",
     "alfresco-js-api": "2.5.0",
     "core-js": "^2.5.7",
     "hammerjs": "2.0.8",
@@ -56,6 +57,7 @@
     "monaco-editor": "^0.14.2",
     "pdfjs-dist": "2.0.303",
     "rxjs": "^6.2.2",
+    "showdown": "^1.8.6",
     "web-animations-js": "2.3.1",
     "zone.js": "0.8.26"
   },
@@ -78,14 +80,14 @@
     "jasmine-spec-reporter": "~4.2.1",
     "jasmine2-protractor-utils": "^1.3.0",
     "jasminewd2": "^2.2.0",
-    "karma": "2.0.5",
+    "karma": "^3.0.0",
     "karma-chrome-launcher": "~2.2.0",
     "karma-cli": "~1.0.1",
     "karma-coverage-istanbul-reporter": "^1.2.1",
     "karma-jasmine": "~1.1.0",
     "karma-jasmine-html-reporter": "^0.2.2",
     "ng-packagr": "^4.1.0",
-    "protractor": "5.3.2",
+    "protractor": "^5.4.0",
     "rimraf": "2.6.2",
     "selenium-webdriver": "4.0.0-alpha.1",
     "ts-node": "~4.1.0",

projects/aca-dev-tools/src/lib/aca-dev-tools.component.ts

@@ -5,7 +5,7 @@ import { HttpClient } from '@angular/common/http';
 import { forkJoin } from 'rxjs';
 
 @Component({
-    selector: 'lib-aca-dev-tools',
+    selector: 'aca-dev-tools-main',
     encapsulation: ViewEncapsulation.None,
     host: { class: 'lib-aca-dev-tools' },
     templateUrl: './aca-dev-tools.component.html',

projects/aca-dev-tools/src/lib/aca-dev-tools.module.ts

@@ -5,6 +5,14 @@ import { AcaDevToolsComponent } from './aca-dev-tools.component';
 import { CoreModule } from '@alfresco/adf-core';
 import { ContentModule } from '@alfresco/adf-content-services';
 import { ExtensionService } from '@alfresco/adf-extensions';
+import { MarkdownViewComponent } from './viewer/markdown-view/markdown-view.component';
+
+export function components() {
+    return [
+        AcaDevToolsComponent,
+        MarkdownViewComponent
+    ];
+}
 
 @NgModule({
     imports: [
@@ -13,14 +21,15 @@ import { ExtensionService } from '@alfresco/adf-extensions';
         CoreModule.forChild(),
         ContentModule.forChild()
     ],
-    declarations: [AcaDevToolsComponent],
+    declarations: components(),
-    exports: [AcaDevToolsComponent],
+    exports: components(),
-    entryComponents: [AcaDevToolsComponent]
+    entryComponents: components()
 })
 export class AcaDevToolsModule {
     constructor(extensions: ExtensionService) {
         extensions.setComponents({
-            'app.dev.tools.component': AcaDevToolsComponent
+            'dev.tools.component': AcaDevToolsComponent,
+            'dev.tools.viewer.markdown': MarkdownViewComponent
         });
     }
 }

projects/aca-dev-tools/src/lib/viewer/markdown-view/markdown-view.component.scss

@@ -0,0 +1,18 @@
+.aca-markdown-view {
+    display: flex;
+    flex-direction: column;
+
+    .content {
+        display: flex;
+        flex-direction: column;
+    }
+}
+
+.adf-viewer-content-container {
+    height: 100%;
+}
+
+.adf-viewer-custom-content {
+    overflow: scroll;
+    height: 100%;
+}

projects/aca-dev-tools/src/lib/viewer/markdown-view/markdown-view.component.ts

@@ -0,0 +1,78 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2018 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import {
+    Component,
+    Input,
+    OnInit,
+    ViewEncapsulation
+} from '@angular/core';
+import { MinimalNodeEntryEntity } from 'alfresco-js-api';
+import { AlfrescoApiService } from '@alfresco/adf-core';
+// import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+import { Converter } from 'showdown';
+
+@Component({
+    selector: 'aca-markdown-view',
+    template: `<div class="content" [innerHTML]="content"></div>`,
+    styleUrls: ['./markdown-view.component.scss'],
+    encapsulation: ViewEncapsulation.None,
+    host: { 'class': 'aca-markdown-view' }
+})
+export class MarkdownViewComponent implements OnInit {
+    @Input()
+    url: string;
+
+    @Input()
+    node: MinimalNodeEntryEntity;
+
+    // content: SafeHtml = null;
+    content: string = null;
+
+    constructor(
+        private apiService: AlfrescoApiService
+        // private sanitizer: DomSanitizer
+        ) {}
+
+    ngOnInit() {
+        this.apiService.nodesApi.getFileContent(this.node.id).then(
+            result => {
+                const converter = new Converter({
+                    tables: true,
+                    ghCodeBlocks: true,
+                    ghCompatibleHeaderId: true,
+                    simplifiedAutoLink: true
+                });
+                converter.setOption('metadata', true);
+                converter.setFlavor('github');
+
+                const html = converter.makeHtml(result);
+                // this.content = this.sanitizer.bypassSecurityTrustHtml(html);
+                this.content = html;
+            },
+            err => console.log(err)
+        );
+    }
+}

projects/aca-dev-tools/tslint.json

@@ -4,13 +4,13 @@
         "directive-selector": [
             true,
             "attribute",
-            "lib",
+            "aca",
             "camelCase"
         ],
         "component-selector": [
             true,
             "element",
-            "lib",
+            "aca",
             "kebab-case"
         ]
     }

src/assets/plugins/dev.tools.json

@@ -6,8 +6,8 @@
 
     "routes": [
         {
-            "id": "app.dev.tools",
+            "id": "dev.tools",
-            "component": "app.dev.tools.component",
+            "component": "dev.tools.component",
             "path": "dev-tools",
             "data": {
                 "configPath": "assets/app.extensions.json",
@@ -27,10 +27,20 @@
                         "id": "app.navbar.dev.tools.main",
                         "icon": "build",
                         "title": "dev tools",
-                        "route": "app.dev.tools"
+                        "route": "dev.tools"
                     }
                 ]
             }
-        ]
+        ],
+
+        "viewer": {
+            "content": [
+                {
+                    "id": "dev.tools.viewer.markdown",
+                    "fileExtension": "md",
+                    "component": "dev.tools.viewer.markdown"
+                }
+            ]
+        }
     }
 }