@synapsestudios/draftjs-editor

@synapsestudios/draftjs-editor

A simple WYSIWYG text editor utilizing Facebook's Draft.js library– customized by Synapse Studios

Demo

A demo is available at https://synapsestudios.github.io/draftjs-editor/

Usage

Installing via CLI

// yarn
yarn add @synapsestudios/draftjs-editor

// npm
npm install --save @synapsestudios/draftjs-editor

Importing JS

The default export is the React editor component itself:

import SynapseDraft from '@synapsestudios/draftjs-editor';

It also exports the following utilities:

• DraftJSEditor - The default React component
• Renderer(customBlocks) - A constructor that creates a new Draft to HTML renderer, currently only exposes the method convertRawToHTML(rawContent)
• defaultBlocks - A default set of blocks to pass into the Renderer, these can be used or overridden in your own project as well
• convertFromRaw() - Simple passthrough of DraftJS's convertFromRaw utility

Importing CSS

// Minified, autoprefixed css
import '@synapsestudios/draftjs-editor/lib/draftjs-editor.min.css';

// Not-minified, not-autoprefixed css
import '@synapsestudios/draftjs-editor/lib/draftjs-editor.css';

Styling

The two main component classNames are DraftJSEditor-root for the container and DraftJSEditor-editor for the editor itself.

If you are using Stylus you can import the .styl file into your build:

@import '@synapsestudios/draftjs-editor/lib/draftjs-editor.styl';

API

Props

Props are automatically passed onto the DraftJS Editor component. Anything usable from the api can also be passed into DraftJSEditor.

• containerStyle (object) - passes inline styling directly into the parent component of the editor. This can also be modified by using CSS to style the class name DraftJSEditor-root
• className (string) - Classes to add to the editor component
• id (string) - ID to add to the editor component
• customBlocks (object) - An object containing the custom blocks you want the editor to render, see defaultBlocks for examples
• customBlockControls (array) - An array of keys of custom blocks to render the controls for

Renderer Methods

• convertRawToHTML(rawContent) - Takes raw DraftJS state object and renders it to HTML

Contributing

To run the project on your own computer:

• Clone this repository
• yarn install or npm install
• yarn run storybook or npm run storybook
• Visit http://localhost:5000/
• Changes made to files in the src directory should immediately compile and be visible in your browser.

Changelog

v3.1.0

• Added containerStyle prop to allow for the styling of the container surrounding the editor.
• Added the ability to pass a sanitized prop into the component allowing for usage of all pieces of the DraftJS API
• Updates dependencies of draft-js-export-html to prevent issues when working with post react 0.15.3.
• Updates dependencies for react 16
• Includes scss, however this is deprecated and will be removed in v4.0.0
• Added ability to pass optional decorator prop to DraftJSEditor, overriding the defaults if provided.