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:
import { ReactEditor } from '@deskpro/react-content-editor';
function MyComponent() {
return (
<ReactEditor
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:
function MyComponent() {
return (
<ReactEditor
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