octo/tooot
1
0
Fork 0
mirror of https://github.com/tooot-app/app synced 2025-06-05 22:19:13 +02:00
Code Issues Projects Releases Wiki Activity

Fix #631

Browse Source
This commit is contained in:
xmflsct
2022-12-31 02:06:19 +01:00
parent 4a25feb346
commit 7ccfdc7562
7 changed files with 93 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
src/components/Parse/HTML.tsx
View File

@ -1,6 +1,7 @@
import Icon from '@components/Icon'
import openLink from '@components/openLink'
import ParseEmojis from '@components/Parse/Emojis'
import StatusContext from '@components/Timeline/Shared/Context'
import { useNavigation, useRoute } from '@react-navigation/native'
import { StackNavigationProp } from '@react-navigation/stack'
import { TabLocalStackParamList } from '@utils/navigation/navigators'
@ -11,43 +12,38 @@ import { adaptiveScale } from '@utils/styles/scaling'
import { useTheme } from '@utils/styles/ThemeManager'
import { ChildNode } from 'domhandler'
import { ElementType, parseDocument } from 'htmlparser2'
import React, { useState } from 'react'
import i18next from 'i18next'
import React, { useContext, useRef, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { Pressable, Text, TextStyleIOS, View } from 'react-native'
import { Platform, Pressable, Text, TextStyleIOS, View } from 'react-native'
export interface Props {
content: string
size?: 'S' | 'M' | 'L'
textStyles?: TextStyleIOS
adaptiveSize?: boolean
emojis?: Mastodon.Emoji[]
mentions?: Mastodon.Mention[]
tags?: Mastodon.Tag[]
showFullLink?: boolean
numberOfLines?: number
expandHint?: string
highlighted?: boolean
disableDetails?: boolean
selectable?: boolean
setSpoilerExpanded?: React.Dispatch<React.SetStateAction<boolean>>
emojis?: Mastodon.Emoji[]
mentions?: Mastodon.Mention[]
}
const ParseHTML: React.FC<Props> = ({
content,
size = 'M',
textStyles,
adaptiveSize = false,
emojis,
mentions,
tags,
showFullLink = false,
numberOfLines = 10,
expandHint,
highlighted = false,
disableDetails = false,
selectable = false,
setSpoilerExpanded
setSpoilerExpanded,
emojis,
mentions
}) => {
const { status, highlighted, disableDetails, excludeMentions } = useContext(StatusContext)
const [adaptiveFontsize] = useGlobalStorage.number('app.font_size')
const adaptedFontsize = adaptiveScale(
StyleConstants.Font.Size[size],
@ -91,14 +87,16 @@ const ParseHTML: React.FC<Props> = ({
return ''
}
}
const startingOfText = useRef<boolean>(false)
const renderNode = (node: ChildNode, index: number) => {
switch (node.type) {
case ElementType.Text:
node.data.trim().length && (startingOfText.current = true) // Removing empty spaces appeared between tags and mentions
return (
<ParseEmojis
key={index}
content={node.data}
emojis={emojis}
content={node.data.replace(new RegExp(/^\s+/), '')}
emojis={status?.emojis || emojis}
size={size}
adaptiveSize={adaptiveSize}
/>
@ -138,19 +136,28 @@ const ParseHTML: React.FC<Props> = ({
/>
)
}
if (classes.includes('mention') && mentions?.length) {
const mentionIndex = mentions.findIndex(mention => mention.url === href)
if (classes.includes('mention') && (status?.mentions?.length || mentions?.length)) {
const matchedMention = (status?.mentions || mentions || []).find(
mention => mention.url === href
)
if (
matchedMention &&
!startingOfText.current &&
excludeMentions?.current.find(eM => eM.id === matchedMention.id)
) {
return null
}
const paramsAccount = (params as { account: Mastodon.Account } | undefined)?.account
const sameAccount = paramsAccount?.id === mentions[mentionIndex]?.id
const sameAccount = paramsAccount?.id === matchedMention?.id
return (
<Text
key={index}
style={{ color: mentionIndex > -1 ? colors.blue : undefined }}
style={{ color: matchedMention ? colors.blue : undefined }}
onPress={() =>
mentionIndex > -1 &&
matchedMention &&
!disableDetails &&
!sameAccount &&
navigation.push('Tab-Shared-Account', { account: mentions[mentionIndex] })
navigation.push('Tab-Shared-Account', { account: matchedMention })
}
children={node.children.map(unwrapNode).join('')}
/>
@ -159,7 +166,7 @@ const ParseHTML: React.FC<Props> = ({
}
const content = node.children.map(child => unwrapNode(child)).join('')
const shouldBeTag = tags && tags.find(tag => `#${tag.name}` === content)
const shouldBeTag = status?.tags?.find(tag => `#${tag.name}` === content)
return (
<Text
key={index}
@ -249,7 +256,10 @@ const ParseHTML: React.FC<Props> = ({
style={{
fontSize: adaptedFontsize,
lineHeight: adaptedLineheight,
...textStyles,
...(Platform.OS === 'ios' &&
status?.language &&
i18next.dir(status.language) === 'rtl' &&
({ writingDirection: 'rtl' } as { writingDirection: 'rtl' })),
height: numberOfLines === 1 && !expanded ? 0 : undefined
}}
numberOfLines={

4
src/components/Timeline/Default.tsx
View File

@ -51,7 +51,7 @@ const TimelineDefault: React.FC<Props> = ({
}) => {
const status = item.reblog ? item.reblog : item
const rawContent = useRef<string[]>([])
if (highlighted) {
if (highlighted || isConversation) {
rawContent.current = [
removeHTML(status.content),
status.spoiler_text ? removeHTML(status.spoiler_text) : ''
@ -72,6 +72,7 @@ const TimelineDefault: React.FC<Props> = ({
? !preferences?.['reading:expand:spoilers'] && !spoilerExpanded
: false
const detectedLanguage = useRef<string>(status.language || '')
const excludeMentions = useRef<Mastodon.Mention[]>([])
const mainStyle: StyleProp<ViewStyle> = {
flex: 1,
@ -169,6 +170,7 @@ const TimelineDefault: React.FC<Props> = ({
spoilerHidden,
rawContent,
detectedLanguage,
excludeMentions,
highlighted,
inThread: queryKey?.[1].page === 'Toot',
disableDetails,

25
src/components/Timeline/Shared/Content.tsx
View File

@ -3,10 +3,9 @@ import CustomText from '@components/Text'
import { usePreferencesQuery } from '@utils/queryHooks/preferences'
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
import i18next from 'i18next'
import React, { useContext } from 'react'
import { useTranslation } from 'react-i18next'
import { Platform, View } from 'react-native'
import { View } from 'react-native'
import StatusContext from './Context'
export interface Props {
@ -23,11 +22,6 @@ const TimelineContent: React.FC<Props> = ({ notificationOwnToot = false, setSpoi
const { data: preferences } = usePreferencesQuery()
const isRTLiOSTextStyles =
Platform.OS === 'ios' && status.language && i18next.dir(status.language) === 'rtl'
? ({ writingDirection: 'rtl' } as { writingDirection: 'rtl' })
: undefined
return (
<View>
{status.spoiler_text?.length ? (
@ -36,13 +30,7 @@ const TimelineContent: React.FC<Props> = ({ notificationOwnToot = false, setSpoi
content={status.spoiler_text}
size={highlighted ? 'L' : 'M'}
adaptiveSize
emojis={status.emojis}
mentions={status.mentions}
tags={status.tags}
numberOfLines={999}
highlighted={highlighted}
disableDetails={disableDetails}
textStyles={isRTLiOSTextStyles}
/>
{inThread ? (
<CustomText
@ -60,9 +48,6 @@ const TimelineContent: React.FC<Props> = ({ notificationOwnToot = false, setSpoi
content={status.content}
size={highlighted ? 'L' : 'M'}
adaptiveSize
emojis={status.emojis}
mentions={status.mentions}
tags={status.tags}
numberOfLines={
preferences?.['reading:expand:spoilers'] || inThread
? notificationOwnToot
@ -72,9 +57,6 @@ const TimelineContent: React.FC<Props> = ({ notificationOwnToot = false, setSpoi
}
expandHint={t('shared.content.expandHint')}
setSpoilerExpanded={setSpoilerExpanded}
highlighted={highlighted}
disableDetails={disableDetails}
textStyles={isRTLiOSTextStyles}
/>
</>
) : (
@ -82,12 +64,7 @@ const TimelineContent: React.FC<Props> = ({ notificationOwnToot = false, setSpoi
content={status.content}
size={highlighted ? 'L' : 'M'}
adaptiveSize
emojis={status.emojis}
mentions={status.mentions}
tags={status.tags}
numberOfLines={highlighted || inThread ? 999 : notificationOwnToot ? 2 : undefined}
disableDetails={disableDetails}
textStyles={isRTLiOSTextStyles}
/>
)}
</View>

1
src/components/Timeline/Shared/Context.tsx
View File

@ -14,6 +14,7 @@ type StatusContextType = {
spoilerHidden?: boolean
rawContent?: React.MutableRefObject<string[]> // When highlighted, for translate, edit history
detectedLanguage?: React.MutableRefObject<string>
excludeMentions?: React.MutableRefObject<Mastodon.Mention[]>
highlighted?: boolean
inThread?: boolean

2
src/components/Timeline/Shared/HeaderDefault.tsx
View File

@ -13,6 +13,7 @@ import HeaderSharedAccount from './HeaderShared/Account'
import HeaderSharedApplication from './HeaderShared/Application'
import HeaderSharedCreated from './HeaderShared/Created'
import HeaderSharedMuted from './HeaderShared/Muted'
import HeaderSharedReplies from './HeaderShared/Replies'
import HeaderSharedVisibility from './HeaderShared/Visibility'
const TimelineHeaderDefault: React.FC = () => {
@ -64,6 +65,7 @@ const TimelineHeaderDefault: React.FC = () => {
/>
<HeaderSharedVisibility visibility={status.visibility} />
<HeaderSharedMuted muted={status.muted} />
<HeaderSharedReplies />
<HeaderSharedApplication application={status.application} />
</View>
</View>

50
src/components/Timeline/Shared/HeaderShared/Replies.tsx Normal file
View File

@ -0,0 +1,50 @@
import CustomText from '@components/Text'
import { useNavigation } from '@react-navigation/native'
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
import React, { Fragment, useContext } from 'react'
import { useTranslation } from 'react-i18next'
import StatusContext from '../Context'
const HeaderSharedReplies: React.FC = () => {
const { status, rawContent, excludeMentions, isConversation } = useContext(StatusContext)
if (!isConversation) return null
const navigation = useNavigation<any>()
const { t } = useTranslation('componentTimeline')
const { colors } = useTheme()
const mentionsBeginning = rawContent?.current?.[0]
.match(new RegExp(/^(?:@\S+\s+)+/))?.[0]
?.match(new RegExp(/@\S+/, 'g'))
excludeMentions &&
(excludeMentions.current =
mentionsBeginning?.length && status?.mentions
? status.mentions.filter(mention => mentionsBeginning.includes(`@${mention.username}`))
: [])
return excludeMentions?.current.length ? (
<CustomText
fontStyle='S'
style={{
marginLeft: StyleConstants.Spacing.S,
flexDirection: 'row',
color: colors.secondary
}}
>
Replies
{excludeMentions.current.map((mention, index) => (
<Fragment key={index}>
{' '}
<CustomText
style={{ color: colors.blue, paddingLeft: StyleConstants.Spacing.S }}
children={`@${mention.username}`}
onPress={() => navigation.push('Tab-Shared-Account', { account: mention })}
/>
</Fragment>
))}
</CustomText>
) : null
}
export default HeaderSharedReplies

2
src/utils/helpers/removeHTML.ts
View File

@ -15,7 +15,7 @@ const removeHTML = (text: string): string => {
parser.write(text)
parser.end()
return raw
return raw.replace(new RegExp(/\s$/), '')
}
export default removeHTML