React-Admin Enterprise Edition

ra-markdown: Markdown Utilities For React-Admin

react-admin ≥ 4.5.1

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, MarkdownInputProps } from '@react-admin/ra-markdown';

// Additional props are passed to `tui-editor`'s `<Editor>` component
const options: Partial<MarkdownInputProps> = {
    previewStyle: 'tab',
    height: '300px',
    initialEditType: 'markdown',
    useCommandShortcut: false,
};

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

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

// Additional props are passed to `tui-editor`'s `<Editor>` component
const options: Partial<MarkdownInputProps> = {
    previewStyle: 'tab',
    height: '300px',
    initialEditType: 'markdown',
    useCommandShortcut: false,
};

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

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

CHANGELOG

v4.1.5

2023-03-02

  • (feat) Add dark mode support to MarkdownInput
  • (fix) Fix MarkdownInput should support label={false}
  • (doc) Fix MarkdownInput custom Editor options example

v4.1.4

2023-01-19

  • (fix) Fix usage with React 18

v4.1.3

2023-01-16

  • (fix) Fix MarkdownInput does not apply value when it has changed from outside the input

v4.1.2

2022-11-15

  • (fix) Fix emotion warning about potentially unsafe CSS pseudo class ":first-child" when doing SSR

v4.1.1

2022-10-18

  • (fix) Fix compatibility with Next.JS (toastui's css is now embedded in ra-markdown rather than requiring a global css import)

v4.1.0

2022-10-17

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