Merge pull request velopert#141 from velopert/enhance/math-typesetting

Enhance/math typesetting

Author: velopert

package.json

@@ -90,6 +90,7 @@
     "jest-environment-jsdom-fourteen": "0.1.0",
     "jest-resolve": "24.9.0",
     "jest-watch-typeahead": "0.4.2",
+    "katex": "^0.11.1",
     "koa": "^2.11.0",
     "koa-better-http-proxy": "^0.2.4",
     "koa-bodyparser": "^4.2.1",
@@ -124,10 +125,15 @@
     "react-virtualized": "^9.21.2",
     "redux": "^4.0.4",
     "redux-devtools-extension": "^2.13.8",
+    "rehype-katex": "^3.0.0",
+    "rehype-raw": "^4.0.2",
+    "rehype-stringify": "^6.0.1",
     "remark": "^11.0.2",
     "remark-breaks": "^1.0.3",
     "remark-highlight.js": "^5.2.0",
     "remark-html": "^10.0.0",
+    "remark-math": "^2.0.1",
+    "remark-rehype": "^6.0.0",
     "remark-slug": "^5.1.2",
     "resolve": "1.12.2",
     "resolve-url-loader": "3.1.1",

src/components/common/MarkdownRender.tsx

@@ -14,6 +14,14 @@ import parse from 'html-react-parser';
 import { throttle } from 'throttle-debounce';
 import sanitize from 'sanitize-html';
 import palette from '../../lib/styles/palette';
+import math from 'remark-math';
+import remark2rehype from 'remark-rehype';
+import katex from 'rehype-katex';
+import raw from 'rehype-raw';
+import remarkParse from 'remark-parse';
+import stringify from 'rehype-stringify';
+import { Helmet } from 'react-helmet-async';
+import katexWhitelist from '../../lib/katexWhitelist';
 
 export interface MarkdownRenderProps {
   markdown: string;
@@ -150,12 +158,16 @@ function filter(html: string) {
       'span',
       'img',
       'del',
+
+      ...katexWhitelist.tags,
     ],
     allowedAttributes: {
       a: ['href', 'name', 'target'],
       img: ['src'],
       iframe: ['src', 'allow', 'allowfullscreen', 'scrolling', 'class'],
-      '*': ['class', 'id'],
+      '*': ['class', 'id', 'aria-hidden'],
+      span: ['style'],
+      ...katexWhitelist.attributes,
     },
     allowedStyles: {
       '*': {
@@ -166,6 +178,9 @@ function filter(html: string) {
         ],
         'text-align': [/^left$/, /^right$/, /^center$/],
       },
+      span: {
+        ...katexWhitelist.styles,
+      },
     },
     allowedIframeHostnames: ['www.youtube.com', 'codesandbox.io', 'codepen.io'],
   });
@@ -189,11 +204,16 @@ const MarkdownRender: React.FC<MarkdownRenderProps> = ({
     ssrEnabled
       ? filter(
           remark()
-            .use(breaks)
+            .use(remarkParse)
             .use(prismPlugin)
-            .use(htmlPlugin)
             .use(embedPlugin)
+            .use(remark2rehype, { allowDangerousHTML: true })
+            .use(raw)
+            .use(breaks)
             .use(slug)
+            .use(math)
+            .use(katex)
+            .use(stringify)
             .processSync(markdown)
             .toString(),
         )
@@ -211,11 +231,16 @@ const MarkdownRender: React.FC<MarkdownRenderProps> = ({
 
   useEffect(() => {
     remark()
-      .use(breaks)
+      .use(remarkParse)
       .use(prismPlugin)
-      .use(htmlPlugin)
       .use(embedPlugin)
+      .use(remark2rehype, { allowDangerousHTML: true })
+      .use(raw)
+      .use(breaks)
       .use(slug)
+      .use(math)
+      .use(katex)
+      .use(stringify)
       .process(markdown, (err: any, file: any) => {
         const html = String(file);
 
@@ -241,8 +266,26 @@ const MarkdownRender: React.FC<MarkdownRenderProps> = ({
       });
   }, [applyElement, editing, markdown, onConvertFinish]);
 
+  // useEffect(() => {
+  //   if (editing) return;
+  //   const using = checkUsingMathjax(markdown);
+  //   if (using) {
+  //     loadMathjax();
+  //   }
+  // }, [html, element, markdown, editing]);
+
   return (
     <Typography>
+      <Helmet>
+        {/\$(.*)\$/.test(markdown) && (
+          <link
+            rel="stylesheet"
+            href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css"
+            integrity="sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq"
+            crossOrigin="anonymous"
+          />
+        )}
+      </Helmet>
       {editing ? (
         <MarkdownRenderErrorBoundary
           onError={() => setHasTagError(true)}

src/lib/katexWhitelist.ts

@@ -0,0 +1,73 @@
+const tags = [
+  'math',
+  'annotation',
+  'semantics',
+  'mtext',
+  'mn',
+  'mo',
+  'mi',
+  'mspace',
+  'mover',
+  'munder',
+  'munderover',
+  'msup',
+  'msub',
+  'msubsup',
+  'mfrac',
+  'mroot',
+  'msqrt',
+  'mtable',
+  'mtr',
+  'mtd',
+  'mlabeledtr',
+  'mrow',
+  'menclose',
+  'mstyle',
+  'mpadded',
+  'mphantom',
+  'mglyph',
+  'svg',
+  'path',
+  'line',
+];
+
+const attributes = tags.reduce((acc, current) => {
+  acc[current] = ['*'];
+  return acc;
+}, {} as Record<string, string[]>);
+
+const styles = [
+  'background-color',
+  'border-bottom-width',
+  'border-color',
+  'border-right-style',
+  'border-right-width',
+  'border-top-width',
+  'border-style',
+  'border-width',
+  'bottom',
+  'color',
+  'height',
+  'left',
+  'margin',
+  'margin-left',
+  'margin-right',
+  'margin-top',
+  'min-width',
+  'padding-left',
+  'position',
+  'top',
+  'width',
+  'vertical-align',
+].reduce((acc, current) => {
+  acc[current] = [/.*/];
+  return acc;
+}, {} as Record<string, RegExp[]>);
+
+const katexWhitelist = {
+  tags,
+  attributes,
+  styles,
+};
+
+export default katexWhitelist;

src/types/missingTypes.d.ts

@@ -4,5 +4,11 @@ declare module 'remark-html';
 declare module 'remark-highlight.js';
 declare module 'remark-breaks';
 declare module 'remark-slug';
+declare module 'remark-math';
+declare module 'remark-rehype';
+declare module 'rehype-katex';
+declare module 'remark-parse';
+declare module 'rehype-stringify';
+declare module 'rehype-raw';
 declare module 'unist-util-visit';
 declare module 'strip-markdown';