All Versions
69
Latest Version
Avg Release Cycle
46 days
Latest Release
52 days ago

Changelog History
Page 1

  • v7.0.1 Changes

    August 26, 2021
    • ec387c2 Add improved type for linkTarget as string
    • 5af6bc7 Fix to correctly compile intrinsic types
  • v7.0.0 Changes

    August 13, 2021

    Welcome to version 7. πŸš€ This a major release and therefore contains breaking changes.

    πŸ’₯ Breaking changes

    Internals

  • v6.0.3 Changes

    July 30, 2021
    • 13367ed Fix types to include each element w/ its properties
    • 0a1931a Fix to add min version of property-information
  • v6.0.2 Changes

    May 06, 2021
    • 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
  • v6.0.1 Changes

    April 23, 2021
    • 2e956be Fix whitespace in table elements
    • d36048a Add architecture section to readme
  • v6.0.0 Changes

    April 15, 2021

    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.

    Show example of needed change

    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>
    

    Show conversion table

    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.

    Show example of feature

    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.

    Show example of needed change

    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:

    Show example of needed change

    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.

    Show example of needed change

    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.

    Show example of needed change

    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.

  • v5.0.3 Changes

    October 23, 2020
    • bb0bdde Unlock peer dependency on React to allow v17
    • 24e42bd Fix exception on missing element from html-to-react
    • 3d363e9 Fix umd browser build
  • v5.0.2 Changes

    October 23, 2020
    • 4dadaba Fix to allow combining allowedTypes, unwrapDisallowed in types
  • v5.0.1 Changes

    October 21, 2020
    • c3dc5ee Fix to not crash on empty text nodes
  • v5.0.0 Changes

    October 19, 2020

    πŸ’₯ BREAKING

    Maintained by unified

    This project is now maintained by the unified collective, which also houses the underlying tools used in react-markdown: hundreds of projects for working with markdown and markup related things (including MDX). ⚑️ We have cleaned the project: updated dependencies, improved πŸ“„ docs/tests/coverage/types, cleaned the issue tracker, and fixed a couple of bugs, but otherwise much should be the same.

    ⬆️ Upgrade remark-parse

    ⬆️ The parser used in react-markdown has been upgraded to the latest version. It is now 100% CommonMark compliant: that means it works the same as in other places, such as Discourse, Reddit, Stack Overflow, and GitHub. Note that GitHub does extend CommonMark: to match how Markdown works on GitHub, πŸ”Œ use the remark-gfm plugin.

    πŸ†• New serializer property: node

    A new node prop is passed to all non-tag/non-fragment renderers. This contains the raw mdast AST node, which opens up a number of interesting possibilities. The breaking change is for renderers which blindly spread their props to an underlying component/tag. For instance:

    <ReactMarkdown renderers={{link: props => <a {...props} />}} … />
    

    Should now be written as:

    <ReactMarkdown renderers={{link: ({node, ...props}) => <a {...props} />}} … />
    

    List/list item tight property replaced by spread

    Previously, the tight property would hint as to whether or not list items should be wrapped in paragraphs. This logic has now been replaced by a new spread property, which behaves slightly differently. Read more.