feat: Add inline katex support

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/Markup.js

@@ -8,6 +8,8 @@ import ParagraphBlock from './blocks/ParagraphBlock';
 import UnOrderedListBlock from './blocks/UnOrderedListBlock';
 import QuoteBlock from './blocks/QuoteBlock';
 import TaskListBlock from './blocks/TaskListBlock';
+import KatexErrorBoundary from './katex/KatexErrorBoundary';
+import KatexBlock from './katex/KatexBlock';
 
 const Markup = ({ tokens }) =>
   tokens.map((token, index) => {
@@ -45,6 +47,13 @@ const Markup = ({ tokens }) =>
       case 'LINE_BREAK':
         return <br key={index} />;
 
+      case 'KATEX':
+        return (
+          <KatexErrorBoundary code={token.value} key={index}>
+            <KatexBlock code={token.value} />
+          </KatexErrorBoundary>
+        );
+
       default:
         return null;
     }

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,39 @@
+import React, { useState } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+import PropTypes from 'prop-types';
+import { Box, Tooltip, useTheme } from '@embeddedchat/ui-elements';
+import { css } from '@emotion/react';
+
+const KatexErrorBoundary = ({ children, code }) => {
+  const [error, setError] = useState(null);
+  const { theme } = useTheme();
+  return (
+    <ErrorBoundary
+      onError={setError}
+      fallback={
+        <Tooltip
+          text={error?.message}
+          position="top"
+        >
+          <Box
+            is="span"
+            css={css`
+              text-decoration: underline;
+              text-decoration-color: ${theme.colors.destructive};
+            `}
+          >
+            <span>{code}</span>
+          </Box>
+        </Tooltip>
+      }
+    >
+      {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,
+};

packages/react/src/views/AttachmentHandler/AudioAttachment.js

@@ -32,7 +32,7 @@ const AudioAttachment = ({
       <Box
         css={[
           css`
-            line-height: 0;
+            line-height: 0.75rem;
             border-radius: inherit;
             padding: 0.5rem;
           `,

packages/react/src/views/AttachmentHandler/ImageAttachment.js

@@ -42,7 +42,7 @@ const ImageAttachment = ({
           css`
             cursor: pointer;
             border-radius: inherit;
-            line-height: 0;
+            line-height: 0.75rem;
             padding: 0.5rem;
           `,
           (type ? variantStyles.pinnedContainer : '') ||

packages/react/src/views/AttachmentHandler/VideoAttachment.js

@@ -42,7 +42,7 @@ const VideoAttachment = ({
       <Box
         css={[
           css`
-            line-height: 0;
+            line-height: 0.75rem;
             border-radius: inherit;
             padding: 0.5rem;
             @media (max-width: 450px) {

packages/ui-elements/src/components/Tooltip/Tooltip.styles.js

@@ -14,9 +14,10 @@ const getTooltipStyles = (theme, position) => {
       z-index: ${theme.zIndex?.tooltip || 1400};
       font-size: 12.5px;
       font-weight: 500;
-      white-space: nowrap;
+      max-width: 160px;
+      width: max-content;
       font-family: sans-serif;
-      top: ${position === 'top' ? 'calc(-100% - 20px)' : 'calc(100% + 10px)'};
+      ${position === 'top' ? 'bottom: calc(100% + 10px)' : 'top: calc(100% + 10px)'};
     `,
     tooltipArrow: css`
       content: '';

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"