ra-richtext-tiptap

A rich text editor for React Admin, based on TipTap

Installation

npm install ra-richtext-tiptap
# or
yarn add ra-richtext-tiptap

Usage

Use it as you would any react-admin inputs:

import { Edit, SimpleForm, TextInput } from 'react-admin';
import { RichTextInput } from 'ra-richtext-tiptap';

export const PostEdit = (props) => (
    <Edit {...props}>
        <SimpleForm>
            <TextInput source="title" />
            <RichTextInput source="body" />
        </SimpleForm>
    </Edit>
);

Customizing the Toolbar

The <RichTextInput> component has a toolar prop that accepts a ReactNode.

You can leverage this to change the buttons size:

import { Edit, SimpleForm, TextInput } from 'react-admin';
import { RichTextInput, RichTextInputToolbar } from 'ra-richtext-tiptap';

export const PostEdit = (props) => (
    <Edit {...props}>
        <SimpleForm>
            <TextInput source="title" />
            <RichTextInput source="body" toolbar={<RichTextInputToolbar size="large" />} />
        </SimpleForm>
    </Edit>
);

Or to remove some prebuilt components:

import {
    RichTextInput,
    RichTextInputToolbar,
    RichTextInputLevelSelect,
    FormatButtons,
    ListButtons,
    LinkButtons,
    QuoteButtons,
    ClearButtons,
} from 'ra-richtext-tiptap';
const MyRichTextInput = ({ size, ...props }) => (
    <RichTextInput
        toolbar={
            <RichTextInputToolbar>
                <RichTextInputLevelSelect size={size} />
                <FormatButtons size={size} />
                <ListButtons size={size} />
                <LinkButtons size={size} />
                <QuoteButtons size={size} />
                <ClearButtons size={size} />
            </RichTextInputToolbar>
        }
        label="Body"
        source="body"
        {...props}
    />
);