diff --git a/src/components/post-desktop/post-desktop.tsx b/src/components/post-desktop/post-desktop.tsx
index 2d07539c..0d25cc2b 100644
--- a/src/components/post-desktop/post-desktop.tsx
+++ b/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 ? (
{t('user_deleted_this_post')}
) : (
-
+ <>
+
+ {edit && original?.content !== post?.content && (
+
+
+ (Edited at {getFormattedDate(edit?.timestamp)},{' '}
+ {
+ setContent(showOriginal ? post?.content : original?.content);
+ setShowOriginal(!showOriginal);
+ }}
+ >
+ show {showOriginal ? 'edited' : 'original'}
+
+ )
+
+ )}
+ >
)}
{(removed || deleted) && reason && (
diff --git a/src/components/post-mobile/post-mobile.tsx b/src/components/post-mobile/post-mobile.tsx
index 3805e299..a79868e0 100644
--- a/src/components/post-mobile/post-mobile.tsx
+++ b/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 ? (
{t('user_deleted_this_post')}
) : (
-
+ <>
+
+ {edit && original?.content !== post?.content && (
+
+
+ (Edited at {getFormattedDate(edit?.timestamp)},{' '}
+ {
+ setContent(showOriginal ? post?.content : original?.content);
+ setShowOriginal(!showOriginal);
+ }}
+ >
+ show {showOriginal ? 'edited' : 'original'}
+
+ )
+
+ )}
+ >
)}
{(removed || deleted) && reason && (
diff --git a/src/views/post/post.module.css b/src/views/post/post.module.css
index eb1f26fb..b4a4f564 100644
--- a/src/views/post/post.module.css
+++ b/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;