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, 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 } 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 = () => (
<Edit>
<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 = () => (
<Edit>
<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
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