From 485095e5026322041a89740a77590f5c7e1ce2f3 Mon Sep 17 00:00:00 2001 From: ewwwwwwww Date: Mon, 4 Jul 2022 20:11:46 -0700 Subject: [PATCH] fixed types --- app/soapbox/actions/compose.ts | 3 +- app/soapbox/components/autosuggest_emoji.tsx | 16 ++++++--- .../components/emoji_picker_dropdown.tsx | 5 --- app/soapbox/features/emoji/index.ts | 36 +++++++++++++------ app/soapbox/features/emoji/search.ts | 9 +++-- app/soapbox/reducers/compose.ts | 4 ++- 6 files changed, 46 insertions(+), 27 deletions(-) diff --git a/app/soapbox/actions/compose.ts b/app/soapbox/actions/compose.ts index 3aa80fe1d..0a1b71f13 100644 --- a/app/soapbox/actions/compose.ts +++ b/app/soapbox/actions/compose.ts @@ -4,6 +4,7 @@ import { defineMessages, IntlShape } from 'react-intl'; import snackbar from 'soapbox/actions/snackbar'; import api from 'soapbox/api'; +import { isNativeEmoji } from 'soapbox/features/emoji'; import emojiSearch from 'soapbox/features/emoji/search'; import { tagHistory } from 'soapbox/settings'; import { isLoggedIn } from 'soapbox/utils/auth'; @@ -526,7 +527,7 @@ const selectComposeSuggestion = (position: number, token: string | null, suggest let completion, startPosition; if (typeof suggestion === 'object' && suggestion.id) { - completion = suggestion.native || suggestion.colons; + completion = isNativeEmoji(suggestion) ? suggestion.native : suggestion.colons; startPosition = position - 1; dispatch(useEmoji(suggestion)); diff --git a/app/soapbox/components/autosuggest_emoji.tsx b/app/soapbox/components/autosuggest_emoji.tsx index 5e3b37ff0..34d7c0dbf 100644 --- a/app/soapbox/components/autosuggest_emoji.tsx +++ b/app/soapbox/components/autosuggest_emoji.tsx @@ -1,9 +1,11 @@ import React from 'react'; -import type { Emoji } from 'soapbox/features/emoji'; +import { isCustomEmoji, isNativeEmoji } from 'soapbox/features/emoji'; import unicodeMapping from 'soapbox/features/emoji/mapping'; import { joinPublicPath } from 'soapbox/utils/static'; +import type { Emoji } from 'soapbox/features/emoji'; + interface UnicodeMapping { filename: string, } @@ -13,11 +15,12 @@ interface IAutosuggestEmoji { } const AutosuggestEmoji: React.FC = ({ emoji }) => { - let url; + let url, alt; - if (emoji.custom) { + if (isCustomEmoji(emoji)) { url = emoji.imageUrl; - } else { + alt = emoji.colons; + } else if (isNativeEmoji(emoji)) { const mapping = unicodeMapping[emoji.native] || unicodeMapping[emoji.native.replace(/\uFE0F$/, '')]; if (!mapping) { @@ -25,6 +28,9 @@ const AutosuggestEmoji: React.FC = ({ emoji }) => { } url = joinPublicPath(`packs/emoji/${mapping.unified}.svg`); + alt = emoji.native; + } else { + return
} return ( @@ -32,7 +38,7 @@ const AutosuggestEmoji: React.FC = ({ emoji }) => { {emoji.native {emoji.colons} diff --git a/app/soapbox/features/emoji/components/emoji_picker_dropdown.tsx b/app/soapbox/features/emoji/components/emoji_picker_dropdown.tsx index d47ed3a8b..d91356231 100644 --- a/app/soapbox/features/emoji/components/emoji_picker_dropdown.tsx +++ b/app/soapbox/features/emoji/components/emoji_picker_dropdown.tsx @@ -74,11 +74,6 @@ const EmojiPickerDropdown: React.FC = ({ custom_emojis, fr }; const handlePick = (emoji: Emoji) => { - // TODO: remove me - if (!emoji.native) { - emoji.native = emoji.shortcodes; - } - setVisible(false); onPickEmoji(emoji); }; diff --git a/app/soapbox/features/emoji/index.ts b/app/soapbox/features/emoji/index.ts index 91e57c5d5..314a39511 100644 --- a/app/soapbox/features/emoji/index.ts +++ b/app/soapbox/features/emoji/index.ts @@ -5,17 +5,33 @@ import { parseDocument } from 'htmlparser2'; import unicodeMapping from './mapping'; import type { Node as CheerioNode } from 'cheerio'; -import type { Emoji as EmojiMart, CustomEmoji } from 'emoji-mart'; +import type { Emoji as EmojiMart, CustomEmoji as EmojiMartCustom } from 'emoji-mart'; -// export interface Emoji { -// id: string, -// custom: boolean, -// imageUrl: string, -// native: string, -// colons: string, -// } +export interface Emoji { + id: string, + colons: string, + custom?: boolean, +} -export type Emoji = any; +export interface CustomEmoji extends Emoji { + custom: true, + imageUrl: string, +} + +export interface NativeEmoji extends Emoji { + unified: string, + native: string, +} + +export function isCustomEmoji(emoji: Emoji): emoji is CustomEmoji { + return (emoji as CustomEmoji).imageUrl !== undefined; +} + +export function isNativeEmoji(emoji: Emoji): emoji is NativeEmoji { + return (emoji as NativeEmoji).native !== undefined; +} + +// export type Emoji = any; const isAlphaNumeric = (c: string) => { const code = c.charCodeAt(0); @@ -150,7 +166,7 @@ const emojify = (str: string, customEmojis = {}) => { export default emojify; export const buildCustomEmojis = (customEmojis: any) => { - const emojis: EmojiMart[] = []; + const emojis: EmojiMart[] = []; customEmojis.forEach((emoji: any) => { const shortcode = emoji.get('shortcode'); diff --git a/app/soapbox/features/emoji/search.ts b/app/soapbox/features/emoji/search.ts index 7f5a6b9ee..eff9b347a 100644 --- a/app/soapbox/features/emoji/search.ts +++ b/app/soapbox/features/emoji/search.ts @@ -30,21 +30,20 @@ const search = (str: string, options: searchOptions, custom_emojis: any) => { .flatMap(id => { if (Number.isInteger(id)) { const { shortcode, static_url } = custom_emojis.get(id).toJS(); + return { id: shortcode, colons: ':' + shortcode + ':', - emoticons: [], custom: true, imageUrl: static_url, }; } - const { name, skins } = data.emojis[id]; + const { skins } = data.emojis[id]; return { - id: name, - colons: ':' + name + ':', - emoticons: [], + id: id as string, + colons: ':' + id + ':', unified: skins[0].unified, native: skins[0].native, }; diff --git a/app/soapbox/reducers/compose.ts b/app/soapbox/reducers/compose.ts index 26a96a189..4912fd03f 100644 --- a/app/soapbox/reducers/compose.ts +++ b/app/soapbox/reducers/compose.ts @@ -1,6 +1,7 @@ import { Map as ImmutableMap, List as ImmutableList, OrderedSet as ImmutableOrderedSet, Record as ImmutableRecord, fromJS } from 'immutable'; import { v4 as uuid } from 'uuid'; +import { isNativeEmoji } from 'soapbox/features/emoji'; import { tagHistory } from 'soapbox/settings'; import { PLEROMA } from 'soapbox/utils/features'; import { hasIntegerMediaIds } from 'soapbox/utils/status'; @@ -220,7 +221,8 @@ const updateSuggestionTags = (state: State, token: string) => { const insertEmoji = (state: State, position: number, emojiData: Emoji, needsSpace: boolean) => { const oldText = state.text; - const emoji = needsSpace ? ' ' + emojiData.native : emojiData.native; + const emojiText = isNativeEmoji(emojiData) ? emojiData.native : emojiData.colons; + const emoji = needsSpace ? ' ' + emojiText : emojiText; return state.merge({ text: `${oldText.slice(0, position)}${emoji} ${oldText.slice(position)}`,