From 3828b589a135cc4b8164eb069f130eaa0772dd89 Mon Sep 17 00:00:00 2001 From: Stefano Pigozzi Date: Tue, 2 Feb 2021 03:09:54 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20Use=20@matejmazur/react-katex=20?= =?UTF-8?q?for=20text=20rendering=20(#1)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 69 ++++++++---------------------- package.json | 3 +- src/components/LatexMath/Readme.md | 11 +++++ src/components/LatexMath/index.js | 5 ++- src/components/index.js | 2 +- styleguide.config.js | 21 ++++++++- 6 files changed, 53 insertions(+), 58 deletions(-) diff --git a/package-lock.json b/package-lock.json index 47016d4..241512b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "bluelib", - "version": "0.24.3", + "version": "0.24.0", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -1289,6 +1289,11 @@ "integrity": "sha512-tsAQNx32a8CoFhjhijUIhI4kccIAgmGhy8LZMZgGfmXcpMbPRUqn5LWmgRttILi6yeGmBJd2xsPkFMs0PzgPCw==", "dev": true }, + "@matejmazur/react-katex": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/@matejmazur/react-katex/-/react-katex-3.1.3.tgz", + "integrity": "sha512-rBp7mJ9An7ktNoU653BWOYdO4FoR4YNwofHZi+vaytX/nWbIlmHVIF+X8VFOn6c3WYmrLT5FFBjKqCZ1sjR5uQ==" + }, "@nodelib/fs.scandir": { "version": "2.1.4", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.4.tgz", @@ -3209,9 +3214,9 @@ "integrity": "sha512-GHuDRO12Sypu2cV70d1dkA2EUmXHgntrzbpvOB+Qy+49ypNfGgFQIC2fhhXbnyrJRynDCAARsT7Ou0M6hirpfw==" }, "commander": { - "version": "6.2.1", - "resolved": "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz", - "integrity": "sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==" + "version": "2.20.3", + "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz", + "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==" }, "common-dir": { "version": "3.0.0", @@ -4698,11 +4703,6 @@ "estraverse": "^4.1.1" } }, - "esm": { - "version": "3.2.25", - "resolved": "https://registry.npmjs.org/esm/-/esm-3.2.25.tgz", - "integrity": "sha512-U1suiZ2oDVWv4zPO56S0NcR5QriEahGtdN2OR6FiOG4WJvcjBVFB0qI4+eKoWFH483PKGuLuu6V8Z4T5g63UVA==" - }, "esprima": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz", @@ -7475,6 +7475,14 @@ } } }, + "katex": { + "version": "0.12.0", + "resolved": "https://registry.npmjs.org/katex/-/katex-0.12.0.tgz", + "integrity": "sha512-y+8btoc/CK70XqcHqjxiGWBOeIL8upbS0peTPXTvgrh21n1RiWWcIpSWM+4uXq+IAgNh9YYQWdc7LVDPDAEEAg==", + "requires": { + "commander": "^2.19.0" + } + }, "kew": { "version": "0.7.0", "resolved": "https://registry.npmjs.org/kew/-/kew-0.7.0.tgz", @@ -7730,24 +7738,6 @@ "unquote": "^1.1.0" } }, - "mathjax-full": { - "version": "3.1.2", - "resolved": "https://registry.npmjs.org/mathjax-full/-/mathjax-full-3.1.2.tgz", - "integrity": "sha512-jFCwRFdFwIOa8J7r6VZT0AIv9ZwbLQ9aPc9YZp695NTvv7XKU2NunJodA+zDWzElIFJ7mTsImyfe5R3QyRNZjw==", - "requires": { - "esm": "^3.2.25", - "mj-context-menu": "^0.6.1", - "speech-rule-engine": "^3.1.1" - } - }, - "mathjax-react": { - "version": "1.0.6", - "resolved": "https://registry.npmjs.org/mathjax-react/-/mathjax-react-1.0.6.tgz", - "integrity": "sha512-GlkPAhaY0FKc95TMdo33mxNZHb+3xRgfgc3YcnQ0cZxvnM1UaF0o8mRI5y5xIwi3JnioeYuukZJWCbIZkACIVw==", - "requires": { - "mathjax-full": "^3.0.4" - } - }, "maxstache": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/maxstache/-/maxstache-1.0.7.tgz", @@ -8135,11 +8125,6 @@ } } }, - "mj-context-menu": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/mj-context-menu/-/mj-context-menu-0.6.1.tgz", - "integrity": "sha512-7NO5s6n10TIV96d4g2uDpG7ZDpIhMh0QNfGdJw/W47JswFcosz457wqz/b5sAKvl12sxINGFCn80NZHKwxQEXA==" - }, "mkdirp": { "version": "0.5.5", "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz", @@ -12326,16 +12311,6 @@ } } }, - "speech-rule-engine": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/speech-rule-engine/-/speech-rule-engine-3.1.1.tgz", - "integrity": "sha512-FGX8B44yI3yGhmcw8nZ/by2ffUlZG6m5b/O3RULXsSiwhL/evL+jwQ6BXQxV3gGtOYptOFalTVCAFknAJgBKAg==", - "requires": { - "commander": "^6.0.0", - "wicked-good-xpath": "^1.3.0", - "xmldom-sre": "^0.1.31" - } - }, "split-string": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/split-string/-/split-string-3.1.0.tgz", @@ -14131,11 +14106,6 @@ "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=", "dev": true }, - "wicked-good-xpath": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/wicked-good-xpath/-/wicked-good-xpath-1.3.0.tgz", - "integrity": "sha1-gbDpXoZQ5JyUsiKY//hoa1VTz2w=" - }, "wide-align": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz", @@ -14266,11 +14236,6 @@ "integrity": "sha512-T4tewALS3+qsrpGI/8dqNMLIVdq/g/85U98HPMa6F0m6xTbvhXU6RCQLqPH3+SlomNV/LdY6RXEbBpMH6EOJnA==", "dev": true }, - "xmldom-sre": { - "version": "0.1.31", - "resolved": "https://registry.npmjs.org/xmldom-sre/-/xmldom-sre-0.1.31.tgz", - "integrity": "sha512-f9s+fUkX04BxQf+7mMWAp5zk61pciie+fFLC9hX9UVvCeJQfNHRHXpeo5MPcR0EUf57PYLdt+ZO4f3Ipk2oZUw==" - }, "xmlhttprequest-ssl": { "version": "1.5.5", "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-1.5.5.tgz", diff --git a/package.json b/package.json index 2875c98..4ed844e 100644 --- a/package.json +++ b/package.json @@ -18,9 +18,10 @@ "dependencies": { "@babel/preset-env": "^7.12.11", "@babel/preset-react": "^7.12.10", + "@matejmazur/react-katex": "^3.1.3", "@reach/router": "^1.3.4", "classnames": "^2.2.6", - "mathjax-react": "^1.0.6", + "katex": "^0.12.0", "prop-types": "^15.7.2", "react": "^17.0.1", "react-dom": "^17.0.1", diff --git a/src/components/LatexMath/Readme.md b/src/components/LatexMath/Readme.md index ff9a724..c2f587c 100644 --- a/src/components/LatexMath/Readme.md +++ b/src/components/LatexMath/Readme.md @@ -3,6 +3,7 @@ Render a Latex math string. It can be displayed in block format by setting the `block` prop to `true`. ```jsx +import LatexMath from "./index";

@@ -12,5 +13,15 @@ It can be displayed in block format by setting the `block` prop to `true`.

(Don't confuse it with the area, which is {`4 \\pi r^2`}!)

+

+ Do you know what abs() is? +

+ {` + | x | = \\begin{cases} + x \\qquad x > 0\\\\ + 0 \\qquad x = 0\\\\ + -x \\qquad x < 0 + \\end{cases} + `}
``` diff --git a/src/components/LatexMath/index.js b/src/components/LatexMath/index.js index 5a947f1..ff9ec8c 100644 --- a/src/components/LatexMath/index.js +++ b/src/components/LatexMath/index.js @@ -1,11 +1,12 @@ import React from "react"; -import { MathComponent } from 'mathjax-react' +import "katex/dist/katex.css"; +import TeX from '@matejmazur/react-katex'; import PropTypes from "prop-types"; export default function LatexMath({children, block}) { return ( - + ) } diff --git a/src/components/index.js b/src/components/index.js index b6dad3d..97aa501 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -9,7 +9,7 @@ export {default as Code} from "./Code"; export {default as Color} from "./Color"; export {default as Help} from "./Help"; export {default as Italic} from "./Italic"; -export {default as LatexMath} from "./LatexMath"; +// export {default as LatexMath} from "./LatexMath"; // Do not export this, it should use dynamic load if imported export {default as ListItem} from "./ListItem"; export {default as Main} from "./Main"; export {default as Paragraph} from "./Paragraph"; diff --git a/styleguide.config.js b/styleguide.config.js index a8a3c1e..0eb112b 100644 --- a/styleguide.config.js +++ b/styleguide.config.js @@ -8,7 +8,7 @@ module.exports = { loader: "babel-loader" }, { - test: /[.]css$/, + test: /[.]module[.]css$/, use: [ "style-loader", { @@ -19,7 +19,24 @@ module.exports = { } } ] - } + }, + { + test: /(?