Handle #25

CHANGELOG.md

@@ -1,3 +1,7 @@
+## 1.1.11
+
+- Fix [#25](https://github.com/lon-yang/ngx-markdown-editor/issues/25), Support config markedjs
+
 ## 1.1.10
 
 - Fix [#24](https://github.com/lon-yang/ngx-markdown-editor/issues/24)

README.md

@@ -63,12 +63,13 @@ export class AppModule { }
 - hideToolbar: hide toolbar, default is false
 - mode: `editor` | `preview`, default is `editor`
 - options: other settings for editor
-  ```javascript
+  ```ts
   {  
-    showBorder: boolean       // Show editor component's border. Default is true
-    hideIcons: Array<string>  // ['Bold', 'Italic', 'Heading', 'Refrence', 'Link', 'Image', 'Ul', 'Ol', 'Code', 'TogglePreview', 'FullScreen']. Default is empty
-    scrollPastEnd: number     // The option for ace editor. Default is 0
-    enablePreviewContentClick: boolean  // Allow user fire the click event on the preview panel, like href etc. Default is false
+    showBorder?: boolean       // Show editor component's border. Default is true
+    hideIcons?: Array<string>  // ['Bold', 'Italic', 'Heading', 'Refrence', 'Link', 'Image', 'Ul', 'Ol', 'Code', 'TogglePreview', 'FullScreen']. Default is empty
+    scrollPastEnd?: number     // The option for ace editor. Default is 0
+    enablePreviewContentClick?: boolean  // Allow user fire the click event on the preview panel, like href etc. Default is false
+    markedjsOpt?: MarkedjsOption  // The markedjs option, see https://marked.js.org/#/USING_ADVANCED.md#options
   }
   ```
 - preRender(`Function`): For [#13](https://github.com/lon-yang/ngx-markdown-editor/issues/13), this will not effect `ngModel`'s value, just rendered value

demo/src/app/app.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { UploadResult } from './../../../src/public_api';
+import { UploadResult, MdEditorOption } from './../../../src/public_api';
 
 @Component({
   selector: 'app-root',
@@ -8,7 +8,7 @@ import { UploadResult } from './../../../src/public_api';
 })
 export class AppComponent {
 
-  public options: any = {
+  public options: MdEditorOption = {
     enablePreviewContentClick: false
   };
   public content: string;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-markdown-editor",
-  "version": "1.1.10",
+  "version": "1.1.11",
   "description": "Angular markdown editor based on ace editor",
   "main": "index.js",
   "scripts": {
@@ -34,7 +34,7 @@
     "@angular/platform-browser": ">=7.0.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^0.11.2",
+    "@angular-devkit/build-angular": "^0.11.4",
     "@angular/animations": "^7.1.0",
     "@angular/common": "^7.1.0",
     "@angular/compiler": "^7.1.0",
@@ -48,11 +48,11 @@
     "@angular/router": "^7.1.0",
     "@types/node": "^10.12.12",
     "core-js": "^2.6.0",
-    "ng-packagr": "^4.4.0",
+    "ng-packagr": "^4.4.5",
     "rxjs": "^6.3.3",
     "ts-node": "^7.0.1",
     "tsickle": "^0.34.0",
-    "tslint": "^5.11.0",
+    "tslint": "^5.12.0",
     "typescript": "^3.1.6",
     "zone.js": "^0.8.26"
   }

src/lib/md-editor.component.ts

@@ -47,7 +47,7 @@ export class MarkdownEditorComponent implements ControlValueAccessor, Validator
 
   @Input()
   public get options(): MdEditorOption {
-    return this._options;
+    return this._options || {};
   }
   public set options(value: MdEditorOption) {
     this._options = Object.assign(this._defaultOption, {}, value);
@@ -129,10 +129,11 @@ export class MarkdownEditorComponent implements ControlValueAccessor, Validator
         return `<li>${text}</li>`;
       }
     };
-    this._markedOpt = {
+    let markedjsOpt = {
       renderer: markedRender,
       highlight: (code: any) => hljs.highlightAuto(code).value
     };
+    this._markedOpt = Object.assign({}, this.options.markedjsOpt, markedjsOpt);
   }
 
   ngAfterViewInit() {

src/lib/md-editor.types.ts

@@ -1,12 +1,31 @@
 export interface MdEditorOption {
-  showBorder: boolean       // Show editor component's border
-  hideIcons: Array<string>  // ['Bold', 'Italic', 'Heading', 'Refrence', 'Link', 'Image', 'Ul', 'Ol', 'Code', 'TogglePreview', 'FullScreen'], Default is empty
-  scrollPastEnd: number     // The option for ace editor
-  enablePreviewContentClick: boolean  // Allow user fire the click event on the preview panel, like href etc.
+  showBorder?: boolean       // Show editor component's border
+  hideIcons?: Array<string>  // ['Bold', 'Italic', 'Heading', 'Refrence', 'Link', 'Image', 'Ul', 'Ol', 'Code', 'TogglePreview', 'FullScreen'], Default is empty
+  scrollPastEnd?: number     // The option for ace editor
+  enablePreviewContentClick?: boolean  // Allow user fire the click event on the preview panel, like href etc.
+  markedjsOpt?: MarkedjsOption // The markedjs option, see https://marked.js.org/#/USING_ADVANCED.md#options
 }
 
 export interface UploadResult {
   isImg: boolean
   name: string
   url: string
 }
+
+export interface MarkedjsOption {
+  baseUrl?: string             // Default null
+  breaks?: boolean             // Default false
+  gfm?: boolean                // Default true
+  headerIds?: boolean          // Default true
+  headerPrefix?: string        // Default ''
+  langPrefix?: string          // Default 'language-'
+  mangle?: boolean             // Default true
+  pedantic?: boolean           // Default false
+  sanitize?: boolean           // Default false
+  sanitizer?: Function         // Default null
+  silent?: boolean             // Default false
+  smartLists?: boolean         // Default false
+  smartypants?: boolean        // Default false
+  tables?: boolean             // Default true
+  xhtml?: boolean              // Default false
+}

src/public_api.ts

@@ -5,7 +5,7 @@ import { FormsModule } from '@angular/forms';
 import { MarkdownEditorComponent } from './lib/md-editor.component';
 
 export { MarkdownEditorComponent } from './lib/md-editor.component';
-export { MdEditorOption, UploadResult } from './lib/md-editor.types';
+export { MdEditorOption, UploadResult, MarkedjsOption } from './lib/md-editor.types';
 
 @NgModule({
   declarations: [