import "@webscopeio/react-textarea-autocomplete/style.css";
import "./Textarea.css";
import { useIntl } from "react-intl";
import ReactTextareaAutocomplete from "@webscopeio/react-textarea-autocomplete";
import emoji from "@jukben/emoji-search";
import TextareaAutosize from "react-textarea-autosize";
import { NostrPrefix } from "@snort/nostr";
import Avatar from "Element/Avatar";
import Nip05 from "Element/Nip05";
import { hexToBech32 } from "Util";
import { MetadataCache } from "State/Users";
import { UserCache } from "State/Users/UserCache";
import messages from "./messages";
interface EmojiItemProps {
name: string;
char: string;
}
const EmojiItem = ({ entity: { name, char } }: { entity: EmojiItemProps }) => {
return (
);
};
const UserItem = (metadata: MetadataCache) => {
const { pubkey, display_name, nip05, ...rest } = metadata;
return (
{display_name || rest.name}
);
};
interface TextareaProps {
autoFocus: boolean;
className: string;
onChange(ev: React.ChangeEvent): void;
value: string;
onFocus(): void;
}
const Textarea = (props: TextareaProps) => {
const { formatMessage } = useIntl();
const userDataProvider = async (token: string) => {
return await UserCache.search(token);
};
const emojiDataProvider = (token: string) => {
return emoji(token)
.slice(0, 5)
.map(({ name, char }) => ({ name, char }));
};
return (
// @ts-expect-error If anybody can figure out how to type this, please do
Loading...}
placeholder={formatMessage(messages.NotePlaceholder)}
textAreaComponent={TextareaAutosize}
trigger={{
":": {
dataProvider: emojiDataProvider,
component: EmojiItem,
output: (item: EmojiItemProps) => item.char,
},
"@": {
afterWhitespace: true,
dataProvider: userDataProvider,
component: (props: { entity: MetadataCache }) => ,
output: (item: { pubkey: string }) => `@${hexToBech32(NostrPrefix.PublicKey, item.pubkey)}`,
},
}}
/>
);
};
export default Textarea;