[TAS-172]💄 Add marked for markdown rendering (#1259)

* ➕ Add marked for markdown rendering * 💄[_classId] Add <MarkDown> for rendering edition description * 🚨 Fix lint warning * 🐛 Add a parent classId for markdown style * ➕ Add DOMPurify to sanitize HTML * ➕ Update functions package.json * 🚨 Fix lint error * 📌 Update package-lock.json * 🔒️ Remove html in markdown * 🐛 Fix typo and double esacpe --------- Co-authored-by: William Chong <[email protected]>
likecoin · Jul 31, 2023 · 8818eab · 8818eab
1 parent 711d2fb
commit 8818eab
Show file tree

Hide file tree

Showing 9 changed files with 31,967 additions and 41,536 deletions.
diff --git a/functions/package-lock.json b/functions/package-lock.json
diff --git a/functions/package.json b/functions/package.json
@@ -40,6 +40,7 @@
     "cosmjs-types": "^0.8.0",
     "create-hash": "^1.2.0",
     "date-fns": "^1.30.1",
+    "dompurify": "^3.0.5",
     "express": "^4.16.4",
     "express-session": "^1.17.0",
     "fast-json-stable-stringify": "^2.1.0",
@@ -51,6 +52,7 @@
     "lodash.debounce": "^4.0.8",
     "lodash.throttle": "^4.1.1",
     "magic-grid": "^3.2.4",
+    "marked": "^5.1.2",
     "node-fetch": "^2.6.7",
     "nuxt-start": "^2.15.3",
     "portal-vue": "^1.5.1",

diff --git a/src/assets/css/markdownStyle.css b/src/assets/css/markdownStyle.css
@@ -0,0 +1,92 @@
+.markdown-container h1 {
+  font-size: 34px;
+  font-weight: bold;
+}
+
+.markdown-container h2 {
+  font-size: 28px;
+  font-weight: bold;
+}
+
+.markdown-container h3 {
+  font-size: 24px;
+  font-weight: bold;
+}
+
+
+.markdown-container ul {
+  list-style-type: disc;
+  margin-left: 0.5em;
+}
+
+.markdown-container ul ul {
+  list-style-type: circle;
+  margin-left: 1em;
+}
+
+.markdown-container ol {
+  list-style-type: decimal;
+}
+
+.markdown-container li {
+  text-align: left;
+}
+
+.markdown-container a{
+  color: '#1e4a51';
+}
+
+.markdown-container a:hover {
+  color: '#1e4a51';
+  text-decoration: underline;
+}
+
+
+.markdown-container blockquote {
+  margin: 1em 0;
+  padding: 0.5em 1em;
+  border-left: 4px solid #ccc;
+}
+
+
+.markdown-container strong {
+  font-weight: bold;
+}
+
+.markdown-container em {
+  font-style: italic;
+}
+
+
+.markdown-container pre {
+  background-color: #f0f0f0;
+  padding: 1em;
+  overflow: auto;
+  font-family: 'Courier New', Courier, monospace;
+}
+
+.markdown-container code {
+  font-family: 'Courier New', Courier, monospace;
+}
+
+
+.markdown-container img {
+  max-width: 100%;
+  height: auto;
+}
+
+
+.markdown-container hr {
+  border: none;
+  border-bottom: 1px solid #ccc;
+  margin: 1em 0;
+}
+
+.markdown-container p {
+  font-size: 14px;
+  font-weight: lighter;
+  text-align: left;
+
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}
diff --git a/src/components/Markdown.vue b/src/components/Markdown.vue
@@ -0,0 +1,33 @@
+<!-- eslint-disable vue/no-v-html -->
+<template>
+  <div class="markdown-container" v-html="markdownToHtml" />
+</template>
+
+<script>
+import { marked } from 'marked';
+import DOMPurify from 'dompurify';
+
+import { escapeHtml, unescapeHtml } from '@/util/misc';
+
+export default {
+  name: 'Markdown',
+  props: {
+    mdString: {
+      type: String,
+      default: '',
+    },
+  },
+  computed: {
+    markdownToHtml() {
+      const text = escapeHtml(unescapeHtml(this.mdString));
+      const rawHtml = marked(text);
+      return DOMPurify.sanitize(rawHtml);
+    },
+  },
+};
+</script>
+
+<style>
+/* Import the custom styles for Markdown rendering */
+@import '@/assets/css/markdownStyle.css';
+</style>
diff --git a/src/components/NFTBook/EditionCompareTableColumn.vue b/src/components/NFTBook/EditionCompareTableColumn.vue
@@ -41,7 +41,7 @@
           ]"
         >
           <Label align="center" :text="nftName" class="text-like-green" />
-          <div class="my-[24px] text-center text-[14px] text-dark-gray">{{ nftDescription }}</div>
+          <Markdown :md-string="nftDescription" />
           <div class="flex items-center justify-center">
             <ButtonV2 preset="secondary" :text="priceLabel" @click="$emit('click-collect', nftValue)">
               <template #prepend>

diff --git a/src/components/NFTEditionSelect.vue b/src/components/NFTEditionSelect.vue
@@ -82,14 +82,14 @@ import NFTWidgetIconInsertCoin from './NFTWidget/Icon/InsertCoin';
 
 export default {
   name: 'NFTEditionSelect',
-  mixins: [experimentMixin('isExperimenting', 'nft-book-cta-text', 'variant')],
   components: {
     ButtonV2,
     NotifyIcon,
     NFTEditionSelectItem,
     NFTStockLabel,
     NFTWidgetIconInsertCoin,
   },
+  mixins: [experimentMixin('isExperimenting', 'nft-book-cta-text', 'variant')],
   props: {
     items: {
       type: Array,