diff --git a/src/Squidex/app/app.module.ts b/src/Squidex/app/app.module.ts index b65f53064..c2b9ad383 100644 --- 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(), diff --git a/src/Squidex/app/framework/module.ts b/src/Squidex/app/framework/module.ts index baa3fdf9b..eb0256e95 100644 --- 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, diff --git a/src/Squidex/app/shared/components/help.component.html b/src/Squidex/app/shared/components/help.component.html index 2332909c0..7f4a96e59 100644 --- a/src/Squidex/app/shared/components/help.component.html +++ b/src/Squidex/app/shared/components/help.component.html @@ -4,6 +4,8 @@ -

+
+ +
\ No newline at end of file diff --git a/src/Squidex/app/shared/components/help.component.scss b/src/Squidex/app/shared/components/help.component.scss index 54a83699e..fbb752506 100644 --- 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; -} \ No newline at end of file +@import '_mixins'; \ No newline at end of file diff --git a/src/Squidex/app/shared/components/help.component.ts b/src/Squidex/app/shared/components/help.component.ts index 19059f168..7c27630ad 100644 --- 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 `${text} `; + }; } } \ No newline at end of file diff --git a/src/Squidex/app/shared/module.ts b/src/Squidex/app/shared/module.ts index 86d149e11..c596679d5 100644 --- 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 ], diff --git a/src/Squidex/app/shared/services/help.service.spec.ts b/src/Squidex/app/shared/services/help.service.spec.ts index f1e5d40bc..ab1ebb3e4 100644 --- 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 Link' - }, - { - content: 'A test content with a Glossary Link' - } - ] - }); + req.flush('Markdown'); - expect(helpSections!).toEqual( - [ - 'A test content with', - 'A test content with a A Link', - 'A test content with a Glossary Link' - ]); + 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({}); - expect(helpSections!).toEqual([]); + expect(helpSections!).toEqual(''); })); }); \ No newline at end of file diff --git a/src/Squidex/app/shared/services/help.service.ts b/src/Squidex/app/shared/services/help.service.ts index 1c7138243..dd5e4a535 100644 --- 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 { - const url = `https://api.gitbook.com/book/squidex/squidex/contents/${helpPage}.json`; + public getHelp(helpPage: string): Observable { + 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 response; }), - catchError(error => of([]))); + catchError(error => of(''))); } } \ No newline at end of file diff --git a/src/Squidex/package-lock.json b/src/Squidex/package-lock.json index 27b45ef54..e9c47604f 100644 --- 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", diff --git a/src/Squidex/package.json b/src/Squidex/package.json index 7dee8bd83..bcb841deb 100644 --- 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",