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

You can test this module in the ra-markdown live demo.

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

The object passed as `options` props is passed to `tui-editor`'s `<Editor>` component

```jsx
const options = {
        previewStyle: 'tab',
        height: '300px',
        initialEditType: 'markdown',
        useCommandShortcut: false,
    }
};
<MarkdownInput source="description" options={options} />

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

CHANGELOG

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