Re-wrote description.vue to parse markdown. #2633

Author: knirirr

package.json

@@ -25,6 +25,7 @@
     "bootstrap-vue": "^2.16.0",
     "core-js": "^3.28.0",
     "deep-object-diff": "^1.1.0",
+    "dompurify": "^3.3.1",
     "dotenv": "^16.0.3",
     "graphology": "^0.25.1",
     "graphology-layout": "^0.6.1",

src/components/Records/Record/GeneralInfo/Description.vue

@@ -1,41 +1,64 @@
 <template>
   <div class="d-flex flex-row mt-4 min-height-40">
-    <span
-      class="d-flex align-baseline width-15-percent-flex"
-    >
+    <span class="d-flex align-baseline width-15-percent-flex">
       <v-tooltip bottom>
         <template #activator="{ on }">
-          <v-icon
-            class="mr-2"
-            size="15"
-            v-on="on"
-          >
-            fa-question-circle
-          </v-icon>
+          <v-icon class="mr-2" size="15" v-on="on"> fa-question-circle </v-icon>
         </template>
-        {{ recordTooltips['description'] }}
+        {{ recordTooltips.description }}
       </v-tooltip>
       <b>Description</b>
     </span>
+
+    <!-- use v-html to inject sanitized HTML -->
     <p
       class="ma-0 full-width ml-md-12 ml-8"
-      :class="{'text-end' : $vuetify.breakpoint.smAndDown}"
-    >
-      {{ getField('description') | capitalize }}
-    </p>
+      :class="{ 'text-end': $vuetify.breakpoint.smAndDown }"
+      v-html="descriptionHtml"
+    />
   </div>
 </template>
 
 <script>
-import {mapGetters, mapState} from "vuex";
+import DOMPurify from "dompurify";
+import MarkdownIt from "markdown-it";
+import { mapGetters, mapState } from "vuex";
 
 import stringUtils from "@/utils/stringUtils";
+
+const md = new MarkdownIt({
+  html: true, // allow inline HTML in Markdown input (we will sanitize below)
+  linkify: true,
+  typographer: true,
+});
+
 export default {
   name: "Description",
   mixins: [stringUtils],
   computed: {
     ...mapGetters("record", ["getField"]),
     ...mapState("editor", ["recordTooltips"]),
-  }
-}
+
+    // raw description string from store (fallback to empty string)
+    descriptionRaw() {
+      const d = this.getField("description");
+      return d == null ? "" : d;
+    },
+
+    // capitalise using stringutils capitalize method, then render => sanitize
+    descriptionHtml() {
+      // if your mixin exposes `capitalize`, call it; otherwise remove the call
+      const capitalized =
+        typeof this.capitalize === "function"
+          ? this.capitalize(this.descriptionRaw)
+          : this.descriptionRaw;
+
+      const unsafe = md.render(capitalized || "");
+      // Sanitize the generated HTML to avoid XSS.
+      return DOMPurify.sanitize(unsafe, {
+        // ALLOWED_URI_REGEXP: /^(?:(?:https?|mailto|tel):|[^a-z]|[a-z+.\-]+(?:[^a-z+.\-:]|$))/i
+      });
+    },
+  },
+};
 </script>

src/components/Records/Record/RecordAlert.vue

@@ -6,7 +6,10 @@
     :icon="type === 'info' ? 'fas fa-circle-exclamation' : null"
   >
     <!-- eslint-disable vue/no-v-html -->
-    <span id="message-text" v-html="message" />
+    <span
+      id="message-text"
+      v-html="message"
+    />
     <!-- eslint-enable vue/no-v-html -->
   </v-alert>
 </template>

src/main.js

@@ -42,7 +42,6 @@ import 'roboto-fontface/css/roboto/roboto-fontface.css'
 import '@fortawesome/fontawesome-free/css/all.css'
 import 'vue-json-pretty/lib/styles.css'
 
-
 Variablepie(Highcharts);
 More(Highcharts);
 Export(Highcharts);

vue.config.js

@@ -2,11 +2,13 @@ const CompressionPlugin = require('compression-webpack-plugin');
 
 module.exports = {
   "transpileDependencies": [
-    "vuetify"
+    "vuetify",
+    "markstream-vue2"
   ],
   chainWebpack(config) {
-    config.plugins.delete('prefetch');
-    config.plugin('CompressionPlugin').use(CompressionPlugin);
+    config.plugins.delete("prefetch");
+    config.plugin("CompressionPlugin").use(CompressionPlugin);
+
   },
   css: {
     loaderOptions: {

webpack.config.js

@@ -56,6 +56,7 @@ module.exports = {
                     loader: "babel-loader"
                 }
             },
+
         ]
     },
     plugins: [