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}
	/>
);