feat: alloww markdown in the descriptions and render them appropriately

src/assets/styles/tailwind.css

@@ -22,4 +22,24 @@
 	.dialog {
 		@apply bg-white p-4 rounded-lg w-full max-w-lg;
 	}
+
+	/* Markdown content styling to restore list elements */
+	.markdown-content ul {
+		@apply list-disc list-inside ml-4;
+	}
+
+	.markdown-content ol {
+		@apply list-decimal list-inside ml-4;
+	}
+
+	.markdown-content li {
+		@apply mb-1;
+	}
+
+	.markdown-content ul ul,
+	.markdown-content ol ol,
+	.markdown-content ul ol,
+	.markdown-content ol ul {
+		@apply ml-4 mt-1;
+	}
 }

src/components/ActivityListItem.vue

@@ -80,7 +80,10 @@
       <!-- Description -->
       <p class="font-medium">
         <a class="cursor-pointer" @click="emitLoadClaim(record.jwtId)">
-          {{ description }}
+          <vue-markdown
+            :source="truncatedDescription"
+            class="markdown-content"
+          />
         </a>
       </p>
 
@@ -258,11 +261,13 @@ import {
   NOTIFY_UNKNOWN_PERSON,
 } from "@/constants/notifications";
 import { TIMEOUTS } from "@/utils/notify";
+import VueMarkdown from "vue-markdown-render";
 
 @Component({
   components: {
     EntityIcon,
     ProjectIcon,
+    VueMarkdown,
   },
 })
 export default class ActivityListItem extends Vue {
@@ -303,6 +308,14 @@ export default class ActivityListItem extends Vue {
     return `${claim?.description || ""}`;
   }
 
+  get truncatedDescription(): string {
+    const desc = this.description;
+    if (desc.length <= 300) {
+      return desc;
+    }
+    return desc.substring(0, 300) + "...";
+  }
+
   private displayAmount(code: string, amt: number) {
     return `${amt} ${this.currencyShortWordForCode(code, amt === 1)}`;
   }

src/views/ClaimView.vue

@@ -79,7 +79,10 @@
           <div class="text-sm">
             <div data-testId="description">
               <font-awesome icon="message" class="fa-fw text-slate-400" />
-              {{ claimDescription }}
+              <vue-markdown
+                :source="claimDescription"
+                class="markdown-content"
+              />
             </div>
             <div>
               <font-awesome icon="user" class="fa-fw text-slate-400" />
@@ -515,8 +518,10 @@ import { AxiosError } from "axios";
 import * as yaml from "js-yaml";
 import * as R from "ramda";
 import { Component, Vue } from "vue-facing-decorator";
+import VueMarkdown from "vue-markdown-render";
 import { Router, RouteLocationNormalizedLoaded } from "vue-router";
 import { useClipboard } from "@vueuse/core";
+
 import { GenericVerifiableCredential } from "../interfaces";
 import GiftedDialog from "../components/GiftedDialog.vue";
 import QuickNav from "../components/QuickNav.vue";
@@ -535,7 +540,7 @@ import { createNotifyHelpers, TIMEOUTS } from "@/utils/notify";
 import { APP_SERVER } from "@/constants/app";
 
 @Component({
-  components: { GiftedDialog, QuickNav },
+  components: { GiftedDialog, QuickNav, VueMarkdown },
   mixins: [PlatformServiceMixin],
 })
 export default class ClaimView extends Vue {

src/views/NewActivityView.vue

@@ -136,7 +136,9 @@
           <!-- New line that appears on hover -->
           <div
             class="absolute left-0 w-full text-left text-gray-500 text-sm hidden group-hover:flex cursor-pointer items-center"
-            @click.prevent="markOffersToUserProjectsAsReadStartingWith(offer.jwtId)"
+            @click.prevent="
+              markOffersToUserProjectsAsReadStartingWith(offer.jwtId)
+            "
           >
             <span class="inline-block w-8 h-px bg-gray-500 mr-2" />
             Click to keep all above as unread offers
@@ -245,14 +247,24 @@
                       {{ getDisplayFieldName(field) }}
                     </td>
                     <td
-                      class="border border-gray-300 px-3 py-2 text-gray-600 break-words"
+                      class="border border-gray-300 px-3 py-2 text-gray-600 break-words align-top"
                     >
-                      {{ formatFieldValue(difference.old) }}
+                      <vue-markdown
+                        v-if="field === 'description' && difference.old"
+                        :source="formatFieldValue(difference.old)"
+                        class="text-sm markdown-content"
+                      />
+                      <span v-else>{{ formatFieldValue(difference.old) }}</span>
                     </td>
                     <td
-                      class="border border-gray-300 px-3 py-2 text-green-700 font-medium break-words"
+                      class="border border-gray-300 px-3 py-2 text-green-700 font-medium break-words align-top"
                     >
-                      {{ formatFieldValue(difference.new) }}
+                      <vue-markdown
+                        v-if="field === 'description' && difference.new"
+                        :source="formatFieldValue(difference.new)"
+                        class="text-sm markdown-content"
+                      />
+                      <span v-else>{{ formatFieldValue(difference.new) }}</span>
                     </td>
                   </tr>
                 </tbody>
@@ -280,6 +292,7 @@
 
 <script lang="ts">
 import { Component, Vue } from "vue-facing-decorator";
+import VueMarkdown from "vue-markdown-render";
 
 import GiftedDialog from "../components/GiftedDialog.vue";
 import QuickNav from "../components/QuickNav.vue";
@@ -311,7 +324,7 @@ import { PlanActionClaim } from "../interfaces/claims";
 import { GenericCredWrapper } from "@/interfaces";
 
 @Component({
-  components: { GiftedDialog, QuickNav, EntityIcon },
+  components: { GiftedDialog, QuickNav, EntityIcon, VueMarkdown },
   mixins: [PlatformServiceMixin],
 })
 export default class NewActivityView extends Vue {

src/views/ProjectViewView.vue

@@ -154,18 +154,22 @@
 
         <div class="text-sm text-slate-500">
           <div v-if="!expanded">
-            {{ truncatedDesc }}
+            <vue-markdown
+              :source="truncatedDesc"
+              class="mb-4 markdown-content"
+            />
             <a
               v-if="description.length >= truncateLength"
-              class="uppercase text-xs font-semibold text-slate-700"
+              class="mt-4 uppercase text-xs font-semibold text-blue-700 cursor-pointer"
               @click="expandText"
               >... Read More</a
             >
           </div>
           <div v-else>
-            {{ description }}
+            <vue-markdown :source="description" class="mb-4 markdown-content" />
             <a
-              class="uppercase text-xs font-semibold text-slate-700"
+              v-if="description.length >= truncateLength"
+              class="mt-4 uppercase text-xs font-semibold text-blue-700 cursor-pointer"
               @click="collapseText"
               >- Read Less</a
             >
@@ -606,6 +610,7 @@
 <script lang="ts">
 import { AxiosError } from "axios";
 import { Component, Vue } from "vue-facing-decorator";
+import VueMarkdown from "vue-markdown-render";
 import { Router } from "vue-router";
 import { useClipboard } from "@vueuse/core";
 
@@ -678,6 +683,7 @@ import { createNotifyHelpers, TIMEOUTS } from "@/utils/notify";
     ProjectIcon,
     QuickNav,
     TopMessage,
+    VueMarkdown,
   },
   mixins: [PlatformServiceMixin],
 })
@@ -773,7 +779,7 @@ export default class ProjectViewView extends Vue {
   totalsExpanded = false;
   truncatedDesc = "";
   /** Truncation length */
-  truncateLength = 40;
+  truncateLength = 200;
 
   // Utility References
   libsUtil = libsUtil;