All Versions
73
Latest Version
Avg Release Cycle
48 days
Latest Release
822 days ago

Changelog History
Page 1

  • v8.0.0 Changes

    January 17, 2022

    🔌

    • cd845c9 Remove deprecated plugins option\ (migrate by renaming it to remarkPlugins)
    • 36e4916 Update remark-rehype, add support for passing it options\ by @peolic in #669\ (migrate by removing remark-footnotes and updating remark-gfm if you were using them, otherwise you shouldn’t notice this)

  • v7.1.2 Changes

    January 02, 2022

  • v7.1.1 Changes

    November 29, 2021

  • v7.1.0 Changes

    October 21, 2021

  • 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.