@djsp/core

Draft Js Plugins Core components

@djsp/core is the heart of @djsp. It contains these exports:

import {
  EditorContainer,
  Editor,
  Plugin,
  withPluginContext,
} from '@djsp/core'

The <EditorContainer /> component

Usage

EditorContainer contains all props for the draft js Editor which it passes down to plugins and the Editor via the React context api.

import { EditorContainer } from '@djsp/core'

<EditorContainer onChange={this.onChange} editorState={this.state.editorState}>
  <Editor />
</EditorContainer>

Here are the props that EditorContainer accepts, all of the below props are inherted from the draft js editor component

Props

The <Editor> Component

The Editor component does not accept any props, since it inherits all of it's props from EditorContainer. It must be rendered inside EditorContainer

To configure editor props, use EditorContainer and Plugin

Usage

<EditorContainer
  onChange={editorState => this.setState({ editorState })}
  editorState={this.state.editorState}
>
  <Editor />
</EditorContainer>

The <Plugin> Component

The Plugin can only be renderered inside EditorContainer. It's props will be plugged in to the editorState. This way you can compose and isolate editor functionality like decorators, blockRendererFn or any of the props listed below:

Props

Plugin render prop

The Plugin also accepts an optional render prop which exposes the plugin context.

<Plugin>
  {({
    setEditorState,
    editorProps,
    editorRef,
    editorState,
    setEditorProps
  }) => (
    <button
      onClick={() => (
        setEditorState(
          RichUtils.toggleBlockType(editorState, 'header-one')
        )
      )}
    >H1</button>
  )}
</Plugin>

<Plugin>(RenderProps)</Plugin>

withPluginContext

Another way to create a plugin is with the withPluginContext HOC. This has the advantage of letting you handle plugin subscription.

License

MIT © juliankrispel