# <RichEditor /> Component

## Description

A component for providing rich, wysiwyg text composition. A wrapper of the draft.js library

## Checklist

This component should...

- Should render the RichEditor in the dom
- Should render a collection of buttons that match the list provided in the buttonList prop
- Should show the inline control buttons in the location provided in the position prop
- Should not render any inline controls if the disableInlineControls prop is true
- Should style the inline controls according to the style provided in the inlineControlsStyle prop
- Should render the component provided in the inlineControlsComponent instead of the default component when one is provided in the props
- Should show content inside the editor that matches the html content provided in the content prop
- Should disable the editor when the disabled prop is true
- Should trigger the onChange() event when a change is made in the rich editor
- Should trigger the onFocus() event when the editor is focused on
- Should trigger the onBlur() event when the editor loses focus
- Should trigger the onKeyCommand() event when a key is pressed while in the editor
- Should trigger the onSelectText() event when text is selected in the editor
- Should trigger the `onRichEditorRender` plugin hook when the RichEditor component is rendering
- Should trigger the `onRichEditorFocus` plugin hook when the editor is focused on
- Should trigger the `onRichEditorChange` plugin hook when a change is made in the rich editor
- Should trigger the `onRichEditorKeyCommand` plugin hook when a key is pressed while in the editor
- Should trigger the `onRichEditorSelectText` plugin hook when text is selected in the editor
- Should trigger the `onRichEditorBlur` plugin hook when the editor loses focus

## Usage

To install it...

> npm install @sandcastle/components

Add it to your project...

```
import * as React from 'react'
import * as RichEditor from '@sandcastle/components/RichEditor`

export default () => (
  <RichEditor
    buttonList=""
    onChange=""
    onFocus=""
    onBlur=""
    onKeyCommand=""
    inlineControlsComponent={<div />}
    content=""
    onSelectText=""
    disabled=""
    position={0}
    disableInlineControls=""
    inlineControlsStyle=""
  />
)
```

## Best Practices

To do: Add any Best Practices here

## Lifecycle Hooks

To do: Add any Lifecycle Hooks here

## Related Components

To do: Add any Related Components here