feat: 论坛 emoji 表情支持
- 新增 dyEmoji 表情库与解析测试、EmojiPicker 选择器与 EmojiImg 组件 - Markdown 编辑器/渲染支持表情图片,新增 public/emoji 资源与生成脚本 - 聊天室与首页适配
This commit is contained in:
30
frontend/components/EmojiImg.tsx
Normal file
30
frontend/components/EmojiImg.tsx
Normal file
@@ -0,0 +1,30 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { dyEmojiUrl } from "@/lib/dyEmoji";
|
||||
|
||||
type EmojiImgProps = {
|
||||
/** 表情 key(短代码 [:key:] 的 key) */
|
||||
k: string;
|
||||
className?: string;
|
||||
};
|
||||
|
||||
/** 抖音表情小图:加载失败回退为 [表情] 文本,避免破图 */
|
||||
export default function EmojiImg({ k, className }: EmojiImgProps) {
|
||||
const [broken, setBroken] = useState(false);
|
||||
if (broken) {
|
||||
return <span className={className}>[表情]</span>;
|
||||
}
|
||||
return (
|
||||
// eslint-disable-next-line @next/next/no-img-element
|
||||
<img
|
||||
src={dyEmojiUrl(k)}
|
||||
alt={`[:${k}:]`}
|
||||
title={`[:${k}:]`}
|
||||
className={className}
|
||||
draggable={false}
|
||||
onContextMenu={(e) => e.preventDefault()}
|
||||
onError={() => setBroken(true)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user