From b99047694a4e074869cdc4630cf1e3320ce04631 Mon Sep 17 00:00:00 2001 From: Espen Hovlandsdal Date: Sat, 24 Oct 2020 14:42:07 +0200 Subject: [PATCH 1/2] Add support for React 17 --- package.json | 14 +++++++------- test/react-markdown.test.js | 2 +- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/package.json b/package.json index 9072964c..94fb8925 100644 --- a/package.json +++ b/package.json @@ -39,10 +39,10 @@ "dependencies": { "@types/mdast": "^3.0.3", "@types/unist": "^2.0.3", - "html-to-react": "^1.3.4", + "html-to-react": "^1.4.5", "mdast-add-list-metadata": "1.0.1", "prop-types": "^15.7.2", - "react-is": "^16.8.6", + "react-is": "^17.0.0", "remark-parse": "^9.0.0", "unified": "^9.0.0", "unist-util-visit": "^2.0.0", @@ -50,7 +50,7 @@ }, "peerDependencies": { "@types/react": "^15.0.0 || ^16.0.0", - "react": "^15.0.0 || ^16.0.0" + "react": ">=16" }, "devDependencies": { "@babel/cli": "^7.0.0", @@ -64,10 +64,10 @@ "@rollup/plugin-replace": "^2.0.0", "@types/react": "^16.0.0", "@types/react-dom": "^16.0.0", + "@wojtekmaj/enzyme-adapter-react-17": "^0.1.1", "babel-plugin-transform-react-remove-prop-types": "^0.4.24", "dtslint": "^4.0.0", "enzyme": "^3.10.0", - "enzyme-adapter-react-16": "^1.0.0", "eslint": "^7.0.0", "eslint-config-prettier": "^6.0.0", "eslint-config-sanity": "^4.0.0", @@ -75,10 +75,10 @@ "jest": "^26.0.0", "npm-run-all": "^4.0.0", "prettier": "^2.0.0", - "react": "^16.0.0", - "react-dom": "^16.0.0", "react-katex": "^2.0.0", - "react-test-renderer": "^16.0.0", + "react": "^17.0.0", + "react-dom": "^17.0.0", + "react-test-renderer": "^17.0.0", "remark-cli": "^9.0.0", "remark-gfm": "^1.0.0", "remark-math": "^4.0.0", diff --git a/test/react-markdown.test.js b/test/react-markdown.test.js index 00075ab2..ce22e5d5 100644 --- a/test/react-markdown.test.js +++ b/test/react-markdown.test.js @@ -1,7 +1,7 @@ /* eslint-env jest */ /* eslint-disable react/prop-types */ const Enzyme = require('enzyme') -const Adapter = require('enzyme-adapter-react-16') +const Adapter = require('@wojtekmaj/enzyme-adapter-react-17') const fs = require('fs') const path = require('path') const React = require('react') From 468c7280f144ce485b18a22f8d1d80aae3c0ccb9 Mon Sep 17 00:00:00 2001 From: Christian Murphy Date: Thu, 10 Dec 2020 06:18:21 -0700 Subject: [PATCH 2/2] migrate to matejmazur react katex for react 17 support (#521) --- package.json | 4 ++- readme.md | 10 +++--- .../__snapshots__/react-markdown.test.js.snap | 31 +------------------ test/react-markdown.test.js | 23 +++++--------- 4 files changed, 16 insertions(+), 52 deletions(-) diff --git a/package.json b/package.json index e73ab21e..ce43ac9a 100644 --- a/package.json +++ b/package.json @@ -57,11 +57,13 @@ "@babel/core": "^7.0.0", "@babel/preset-env": "^7.0.0", "@babel/preset-react": "^7.0.0", + "@matejmazur/react-katex": "^3.0.0", "@rollup/plugin-babel": "^5.0.0", "@rollup/plugin-commonjs": "^16.0.0", "@rollup/plugin-json": "^4.0.0", "@rollup/plugin-node-resolve": "^10.0.0", "@rollup/plugin-replace": "^2.0.0", + "@testing-library/react": "^11.0.0", "@types/react": "^16.0.0", "@types/react-dom": "^16.0.0", "babel-plugin-transform-react-remove-prop-types": "^0.4.24", @@ -71,11 +73,11 @@ "eslint-config-sanity": "^4.0.0", "eslint-plugin-react": "^7.0.0", "jest": "^26.0.0", + "katex": "^0.12.0", "npm-run-all": "^4.0.0", "prettier": "^2.0.0", "react": "^17.0.0", "react-dom": "^17.0.0", - "react-katex": "^2.0.0", "react-test-renderer": "^17.0.0", "remark-cli": "^9.0.0", "remark-gfm": "^1.0.0", diff --git a/readme.md b/readme.md index b559d22a..94c1e09d 100644 --- a/readme.md +++ b/readme.md @@ -281,19 +281,19 @@ render(, document.bod This example shows how a syntax extension is used to support math in markdown that adds new node types ([`remark-math`][math]), which are then handled by -renderers to use [`react-katex`][react-katex]: +renderers to use [`@matejmazur/react-katex`][react-katex]: ```jsx import React from 'react' import ReactMarkdown from 'react-markdown' -import {InlineMath, BlockMath} from 'react-katex' +import Tex from '@matejmazur/react-katex' import {render} from 'react-dom' import math from 'remark-math' import 'katex/dist/katex.min.css' // `react-katex` does not import the CSS for you const renderers = { - inlineMath: ({value}) => , - math: ({value}) => + inlineMath: ({value}) => , + math: ({value}) => } render( @@ -494,7 +494,7 @@ abide by its terms. [security]: #security -[react-katex]: https://github.com/talyssonoc/react-katex +[react-katex]: https://github.com/MatejBransky/react-katex [react-syntax-highlighter]: https://github.com/react-syntax-highlighter/react-syntax-highlighter diff --git a/test/__snapshots__/react-markdown.test.js.snap b/test/__snapshots__/react-markdown.test.js.snap index 33b58e9a..f34a4a05 100644 --- a/test/__snapshots__/react-markdown.test.js.snap +++ b/test/__snapshots__/react-markdown.test.js.snap @@ -1007,36 +1007,7 @@ exports[`can use parser plugins 1`] = `

`; -exports[`passes along all props when the node type is unknown 1`] = ` -Array [ -

- Lift( - LLL", - } - } - /> - ) can be determined by Lift Coefficient ( - CLC_LCL​", - } - } - /> - ) like the following equation. -

, -
L=12ρv2SCLL = \\\\frac{1}{2} \\\\rho v^2 S C_LL=21​ρv2SCL​", - } - } - />, -] -`; +exports[`passes along all props when the node type is unknown 1`] = `"

Lift(LLL) can be determined by Lift Coefficient (CLC_LCL​) like the following equation.

L=12ρv2SCLL = \\\\frac{1}{2} \\\\rho v^2 S C_LL=21​ρv2SCL​
"`; exports[`sanitizes certain dangerous urls for links by default 1`] = ` Array [ diff --git a/test/react-markdown.test.js b/test/react-markdown.test.js index d877746f..0c4b3619 100644 --- a/test/react-markdown.test.js +++ b/test/react-markdown.test.js @@ -8,7 +8,8 @@ const visit = require('unist-util-visit') const ReactDom = require('react-dom/server') const renderer = require('react-test-renderer') const math = require('remark-math') -const reactKatex = require('react-katex') +const TeX = require('@matejmazur/react-katex') +const {render} = require('@testing-library/react') const htmlParser = require('../src/plugins/html-parser') const Markdown = require('../src/react-markdown') const MarkdownWithHtml = require('../src/with-html') @@ -703,16 +704,9 @@ test('can render the whole spectrum of markdown within a single run (with html p }) test('passes along all props when the node type is unknown', () => { - expect.assertions(1) - - /* eslint-disable no-console */ - // React warns about something in react-katex currently. - const warn = console.warn - console.warn = Function.prototype - const renderers = { - inlineMath: ({value}) => , - math: ({value}) => + inlineMath: ({value}) => , + math: ({value}) => } renderers.inlineMath.displayName = 'inlineMath' renderers.math.displayName = 'math' @@ -720,14 +714,11 @@ test('passes along all props when the node type is unknown', () => { const input = 'Lift($L$) can be determined by Lift Coefficient ($C_L$) like the following equation.\n\n$$\nL = \\frac{1}{2} \\rho v^2 S C_L\n$$' - const component = renderer.create( + const component = render( - ) - - expect(component.toJSON()).toMatchSnapshot() + ).container.innerHTML - console.warn = warn - /* eslint-enable no-console */ + expect(component).toMatchSnapshot() }) test('can match and reactify cheap/simple inline html', () => {