handmade-revolt/src/components/markdown/plugins/emoji.tsx

44 lines
1.1 KiB
TypeScript

import styled from "styled-components";
import { emojiDictionary } from "../../../assets/emojis";
import { clientController } from "../../../controllers/client/ClientController";
import { parseEmoji } from "../../common/Emoji";
import { createComponent, CustomComponentProps } from "./remarkRegexComponent";
const Emoji = styled.img`
object-fit: contain;
height: var(--emoji-size);
width: var(--emoji-size);
margin: 0 0.05em 0 0.1em;
vertical-align: -0.2em;
`;
export function RenderEmoji({ match }: CustomComponentProps) {
return (
<Emoji
alt={match}
loading="lazy"
className="emoji"
draggable={false}
src={parseEmoji(
emojiDictionary[match as keyof typeof emojiDictionary],
)}
/>
);
}
const RE_EMOJI = /:([a-zA-Z0-9_]+):/g;
export const remarkEmoji = createComponent(
"emoji",
RE_EMOJI,
(match) =>
match in emojiDictionary ||
clientController.getAvailableClient().emojis?.has(match),
);
export function isOnlyEmoji(text: string) {
return text.replaceAll(RE_EMOJI, "").trim().length === 0;
}