From 61af5a1f05563b92a92332e2a02275fefb93a673 Mon Sep 17 00:00:00 2001
From: Rogee <rogeecn@qq.com>
Date: Fri, 27 Sep 2024 17:52:11 +0800
Subject: [PATCH] feat: add content processer

---
 frontend/src/components/ListItem.vue     | 18 +++-----
 frontend/src/components/MediaContent.vue | 53 ++++++++++++++++++++++++
 2 files changed, 58 insertions(+), 13 deletions(-)
 create mode 100644 frontend/src/components/MediaContent.vue

diff --git a/frontend/src/components/ListItem.vue b/frontend/src/components/ListItem.vue
index 68a4bcd..5e07c3c 100644
--- a/frontend/src/components/ListItem.vue
+++ b/frontend/src/components/ListItem.vue
@@ -2,7 +2,8 @@
   <div class="mb-4 md:mb-8 border rounded overflow-hidden" :id="`message-${item.ID}`">
     <div class="bg-slate-100 p-2  md:p-4">
       <div class="mb-2 font-semibold text-right text-gray-400">#{{ item.ID }}</div>
-      <div v-if="item.Content.length > 0" class="text-wrap font-sans" v-html="processedContent"></div>
+
+      <MediaContent :content="item.Content" />
 
       <div v-if="item.Media.length > 0" class="mt-2 md:mt-4">
         <div class="medias grid grid-cols-3 gap-2 md:gap-4">
@@ -23,29 +24,20 @@
 
 <script>
 import { deleteMessage, toggleFavorite } from "@/services/messages";
-import { computed, defineComponent } from "vue";
+import { defineComponent } from "vue";
+import MediaContent from "./MediaContent.vue";
 import MediaItem from "./MediaItem.vue";
 
-function nl2br(str, is_xhtml) {
-  var breakTag = is_xhtml || typeof is_xhtml === "undefined" ? "<br />" : "<br>";
-  return (str + "").replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, "$1" + breakTag + "$2");
-}
-
-
 export default defineComponent({
   components: {
     MediaItem,
+    MediaContent,
   },
   name: "ListItem",
   props: {
     item: { type: Object, required: true },
   },
   setup(props) {
-    const processedContent = computed(() => {
-      let content = props.item.Content.trim();
-      return nl2br(content, false);
-    });
-
     const toggleLike = async () => {
       const itemId = props.item.ID
       await toggleFavorite(itemId);
diff --git a/frontend/src/components/MediaContent.vue b/frontend/src/components/MediaContent.vue
new file mode 100644
index 0000000..8151dbf
--- /dev/null
+++ b/frontend/src/components/MediaContent.vue
@@ -0,0 +1,53 @@
+<template>
+  <div v-if="hasContent" class="text-wrap font-sans" v-html="processedContent"></div>
+</template>
+
+<script>
+import { computed, defineComponent } from "vue";
+
+export default defineComponent({
+  components: {
+  },
+  name: "MediaContent",
+  props: {
+    content: { required: true },
+  },
+  setup(props) {
+    const hasContent = () => {
+      return props.content.trim().length > 0
+    };
+
+    const nl2br = function (content) {
+      var breakTag = typeof is_xhtml === "undefined" ? "<br />" : "<br>";
+      return (content + "").replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, "$1" + breakTag + "$2");
+    }
+
+
+    const replaceTags = (content) => {
+      content = content.replace(/#(\S+)/g, '<a href="/search?tag=$1">#$1</a>');
+      return content;
+    }
+
+    const replaceLinks = (content) => {
+      content = content.replace(/(https?:\/\/\S+)/g, '<a href="$1" target="_blank">$1</a>');
+      return content;
+    }
+
+    const processedContent = computed(() => {
+      let content = props.content.trim();
+
+      content = nl2br(content, false);
+      content = replaceTags(content)
+      content = replaceLinks(content)
+
+      return content;
+    });
+
+
+    return {
+      hasContent,
+      processedContent,
+    };
+  },
+});
+</script>