ngx-infi-markdown
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.2 • Public • Published

     

    MIT PRs styled with prettier All Contributors

    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

    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!

    Install

    npm i ngx-infi-markdown

    DownloadsWeekly Downloads

    0

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    990 kB

    Total Files

    71

    Last publish

    Collaborators

    • infi_the_coder