Fix bugs

src/components/Parse/HTML.tsx

@@ -15,7 +15,7 @@ import { ElementType, parseDocument } from 'htmlparser2'
 import i18next from 'i18next'
 import React, { useContext, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Platform, Pressable, Text, TextStyleIOS, View } from 'react-native'
+import { Platform, Pressable, Text, View } from 'react-native'
 
 export interface Props {
   content: string
@@ -78,8 +78,8 @@ const ParseHTML: React.FC<Props> = ({
         return node.data
       case ElementType.Tag:
         if (node.name === 'span') {
-          if (node.attribs.class?.includes('invisible')) return ''
-          if (node.attribs.class?.includes('ellipsis'))
+          if (node.attribs.class?.includes('invisible') && !showFullLink) return ''
+          if (node.attribs.class?.includes('ellipsis') && !showFullLink)
             return node.children.map(child => unwrapNode(child)).join('') + '...'
         }
         return node.children.map(child => unwrapNode(child)).join('')
@@ -87,15 +87,26 @@ const ParseHTML: React.FC<Props> = ({
         return ''
     }
   }
-  const startingOfText = useRef<boolean>(false)
+  const openingMentions = useRef<boolean>(true)
   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
+        let content: string = node.data
+        if (openingMentions.current) {
+          if (node.data.trim().length) {
+            openingMentions.current = false // Removing empty spaces appeared between tags and mentions
+            content = excludeMentions?.current.length
+              ? node.data.replace(new RegExp(/^\s+/), '')
+              : node.data
+          } else {
+            content = node.data.trim()
+          }
+        }
+
         return (
           <ParseEmojis
             key={index}
-            content={node.data.replace(new RegExp(/^\s+/), '')}
+            content={content}
             emojis={status?.emojis || emojis}
             size={size}
             adaptiveSize={adaptiveSize}
@@ -108,6 +119,7 @@ const ParseHTML: React.FC<Props> = ({
             const href = node.attribs.href
             if (classes) {
               if (classes.includes('hashtag')) {
+                openingMentions.current = false
                 const tag = href.match(new RegExp(/\/tags?\/(.*)/, 'i'))?.[1].toLowerCase()
                 const paramsHashtag = (params as { hashtag: Mastodon.Tag['name'] } | undefined)
                   ?.hashtag
@@ -142,7 +154,6 @@ const ParseHTML: React.FC<Props> = ({
                 )
                 if (
                   matchedMention &&
-                  !startingOfText.current &&
                   excludeMentions?.current.find(eM => eM.id === matchedMention.id)
                 ) {
                   return null
@@ -165,6 +176,7 @@ const ParseHTML: React.FC<Props> = ({
               }
             }
 
+            openingMentions.current = false
             const content = node.children.map(child => unwrapNode(child)).join('')
             const shouldBeTag = status?.tags?.find(tag => `#${tag.name}` === content)
             return (
@@ -182,7 +194,7 @@ const ParseHTML: React.FC<Props> = ({
                     }
                   }
                 }}
-                children={content !== href ? content : showFullLink ? href : content}
+                children={content}
               />
             )
             break

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

@@ -3,7 +3,7 @@ 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 { Trans, useTranslation } from 'react-i18next'
 import StatusContext from '../Context'
 
 const HeaderSharedReplies: React.FC = () => {
@@ -11,7 +11,7 @@ const HeaderSharedReplies: React.FC = () => {
   if (!isConversation) return null
 
   const navigation = useNavigation<any>()
-  const { t } = useTranslation('componentTimeline')
+  const { t } = useTranslation(['common', 'componentTimeline'])
   const { colors } = useTheme()
 
   const mentionsBeginning = rawContent?.current?.[0]
@@ -26,25 +26,27 @@ const HeaderSharedReplies: React.FC = () => {
   return excludeMentions?.current.length ? (
     <CustomText
       fontStyle='S'
-      style={{
-        marginLeft: StyleConstants.Spacing.S,
-        flexDirection: 'row',
-        color: colors.secondary
-      }}
+      style={{ flex: 1, marginLeft: StyleConstants.Spacing.S, color: colors.secondary }}
+      numberOfLines={1}
     >
-      <>
-        {t('shared.header.shared.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>
-        ))}
-      </>
+      <Trans
+        ns='componentTimeline'
+        i18nKey='shared.header.shared.replies'
+        components={[
+          <>
+            {excludeMentions.current.map((mention, index) => (
+              <Fragment key={index}>
+                {index > 0 ? t('common:separator') : null}
+                <CustomText
+                  style={{ color: colors.blue, paddingLeft: StyleConstants.Spacing.S }}
+                  children={`@${mention.username}`}
+                  onPress={() => navigation.push('Tab-Shared-Account', { account: mention })}
+                />
+              </Fragment>
+            ))}
+          </>
+        ]}
+      />
     </CustomText>
   ) : null
 }