Angular 7: Markdown Editor

Markdown Editor created in Angular 7

I have created a markdown editor in Angular 7.

Markdown Preview Component

For previewing markdown value on creating or editing one. The markdown library is powered by Marked.js.

@Component({
  selector: 'my-md',
  template: `
<div [innerHTML]="md"></div>
`
})
class MD {
  @Input() value: string = ''
  md: string = ''
  constructor() {

  }
  ngOnInit() {
    this.ngOnChanges()
  }
  ngOnChanges() {
    this.md = marked(this.value)
  }
}
declarations.push(MD)

Markdown Editor Component

Using my-md component above to preview the markdown value on changes.

@Component({
  selector: 'my-md-editor',
  template: `
<div class="row">
  <div class="col-6">
    <h5>Preview</h5>
    <my-md [value]="value"></my-md>
  </div>
  <div class="col-6">
    <h5>Editor</h5>
    <textarea #textarea [(ngModel)]="value" (ngModelChange)="valueChange.emit($event)" ngControl="value" name="value" class="form-control" rows="5"></textarea>
  </div>
</div>
`
})
class MDEditor {
  @Input() value: string = ''
  @Output() valueChange:EventEmitter<string> = new EventEmitter()
  constructor() {

  }
}
declarations.push(MDEditor)

Usage

Example of using my-md-editor. We can supply any initial value we want to the editor and continue editing it and preview the changes on the fly.

@Component({
  selector: 'my-app',
  template: `
<div class="container-fluid">
  <h1>{{title}}</h1>
  <p class="lead">{{lead}}</p>
  <my-md-editor [(value)]="value"></my-md-editor>
</div>
  `
})
class AppComponent {
  title = `Angular 7: Markdown Editor`
  lead = `Angular ${VERSION.major} component to write in markdown`
  value=`
# Headers

# H1
## H2
### H3
#### H4
##### H5
###### H6

---

# Emphasis

Emphasis, aka italics, with *asterisks* or _underscores_.

Strong emphasis, aka bold, with **asterisks** or __underscores__.

Combined emphasis with **asterisks and _underscores_**.

Strikethrough uses two tildes. ~~Scratch this.~~

---

# Lists

1. First ordered list item
2. Another item
⋅⋅* Unordered sub-list. 
1. Actual numbers don't matter, just that it's a number
⋅⋅1. Ordered sub-list
4. And another item.
`
  constructor() {

  }
  onValueChange(e) {
    this.value = e
  }
}
declarations.push(AppComponent)

React version

React version of Markdown Editor is here.

UPDATED

Here is the codepen version for preview and quick tinkering.