📝 @javier.alejandro.castro/react-mde

A simple yet powerful and extensible React Markdown Editor. React-mde has no 3rd party dependencies.

- Demo

Installing

yarn add @javier.alejandro.castro/react-mde

Markdown Preview

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.

Using

React-mde is a completely controlled component.

``jsx
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 (


export default App;
`

$3

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.

`jsx
getIcon={(name) => }
// ...
>


`

ReactMdeProvider Props

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 and pasteDropSelect.
- children: any; Pass children for adding custom non-ui commands

ReactMdeEditor Props

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;: 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: Function to load mention suggestions based on the
given text and triggeredBy (character that triggered the suggestions). The result should be an array of {preview: React.ReactNode, value: string}.
The preview is what is going to be displayed in the suggestions box. The value is what is going to be inserted in the textarea 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.

XSS concerns

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.

Licence

React-mde is MIT licensed.

Fork

This started as a fork of https://github.com/andrerpena/react-mde to enable additional features