Merge pull request #13 from zpj80231/feature/emoji-parse

feat(widget): 添加 emoji 表情支持功能

docs/widget/package.json

@@ -34,6 +34,7 @@
   },
   "dependencies": {
     "dompurify": "^3.3.1",
-    "marked": "^17.0.1"
+    "marked": "^17.0.1",
+    "node-emoji": "^2.2.0"
   }
-}
+}

docs/widget/src/components/CommentItem.js

@@ -5,6 +5,7 @@
 import { Component } from './Component.js';
 import { ReplyEditor } from './ReplyEditor.js';
 import { formatRelativeTime } from '@/utils/date.js';
+import { replaceEmojiInHtml } from '@/utils/markdown.js';
 
 export class CommentItem extends Component {
 	// 防抖缓存，防止连续点击
@@ -202,7 +203,7 @@ export class CommentItem extends Component {
 		// 设置评论内容的 TEXT
 		const contentEl = root.querySelector('.cwd-comment-content');
 		if (contentEl) {
-			contentEl.innerHTML = comment.contentHtml;
+			contentEl.innerHTML = replaceEmojiInHtml(comment.contentHtml);
 		}
 
 		// 创建回复编辑器

docs/widget/src/utils/markdown.js

@@ -1,5 +1,6 @@
 import { marked } from 'marked';
 import DOMPurify from 'dompurify';
+import * as emoji from 'node-emoji';
 
 // 配置 marked
 try {
@@ -11,6 +12,30 @@ try {
   console.error('Failed to configure marked:', e);
 }
 
+/**
+ * 替换文本中的 emoji 代码为实际 emoji
+ * @param {string} text 包含 emoji 代码的文本
+ * @returns {string} 替换后的文本
+ */
+function replaceEmoji(text) {
+  if (!text) return text;
+  try {
+    return emoji.emojify(text);
+  } catch (e) {
+    return text;
+  }
+}
+
+/**
+ * 替换 HTML 中的 emoji 代码为实际 emoji
+ * @param {string} html 包含 emoji 代码的 HTML
+ * @returns {string} 替换后的 HTML
+ */
+export function replaceEmojiInHtml(html) {
+  if (!html) return html;
+  return replaceEmoji(html);
+}
+
 /**
  * 渲染 Markdown 为 HTML，并进行净化
  * @param {string} content Markdown 内容
@@ -19,7 +44,8 @@ try {
 export function renderMarkdown(content) {
   if (!content) return '';
   try {
-    const html = marked.parse(content);
+    const contentWithEmoji = replaceEmoji(content);
+    const html = marked.parse(contentWithEmoji);
     // marked.parse can return a Promise if async is enabled, but we are using sync mode
     // Just in case, handle potential Promise (though unlikely with current config)
     if (html instanceof Promise) {