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.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