@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.

Package Sidebar

Install

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

Weekly Downloads

0

Version

1.0.1

License

MIT

Unpacked Size

39.4 kB

Total Files

25

Last publish

Collaborators

  • szotp_lc
  • mrateo
  • l.sajdak
  • otkach-text
  • mszpyruk
  • halinasyposz
  • mpasiewicz
  • tadekrzewuski
  • przemyslawrakowski
  • mwarcholinski
  • naszos
  • w.fabjanczuk
  • p.zawadzka
  • wojciechdudek
  • pastepi
  • artur-livechat
  • joanna.sikora
  • mborowskalivechat
  • kajahd
  • bstopyra
  • m.teczynski
  • jakubpyzio
  • rkawka
  • bolchowka
  • lukiq
  • f.jaskolski
  • msypko
  • bamboo-livechat
  • olek_livechat
  • s.graczyk.livechat
  • michalpaszczakowski
  • andarist
  • konradk
  • k.zajac
  • lkrolak
  • hstaniszewski
  • chatbot-com
  • jakubsikora
  • norbertprocak
  • walaszczykm
  • klarzynskik
  • ale-kacperczyk
  • sambor
  • macpankiewicz
  • mreszke
  • k-kozak
  • bbartek
  • mdebski
  • shwarcu
  • jfedyczak
  • paulinag
  • dzabrzenski
  • wouga
  • mzielonka
  • alithanar
  • msawickilc
  • jawinski
  • gh-actions-livechat
  • oliwiapolec
  • arturfracala
  • panr
  • vbezpalko