🔧 Use @matejmazur/react-katex for text rendering (#1)

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",

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",

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";
 
 <div>
     <p>
@@ -12,5 +13,15 @@ It can be displayed in block format by setting the `block` prop to `true`.
     <p>
         (Don't confuse it with the area, which is <LatexMath>{`4 \\pi r^2`}</LatexMath>!)
     </p>
+    <p>
+        Do you know what <code>abs()</code> is?
+    </p>
+    <LatexMath block={true}>{`
+        | x | = \\begin{cases}
+            x \\qquad x > 0\\\\
+            0 \\qquad x = 0\\\\
+            -x \\qquad x < 0
+        \\end{cases}
+    `}</LatexMath>
 </div>
 ```

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 (
-        <MathComponent tex={children} display={block ?? false}/>
+        <TeX math={children} block={block}/>
     )
 }
 

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";

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: /(?<![.]module)[.]css$/,
+                    use: [
+                        "style-loader",
+                        {
+                            loader: 'css-loader',
+                            options: {
+                                importLoaders: 1,
+                                modules: false
+                            }
+                        }
+                    ]
+                },
+                {
+                    test: /[.](?:ttf|woff|woff2)$/,
+                    loader: "file-loader"
+                },
             ]
         }
     }