New richtext render (#6)

* Update .gitignore

* Sync pltxt2htm binary from its release page

* Integrated fixedadv_parser

- requires bugfix of jmp to other experiment

* Sync pltxt2htm v0.6.1

* fix memory leak issue

* fix issue of jmp to another experiment

* Small improvment

* impl common_parser

* done

* format & lint fix

* Feat highlight & dompurify

---------

Co-authored-by: Arendelle <Arendelle_@outlook.com>

Author: wsxiaolin

.gitignore

@@ -22,3 +22,10 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+# Archives
+**/*.zip
+**/*.tar
+**/*.gz
+**/*.xz
+**/*.zstd

package-lock.json

@@ -13,6 +13,8 @@
   "dependencies": {
     "@fingerprintjs/fingerprintjs": "^5.0.1",
     "date-fns": "^4.1.0",
+    "dompurify": "^3.3.1",
+    "highlight.js": "^11.11.1",
     "prettier": "^3.6.2",
     "vue": "^3.5.24",
     "vue-i18n": "^11.1.12",

package.json

@@ -22,8 +22,8 @@
       <div id="notification_message" class="notification_message">
         <div
           id="notification_text"
+          v-richText="() => parse(message.msg)"
           class="notification_text"
-          v-html="parse(message.msg, true)"
         ></div>
       </div>
     </div>
@@ -32,7 +32,7 @@
 
 <script setup lang="ts">
 import { ref, onMounted, watch } from "vue";
-import parse from "@services/advancedParser.ts";
+import parse from "@services/pltxt2htm/advancedParser";
 import showUserCard from "@popup/userProfileDialog.ts";
 import { getAvatarUrl } from "@services/getUserCurentAvatarByID";
 import storageManager from "@storage/index.ts";

src/components/messages/MessageItem.vue

@@ -6,8 +6,8 @@
     <div id="notification" class="notification" @click="showComment">
       <div
         id="notification_title"
+        v-richText="() => parse(notification.msg_title)"
         class="notification_title"
-        v-html="parse(notification.msg_title, true)"
       ></div>
       <div id="notification_message" class="notification_message">
         <div id="notification_icon" class="notification_icon">
@@ -17,10 +17,10 @@
           <!-- 我认为是在没必要专门像APP一样渲染邮件，所以暂时这样 -->
           <!-- I think it's unnecessary to render emails like an app, so I'll do it this way for now -->
           <n-ellipsis
+            v-richText="() => parse(notification.msg)"
             expand-trigger="click"
             line-clamp="2"
             :tooltip="false"
-            v-html="parse(notification.msg, true)"
           >
           </n-ellipsis>
         </div>
@@ -31,7 +31,7 @@
 
 <script setup lang="ts">
 import { ref, computed, onMounted, watch } from "vue";
-import parse from "@services/commonParser.ts";
+import parse from "@services/pltxt2htm/commonParser";
 import { NEllipsis } from "naive-ui";
 import showUserCard from "@popup/userProfileDialog.ts";
 import { getAvatarUrl } from "@services/getUserCurentAvatarByID";

src/components/messages/NotificationItem.vue

@@ -8,7 +8,7 @@
     <div class="card" :type="type">
       <img :src="imgUrl" class="icon" />
       <div class="text">
-        <p class="title" v-html="parse(data.Subject)"></p>
+        <p v-richText="() => parse(data.Subject)" class="title"></p>
         <p class="subtitle">
           {{ data.User.Nickname + "&nbsp;&nbsp;-" + formattedDate }}
         </p>
@@ -19,7 +19,7 @@
 
 <script setup>
 import { computed } from "vue";
-import parse from "@services/commonParser.ts";
+import parse from "@services/pltxt2htm/commonParser";
 import { getCoverUrl, formatDate } from "@services/utils.ts";
 
 window.formtDate = formatDate;

src/components/projects/brief.vue

@@ -5,7 +5,7 @@
     <div class="card">
       <img :src="imgUrl" class="icon" />
       <div class="text">
-        <p class="title" v-html="parse(data.Subject)"></p>
+        <p v-richText="() => parse(data.Subject)" class="title"></p>
         <p class="subtitle">{{ data.User.Nickname }}</p>
         <div class="subtitle">
           <Tag v-for="i in data.Tags" :category="data.Category" :tag="i" />
@@ -17,7 +17,7 @@
 
 <script setup lang="ts">
 import Tag from "../utils/Tag.vue";
-import parse from "@services/commonParser.ts";
+import parse from "@services/pltxt2htm/commonParser";
 import { getCoverUrl, getPath } from "@services/utils";
 import { useRouter } from "vue-router";
 

src/components/projects/detailed.vue

@@ -4,6 +4,8 @@ import router from "./router/index";
 import i18n from "@i18n/index";
 import ErrorLogger from "./services/errorLogger.ts";
 import { LogManager } from "@api/logWriter.ts";
+import type { DirectiveBinding } from "vue";
+import "highlight.js/styles/github.css";
 
 const app = createApp(App);
 app.use(router);
@@ -22,6 +24,21 @@ app.use(i18n);
 // }
 // setVh();
 
+// Richtext Render
+app.directive("richText", {
+  mounted(el, binding: DirectiveBinding<() => Promise<string>>) {
+    el.innerHTML = "rendering...";
+    Promise.resolve(binding.value()).then((html) => {
+      el.innerHTML = html;
+    });
+  },
+  updated(el: HTMLElement, binding: DirectiveBinding<any>) {
+    Promise.resolve(binding.value()).then((html) => {
+      el.innerHTML = html;
+    });
+  },
+});
+
 app.mount("#app");
 window.$ErrorLogger = new ErrorLogger(app);
 window.$Logger = LogManager;