feat: Escaped removed dirty HTML instead of removal.

When dirty node found inside HTML, escaped to show the innerHTML of the element as pure text instead of just remove it sliently.

README.md

@@ -106,7 +106,9 @@ Normal test with HTML Entities & " ' < > .
 
 ## 注意事项
 
-- 如果在使用插件时遇到问题，您可以通过 [发起 Issue](https://github.com/d0j1a1701/LiteLoaderQQNT-Markdown/issues/new) 向我们进行反馈。届时请尽可能附上诸如系统版本，插件列表， LiteLoaderQQNT 设置页版本信息截图等可以帮助分析问题的信息。如果你还安装了远程调试插件，可以再附上 Devtools 信息。
+您可以查看本项目的 [Known Issue](/docs/known_issue.md) 查看已经发现以及仍未解决的问题。
+
+如果在使用插件时遇到问题，您可以通过 [发起 Issue](https://github.com/d0j1a1701/LiteLoaderQQNT-Markdown/issues/new) 向我们进行反馈。届时请尽可能附上诸如系统版本，插件列表， LiteLoaderQQNT 设置页版本信息截图等可以帮助分析问题的信息。如果你还安装了远程调试插件，可以再附上 Devtools 信息。
 
 ## Contributing
 

src/renderer.jsx

@@ -134,7 +134,7 @@ async function renderSingleMsgBox(messageBox) {
 
     function renderedHtmlProcessor(x) {
         if ((settings.forceEnableHtmlPurify() ?? settings.enableHtmlPurify) == true) {
-            mditLogger('debug', `Purified ${x}`);
+            mditLogger('debug', `Purify`, 'Input:', `${x}`);
             return purifyHtml(x);
         }
         return x;

src/utils/htmlProc.ts

@@ -0,0 +1,53 @@
+// Utils function about HTML string process
+
+import { mditLogger } from "./logger";
+
+const DOMPurify = require('dompurify');
+
+DOMPurify.addHook('uponSanitizeElement', function (node: HTMLElement, data: any) {
+    // mditLogger('debug', 'PurifyHook', 'Data', data);
+    if (data.allowedTags[data.tagName] === true) {
+        // mditLogger('debug', 'PurifyHook', 'Hook skipped');
+        return;
+    }
+    let newNode = document.createElement('p');
+    newNode.innerText = node.outerHTML;
+    // mditLogger('debug', 'PurifyHook', 'New node', newNode);
+    node.replaceWith(newNode);
+});
+
+interface UponSanitizeDataRecv {
+    tagName: string;
+    allowedTags: Record<string, boolean>;
+}
+
+/**
+ * Unescape HTML entities in HTML string. Already unescaped HTML tag string will be ignored and not shown 
+ * in return string.
+ * @param {string} input 
+ * @returns {string} String with all HTML entities unescaped
+ */
+export function unescapeHtml(input: string) {
+    var doc = new DOMParser().parseFromString(input, "text/html");
+    return doc.documentElement.textContent;
+}
+
+export function escapeHtml(input: string) {
+    return input
+        .replaceAll('&', '&amp;')
+        .replaceAll('<', '&lt;')
+        .replaceAll('>', '&gt;')
+        .replaceAll('"', '&quot;')
+        .replaceAll("'", '&#039;');
+}
+
+/**
+ * Using DOMPurify to purify HTML
+ * @param {string} input 
+ * @return {string} Purified HTML string.
+ */
+export function purifyHtml(input: string) {
+    let res = DOMPurify.sanitize(input);
+    mditLogger('debug', 'Purify', 'Removed', DOMPurify.removed);
+    return res;
+}