From de83a3364352b35b7363df10656f3ba766779b9d Mon Sep 17 00:00:00 2001 From: Aman Sachdev Date: Tue, 10 Jun 2025 21:59:30 +0530 Subject: [PATCH 1/3] docs: Add comprehensive rehype-raw plugin documentation with TypeScript support This adds missing documentation for using the rehype-raw plugin with react-markdown, addressing common issues: - Clarifies the difference between remarkPlugins and rehypePlugins - Provides TypeScript-specific guidance for type errors - Adds security considerations when using rehype-raw - Includes complete working examples This addresses user confusion reported in issues #696 and #765 about plugin usage. --- readme.md | 59 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 59 insertions(+) diff --git a/readme.md b/readme.md index 949b180..ba97048 100644 --- a/readme.md +++ b/readme.md @@ -693,6 +693,65 @@ CommonMark][commonmark-html]. Make sure to use blank lines around block-level HTML that again contains markdown! +### Using rehype-raw with TypeScript + +If you encounter TypeScript errors when using `rehype-raw`, you may need to use a type assertion: + +```tsx +import React from 'react' +import Markdown from 'react-markdown' +import rehypeRaw from 'rehype-raw' + +function App() { + return ( + + {`# Hello, world!`} + + ) +} +``` + +### Security considerations with rehype-raw + +⚠️ **Warning**: Using `rehype-raw` allows arbitrary HTML in markdown which can be a security risk. Always use it with [`rehype-sanitize`][github-rehype-sanitize] when processing untrusted content: + +```js +import React from 'react' +import Markdown from 'react-markdown' +import rehypeRaw from 'rehype-raw' +import rehypeSanitize from 'rehype-sanitize' + +function App() { + return ( + + {userGeneratedContent} + + ) +} +``` + +### Common mistakes + +❌ **Don't** use rehype plugins in `remarkPlugins`: +```js +// Wrong - this will not work + +``` + +✅ **Do** use rehype plugins in `rehypePlugins`: +```js +// Correct + +``` + +This is a common mistake because both remark and rehype are part of the unified ecosystem, but they process different stages of the content: +- **remark plugins** process markdown (mdast) +- **rehype plugins** process HTML (hast) + ## Appendix B: Components You can also change the things that come from markdown: From bbf0d47da92ef7cc7b51c1347fff3bc15dfe435c Mon Sep 17 00:00:00 2001 From: Aman Sachdev Date: Wed, 11 Jun 2025 14:31:09 +0530 Subject: [PATCH 2/3] fix: apply formatter to fix linting issues --- readme.md | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/readme.md b/readme.md index ba97048..5651e7d 100644 --- a/readme.md +++ b/readme.md @@ -51,6 +51,9 @@ React component to render markdown. * [Compatibility](#compatibility) * [Architecture](#architecture) * [Appendix A: HTML in markdown](#appendix-a-html-in-markdown) + * [Using rehype-raw with TypeScript](#using-rehype-raw-with-typescript) + * [Security considerations with rehype-raw](#security-considerations-with-rehype-raw) + * [Common mistakes](#common-mistakes) * [Appendix B: Components](#appendix-b-components) * [Appendix C: line endings in markdown (and JSX)](#appendix-c-line-endings-in-markdown-and-jsx) * [Security](#security) @@ -737,20 +740,23 @@ function App() { ### Common mistakes ❌ **Don't** use rehype plugins in `remarkPlugins`: + ```js // Wrong - this will not work ``` ✅ **Do** use rehype plugins in `rehypePlugins`: + ```js // Correct ``` This is a common mistake because both remark and rehype are part of the unified ecosystem, but they process different stages of the content: -- **remark plugins** process markdown (mdast) -- **rehype plugins** process HTML (hast) + +* **remark plugins** process markdown (mdast) +* **rehype plugins** process HTML (hast) ## Appendix B: Components From 2a8bc4dc7e9e9f3d91e8f86a77e0f04e418bd04f Mon Sep 17 00:00:00 2001 From: Aman Sachdev Date: Wed, 11 Jun 2025 14:40:53 +0530 Subject: [PATCH 3/3] fix: apply final formatter fixes --- readme.md | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/readme.md b/readme.md index 5651e7d..8644638 100644 --- a/readme.md +++ b/readme.md @@ -698,7 +698,8 @@ markdown! ### Using rehype-raw with TypeScript -If you encounter TypeScript errors when using `rehype-raw`, you may need to use a type assertion: +If you encounter TypeScript errors when using `rehype-raw`, you may need to +use a type assertion: ```tsx import React from 'react' @@ -718,7 +719,10 @@ function App() { ### Security considerations with rehype-raw -⚠️ **Warning**: Using `rehype-raw` allows arbitrary HTML in markdown which can be a security risk. Always use it with [`rehype-sanitize`][github-rehype-sanitize] when processing untrusted content: +⚠️ **Warning**: Using `rehype-raw` allows arbitrary HTML in markdown which can +be a security risk. +Always use it with [`rehype-sanitize`][github-rehype-sanitize] when processing +untrusted content: ```js import React from 'react' @@ -739,7 +743,7 @@ function App() { ### Common mistakes -❌ **Don't** use rehype plugins in `remarkPlugins`: +❌ **Don’t** use rehype plugins in `remarkPlugins`: ```js // Wrong - this will not work @@ -753,7 +757,8 @@ function App() { ``` -This is a common mistake because both remark and rehype are part of the unified ecosystem, but they process different stages of the content: +This is a common mistake because both remark and rehype are part of the +unified ecosystem, but they process different stages of the content: * **remark plugins** process markdown (mdast) * **rehype plugins** process HTML (hast)