@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 methodconvertRawToHTML(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'sconvertFromRaw
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 nameDraftJSEditor-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, seedefaultBlocks
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
ornpm install
-
yarn run storybook
ornpm run storybook
- Visit http://localhost:5000/
- Changes made to files in the
src
directory should immediately compile and be visible in your browser.