4.0.1

react-admin ≥ 4.1.2

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, SimpleShowLayout, TextField } from "react-admin";
import { MarkdownField } from "@react-admin/ra-markdown";

const PostShow = () => (
  <Show>
    <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 = () => (
  <Show>
    <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, SimpleShowLayout, TextField } from "react-admin";

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

const PostShow = () => (
  <Show>
    <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, SimpleForm, TextInput } from "react-admin";
import { MarkdownInput } from "@react-admin/ra-markdown";

const PostEdit = () => (
  <Edit>
    <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 = () => (
  <Edit>
    <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, 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 = () => (
  <Edit>
    <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 = () => (
  <Edit>
    <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

v4.0.1

2022-06-08

  • (fix) Update peer dependencies ranges (support React 18)

v4.0.0

2022-06-07

  • Upgrade to react-admin v4
  • Upgraded toast-ui/react-editor to v3

Breaking Changes

toast-ui/react-editor is now using ProseMirror. If you customized the editor or the viewer with plugins, you should follow their upgrade guide.

It also means we had to drop the default support for syntax highlighting. Indeed, the new toast-ui/react-editor requires to add a plugin for that (code-syntax-highlight) and to specify the languages to support.

import { Edit, EditProps, SimpleForm, TextInput } from 'react-admin';
import { MarkdownInput } from '@react-admin/ra-markdown';
+import codeSyntaxHighlight from '@toast-ui/editor-plugin-code-syntax-highlight';
+import 'prismjs/themes/prism.css';
+import '@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight.css';
+import Prism from 'prismjs';
+import 'prismjs/components/prism-jsx.js';

+ const options = {
+    plugins: [codeSyntaxHighlight]
+ };

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

v1.3.2

2021-12-20

  • (fix) MarkdownField can't process nested source

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