remarkjs / react-markdown

Markdown component for React
https://remarkjs.github.io/react-markdown/
MIT License
13.24k stars 873 forks source link

with-html.d.ts removed in latest version (v6.0.1) -- breaking changes -- restore support #580

Closed DopamineDriven closed 3 years ago

DopamineDriven commented 3 years ago

with-html.d.ts file restoration or an alternative plugin to replace its functionality indicated in the docs

I use headless-wordpress, nextjs, typescript, apollo client, graphql, etc for most of my client projects. I have been using react-markdown/with-html with the gfm parser and React-Syntax-Highlighter renderer to parse incoming dangerouslySetInnerHtml or otherwise for about 10 months now. I updated the react-markdown package from v5.0.3 to v6.0.1 and didn't realize that typescript support for with-html had been removed until the linter caught it on a pre-push husky hook.

Problem

If the feature requests relates to a problem, please describe the problem you are trying to solve here.

Anthr@LAPTOP-2IH011V4 MINGW64 ~/gitlab-wcd/faderoom (master)
$ yarn add react-markdown
yarn add v1.22.10
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@2.3.2: The platform "win32" is incompatible with this module.
info "fsevents@2.3.2" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning " > @graphql-codegen/typescript-react-apollo@2.2.1" has unmet peer dependency "graphql-tag@^2.0.0".
[4/4] Building fresh packages...
success Saved 1 new dependency.
info Direct dependencies
└─ react-markdown@6.0.1
info All dependencies
└─ react-markdown@6.0.1
$ husky install
husky - Git hooks installed
Done in 40.13s.
Done in 69.59s.
[master e7554f5] UI updates -- updated global ui-types file and packages to latest versions
 5 files changed, 428 insertions(+), 284 deletions(-)
Enter passphrase for key '/c/Users/Anthr/.ssh/id_ed25519': 
yarn run v1.22.10
$ tsc --pretty --noEmit
components/Landing/Google/google-reviews.tsx:4:27 - error TS2307: Cannot find module 'react-markdown/with-html' or its corresponding type declarations.

4 import ReactMarkdown from 'react-markdown/with-html';
                            ~~~~~~~~~~~~~~~~~~~~~~~~~~

components/NotFound/not-found.tsx:5:27 - error TS2307: Cannot find module 'react-markdown/with-html' or its corresponding type declarations.

5 import ReactMarkdown from 'react-markdown/with-html';
                            ~~~~~~~~~~~~~~~~~~~~~~~~~~

components/PageTemplate/page-template.tsx:4:27 - error TS2307: Cannot find module 'react-markdown/with-html' or its corresponding type declarations.

4 import ReactMarkdown from 'react-markdown/with-html';
                            ~~~~~~~~~~~~~~~~~~~~~~~~~~

components/ServiceTemplate/service-template.tsx:4:27 - error TS2307: Cannot find module 'react-markdown/with-html' or its corresponding type declarations.

4 import ReactMarkdown from 'react-markdown/with-html';
                            ~~~~~~~~~~~~~~~~~~~~~~~~~~

components/UI/ReviewTemplate/review-template.tsx:4:27 - error TS2307: Cannot find module 'react-markdown/with-html' or its corresponding type declarations.

4 import ReactMarkdown from 'react-markdown/with-html';
                            ~~~~~~~~~~~~~~~~~~~~~~~~~~

Found 5 errors.

As expected, this was resolved by rolling back to v5.0.3.

Expected behavior

The contents of this file should remain available for those who have projects built out using react-markdown/with-html globally. Expected the contents of this file to be present: with-html.d.ts

Note: While I use this prop as little as possible since exposing XSS vector sites isn't ideal, it is necessary when parsing the body or content of an external source for example. Other props such as title or image don't require one to dangerously escape innerHtml or not nearly as often.

// 
<blockquote className='mt-2 text-sm text-olive-300 space-y-4'>
    <ReactMarkdown
        plugins={[gfm]}
        children={`${review!.text}`}
        allowDangerousHtml={true}
    />
</blockquote>
// 
// TypeScript Version: 3.4

import {ReactElement} from 'react'
import {ReactMarkdownProps} from 'react-markdown'

declare namespace ReactMarkdown {}
declare function ReactMarkdown(props: ReactMarkdownProps): ReactElement

export = ReactMarkdown

Alternatives

Publish a solution for those who used the allowDangerousHtml prop in your documentation, such as an external albeit compatible html parser to achieve the same level of support that with-html provided.

ChristianMurphy commented 3 years ago

The TypeScript error is correct, with-html was replaced with rehype in version 6. You can see this in the changelog https://github.com/remarkjs/react-markdown/blob/main/changelog.md#remove-buggy-html-in-markdown-parser along with an example of how to use rehype.

As for allowing more content than rehype-sanitized usually allows, there are two options:

  1. (recommended) customize the sanitizer to allow additional content you trust is safe (see https://github.com/remarkjs/remark/discussions/688 for some examples, and https://github.com/syntax-tree/hast-util-sanitize#readme for documentation)
  2. (not recommended) disable rehype-sanitize