rpa-input-rich-text

A rich text editor for React Admin, based on TipTap

Installation

1npm install rpa-input-rich-text
2# or
3yarn add rpa-input-rich-text

Usage

Use it as you would any react-admin inputs:

1import { Edit, SimpleForm, TextInput } from 'react-admin';
2import { RichTextInput } from 'rpa-input-rich-text';
3
4export const PostEdit = (props) => (
5	<Edit {...props}>
6		<SimpleForm>
7			<TextInput source="title" />
8			<RichTextInput source="body" />
9		</SimpleForm>
10	</Edit>
11);

Customizing the Toolbar

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

You can leverage this to change the buttons size:

1import { Edit, SimpleForm, TextInput } from 'react-admin';
2import { RichTextInput, RichTextInputToolbar } from 'rpa-input-rich-text';
3
4export const PostEdit = (props) => (
5	<Edit {...props}>
6		<SimpleForm>
7			<TextInput source="title" />
8			<RichTextInput source="body" toolbar={<RichTextInputToolbar size="large" />} />
9		</SimpleForm>
10	</Edit>
11);

Or to remove some prebuilt components like the <AlignmentButtons>:

1import {
2	RichTextInput,
3	RichTextInputToolbar,
4	LevelSelect,
5	FormatButtons,
6	ListButtons,
7	LinkButtons,
8	QuoteButtons,
9	ClearButtons,
10} from 'rpa-input-rich-text';
11
12const MyRichTextInput = ({ size, ...props }) => (
13	<RichTextInput
14		toolbar={
15			<RichTextInputToolbar>
16				<LevelSelect size={size} />
17				<FormatButtons size={size} />
18				<ListButtons size={size} />
19				<LinkButtons size={size} />
20				<QuoteButtons size={size} />
21				<ClearButtons size={size} />
22			</RichTextInputToolbar>
23		}
24		label="Body"
25		source="body"
26		{...props}
27	/>
28);

Customizing the editor

You might want to add more Tiptap extensions. The <RichTextInput> component accepts an editorOptions prop which is the object passed to Tiptap Editor.

If you just want to add extensions, don't forget to include those needed by default for our implementation. Here's an example to add the HorizontalRule node:

1import {
2	DefaultEditorOptions,
3	RichTextInput,
4	RichTextInputToolbar,
5	LevelSelect,
6	FormatButtons,
7	AlignmentButtons,
8	ListButtons,
9	LinkButtons,
10	QuoteButtons,
11	ClearButtons,
12} from 'rpa-input-rich-text';
13import HorizontalRule from '@tiptap/extension-horizontal-rule';
14import Remove from '@mui/icons-material/Remove';
15
16const MyRichTextInput = ({ size, ...props }) => (
17	<RichTextInput
18		editorOptions={MyEditorOptions}
19		toolbar={
20			<RichTextInputToolbar>
21				<LevelSelect size={size} />
22				<FormatButtons size={size} />
23				<AlignmentButtons {size} />
24				<ListButtons size={size} />
25				<LinkButtons size={size} />
26				<QuoteButtons size={size} />
27				<ClearButtons size={size} />
28				<ToggleButton
29					aria-label="Add an horizontal rule"
30					title="Add an horizontal rule"
31					onClick={() => editor.chain().focus().setHorizontalRule().run()}
32					selected={editor && editor.isActive('horizontalRule')}
33				>
34					<Remove fontSize="inherit" />
35			</ToggleButton>
36			</RichTextInputToolbar>
37		}
38		label="Body"
39		source="body"
40		{...props}
41	/>
42);
43
44export const MyEditorOptions = {
45	...DefaultEditorOptions,
46	extensions: [
47		...DefaultEditorOptions.extensions,
48        HorizontalRule,
49	],
50};

License

This data provider is licensed under the MIT License, and sponsored by marmelab.