npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@spacefleet/react-mde

v11.3.4

Published

React Markdown Editor

Downloads

2

Readme

📝 react-mde

npm MinZipped twitter

A simple yet powerful and extensible React Markdown Editor that aims to have feature parity with the Github Markdown editor. React-mde has no 3rd party dependencies.

Demo

Installing

npm i react-mde

Using

React-mde is a completely controlled component.

Minimal example using Showdown. View live on CodeSandBox:

import * as React from "react";
import ReactMde from "react-mde";
import * as Showdown from "showdown";
import "react-mde/lib/styles/css/react-mde-all.css";

const converter = new Showdown.Converter({
  tables: true,
  simplifiedAutoLink: true,
  strikethrough: true,
  tasklists: true
});

export default function App() {
  const [value, setValue] = React.useState("**Hello world!!!**");
  const [selectedTab, setSelectedTab] = React.useState<"write" | "preview">("write");
  return (
    <div className="container">
      <ReactMde
        value={value}
        onChange={setValue}
        selectedTab={selectedTab}
        onTabChange={setSelectedTab}
        generateMarkdownPreview={markdown =>
          Promise.resolve(converter.makeHtml(markdown))
        }
      />
    </div>
  );
}

Markdown Preview

React-mde is agnostic regarding how to preview Markdown. The prop generateMarkdownPreview should return a Promise of either a string or a ReactElement.

Customizing Icons

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.

<ReactMde
    getIcon={(commandName) => <MyCustomIcon name={commandName} />}
    onChange={this.handleValueChange}
    // ...
/>

React-mde Props

The types are described below

  • value: string: The Markdown value.
  • onChange: (value: string): Event handler for the onChange event.
  • selectedTab: "write" | "preview": The currently selected tab.
  • onTabChange: (tab) => void: Function called when the selected tab changes.
  • classes?: Object: An object containing the following optional properties: reactMde, toolbar, preview, textArea and suggestionsDropdown. This allows for passing class names to each of the inner components of React-mde. Classes defined in the classes prop follow the specification of Jed Watson's classNames project.
  • commands?: Record<string, Command>: An object with string properties representing keys, and a Command object as value for each key. These are custom commands. Commands are explained in more details below.
  • toolbarCommands?: string[][]: Array of array of strings, indicating which commands should be displayed. Each outer array is a group. Example: [["code", "bold"], ["italic"]]. The default list can be obtained with import { getDefaultToolbarCommands } from 'react-mde', getDefaultToolbarCommands()
  • 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.
  • getIcon?: (commandName: string) => React.ReactNode } An optional set of button content options, including an iconProvider to allow custom icon rendering. options. It is recommended to inspect the layouts source code to see what options can be passed to each while the documentation is not complete.
  • 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.
  • l18n?: A localization option. It contains the strings write, preview, uploadingImage and pasteDropSelect.
  • minEditorHeight?: number: The minimum height of the editor.
  • maxEditorHeight?: number: The max height of the editor (after that, it will scroll).
  • minPreviewHeight?: number: The minimum height of the preview.
  • heightUnits?: string: The height units, defaults to px.
  • loadSuggestions?: (text: string, triggeredBy: string) => Promise<Suggestion[]>: 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.
  • suggestionsAutoplace?: boolean: Try to move the suggestions popover around so that it fits in the viewport, defaults to false
  • childProps?: Object: An object containing props to be passed to writeButton, previewButton, commandButtons and textArea.
  • paste: PasteOptions: Options for file upload.

Styling

The following styles from React-mde should be added: (Both .scss and .css files are available. No need to use sass-loader if you don't want)

Easiest way: import react-mde-all.css:

import 'react-mde/lib/styles/css/react-mde-all.css';

If you want to have a more granular control over the styles, you can import each individual file.

If you're using SASS, you can override these variables: https://github.com/andrerpena/react-mde/blob/master/src/styles/variables.scss

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. View issue. ReactMarkdown has built-in XSS protection.

Please refer to the commands source code to understand how they should be implemented.

Change log / Migrating from older versions

Instructions here.

Licence

React-mde is MIT licensed.

Third party

In order to make React-mde zero deps, I've embedded two small libraries:

  • https://github.com/grassator/insert-text-at-cursor by https://twitter.com/d_kubyshkin
  • https://github.com/JedWatson/classnames by https://twitter.com/JedWatson

About the author

Made with :heart: by André Pena and other awesome contributors.

twitter