bridge revolt latex to discord

bridge/src/revolt/events.ts

@@ -319,7 +319,23 @@ async function renderMessageBody(message: string): Promise<string> {
         .replace(
             /!!.+!!/g,
             (match) => `||${match.substring(2, match.length - 2)}||`
+        )
+        // KaTeX blocks
+        .replace(/(\$\$[^$]+\$\$)|(\$[^$]+\$)/g, (match) => {
+            const dollarCount =
+                match.startsWith("$$") && match.endsWith("$$") ? 2 : 1;
+            const tex = match.substring(
+                dollarCount,
+                match.length - dollarCount
             );
+            const output = `[\`${tex}\`](<https://automod.me/tex/?tex=${encodeURI(
+                tex
+            )}>)`;
+
+            // Make sure we don't blow through the message length limit
+            const newLength = message.length - match.length + output.length;
+            return newLength <= 2000 ? output : `\`${tex}\``;
+        });
 
     return message;
 }

web/package.json

@@ -16,6 +16,7 @@
     "automod": "^0.1.0",
     "axios": "^0.25.0",
     "core-js": "^3.20.3",
+    "katex": "^0.16.0",
     "localforage": "^1.10.0",
     "prop-types": "^15.8.1",
     "react": "^17.0.2",
@@ -24,6 +25,7 @@
     "styled-components": "^5.3.3"
   },
   "devDependencies": {
+    "@types/katex": "^0.14.0",
     "@types/react": "^17.0.33",
     "@types/react-dom": "^17.0.10",
     "@vitejs/plugin-react": "^1.0.7",

web/src/App.tsx

@@ -7,6 +7,7 @@ import RequireAuth from './components/RequireAuth';
 import DashboardHome from './pages/DashboardHome';
 import ServerDashboard from './pages/ServerDashboard/ServerDashboard';
 import localforage from 'localforage';
+import TexPage from './pages/Tex';
 
 const API_URL = import.meta.env.VITE_API_URL?.toString()
   || 'http://localhost:9000';
@@ -33,6 +34,7 @@ function App() {
         <Route path='/' element={<Home />} />
         <Route path='/dashboard' element={<RequireAuth><DashboardHome /></RequireAuth>} />
         <Route path='/dashboard/:serverid' element={<RequireAuth><ServerDashboard /></RequireAuth>} />
+        <Route path='/tex' element={<TexPage />} />
       </Routes>
     </BrowserRouter>
   );

web/src/pages/Tex.tsx

@@ -0,0 +1,30 @@
+import { FunctionComponent, useMemo } from "react";
+import katex from "katex";
+import { useLocation } from "react-router-dom";
+import "katex/dist/katex.min.css";
+
+const TexPage: FunctionComponent = () => {
+    const tex = new URLSearchParams(useLocation().search).get("tex");
+    const html = useMemo(() => katex.renderToString(tex ?? ""), [tex]);
+
+    return tex ? (
+        <div
+            style={{
+                display: "flex",
+                justifyContent: "center",
+                flexDirection: "row",
+                marginTop: "32px",
+                fontSize: "24px",
+            }}
+        >
+            <div
+                style={{ color: "var(--foreground)" }}
+                dangerouslySetInnerHTML={{ __html: html }}
+            />
+        </div>
+    ) : (
+        <h3 style={{ color: "var(--foreground)" }}>No input TeX provided</h3>
+    );
+};
+
+export default TexPage;

web/yarn.lock

@@ -512,6 +512,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/katex@npm:^0.14.0":
+  version: 0.14.0
+  resolution: "@types/katex@npm:0.14.0"
+  checksum: 330e0d0337ba48c87f5b793965fbad673653789bf6e50dfe8d726a7b0cbefd37195055e31503aae629814aa79447e4f23a4b87ad1ac565c0d9a9d9978836f39b
+  languageName: node
+  linkType: hard
+
 "@types/prop-types@npm:*":
   version: 15.7.4
   resolution: "@types/prop-types@npm:15.7.4"
@@ -810,6 +817,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"commander@npm:^8.0.0":
+  version: 8.3.0
+  resolution: "commander@npm:8.3.0"
+  checksum: 0f82321821fc27b83bd409510bb9deeebcfa799ff0bf5d102128b500b7af22872c0c92cb6a0ebc5a4cf19c6b550fba9cedfa7329d18c6442a625f851377bacf0
+  languageName: node
+  linkType: hard
+
 "concat-map@npm:0.0.1":
   version: 0.0.1
   resolution: "concat-map@npm:0.0.1"
@@ -1454,6 +1468,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"katex@npm:^0.16.0":
+  version: 0.16.0
+  resolution: "katex@npm:0.16.0"
+  dependencies:
+    commander: ^8.0.0
+  bin:
+    katex: cli.js
+  checksum: 0e094523544b3c921e55da8cf1a9ea2718213c621af508af9fc03859b97dc73280f478fbfede5a8b32948210c3596c5a637dd64e0e28e31d6c617b5d50c29762
+  languageName: node
+  linkType: hard
+
 "lie@npm:3.1.1":
   version: 3.1.1
   resolution: "lie@npm:3.1.1"
@@ -2244,6 +2269,7 @@ __metadata:
     "@revoltchat/ui": ^1.0.24
     "@types/axios": ^0.14.0
     "@types/core-js": ^2.5.5
+    "@types/katex": ^0.14.0
     "@types/react": ^17.0.33
     "@types/react-dom": ^17.0.10
     "@types/styled-components": ^5.1.21
@@ -2251,6 +2277,7 @@ __metadata:
     automod: ^0.1.0
     axios: ^0.25.0
     core-js: ^3.20.3
+    katex: ^0.16.0
     localforage: ^1.10.0
     prop-types: ^15.8.1
     react: ^17.0.2