tsai
/
squidex
mirror of https://github.com/Squidex/squidex.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

add markdown and rich text editor as dependencies

pull/533/head
Ruud Faessen 6 years ago
parent
6871960e5e
commit
0151ad36c1
4 changed files with 163 additions and 123 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 11
      frontend/app/shared/components/forms/markdown-editor.component.ts
  2. 20
      frontend/app/shared/components/forms/rich-editor.component.ts
  3. 34
      frontend/package-lock.json
  4. 3
      frontend/package.json

11
frontend/app/shared/components/forms/markdown-editor.component.ts
View File

@ -7,10 +7,11 @@
import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, forwardRef, Renderer2, ViewChild } from '@angular/core'; import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, forwardRef, Renderer2, ViewChild } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms'; import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { ApiUrlConfig, AssetDto, AssetUploaderState, DialogModel, ResourceLoaderService, StatefulControlComponent, Types, UploadCanceled } from '@app/shared/internal'; import { ApiUrlConfig, AssetDto, AssetUploaderState, DialogModel, StatefulControlComponent, Types, UploadCanceled } from '@app/shared/internal';
import marked from 'marked'; import marked from 'marked';
declare var SimpleMDE: any; import SimpleMDE from 'simplemde';
import 'simplemde/dist/simplemde.min.css';
export const SQX_MARKDOWN_EDITOR_CONTROL_VALUE_ACCESSOR: any = { export const SQX_MARKDOWN_EDITOR_CONTROL_VALUE_ACCESSOR: any = {
provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => MarkdownEditorComponent), multi: true provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => MarkdownEditorComponent), multi: true
@ -49,8 +50,7 @@ export class MarkdownEditorComponent extends StatefulControlComponent<State, str
constructor(changeDetector: ChangeDetectorRef, constructor(changeDetector: ChangeDetectorRef,
private readonly apiUrl: ApiUrlConfig, private readonly apiUrl: ApiUrlConfig,
private readonly assetUploader: AssetUploaderState, private readonly assetUploader: AssetUploaderState,
private readonly renderer: Renderer2, private readonly renderer: Renderer2
private readonly resourceLoader: ResourceLoaderService
) { ) {
super(changeDetector, { super(changeDetector, {
isFullscreen: false isFullscreen: false
@ -82,8 +82,6 @@ export class MarkdownEditorComponent extends StatefulControlComponent<State, str
} }
public ngAfterViewInit() { public ngAfterViewInit() {
this.resourceLoader.loadStyle('https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css');
this.resourceLoader.loadScript('https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js').then(() => {
this.simplemde = new SimpleMDE({ this.simplemde = new SimpleMDE({
previewRender: (text: string) => { previewRender: (text: string) => {
return marked(text, { pedantic: true }); return marked(text, { pedantic: true });
@ -198,7 +196,6 @@ export class MarkdownEditorComponent extends StatefulControlComponent<State, str
this.simplemde.codemirror.on('blur', () => { this.simplemde.codemirror.on('blur', () => {
this.callTouched(); this.callTouched();
}); });
});
} }
public insertAssets(assets: ReadonlyArray<AssetDto>) { public insertAssets(assets: ReadonlyArray<AssetDto>) {

20
frontend/app/shared/components/forms/rich-editor.component.ts
View File

@ -9,9 +9,19 @@
import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, forwardRef, OnDestroy, Output, ViewChild } from '@angular/core'; import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, forwardRef, OnDestroy, Output, ViewChild } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms'; import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { ApiUrlConfig, AssetDto, AssetUploaderState, DialogModel, ResourceLoaderService, StatefulControlComponent, Types, UploadCanceled } from '@app/shared/internal'; import { ApiUrlConfig, AssetDto, AssetUploaderState, DialogModel, StatefulControlComponent, Types, UploadCanceled } from '@app/shared/internal';
declare var tinymce: any; import tinymce from 'tinymce';
import 'tinymce/themes/silver';
import 'tinymce/plugins/advlist';
import 'tinymce/plugins/code';
import 'tinymce/plugins/image';
import 'tinymce/plugins/link';
import 'tinymce/plugins/lists';
import 'tinymce/plugins/media';
import 'tinymce/plugins/paste';
import 'tinymce/skins/ui/oxide/skin.min.css';
export const SQX_RICH_EDITOR_CONTROL_VALUE_ACCESSOR: any = { export const SQX_RICH_EDITOR_CONTROL_VALUE_ACCESSOR: any = {
provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => RichEditorComponent), multi: true provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => RichEditorComponent), multi: true
@ -48,8 +58,7 @@ export class RichEditorComponent extends StatefulControlComponent<undefined, str
constructor(changeDetector: ChangeDetectorRef, constructor(changeDetector: ChangeDetectorRef,
private readonly apiUrl: ApiUrlConfig, private readonly apiUrl: ApiUrlConfig,
private readonly assetUploader: AssetUploaderState, private readonly assetUploader: AssetUploaderState
private readonly resourceLoader: ResourceLoaderService
) { ) {
super(changeDetector, undefined); super(changeDetector, undefined);
} }
@ -62,7 +71,6 @@ export class RichEditorComponent extends StatefulControlComponent<undefined, str
} }
public ngAfterViewInit() { public ngAfterViewInit() {
this.resourceLoader.loadScript('https://cdnjs.cloudflare.com/ajax/libs/tinymce/5.2.0/tinymce.min.js').then(() => {
const timer = setInterval(() => { const timer = setInterval(() => {
const target = this.editor.nativeElement; const target = this.editor.nativeElement;
@ -72,7 +80,6 @@ export class RichEditorComponent extends StatefulControlComponent<undefined, str
clearInterval(timer); clearInterval(timer);
} }
}, 10); }, 10);
});
} }
public reset() { public reset() {
@ -96,7 +103,6 @@ export class RichEditorComponent extends StatefulControlComponent<undefined, str
return { return {
...DEFAULT_PROPS, ...DEFAULT_PROPS,
images_upload_handler: (blob: any, success: (url: string) => void, failure: (message: string) => void) => { images_upload_handler: (blob: any, success: (url: string) => void, failure: (message: string) => void) => {
const file = new File([blob.blob()], blob.filename(), { lastModified: new Date().getTime() }); const file = new File([blob.blob()], blob.filename(), { lastModified: new Date().getTime() });

34
frontend/package-lock.json
View File

@ -573,6 +573,12 @@
"@types/react": "*" "@types/react": "*"
} }
}, },
"@types/simplemde": {
"version": "1.11.7",
"resolved": "https://registry.npmjs.org/@types/simplemde/-/simplemde-1.11.7.tgz",
"integrity": "sha512-b3yirBar1gqb9clgJJKpx+Or3txkOOkm5sffhRKaBUfh7+1D2Aimx2RKXGS1LK9S5KyNmug3lwpGJtaID9cOnA==",
"dev": true
},
"@types/sizzle": { "@types/sizzle": {
"version": "2.3.2", "version": "2.3.2",
"resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.2.tgz", "resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.2.tgz",
@ -2300,6 +2306,14 @@
"graphql-language-service-parser": "^1.5.2" "graphql-language-service-parser": "^1.5.2"
} }
}, },
"codemirror-spell-checker": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/codemirror-spell-checker/-/codemirror-spell-checker-1.1.2.tgz",
"integrity": "sha1-HGYPkIlIPMtRE7m6nKGcP0mTNx4=",
"requires": {
"typo-js": "*"
}
},
"collection-visit": { "collection-visit": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/collection-visit/-/collection-visit-1.0.0.tgz", "resolved": "https://registry.npmjs.org/collection-visit/-/collection-visit-1.0.0.tgz",
@ -11181,6 +11195,16 @@
} }
} }
}, },
"simplemde": {
"version": "1.11.2",
"resolved": "https://registry.npmjs.org/simplemde/-/simplemde-1.11.2.tgz",
"integrity": "sha1-ojo12XjSxA7wfewAjJLwcNjggOM=",
"requires": {
"codemirror": "*",
"codemirror-spell-checker": "*",
"marked": "*"
}
},
"slice-ansi": { "slice-ansi": {
"version": "0.0.4", "version": "0.0.4",
"resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-0.0.4.tgz", "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-0.0.4.tgz",
@ -12293,6 +12317,11 @@
"integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=", "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=",
"dev": true "dev": true
}, },
"tinymce": {
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/tinymce/-/tinymce-5.2.0.tgz",
"integrity": "sha512-Q7KAu9sLB6TBhKFdb2LHPGy770zkSEjpN1VRqZ6pxNuVQ0mbGWgMocHDvM9XL9yJaOhFrJP6s9XM7zG2gapGpA=="
},
"tmp": { "tmp": {
"version": "0.0.33", "version": "0.0.33",
"resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz", "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
@ -12627,6 +12656,11 @@
"integrity": "sha512-MYlEfn5VrLNsgudQTVJeNaQFUAI7DkhnOjdpAp4T+ku1TfQClewlbSuTVHiA+8skNBgaf02TL/kLOvig4y3G8w==", "integrity": "sha512-MYlEfn5VrLNsgudQTVJeNaQFUAI7DkhnOjdpAp4T+ku1TfQClewlbSuTVHiA+8skNBgaf02TL/kLOvig4y3G8w==",
"dev": true "dev": true
}, },
"typo-js": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/typo-js/-/typo-js-1.1.0.tgz",
"integrity": "sha512-W3kLbx+ML9PBl5Bzso/lTvVxk4BCveSNAtQeht59FEtxCdGThmn6wSHA4Xq3eQYAK24NHdisMM4JmsK0GFy/pg=="
},
"uc.micro": { "uc.micro": {
"version": "1.0.6", "version": "1.0.6",
"resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz", "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz",

3
frontend/package.json
View File

@ -45,7 +45,9 @@
"react": "16.10.2", "react": "16.10.2",
"react-dom": "16.10.2", "react-dom": "16.10.2",
"rxjs": "6.5.4", "rxjs": "6.5.4",
"simplemde": "^1.11.2",
"slugify": "1.4.0", "slugify": "1.4.0",
"tinymce": "^5.2.0",
"tslib": "1.11.1", "tslib": "1.11.1",
"zone.js": "0.10.3" "zone.js": "0.10.3"
}, },
@ -62,6 +64,7 @@
"@types/node": "13.7.4", "@types/node": "13.7.4",
"@types/react": "16.9.21", "@types/react": "16.9.21",
"@types/react-dom": "16.9.5", "@types/react-dom": "16.9.5",
"@types/simplemde": "^1.11.2",
"@types/tinymce": "4.5.24", "@types/tinymce": "4.5.24",
"browserslist": "4.9.1", "browserslist": "4.9.1",
"caniuse-lite": "1.0.30001055", "caniuse-lite": "1.0.30001055",

Write Preview
Loading…
Cancel
Save