simple markdown preview extension (#589)

* simple markdown preview extension

* fix lint issues

* github mode

* enable XSS sanitizer by default

* update libs (audit fix)

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],
-    exports: [AcaDevToolsComponent],
-    entryComponents: [AcaDevToolsComponent]
+    declarations: components(),
+    exports: components(),
+    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"
         ]
     }