From 6ac1b460bb1d1a26c837ba749e70b2b8595a49dc Mon Sep 17 00:00:00 2001
From: MoonLeeeaf <150461955+MoonLeeeaf@users.noreply.github.com>
Date: Wed, 12 Jun 2024 21:48:39 +0800
Subject: [PATCH] feat: Markdown Code Dialog

---
 ling_chair_http/finally.js | 17 +++++++++++------
 ling_chair_http/handler.js | 15 ++++++++-------
 2 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/ling_chair_http/finally.js b/ling_chair_http/finally.js
index 28c4d57..91295f5 100644
--- a/ling_chair_http/finally.js
+++ b/ling_chair_http/finally.js
@@ -53,9 +53,11 @@ ChatMsgAdapter.initMsgElementEvents()
 
 ChatMsgAdapter.initInputResizer()
 
-const showLinkDialog = (link) => mdui.alert(decodeURI(link) + "<br/>如果你确认此链接是安全的, 那么请<a class=\"mdui-text-color-theme-accent\" href=\"" + link + "\">点我</a>", '链接', () => { }, { confirmText: "关闭" })
+const showLinkDialog = (link) => mdui.alert(decodeURIComponent(link) + "<br/>如果你确认此链接是安全的, 那么请<a class=\"mdui-text-color-theme-accent\" href=\"" + link + "\">点我</a>", '链接', () => { }, { confirmText: "关闭" })
 
-const showImageDialog = (link, id, alt) => mdui.alert(`此图片链接来源未知: ${decodeURI(link)}<br/>如果你希望加载, 请<a class="mdui-text-color-theme-accent" mdui-dialog-close onclick="$('#${id}').html('<img src=\\'${link}\\' alt=\\'${decodeURI(alt)}\\'></img>')">点我</a>`, '外部图片', () => { }, { confirmText: "关闭" })
+const showImageDialog = (link, id, alt) => mdui.alert(`此图片链接来源未知: ${decodeURIComponent(link)}<br/>如果你希望加载, 请<a class="mdui-text-color-theme-accent" mdui-dialog-close onclick="$('#${id}').html('<img src=\\'${link}\\' alt=\\'${decodeURIComponent(alt)}\\'></img>')">点我</a>`, '外部图片', () => { }, { confirmText: "关闭" })
+
+const showCodeDialog = (code) => mdui.alert(`<pre><code>${decodeURIComponent(code)}</code></pre>`, '代码块', () => { }, { confirmText: "关闭" })
 
 const renderer = {
     heading(text, level) {
@@ -68,15 +70,18 @@ const renderer = {
         return text
     },
     link(href, title, text) {
-        return `<a class="mdui-text-color-theme-accent" onclick="showLinkDialog('${encodeURI(href)}')">${text}</a>`
+        return `<a class="mdui-text-color-theme-accent" onclick="showLinkDialog('${encodeURIComponent(href)}')">[链接] ${text}</a>`
     },
     image(href, title, text) {
         let h = Hash.sha256(href)
         if (new URL(href).hostname === new URL(location.href))
-            return `<img src="${encodeURI(href)}" alt="${text}"></img>`
+            return `<img src="${encodeURIComponent(href)}" alt="${text}"></img>`
         else
-            return `<div id="${h}"><a class="mdui-text-color-theme-accent" onclick="showImageDialog('${encodeURI(href)}', '${h}', '${encodeURI(text)}')">[外部图片] ${text}</a></div>`
-    }
+            return `<div id="${h}"><a class="mdui-text-color-theme-accent" onclick="showImageDialog('${encodeURIComponent(href)}', '${h}', '${encodeURIComponent(text)}')">[外部图片] ${text}</a></div>`
+    },
+    code(src) {
+        return `<a class="mdui-text-color-theme-accent" onclick="showCodeDialog(\`${encodeURIComponent(src)}\`)">[代码块]</a>`
+    },
 }
 
 marked.use({
diff --git a/ling_chair_http/handler.js b/ling_chair_http/handler.js
index de40364..03261de 100644
--- a/ling_chair_http/handler.js
+++ b/ling_chair_http/handler.js
@@ -406,7 +406,7 @@ class ChatMsgAdapter {
             temp = `<div class="chat-message-right">
                 <div class="message-content-with-nickname-right">
                 <span class="nickname">` + nick + `</span>
-                <div class="message-content mdui-card" id="msgid_` + msgid + `">
+                <div class="message-content mdui-card" tag="msg-card" id="msgid_` + msgid + `">
                 <span id="msg-content">` + msg + `</span>
                 </div>
                 </div>
@@ -417,7 +417,7 @@ class ChatMsgAdapter {
                 <img class="avatar" src="` + CurrentUser.getUserHeadUrl(name) + `" onerror="this.src='res/default_head.png'" />
                 <div class="message-content-with-nickname-left">
                 <span class="nickname">` + nick + `</span>
-                <div class="message-content mdui-card" id="msgid_` + msgid + `">
+                <div class="message-content mdui-card" tag="msg-card" id="msgid_` + msgid + `">
                 <span id="msg-content">` + msg + `</span>
                 </div>
                 </div>
@@ -440,7 +440,7 @@ class ChatMsgAdapter {
         }
 
         this.bbn = new Date(t).getMinutes()
-
+        
         return e
     }
     /**
@@ -493,10 +493,11 @@ class ChatMsgAdapter {
         let menu
         let callback = (e) => {
             if (menu) menu.close()
-            // 从 span 切到 div
-            if (e.get(0).tagName.toLowerCase() != "div") e = $(e.get(0).parentNode)
-            // 从 消息框 切到 更上层
-            e = $(e.get(0).parentNode)
+            // 切到 div.message-content
+            let ele = e.get(0)
+            while ($(ele).attr("tag") != "msg-card")
+                ele = ele.parentNode
+            e = $(ele)
             let menuHtml = $.parseHTML(`<ul class="mdui-menu menu-on-message">
             <li class="mdui-menu-item">
               <a onclick="copyText(\`` + e.find("#msg-content").text() + `\`)" class="mdui-ripple">复制</a>