Help system fixed.

8 years ago · 2f5427b3b0
10 changed files with 94 additions and 43 deletions
--- a/src/Squidex/app/app.module.ts
+++ b/src/Squidex/app/app.module.ts
@ -13,6 +13,7 @@ import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterModule } from '@angular/router';
 import { DndModule } from 'ng2-dnd';
+import { NgxMdModule } from 'ngx-md';

 import { AppComponent } from './app.component';

@ -63,6 +64,7 @@ export function configUserReport() {
        HttpClientModule,
        FormsModule,
        CommonModule,
+        NgxMdModule.forRoot(),
        RouterModule,
        ReactiveFormsModule,
        SqxFrameworkModule.forRoot(),
--- a/src/Squidex/app/framework/module.ts
+++ b/src/Squidex/app/framework/module.ts
@ -21,7 +21,6 @@ import {
    ConfirmClickDirective,
    ControlErrorsComponent,
    CopyDirective,
-    ExternalLinkDirective,
    DarkenPipe,
    DatePipe,
    DateTimeEditorComponent,
@ -31,6 +30,7 @@ import {
    DialogService,
    DisplayNamePipe,
    DurationPipe,
+    ExternalLinkDirective,
    FileDropDirective,
    FileSizePipe,
    FocusOnInitDirective,
--- a/src/Squidex/app/shared/components/help.component.html
+++ b/src/Squidex/app/shared/components/help.component.html
@ -4,6 +4,8 @@
    </ng-container>

    <ng-container content>
-        <p *ngFor="let section of helpSections | async" [innerHTML]="section"></p>
+        <div class="help">
+            <ngx-md [data]="helpMarkdown | async"></ngx-md>
+        </div>
    </ng-container>
 </sqx-panel>
--- a/src/Squidex/app/shared/components/help.component.scss
+++ b/src/Squidex/app/shared/components/help.component.scss
@ -1,6 +1,2 @@
@import '_vars';
-@import '_mixins';
-
-p {
-    font-size: .9rem;
-}
+@import '_mixins';
--- a/src/Squidex/app/shared/components/help.component.ts
+++ b/src/Squidex/app/shared/components/help.component.ts
@ -7,6 +7,7 @@

 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
+import { NgxMdService } from 'ngx-md';

 import { HelpService } from '@app/shared/internal';

@ -17,11 +18,15 @@ import { HelpService } from '@app/shared/internal';
    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class HelpComponent {
-    public helpSections = this.helpService.getHelp(this.route.snapshot.data['helpPage']);
+    public helpMarkdown = this.helpService.getHelp(this.route.snapshot.data['helpPage']);

    constructor(
        private readonly helpService: HelpService,
+        private readonly markdownService: NgxMdService,
        private readonly route: ActivatedRoute
    ) {
+        this.markdownService.renderer.link = (href, title, text) => {
+            return `<a href="${href}" title="${title}" target="_blank", rel="noopener">${text} <i class="icon-external-link"></i></a>`;
+        };
    }
 }
--- a/src/Squidex/app/shared/module.ts
+++ b/src/Squidex/app/shared/module.ts
@ -9,6 +9,7 @@ import { HTTP_INTERCEPTORS } from '@angular/common/http';
 import { ModuleWithProviders, NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { DndModule } from 'ng2-dnd';
+import { NgxMdModule } from 'ngx-md';

 import { SqxFrameworkModule } from '@app/framework';

@ -93,6 +94,7 @@ import {
@NgModule({
    imports: [
        DndModule,
+        NgxMdModule,
        RouterModule,
        SqxFrameworkModule
    ],
--- a/src/Squidex/app/shared/services/help.service.spec.ts
+++ b/src/Squidex/app/shared/services/help.service.spec.ts
@ -29,7 +29,7 @@ describe('AppClientsService', () => {
    it('should make get request to get help sections',
        inject([HelpService, HttpTestingController], (helpService: HelpService, httpMock: HttpTestingController) => {

-        let helpSections: string[];
+        let helpSections: string;

        helpService.getHelp('01-chapter/02-article').subscribe(result => {
            helpSections = result;
@ -40,32 +40,15 @@ describe('AppClientsService', () => {
        expect(req.request.method).toEqual('GET');
        expect(req.request.headers.get('If-Match')).toBeNull();

-        req.flush({
-            sections: [
-                {
-                    content: 'A test content with'
-                },
-                {
-                    content: 'A test content with a <a href="https://squidex.io">A Link</a>'
-                },
-                {
-                    content: 'A test content with a <a href="../GLOSSARY.html#content">Glossary Link</a>'
-                }
-            ]
-        });
+        req.flush('Markdown');

-        expect(helpSections!).toEqual(
-            [
-                'A test content with',
-                'A test content with a <a href="https://squidex.io">A Link</a>',
-                'A test content with a <a target="_blank" rel="noopener" href="https://docs.squidex.io/GLOSSARY.html#content">Glossary Link</a>'
-            ]);
+        expect(helpSections!).toEqual('Markdown');
    }));

    it('should return empty sections if get request fails',
        inject([HelpService, HttpTestingController], (helpService: HelpService, httpMock: HttpTestingController) => {

-        let helpSections: string[];
+        let helpSections: string;

        helpService.getHelp('01-chapter/02-article').subscribe(result => {
            helpSections = result;
@ -78,6 +61,6 @@ describe('AppClientsService', () => {

        req.error(<any>{});

-        expect(helpSections!).toEqual([]);
+        expect(helpSections!).toEqual('');
    }));
 });
--- a/src/Squidex/app/shared/services/help.service.ts
+++ b/src/Squidex/app/shared/services/help.service.ts
@ -17,21 +17,13 @@ export class HelpService {
    ) {
    }

-    public getHelp(helpPage: string): Observable<string[]> {
-        const url = `https://api.gitbook.com/book/squidex/squidex/contents/${helpPage}.json`;
+    public getHelp(helpPage: string): Observable<string> {
+        const url = `https://raw.githubusercontent.com/Squidex/squidex-docs/master/${helpPage}.md`;

-        return this.http.get(url).pipe(
+        return this.http.get(url, { responseType: 'text' }).pipe(
            map((response: any) => {
-                const result: string[] = [];
-
-                for (let section of response.sections) {
-                    const content = section.content.replace(/href="\.\.\/GLOSSARY\.html/g, 'target="_blank" rel="noopener" href="https://docs.squidex.io/GLOSSARY.html');
-
-                    result.push(content);
-                }
-
-                return result;
+                return <string>response;
            }),
-            catchError(error => of([])));
+            catchError(error => of('')));
    }
 }
--- a/src/Squidex/package-lock.json
+++ b/src/Squidex/package-lock.json
@ -939,6 +939,12 @@
      "integrity": "sha1-7ihweulOEdK4J7y+UnC86n8+ce4=",
      "dev": true
    },
+    "@types/marked": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@types/marked/-/marked-0.6.0.tgz",
+      "integrity": "sha512-TxwhgR9VsIfRDJ3WwFokG8Xu+ea0nYGDRHdI783WJ983uffatz0ytIeUEIBOwPvRy241KRSNVyywQltuTqDh0w==",
+      "dev": true
+    },
    "@types/mousetrap": {
      "version": "1.6.0",
      "resolved": "https://registry.npmjs.org/@types/mousetrap/-/mousetrap-1.6.0.tgz",
@ -2875,6 +2881,17 @@
      "integrity": "sha1-/xnt6Kml5XkyQUewwR8PvLq+1jk=",
      "dev": true
    },
+    "clipboard": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.4.tgz",
+      "integrity": "sha512-Vw26VSLRpJfBofiVaFb/I8PVfdI1OxKcYShe6fm0sP/DtmiWQNCjhM/okTvdCo0G+lMMm1rMYbk4IK4x1X+kgQ==",
+      "optional": true,
+      "requires": {
+        "good-listener": "^1.2.2",
+        "select": "^1.1.2",
+        "tiny-emitter": "^2.0.0"
+      }
+    },
    "cliui": {
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/cliui/-/cliui-2.1.0.tgz",
@ -3909,6 +3926,12 @@
      "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=",
      "dev": true
    },
+    "delegate": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
+      "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==",
+      "optional": true
+    },
    "delegates": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
@ -5841,6 +5864,15 @@
        }
      }
    },
+    "good-listener": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
+      "integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=",
+      "optional": true,
+      "requires": {
+        "delegate": "^3.1.2"
+      }
+    },
    "graceful-fs": {
      "version": "4.1.11",
      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz",
@ -8425,6 +8457,11 @@
        "uc.micro": "^1.0.5"
      }
    },
+    "marked": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-0.5.2.tgz",
+      "integrity": "sha512-fdZvBa7/vSQIZCi4uuwo2N3q+7jJURpMVCcbaX0S1Mg65WZ5ilXvC67MviJAsdjqqgD+CEq4RKo5AYGgINkVAA=="
+    },
    "math-random": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/math-random/-/math-random-1.0.1.tgz",
@ -8810,6 +8847,16 @@
      "resolved": "https://registry.npmjs.org/ngx-color-picker/-/ngx-color-picker-7.2.0.tgz",
      "integrity": "sha512-n+PBgc5T37Gi84UFY0EUbgBwQe+rU3dj+azH87BW49flpTmF0G5nDQg/NaXS1hthzQPGXGwT4lsxsZ70Z3kZ5Q=="
    },
+    "ngx-md": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/ngx-md/-/ngx-md-7.0.0.tgz",
+      "integrity": "sha512-IMqjkc33lS8jlQXqrLh2McuhUFXrUKBfYH5VqCAcGa3QDBkiPOakh/CuYbI5KC8KQDZMe5fngSGMKgDNVBzR7g==",
+      "requires": {
+        "marked": "^0.5.0",
+        "prismjs": "^1.15.0",
+        "tslib": "^1.9.0"
+      }
+    },
    "nice-try": {
      "version": "1.0.5",
      "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
@ -10650,6 +10697,14 @@
        "utila": "~0.4"
      }
    },
+    "prismjs": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.15.0.tgz",
+      "integrity": "sha512-Lf2JrFYx8FanHrjoV5oL8YHCclLQgbJcVZR+gikGGMqz6ub5QVWDTM6YIwm3BuPxM/LOV+rKns3LssXNLIf+DA==",
+      "requires": {
+        "clipboard": "^2.0.0"
+      }
+    },
    "private": {
      "version": "0.1.8",
      "resolved": "https://registry.npmjs.org/private/-/private-0.1.8.tgz",
@ -11502,6 +11557,12 @@
        }
      }
    },
+    "select": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
+      "integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=",
+      "optional": true
+    },
    "select-hose": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@ -12699,6 +12760,12 @@
      "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=",
      "dev": true
    },
+    "tiny-emitter": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.0.2.tgz",
+      "integrity": "sha512-2NM0auVBGft5tee/OxP4PI3d8WItkDM+fPnaRAVo6xTDI2knbz9eC5ArWGqtGlYqiH3RU5yMpdyTTO7MguC4ow==",
+      "optional": true
+    },
    "tmp": {
      "version": "0.0.33",
      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
--- a/src/Squidex/package.json
+++ b/src/Squidex/package.json
@ -34,6 +34,7 @@
    "mousetrap": "1.6.2",
    "ng2-dnd": "5.0.2",
    "ngx-color-picker": "7.2.0",
+    "ngx-md": "^7.0.0",
    "oidc-client": "1.6.1",
    "pikaday": "1.8.0",
    "progressbar.js": "1.0.1",
@ -51,6 +52,7 @@
    "@ngtools/webpack": "7.1.4",
    "@types/core-js": "2.5.0",
    "@types/jasmine": "3.3.5",
+    "@types/marked": "^0.6.0",
    "@types/mousetrap": "1.6",
    "@types/node": "10.12.18",
    "@types/react": "16.7.18",