LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Add support for suggesting emojis

Browse source
This commit is contained in:
Rafael 2021-12-06 17:38:13 -03:00 committed by Thomas Zarebczan
parent db5f24ae28
commit 1695312833
2 changed files with 25 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
ui/component/textareaSuggestionsItem/view.jsx
View file

@ -12,11 +12,11 @@ export default function TextareaSuggestionsItem(props: Props) {
const { claim, emote, uri, ...autocompleteProps } = props;
if (emote) {
const { name: value, url } = emote;
const { name: value, url, unicode } = emote;
return (
<div {...autocompleteProps}>
<img className="emote" src={url} />
{unicode ? <div className="emote">{unicode}</div> : <img className="emote" src={url} />}
<div className="textareaSuggestion__label">
<span className="textareaSuggestion__title textareaSuggestion__value textareaSuggestion__value--emote">

29
ui/component/textareaWithSuggestions/view.jsx
View file

@ -4,6 +4,7 @@ import { matchSorter } from 'match-sorter';
import { SEARCH_OPTIONS } from 'constants/search';
import * as KEYCODES from 'constants/keycodes';
import Autocomplete from '@mui/material/Autocomplete';
import EMOJIS from 'emoji-dictionary';
import React from 'react';
import TextareaSuggestionsItem from 'component/textareaSuggestionsItem';
import TextField from '@mui/material/TextField';
@ -11,7 +12,7 @@ import useLighthouse from 'effects/use-lighthouse';
import useThrottle from 'effects/use-throttle';
const SUGGESTION_REGEX = new RegExp(
'(?<Mention>(?:^| |\n)@[^\\s=&#$@%?:;/\\"<>%{}|^~[]*(?::[\\w]+)?)|(?<Emote>(?:^| |\n):[\\w]*:?)',
'(?<Mention>(?:^| |\n)@[^\\s=&#$@%?:;/\\"<>%{}|^~[]*(?::[\\w]+)?)|(?<Emote>(?:^| |\n):[\\w+-]*:?)',
'gm'
);
@ -30,6 +31,8 @@ const SEARCH_SIZE = 10;
const LIGHTHOUSE_MIN_CHARACTERS = 3;
const INPUT_DEBOUNCE_MS = 1000;
const EMOJI_MIN_CHARACTERS = 2;
type Props = {
canonicalCommentors?: Array<string>,
canonicalCreatorUri?: string,
@ -106,10 +109,16 @@ export default function TextareaWithSuggestions(props: Props) {
canonicalSearch &&
canonicalSearch.filter((uri) => shouldFilter(uri, filteredSubs) && shouldFilter(uri, filteredCommentors));
let emoteNames;
let emojiNames;
const allOptions = [];
if (isEmote) {
const emoteNames = EMOTES.map(({ name }) => name.toLowerCase());
allOptions.push(...emoteNames);
emoteNames = EMOTES.map(({ name }) => name.toLowerCase());
const hasMinEmojiLength = suggestionTerm && suggestionTerm.length > EMOJI_MIN_CHARACTERS;
emojiNames = hasMinEmojiLength ? EMOJIS.names : [];
const emotesAndEmojis = [...emoteNames, ...emojiNames];
allOptions.push(...emotesAndEmojis);
} else {
if (canonicalCreatorUri) allOptions.push(canonicalCreatorUri);
if (filteredSubs) allOptions.push(...filteredSubs);
@ -121,14 +130,20 @@ export default function TextareaWithSuggestions(props: Props) {
allOptions.length > 0
? allOptions.map((option) => {
const groupName = isEmote
? __('Emotes')
? (emoteNames.includes(option) && __('Emotes')) || (emojiNames.includes(option) && __('Emojis'))
: (canonicalCreatorUri === option && __('Creator')) ||
(filteredSubs && filteredSubs.includes(option) && __('Following')) ||
(filteredCommentors && filteredCommentors.includes(option) && __('From Comments')) ||
(filteredSearch && filteredSearch.includes(option) && __('From Search'));
let emoteLabel;
if (isEmote) {
// $FlowFixMe
emoteLabel = `:${option.replaceAll(':', '')}:`;
}
return {
label: isEmote ? option : option.replace('lbry://', '').replace('#', ':'),
label: emoteLabel || option.replace('lbry://', '').replace('#', ':'),
group: groupName,
};
})
@ -321,8 +336,10 @@ export default function TextareaWithSuggestions(props: Props) {
const renderOption = (optionProps: any, label: string) => {
const emoteFound = isEmote && EMOTES.find(({ name }) => name.toLowerCase() === label);
const emoteValue = emoteFound ? { name: label, url: emoteFound.url } : undefined;
const emojiFound = isEmote && EMOJIS.getUnicode(label);
const emojiValue = emojiFound ? { name: label, unicode: emojiFound } : undefined;
return <TextareaSuggestionsItem uri={label} emote={emoteValue} {...optionProps} />;
return <TextareaSuggestionsItem uri={label} emote={emoteValue || emojiValue} {...optionProps} />;
};
return (