feat: support antd styles.

README.md

@@ -1,6 +1,6 @@
 # ngx-simplemde
 
-Angular for [simplemde](https://simplemde.com/).
+Angular for [simplemde](https://simplemde.com/), better use [ng-zorro-antd](https://ng.ant.design/) components.
 
 [![NPM version](https://img.shields.io/npm/v/ngx-simplemde.svg)](https://www.npmjs.com/package/ngx-simplemde)
 [![Build Status](https://travis-ci.org/cipchk/ngx-simplemde.svg?branch=master)](https://travis-ci.org/cipchk/ngx-simplemde)
@@ -31,25 +31,18 @@ import { SimplemdeModule } from 'ngx-simplemde';
 export class AppModule { }
 ```
 
-3. Add `simplemde.min.js` to `angular.json`.
+3. Add `simplemde-antd.min.js` and styles to `angular.json`.
 
 ```
 "styles": [
-  "node_modules/simplemde/dist/simplemde.min.css",
+  "node_modules/ngx-simplemde/src/index.css",
   "src/styles.css"
 ],
 "scripts": [
-  "node_modules/simplemde/dist/simplemde.min.js"
+  "node_modules/simplemde-antd/dist/simplemde.min.js"
 ]
 ```
 
-or using cdn in `index.html`.
-
-```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">
-<script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>
-```
-
 4. Happy coding.
 
 ```html

angular.json

@@ -18,10 +18,11 @@
             "polyfills": "src/polyfills.ts",
             "assets": ["src/assets"],
             "styles": [
-              "node_modules/simplemde/dist/simplemde.min.css",
+              "node_modules/ng-zorro-antd/src/ng-zorro-antd.css",
+              "lib/index.less",
               "src/styles.less"
             ],
-            "scripts": ["node_modules/simplemde/dist/simplemde.min.js"]
+            "scripts": ["node_modules/simplemde-antd/dist/simplemde.min.js"]
           },
           "configurations": {
             "production": {
@@ -67,7 +68,7 @@
             "tsConfig": "lib/tsconfig.spec.json",
             "karmaConfig": "karma.conf.js",
             "polyfills": "src/polyfills.ts",
-            "scripts": ["node_modules/simplemde/dist/simplemde.min.js"],
+            "scripts": ["node_modules/simplemde-antd/dist/simplemde.min.js"],
             "styles": [],
             "assets": ["src/assets"]
           }

build.sh

@@ -53,3 +53,6 @@ cp package.json publish/package.json
 
 echo 'Copying README.md'
 cp README.md publish/README.md
+
+echo 'Copying less'
+node ./scripts/generate-style.js

lib/index.less

@@ -0,0 +1,5 @@
+@import './styles/_var.less';
+@import './styles/icon.less';
+@import './styles/codemirror.less';
+@import './styles/antd.less';
+@import './styles/fix.less';

lib/src/component.ts

@@ -44,19 +44,44 @@ export class SimplemdeComponent
   private onTouched: () => void;
 
   @Input() options: any;
+  /** 风格，默认：`antd` */
+  @Input() style: 'default' | 'antd';
+  /** 延迟初始化 */
+  @Input() delay: number;
 
   constructor(
     private cog: SimplemdeConfig,
     private cd: ChangeDetectorRef,
     private zone: NgZone,
-  ) {}
+  ) {
+    this.style = cog.style;
+    this.delay = cog.delay || 0;
+  }
+
+  private initDelay() {
+    if (this.delay > 0) {
+      setTimeout(() => this.init(), this.delay);
+    } else {
+      this.init();
+    }
+  }
 
   private init() {
     if (typeof SimpleMDE === 'undefined') {
       throw new Error(`Could not find SimpleMDE object.`);
     }
     this.destroy();
-    const config = { ...this.cog, ...this.options };
+    const config = Object.assign(
+      {},
+      this.cog,
+      this.options,
+      this.style === 'antd'
+        ? {
+            spellChecker: false,
+            autoDownloadFontAwesome: false,
+          }
+        : {},
+    );
     config.element = this.con.nativeElement;
     this.zone.runOutsideAngular(() => {
       this.instance = new SimpleMDE(config);
@@ -78,13 +103,13 @@ export class SimplemdeComponent
   }
 
   ngAfterViewInit(): void {
-    this.init();
+    this.initDelay();
   }
 
   ngOnChanges(
     changes: { [P in keyof this]?: SimpleChange } & SimpleChanges,
   ): void {
-    if (!changes.options.firstChange) this.init();
+    if (!changes.options.firstChange) this.initDelay();
   }
 
   /**
@@ -102,7 +127,7 @@ export class SimplemdeComponent
 
   // reuse-tab: http://ng-alain.com/components/reuse-tab#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F
   _onReuseInit() {
-    this.init();
+    this.initDelay();
   }
 
   writeValue(value: string): void {

lib/src/config.ts

@@ -1,3 +1,12 @@
 export class SimplemdeConfig {
-  [key: string]: any;
+  /**
+   * 风格，默认：`antd`
+   */
+  style?: 'default' | 'antd' = 'antd';
+  /**
+   * 延迟初始化
+   */
+  delay?: number;
+  /** 全局 `options` */
+  options?: { [key: string]: any };
 }

lib/styles/_var.less

@@ -0,0 +1,8 @@
+@simplemde-icon-url: '//at.alicdn.com/t/font_700857_mnodkd1cp9l766r';
+@simplemde-zindex: 3000;
+@simplemde-min-height: 200px;
+
+@simplemde-statusbar-lines: '行数：';
+@simplemde-statusbar-words: '字符：';
+@simplemde-statusbar-characters: '字符：';
+@simplemde-statusbar-counts: '字数：';