bigbuffet/pleroma
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'preview-card' into 'main'

Browse source 
RTL fixes for PreviewCard, Chats, Error page

See merge request soapbox-pub/soapbox!2792
This commit is contained in:
Alex Gleason 2023-10-11 02:54:48 +00:00
commit c3ac8c365b
16 changed files with 117 additions and 86 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/autosuggest-input.tsx
View file

@ -7,7 +7,7 @@ import AutosuggestEmoji from 'soapbox/components/autosuggest-emoji';
import Icon from 'soapbox/components/icon';
import { Input, Portal } from 'soapbox/components/ui';
import AutosuggestAccount from 'soapbox/features/compose/components/autosuggest-account';
import { isRtl } from 'soapbox/rtl';
import { isRtl } from 'soapbox/utils/rtl';
import { textAtCursorMatchesToken } from 'soapbox/utils/suggestions';
import type { Menu, MenuItem } from 'soapbox/components/dropdown-menu';

2
src/components/autosuggest-textarea.tsx
View file

@ -5,7 +5,7 @@ import Textarea from 'react-textarea-autosize';
import { Portal } from 'soapbox/components/ui';
import AutosuggestAccount from 'soapbox/features/compose/components/autosuggest-account';
import { isRtl } from 'soapbox/rtl';
import { isRtl } from 'soapbox/utils/rtl';
import { textAtCursorMatchesToken } from 'soapbox/utils/suggestions';
import AutosuggestEmoji from './autosuggest-emoji';

30
src/components/error-boundary.tsx
View file

@ -14,18 +14,6 @@ import SiteLogo from './site-logo';
import type { RootState } from 'soapbox/store';
const goHome = () => location.href = '/';
const mapStateToProps = (state: RootState) => {
const { links, logo } = getSoapboxConfig(state);
return {
siteTitle: state.instance.title,
logo,
links,
};
};
interface Props extends ReturnType<typeof mapStateToProps> {
children: React.ReactNode;
}
@ -152,7 +140,8 @@ class ErrorBoundary extends React.PureComponent<Props, State> {
<div className='mt-10'>
<a href='/' className='text-base font-medium text-primary-600 hover:underline dark:text-accent-blue'>
<FormattedMessage id='alert.unexpected.return_home' defaultMessage='Return Home' />
<span aria-hidden='true'> &rarr;</span>
{' '}
<span className='inline-block rtl:rotate-180' aria-hidden='true'>&rarr;</span>
</a>
</div>
</div>
@ -165,6 +154,7 @@ class ErrorBoundary extends React.PureComponent<Props, State> {
className='block h-48 w-full rounded-md border-gray-300 bg-gray-100 p-4 font-mono text-gray-900 shadow-sm focus:border-primary-500 focus:ring-2 focus:ring-primary-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 sm:text-sm'
value={errorText}
onClick={this.handleCopy}
dir='ltr'
readOnly
/>
)}
@ -215,4 +205,18 @@ class ErrorBoundary extends React.PureComponent<Props, State> {
}
function goHome() {
location.href = '/';
}
function mapStateToProps(state: RootState) {
const { links, logo } = getSoapboxConfig(state);
return {
siteTitle: state.instance.title,
logo,
links,
};
}
export default connect(mapStateToProps)(ErrorBoundary);

46
src/features/status/components/card.tsx → src/components/preview-card.tsx
View file

@ -3,24 +3,15 @@ import { List as ImmutableList } from 'immutable';
import React, { useState, useEffect } from 'react';
import Blurhash from 'soapbox/components/blurhash';
import Icon from 'soapbox/components/icon';
import { HStack, Stack, Text } from 'soapbox/components/ui';
import { HStack, Stack, Text, Icon } from 'soapbox/components/ui';
import { normalizeAttachment } from 'soapbox/normalizers';
import { addAutoPlay } from 'soapbox/utils/media';
import { getTextDirection } from 'soapbox/utils/rtl';
import type { Card as CardEntity, Attachment } from 'soapbox/types/entities';
const trim = (text: string, len: number): string => {
const cut = text.indexOf(' ', len);
if (cut === -1) {
return text;
}
return text.substring(0, cut) + (text.length > len ? '…' : '');
};
interface ICard {
/** Props for `PreviewCard`. */
interface IPreviewCard {
card: CardEntity;
maxTitle?: number;
maxDescription?: number;
@ -31,7 +22,8 @@ interface ICard {
horizontal?: boolean;
}
const Card: React.FC<ICard> = ({
/** Displays a Mastodon link preview. Similar to OEmbed. */
const PreviewCard: React.FC<IPreviewCard> = ({
card,
defaultWidth = 467,
maxTitle = 120,
@ -48,6 +40,8 @@ const Card: React.FC<ICard> = ({
setEmbedded(false);
}, [card.url]);
const direction = getTextDirection(card.title + card.description);
const trimmedTitle = trim(card.title, maxTitle);
const trimmedDescription = trim(card.description, maxDescription);
@ -123,26 +117,27 @@ const Card: React.FC<ICard> = ({
title={trimmedTitle}
rel='noopener'
target='_blank'
dir={direction}
>
<span>{trimmedTitle}</span>
<span dir={direction}>{trimmedTitle}</span>
</a>
) : (
<span title={trimmedTitle}>{trimmedTitle}</span>
<span title={trimmedTitle} dir={direction}>{trimmedTitle}</span>
);
const description = (
<Stack space={2} className='flex-1 overflow-hidden p-4'>
{trimmedTitle && (
<Text weight='bold'>{title}</Text>
<Text weight='bold' direction={direction}>{title}</Text>
)}
{trimmedDescription && (
<Text>{trimmedDescription}</Text>
<Text direction={direction}>{trimmedDescription}</Text>
)}
<HStack space={1} alignItems='center'>
<Text tag='span' theme='muted'>
<Icon src={require('@tabler/icons/link.svg')} />
</Text>
<Text tag='span' theme='muted' size='sm'>
<Text tag='span' theme='muted' size='sm' direction={direction}>
{card.provider_name}
</Text>
</HStack>
@ -253,4 +248,15 @@ const Card: React.FC<ICard> = ({
);
};
export default Card;
/** Trim the text, adding ellipses if it's too long. */
function trim(text: string, len: number): string {
const cut = text.indexOf(' ', len);
if (cut === -1) {
return text;
}
return text.substring(0, cut) + (text.length > len ? '…' : '');
}
export default PreviewCard;

4
src/components/status-content.tsx
View file

@ -6,7 +6,7 @@ import { useHistory } from 'react-router-dom';
import Icon from 'soapbox/components/icon';
import { onlyEmoji as isOnlyEmoji } from 'soapbox/utils/rich-content';
import { isRtl } from '../rtl';
import { getTextDirection } from '../utils/rtl';
import Markup from './markup';
import Poll from './polls/poll';
@ -142,7 +142,7 @@ const StatusContent: React.FC<IStatusContent> = ({
const baseClassName = 'text-gray-900 dark:text-gray-100 break-words text-ellipsis overflow-hidden relative focus:outline-none';
const content = { __html: parsedHtml };
const direction = isRtl(status.search_index) ? 'rtl' : 'ltr';
const direction = getTextDirection(status.search_index);
const className = clsx(baseClassName, {
'cursor-pointer': onClick,
'whitespace-normal': withSpoiler,

4
src/components/status-media.tsx
View file

@ -2,9 +2,9 @@ import React, { Suspense } from 'react';
import { openModal } from 'soapbox/actions/modals';
import AttachmentThumbs from 'soapbox/components/attachment-thumbs';
import PreviewCard from 'soapbox/components/preview-card';
import { GroupLinkPreview } from 'soapbox/features/groups/components/group-link-preview';
import PlaceholderCard from 'soapbox/features/placeholder/components/placeholder-card';
import Card from 'soapbox/features/status/components/card';
import { MediaGallery, Video, Audio } from 'soapbox/features/ui/util/async-components';
import { useAppDispatch } from 'soapbox/hooks';
@ -118,7 +118,7 @@ const StatusMedia: React.FC<IStatusMedia> = ({
);
} else if (status.spoiler_text.length === 0 && !status.quote && status.card) {
media = (
<Card
<PreviewCard
onOpenMedia={openMedia}
card={status.card}
compact

2
src/features/chats/components/chat-page/components/chat-page-main.tsx
View file

@ -121,7 +121,7 @@ const ChatPageMain = () => {
<HStack alignItems='center'>
<IconButton
src={require('@tabler/icons/arrow-left.svg')}
className='mr-2 h-7 w-7 sm:mr-0 sm:hidden'
className='mr-2 h-7 w-7 rtl:rotate-180 sm:mr-0 sm:hidden'
onClick={() => history.push('/chats')}
/>

2
src/features/chats/components/chat-page/components/chat-page-new.tsx
View file

@ -24,7 +24,7 @@ const ChatPageNew: React.FC<IChatPageNew> = () => {
<HStack alignItems='center'>
<IconButton
src={require('@tabler/icons/arrow-left.svg')}
className='mr-2 h-7 w-7 sm:mr-0 sm:hidden'
className='mr-2 h-7 w-7 rtl:rotate-180 sm:mr-0 sm:hidden'
onClick={() => history.push('/chats')}
/>

2
src/features/chats/components/chat-page/components/chat-page-settings.tsx
View file

@ -51,7 +51,7 @@ const ChatPageSettings = () => {
<HStack alignItems='center'>
<IconButton
src={require('@tabler/icons/arrow-left.svg')}
className='mr-2 h-7 w-7 sm:mr-0 sm:hidden'
className='mr-2 h-7 w-7 rtl:rotate-180 sm:mr-0 sm:hidden'
onClick={() => history.push('/chats')}
/>

2
src/features/chats/components/chat-widget/chat-settings.tsx
View file

@ -96,7 +96,7 @@ const ChatSettings = () => {
<button onClick={closeSettings}>
<Icon
src={require('@tabler/icons/arrow-left.svg')}
className='h-6 w-6 text-gray-600 dark:text-gray-400'
className='h-6 w-6 text-gray-600 rtl:rotate-180 dark:text-gray-400'
/>
</button>

2
src/features/chats/components/chat-widget/chat-window.tsx
View file

@ -73,7 +73,7 @@ const ChatWindow = () => {
<button onClick={closeChat}>
<Icon
src={require('@tabler/icons/arrow-left.svg')}
className='h-6 w-6 text-gray-600 dark:text-gray-400'
className='h-6 w-6 text-gray-600 rtl:rotate-180 dark:text-gray-400'
/>
</button>
)}

2
src/features/chats/components/chat-widget/headers/chat-search-header.tsx
View file

@ -27,7 +27,7 @@ const ChatSearchHeader = () => {
>
<Icon
src={require('@tabler/icons/arrow-left.svg')}
className='h-6 w-6 text-gray-600 dark:text-gray-400'
className='h-6 w-6 text-gray-600 rtl:rotate-180 dark:text-gray-400'
/>
</button>

4
src/features/compose/components/reply-indicator.tsx
View file

@ -5,7 +5,7 @@ import AttachmentThumbs from 'soapbox/components/attachment-thumbs';
import Markup from 'soapbox/components/markup';
import { Stack } from 'soapbox/components/ui';
import AccountContainer from 'soapbox/containers/account-container';
import { isRtl } from 'soapbox/rtl';
import { getTextDirection } from 'soapbox/utils/rtl';
import type { Status } from 'soapbox/types/entities';
@ -50,7 +50,7 @@ const ReplyIndicator: React.FC<IReplyIndicator> = ({ className, status, hideActi
className='break-words'
size='sm'
dangerouslySetInnerHTML={{ __html: status.contentHtml }}
direction={isRtl(status.search_index) ? 'rtl' : 'ltr'}
direction={getTextDirection(status.search_index)}
/>
{status.media_attachments.size > 0 && (

2
src/features/groups/discover.tsx
View file

@ -37,7 +37,7 @@ const Discover: React.FC = () => {
{isSearching ? (
<IconButton
src={require('@tabler/icons/arrow-left.svg')}
iconClassName='mr-2 h-5 w-5 fill-current text-gray-600'
iconClassName='mr-2 h-5 w-5 fill-current text-gray-600 rtl:rotate-180'
onClick={cancelSearch}
data-testid='group-search-icon'
/>

38
src/rtl.ts
View file

@ -1,38 +0,0 @@
// U+0590 to U+05FF - Hebrew
// U+0600 to U+06FF - Arabic
// U+0700 to U+074F - Syriac
// U+0750 to U+077F - Arabic Supplement
// U+0780 to U+07BF - Thaana
// U+07C0 to U+07FF - N'Ko
// U+0800 to U+083F - Samaritan
// U+08A0 to U+08FF - Arabic Extended-A
// U+FB1D to U+FB4F - Hebrew presentation forms
// U+FB50 to U+FDFF - Arabic presentation forms A
// U+FE70 to U+FEFF - Arabic presentation forms B
const rtlChars = /[\u0590-\u083F]|[\u08A0-\u08FF]|[\uFB1D-\uFDFF]|[\uFE70-\uFEFF]/mg;
/** Check if text is right-to-left (eg Arabic). */
export function isRtl(text: string): boolean {
if (text.length === 0) {
return false;
}
// Remove http(s), (s)ftp, ws(s), blob and smtp(s) links
text = text.replace(/(?:https?|ftp|sftp|ws|wss|blob|smtp|smtps):\/\/[\S]+/g, '');
// Remove email address links
text = text.replace(/(mailto:)([^\s@]+@[^\s@]+\.[^\s@]+)/g, '');
// Remove Phone numbe links
text = text.replace(/(tel:)([+\d\s()-]+)/g, '');
text = text.replace(/(?:^|[^/\w])@([a-z0-9_]+(@[a-z0-9.-]+)?)/ig, '');
text = text.replace(/(?:^|[^/\w])#([\S]+)/ig, '');
text = text.replace(/\s+/g, '');
const matches = text.match(rtlChars);
if (!matches) {
return false;
}
return matches.length / text.length > 0.3;
}

59
src/utils/rtl.ts Normal file
View file

@ -0,0 +1,59 @@
/** Unicode character ranges for RTL characters. */
const rtlChars = /[\u0590-\u083F]|[\u08A0-\u08FF]|[\uFB1D-\uFDFF]|[\uFE70-\uFEFF]/mg;
/**
* Check if text is right-to-left (eg Arabic).
*
* - U+0590 to U+05FF - Hebrew
* - U+0600 to U+06FF - Arabic
* - U+0700 to U+074F - Syriac
* - U+0750 to U+077F - Arabic Supplement
* - U+0780 to U+07BF - Thaana
* - U+07C0 to U+07FF - N'Ko
* - U+0800 to U+083F - Samaritan
* - U+08A0 to U+08FF - Arabic Extended-A
* - U+FB1D to U+FB4F - Hebrew presentation forms
* - U+FB50 to U+FDFF - Arabic presentation forms A
* - U+FE70 to U+FEFF - Arabic presentation forms B
*/
function isRtl(text: string, confidence = 0.3): boolean {
if (text.length === 0) {
return false;
}
// Remove http(s), (s)ftp, ws(s), blob and smtp(s) links
text = text.replace(/(?:https?|ftp|sftp|ws|wss|blob|smtp|smtps):\/\/[\S]+/g, '');
// Remove email address links
text = text.replace(/(mailto:)([^\s@]+@[^\s@]+\.[^\s@]+)/g, '');
// Remove phone number links
text = text.replace(/(tel:)([+\d\s()-]+)/g, '');
// Remove mentions
text = text.replace(/(?:^|[^/\w])@([a-z0-9_]+(@[a-z0-9.-]+)?)/ig, '');
// Remove hashtags
text = text.replace(/(?:^|[^/\w])#([\S]+)/ig, '');
// Remove all non-word characters
text = text.replace(/\s+/g, '');
const matches = text.match(rtlChars);
if (!matches) {
return false;
}
return matches.length / text.length > confidence;
}
interface GetTextDirectionOpts {
/** The default direction to return if the text is empty. */
fallback?: 'ltr' | 'rtl';
/** The confidence threshold (0-1) to use when determining the direction. */
confidence?: number;
}
/** Get the direction of the text. */
function getTextDirection(text: string, { fallback = 'ltr', confidence }: GetTextDirectionOpts = {}): 'ltr' | 'rtl' {
if (!text) return fallback;
return isRtl(text, confidence) ? 'rtl' : 'ltr';
}
export { getTextDirection, isRtl };