Development

src/components/comment-edit-form/comment-edit-form.tsx

@@ -34,7 +34,7 @@ const CommentEditForm = ({ commentCid, hideCommentEditForm }: CommentEditFormPro
   const defaultPublishOptions: PublishCommentEditOptions = {
     commentCid,
     content,
-    edit: { reason: edit?.reason },
+    reason: edit?.reason ?? '',
     spoiler,
     subplebbitAddress,
     onChallenge: (...args: any) => addChallenge([...args, post]),
@@ -82,8 +82,8 @@ const CommentEditForm = ({ commentCid, hideCommentEditForm }: CommentEditFormPro
           {t('edit_reason')}:{' '}
           <input
             className={styles.url}
-            value={publishCommentEditOptions.edit?.reason}
-            onChange={(e) => setPublishCommentEditOptions((state) => ({ ...state, edit: { reason: e.target.value } }))}
+            value={publishCommentEditOptions.reason}
+            onChange={(e) => setPublishCommentEditOptions((state) => ({ ...state, reason: e.target.value }))}
           />
         </span>
         <span className={styles.optionsButton} onClick={() => setShowFormattingHelp(!showFormattingHelp)}>

src/components/markdown/markdown.module.css

@@ -5,11 +5,13 @@
 .markdown ol {
   padding-left: 40px;
   white-space: normal;
+  padding-bottom: 5px;
 }
 
 .markdown ul {
   padding-left: 40px;
   white-space: normal;
+  padding-bottom: 5px;
 }
 
 .markdown blockquote {

src/components/markdown/markdown.tsx

@@ -24,6 +24,11 @@ const Markdown = ({ content }: MarkdownProps) => {
         remarkPlugins={remarkPlugins}
         rehypePlugins={[[rehypeSanitize]]}
         components={{
+          a: ({ children, href }) => (
+            <a href={href} target='_blank' rel='noopener noreferrer'>
+              {children}
+            </a>
+          ),
           img: ({ src }) => <span>{src}</span>,
           video: ({ src }) => <span>{src}</span>,
           iframe: ({ src }) => <span>{src}</span>,

src/components/post/comment-tools/comment-tools.tsx

@@ -263,67 +263,69 @@ const CommentTools = ({
   const isInInboxView = isInboxView(useLocation().pathname);
 
   return (
-    <ul className={`${styles.buttons} ${isReply && !isInInboxView ? styles.buttonsReply : ''} ${hasLabel ? styles.buttonsLabel : ''}`}>
-      {isReply ? (
-        isSingleReply ? (
-          <SingleReplyTools
-            author={author}
-            cid={cid}
-            failed={failed}
-            hasLabel={hasLabel}
-            index={index}
-            isAuthor={isAuthor}
-            isAccountMod={isAccountMod}
-            isCommentAuthorMod={isCommentAuthorMod}
-            parentCid={parentCid}
-            postCid={postCid}
-            showCommentEditForm={showCommentEditForm}
-            showReplyForm={showReplyForm}
-            subplebbitAddress={subplebbitAddress}
-          />
+    (!(deleted || removed) || ((deleted || removed) && (isAuthor || isAccountMod))) && (
+      <ul className={`${styles.buttons} ${isReply && !isInInboxView ? styles.buttonsReply : ''} ${hasLabel ? styles.buttonsLabel : ''}`}>
+        {isReply ? (
+          isSingleReply ? (
+            <SingleReplyTools
+              author={author}
+              cid={cid}
+              failed={failed}
+              hasLabel={hasLabel}
+              index={index}
+              isAuthor={isAuthor}
+              isAccountMod={isAccountMod}
+              isCommentAuthorMod={isCommentAuthorMod}
+              parentCid={parentCid}
+              postCid={postCid}
+              showCommentEditForm={showCommentEditForm}
+              showReplyForm={showReplyForm}
+              subplebbitAddress={subplebbitAddress}
+            />
+          ) : (
+            <ReplyTools
+              author={author}
+              cid={cid}
+              failed={failed}
+              hasLabel={hasLabel}
+              index={index}
+              isAuthor={isAuthor}
+              isAccountMod={isAccountMod}
+              isCommentAuthorMod={isCommentAuthorMod}
+              showCommentEditForm={showCommentEditForm}
+              showReplyForm={showReplyForm}
+              subplebbitAddress={subplebbitAddress}
+            />
+          )
         ) : (
-          <ReplyTools
-            author={author}
-            cid={cid}
-            failed={failed}
-            hasLabel={hasLabel}
-            index={index}
-            isAuthor={isAuthor}
-            isAccountMod={isAccountMod}
-            isCommentAuthorMod={isCommentAuthorMod}
-            showCommentEditForm={showCommentEditForm}
-            showReplyForm={showReplyForm}
-            subplebbitAddress={subplebbitAddress}
-          />
-        )
-      ) : (
-        <>
-          <CommentToolsLabel
-            cid={cid}
-            deleted={deleted}
-            failed={failed}
-            editState={editState}
-            isReply={isReply}
-            removed={removed}
-            spoiler={spoiler}
-            subplebbitAddress={subplebbitAddress}
-          />
-          <PostTools
-            author={author}
-            cid={cid}
-            failed={failed}
-            hasLabel={hasLabel}
-            index={index}
-            isAuthor={isAuthor}
-            isAccountMod={isAccountMod}
-            isCommentAuthorMod={isCommentAuthorMod}
-            replyCount={replyCount}
-            showCommentEditForm={showCommentEditForm}
-            subplebbitAddress={subplebbitAddress}
-          />
-        </>
-      )}
-    </ul>
+          <>
+            <CommentToolsLabel
+              cid={cid}
+              deleted={deleted}
+              failed={failed}
+              editState={editState}
+              isReply={isReply}
+              removed={removed}
+              spoiler={spoiler}
+              subplebbitAddress={subplebbitAddress}
+            />
+            <PostTools
+              author={author}
+              cid={cid}
+              failed={failed}
+              hasLabel={hasLabel}
+              index={index}
+              isAuthor={isAuthor}
+              isAccountMod={isAccountMod}
+              isCommentAuthorMod={isCommentAuthorMod}
+              replyCount={replyCount}
+              showCommentEditForm={showCommentEditForm}
+              subplebbitAddress={subplebbitAddress}
+            />
+          </>
+        )}
+      </ul>
+    )
   );
 };
 

src/components/post/post.tsx

@@ -70,6 +70,33 @@ interface PostProps {
   post: Comment | undefined;
 }
 
+const ThumbnailLoader = ({ post }: PostProps) => {
+  const { cid } = post || {};
+  // Reset state by remounting component when post changes
+  return useThumbnailContent(cid, post);
+};
+
+const useThumbnailContent = (key: string, post: any) => {
+  const [commentMediaInfo, setCommentMediaInfo] = useState<CommentMediaInfo | undefined>();
+
+  useEffect(() => {
+    const loadThumbnail = async () => {
+      const initialInfo = getCommentMediaInfo(post);
+      // some sites have CORS access, so the thumbnail can be fetched client-side, which is helpful if subplebbit.settings.fetchThumbnailUrls is false
+      if (initialInfo?.type === 'webpage' && !initialInfo.thumbnail) {
+        const newMediaInfo = await fetchWebpageThumbnailIfNeeded(initialInfo);
+        setCommentMediaInfo(newMediaInfo);
+      } else {
+        setCommentMediaInfo(initialInfo);
+      }
+    };
+
+    loadThumbnail();
+  }, [post]);
+
+  return commentMediaInfo;
+};
+
 const Post = ({ index, post = {} }: PostProps) => {
   // handle single comment thread
   const op = useComment({ commentCid: post?.parentCid ? post?.postCid : '' });
@@ -120,26 +147,7 @@ const Post = ({ index, post = {} }: PostProps) => {
   const isInProfileHiddenView = isProfileHiddenView(location.pathname);
   const isInSubplebbitView = isSubplebbitView(location.pathname, params);
 
-  // some sites have CORS access, so the thumbnail can be fetched client-side, which is helpful if subplebbit.settings.fetchThumbnailUrls is false
-  const [commentMediaInfo, setCommentMediaInfo] = useState<CommentMediaInfo | undefined>();
-
-  useEffect(() => {
-    const loadThumbnail = async () => {
-      const initialInfo = getCommentMediaInfo(post);
-
-      if (initialInfo?.type === 'webpage' && !initialInfo.thumbnail) {
-        const newMediaInfo = await fetchWebpageThumbnailIfNeeded(initialInfo);
-        setCommentMediaInfo(newMediaInfo);
-      } else {
-        setCommentMediaInfo(initialInfo);
-      }
-    };
-
-    loadThumbnail();
-    return () => {
-      setCommentMediaInfo(undefined);
-    };
-  }, [post]);
+  const commentMediaInfo = ThumbnailLoader({ post });
 
   const [isExpanded, setIsExpanded] = useState(isInPostView);
   const toggleExpanded = () => setIsExpanded(!isExpanded);

src/components/post/thumbnail/thumbnail.tsx

@@ -18,7 +18,6 @@ interface ThumbnailProps {
 const Thumbnail = ({ cid, commentMediaInfo, expanded = false, isReply = false, link, linkHeight, linkWidth, subplebbitAddress, toggleExpanded }: ThumbnailProps) => {
   const iframeThumbnail = commentMediaInfo?.patternThumbnailUrl || commentMediaInfo?.thumbnail;
   let displayWidth, displayHeight, hasLinkDimensions;
-  const routeOrLink = isReply || commentMediaInfo?.type === 'webpage' ? link : `/p/${subplebbitAddress}/c/${cid}`;
   const thumbnailClass = expanded ? styles.thumbnailHidden : styles.thumbnailVisible;
 
   if (linkWidth && linkHeight) {
@@ -52,17 +51,23 @@ const Thumbnail = ({ cid, commentMediaInfo, expanded = false, isReply = false, l
   return (
     <span className={`${styles.thumbnail} ${thumbnailClass}`} style={style}>
       <span className={hasLinkDimensions ? styles.transparentThumbnailWrapper : styles.thumbnailWrapper}>
-        <Link
-          to={routeOrLink}
-          onClick={(e) => {
-            if (e.button === 0 && isReply) {
-              e.preventDefault();
-              toggleExpanded && toggleExpanded();
-            }
-          }}
-        >
-          {mediaComponent}
-        </Link>
+        {isReply || commentMediaInfo?.type === 'webpage' ? (
+          <a
+            href={link}
+            target='_blank'
+            rel='noopener noreferrer'
+            onClick={(e) => {
+              if (e.button === 0 && isReply) {
+                e.preventDefault();
+                toggleExpanded && toggleExpanded();
+              }
+            }}
+          >
+            {mediaComponent}
+          </a>
+        ) : (
+          <Link to={`/p/${subplebbitAddress}/c/${cid}`}>{mediaComponent}</Link>
+        )}
       </span>
     </span>
   );

src/components/reply/reply.module.css

@@ -130,6 +130,11 @@
   line-height: 20px;
 }
 
+.removedOrDeletedContent {
+  margin-bottom: 0 !important;
+  margin-top: 0 !important;
+}
+
 .md p {
   margin-bottom: 5px;
 }
@@ -165,6 +170,18 @@
 
 .removedContent, .deletedContent {
   text-transform: lowercase;
+  background-color: var(--removed-reply-backgrouhd-color);
+  display: inline-block;
+  padding: 5px;
+}
+
+.removedUsername {
+  color: var(--text-info);
+  text-transform: lowercase;
+}
+
+.hiddenMidcol {
+  visibility: hidden !important;
 }
 
 .usertext a {
@@ -189,11 +206,13 @@
 }
 
 .collapsedEntry .author,
+.collapsedEntry .removedUsername,
 .collapsedEntry .moderator,
 .collapsedEntry .admin,
 .collapsedEntry .owner,
 .collapsedEntry .moderatorBrackets,
 .collapsedEntry .time,
+.collapsedEntry .score,
 .collapsedEntry .children {
   color: var(--text-info) !important;
   font-style: italic !important;