Fix #631

src/components/Parse/HTML.tsx

@@ -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}
+            content={node.data.replace(new RegExp(/^\s+/), '')}
-            emojis={emojis}
+            emojis={status?.emojis || emojis}
             size={size}
             adaptiveSize={adaptiveSize}
           />
@@ -138,19 +136,28 @@ const ParseHTML: React.FC<Props> = ({
                   />
                 )
               }
-              if (classes.includes('mention') && mentions?.length) {
+              if (classes.includes('mention') && (status?.mentions?.length || mentions?.length)) {
-                const mentionIndex = mentions.findIndex(mention => mention.url === href)
+                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={

src/components/Timeline/Default.tsx

@@ -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,

src/components/Timeline/Shared/Content.tsx

@@ -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>

src/components/Timeline/Shared/Context.tsx

@@ -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

src/components/Timeline/Shared/HeaderDefault.tsx

@@ -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>

src/components/Timeline/Shared/HeaderShared/Replies.tsx

@@ -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

src/utils/helpers/removeHTML.ts

@@ -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