A simple WYSIWYG text editor utilizing Facebook's Draft.js library– customized by Synapse Studios
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.storybook
scss
src
storybook/stories
styles
.babelrc
.editorconfig
.eslintrc
.gitignore
.lintstagedrc
.npmignore
CHANGELOG.md
LICENSE
README.md
package.json
yarn.lock

README.md

@synapsestudios/draftjs-editor

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

npm version

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.