Update dependency react-markdown to v10 #58

renovate · 2024-10-20T02:52:38Z

This PR contains the following updates:

Package	Change	Age	Adoption	Passing	Confidence
react-markdown	`^5.0.3` -> `^10.0.0`

Release Notes

remarkjs/react-markdown (react-markdown)

`v10.0.0`

Compare Source

aaaa40b
Remove support for className prop
migrate: see “Remove className” below

Remove `className`

The className prop was removed.
If you want to add classes to some element that wraps the markdown
you can explicitly write that element and add the class to it.
You can then choose yourself which tag name to use and whether to add other
props.

Before:

<Markdown className="markdown-body">{markdown}</Markdown>

After:

<div className="markdown-body">
  <Markdown>{markdown}</Markdown>
</div>

`v9.1.0`

Compare Source

6ce120e Add support for async plugins
by @wooorm in https://github.com/remarkjs/react-markdown/pull/890

Full Changelog: remarkjs/react-markdown@9.0.3...9.1.0

`v9.0.3`

Compare Source

(same as 9.0.2 but now with d.ts files)

Full Changelog: remarkjs/react-markdown@9.0.2...9.0.3

d8e3787 Fix double encoding in new url transform
55d8d83 Refactor docs to use createRoot

Full Changelog: remarkjs/react-markdown@9.0.0...9.0.1

`v9.0.0`

Compare Source

b67d714
Change to require Node.js 16
migrate: update too
ec2b134
Change to require React 18
migrate: update too
bf5824f
Change to use exports
migrate: don’t use private APIs
c383a45
Update @types/hast, utilities, plugins, etc
migrate: update too
eca5e6b
08ead9e
Replace transformImageUri, transformLinkUri w/ urlTransform
migrate: see “Add urlTransform” below
de29396
Remove linkTarget option
migrate: see “Remove linkTarget” below
4346276
Remove support for passing custom props to components
migrate: see “Remove includeElementIndex”, “Remove rawSourcePos”,
“Remove sourcePos”, “Remove extra props passed to certain components”
below
c0dfbd6
Remove UMD bundle from package
migrate: use esm.sh or a CDN or so
e12b5e9
Remove prop-types
migrate: use TypeScript
4eb7aa0
Change to throw errors for removed props
migrate: don’t pass options that don’t do things
8aabf74
Change to improve error messages
migrate: expect better messages

Add `urlTransform`

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.

Remove `linkTarget`

The linkTarget option was removed; you should likely not set targets.
If you want to, use
rehype-external-links.

Remove `includeElementIndex`

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() {
  /**
   * @&#8203;param {import('hast').Root} tree
   * @&#8203;returns {undefined}
   */
  return function (tree) {
    visit(tree, function (node, index) {
      if (node.type === 'element' && typeof index === 'number') {
        node.properties === index
      }
    })
  }
}

Remove `rawSourcePos`

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.

Remove `sourcePos`

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() {
  /**
   * @&#8203;param {import('hast').Root} tree
   * @&#8203;returns {undefined}
   */
  return function (tree) {
    visit(tree, function (node) {
      if (node.type === 'element') {
        node.properties.dataSourcepos = stringifyPosition(node.position)
      }
    })
  }
}

Remove extra props passed to certain components

When overwriting components, these props are no longer passed:

inline on code
— create a plugin or use pre for the block
level on h1, h2, h3, h4, h5, h6
— check node.tagName instead
checked on li
— check task-list-item class or check props.children
index on li
— create a plugin
ordered on li
— create a plugin or check the parent
depth on ol, ul
— create a plugin
ordered on ol, ul
— check node.tagName instead
isHeader on td, th
— check node.tagName instead
isHeader on tr
— create a plugin or check children

`v8.0.7`

Compare Source

Perf

c289176 Fix performance for keys
by @wooorm in https://github.com/remarkjs/react-markdown/pull/738

Docs

9034dbd Fix types in syntax highlight example
by @dlqqq in https://github.com/remarkjs/react-markdown/pull/736

Full Changelog: remarkjs/react-markdown@8.0.6...8.0.7

`v8.0.6`

Compare Source

33ab015
Update to TS 5
by @Methuselah96
in #734

`v8.0.5`

Compare Source

d640d40
Update to use node16 module resolution in tsconfig.json
by @ChristianMurphy
in #723
402fea3
Fix typo in plugins deprecation message
by @marc2332
in #719
4f98f73
Remove deprecated and unneeded defaultProps
by @Lepozepo
in #718

`v8.0.4`

Compare Source

9b20440
Fix type of td, th props
by @lucasassisrosa
in #714
cfe075b
Add clarification of alt on img in docs
by @cballenar
in #692

`v8.0.3`

Compare Source

a2fb833
Fix prop types of plugins
by @starpit
in #683

`v8.0.2`

Compare Source

2712227
Update react-is
704c3c6
Fix TypeScript bug by adding workaround
by @Methuselah96
in #676

`v8.0.1`

Compare Source

c23ecf6
Add missing dependency for types
by @Methuselah96
in #675

`v8.0.0`

Compare Source

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`

Compare Source

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

`v7.1.1`

Compare Source

4185f06
Add improved docs
by @wooorm
in #657

`v7.1.0`

Compare Source

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

`v7.0.1`

Compare Source

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

`v7.0.0`

Compare Source

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

`v6.0.3`

Compare Source

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

`v6.0.2`

Compare Source

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`

Compare Source

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

`v6.0.0`

Compare Source

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.

Configuration

📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about this update again.

If you want to rebase/retry this PR, check this box

This PR was generated by Mend Renovate. View the repository job log.

renovate bot force-pushed the renovate/major-remark branch from c315828 to b267c13 Compare October 22, 2024 08:16

Update dependency react-markdown to v10

c9ca24e

renovate bot changed the title ~~Update dependency react-markdown to v9~~ Update dependency react-markdown to v10 Feb 20, 2025

renovate bot force-pushed the renovate/major-remark branch from b267c13 to c9ca24e Compare February 20, 2025 16:52

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update dependency react-markdown to v10 #58

Update dependency react-markdown to v10 #58

renovate bot commented Oct 20, 2024 •

edited

Loading

Update dependency react-markdown to v10 #58

Are you sure you want to change the base?

Update dependency react-markdown to v10 #58

Conversation

renovate bot commented Oct 20, 2024 • edited Loading

Release Notes

Remove className

Types

Miscellaneous

Add urlTransform

Remove linkTarget

Remove includeElementIndex

Remove rawSourcePos

Remove sourcePos

Remove extra props passed to certain components

Perf

Docs

Breaking changes

Internals

Change renderers to components

Add rehypePlugins

Remove buggy HTML in markdown parser

Change source to children

Replace allowNode, allowedTypes, and disallowedTypes

Change includeNodeIndex to includeElementIndex

Change signature of transformLinkUri, linkTarget

Change signature of transformImageUri

Remove support for React 15, IE11

Configuration

renovate bot commented Oct 20, 2024 •

edited

Loading

Remove `className`

Add `urlTransform`

Remove `linkTarget`

Remove `includeElementIndex`

Remove `rawSourcePos`

Remove `sourcePos`

Change `renderers` to `components`

Add `rehypePlugins`

Change `source` to `children`

Replace `allowNode`, `allowedTypes`, and `disallowedTypes`

Change `includeNodeIndex` to `includeElementIndex`

Change signature of `transformLinkUri`, `linkTarget`

Change signature of `transformImageUri`