A simple yet powerful and extensible React Markdown Editor. React-mde has no 3rd party dependencies.
yarn add @javier.alejandro.castro/react-mde
React-mde is agnostic regarding how to preview Markdown. The examples will use Showdown
yarn add showdown
It is also possible to return a Promise to React Element from generateMarkdownPreview
, which makes
it possible to use ReactMarkdown as a preview.
React-mde is a completely controlled component.
import React, { useState } from 'react';
import { ReactMdeProvider, ReactMdeEditor } from '@javier.alejandro.castro/react-mde';
import * as Showdown from 'showdown';
const converter = new Showdown.Converter({
tables: true,
simplifiedAutoLink: true,
strikethrough: true,
tasklists: true,
});
const App = () => {
const [value, setValue] = useState('**Hello world!!!**');
return (
<div className="container">
<ReactMdeProvider>
<ReactMdeEditor
value={value}
onChange={setValue}
generateMarkdownPreview={(markdown) =>
Promise.resolve(converter.makeHtml(markdown))
}
/>
</ReactMdeProvider>
</div>
);
};
export default App;
React-mde comes with SVG icons extracted from FontAwesome.
You can customize the way icons are resolved by passing your own getIcon
that will return a ReactNode
given a command name.
<ReactMdeProvider
getIcon={(name) => <MyCustomIcon name={name} />}
// ...
>
<ReactMdeEditor {...props} />
</ReactMdeProvider>
The types are described below
- onTabChange?: (tab: Tab) => void;
- getIcon?: GetIcon An optional set of button content options, to allow custom icon rendering.
- disableMaximize?: boolean; Disables the maximize command.
- initialMaximized?: boolean; The initial maximized state; defaults to false.
- onMaximizedChange: (isMaximized: boolean) => void: Function called when maximized
-
l18n?: A localization option. It contains the strings
write
,preview
,uploadingFile
andpasteDropSelect
. - children: any; Pass children for adding custom non-ui commands
The types are described below
- value: string: The Markdown value.
-
onChange: (value: string): Event handler for the
onChange
event. state changes: allow the component user to customize surrounding CSS for allowing to expand to full screen editing. - customLayout?: React.ReactNode: Allows providing a custom toolbar layout, ie. adding new commands.
-
generateMarkdownPreview: (markdown: string) => Promise<string | ReactElement>;: Function that should return a Promise to the generated HTML or a React element for the preview. If this
prop
is falsy, then no preview is going to be generated. - loadingPreview: What to display in the preview while it is loading. Value can be string, React Element or anything React can render.
- readOnly?: boolean: Flag to render the editor in read-only mode.
- minHeight?: number: Minimum height for textarea while in write.
- disablePreview?: boolean: Flag to disable built-in preview, when you need to handle it outside the component.
-
loadSuggestions?: (text: string, triggeredBy: string) => Promise<Suggestion[]>: Function to load mention suggestions based on the
given
text
andtriggeredBy
(character that triggered the suggestions). The result should be an array of{preview: React.ReactNode, value: string}
. Thepreview
is what is going to be displayed in the suggestions box. Thevalue
is what is going to be inserted in thetextarea
on click or enter. -
suggestionTriggerCharacters (string[]): Characters that will trigger mention suggestions to be loaded. This property is useless
without
loadSuggestions
. -
childProps?: Object: An object containing props to be passed to
textArea
.
React-mde does not automatically sanitize the HTML preview. If your using Showdown, this has been taken from their documentation:
Cross-side scripting is a well known technique to gain access to private information of the users of a website. The attacker injects spurious HTML content (a script) on the web page which will read the user’s cookies and do something bad with it (like steal credentials). As a countermeasure, you should filter any suspicious content coming from user input. Showdown doesn’t include an XSS filter, so you must provide your own. But be careful in how you do it…
You might want to take a look at showdown-xss-filter.
It is also possible to return a Promise to a React Element from generateMarkdownPreview
, which makes
it possible to use ReactMarkdown as a preview. ReactMarkdown has built-in XSS protection.
React-mde is MIT licensed.
This started as a fork of https://github.com/andrerpena/react-mde to enable additional features