@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 | | editorKey | string | optional | Overrides props set via plugin | | 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 the props for EditorContainer except editorState and onChange | | 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