yoginth.com
Hey is a decentralized and permissionless social media app built with Lens Protocol 馃尶
1import { EditorRegex } from "@hey/data/regex";
2import type { Emoji } from "@hey/types/misc";
3import { useEditor } from "prosekit/react";
4import {
5 AutocompleteItem,
6 AutocompleteList,
7 AutocompletePopover
8} from "prosekit/react/autocomplete";
9import { useState } from "react";
10import cn from "@/helpers/cn";
11import type { EditorExtension } from "@/helpers/prosekit/extension";
12import useEmojis from "@/hooks/prosekit/useEmojis";
13
14interface EmojiItemProps {
15 emoji: Emoji;
16 onSelect: VoidFunction;
17}
18
19const EmojiItem = ({ emoji, onSelect }: EmojiItemProps) => {
20 return (
21 <AutocompleteItem
22 className="focusable-dropdown-item m-1 block cursor-pointer rounded-lg p-2 outline-hidden"
23 onSelect={onSelect}
24 >
25 <div className="flex items-center space-x-2">
26 <span className="text-base">{emoji.emoji}</span>
27 <span className="text-sm capitalize">
28 {emoji.aliases[0].split("_").join(" ")}
29 </span>
30 </div>
31 </AutocompleteItem>
32 );
33};
34
35const EmojiPicker = () => {
36 const editor = useEditor<EditorExtension>();
37 const [query, setQuery] = useState("");
38 const { emojis } = useEmojis({ query });
39
40 const handleInsert = (emoji: Emoji) => {
41 editor.commands.insertText({ text: emoji.emoji });
42 };
43
44 return (
45 <AutocompletePopover
46 className={cn(
47 "z-10 w-52 select-none rounded-xl border border-gray-200 bg-white shadow-xs dark:border-gray-700 dark:bg-gray-900",
48 !emojis.length && "hidden"
49 )}
50 offset={10}
51 onQueryChange={setQuery}
52 regex={EditorRegex.emoji}
53 >
54 <AutocompleteList filter={null}>
55 {emojis.map((emoji) => (
56 <EmojiItem
57 emoji={emoji}
58 key={emoji.emoji}
59 onSelect={() => handleInsert(emoji)}
60 />
61 ))}
62 </AutocompleteList>
63 </AutocompletePopover>
64 );
65};
66
67export default EmojiPicker;