- To use custom emoji in your toots they have to be 'local' to the instance. - You can either upload them here directly, or copy from those already - present on other (known) instances through the Remote Emoji page. -
-- Be warned! If you upload more than about 300-400 custom emojis in - total on your instance, this may lead to rate-limiting issues for users and clients - if they try to load all the emoji images at once (which is what many clients do). -
- {content} - > - ); -}; - -function EmojiList({ emoji }) { - const filterField = useTextInput("filter"); - const filter = filterField.value; - - const emojiByCategory = useEmojiByCategory(emoji); - - /* Filter emoji based on shortcode match with user input, hiding empty categories */ - const { filteredEmoji, hidden } = React.useMemo(() => { - let hidden = emoji.length; - const filteredEmoji = syncpipe(emojiByCategory, [ - (_) => Object.entries(emojiByCategory), - (_) => _.map(([category, entries]) => { - let filteredEntries = matchSorter(entries, filter, { keys: ["shortcode"] }); - if (filteredEntries.length == 0) { - return null; - } else { - hidden -= filteredEntries.length; - return [category, filteredEntries]; - } - }), - (_) => _.filter((value) => value !== null) - ]); - - return { filteredEmoji, hidden }; - }, [filter, emojiByCategory, emoji.length]); - - return ( -- The rules for your instance are listed on the about page, and can be selected when submitting reports. -
-
- {"An error occured, please report this on the "}
- GoToSocial issue tracker
- {" or "}
- Matrix support room.
-
Include the details below:
-
- {error.name}: {error.message} - - {componentStack && [ - "\n\nComponent trace:", - componentStack - ]} - {["\n\nError trace: ", error.stack]} --
- or refresh the page -
-
+ {"An error occured, please report this on the "}
+ GoToSocial issue tracker
+ {" or "}
+ Matrix support room.
+
Include the details below:
+
+ {error.name}: {error.message} + + {componentStack && [ + "\n\nComponent trace:", + componentStack + ]} + {["\n\nError trace: ", error.stack]} ++
+ or refresh the page +
++ To use custom emoji in your toots they have to be 'local' to the instance. + You can either upload them here directly, or copy from those already + present on other (known) instances through the Remote Emoji page. +
++ Be warned! If you upload more than about 300-400 custom emojis in + total on your instance, this may lead to rate-limiting issues for users and clients + if they try to load all the emoji images at once (which is what many clients do). +
+ {content} + > + ); +} + +interface EmojiListParams { + emoji: CustomEmoji[]; +} + +function EmojiList({ emoji }: EmojiListParams) { + const filterField = useTextInput("filter"); + const filter = filterField.value ?? ""; + const emojiByCategory = useEmojiByCategory(emoji); + + // Filter emoji based on shortcode match + // with user input, hiding empty categories. + const { filteredEmojis, filteredCount } = useMemo(() => { + // Amount of emojis removed by the filter. + // Start with the length of the array since + // that's the max that can be filtered out. + let filteredCount = emoji.length; + + // Results of the filtering. + const filteredEmojis: [string, CustomEmoji[]][] = []; + + // Filter from emojis in this category. + emojiByCategory.forEach((entries, category) => { + const filteredEntries = matchSorter(entries, filter, { + keys: ["shortcode"] + }); + + if (filteredEntries.length == 0) { + // Nothing left in this category, don't + // bother adding it to filteredEmojis. + return; + } + + filteredCount -= filteredEntries.length; + filteredEmojis.push([category, filteredEntries]); + }); + + return { filteredEmojis, filteredCount }; + }, [filter, emojiByCategory, emoji.length]); + + return ( + <> +