withspectrum/draft-js-markdown-plugin

Name: draft-js-markdown-plugin

Owner: Spectrum

Description: A DraftJS plugin for supporting Markdown syntax shortcuts

Forked from: ngs/draft-js-markdown-shortcuts-plugin

Created: 2017-09-21 18:18:28.0

Updated: 2018-05-24 16:36:13.0

Pushed: 2018-05-24 16:36:13.0

Homepage: https://markdown-plugin.spectrum.chat/

Size: 5236

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

draft-js-markdown-plugin

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)

View Demo

Installation

i --save draft-js-markdown-plugin

Usage

rt React, { Component } from 'react';
rt Editor from 'draft-js-plugins-editor';
rt createMarkdownPlugin from 'draft-js-markdown-plugin';
rt { EditorState } from 'draft-js';

rt default class DemoEditor extends Component {

ate = {
editorState: EditorState.createEmpty(),
plugins: [createMarkdownPlugin()]


Change = (editorState) => {
this.setState({
  editorState,
});


nder() {
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!

nstall prismjs and draft-js-prism-plugin
rt Prism from 'prismjs';
rt createPrismPlugin from 'draft-js-prism-plugin';

s Editor extends Component {
ate = {
plugins: [
  // Add the Prism plugin to the plugins array 
  createPrismPlugin({
    prism: Prism
  }),
  createMarkdownPlugin()
]

Options

The draft-js-markdown-plugin is configurable. Just pass a config object. Here are the available options:

renderLanguageSelect

erLanguageSelect = ({
 Array of language options
tions: Array<{ label, value }>,
 Callback to select an option
Change: (selectedValue: string) => void,
 Value of selected option
lectedValue: string,
 Label of selected option
lectedLabel: string
> React.Node

Code blocks render a select to switch syntax highlighting - renderLanguageSelect is a render function that lets you override how this is rendered.

Example:

rt createMarkdownPlugin from 'draft-js-markdown-plugin';

t renderLanguageSelect = ({ options, onChange, selectedValue }) => (
elect value={selectedValue} onChange={onChange}>
{options.map(({ label, value }) => (
  <option key={value} value={value}>
    {label}
  </option>
))}
select>


t markdownPlugin = createMarkdownPlugin({ renderLanguageSelect })

languages

Dictionary for languages available to code block switcher

Example:

t languages = {
: 'JavaScript'


t markdownPlugin = createMarkdownPlugin({ languages })

features

A list of enabled features, by default all features are turned on.

ures = {
ock: Array<string>,
line: Array<string>,

Example:

his will only enable BOLD for inline and CODE
s well as header-one for blocks
t features = {
line: ['BOLD'],
ock: ['CODE', 'header-one'],

t plugin = createMarkdownPlugin({ features })

Available Inline features:

OLD',
TALIC',
ODE',
TRIKETHROUGH',
INK',
MAGE'

Available Block features:

rt { CHECKABLE_LIST_ITEM } from "draft-js-checkable-list-item"

ODE',
eader-one',
eader-two',
eader-three',
eader-four',
eader-five',
eader-six',
rdered-list-item',
nordered-list-item',
 CHECKABLE_LIST_ITEM is a constant from 'draft-js-checkable-list-item'
 see import statementabove
ECKABLE_LIST_ITEM,
lockquote',

entityType

To interoperate this plugin with other DraftJS plugins, i.e. draft-js-plugins, you might need to customize the LINK and IMAGE entity type created by draft-js-markdown-plugin.

Example:

rt createMarkdownPlugin from "draft-js-markdown-plugin";
rt createFocusPlugin from "draft-js-focus-plugin";
rt createImagePlugin from "draft-js-image-plugin";

t entityType = {
AGE: "IMAGE",


t focusPlugin = createFocusPlugin();
t imagePlugin = createImagePlugin({
corator: focusPlugin.decorator,

or `draft-js-image-plugin` to work, the entity type of an image must be `IMAGE`.
t markdownPlugin = createMarkdownPlugin({ entityType });

t editorPlugins = [focusPlugin, imagePlugin, markdownPlugin];

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.