Changelog History
Page 1
-
v8.0.0 Changes
January 17, 2022π
-
cd845c9
Remove deprecatedplugins
option\ (migrate by renaming it toremarkPlugins
) -
36e4916
Updateremark-rehype
, add support for passing it options\ by @peolic in #669\ (migrate by removingremark-footnotes
and updatingremark-gfm
if you were using them, otherwise you shouldnβt notice this)
-
-
v7.1.2 Changes
January 02, 2022-
656a4fa
Fixref
in types\ by @ChristianMurphy in #668
-
-
v7.1.1 Changes
November 29, 2021 -
v7.1.0 Changes
October 21, 2021-
7b8a829
Add support forSpecialComponents
to be anyComponentType
\ by @Methuselah96 in #640 -
a7c26fc
Remove warning on whitespace in tables
-
-
v7.0.1 Changes
August 26, 2021 -
v6.0.3 Changes
July 30, 2021 -
v6.0.2 Changes
May 06, 2021 -
v6.0.1 Changes
April 23, 2021 -
v6.0.0 Changes
April 15, 2021Welcome to version 6. π This a major release and therefore contains breaking changes.
π Change
renderers
tocomponents
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 apre
- β 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), orrehype-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 withreact-markdown
, userehype-raw
. π TheastPlugins
andallowDangerousHtml
(previously calledescapeHtml
) props π are no longer needed and were removed.When using
rehype-raw
, you should probably userehype-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
tochildren
Instead of passing a
source
passchildren
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
, anddisallowedTypes
Similar to the
renderers
tocomponents
change, the filtering options also changed from being based on markdown names towards being based on HTML names:allowNode
toallowElement
,allowedTypes
toallowedElements
, anddisallowedTypes
todisallowedElements
.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
toincludeElementIndex
Similar to the
renderers
tocomponents
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
ona
or to definetarget
ona
) 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 thealt
(string
) on the image. The second parameter is now thatalt
.β 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. - β*β Itβs possible to differentiate between code based on the