Renders tool descriptions as markdown in TRS imports

Improves readability by rendering tool descriptions as markdown with support for links opening in new tabs.
Enhances the user interface by visually limiting description length in tables.

Author: itisAliRH

client/src/components/Workflow/Import/TrsSearch.vue

@@ -9,6 +9,7 @@ import { useRouter } from "vue-router/composables";
 
 import { getRedirectOnImportPath } from "@/components/Workflow/redirectPath";
 import { Services } from "@/components/Workflow/services";
+import { useMarkdown } from "@/composables/markdown";
 import { withPrefix } from "@/utils/redirect";
 
 import type { TrsSelection } from "./types";
@@ -26,6 +27,8 @@ type TrsSearchData = {
     [key: string]: unknown;
 };
 
+const { renderMarkdown } = useMarkdown({ openLinksInNewPage: true });
+
 const fields = [
     { key: "name", label: "Name" },
     { key: "description", label: "Description" },
@@ -195,7 +198,22 @@ async function importVersion(trsId?: string, toolIdToImport?: string, version?:
                             @onImport="(versionId) => importVersion(trsSelection?.id, row.item.data.id, versionId)" />
                     </BCard>
                 </template>
+
+                <template v-slot:cell(description)="row">
+                    <span class="trs-description" v-html="renderMarkdown(row.item.data.description)" />
+                </template>
             </BTable>
         </div>
     </BCard>
 </template>
+
+<style>
+.trs-description {
+    position: relative;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+    line-clamp: 3;
+}
+</style>

client/src/components/Workflow/Import/TrsTool.vue

@@ -4,6 +4,8 @@ import { faUpload } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BButton } from "bootstrap-vue";
 
+import { useMarkdown } from "@/composables/markdown";
+
 import type { TrsTool, TrsToolVersion } from "./types";
 
 library.add(faUpload);
@@ -18,6 +20,8 @@ const emit = defineEmits<{
     (e: "onImport", versionId: string): void;
 }>();
 
+const { renderMarkdown } = useMarkdown({ openLinksInNewPage: true });
+
 function importVersion(version: TrsToolVersion) {
     const version_id = version.id.includes(`:${version.name}`) ? version.name : version.id;
     emit("onImport", version_id);
@@ -34,7 +38,7 @@ function importVersion(version: TrsToolVersion) {
         <div>
             <b>Description:</b>
 
-            <span>{{ props.trsTool.description }}</span>
+            <span v-html="renderMarkdown(props.trsTool.description)" />
         </div>
         <div>
             <b>Organization</b>