Fixed #525

HTML is removed. In this way, if a URL is changed, it can be highlighted as well

src/screens/Tabs/Shared/History.tsx

@@ -4,44 +4,86 @@ import { ParseEmojis } from '@components/Parse'
 import ComponentSeparator from '@components/Separator'
 import CustomText from '@components/Text'
 import TimelineAttachment from '@components/Timeline/Shared/Attachment'
-import TimelineContent from '@components/Timeline/Shared/Content'
 import StatusContext from '@components/Timeline/Shared/Context'
 import HeaderSharedCreated from '@components/Timeline/Shared/HeaderShared/Created'
+import removeHTML from '@helpers/removeHTML'
 import { TabSharedStackScreenProps } from '@utils/navigation/navigators'
 import { useStatusHistory } from '@utils/queryHooks/statusesHistory'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
+import { diffWords } from 'diff'
 import React, { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { FlatList, View } from 'react-native'
 
-const ContentView: React.FC<{ item: Mastodon.StatusHistory }> = ({ item }) => {
+const ContentView: React.FC<{
+  item: Mastodon.StatusHistory
+  prevItem?: Mastodon.StatusHistory
+}> = ({ item, prevItem }) => {
   const { colors } = useTheme()
 
+  const changesSpoiler = diffWords(
+    removeHTML(prevItem?.spoiler_text || item.spoiler_text || ''),
+    removeHTML(item.spoiler_text || '')
+  )
+  const changesContent = diffWords(
+    removeHTML(prevItem?.content || item.content),
+    removeHTML(item.content)
+  )
+
   return (
     // @ts-ignore
     <StatusContext.Provider value={{ status: item, disableOnPress: true }}>
-      <HeaderSharedCreated created_at={item.created_at} />
-      <TimelineContent />
-      {item.poll?.options.map((option, index) => (
-        <View key={index} style={{ flex: 1, paddingVertical: StyleConstants.Spacing.XS }}>
-          <View style={{ flex: 1, flexDirection: 'row' }}>
-            <Icon
+      <View style={{ padding: StyleConstants.Spacing.Global.PagePadding }}>
+        <HeaderSharedCreated created_at={item.created_at} />
+        {changesSpoiler.length && changesSpoiler[0].count ? (
+          <CustomText fontSize='M' style={{ color: colors.primaryDefault }}>
+            {changesSpoiler.map(({ value, added, removed }, index) => (
+              <ParseEmojis
+                key={index}
+                content={value}
+                emojis={item.emojis}
+                style={{
+                  color: added ? colors.green : removed ? colors.red : undefined,
+                  textDecorationLine: removed ? 'line-through' : undefined
+                }}
+              />
+            ))}
+          </CustomText>
+        ) : null}
+        <CustomText fontSize='M' style={{ color: colors.primaryDefault }}>
+          {changesContent.map(({ value, added, removed }, index) => (
+            <ParseEmojis
+              key={index}
+              content={value}
+              emojis={item.emojis}
               style={{
-                paddingTop: StyleConstants.Font.LineHeight.M - StyleConstants.Font.Size.M,
-                marginRight: StyleConstants.Spacing.S
+                color: added ? colors.green : removed ? colors.red : undefined,
+                textDecorationLine: removed ? 'line-through' : undefined
               }}
-              name='Circle'
-              size={StyleConstants.Font.Size.M}
-              color={colors.disabled}
             />
-            <CustomText style={{ flex: 1 }}>
-              <ParseEmojis content={option.title} emojis={item.poll?.emojis} />
-            </CustomText>
+          ))}
+        </CustomText>
+        {item.poll?.options.map((option, index) => (
+          <View key={index} style={{ flex: 1, paddingVertical: StyleConstants.Spacing.XS }}>
+            <View style={{ flex: 1, flexDirection: 'row' }}>
+              <Icon
+                style={{
+                  paddingTop: StyleConstants.Font.LineHeight.M - StyleConstants.Font.Size.M,
+                  marginRight: StyleConstants.Spacing.S
+                }}
+                name='Circle'
+                size={StyleConstants.Font.Size.M}
+                color={colors.disabled}
+              />
+              <CustomText style={{ flex: 1 }}>
+                <ParseEmojis content={option.title} emojis={item.poll?.emojis} />
+              </CustomText>
+            </View>
           </View>
-        </View>
-      ))}
-      <TimelineAttachment />
+        ))}
+        <TimelineAttachment />
+      </View>
     </StatusContext.Provider>
   )
 }
@@ -62,41 +104,18 @@ const TabSharedHistory: React.FC<TabSharedStackScreenProps<'Tab-Shared-History'>
     })
   }, [])
 
+  const dataReversed = data ? [...data].reverse() : []
+
   return (
     <FlatList
-      style={{ flex: 1, minHeight: '100%', padding: StyleConstants.Spacing.Global.PagePadding }}
-      data={
-        data && data.length > 0
-          ? data
-              .slice(0)
-              .reverse()
-              .filter((_, index) => index !== 0)
-          : []
-      }
-      renderItem={({ item }) => <ContentView item={item} />}
-      ItemSeparatorComponent={() => (
-        <ComponentSeparator
-          extraMarginLeft={0}
-          style={{ marginVertical: StyleConstants.Spacing.Global.PagePadding }}
-        />
+      style={{ flex: 1, minHeight: '100%' }}
+      data={dataReversed}
+      renderItem={({ item, index }) => (
+        <ContentView item={item} prevItem={dataReversed[index + 1]} />
       )}
+      ItemSeparatorComponent={ComponentSeparator}
     />
   )
-
-  // return (
-  //   <ScrollView>
-  //     {data && data.length > 0
-  //       ? data
-  //           .slice(0)
-  //           .reverse()
-  //           .map((d, i) =>
-  //             i !== 0 ? (
-  //               <ContentView key={i} history={d} first={i === 1} last={i === data.length - 1} />
-  //             ) : null
-  //           )
-  //       : null}
-  //   </ScrollView>
-  // )
 }
 
 export default TabSharedHistory