开源 HackerTalk 编辑器 emoji 的渲染库

在重构编辑器,魔改 Markdown 的 AST,其中一部分是自定义 emoji 渲染,支持换成 google/twitter/facebook 的 emoji,这部份比较通用,写一个 remark 库发布出来。

remark-gfm-emoji

有 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);
Comments
登录后评论
Sign In