Display markdown in activities

frontend/package.json

@@ -40,6 +40,7 @@
     "lodash": "^4.17.21",
     "logrocket": "^3.0.1",
     "logrocket-vuex": "^0.0.3",
+    "marked": "^4.2.3",
     "md5": "2.3.0",
     "moment": "^2.29.4",
     "nprogress": "0.2.0",

frontend/src/assets/scss/html.scss

@@ -0,0 +1,28 @@
+code {
+  white-space: pre-wrap;
+}
+
+.parsed-body {
+  ul,
+  ol {
+    padding: 0 2rem;
+  }
+
+  p {
+    min-height: 20px;
+  }
+
+  ul {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+
+    &:not(:has(input[type='checkbox'])) {
+      list-style: initial;
+    }
+  }
+
+  ol {
+    list-style: number;
+  }
+}

frontend/src/assets/scss/index.scss

@@ -23,6 +23,7 @@
 @import 'badge';
 @import 'content';
 @import 'popover';
+@import 'html';
 @import 'form/date-picker';
 @import 'form/radio';
 @import 'form/form';

frontend/src/integrations/devto/components/activity/devto-activity-content.vue

@@ -2,16 +2,17 @@
   <div>
     <div v-if="activity.parent && displayThread">
       <blockquote
-        class="relative px-3 border-l-4 text-gray-500 border-gray-200 text-xs leading-5 mb-4"
-        v-html="$sanitize(activity.parent.body)"
+        class="relative px-3 border-l-4 text-gray-500 border-gray-200 text-xs leading-5 mb-4 parsed-body"
+        v-html="$sanitize($marked(activity.parent.body))"
       />
     </div>
 
     <span
       v-if="displayBody"
       ref="body"
+      class="parsed-body"
       :class="bodyClass"
-      v-html="$sanitize(activity.body)"
+      v-html="$sanitize($marked(activity.body))"
     />
   </div>
 </template>

frontend/src/integrations/discord/components/activity/discord-activity-content.vue

@@ -2,15 +2,15 @@
   <div>
     <blockquote
       v-if="activity.parent && displayThread"
-      class="relative px-3 border-l-4 text-gray-500 border-gray-200 text-xs leading-5 mb-4"
-      v-html="$sanitize(activity.parent.body)"
+      class="relative px-3 border-l-4 text-gray-500 border-gray-200 text-xs leading-5 mb-4 parsed-body"
+      v-html="$sanitize($marked(activity.parent.body))"
     />
     <span
       v-if="displayBody"
       ref="body"
-      class="block whitespace-pre-wrap custom-break-all"
+      class="block whitespace-pre-wrap custom-break-all parsed-body"
       :class="bodyClass"
-      v-html="$sanitize(activity.body)"
+      v-html="$sanitize($marked(activity.body))"
     />
   </div>
 </template>

frontend/src/integrations/hackernews/components/activity/hackerNews-activity-content.vue

@@ -2,15 +2,16 @@
   <div>
     <div v-if="activity.parent && displayThread">
       <blockquote
-        class="relative px-3 border-l-4 text-gray-500 border-gray-200 text-xs leading-5 mb-4"
-        v-html="$sanitize(activity.parent.body)"
+        class="relative px-3 border-l-4 text-gray-500 border-gray-200 text-xs leading-5 mb-4 parsed-body"
+        v-html="$sanitize($marked(activity.parent.body))"
       />
     </div>
     <span
       v-if="displayBody"
       ref="body"
+      class="parsed-body"
       :class="bodyClass"
-      v-html="$sanitize(activity.body)"
+      v-html="$sanitize($marked(activity.body))"
     />
   </div>
 </template>

frontend/src/main.js

@@ -19,6 +19,7 @@ import LogRocket from 'logrocket'
 
 import App from '@/app.vue'
 import { vueSanitizeOptions } from '@/plugins/sanitize'
+import marked from '@/plugins/marked'
 
 i18nInit()
 /**
@@ -40,6 +41,7 @@ i18nInit()
   app.use(ElementPlus, { locale: getElementUILanguage() })
   app.use(VueGridLayout)
   app.use(Vue3Sanitize, vueSanitizeOptions)
+  app.use(marked)
   app.config.productionTip =
     process.env.NODE_ENV === 'production'
 

frontend/src/modules/activity/components/activity-content.vue

@@ -26,8 +26,8 @@
       <div v-else-if="activity.body">
         <blockquote
           v-if="activity.thread && displayThread"
-          class="relative px-3 border-l-4 text-gray-500 border-gray-200 text-xs leading-5 mb-4"
-          v-html="$sanitize(activity.thread.body)"
+          class="relative px-3 border-l-4 text-gray-500 border-gray-200 text-xs leading-5 mb-4 parsed-body"
+          v-html="$sanitize($marked(activity.thread.body))"
         />
         <span
           v-if="
@@ -39,11 +39,11 @@
         <span
           v-else-if="displayBody"
           ref="body"
-          class="block whitespace-pre-wrap custom-break-all activity-body"
+          class="block whitespace-pre-wrap custom-break-all activity-body parsed-body"
           :class="
             showMore && !more ? `text-limit-${limit}` : ''
           "
-          v-html="$sanitize(activity.body)"
+          v-html="$sanitize($marked(activity.body))"
         />
       </div>
     </div>

frontend/src/plugins/marked.js

@@ -0,0 +1,14 @@
+import { marked } from 'marked'
+
+export default {
+  install: (app) => {
+    app.config.globalProperties.$marked = (
+      markdownString,
+      options
+    ) => {
+      marked.setOptions(options)
+
+      return marked.parse(markdownString)
+    }
+  }
+}

frontend/src/plugins/sanitize.js

@@ -70,7 +70,8 @@ export const vueSanitizeOptions = {
     'th',
     'thead',
     'tr',
-    '<br>'
+    '<br>',
+    'input'
   ],
   disallowedTagsMode: 'discard',
   allowedAttributes: {
@@ -84,7 +85,8 @@ export const vueSanitizeOptions = {
       'width',
       'height',
       'loading'
-    ]
+    ],
+    input: ['checked', 'disabled', 'type']
   },
   selfClosing: [
     'img',