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