Aller au contenu principal

Markdown Components

Installation#

npm install @semapps/markdown-components

You will also need to add this CSS file:

<link rel="stylesheet" href="https://unpkg.com/react-mde@11.5.0/lib/styles/css/react-mde-all.css" />

Components#

MarkdownInput#

This component allows you to enter Markdown content and preview it, using the React-mde editor.

import { Create, SimpleForm, TextInput } from 'react-admin';
import { MarkdownInput } from '@semapps/markdown-components';
export const MyCreate = (props) => (
<Create {...props}>
<SimpleForm>
<TextInput source="title" fullWidth />
<MarkdownInput source="description" fullWidth />
</SimpleForm>
</Create>
);

Please see React-mde documentation to know what other props can be passed.

MarkdownField#

This component allows you to display Markdown content in HTML. It uses the markdown-to-jsx package.

import { Show, SimpleShowLayout, TextField } from 'react-admin';
import { MarkdownField } from '@semapps/markdown-components';
export const MyShow = (props) => (
<Show {...props}>
<SimpleShowLayout>
<TextField source="title" />
<MapField source="description" />
</SimpleShowLayout>
</Show>
);

Any other props are passed down to markdown-to-jsx options.

Rendering React components#

By default, all top-level titles (#) are converted to <LargeLabel>.

You can change this by passing an overrides props.

You can also render arbitrary React components this way. All you need to do is pass the component definition.

import { Show, SimpleShowLayout, TextField } from 'react-admin';
import { MarkdownField } from '@semapps/markdown-components';
const SayHello = ({ who }) => ( <b>Hello {who} !</b> );
export const MyShow = (props) => (
<Show {...props}>
<SimpleShowLayout>
<TextField source="title" />
<MapField source="description" overrides={{ SayHello }} />
</SimpleShowLayout>
</Show>
);

Now if, in your Markdown document, you enter <SayHello who="World" >, it will render as <b>Hello World !</b>.

Hooks#

useLoadLinks#

This hook allows you to easily use React-mde suggestions to search for links to add to other resources.

import { Create, SimpleForm, TextInput } from 'react-admin';
import { MarkdownInput } from '@semapps/markdown-components';
export const MyCreate = (props) => {
const loadLinks = useLoadLinks('Page', 'title');
return (
<Create {...props}>
<SimpleForm>
<TextInput source="title" fullWidth />
<MarkdownInput source="description" loadSuggestions={loadLinks} suggestionTriggerCharacters="[" />
</SimpleForm>
</Create>
);
}

It takes 2 parameters:

  • The type of resource to search (using React-Admin data provider)
  • The field to use to display the title of the resource

At the moment it is only possible to search for a single type of resource.