All notable changes will be documented in this file.
b67d714
Change to require Node.js 16
migrate: update tooec2b134
Change to require React 18
migrate: update toobf5824f
Change to useexports
migrate: don’t use private APIsc383a45
Update@types/hast
, utilities, plugins, etc
migrate: update tooeca5e6b
08ead9e
ReplacetransformImageUri
,transformLinkUri
w/urlTransform
migrate: see “AddurlTransform
” belowde29396
RemovelinkTarget
option
migrate: see “RemovelinkTarget
” below4346276
Remove support for passing custom props to components
migrate: see “RemoveincludeElementIndex
”, “RemoverawSourcePos
”, “RemovesourcePos
”, “Remove extra props passed to certain components” belowc0dfbd6
Remove UMD bundle from package
migrate: useesm.sh
or a CDN or soe12b5e9
Removeprop-types
migrate: use TypeScript4eb7aa0
Change to throw errors for removed props
migrate: don’t pass options that don’t do things8aabf74
Change to improve error messages
migrate: expect better messages
The transformImageUri
and transformLinkUri
were removed.
Having two functions is a bit much, particularly because there are more URLs
you might want to change (or which might be unsafe so we make them safe).
And their name and APIs were a bit weird.
You can use the new urlTransform
prop instead to change all your URLs.
The linkTarget
option was removed; you should likely not set targets.
If you want to, use
rehype-external-links
.
The includeElementIndex
option was removed, so index
is never passed to
components.
Write a plugin to pass index
:
Show example of plugin
import {visit} from 'unist-util-visit'
function rehypePluginAddingIndex() {
/**
* @param {import('hast').Root} tree
* @returns {undefined}
*/
return function (tree) {
visit(tree, function (node, index) {
if (node.type === 'element' && typeof index === 'number') {
node.properties.index = index
}
})
}
}
The rawSourcePos
option was removed, so sourcePos
is never passed to
components.
All components are passed node
, so you can get node.position
from them.
The sourcePos
option was removed, so data-sourcepos
is never passed to
elements.
Write a plugin to pass index
:
Show example of plugin
import {stringifyPosition} from 'unist-util-stringify-position'
import {visit} from 'unist-util-visit'
function rehypePluginAddingIndex() {
/**
* @param {import('hast').Root} tree
* @returns {undefined}
*/
return function (tree) {
visit(tree, function (node) {
if (node.type === 'element') {
node.properties.dataSourcepos = stringifyPosition(node.position)
}
})
}
}
When overwriting components, these props are no longer passed:
inline
oncode
— create a plugin or usepre
for the blocklevel
onh1
,h2
,h3
,h4
,h5
,h6
— checknode.tagName
insteadchecked
onli
— checktask-list-item
class or checkprops.children
index
onli
— create a pluginordered
onli
— create a plugin or check the parentdepth
onol
,ul
— create a pluginordered
onol
,ul
— checknode.tagName
insteadisHeader
ontd
,th
— checknode.tagName
insteadisHeader
ontr
— create a plugin or check children
c289176
Fix performance for keys by @wooorm in #7389034dbd
Fix types in syntax highlight example by @dlqqq in #736
Full Changelog: https://github.com/remarkjs/react-markdown/compare/8.0.6...8.0.7
33ab015
Update to TS 5
by @Methuselah96 in #734
d640d40
Update to usenode16
module resolution intsconfig.json
by @ChristianMurphy in #723402fea3
Fix typo inplugins
deprecation message
by @marc2332 in #7194f98f73
Remove deprecated and unneededdefaultProps
by @Lepozepo in #718
9b20440
Fix type oftd
,th
props
by @lucasassisrosa in #714cfe075b
Add clarification ofalt
onimg
in docs
by @cballenar in #692
2712227
Updatereact-is
704c3c6
Fix TypeScript bug by adding workaround
by @Methuselah96 in #676
c23ecf6
Add missing dependency for types
by @Methuselah96 in #675
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)
656a4fa
Fixref
in types
by @ChristianMurphy in #668
7b8a829
Add support forSpecialComponents
to be anyComponentType
by @Methuselah96 in #640a7c26fc
Remove warning on whitespace in tables
Welcome to version 7. This a major release and therefore contains breaking changes.
01b11fe
c613efd
a1e1c3f
aeee9ac
Use ESM (please read this)3dffd6a
Update dependencies (upgrade all your plugins and this should go fine)
8b5481c
fb1b512
144af79
Replacejest
withuvu
8c572df
Replacerollup
withesbuild
8737eac
28d4c75
b2dd046
Refactor code-style
13367ed
Fix types to include each element w/ its properties0a1931a
Fix to add min version ofproperty-information
cefc02d
Add string type forclassName
s6355e45
Fix to passvfile
to plugins5cf6e1b
Fix to add warning when non-strings are given aschildren
Welcome to version 6. This a major release and therefore contains breaking changes.
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
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>
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>
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`} />
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>
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>
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).
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
.
We now use ES2015 (such as Object.assign
) and removed certain hacks to work
with React 15 and older.
bb0bdde
Unlock peer dependency on React to allow v1724e42bd
Fix exception on missing element fromhtml-to-react
3d363e9
Fix umd browser build
4dadaba
Fix to allow combiningallowedTypes
,unwrapDisallowed
in types
c3dc5ee
Fix to not crash on empty text nodes
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.
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.
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} />}} … />
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.
- (Typings) Fix incorrect typescript definitions (Peng Guanwen)
- (Typings) Add typings for
react-markdown/html-parser
(Peng Guanwen)
- (Typings) Inline
RemarkParseOptions
for now (Espen Hovlandsdal)
- (Typings) Fix incorrect import -
RemarkParseOptions
(Jakub Chrzanowski)
- Add support for plugins that use AST transformations (Frankie Ali)
- (Typings) Add
parserOptions
to type definitions (Ted Piotrowski) - Allow renderer to be any React element type (Nathan Bierema)
- Add prop
parserOptions
to specify options for remark-parse (Kelvin Chan)
- (Typings) Make transformLinkUri & transformImageUri actually nullable (Florentin Luca Rieger)
- Fix HTML parsing of elements with a single child vs. multiple children (Nicolas Venegas)
- Fix matching of replaced non-void elements in HTML parser plugin (Nicolas Venegas)
- Fix HTML parsing of multiple void elements (Nicolas Venegas)
- Fix void element children invariant violation (Nicolas Venegas)
- Mitigate regex ddos by upgrading html-to-react (Christoph Werner)
- Update typings to allow arbitrary node types (Jesse Pinho)
- Readme: Add note about only parsing plugins working (Vincent Tunru)
- Upgrade dependencies (Espen Hovlandsdal)
- Output paragraph element for last item in loose list (Jeremy Moseley)
- Fix text rendering in React versions lower than or equal to 15 (Espen Hovlandsdal)
- [TypeScript] Fix TypeScript index signature for renderers (Linus Unnebäck)
text
is now a first-class node + renderer — if you are usingallowedNodes
, it needs to be included in this list. Since it is now a React component, it will be passed an object of props instead of the old approach where a string was passed.children
will contain the actual text string.- On React >= 16.2, if no
className
prop is provided, a fragment will be used instead of a div. To always render a div, pass'div'
as theroot
renderer. - On React >= 16.2, escaped HTML will no longer be rendered with div/span containers
- The UMD bundle now exports the component as
window.ReactMarkdown
instead ofwindow.reactMarkdown
- HTML parser plugin for full HTML compatibility (Espen Hovlandsdal)
- URI transformer allows uppercase http/https URLs (Liam Kennedy)
- [TypeScript] Strongly type the keys of
renderers
(Linus Unnebäck)
- Add support for passing index info to renderers (Beau Roberts)
- Allow specifying
target
attribute for links (Marshall Smith)
- Bump dependency for mdast-add-list-metadata as it was using ES6 features (Espen Hovlandsdal)
- Add more metadata props to list and listItem (André Staltz)
- list:
depth
- listItem:
ordered
,index
- list:
- Make
source
property optional in typescript definition (gRoberts84)
- Fix bug where rendering empty link references (
[][]
) would fail (Dennis S)
- Fix bug where unwrapping certain disallowed nodes would fail (Petr Gazarov)
- Add
rawSourcePos
property for passing structured source position info to renderers (Espen Hovlandsdal)
- Pass properties of unknown nodes directly to renderer (Jesse Pinho)
- Update TypeScript definition and prop types (ClassicDarkChocolate)
- Add support for fragment renderers (Benjamim Sonntag)
- Fix language escaping in code blocks (Espen Hovlandsdal)
- Pass the React key into an overridden text renderer (vanchagreen)
- Allow overriding text renderer (Thibaud Courtoison)
- Only use first language from code block (Espen Hovlandsdal)
- Enable transformImageUri for image references (evoye)
- Exclude babel config from npm package (Espen Hovlandsdal)
- Fixed partial table exception (Alexander Wong)
- Add readOnly property to checkboxes (Phil Rajchgot)
- Support for checkbox lists (Espen Hovlandsdal)
- Better typings (Igor Kamyshev)
- Experimental support for plugins (Espen Hovlandsdal)
- Provide more arguments to
transformLinkUri
/transformImageUri
(children, title, alt) (mudrz)
- FULL REWRITE. Changed parser from CommonMark to Markdown. Big, breaking changes. See BREAKING below.
- Table support!
- New types:
table
,tableHead
,tableBody
,tableRow
,tableCell
- New types:
- New type:
delete
(~~foo~~
) - New type:
imageReference
- New type:
linkReference
- New type:
definition
- Hacky, but basic support for React-native rendering of attributeless HTML
nodes (
<kbd>
,<sub>
, etc)
- Container props removed (
containerTagName
,containerProps
), overrideroot
renderer instead softBreak
option removed. New solution will be added at some point in the future.escapeHtml
is now TRUE by defaultHtmlInline
/HtmlBlock
are now namedhtml
(useisBlock
prop to check
if inline or block)- Renderer names are camelcased and in certain cases, renamed.
For instance:
Emph
=>emphasis
Item
=>listItem
Code
=>inlineCode
CodeBlock
=>code
linebreak
/hardbreak
=>break
- All renderers:
literal
prop is now calledvalue
* List renderer:type
prop is now a boolean namedordered
(Bullet
=>false
,Ordered
=>true
) walker
prop removed. Code depending on this will have to be rewritten to use theastPlugins
prop, which functions differently.allowNode
has new arguments (node, index, parent) — node has different props, see renderer propschildBefore
andchildAfter
props removed. Useroot
renderer instead.parserOptions
removed (new parser, so the old options doesn’t make sense anymore)
- Fix
<br/>
not having a node key (Alex Zaworski)
- Fix deprecations for React v15.5 (Renée Kooi)
- Fix too strict TypeScript definition (Rasmus Eneman)
- Update JSON-loader info in readme to match webpack 2 (Robin Wieruch)
- Add ability to pass options to the CommonMark parser (Evan Hensleigh)
- Fixed TypeScript definitions (Kohei Asai)
- Added TypeScript definitions (Ibragimov Ruslan)
- Added UMD-build (
umd/react-markdown.js
) (Espen Hovlandsdal)
- Update
commonmark-react-renderer
, fixing a bug with missing nodes (Espen Hovlandsdal)
- Plain DOM-node renderers are now given only their respective props. Fixes warnings when using React >= 15.2 (Espen Hovlandsdal)
- New
transformImageUri
option allows you to transform URIs for images (Petri Lehtinen)
- The
walker
instance is now passed to thewalker
callback function (Riku Rouvila)
- Add
childBefore
/childAfter
options (Thomas Lindstrøm)
- Add
containerProps
option (Thomas Lindstrøm)
- Join sibling text nodes into one text node (Espen Hovlandsdal)
- Update
commonmark-react-renderer
dependency to latest version to add keys to all elements and simplify custom renderers
- Breaking change: The renderer now requires Node 0.14 or higher. This is because the renderer uses stateless components internally.
- Breaking change:
allowNode
now receives different properties in the options argument. SeeREADME.md
for more details. - Breaking change: CommonMark has changed some type names.
Html
is nowHtmlInline
,Header
is nowHeading
andHorizontalRule
is nowThematicBreak
. This affects theallowedTypes
anddisallowedTypes
options. - Breaking change: A bug in the
allowedTypes
/disallowedTypes
andallowNode
options made them only applicable to certain types. In this version, all types are filtered, as expected. - Breaking change: Link URIs are now filtered through an XSS-filter by
default, prefixing “dangerous” protocols such as
javascript:
withx-
(eg:javascript:alert('foo')
turns intox-javascript:alert('foo')
). This can be overridden with thetransformLinkUri
-option. Passnull
to disable the feature or a custom function to replace the built-in behaviour.
- New
renderers
option allows you to customize which React component should be used for rendering given types. SeeREADME.md
for more details. (Espen Hovlandsdal / Guillaume Plique) - New
unwrapDisallowed
option allows you to select if the contents of a disallowed node should be “unwrapped” (placed into the disallowed node position). For instance, setting this option to true and disallowing a link would still render the text of the link, instead of the whole link node and all it’s children disappearing. (Espen Hovlandsdal) - New
transformLinkUri
option allows you to transform URIs in links. By default, an XSS-filter is used, but you could also use this for use cases like transforming absolute to relative URLs, or similar. (Espen Hovlandsdal)
- Rolled back dependencies because of breaking changes
- Updated dependencies for both
commonmark
andcommonmark-react-parser
to work around an embarrassing oversight on my part.
- Reverted change from 1.2.1 that uses the dist version.
Instead, documentation is added that specified the need for
json-loader
to be enabled when using webpack.
- Use pre-built (dist version) of commonmark renderer in order to work around JSON-loader dependency.
- Added new
allowNode
-property. See README for details.
- Set correct
libraryTarget
to make UMD builds work as expected
- Update babel dependencies and run prepublish only as actual prepublish, not install
- Fixed issue with React external name in global environment (
react
vsReact
)
- Add ability to allow/disallow specific node types (
allowedTypes
/disallowedTypes
)
- Moved React from dependency to peer dependency.