revite/src/components/common/Emoji.tsx

74 lines
1.8 KiB
TypeScript
Raw Normal View History

2021-07-05 06:23:23 -04:00
import { EmojiPacks } from "../../redux/reducers/settings";
2021-06-19 13:46:05 -04:00
let EMOJI_PACK = "mutant";
2021-06-19 13:46:05 -04:00
const REVISION = 3;
export function setEmojiPack(pack: EmojiPacks) {
2021-07-05 06:25:20 -04:00
EMOJI_PACK = pack;
}
// Originally taken from Twemoji source code,
// re-written by bree to be more readable.
function codePoints(rune: string) {
2021-07-05 06:25:20 -04:00
const pairs = [];
let low = 0;
let i = 0;
2021-07-05 06:23:23 -04:00
2021-07-05 06:25:20 -04:00
while (i < rune.length) {
const charCode = rune.charCodeAt(i++);
if (low) {
pairs.push(0x10000 + ((low - 0xd800) << 10) + (charCode - 0xdc00));
low = 0;
} else if (0xd800 <= charCode && charCode <= 0xdbff) {
low = charCode;
} else {
pairs.push(charCode);
}
}
2021-07-05 06:23:23 -04:00
2021-07-05 06:25:20 -04:00
return pairs;
}
2021-06-19 13:46:05 -04:00
// Taken from Twemoji source code.
// scripts/build.js#344
// grabTheRightIcon(rawText);
const UFE0Fg = /\uFE0F/g;
2021-07-05 06:23:23 -04:00
const U200D = String.fromCharCode(0x200d);
function toCodePoint(rune: string) {
2021-07-05 06:25:20 -04:00
return codePoints(rune.indexOf(U200D) < 0 ? rune.replace(UFE0Fg, "") : rune)
.map((val) => val.toString(16))
.join("-");
2021-06-19 13:46:05 -04:00
}
function parseEmoji(emoji: string) {
const codepoint = toCodePoint(emoji);
2021-07-05 06:25:20 -04:00
return `https://static.revolt.chat/emoji/${EMOJI_PACK}/${codepoint}.svg?rev=${REVISION}`;
2021-06-19 13:46:05 -04:00
}
2021-07-05 06:23:23 -04:00
export default function Emoji({
2021-07-05 06:25:20 -04:00
emoji,
size,
2021-07-05 06:23:23 -04:00
}: {
2021-07-05 06:25:20 -04:00
emoji: string;
size?: number;
2021-07-05 06:23:23 -04:00
}) {
2021-07-05 06:25:20 -04:00
return (
<img
alt={emoji}
loading="lazy"
2021-07-05 06:25:20 -04:00
className="emoji"
draggable={false}
src={parseEmoji(emoji)}
style={
size ? { width: `${size}px`, height: `${size}px` } : undefined
}
/>
);
2021-06-19 13:46:05 -04:00
}
export function generateEmoji(emoji: string) {
return `<img loading="lazy" class="emoji" draggable="false" alt="${emoji}" src="${parseEmoji(
2021-07-05 06:25:20 -04:00
emoji,
)}" />`;
2021-06-19 13:46:05 -04:00
}