@djsp/core

@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

Property	Type	required?	Description
editorState	EditorState	required	The state of the editor. Identical to the draft js editorState prop
onChange	(EditorState) => void	required	Fired when content changes. Identical to the draft js onChange prop
textAlignment	"left" or "center" or "right"	optional	Overrides props set via plugin
textDirectionality	"LTR" or "RTL"	optional	Overrides props set via plugin
placeholder	string	optional	Overrides props set via plugin
readOnly	boolean	optional	Overrides props set via plugin
spellCheck	boolean	optional	Overrides props set via plugin
stripPastedStyles	boolean	optional	Overrides props set via plugin
tabIndex	number	optional	Overrides props set via plugin
autoCapitalize	string	optional	Overrides props set via plugin
autoComplete	string	optional	Overrides props set via plugin
autoCorrect	string	optional	Overrides props set via plugin
ariaActiveDescendantID	string	optional	Overrides props set via plugin
ariaAutoComplete	string	optional	Overrides props set via plugin
ariaControls	string	optional	Overrides props set via plugin
ariaDescribedBy	string	optional	Overrides props set via plugin
ariaExpanded	boolean	optional	Overrides props set via plugin
ariaLabel	string	optional	Overrides props set via plugin
ariaLabelledBy	string	optional	Overrides props set via plugin
ariaMultiline	boolean	optional	Overrides props set via plugin
webDriverTestID	string	optional	Overrides props set via plugin

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

Property	Type	required?	Description
children	({ setEditorState, editorState, setEditorProps, editorRef, editorProps }) => React.Node	optional	Render Prop, for usage see here
customStyleMap	Object	optional	Identical to the draft js customStyleMap prop
blockRenderMap	Immutable.Map<{\nelement: string, wrapper?: React.Node, aliasedElements?: Array<string> }>	optional	Identical to the draft js blockRenderMap prop
blockRendererFn	(block: BlockNodeRecord) => { component: Component, props: Object, editable: boolean }	optional	Identical to the draft js blockRendererFn prop
blockStyleFn	(block: BlockNodeRecord) => cssClassName: string	optional	Identical to the draft js blockStyleFn prop
customStyleFn	(style: Immutable.OrderedSet<string>, block: BlockNodeRecord) => ?Object	optional	Identical to the draft js customStyleFn prop
keyBindingFn	(e: SyntheticKeyboardEvent<>) => ?string	optional	Identical to the draft js keyBindingFn prop
handleKeyCommand	(command: string, editorState: EditorState) => 'handled' or 'not-handled'	optional	Identical to the draft js handleKeyCommand prop
handleBeforeInput	(chars: string, editorState: EditorState) => 'handled' or 'not-handled'	optional	Identical to the draft js handleBeforeInput prop
handlePastedText	(text: string, html?: string, editorState: EditorState) => 'handled' or 'not-handled'	optional	Identical to the draft js handlePastedText prop
handlePastedFiles	(files: Array<Blob>) => 'handled' or 'not-handled'	optional	Identical to the draft js handlePastedFiles prop
handleDroppedFiles	(selection: SelectionState, files: Array<Blob>) => 'handled' or 'not-handled'	optional	Identical to the draft js handleDroppedFiles prop
handleDrop	(selection: SelectionState, dataTransfer: Object, isInternal: 'internal' or 'external') => 'handled' or 'not-handled'	optional	Identical to the draft js handleDrop prop
handleReturn	(e: SyntheticKeyboardEvent<>, editorState: EditorState) => 'handled' or 'not-handled'	optional	Identical to the draft js handleReturn prop
onDownArrow	(e: SyntheticKeyboardEvent<>) => void	optional	Identical to the draft js onDownArrow prop
onUpArrow	(e: SyntheticKeyboardEvent<>) => void	optional	Identical to the draft js onUpArrow prop
onLeftArrow	(e: SyntheticKeyboardEvent<>) => void	optional	Identical to the draft js onLeftArrow prop
onRightArrow	(e: SyntheticKeyboardEvent<>) => void	optional	Identical to the draft js onRightArrow prop
onTab	(e: SyntheticKeyboardEvent<>) => void	optional	Identical to the draft js onTab prop
onEscape	(e: SyntheticKeyboardEvent<>) => void	optional	Identical to the draft js onEscape prop
onFocus	(e: SyntheticEvent<>) => void	optional	Identical to the draft js onFocus prop
onBlur	(e: SyntheticEvent<>) => void	optional	Identical to the draft js onBlur prop

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>

Property	Type	Description
editorState	EditorState	The EditorState object
setEditorState	(editorState: EditorState) => void	Lets you update the editorState
editorProps	Object	Contains props that can be set via setEditorProps, these are editorKey placeholder textAlignment textDirectionality readOnly spellCheck stripPastedStyles tabIndex autoCapitalize autoComplete autoCorrect ariaActiveDescendantID ariaAutoComplete ariaControls ariaDescribedBy ariaExpanded ariaLabel ariaLabelledBy ariaMultiline webDriverTestID
setEditorProps	(editorProps: Object) => void	lets you set the above editorProps. Be aware that editor props set via Plugins are overridden by EditorContainer props
editorRef	Ref<DraftEditor>	A React reference to the draft js editor

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