Markdown Editor Component for Angular2

Thought I'd share a component I've been hacking on for angular2: a syntax highlighted markdown editor with rendered preview.

The code including a basic example is available on github. Because Angular2 hasn't yet been released this is really just me kicking the tyres.

This component relies on two libraries:

- marked for rendering markdown as html
- and ace editor for editing markdown

Basic Usage Example

Add to your html template:

<markdown-editor (save)="updatedText($event)"
                 [initial-text]="markdownContent">
</markdown-editor>

Remember to include the Markdown directive in your @Component annotation:

@Component({
    selector: 'about',
    directives: [CORE_DIRECTIVES, Markdown]
})

Another Example

You can also control the component with external ui:

<button (click)="md.editMode = true">Custom Edit Button</button>
<markdown-editor [initial-text]="myMarkdownText" 
                 [show-edit-button]="false" 
                 [edit-mode]="true" #md>
</markdown-editor>

Inputs

• editable - default to true. If false; only render markdown - don’t allow user to edit it.
• editMode - defaults to false. Show the editor or the rendered markdown.
• showEditButton - defaults to true. Should this component render an edit button.

Events (Outputs)

The two events that the markdown-editor component emits:
- save
- change
Note both events include the entire markdown document.

Installation

For now include the ace library for the editor directly:

<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.1.9/ace.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.1.9/mode-markdown.js"></script>

The marked library is used for rendering the markdown and can be added using npm.