From 5ba10ba9dff69dae287611b4d6791ef6987abbe5 Mon Sep 17 00:00:00 2001
From: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
Date: Wed, 25 Sep 2024 12:45:51 +0530
Subject: [PATCH] feat(desc-text): add linkify option

---
 lib/components/SDescText.vue | 20 ++++++++++++++++----
 lib/composables/Markdown.ts  |  9 +++++++++
 2 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/lib/components/SDescText.vue b/lib/components/SDescText.vue
index 7abd1c7d..ac68b3e0 100644
--- a/lib/components/SDescText.vue
+++ b/lib/components/SDescText.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import MarkdownIt from 'markdown-it'
+import { useLinkifyIt } from 'sefirot/composables/Markdown'
 import { computed } from 'vue'
 import { useHasSlotContent } from '../composables/Utils'
 import SDescEmpty from './SDescEmpty.vue'
@@ -7,6 +9,7 @@ const props = defineProps<{
   value?: string | null
   lineClamp?: string | number
   preWrap?: boolean
+  linkify?: boolean
 }>()
 
 const classes = computed(() => [
@@ -17,14 +20,23 @@ const classes = computed(() => [
 const hasSlot = useHasSlotContent()
 
 const lineClamp = computed(() => props.lineClamp ?? 'none')
+
+const linkifyIt = useLinkifyIt()
+
+const _value = computed(() => {
+  if (props.linkify) {
+    return linkifyIt(props.value ?? '')
+  }
+  return props.value
+})
 </script>
 
 <template>
-  <div v-if="hasSlot || value" class="SDescText" :class="classes">
-    <div class="value">
-      <slot v-if="hasSlot" />
-      <template v-else>{{ value }}</template>
+  <div v-if="hasSlot || _value" class="SDescText" :class="classes">
+    <div class="value" v-if="hasSlot">
+      <slot />
     </div>
+    <div class="value" v-else v-html="_value" />
   </div>
   <SDescEmpty v-else />
 </template>
diff --git a/lib/composables/Markdown.ts b/lib/composables/Markdown.ts
index aec99557..9639d1d8 100644
--- a/lib/composables/Markdown.ts
+++ b/lib/composables/Markdown.ts
@@ -32,6 +32,15 @@ export function useMarkdown(options: UseMarkdownOptions = {}): UseMarkdown {
   }
 }
 
+export function useLinkifyIt() {
+  const md = new MarkdownIt('zero', { linkify: true })
+  md.enable('linkify')
+
+  return (source: string) => {
+    return md.renderInline(source)
+  }
+}
+
 export interface UseLink {
   addListeners(): void
   removeListeners(): void