feat(messages): add TeX and Markdown support for messages

re #27

components/Messages/Message.vue

@@ -4,7 +4,7 @@
       {{time}}
     </span>
     <span class="mx-2"/>
-    <span class="text--secondary">{{body}}</span>
+    <span class="text--secondary" ref="body" v-html="messageBody"></span>
   </div>
 </template>
 
@@ -13,7 +13,7 @@
   white-space: normal;
   .time {
     width: 50px;
-    font-size: 12px;
+    font-size: 11px !important;
     visibility: hidden;
   }
   &:hover {
@@ -22,10 +22,21 @@
     }
     background: darken(map-get($greys, "100"), 5%) !important;
   }
+  p {
+    display: inline;
+    margin: 0px !important;
+    padding: 0px;
+    border: none;
+  }
+  .MathJax {
+    outline: none;
+  }
 }
 </style>
 
 <script>
+const MarkdownIt = require("markdown-it")();
+
 export default {
   name: "Message",
   props: {
@@ -37,6 +48,12 @@ export default {
       type: Boolean,
     },
   },
+  computed: {
+    messageBody () {
+      setImmediate(() => window.MathJax.typeset([this.$refs.body]));
+      return MarkdownIt.render(this.body);
+    }
+  },
   methods: {
     formatTime (date) {
       let hours = date.getHours();

nuxt.config.js

@@ -24,7 +24,7 @@ export default {
       { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
       { rel: 'preconnect', href: 'https://fonts.gstatic.com' },
       { rel: 'stylesheet', type: 'text/css', href: 'https://fonts.googleapis.com/css2?family=Manrope' },
-    ]
+    ],
   },
 
   router: {
@@ -44,7 +44,8 @@ export default {
 
   // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
   plugins: [
-      '@/plugins/stanza.js'
+      '@/plugins/stanza.js',
+      '@/plugins/mathjax.js',
   ],
 
   // Auto import components: https://go.nuxtjs.dev/config-components

package.json

@@ -20,6 +20,7 @@
     "electron-localshortcut": "^3.2.1",
     "fuzzy-matching": "^0.4.3",
     "lz4js": "^0.2.0",
+    "markdown-it": "^12.0.4",
     "nuxt": "^2.14.12",
     "stanza": "^12.15.0"
   },

pages/chat/_entity.vue

@@ -18,7 +18,7 @@
       <div class="d-flex flex-column flex-grow-1 justify-space-between">
         <!-- Message List -->
         <div
-          ref="messageList" 
+          ref="messageList"
           style="min-height: 0; overflow: hidden scroll !important;"
           class="flex-grow-1 flex-shrink-1 pt-4"
         >
@@ -45,7 +45,7 @@
         :class="[this.searchActive ? 'searchmenu-shown' : 'searchmenu-hidden']" 
         style="z-index: 10; transition: 0.2s; overflow: hidden scroll;"
       >
-        <div style="width: 100%;" class="d-flex flex-column">
+        <div style="width: 100%;" class="d-flex flex-column" ref="matches">
           <div v-for="match in matches" :key="match.id" class="mb-4">
             <p class="ma-0 px-2">{{formatTime(new Date(match.timestamp))}}</p>
             <p class="ma-0 px-2 flex-shrink-1" style="white-space: normal;">
@@ -181,6 +181,7 @@ export default {
         }
       }
       this.matches = matches;
+      setImmediate(() => window.MathJax.typeset([this.$refs.matches]));
     },
     openSearch () {
       this.matches = [];

plugins/mathjax.js

@@ -0,0 +1,18 @@
+import Vue from "vue";
+
+export default async function() {
+    window.MathJax = {
+        tex: {
+            inlineMath: [["$", "$"]],
+            displayMath: [["$$", "$$"]],
+        },
+        options: {
+        },
+    };
+    const script = document.createElement("script");
+    script.src = "https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.1.2/es5/tex-svg-full.min.js";
+    await new Promise(resolve => {
+            script.onload = resolve;
+            document.head.appendChild(script);
+    });
+}