From 21fb4f817c98ad35e32d112ada064d6891bd1231 Mon Sep 17 00:00:00 2001
From: Redon <790348264@qq.com>
Date: Mon, 27 Feb 2023 19:25:15 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20HTML=20=E6=B8=B2=E6=9F=93=E5=BC=82?=
 =?UTF-8?q?=E5=B8=B8=20(#152)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: 修复 `API` 版本 HTML 会被渲染的问题[#146]

* chore: version 2.8.1
---
 CHANGELOG.md                               |  7 ++++++
 package.json                               |  2 +-
 src/directives/highlight.ts                | 23 ++++++++++++++++++
 src/directives/index.ts                    |  7 +++++-
 src/main.ts                                |  3 +++
 src/utils/format/index.ts                  | 15 ++++++++++++
 src/utils/functions/includeCode.ts         |  6 -----
 src/views/chat/components/Message/Text.vue | 27 ++++++++++++++--------
 8 files changed, 73 insertions(+), 17 deletions(-)
 create mode 100644 src/directives/highlight.ts
 create mode 100644 src/utils/format/index.ts
 delete mode 100644 src/utils/functions/includeCode.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 47ec4cd..f4593fe 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,10 @@
+## v2.8.1
+
+`2023-02-27`
+
+### BugFix
+- 修复 `API` 版本不是 `Markdown` 时，普通 `HTML` 代码会被渲染的问题 [#146]
+
 ## v2.8.0
 
 `2023-02-27`
diff --git a/package.json b/package.json
index 29d0ba4..5a21ff8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "chatgpt-web",
-  "version": "2.8.0",
+  "version": "2.8.1",
   "private": false,
   "description": "ChatGPT Web",
   "author": "ChenZhaoYu <chenzhaoyu1994@gmail.com>",
diff --git a/src/directives/highlight.ts b/src/directives/highlight.ts
new file mode 100644
index 0000000..b77669d
--- /dev/null
+++ b/src/directives/highlight.ts
@@ -0,0 +1,23 @@
+import type { App, Directive } from 'vue'
+import hljs from 'highlight.js'
+import { includeCode } from '@/utils/format'
+
+hljs.configure({ ignoreUnescapedHTML: true })
+
+function highlightCode(el: HTMLElement) {
+  if (includeCode(el.textContent))
+    hljs.highlightBlock(el)
+}
+
+export default function setupHighlightDirective(app: App) {
+  const highLightDirective: Directive<HTMLElement> = {
+    mounted(el: HTMLElement) {
+      highlightCode(el)
+    },
+    updated(el: HTMLElement) {
+      highlightCode(el)
+    },
+  }
+
+  app.directive('highlight', highLightDirective)
+}
diff --git a/src/directives/index.ts b/src/directives/index.ts
index 5cc7923..cdcaeef 100644
--- a/src/directives/index.ts
+++ b/src/directives/index.ts
@@ -1 +1,6 @@
-export function setupDirectives() {}
+import type { App } from 'vue'
+import setupHighlightDirective from './highlight'
+
+export function setupDirectives(app: App) {
+  setupHighlightDirective(app)
+}
diff --git a/src/main.ts b/src/main.ts
index acbe522..115198d 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,5 +1,6 @@
 import { createApp } from 'vue'
 import App from './App.vue'
+import { setupDirectives } from './directives'
 import { setupAssets } from '@/plugins'
 import { setupStore } from '@/store'
 import { setupRouter } from '@/router'
@@ -10,6 +11,8 @@ async function bootstrap() {
 
   setupStore(app)
 
+  setupDirectives(app)
+
   await setupRouter(app)
 
   app.mount('#app')
diff --git a/src/utils/format/index.ts b/src/utils/format/index.ts
new file mode 100644
index 0000000..8383187
--- /dev/null
+++ b/src/utils/format/index.ts
@@ -0,0 +1,15 @@
+// 转义 HTML 字符
+export function encodeHTML(source: string) {
+  return source
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;')
+}
+
+// 判断是否为代码块
+export function includeCode(text: string | null | undefined) {
+  const regexp = /^(?:\s{4}|\t).+/gm
+  return !!(text?.includes(' = ') || text?.match(regexp))
+}
diff --git a/src/utils/functions/includeCode.ts b/src/utils/functions/includeCode.ts
deleted file mode 100644
index 6958f91..0000000
--- a/src/utils/functions/includeCode.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-function includeCode(text: string | null | undefined) {
-  const regexp = /^(?:\s{4}|\t).+/gm
-  return !!(text?.includes(' = ') || text?.match(regexp))
-}
-
-export default includeCode
diff --git a/src/views/chat/components/Message/Text.vue b/src/views/chat/components/Message/Text.vue
index 2dfef78..0c092bf 100644
--- a/src/views/chat/components/Message/Text.vue
+++ b/src/views/chat/components/Message/Text.vue
@@ -3,6 +3,7 @@ import { computed } from 'vue'
 import { marked } from 'marked'
 import hljs from 'highlight.js'
 import { useBasicLayout } from '@/hooks/useBasicLayout'
+import { encodeHTML } from '@/utils/format'
 
 interface Props {
   inversion?: boolean
@@ -15,12 +16,19 @@ const props = defineProps<Props>()
 
 const { isMobile } = useBasicLayout()
 
-marked.setOptions({
-  renderer: new marked.Renderer(),
-  highlight(code) {
-    return hljs.highlightAuto(code).value
-  },
-})
+const renderer = new marked.Renderer()
+
+renderer.html = (html) => {
+  return `<p>${encodeHTML(html)}</p>`
+}
+
+renderer.code = (code, language) => {
+  const validLang = !!(language && hljs.getLanguage(language))
+  const highlighted = validLang ? hljs.highlight(language, code).value : code
+  return `<pre><code class="hljs ${language}">${highlighted}</code></pre>`
+}
+
+marked.setOptions({ renderer })
 
 const wrapClass = computed(() => {
   return [
@@ -35,9 +43,10 @@ const wrapClass = computed(() => {
 })
 
 const text = computed(() => {
-  if (props.text && !props.inversion)
-    return marked(props.text)
-  return props.text
+  const value = props.text ?? ''
+  if (!props.inversion)
+    return marked(value)
+  return value
 })
 </script>