markdown styling changes in progress

api/lib/utils/misc.js

@@ -1,8 +1,15 @@
 const cleanUpPrimaryKeyValue = (value) => {
   // For Bing convoId handling
   return value.replace(/--/g, '-');
+};
+
+function replaceSup(text) {
+  if (!text.includes('<sup>')) return text;
+  const replacedText = text.replace(/<sup>/g, '^').replace(/\s+<\/sup>/g, '^');
+  return replacedText;
 }
 
 module.exports = {
   cleanUpPrimaryKeyValue,
-}
+  replaceSup
+};

api/server/routes/search.js

@@ -4,7 +4,7 @@ const { MeiliSearch } = require('meilisearch');
 const { Message } = require('../../models/Message');
 const { Conversation, getConvosQueried } = require('../../models/Conversation');
 const { reduceHits } = require('../../lib/utils/reduceHits');
-const { cleanUpPrimaryKeyValue } = require('../../lib/utils/misc');
+const { replaceSup, cleanUpPrimaryKeyValue } = require('../../lib/utils/misc');
 const cache = new Map();
 
 router.get('/sync', async function (req, res) {
@@ -46,7 +46,7 @@ router.get('/', async function (req, res) {
       return {
         ...rest,
         searchResult: true,
-        text: _formatted.text
+        text: replaceSup(_formatted.text)
       };
     });
     const titles = (await Conversation.meiliSearch(q)).hits;

client/package-lock.json

@@ -36,6 +36,8 @@
         "rehype-katex": "^6.0.2",
         "remark-gfm": "^3.0.1",
         "remark-math": "^5.1.1",
+        "remark-sub-super": "^1.0.20",
+        "remark-supersub": "^1.0.0",
         "swr": "^2.0.3",
         "tailwind-merge": "^1.9.1",
         "tailwindcss-animate": "^1.0.5",
@@ -10975,6 +10977,19 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/remark-sub-super": {
+      "version": "1.0.20",
+      "resolved": "https://registry.npmjs.org/remark-sub-super/-/remark-sub-super-1.0.20.tgz",
+      "integrity": "sha512-ohnGWuB8FSvod8Qp+gEo/7QRDlI2RA8d+YyY4eLuMQPD3WGwqGMCuyWdNOSW0mzDMqse82PJqeke/GGXaj795A=="
+    },
+    "node_modules/remark-supersub": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/remark-supersub/-/remark-supersub-1.0.0.tgz",
+      "integrity": "sha512-3SYsphMqpAWbr8AZozdcypozinl/lly3e7BEwPG3YT5J9uZQaDcELBF6/sr/OZoAlFxy2nhNFWSrZBu/ZPRT3Q==",
+      "dependencies": {
+        "unist-util-visit": "^4.0.0"
+      }
+    },
     "node_modules/require-from-string": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
@@ -20770,6 +20785,19 @@
         "unified": "^10.0.0"
       }
     },
+    "remark-sub-super": {
+      "version": "1.0.20",
+      "resolved": "https://registry.npmjs.org/remark-sub-super/-/remark-sub-super-1.0.20.tgz",
+      "integrity": "sha512-ohnGWuB8FSvod8Qp+gEo/7QRDlI2RA8d+YyY4eLuMQPD3WGwqGMCuyWdNOSW0mzDMqse82PJqeke/GGXaj795A=="
+    },
+    "remark-supersub": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/remark-supersub/-/remark-supersub-1.0.0.tgz",
+      "integrity": "sha512-3SYsphMqpAWbr8AZozdcypozinl/lly3e7BEwPG3YT5J9uZQaDcELBF6/sr/OZoAlFxy2nhNFWSrZBu/ZPRT3Q==",
+      "requires": {
+        "unist-util-visit": "^4.0.0"
+      }
+    },
     "require-from-string": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",

client/package.json

@@ -46,6 +46,8 @@
     "rehype-katex": "^6.0.2",
     "remark-gfm": "^3.0.1",
     "remark-math": "^5.1.1",
+    "remark-sub-super": "^1.0.20",
+    "remark-supersub": "^1.0.0",
     "swr": "^2.0.3",
     "tailwind-merge": "^1.9.1",
     "tailwindcss-animate": "^1.0.5",

client/src/components/Messages/Content/Content.jsx

@@ -4,6 +4,8 @@ import rehypeKatex from 'rehype-katex';
 import rehypeHighlight from 'rehype-highlight';
 import remarkMath from 'remark-math';
 import remarkGfm from 'remark-gfm';
+// import supersub from 'remark-supersub'
+import remarkSubSuper from 'remark-sub-super';
 import CodeBlock from './CodeBlock';
 import { langSubset } from '~/utils/languages';
 
@@ -11,7 +13,7 @@ const Content = React.memo(({ content }) => {
   return (
     <>
       <ReactMarkdown
-        remarkPlugins={[remarkGfm, [remarkMath, { singleDollarTextMath: false }]]}
+        remarkPlugins={[remarkGfm, [remarkMath, { singleDollarTextMath: false }], remarkSubSuper]}
         rehypePlugins={[
           [rehypeKatex, { output: 'mathml' }],
           [
@@ -23,10 +25,15 @@ const Content = React.memo(({ content }) => {
             }
           ]
         ]}
+        renderers={{
+          sub: 'sub',
+          sup: 'sup',
+        }}
         linkTarget="_new"
         components={{
           code,
           p,
+          // em,
         }}
       >
         {content}