doxiaodong / ng2-simplemde

angular2 component of https://github.com/sparksuite/simplemde-markdown-editor

simplemde-markdown-editor with Angular

demo

https://doxiaodong.github.io/ng2-simplemde

Usage

• install npm i ng2-simplemde --save

import { NgModule } from '@angular/core'
import { SimplemdeModule, SIMPLEMDE_CONFIG } from 'ng2-simplemde'
@NgModule({
  imports: [
    SimplemdeModule.forRoot({
      provide: SIMPLEMDE_CONFIG,
      // config options 1
      useValue: $options1
    })
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

<!-- config options 2 -->
<simplemde [(ngModel)]="value" [options]="$options2" [codemirror]="{ lineNumbers: true }"></simplemde>

1. The final options is {...$options1, ...$options2}, Object.assign({}, $options1, $options2)
2. The element option is not useful
3. codemirror is option set for codemirror, see https://github.com/codemirror/CodeMirror

Webpack

• you should add style-loader!css-loader in your webpack config
• If you use angular-cli, you can add style-loader!css-loader as pug-loader in angular/angular-cli#1886.

Style

• normal, it use import 'simplemde/dist/simplemde.min.css'
• you can use a cdn

import { SimplemdeModule, SIMPLEMDE_CONFIG } from 'ng2-simplemde/no-style'

and in index.html

<link href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css" rel="stylesheet">

• Bundles use don't support this

ng2-simplemde's Issues

Added non-passive event listener to a scroll-blocking <some> event

Hello,

I'm using this module with Angular 6 and it works great (thanks for the implementation). However, I have the following warning in console log :

[Violation] Added non-passive event listener to a scroll-blocking <some> event. Consider marking event handler as 'passive' to make the page more responsive. See <URL>

Is there something I did wrongly ?

Thanks,

doesn't work with Angular Universal

Trying to get ng2-simplemde implemented with Angular Universal. Seems like the code mirror package is using the navigator object quite extensively without proper checking, resulting in a crash when serving.

I know that since the issue is in code mirror the knee jerk reaction will be to say it's not in the scope of this project, but I figured the simplemde project isn't going to care about Angular Universal and I know codemirror won't, so I figured this is the best place to start

how to implement

I have been trying to implement this into my angular application for the last 4 days now...
Could you please help me out because I need this but I don't understand how to use it.

I've done the npm install and added it to my app.module.

I need to be able to create more or less the exact same editor screen as in the demo and will also need to extract the value of this area when a user has filled it in.

As far as I understand with this package I should easily be able to implement the full 'window' of this editor or am I completely wrong and should I construct this 'window' myself and this package will help me with a completely different part.

(I only started coding about 8 months ago and oonly a week ago I heard about markdown for the first time since I needed to use it... some things that should be obvious often are not yet obvious to me, sorry ...)

kind regards

Importing Module in Angular 4.4.3 results in an error

In Angular 4.4.3 importing the SimplemdeModule results in a compiler error.

I tried the import with this two ways

SimplemdeModule.forRoot(),

SimplemdeModule.forRoot({
    provide: SIMPLEMDE_CONFIG,
    useValue: {}
})

which results in this error for both variants

ERROR in Error: Error encountered resolving symbol values statically. Calling function 'SimplemdeModule', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol <module> in <pathToModule> [...]

AFAIK this is because of missing compiler flags. Seems to be an issue with AOT.

Warning: Entry point 'ng2-simplemde' contains deep imports

Waring when ng serve

Warning: Entry point 'ng2-simplemde' contains deep imports into '/Users/xxx/node_modules/simplemde/dist/simplemde.min.css'. This is probably not a problem, but may cause the compilation of entry points to be out of order.

Angular CLI: 9.1.3
Node: 12.14.0
OS: macOS

syntax error importing the module

Loading the module works.
However as soon as I do:

    SimplemdeModule.forRoot({
      provide: SIMPLEMDE_CONFIG,
      useValue: {
        placeholder: 'placeholder'
      }
    })

I get a syntax error crashing the loading process in the browser.
Tracing it back I get:
export * from './src'; => Uncaught SyntaxError: Unexpected token export
in node_modules/ng2-simplemde/index.js

This could be related: ngx-translate/core#291 (similar error message)

Ideas on how to fix it?

simplemde.min.css not getting injected in Angular 5.1

I just import the module and use it inside a component. The CSS does not get injected (so the view is
completely broken).
I import SimplemdeModule.forRoot() inside the module that has my component.

What info do you need to help me debug this?

EDIT: I added "../node_modules/simplemde/dist/simplemde.min.css" to my angular-cli.json and it works, but I don't like this approach.

how to change the options?

Hello,

I've been trying to change the 'options', both in the app.module in .forRoot and in the simplemde selector with [options]="{...}" but I can't get it to work.
I'm trying to set autosave enabled to 'true'.

I've tried this in app module....

SimplemdeModule.forRoot({ provide: SIMPLEMDE_CONFIG, useValue: { autosave: { enabled: true, }, placeholder: 'placeholder' } }),

and tried many different ways of something similar to this in the the component where I'm implementing the markdown editor

<simplemde formControlName="key" [options]="{autosave.enable: true}"></simplemde>

Thank you,
Kind regards!

Readonly mode

[disabled] in angular does not work with simplemde. How can a readOnly simplemde be created?

Angular 6 Compat

Hi,

Firstly, thanks for your module, works very well. From npm install

npm WARN [email protected] requires a peer of @angular/common@^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of @angular/core@^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of @angular/forms@^5.0.0 but none is installed. You must install peer dependencies yourself.

There are no actually incompatibilities with Angular 6 as far as I've tested, could you remove the warning?

thanks in advance

moderate severity vulnerability

npm audit result:
Moderate : Moderate severity vulnerability that affects simplemde
Package : simplemde
Patched in : No patch available
Dependency of : ng2-simplemde
Path : ng2-simplemde > simplemde
More info : GHSA-wg85-p6j7-gp3w

.

ng version:
Angular CLI: 13.3.9
Node: 14.21.1
Package Manager: npm 6.14.17
OS: darwin x64

Angular: 13.3.11
... animations, common, compiler, compiler-cli, core, forms
... localize, platform-browser, platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.1303.9
@angular-devkit/build-angular 13.3.9
@angular-devkit/core 13.3.9
@angular-devkit/schematics 13.3.9
@angular/cli 13.3.9
@schematics/angular 13.3.9
rxjs 7.5.7
typescript 4.6.4

Error: SimplemdeModule.forRoot returns a ModuleWithProviders type without a generic type argument.

SimplemdeModule.forRoot returns a ModuleWithProviders type without a generic type argument. Please add a generic type argument to the ModuleWithProviders type. If this occurrence is in library code you don't control, please contact the library authors.

Runtime error: Module parse failed

Do you know what I did wrong here? :)

All I did was install: npm i ng2-simplemde --save
And configure the import im app.module.ts:

...
export function simplemdeValue() {
  return {
    toolbar: [
      'bold',
      'italic',
      'heading',
      'quote',
      'unordered-list',
      'ordered-list',
      '|',
      'image',
      'link',
      'preview',
    ],
    status: false
  }
}
...
  imports: [
    ...,
    SimplemdeModule.forRoot({
      provide: SIMPLEMDE_CONFIG,
      // config options 1
      useValue: simplemdeValue()
    })
  ],
...

Stack trace:

Stack
Error: Module parse failed: /Users/eraldo/Documents/colegend/coapp_project/coapp3/node_modules/simplemde/dist/simplemde.min.css Unexpected token (7:0)
You may need an appropriate loader to handle this file type.
|  * @license MIT
|  */
| .CodeMirror{color:#000}.CodeMirror-lines{padding:4px 0}.CodeMirror pre{padding:0 4px}.CodeMirror-gutter-filler,.CodeMirror-scrollbar-filler{background-color:#fff}.CodeMirror-gutters{border-right:1px solid #ddd;background-color:#f7f7f7;white-space:nowrap}.CodeMirror-linenumber{padding:0 3px 0 5px;min-width:20px;text-align:right;color:#999;white-space:nowrap}.CodeMirror-guttermarker{color:#000}.CodeMirror-guttermarker-subtle{color:#999}.CodeMirror-cursor{border-left:1px solid #000;border-right:none;width:0}.CodeMirror div.CodeMirror-secondarycursor{border-left:1px solid silver}.cm-fat-cursor .CodeMirror-cursor{width:auto;border:0!important;background:#7e7}.cm-fat-cursor div.CodeMirror-cursors{z-index:1}.cm-animate-fat-cursor{width:auto;border:0;-webkit-animation:blink 1.06s steps(1) infinite;-moz-animation:blink 1.06s steps(1) infinite;animation:blink 1.06s steps(1) infinite;background-color:#7e7}@-moz-keyframes blink{50%{background-color:transparent}}@-webkit-keyframes blink{50%{background-color:transparent}}@keyframes blink{50%{background-color:transparent}}.cm-tab{display:inline-block;text-decoration:inherit}.CodeMirror-ruler{border-left:1px solid #ccc;position:absolute}.cm-s-default .cm-header{color:#00f}.cm-s-default .cm-quote{color:#090}.cm-negative{color:#d44}.cm-positive{color:#292}.cm-header,.cm-strong{font-weight:700}.cm-em{font-style:italic}.cm-link{text-decoration:underline}.cm-strikethrough{text-decoration:line-through}.cm-s-default .cm-keyword{color:#708}.cm-s-default .cm-atom{color:#219}.cm-s-default .cm-number{color:#164}.cm-s-default .cm-def{color:#00f}.cm-s-default .cm-variable-2{color:#05a}.cm-s-default .cm-variable-3{color:#085}.cm-s-default .cm-comment{color:#a50}.cm-s-default .cm-string{color:#a11}.cm-s-default .cm-string-2{color:#f50}.cm-s-default .cm-meta,.cm-s-default .cm-qualifier{color:#555}.cm-s-default .cm-builtin{color:#30a}.cm-s-default .cm-bracket{color:#997}.cm-s-default .cm-tag{color:#170}.cm-s-default .cm-attribute{color:#00c}.cm-s-default .cm-hr{color:#999}.cm-s-default .cm-link{color:#00c}.cm-invalidchar,.cm-s-default .cm-error{color:red}.CodeMirror-composing{border-bottom:2px solid}div.CodeMirror span.CodeMirror-matchingbracket{color:#0f0}div.CodeMirror span.CodeMirror-nonmatchingbracket{color:#f22}.CodeMirror-matchingtag{background:rgba(255,150,0,.3)}.CodeMirror-activeline-background{background:#e8f2ff}.CodeMirror{position:relative;overflow:hidden;background:#fff}.CodeMirror-scroll{overflow:scroll!important;margin-bottom:-30px;margin-right:-30px;padding-bottom:30px;height:100%;outline:0;position:relative}.CodeMirror-sizer{position:relative;border-right:30px solid transparent}.CodeMirror-gutter-filler,.CodeMirror-hscrollbar,.CodeMirror-scrollbar-filler,.CodeMirror-vscrollbar{position:absolute;z-index:6;display:none}.CodeMirror-vscrollbar{right:0;top:0;overflow-x:hidden;overflow-y:scroll}.CodeMirror-hscrollbar{bottom:0;left:0;overflow-y:hidden;overflow-x:scroll}.CodeMirror-scrollbar-filler{right:0;bottom:0}.CodeMirror-gutter-filler{left:0;bottom:0}.CodeMirror-gutters{position:absolute;left:0;top:0;min-height:100%;z-index:3}.CodeMirror-gutter{white-space:normal;height:100%;display:inline-block;vertical-align:top;margin-bottom:-30px}.CodeMirror-gutter-wrapper{position:absolute;z-index:4;background:0 0!important;border:none!important;-webkit-user-select:none;-moz-user-select:none;user-select:none}.CodeMirror-gutter-background{position:absolute;top:0;bottom:0;z-index:4}.CodeMirror-gutter-elt{position:absolute;cursor:default;z-index:4}.CodeMirror-lines{cursor:text;min-height:1px}.CodeMirror pre{-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;border-width:0;background:0 0;font-family:inherit;font-size:inherit;margin:0;white-space:pre;word-wrap:normal;line-height:inherit;color:inherit;z-index:2;position:relative;overflow:visible;-webkit-tap-highlight-color:transparent;-webkit-font-variant-ligatures:none;font-variant-ligatures:none}.CodeMirror-wrap pre{word-wrap:break-word;white-space:pre-wrap;word-break:normal}.CodeMirror-linebackground{position:absolute;left:0;right:0;top:0;bottom:0;z-index:0}.CodeMirror-linewidget{position:relative;z-index:2;overflow:auto}.CodeMirror-code{outline:0}.CodeMirror-gutter,.CodeMirror-gutters,.CodeMirror-linenumber,.CodeMirror-scroll,.CodeMirror-sizer{-moz-box-sizing:content-box;box-sizing:content-box}.CodeMirror-measure{position:absolute;width:100%;height:0;overflow:hidden;visibility:hidden}.CodeMirror-cursor{position:absolute}.CodeMirror-measure pre{position:static}div.CodeMirror-cursors{visibility:hidden;position:relative;z-index:3}.CodeMirror-focused div.CodeMirror-cursors,div.CodeMirror-dragcursors{visibility:visible}.CodeMirror-selected{background:#d9d9d9}.CodeMirror-focused .CodeMirror-selected,.CodeMirror-line::selection,.CodeMirror-line>span::selection,.CodeMirror-line>span>span::selection{background:#d7d4f0}.CodeMirror-crosshair{cursor:crosshair}.CodeMirror-line::-moz-selection,.CodeMirror-line>span::-moz-selection,.CodeMirror-line>span>span::-moz-selection{background:#d7d4f0}.cm-searching{background:#ffa;background:rgba(255,255,0,.4)}.cm-force-border{padding-right:.1px}@media print{.CodeMirror div.CodeMirror-cursors{visibility:hidden}}.cm-tab-wrap-hack:after{content:''}span.CodeMirror-selectedtext{background:0 0}.CodeMirror{height:auto;min-height:300px;border:1px solid #ddd;border-bottom-left-radius:4px;border-bottom-right-radius:4px;padding:10px;font:inherit;z-index:1}.CodeMirror-scroll{min-height:300px}.CodeMirror-fullscreen{background:#fff;position:fixed!important;top:50px;left:0;right:0;bottom:0;height:auto;z-index:9}.CodeMirror-sided{width:50%!important}.editor-toolbar{position:relative;opacity:.6;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;padding:0 10px;border-top:1px solid #bbb;border-left:1px solid #bbb;border-right:1px solid #bbb;border-top-left-radius:4px;border-top-right-radius:4px}.editor-toolbar:after,.editor-toolbar:before{display:block;content:' ';height:1px}.editor-toolbar:before{margin-bottom:8px}.editor-toolbar:after{margin-top:8px}.editor-toolbar:hover,.editor-wrapper input.title:focus,.editor-wrapper input.title:hover{opacity:.8}.editor-toolbar.fullscreen{width:100%;height:50px;overflow-x:auto;overflow-y:hidden;white-space:nowrap;padding-top:10px;padding-bottom:10px;box-sizing:border-box;background:#fff;border:0;position:fixed;top:0;left:0;opacity:1;z-index:9}.editor-toolbar.fullscreen::before{width:20px;height:50px;background:-moz-linear-gradient(left,rgba(255,255,255,1) 0,rgba(255,255,255,0) 100%);background:-webkit-gradient(linear,left top,right top,color-stop(0,rgba(255,255,255,1)),color-stop(100%,rgba(255,255,255,0)));background:-webkit-linear-gradient(left,rgba(255,255,255,1) 0,rgba(255,255,255,0) 100%);background:-o-linear-gradient(left,rgba(255,255,255,1) 0,rgba(255,255,255,0) 100%);background:-ms-linear-gradient(left,rgba(255,255,255,1) 0,rgba(255,255,255,0) 100%);background:linear-gradient(to right,rgba(255,255,255,1) 0,rgba(255,255,255,0) 100%);position:fixed;top:0;left:0;margin:0;padding:0}.editor-toolbar.fullscreen::after{width:20px;height:50px;background:-moz-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,1) 100%);background:-webkit-gradient(linear,left top,right top,color-stop(0,rgba(255,255,255,0)),color-stop(100%,rgba(255,255,255,1)));background:-webkit-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,1) 100%);background:-o-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,1) 100%);background:-ms-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,1) 100%);background:linear-gradient(to right,rgba(255,255,255,0) 0,rgba(255,255,255,1) 100%);position:fixed;top:0;right:0;margin:0;padding:0}.editor-toolbar a{display:inline-block;text-align:center;text-decoration:none!important;color:#2c3e50!important;width:30px;height:30px;margin:0;border:1px solid transparent;border-radius:3px;cursor:pointer}.editor-toolbar a.active,.editor-toolbar a:hover{background:#fcfcfc;border-color:#95a5a6}.editor-toolbar a:before{line-height:30px}.editor-toolbar i.separator{display:inline-block;width:0;border-left:1px solid #d9d9d9;border-right:1px solid #fff;color:transparent;text-indent:-10px;margin:0 6px}.editor-toolbar a.fa-header-x:after{font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;font-size:65%;vertical-align:text-bottom;position:relative;top:2px}.editor-toolbar a.fa-header-1:after{content:"1"}.editor-toolbar a.fa-header-2:after{content:"2"}.editor-toolbar a.fa-header-3:after{content:"3"}.editor-toolbar a.fa-header-bigger:after{content:"▲"}.editor-toolbar a.fa-header-smaller:after{content:"▼"}.editor-toolbar.disabled-for-preview a:not(.no-disable){pointer-events:none;background:#fff;border-color:transparent;text-shadow:inherit}@media only screen and (max-width:700px){.editor-toolbar a.no-mobile{display:none}}.editor-statusbar{padding:8px 10px;font-size:12px;color:#959694;text-align:right}.editor-statusbar span{display:inline-block;min-width:4em;margin-left:1em}.editor-preview,.editor-preview-side{padding:10px;background:#fafafa;overflow:auto;display:none;box-sizing:border-box}.editor-statusbar .lines:before{content:'lines: '}.editor-statusbar .words:before{content:'words: '}.editor-statusbar .characters:before{content:'characters: '}.editor-preview{position:absolute;width:100%;height:100%;top:0;left:0;z-index:7}.editor-preview-side{position:fixed;bottom:0;width:50%;top:50px;right:0;z-index:9;border:1px solid #ddd}.editor-preview-active,.editor-preview-active-side{display:block}.editor-preview-side>p,.editor-preview>p{margin-top:0}.editor-preview pre,.editor-preview-side pre{background:#eee;margin-bottom:10px}.editor-preview table td,.editor-preview table th,.editor-preview-side table td,.editor-preview-side table th{border:1px solid #ddd;padding:5px}.CodeMirror .CodeMirror-code .cm-tag{color:#63a35c}.CodeMirror .CodeMirror-code .cm-attribute{color:#795da3}.CodeMirror .CodeMirror-code .cm-string{color:#183691}.CodeMirror .CodeMirror-selected{background:#d9d9d9}.CodeMirror .CodeMirror-code .cm-header-1{font-size:200%;line-height:200%}.CodeMirror .CodeMirror-code .cm-header-2{font-size:160%;line-height:160%}.CodeMirror .CodeMirror-code .cm-header-3{font-size:125%;line-height:125%}.CodeMirror .CodeMirror-code .cm-header-4{font-size:110%;line-height:110%}.CodeMirror .CodeMirror-code .cm-comment{background:rgba(0,0,0,.05);border-radius:2px}.CodeMirror .CodeMirror-code .cm-link{color:#7f8c8d}.CodeMirror .CodeMirror-code .cm-url{color:#aab2b3}.CodeMirror .CodeMirror-code .cm-strikethrough{text-decoration:line-through}.CodeMirror .CodeMirror-placeholder{opacity:.5}.CodeMirror .cm-spell-error:not(.cm-url):not(.cm-comment):not(.cm-tag):not(.cm-word){background:rgba(255,0,0,.15)}
    at v (http://localhost:8100/build/polyfills.js:3:4864)
    at Object.<anonymous> (http://localhost:8100/build/main.js:187207:7)
    at __webpack_require__ (http://localhost:8100/build/main.js:20:30)
    at Object.defineProperty.get (http://localhost:8100/build/main.js:174316:91)
    at __webpack_require__ (http://localhost:8100/build/main.js:20:30)
    at Object.<anonymous> (http://localhost:8100/build/main.js:174295:79)
    at __webpack_require__ (http://localhost:8100/build/main.js:20:30)
    at Object.assign (http://localhost:8100/build/main.js:174255:63)
    at __webpack_require__ (http://localhost:8100/build/main.js:20:30)
    at Object.<anonymous> (http://localhost:8100/build/main.js:145392:73)
    at __webpack_require__ (http://localhost:8100/build/main.js:20:30)
    at Object.<anonymous> (http://localhost:8100/build/main.js:190284:70)
    at __webpack_require__ (http://localhost:8100/build/main.js:20:30)
    at Object.defineProperty.value (http://localhost:8100/build/main.js:66:18)
    at http://localhost:8100/build/main.js:69:10

Version context:

Ionic Framework: 2.3.0
Ionic Native: ^2.9.0
Ionic App Scripts: 1.1.4
Angular Core: 2.4.8
Angular Compiler CLI: 2.4.8
Node: 6.3.1
OS Platform: macOS Sierra
Navigator Platform: MacIntel
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36

How to toggle toolbar or update the component with modified options

Hello There! I was trying the package and I wanted to show the toolbar only when the text-area has focus in it.

In angular 7, after changing the value of the options, the toolbar doesn't hide/show.

COMPONENT:
public mdeOptions = {
spellChecker: false,
status: false,
}
test() {
this.mdeOptions = {...this.mdeOptions, ...{toolbar: false}};
}

HTML:
<simplemde [(ngModel)]="pregunta.cabecera" (options)="mdeOptions">

Cannot find name '$options1'

I use ng2-simplemde in angular4 cli.there is a error say " Cannot find name '$options1' "

ng2-simplemde not working with Angular 5

Because of the use of OpaqueToken which was deprecated in Angular 4 and removed in Angular 5, this module doesn't work with Angular 5.

I created this Pull-Request to fix it.

<a> with target="_blank"

How i can gerate html with this options ?, i need generate this:

<a href="http://example.com/" target="_blank">Hello, world!</a>
Cool component!

I'm sorry, this component is not responsible for this

frozen with ionic

Hello,

I am trying to use this with ionic.
After clicking the preview button 3 times, It's frozen. I have to refresh a page to use it.
But if I click the preview button 3 times, it happen again.

In app.modele.ts

import { SimplemdeModule, SIMPLEMDE_CONFIG } from 'ng2-simplemde/no-style'
imports:[
BrowserModule,
SimplemdeModule.forRoot(),
IonicModule.forRoot(MyApp)
]

and

added in index.html
In home.ts, added test:string; or test: any;
In home.html, added <simplemde [(ngModel)]="test">

Component error when using as angular form control

I get an error when using simplemde component as an angular form control:

This works:

<form [formGroup]="form">
  <ion-textarea formControlName="content"></ion-textarea>
</form>

This does not:

<form [formGroup]="form">
  <simplemde formControlName="content"></simplemde>
</form>

Trace:

Error: Uncaught (in promise): TypeError: Cannot read property 'value' of undefined
TypeError: Cannot read property 'value' of undefined
    at Simplemde.writeValue (http://localhost:8100/build/vendor.js:216442:31)
    at setUpControl (http://localhost:8100/build/vendor.js:36216:27)
    at FormGroupDirective.addControl (http://localhost:8100/build/vendor.js:39184:9)
    at FormControlName._setUpControl (http://localhost:8100/build/vendor.js:39772:44)
    at FormControlName.ngOnChanges (http://localhost:8100/build/vendor.js:39690:18)
    at checkAndUpdateDirectiveInline (http://localhost:8100/build/vendor.js:11453:19)
    at checkAndUpdateNodeInline (http://localhost:8100/build/vendor.js:12952:17)
    at checkAndUpdateNode (http://localhost:8100/build/vendor.js:12891:16)
    at debugCheckAndUpdateNode (http://localhost:8100/build/vendor.js:13752:59)
    at debugCheckDirectivesFn (http://localhost:8100/build/vendor.js:13693:13)
    at c (http://localhost:8100/build/polyfills.js:3:13535)
    at Object.reject (http://localhost:8100/build/polyfills.js:3:12891)
    at Tab.NavControllerBase._fireError (http://localhost:8100/build/vendor.js:70571:16)
    at Tab.NavControllerBase._failed (http://localhost:8100/build/vendor.js:70559:14)
    at http://localhost:8100/build/vendor.js:70614:59
    at t.invoke (http://localhost:8100/build/polyfills.js:3:9283)
    at Object.onInvoke (http://localhost:8100/build/vendor.js:4510:33)
    at t.invoke (http://localhost:8100/build/polyfills.js:3:9223)
    at r.run (http://localhost:8100/build/polyfills.js:3:4452)
    at http://localhost:8100/build/polyfills.js:3:14076

The problematic line: this.simplemde.value(this.value); (https://github.com/doxiaodong/ng2-simplemde/blob/master/src/component.ts#L47)
this.simplemde is undefined at construction time it seems.

I think this is due to the fact that this.simplemde is only initialised after the view has initialized (ngAfterViewInit). And the form is initialised earlier trying to set the initial value.

Maybe add a check to the write method?:

  writeValue(v: any) {
    if (v !== this._innerValue) {
      this._innerValue = v
      if (this.simplemde && this.value != null) {
        this.simplemde.value(this.value)
      }
    }
  }

Any other ideas?

simplemde.min.css not found

Hi. I have been using your package for awhile and would love to say Thank you.

I recently suddenly encountered into this issue right now.

GET http://localhost:4200/node_modules/simplemde/dist/simplemde.min.css 404 (Not Found)

Unhandled Promise rejection: Failed to load ../node_modules/simplemde/dist/simplemde.min.css ; Zone: <root> ; Task: Promise.then ; Value: Failed to load ../node_modules/simplemde/dist/simplemde.min.css undefined

I thought I broke something at the start, but I created a new angular project and did the installation, and still got the same error.

Any fixes?

Calling function 'SimplemdeModule', function calls are not supported

I'm sorry if this isn't a problem with ng2-simplemde, feel free to let me know if this is the case.

I am trying to use ng2-simplemde in a JHipster project.

I have added the dependency to ng2-simplemde version 1.3.0 (via yarn add --exact [email protected]), and have added the following line to the vendor.ts file:

import 'ng2-simplemde/bundles/ng2-simplemde.umd.min.js';

I have then modified app.module.ts with the following lines:

import { SimplemdeModule, SIMPLEMDE_CONFIG } from 'ng2-simplemde';

@NgModule({
    imports: [
        ....
        SimplemdeModule.forRoot({
            provide: SIMPLEMDE_CONFIG
          })
    ]
})

I then run yarn run webpack:build, which in turn runs ngc -p tsconfig-aot.json, and there I get the following error:

Error encountered resolving symbol values statically. Calling function 'SimplemdeModule', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol myprojectAppModule in C:/Users/richi/Documents/projects/myproject/src/main/webapp/app/app.module.ts, resolving symbol myprojectAppModule in C:/Users/richi/Documents/projects/myproject/src/main/webapp/app/app.module.ts
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

What am I doing wrong?

How to show line numbers

How to set options of the codemirror.
To show line numbers.
Example:
lineNumbers: true, undoDepth: 1000 etc

Documentation Unclear on Usage

It's not clear to me how to actually use this in my ng2+ app. I don't understand the config $options1, $options2... and what options are available.

Could you provide some more definition of that piece or maybe include a sample demo in the repo?

Rendering for show page

This is great for editing markdown and previewing it (awesome work btw) but I'm wondering if I need to use something else when rendering a show page or am I missing some utility to do that with your component?

Thanks