@deskpro/react-content-editor

!Deskpro Content Editor

This package contains react extensions for the base content-editor package, complete with built-in UIs and configurable options for some.

Usage

#### Installation

Install the react package with npm/yarn:
``
npm install --save @deskpro/content-editor
`

#### Overview

This React package provides a primary component for rendering the editor along with some additional features that you can easily enable through props:

`js
import { ReactEditor } from '@deskpro/react-content-editor';

function MyComponent() {
return (
useStandardToolbar

useLinkPopups
useHTMLBlock
useColors
useTables
useEmbed
useCallouts

// image uploader plugin powered by Uppy
useImageUploader={{
xhrUpload: {
endpoint: 'https://file.io',
fieldName: 'file',
responseUrlFieldName: 'link'
},
...uppyOptions
}}

// image editor plugin powered by tui-image-editor
useImageEditor={{
...tuiImageEditorOptions
}} />
);
}
`

#### Other Props

You may also pass additional props to customize the editor's behavior:

`jsx
function MyComponent() {
return (
options={{
template: 'heading paragraph+',
initialContent: contentHTML
}}

label="Editor Label"
placeholder="Write some text..."
maxHeight="calc(100vh - 4rem)"

enableTabNavigation
toolbarActions={[
{
content: 'Save Changes',
callback: (editor) => {
saveChanges(editor.getHTML());
},
theme: 'primary'
}
]}

inline={false}
useExtensions={ myCustomExtensions }

onFocus={handleFocus}
onBlur={handleBlur} />
);
}
`

Development

As this is part of a monorepo, make sure you have installed all dependencies through Lerna on the root folder:
`
lerna bootstrap --hoist
`

You can start the typescript watcher locally on this package using:
`
npm run watch
``