ra-markdown: Markdown Utilities For React-Admin

react-admin ≥ 3.19.2

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, 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>
);

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, ShowProps, SimpleShowLayout, TextField } from 'react-admin';

const PostShow = (props: ShowProps) => (
    <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, 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>
);

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, 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>
);

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

CHANGELOG

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