@livechat/draft-js-markdown-plugin

    1.0.1 • Public • Published

    draft-js-markdown-plugin

    Build Status npm

    A DraftJS plugin for supporting Markdown syntax shortcuts in DraftJS. This plugin works with DraftJS Plugins, and is a fork of the excellent draft-js-markdown-shortcuts-plugin by @ngs. (see why fork that plugin for more info)

    screen

    View Demo

    Installation

    npm i --save draft-js-markdown-plugin

    Usage

    import React, { Component } from 'react';
    import Editor from 'draft-js-plugins-editor';
    import createMarkdownPlugin from 'draft-js-markdown-plugin';
    import { EditorState } from 'draft-js';
     
    export default class DemoEditor extends Component {
     
      state = {
        editorState: EditorState.createEmpty(),
        plugins: [createMarkdownPlugin()]
      };
     
      onChange = (editorState) => {
        this.setState({
          editorState,
        });
      };
     
      render() {
        return (
          <Editor
            editorState={this.state.editorState}
            onChange={this.onChange}
            plugins={this.state.plugins}
          />
        );
      }
    }

    Add code block syntax highlighting

    Using the draft-js-prism-plugin you can easily add syntax highlighting support to your code blocks!

    // Install prismjs and draft-js-prism-plugin
    import Prism from 'prismjs';
    import createPrismPlugin from 'draft-js-prism-plugin';
     
    class Editor extends Component {
      state = {
        plugins: [
          // Add the Prism plugin to the plugins array 
          createPrismPlugin({
            prism: Prism
          }),
          createMarkdownPlugin()
        ]
      }
    }

    Why fork the markdown-shortcuts-plugin?

    Writing is a core part of our app, and while the markdown-shortcuts-plugin is awesome and battle-tested there are a few opinionated things we wanted to do differently. Rather than bother @ngs with tons of PRs, we figured it'd be better to own that core part of our experience fully.

    License

    Licensed under the MIT license, Copyright â’¸ 2017 Space Program Inc. This plugin is forked from the excellent draft-js-markdown-shortcuts-plugin by Atsushi Nagase.

    See LICENSE for the full license text.

    Install

    npm i @livechat/draft-js-markdown-plugin

    DownloadsWeekly Downloads

    12

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    39.4 kB

    Total Files

    25

    Last publish

    Collaborators

    • grzgajda
    • bstopyra
    • m.teczynski
    • misterkuka
    • jakubpyzio
    • rkawka
    • bolchowka
    • lukiq
    • f.jaskolski
    • msypko
    • bamboo-livechat
    • olek_livechat
    • skix
    • s.graczyk.livechat
    • michalpaszczakowski
    • afedyk
    • andarist
    • konradk
    • t.burzlc
    • dmgawel
    • jedrek
    • k.zajac
    • dobrochna.przybylek
    • lkrolak
    • hstaniszewski
    • chatbot-com
    • jakubsikora
    • norbertprocak
    • walaszczykm
    • dominikslawkowski
    • klarzynskik
    • ale-kacperczyk
    • gogolix
    • sambor
    • macpankiewicz
    • mreszke
    • k-kozak
    • voyy
    • bbartek
    • mdebski
    • shwarcu
    • jfedyczak
    • paulinag
    • morus12
    • tomaszratajczyk
    • janowsiany
    • kogierman
    • dzabrzenski
    • bartoszgamza
    • wouga
    • ttrzcinski
    • mzielonka
    • alithanar
    • msawickilc
    • jawinski
    • gh-actions-livechat
    • ewaryst
    • oliwiapolec
    • przemuh
    • arturfracala
    • panr
    • vbezpalko