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