react-markdown - npm Package Versions

7.1.2 - 2022-01-02

• 656a4fa Fix ref in types
  by @ChristianMurphy in #668

7.1.1 - 2021-11-29

• 4185f06 Add improved docs
  by @wooorm in #657

7.1.0 - 2021-10-21

• 7b8a829 Add support for SpecialComponents to be any ComponentType
  by @Methuselah96 in #640
• a7c26fc Remove warning on whitespace in tables

7.0.1 - 2021-08-26

• ec387c2 Add improved type for linkTarget as string
• 5af6bc7 Fix to correctly compile intrinsic types

7.0.0 - 2021-08-13

Welcome to version 7. This a major release and therefore contains breaking changes.

Breaking changes

• 01b11fe c613efd a1e1c3f aeee9ac Use ESM (please read this)
• 3dffd6a Update dependencies (upgrade all your plugins and this should go fine)

Internals

• 8b5481c fb1b512 144af79 Replace jest with uvu
• 8c572df Replace rollup with esbuild
• 8737eac 28d4c75 b2dd046 Refactor code-style

6.0.3 - 2021-07-30

• 13367ed Fix types to include each element w/ its properties
• 0a1931a Fix to add min version of property-information

6.0.2 - 2021-05-06

• cefc02d Add string type for classNames
• 6355e45 Fix to pass vfile to plugins
• 5cf6e1b Fix to add warning when non-strings are given as children

6.0.1 - 2021-04-23

• 2e956be Fix whitespace in table elements
• d36048a Add architecture section to readme

6.0.0 - 2021-04-15

Welcome to version 6. This a major release and therefore contains breaking changes.

Change renderers to components

react-markdown used to let you define components for markdown constructs (link, delete, break, etc). This proved complex as users didn’t know about those names or markdown peculiarities (such as that there are fully formed links and link references).

See GH-549 for more on why this changed. See Appendix B: Components in readme.md for more on components.

Before (broken):

<Markdown
  renderers={{
    // Use a fancy hr
    thematicBreak: ({node, ...props}) => <MyFancyRule {...props} />
  }}
>{`***`}</Markdown>

Now (fixed):

<Markdown
  components={{
    // Use a fancy hr
    hr: ({node, ...props}) => <MyFancyRule {...props} />
  }}
>{`***`}</Markdown>

| Type (renderers) | Tag names (components) | | ----------------------------------- | --------------------------------------- | | blockquote | blockquote | | break | br | | code, inlineCode | code, pre​*​ | | definition | † | | delete | del‡ | | emphasis | em | | heading | h1, h2, h3, h4, h5, h6§ | | html, parsedHtml, virtualHtml | ‖ | | image, imageReference | img† | | link, linkReference | a† | | list | ol, ul¶ | | listItem | li | | paragraph | p | | root | ​**​ | | strong | strong | | table | table‡ | | tableHead | thead‡ | | tableBody | tbody‡ | | tableRow | tr‡ | | tableCell | td, th‡ | | text | | | thematicBreak | hr |

• ​*​ It’s possible to differentiate between code based on the inline prop. Block code is also wrapped in a pre
• † Resource ([text](url)) and reference ([text][id]) style links and images (and their definitions) are now resolved and treated the same
• ‡ Available when using remark-gfm
• § It’s possible to differentiate between heading based on the level prop
• ‖ When using rehype-raw (see below), components for those elements can also be used (for example, abbr for <abbr title="HyperText Markup Language">HTML</abbr>)
• ¶ It’s possible to differentiate between lists based on the ordered prop
• ​**​ Wrap ReactMarkdown in a component instead

Add rehypePlugins

We’ve added another plugin system: rehype. It’s similar to remark (what we’re using for markdown) but for HTML.

There are many rehype plugins. Some examples are @mapbox/rehype-prism (syntax highlighting with Prism), rehype-katex (rendering math with KaTeX), or rehype-autolink-headings (adding links to headings).

See List of plugins for more plugins.

import rehypeHighlight from 'rehype-highlight'

<Markdown rehypePlugins={[rehypeHighlight]}>{`~~~js
console.log(1)
~~~`}</Markdown>

Remove buggy HTML in markdown parser

In a lot of cases, you should not use HTML in markdown: it’s most always unsafe. And it defeats much of the purpose of this project (not relying on dangerouslySetInnerHTML).

react-markdown used to have an opt-in HTML parser with a bunch of bugs. As we now support rehype plugins, we can defer that work to a rehype plugin. To support HTML in markdown with react-markdown, use rehype-raw. The astPlugins and allowDangerousHtml (previously called escapeHtml) props are no longer needed and were removed.

When using rehype-raw, you should probably use rehype-sanitize too.

Before (broken):

import MarkdownWithHtml from 'react-markdown/with-html'

<MarkdownWithHtml>{`# Hello, <i>world</i>!`}</MarkdownWithHtml>

Now (fixed):

import Markdown from 'react-markdown'
import rehypeRaw from 'rehype-raw'
import rehypeSanitize from 'rehype-sanitize'

<Markdown rehypePlugins={[rehypeRaw, rehypeSanitize]}>{`# Hello, <i>world</i>!`}</Markdown>

Change source to children

Instead of passing a source pass children instead:

Before (broken):

<Markdown source="some\nmarkdown"></Markdown>

Now (fixed):

<Markdown>{`some
markdown`}</Markdown>

Or (also fixed):

<Markdown children={`some
markdown`} />

Replace allowNode, allowedTypes, and disallowedTypes

Similar to the renderers to components change, the filtering options also changed from being based on markdown names towards being based on HTML names: allowNode to allowElement, allowedTypes to allowedElements, and disallowedTypes to disallowedElements.

Before (broken):

<Markdown
  // Skip images
  disallowedTypes={['image']}
>{`![alt text](./image.url)`}</Markdown>

Now (fixed):

<Markdown
  // Skip images
  disallowedElements={['img']}
>{`![alt text](./image.url)`}</Markdown>

Before (broken):

<Markdown
  // Skip h1
  allowNode={(node) => node.type !== 'heading' || node.depth !== 1}
>{`# main heading`}</Markdown>

Now (fixed):

<Markdown
  // Skip h1
  allowElement={(element) => element.tagName !== 'h1'}
>{`# main heading`}</Markdown>

Change includeNodeIndex to includeElementIndex

Similar to the renderers to components change, this option to pass more info to components also changed from being based on markdown to being based on HTML.

Before (broken):

<Markdown
  includeNodeIndex={true}
  renderers={{
    paragraph({node, index, parentChildCount, ...props}) => <MyFancyParagraph {...props} />
  }}
>{`Some text`}</Markdown>

Now (fixed):

<Markdown
  includeElementIndex={true}
  components={{
    p({node, index, siblingsCount, ...props}) => <MyFancyParagraph {...props} />
  }}
>{`Some text`}</Markdown>

Change signature of transformLinkUri, linkTarget

The second parameter of these functions (to rewrite href on a or to define target on a) are now hast (HTML AST) instead of mdast (markdown AST).

Change signature of transformImageUri

The second parameter of this function was always undefined and the fourth was the alt (string) on the image. The second parameter is now that alt.

Remove support for React 15, IE11

We now use ES2015 (such as Object.assign) and removed certain hacks to work with React 15 and older.

5.0.3 - 2020-10-23

• bb0bdde Unlock peer dependency on React to allow v17
• 24e42bd Fix exception on missing element from html-to-react
• 3d363e9 Fix umd browser build