ngx-infi-markdown

 

Simple and neat editor with an embedded preview. Create your own custom styles and transpile your written text into HTML. This library provides an injectable and configurable web-component which you can easily place anywhere in your application.

Table of Contents

• Installation
• Configuration
• Demo
• Future plans
• Contributors

Installation

Using npm:

npm install ngx-infi-markdown --save

Configuration

In order to start working with the editor you have to import NgxInfiMarkdown module in the root module:

import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NgxInfiMarkdownModule } from 'ngx-infi-markdown';

@NgModule({
  declarations: [AppComponent],
  imports: [
    // ...,
    NgxInfiMarkdownModule
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Place the markdown editor in your template:

<ngx-infi-markdown></ngx-infi-markdown>
<button (click)="getContent()">Submit post</button>

Inject NgxInfiMarkdownService into your component to interact with the editor and retrieve generated content:

import { NgxInfiMarkdownService } from 'ngx-infi-markdown';
 
export class AppComponent implements OnInit {
  constructor(private markdown: NgxInfiMarkdownService) {}
 
  ngOnInit() {}

  getContent(): void {
      const html = this.markdown.getHtml();
      // ..
  }
}

Methods

• html$() returns observable of currently created content
• getHtml() returns currently created content synchronously

Custom styles configuration

You can switch between default and custom styles by clicking the toggle button. This library provides a posibility to load your own custom styles in two ways:

• pass the configuration object to the component:

<ngx-infi-markdown
    [styles]="articleStyles"
></ngx-infi-markdown>

In your class:

export class AppComponent {
  articleStyles = {
    primaryHeader: {
      textAlign: 'center',
      fontSize: '72px',
      fontWeight: 600,
    },
    secondaryHeader: {
      fontSize: '32px',
      fontWeight: 500,
    },
    tertiaryHeader: {
      fontFamily: ['Roboto', 'sans-serif'],
      fontSize: '26px',
      fontWeight: 400
    },
    quaternaryHeader: {
      fontSize: '22px',
    },
    orderedList: {
      // ...
    },
    unorderedList: {
      // ...
    },
    paragraph: {
      // ...
    },
    quote: {
      borderLeft: '1px solid #999',
      textAlign: 'left',
      // ...
    },
  };
}

• pass a configuration object to all instances globally:

@NgModule({
  declarations: [AppComponent],
  imports: [
    NgxInfiMarkdownModule.forRoot({
      styles: {
        primaryHeader: {
          // ...
        },
        secondaryHeader: {
          // ...
        }
        // ...
    }),
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

You have to take few things into consideration when configuring your custom styles:

1. Using global configuration method overrides component-level configuration in all instances of the editor.
2. Every tag must be added in the configuration object. Available tags are listed below: primaryHeader, secondaryHeader, tertiaryHeader, quaternaryHeader, orderedList, unorderedList, paragraph, quote
3. Every style property must be added in a camel case format.
4. If you want to specify a font-family property for a particular tag, place the font names in an array: fontFamily: ['Roboto', 'sans-serif']

Store your changes

If you wish to store your changes on page leave or component destroy, then you have to pass the persistance storage configuration to the imported module.

NgxInfiMarkdownModule.forRoot({
    storageType: '<pass storage type>'
})

Available storages are as follows:

Name	Description
none	disables storage (default)
localStorage	uses Local Storage
sessionStorage	uses Session Storage

Demo

The showcase of the library can be found under the following link.

Future plans

• add bold, italic and underline tag
• improve responsiveness of editor and preview
• add IndexedDB as storage option

Contributors

Thanks goes to these wonderful people (emoji key):

brhelu 💻 🤔 👀

This project follows the all-contributors specification. Contributions of any kind are welcome!