2 days ago

开源 HackerTalk 编辑器 emoji 的渲染库

在重构编辑器，魔改 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);

hackertalk·editor·markdown

22 views