ra-input-rich-text

A rich text editor for React Admin, based on TipTap.

Installation

``sh
npm install ra-input-rich-text


or


yarn add ra-input-rich-text
`

Usage

Use it as you would any react-admin input:

`jsx
import { Edit, SimpleForm, TextInput } from 'react-admin';
import { RichTextInput } from 'ra-input-rich-text';

export const PostEdit = () => (






);
`

Customizing the Toolbar

The component has a toolbar prop that accepts a ReactNode.

You can leverage this to change the buttons size:

`jsx
import { Edit, SimpleForm, TextInput } from 'react-admin';
import { RichTextInput, RichTextInputToolbar } from 'ra-input-rich-text';

export const PostEdit = () => (



} />


);
`

Or to remove some prebuilt components like the :

`jsx
import {
RichTextInput,
RichTextInputToolbar,
LevelSelect,
FormatButtons,
ListButtons,
LinkButtons,
QuoteButtons,
ClearButtons,
} from 'ra-input-rich-text';

const MyRichTextInput = ({ size, ...props }) => (
toolbar={








}
label="Body"
source="body"
{...props}
/>
);
`

Customizing the editor

You might want to add more TipTap extensions. The component accepts an editorOptions prop, which is the object passed to the 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:

`jsx
import {
DefaultEditorOptions,
RichTextInput,
RichTextInputToolbar,
LevelSelect,
FormatButtons,
AlignmentButtons,
ListButtons,
LinkButtons,
QuoteButtons,
ClearButtons,
} from 'ra-input-rich-text';
import HorizontalRule from '@tiptap/extension-horizontal-rule';
import Remove from '@mui/icons-material/Remove';

const MyRichTextInput = ({ size, ...props }) => (
editorOptions={MyEditorOptions}
toolbar={








aria-label="Add an horizontal rule"
title="Add an horizontal rule"
onClick={() => editor.chain().focus().setHorizontalRule().run()}
selected={editor && editor.isActive('horizontalRule')}
>



}
label="Body"
source="body"
{...props}
/>
);

export const MyEditorOptions = {
...DefaultEditorOptions,
extensions: [
...DefaultEditorOptions.extensions,
HorizontalRule,
],
};
``

License

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