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

- 添加 node-emoji 依赖库支持 emoji 解析
- 实现防错处理确保 emoji 渲染失败时返回原始文本
This commit is contained in:
zpj80231
2026-03-25 17:48:46 +08:00
parent 071f6bf6f7
commit bbfa65f78e
3 changed files with 32 additions and 4 deletions

View File

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

View File

@@ -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);
}
// 创建回复编辑器

View File

@@ -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) {