moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

WIP 

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak 2023-02-25 23:30:24 +01:00
parent 528acb8ac5
commit 2bbbcd625e
12 changed files with 202 additions and 202 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/soapbox/actions/events.ts
View File

@ -569,7 +569,7 @@ const rejectEventParticipationRequestFail = (id: string, accountId: string, erro
});
const fetchEventIcs = (id: string) =>
(dispatch: any, getState: () => RootState) =>
(dispatch: AppDispatch, getState: () => RootState) =>
api(getState).get(`/api/v1/pleroma/events/${id}/ics`);
const cancelEventCompose = () => ({

3
app/soapbox/components/announcements/reactions-bar.tsx
View File

@ -2,7 +2,6 @@ import clsx from 'clsx';
import React from 'react';
import { TransitionMotion, spring } from 'react-motion';
import { Icon } from 'soapbox/components/ui';
import EmojiPickerDropdown from 'soapbox/features/emoji/containers/emoji-picker-dropdown-container';
import { useSettings } from 'soapbox/hooks';
@ -55,7 +54,7 @@ const ReactionsBar: React.FC<IReactionsBar> = ({ announcementId, reactions, addR
/>
))}
{visibleReactions.size < 8 && <EmojiPickerDropdown onPickEmoji={handleEmojiPick} button={<Icon className='h-4 w-4 text-gray-400 hover:text-gray-600 dark:hover:text-white' src={require('@tabler/icons/plus.svg')} />} />}
{visibleReactions.size < 8 && <EmojiPickerDropdown onPickEmoji={handleEmojiPick} />}
</div>
)}
</TransitionMotion>

13
app/soapbox/components/ui/emoji-selector/emoji-selector.tsx
View File

@ -6,8 +6,7 @@ import { usePopper } from 'react-popper';
import { changeSetting } from 'soapbox/actions/settings';
import { Emoji, HStack, IconButton } from 'soapbox/components/ui';
import { messages } from 'soapbox/features/emoji/components/emoji-picker-dropdown';
import { getFrequentlyUsedEmojis } from 'soapbox/features/emoji/containers/emoji-picker-dropdown-container';
import { getFrequentlyUsedEmojis, messages } from 'soapbox/features/emoji/components/emoji-picker-dropdown';
import { EmojiPicker as EmojiPickerAsync } from 'soapbox/features/ui/util/async-components';
import { useAppDispatch, useAppSelector, useSettings, useSoapboxConfig } from 'soapbox/hooks';
@ -88,10 +87,14 @@ const EmojiSelector: React.FC<IEmojiSelector> = ({
};
const handleClickOutside = (event: MouseEvent) => {
if ([referenceElement, popperElement, document.querySelector('em-emoji-picker')].some(el => el?.contains(event.target as Node))) {
if ([referenceElement, popperElement].some(el => el?.contains(event.target as Node))) {
return;
}
if (document.querySelector('em-emoji-picker')) {
return setExpanded(false);
}
if (onClose) {
onClose();
}
@ -145,6 +148,10 @@ const EmojiSelector: React.FC<IEmojiSelector> = ({
};
};
useEffect(() => () => {
document.body.style.overflow = '';
}, []);
useEffect(() => {
setExpanded(false);
}, [visible]);

2
app/soapbox/features/account-gallery/components/media-item.tsx
View File

@ -103,7 +103,7 @@ const MediaItem: React.FC<IMediaItem> = ({ attachment, onOpenMedia }) => {
} else if (attachment.type === 'audio') {
const remoteURL = attachment.remote_url || '';
const fileExtensionLastIndex = remoteURL.lastIndexOf('.');
const fileExtension = remoteURL.substr(fileExtensionLastIndex + 1).toUpperCase();
const fileExtension = remoteURL.slice(fileExtensionLastIndex + 1).toUpperCase();
thumbnail = (
<div className='media-gallery__item-thumbnail'>
<span className='media-gallery__item__icons'><Icon src={require('@tabler/icons/volume.svg')} /></span>

112
app/soapbox/features/emoji/components/emoji-picker-dropdown.tsx
View File

@ -1,17 +1,21 @@
import { supportsPassiveEvents } from 'detect-passive-events';
import { Map as ImmutableMap } from 'immutable';
import React, { useEffect, useState, useLayoutEffect } from 'react';
import { createPortal } from 'react-dom';
import { defineMessages, useIntl } from 'react-intl';
import { usePopper } from 'react-popper';
import { createSelector } from 'reselect';
import { useSettings } from 'soapbox/hooks';
import { useEmoji } from 'soapbox/actions/emojis';
import { changeSetting } from 'soapbox/actions/settings';
import { useAppDispatch, useAppSelector, useSettings } from 'soapbox/hooks';
import { isMobile } from 'soapbox/is-mobile';
import { RootState } from 'soapbox/store';
import { buildCustomEmojis } from '../../emoji';
import { EmojiPicker as EmojiPickerAsync } from '../../ui/util/async-components';
import type { EmojiPick } from 'emoji-mart';
import type { List } from 'immutable';
import type { Emoji, CustomEmoji, NativeEmoji } from 'soapbox/features/emoji';
let EmojiPicker: any; // load asynchronously
@ -43,17 +47,73 @@ export const messages = defineMessages({
skins_6: { id: 'emoji_button.skins_6', defaultMessage: 'Dark' },
});
// TODO: fix types
interface IEmojiPickerDropdown {
custom_emojis: List<any>
frequentlyUsedEmojis: string[]
intl: any
onPickEmoji: (emoji: Emoji) => void
onSkinTone: () => void
condensed: boolean
render: any
export interface IEmojiPickerDropdown {
onPickEmoji?: (emoji: Emoji) => void
condensed?: boolean
render: React.FC<{
setPopperReference: React.Ref<HTMLButtonElement>
title?: string
visible?: boolean
loading?: boolean
handleToggle: (e: Event) => void
}>
}
const perLine = 8;
const lines = 2;
const DEFAULTS = [
'+1',
'grinning',
'kissing_heart',
'heart_eyes',
'laughing',
'stuck_out_tongue_winking_eye',
'sweat_smile',
'joy',
'yum',
'disappointed',
'thinking_face',
'weary',
'sob',
'sunglasses',
'heart',
'ok_hand',
];
export const getFrequentlyUsedEmojis = createSelector([
(state: RootState) => state.settings.get('frequentlyUsedEmojis', ImmutableMap()),
], (emojiCounters: ImmutableMap<string, number>) => {
let emojis = emojiCounters
.keySeq()
.sort((a, b) => emojiCounters.get(a)! - emojiCounters.get(b)!)
.reverse()
.slice(0, perLine * lines)
.toArray();
if (emojis.length < DEFAULTS.length) {
const uniqueDefaults = DEFAULTS.filter(emoji => !emojis.includes(emoji));
emojis = emojis.concat(uniqueDefaults.slice(0, DEFAULTS.length - emojis.length));
}
return emojis;
});
const getCustomEmojis = createSelector([
(state: RootState) => state.custom_emojis,
], emojis => emojis.filter(e => e.get('visible_in_picker')).sort((a, b) => {
const aShort = a.get('shortcode')!.toLowerCase();
const bShort = b.get('shortcode')!.toLowerCase();
if (aShort < bShort) {
return -1;
} else if (aShort > bShort) {
return 1;
} else {
return 0;
}
}));
// Fixes render bug where popover has a delayed position update
const RenderAfter = ({ children, update }: any) => {
const [nextTick, setNextTick] = useState(false);
@ -75,13 +135,17 @@ const RenderAfter = ({ children, update }: any) => {
const listenerOptions = supportsPassiveEvents ? { passive: true } : false;
const EmojiPickerDropdown: React.FC<IEmojiPickerDropdown> = ({ custom_emojis, frequentlyUsedEmojis, onPickEmoji, onSkinTone, condensed, render: Render }) => {
const EmojiPickerDropdown: React.FC<IEmojiPickerDropdown> = ({ onPickEmoji, condensed, render: Render }) => {
const intl = useIntl();
const dispatch = useAppDispatch();
const settings = useSettings();
const title = intl.formatMessage(messages.emoji);
const userTheme = settings.get('themeMode');
const theme = (userTheme === 'dark' || userTheme === 'light') ? userTheme : 'auto';
const customEmojis = useAppSelector((state) => getCustomEmojis(state));
const frequentlyUsedEmojis = useAppSelector((state) => getFrequentlyUsedEmojis(state));
const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
const [popperReference, setPopperReference] = useState<HTMLButtonElement | null>(null);
const [containerElement, setContainerElement] = useState<HTMLDivElement | null>(null);
@ -108,24 +172,36 @@ const EmojiPickerDropdown: React.FC<IEmojiPickerDropdown> = ({ custom_emojis, fr
const handlePick = (emoji: EmojiPick) => {
setVisible(false);
let pickedEmoji: Emoji;
if (emoji.native) {
onPickEmoji({
pickedEmoji = {
id: emoji.id,
colons: emoji.shortcodes,
custom: false,
native: emoji.native,
unified: emoji.unified,
} as NativeEmoji);
} as NativeEmoji;
} else {
onPickEmoji({
pickedEmoji = {
id: emoji.id,
colons: emoji.shortcodes,
custom: true,
imageUrl: emoji.src,
} as CustomEmoji);
} as CustomEmoji;
dispatch(useEmoji(pickedEmoji)); // eslint-disable-line react-hooks/rules-of-hooks
if (onPickEmoji) {
onPickEmoji(pickedEmoji);
}
}
};
const handleSkinTone = (skinTone: string) => {
dispatch(changeSetting(['skinTone'], skinTone));
};
const getI18n = () => {
return {
search: intl.formatMessage(messages.emoji_search),
@ -216,12 +292,12 @@ const EmojiPickerDropdown: React.FC<IEmojiPickerDropdown> = ({ custom_emojis, fr
<RenderAfter update={update}>
{!loading && (
<EmojiPicker
custom={[{ emojis: buildCustomEmojis(custom_emojis) }]}
custom={[{ emojis: buildCustomEmojis(customEmojis) }]}
title={title}
onEmojiSelect={handlePick}
recent={frequentlyUsedEmojis}
perLine={8}
skin={onSkinTone}
skin={handleSkinTone}
emojiSize={22}
emojiButtonSize={34}
set='twitter'

119
app/soapbox/features/emoji/containers/emoji-picker-dropdown-container.jsx
View File

@ -1,119 +0,0 @@
import classNames from 'classnames';
import { Map as ImmutableMap } from 'immutable';
import React from 'react';
import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import { IconButton } from 'soapbox/components/ui';
import { useEmoji } from '../../../actions/emojis';
import { getSettings, changeSetting } from '../../../actions/settings';
import EmojiPickerDropdown from '../components/emoji-picker-dropdown';
const perLine = 8;
const lines = 2;
const DEFAULTS = [
'+1',
'grinning',
'kissing_heart',
'heart_eyes',
'laughing',
'stuck_out_tongue_winking_eye',
'sweat_smile',
'joy',
'yum',
'disappointed',
'thinking_face',
'weary',
'sob',
'sunglasses',
'heart',
'ok_hand',
];
export const getFrequentlyUsedEmojis = createSelector([
state => state.settings.get('frequentlyUsedEmojis', ImmutableMap()),
], emojiCounters => {
let emojis = emojiCounters
.keySeq()
.sort((a, b) => emojiCounters.get(a) - emojiCounters.get(b))
.reverse()
.slice(0, perLine * lines)
.toArray();
if (emojis.length < DEFAULTS.length) {
const uniqueDefaults = DEFAULTS.filter(emoji => !emojis.includes(emoji));
emojis = emojis.concat(uniqueDefaults.slice(0, DEFAULTS.length - emojis.length));
}
return emojis;
});
const getCustomEmojis = createSelector([
state => state.custom_emojis,
], emojis => emojis.filter(e => e.get('visible_in_picker')).sort((a, b) => {
const aShort = a.get('shortcode').toLowerCase();
const bShort = b.get('shortcode').toLowerCase();
if (aShort < bShort) {
return -1;
} else if (aShort > bShort) {
return 1;
} else {
return 0;
}
}));
const mapStateToProps = state => ({
custom_emojis: getCustomEmojis(state),
skinTone: getSettings(state).get('skinTone'),
frequentlyUsedEmojis: getFrequentlyUsedEmojis(state),
});
const mapDispatchToProps = (dispatch, { onPickEmoji }) => ({
onSkinTone: skinTone => {
dispatch(changeSetting(['skinTone'], skinTone));
},
onPickEmoji: emoji => {
dispatch(useEmoji(emoji)); // eslint-disable-line react-hooks/rules-of-hooks
if (onPickEmoji) {
onPickEmoji(emoji);
}
},
});
const Container = connect(mapStateToProps, mapDispatchToProps)(EmojiPickerDropdown);
const EmojiPickerDropdownWrapper = (props) => {
return (
<Container
render={
({ setPopperReference, title, visible, loading, handleToggle }) => (
<IconButton
className={classNames({
'text-gray-400 hover:text-gray-600': true,
'pulse-loading': visible && loading,
})}
ref={setPopperReference}
src={require('@tabler/icons/mood-happy.svg')}
title={title}
aria-label={title}
aria-expanded={visible}
role='button'
onClick={handleToggle}
onKeyDown={handleToggle}
tabIndex={0}
/>
)
}
{...props}
/>
);
};
export default EmojiPickerDropdownWrapper;

37
app/soapbox/features/emoji/containers/emoji-picker-dropdown-container.tsx Normal file
View File

@ -0,0 +1,37 @@
import clsx from 'clsx';
import React from 'react';
import { IconButton } from 'soapbox/components/ui';
import EmojiPickerDropdown, { IEmojiPickerDropdown } from '../components/emoji-picker-dropdown';
const EmojiPickerDropdownWrapper = (props: Omit<IEmojiPickerDropdown, 'render'>) => {
return (
<EmojiPickerDropdown
render={
({ setPopperReference, title, visible, loading, handleToggle }: any) => (
<IconButton
className={clsx({
'text-gray-400 hover:text-gray-600': true,
'pulse-loading': visible && loading,
})}
ref={setPopperReference}
src={require('@tabler/icons/mood-happy.svg')}
title={title}
aria-label={title}
aria-expanded={visible}
role='button'
onClick={handleToggle}
onKeyDown={handleToggle}
tabIndex={0}
/>
)
}
{...props}
/>
);
};
export default EmojiPickerDropdownWrapper;

4
app/soapbox/features/emoji/mapping.ts
View File

@ -8,8 +8,8 @@ function replaceAll(str: string, find: string, replace: string) {
interface UnicodeMap {
[s: string]: {
unified: string,
shortcode: string,
unified: string
shortcode: string
}
}

6
app/soapbox/features/emoji/search.ts
View File

@ -41,7 +41,7 @@ const search = (str: string, { maxResults = 5, custom }: searchOptions = {}, cus
.flatMap(id => {
// @ts-ignore
if (id[0] === 'c') {
const { shortcode, static_url } = custom_emojis.get((id as string).substr(1)).toJS();
const { shortcode, static_url } = custom_emojis.get((id as string).slice(1)).toJS();
return {
id: shortcode,
@ -51,10 +51,10 @@ const search = (str: string, { maxResults = 5, custom }: searchOptions = {}, cus
};
}
const { skins } = data.emojis[(id as string).substr(1)];
const { skins } = data.emojis[(id as string).slice(1)];
return {
id: (id as string).substr(1),
id: (id as string).slice(1),
colons: ':' + id + ':',
unified: skins[0].unified,
native: skins[0].native,

2
app/soapbox/reducers/__tests__/statuses.test.ts
View File

@ -118,7 +118,7 @@ describe('statuses reducer', () => {
const status = require('soapbox/__fixtures__/status-custom-emoji.json');
const action = { type: STATUS_IMPORT, status };
const expected = 'Hello <img draggable="false" class="emojione custom-emoji" alt=":ablobcathyper:" title=":ablobcathyper:" src="https://gleasonator.com/emoji/blobcat/ablobcathyper.png" data-original="https://gleasonator.com/emoji/blobcat/ablobcathyper.png" data-static="https://gleasonator.com/emoji/blobcat/ablobcathyper.png"> <img draggable="false" class="emojione custom-emoji" alt=":ageblobcat:" title=":ageblobcat:" src="https://gleasonator.com/emoji/blobcat/ageblobcat.png" data-original="https://gleasonator.com/emoji/blobcat/ageblobcat.png" data-static="https://gleasonator.com/emoji/blobcat/ageblobcat.png"> <img draggable="false" class="emojione" alt="😂" title=":joy:" src="/packs/emoji/1f602.svg"> world <img draggable="false" class="emojione" alt="😋" title=":yum:" src="/packs/emoji/1f60b.svg"> test <img draggable="false" class="emojione custom-emoji" alt=":blobcatphoto:" title=":blobcatphoto:" src="https://gleasonator.com/emoji/blobcat/blobcatphoto.png" data-original="https://gleasonator.com/emoji/blobcat/blobcatphoto.png" data-static="https://gleasonator.com/emoji/blobcat/blobcatphoto.png">';
const expected = 'Hello <img draggable="false" class="emojione" alt=":ablobcathyper:" title=":ablobcathyper:" src="https://gleasonator.com/emoji/blobcat/ablobcathyper.png"> <img draggable="false" class="emojione" alt=":ageblobcat:" title=":ageblobcat:" src="https://gleasonator.com/emoji/blobcat/ageblobcat.png"> <img draggable="false" class="emojione" alt="😂" title=":joy:" src="/packs/emoji/1f602.svg"> world <img draggable="false" class="emojione" alt="😋" title=":yum:" src="/packs/emoji/1f60b.svg"> test <img draggable="false" class="emojione" alt=":blobcatphoto:" title=":blobcatphoto:" src="https://gleasonator.com/emoji/blobcat/blobcatphoto.png">';
const result = reducer(undefined, action).getIn(['AGm7uC9DaAIGUa4KYK', 'contentHtml']);
expect(result).toBe(expected);

2
app/soapbox/reducers/custom-emojis.ts
View File

@ -9,7 +9,7 @@ import { CUSTOM_EMOJIS_FETCH_SUCCESS } from '../actions/custom-emojis';
import type { AnyAction } from 'redux';
import type { APIEntity } from 'soapbox/types/entities';
const initialState = ImmutableList();
const initialState = ImmutableList<ImmutableMap<string, string>>();
// Populate custom emojis for composer autosuggest
const autosuggestPopulate = (emojis: ImmutableList<ImmutableMap<string, string>>) => {

102
types/emoji-mart/index.d.ts vendored
View File

@ -1,10 +1,10 @@
declare module 'emoji-mart' {
export interface NativeEmoji {
unified: string,
native: string,
x: number,
y: number,
unified: string
native: string
x: number
y: number
}
export interface CustomEmoji {
@ -12,40 +12,40 @@ declare module 'emoji-mart' {
}
export interface Emoji<T> {
id: string,
name: string,
keywords: string[],
skins: T[],
version?: number,
id: string
name: string
keywords: string[]
skins: T[]
version?: number
}
export interface EmojiPick {
id: string,
name: string,
native?: string,
unified?: string,
keywords: string[],
shortcodes: string,
emoticons: string[],
src?: string,
id: string
name: string
native?: string
unified?: string
keywords: string[]
shortcodes: string
emoticons: string[]
src?: string
}
export interface PickerProps {
custom?: { emojis: Emoji<CustomEmoji> }[],
set?: string,
title?: string,
theme?: string,
onEmojiSelect?: (emoji: EmojiPick) => void,
recent?: any,
skin?: any,
perLine?: number,
emojiSize?: number,
emojiButtonSize?: number,
navPosition?: string,
autoFocus?: boolean,
i18n?: any,
getImageURL: (set: string, name: string) => string,
getSpritesheetURL: (set: string) => string,
custom?: { emojis: Emoji<CustomEmoji> }[]
set?: string
title?: string
theme?: string
onEmojiSelect?: (emoji: EmojiPick) => void
recent?: any
skin?: any
perLine?: number
emojiSize?: number
emojiButtonSize?: number
navPosition?: string
autoFocus?: boolean
i18n?: any
getImageURL: (set: string, name: string) => string
getSpritesheetURL: (set: string) => string
}
export class Picker {
@ -58,10 +58,10 @@ declare module 'emoji-mart' {
declare module '@emoji-mart/data/sets/14/twitter.json' {
export interface NativeEmoji {
unified: string,
native: string,
x: number,
y: number,
unified: string
native: string
x: number
y: number
}
export interface CustomEmoji {
@ -69,36 +69,36 @@ declare module '@emoji-mart/data/sets/14/twitter.json' {
}
export interface Emoji<T> {
id: string,
name: string,
keywords: string[],
skins: T[],
version?: number,
id: string
name: string
keywords: string[]
skins: T[]
version?: number
}
export interface EmojiCategory {
id: string,
emojis: string[],
id: string
emojis: string[]
}
export interface EmojiMap {
[s: string]: Emoji<NativeEmoji>,
[s: string]: Emoji<NativeEmoji>
}
export interface EmojiAlias {
[s: string]: string,
[s: string]: string
}
export interface EmojiSheet {
cols: number,
rows: number,
cols: number
rows: number
}
export interface EmojiData {
categories: EmojiCategory[],
emojis: EmojiMap,
aliases: EmojiAlias,
sheet: EmojiSheet,
categories: EmojiCategory[]
emojis: EmojiMap
aliases: EmojiAlias
sheet: EmojiSheet
}
const data: EmojiData;