feat: Add inline katex support

Author: Abbas-Askari

packages/markups/package.json

@@ -76,7 +76,9 @@
         "@emotion/react": "11.7.1",
         "@rollup/plugin-json": "^6.0.0",
         "emoji-toolkit": "^7.0.1",
+        "katex": "^0.16.21",
         "prop-types": "^15.8.1",
+        "react-error-boundary": "^5.0.0",
         "react-syntax-highlighter": "^15.6.1"
     }
 }

packages/markups/src/elements/InlineElements.js

@@ -10,6 +10,8 @@ import ChannelMention from '../mentions/ChannelMention';
 import ColorElement from './ColorElement';
 import LinkSpan from './LinkSpan';
 import UserMention from '../mentions/UserMention';
+import KatexErrorBoundary from '../katex/KatexErrorBoundary';
+import KatexElement from '../katex/KatexElement';
 
 const InlineElements = ({ contents }) =>
   contents.map((content, index) => {
@@ -53,6 +55,14 @@ const InlineElements = ({ contents }) =>
             }
           />
         );
+
+      case 'INLINE_KATEX':
+        return (
+          <KatexErrorBoundary key={index} code={content.value}>
+            <KatexElement code={content.value} />
+          </KatexErrorBoundary>
+        );
+
       default:
         return null;
     }

packages/markups/src/katex/KatexBlock.js

@@ -0,0 +1,33 @@
+import PropTypes from 'prop-types';
+import katex from 'katex';
+import React, { useMemo } from 'react';
+
+import 'katex/dist/katex.css';
+
+const KatexBlock = ({ code }) => {
+  const html = useMemo(
+    () =>
+      katex.renderToString(code, {
+        displayMode: true,
+        macros: {
+          '\\href': '\\@secondoftwo',
+        },
+        maxSize: 100,
+      }),
+    [code]
+  );
+
+  return (
+    <div
+      role="math"
+      style={{ overflowX: 'auto' }}
+      aria-label={code}
+      dangerouslySetInnerHTML={{ __html: html }}
+    />
+  );
+};
+
+export default KatexBlock;
+KatexBlock.prototype = {
+  code: PropTypes.string.isRequired,
+};

packages/markups/src/katex/KatexElement.js

@@ -0,0 +1,26 @@
+import katex from 'katex';
+import React, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+
+import 'katex/dist/katex.css';
+
+const KatexElement = ({ code }) => {
+  const html = useMemo(
+    () =>
+      katex.renderToString(code, {
+        displayMode: false,
+        macros: {
+          '\\href': '\\@secondoftwo',
+        },
+        maxSize: 100,
+      }),
+    [code]
+  );
+
+  return <span dangerouslySetInnerHTML={{ __html: html }} />;
+};
+
+export default KatexElement;
+KatexElement.prototype = {
+  code: PropTypes.string.isRequired,
+};

packages/markups/src/katex/KatexErrorBoundary.js

@@ -0,0 +1,41 @@
+// import colors from '@rocket.chat/fuselage-tokens/colors.json';
+import React, { useState } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+import PropTypes from 'prop-types';
+import { Box } from '@embeddedchat/ui-elements';
+import { css } from '@emotion/react';
+
+// const Fallback = styled('span')`
+// 	text-decoration: underline;
+// 	text-decoration-color: ${colors.r400};
+// `;
+
+const KatexErrorBoundary = ({ children, code }) => {
+  const [error, setError] = useState(null);
+  return (
+    <ErrorBoundary
+      //   children={children}
+      onError={setError}
+      fallback={
+        <Box
+          is="span"
+          title={error?.message}
+          css={css`
+            text-decoration: underline;
+            text-decoration-color: red;
+          `}
+        >
+          <span>{code}</span>
+        </Box>
+      }
+    >
+      {children}
+    </ErrorBoundary>
+  );
+};
+
+export default KatexErrorBoundary;
+KatexErrorBoundary.propTypes = {
+  code: PropTypes.string.isRequired,
+  children: PropTypes.node.isRequired,
+};

packages/markups/src/katex/PreviewKatexBlock.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import 'katex/dist/katex.css';
+import PropTypes from 'prop-types';
+
+const PreviewKatexBlock = ({ code }) => <>{code}</>;
+
+export default PreviewKatexBlock;
+PreviewKatexBlock.propTypes = {
+  code: PropTypes.string.isRequired,
+};

packages/markups/src/katex/PreviewKatexElement.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import 'katex/dist/katex.css';
+
+const PreviewKatexElement = ({ code }) => <>{code}</>;
+
+export default PreviewKatexElement;
+PreviewKatexElement.propTypes = {
+  code: PropTypes.string.isRequired,
+};

yarn.lock

@@ -2360,12 +2360,14 @@ __metadata:
     eslint-plugin-react-hooks: ^4.6.0
     identity-obj-proxy: ^3.0.0
     jest: ^27.5.1
+    katex: ^0.16.21
     lint-staged: ^12.4.2
     npm-run-all: ^4.1.5
     prettier: ^2.8.1
     prop-types: ^15.8.1
     react: ^17.0.2
     react-dom: ^17.0.2
+    react-error-boundary: ^5.0.0
     react-syntax-highlighter: ^15.6.1
     rimraf: ^5.0.1
     rollup: ^2.70.1
@@ -21418,6 +21420,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"katex@npm:^0.16.21":
+  version: 0.16.21
+  resolution: "katex@npm:0.16.21"
+  dependencies:
+    commander: ^8.3.0
+  bin:
+    katex: cli.js
+  checksum: 14180322a4e8fe9e4227a08b7d86fde9ee445859ff534e6a540b85eb5022b39ea2be70082776cce8c59b891c247fce3d1c1a090ea7821e005fd8b7bfee714936
+  languageName: node
+  linkType: hard
+
 "keyv@npm:^4.5.3":
   version: 4.5.4
   resolution: "keyv@npm:4.5.4"
@@ -26869,6 +26882,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-error-boundary@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "react-error-boundary@npm:5.0.0"
+  dependencies:
+    "@babel/runtime": ^7.12.5
+  peerDependencies:
+    react: ">=16.13.1"
+  checksum: 4fa78890bb254fe1f0ee1eed893ac161a27482c4567f7667ef83a8339432eb99e323ee69757f01f4864e0037b01a9b6822735ea122f02e749d0bf7a781d9ea53
+  languageName: node
+  linkType: hard
+
 "react-error-overlay@npm:6.0.9":
   version: 6.0.9
   resolution: "react-error-overlay@npm:6.0.9"