ra-input-rich-text

ra-input-rich-text

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

Installation

npm install ra-input-rich-text
# or
yarn add ra-input-rich-text

Usage

Use it as you would any react-admin input:

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

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

Customizing the Toolbar

The <RichTextInput> component has a toolbar 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-input-rich-text';

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

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

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

const MyRichTextInput = ({ size, ...props }) => (
  <RichTextInput
    toolbar={
      <RichTextInputToolbar>
        <LevelSelect size={size} />
        <FormatButtons size={size} />
        <ListButtons size={size} />
        <LinkButtons size={size} />
        <QuoteButtons size={size} />
        <ClearButtons size={size} />
      </RichTextInputToolbar>
    }
    label="Body"
    source="body"
    {...props}
  />
);

Customizing the editor

You might want to add more TipTap extensions. The <RichTextInput> 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:

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 }) => (
  <RichTextInput
    editorOptions={MyEditorOptions}
    toolbar={
      <RichTextInputToolbar>
        <LevelSelect size={size} />
        <FormatButtons size={size} />
        <AlignmentButtons {size} />
        <ListButtons size={size} />
        <LinkButtons size={size} />
        <QuoteButtons size={size} />
        <ClearButtons size={size} />
        <ToggleButton
          aria-label="Add an horizontal rule"
          title="Add an horizontal rule"
          onClick={() => editor.chain().focus().setHorizontalRule().run()}
          selected={editor && editor.isActive('horizontalRule')}
        >
          <Remove fontSize="inherit" />
      </ToggleButton>
      </RichTextInputToolbar>
    }
    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.

Changelog

5.5.4

• Fix <FilerLiveForm> does not allow to clear filters (#10522) (djhi)
• Fix create-react-admin with ra-data-fakerest ignore custom resources (#10502) (djhi)
• Remove doc from published react-admin package (#10505) (djhi)
• [Doc] Backport <DatagridAG> and <DatagridAGClient> access control's doc (#10521) (erwanMarmelab)
• [Doc] Backport title={null}'s doc on dialog components (#10520) (erwanMarmelab)
• [Doc] Update doc to mention the dependency on @ag-grid-community/styles (#10510) (erwanMarmelab)
• [Doc] Update warnWhenUnsavedChanges's doc on dialog forms (#10509) (erwanMarmelab)
• [Doc] Update docs to mention format prop for timezone adjustment (#10506) (ogroppo)
• [Doc] Add "Guides and Concepts" section (#10477) (fzaninotto)
• [Doc] Deprecate mui v6 system props (#10463) (smeng9)
• [Demo] Fix build (#10499) (djhi)
• [Chore] Rename directories for local storage data providers (#10507) (erwanMarmelab)
• [Chore] Bump serialize-javascript from 6.0.1 to 6.0.2 (#10508) (dependabot[bot])