在重构编辑器,魔改 Markdown 的 AST,其中一部分是自定义 emoji 渲染,支持换成 google/twitter/facebook 的 emoji,这部份比较通用,写一个 remark 库发布出来。
有 react-markdown 的例子,可以自定义 emoji 组件:
emoji.tsx
import clsx from 'clsx';
import * as emoji from 'node-emoji';
import type { ReactNode } from 'react';
type EmojiProps = {
className?: string;
children: string;
};
export type EmojiComponents = {
emoji: (props: EmojiProps) => ReactNode;
};
export function Emoji({ children, className = 'size-5' }: EmojiProps) {
const value = emoji.get(text) ?? '💔';
return <span className="size-5">{value}</span>;
}
markdown.tsx
import { memo } from 'react';
import ReactMarkdown, { type Components } from 'react-markdown';
import Emoji, { EmojiComponents } from './emoji';
const components: Partial<Components & EmojiComponents> = {
emoji: Emoji,
// other components...
};
const Markdown = ({ children, className }: { children: string; className?: string }) => {
const { theme } = useTheme();
return (
<div className={className}>
<ReactMarkdown components={components} remarkPlugins={[remarkGfm, remarkGfmEmoji]}>
{children}
</ReactMarkdown>
</div>
);
};
export default memo(Markdown, (prev, next) => prev.children === next.children);