ra-markdown: Markdown Utilities For React-Admin

For applications that need to display and edit Markdown content, this package offers two components:

  • <MarkdownField>: Display formatted markdown, using material-ui styles
  • <MarkdownInput>: Edit a Markdown field, using a WYSIWYG editor supporting preview

Test it live on the Enterprise Edition Storybook, and in the e-commerce demo.

Installation

npm install --save @react-admin/ra-markdown
# or
yarn add @react-admin/ra-markdown

Tip: ra-markdown is part of the React-Admin Enterprise Edition, and hosted in a private npm registry. You need to subscribe to one of the Enterprise Edition plans to access this package.

<MarkdownField>

A Field component for Markdown content. To be used e.g. in Show views.

import { Show, ShowProps, SimpleShowLayout, TextField } from "react-admin";
import { MarkdownField } from "@react-admin/ra-markdown";

const PostShow = (props: ShowProps) => (
  <Show {...props}>
    <SimpleShowLayout>
      <TextField source="title" />
      <MarkdownField source="description" />
    </SimpleShowLayout>
  </Show>
);
import { Show, SimpleShowLayout, TextField } from "react-admin";
import { MarkdownField } from "@react-admin/ra-markdown";

const PostShow = (props) => (
  <Show {...props}>
    <SimpleShowLayout>
      <TextField source="title" />
      <MarkdownField source="description" />
    </SimpleShowLayout>
  </Show>
);

Tip: If you want to display raw (unformatted) markdown, use <TextField component="pre"> instead:

import { Show, ShowProps, SimpleShowLayout, TextField } from "react-admin";

const PostShow = (props: ShowProps) => (
  <Show {...props}>
    <SimpleShowLayout>
      <TextField source="title" />
      <TextField source="description" component="pre" />
    </SimpleShowLayout>
  </Show>
);
import { Show, SimpleShowLayout, TextField } from "react-admin";

const PostShow = (props) => (
  <Show {...props}>
    <SimpleShowLayout>
      <TextField source="title" />
      <TextField source="description" component="pre" />
    </SimpleShowLayout>
  </Show>
);

<MarkdownInput>

An Input component for Markdown content, based on the tui-editor package. To be used in Edit and Create views.

import { Edit, EditProps, SimpleForm, TextInput } from "react-admin";
import { MarkdownInput } from "@react-admin/ra-markdown";

const PostEdit = (props: EditProps) => (
  <Edit {...props}>
    <SimpleForm>
      <TextInput source="title" />
      <MarkdownInput source="description" />
    </SimpleForm>
  </Edit>
);
import { Edit, SimpleForm, TextInput } from "react-admin";
import { MarkdownInput } from "@react-admin/ra-markdown";

const PostEdit = (props) => (
  <Edit {...props}>
    <SimpleForm>
      <TextInput source="title" />
      <MarkdownInput source="description" />
    </SimpleForm>
  </Edit>
);

You can customize the markdown renderer used for the preview, so that it matches the rendering you need in read mode just by applying the CSS rules you want.

import { Edit, EditProps, SimpleForm, TextInput } from "react-admin";
import { MarkdownInput } from "@react-admin/ra-markdown";

// The object passed as `options` props is passed to `tui-editor`'s `<Editor>` component
const options = {
  previewStyle: "tab",
  height: "300px",
  initialEditType: "markdown",
  useCommandShortcut: false,
};

const PostEdit = (props: EditProps) => (
  <Edit {...props}>
    <SimpleForm>
      <TextInput source="title" />
      <MarkdownInput source="description" options={options} />
    </SimpleForm>
  </Edit>
);
import { Edit, SimpleForm, TextInput } from "react-admin";
import { MarkdownInput } from "@react-admin/ra-markdown";

// The object passed as `options` props is passed to `tui-editor`'s `<Editor>` component
const options = {
  previewStyle: "tab",
  height: "300px",
  initialEditType: "markdown",
  useCommandShortcut: false,
};

const PostEdit = (props) => (
  <Edit {...props}>
    <SimpleForm>
      <TextInput source="title" />
      <MarkdownInput source="description" options={options} />
    </SimpleForm>
  </Edit>
);

Refer to the tui-editor documentation for the details about the editor configuration.

CHANGELOG

v1.3.1

2021-06-29

  • (fix) Update peer dependencies ranges (support react 17)

v1.3.0

2021-06-15

  • Add support for helperText and validation to <MarkdownInput>
  • Export the props interfaces of both <MarkdownInput> and <MarkdownField>

v1.2.0

2020-10-17

  • Upgrade to react-admin 3.15
  • (feat) Ensure MarkdownField styles are customizable through MUI theme by providing their key (RaMarkdownField).

v1.1.0

2020-10-05

  • Upgrade to react-admin 3.9

v1.0.3

2020-09-30

  • Update Readme

v1.0.2

2020-09-16

  • (deps) Upgrade dependencies

v1.0.1

2020-08-31

  • (fix) Fix fullWidth support

v1.0.0

2020-07-31

  • First release