feat(post): add "show original" button to content edit

src/components/post-desktop/post-desktop.tsx

@@ -22,6 +22,7 @@ import ReplyQuotePreview from '../reply-quote-preview';
 import { PostProps } from '../../views/post/post';
 import Timestamp from '../timestamp';
 import _ from 'lodash';
+import { getFormattedDate } from '../../lib/utils/time-utils';
 
 const PostInfo = ({ openReplyModal, post, roles, isHidden }: PostProps) => {
   const { t } = useTranslation();
@@ -162,11 +163,13 @@ const PostMedia = ({ post }: PostProps) => {
 };
 
 const PostMessage = ({ post }: PostProps) => {
-  const { cid, content, deleted, parentCid, postCid, reason, removed, spoiler, state, subplebbitAddress } = post || {};
+  const { cid, deleted, edit, original, parentCid, postCid, reason, removed, spoiler, state, subplebbitAddress } = post || {};
   const { t } = useTranslation();
   const params = useParams();
   const location = useLocation();
   const isInPostView = isPostPageView(location.pathname, params);
+  const [content, setContent] = useState(post?.content);
+  const [showOriginal, setShowOriginal] = useState(false);
 
   const displayContent = content && !isInPostView && content.length > 1000 ? content?.slice(0, 1000) + '(...)' : content;
 
@@ -189,7 +192,25 @@ const PostMessage = ({ post }: PostProps) => {
       ) : deleted ? (
         <span className={styles.deletedContent}>{t('user_deleted_this_post')}</span>
       ) : (
-        <Markdown content={displayContent} spoiler={spoiler} />
+        <>
+          <Markdown content={displayContent} spoiler={spoiler} />
+          {edit && original?.content !== post?.content && (
+            <span className={styles.editedInfo}>
+              <br />
+              (Edited at {getFormattedDate(edit?.timestamp)},{' '}
+              <span
+                className={styles.showOriginal}
+                onClick={() => {
+                  setContent(showOriginal ? post?.content : original?.content);
+                  setShowOriginal(!showOriginal);
+                }}
+              >
+                show {showOriginal ? 'edited' : 'original'}
+              </span>
+              )
+            </span>
+          )}
+        </>
       )}
       {(removed || deleted) && reason && (
         <span>

src/components/post-mobile/post-mobile.tsx

@@ -5,6 +5,7 @@ import { Comment, useAccount, useComment } from '@plebbit/plebbit-react-hooks';
 import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
 import styles from '../../views/post/post.module.css';
 import { getCommentMediaInfo, getHasThumbnail } from '../../lib/utils/media-utils';
+import { getFormattedDate } from '../../lib/utils/time-utils';
 import { isAllView, isPendingPostView, isPostPageView, isSubscriptionsView } from '../../lib/utils/view-utils';
 import useCountLinksInReplies from '../../hooks/use-count-links-in-replies';
 import useHide from '../../hooks/use-hide';
@@ -118,7 +119,9 @@ const ReplyBacklinks = ({ post }: PostProps) => {
 
 const PostMessageMobile = ({ post }: PostProps) => {
   const { t } = useTranslation();
-  const { cid, content, deleted, parentCid, postCid, reason, removed, spoiler, state, subplebbitAddress } = post || {};
+  const { cid, deleted, edit, original, parentCid, postCid, reason, removed, spoiler, state, subplebbitAddress } = post || {};
+  const [content, setContent] = useState(post?.content);
+  const [showOriginal, setShowOriginal] = useState(false);
 
   const params = useParams();
   const location = useLocation();
@@ -146,7 +149,25 @@ const PostMessageMobile = ({ post }: PostProps) => {
         ) : deleted ? (
           <span className={styles.removedContent}>{t('user_deleted_this_post')}</span>
         ) : (
-          <Markdown content={displayContent} spoiler={spoiler} />
+          <>
+            <Markdown content={displayContent} spoiler={spoiler} />
+            {edit && original?.content !== post?.content && (
+              <span className={styles.editedInfo}>
+                <br />
+                (Edited at {getFormattedDate(edit?.timestamp)},{' '}
+                <span
+                  className={styles.showOriginal}
+                  onClick={() => {
+                    setContent(showOriginal ? post?.content : original?.content);
+                    setShowOriginal(!showOriginal);
+                  }}
+                >
+                  show {showOriginal ? 'edited' : 'original'}
+                </span>
+                )
+              </span>
+            )}
+          </>
         )}
         {(removed || deleted) && reason && (
           <span>

src/views/post/post.module.css

@@ -462,6 +462,21 @@
   padding: 1.5px 0;
 }
 
+.editedInfo {
+  color: var(--post-mobile-abbr-text-color);
+}
+
+.showOriginal {
+  color: var(--post-link-text-color);
+  text-decoration: var(--post-content-link-text-decoration);
+}
+
+.showOriginal:hover {
+  cursor: pointer;
+  color: var(--post-link-text-color-hover);
+  text-decoration: var(--post-content-link-text-decoration-hover);
+}
+
 @media (max-width: 640px) {
   .replyQuotePreview {
     margin-right: 10px;