fix: render post title markdown in inbox (#2065)

Author: aeharding

src/features/inbox/InboxItem.tsx

@@ -12,6 +12,7 @@ import CommentMarkdown from "#/features/comment/CommentMarkdown";
 import Ago from "#/features/labels/Ago";
 import CommunityLink from "#/features/labels/links/CommunityLink";
 import PersonLink from "#/features/labels/links/PersonLink";
+import PostTitleMarkdown from "#/features/shared/markdown/PostTitleMarkdown";
 import SlidingInbox from "#/features/shared/sliding/SlidingInbox";
 import { cx } from "#/helpers/css";
 import { isTouchDevice } from "#/helpers/device";
@@ -64,7 +65,9 @@ export default function InboxItem({ item }: InboxItemProps) {
       return (
         <>
           <strong>{item.creator.name}</strong> mentioned you on the post{" "}
-          <strong>{item.post.name}</strong>
+          <strong>
+            <PostTitleMarkdown>{item.post.name}</PostTitleMarkdown>
+          </strong>
         </>
       );
     }
@@ -73,14 +76,18 @@ export default function InboxItem({ item }: InboxItemProps) {
         return (
           <>
             <strong>{item.creator.name}</strong> replied to your post{" "}
-            <strong>{item.post.name}</strong>
+            <strong>
+              <PostTitleMarkdown>{item.post.name}</PostTitleMarkdown>
+            </strong>
           </>
         );
       } else {
         return (
           <>
             <strong>{item.creator.name}</strong> replied to your comment in{" "}
-            <strong>{item.post.name}</strong>
+            <strong>
+              <PostTitleMarkdown>{item.post.name}</PostTitleMarkdown>
+            </strong>
           </>
         );
       }

src/features/post/detail/PostHeader.tsx

@@ -18,8 +18,8 @@ import PostLink from "#/features/post/link/PostLink";
 import { togglePostCollapse } from "#/features/post/postSlice";
 import useCrosspostUrl from "#/features/post/shared/useCrosspostUrl";
 import useIsPostUrlMedia from "#/features/post/useIsPostUrlMedia";
-import InlineMarkdown from "#/features/shared/markdown/InlineMarkdown";
 import Markdown from "#/features/shared/markdown/Markdown";
+import PostTitleMarkdown from "#/features/shared/markdown/PostTitleMarkdown";
 import { cx } from "#/helpers/css";
 import { findIonContentScrollView } from "#/helpers/ionic";
 import { postLocked } from "#/helpers/toastMessages";
@@ -177,9 +177,7 @@ export default function PostHeader({
             <ModeratableItemBannerOutlet />
             <div>
               <div className={styles.title} ref={titleRef}>
-                <InlineMarkdown parseBlocks={false}>
-                  {post.post.name}
-                </InlineMarkdown>{" "}
+                <PostTitleMarkdown>{post.post.name}</PostTitleMarkdown>{" "}
                 {isNsfw(post) && <Nsfw />}
               </div>
               {showPostText && text && (

src/features/post/inFeed/compact/CompactPost.tsx

@@ -16,7 +16,7 @@ import MoreActions from "#/features/post/shared/MoreActions";
 import MoreModActions from "#/features/post/shared/MoreModAction";
 import useCrosspostUrl from "#/features/post/shared/useCrosspostUrl";
 import { VoteButton } from "#/features/post/shared/VoteButton";
-import InlineMarkdown from "#/features/shared/markdown/InlineMarkdown";
+import PostTitleMarkdown from "#/features/shared/markdown/PostTitleMarkdown";
 import { cx, sv } from "#/helpers/css";
 import { isUrlImage, parseUrlForDisplay } from "#/helpers/url";
 import { useInModqueue } from "#/routes/pages/shared/ModqueuePage";
@@ -76,9 +76,7 @@ export default function CompactPost({ post }: PostProps) {
               </div>
             )}
             <span className={styles.title}>
-              <InlineMarkdown parseBlocks={false}>
-                {post.post.name}
-              </InlineMarkdown>{" "}
+              <PostTitleMarkdown>{post.post.name}</PostTitleMarkdown>{" "}
               {domain && (
                 <>
                   <span className={styles.domain}>

src/features/post/inFeed/large/LargePost.tsx

@@ -15,7 +15,7 @@ import MoreActions from "#/features/post/shared/MoreActions";
 import MoreModActions from "#/features/post/shared/MoreModAction";
 import useCrosspostUrl from "#/features/post/shared/useCrosspostUrl";
 import { VoteButton } from "#/features/post/shared/VoteButton";
-import InlineMarkdown from "#/features/shared/markdown/InlineMarkdown";
+import PostTitleMarkdown from "#/features/shared/markdown/PostTitleMarkdown";
 import { cx } from "#/helpers/css";
 import { useInModqueue } from "#/routes/pages/shared/ModqueuePage";
 import { useAppSelector } from "#/store";
@@ -82,9 +82,7 @@ export default function LargePost({ post }: PostProps) {
           )}
 
           <div className={styles.title}>
-            <InlineMarkdown parseBlocks={false}>
-              {post.post.name}
-            </InlineMarkdown>{" "}
+            <PostTitleMarkdown>{post.post.name}</PostTitleMarkdown>{" "}
             {isNsfw(post) && <Nsfw />}
           </div>
         </div>

src/features/post/link/Link.tsx

@@ -4,8 +4,8 @@ import { MouseEvent, useEffect, useState } from "react";
 
 import { LinkData } from "#/features/comment/CommentLinks";
 import CachedImg from "#/features/media/CachedImg";
-import InlineMarkdown from "#/features/shared/markdown/InlineMarkdown";
 import LinkInterceptor from "#/features/shared/markdown/LinkInterceptor";
+import PostTitleMarkdown from "#/features/shared/markdown/PostTitleMarkdown";
 import Url from "#/features/shared/Url";
 import useLemmyUrlHandler from "#/features/shared/useLemmyUrlHandler";
 import { cx } from "#/helpers/css";
@@ -164,7 +164,7 @@ export default function Link({
         {buildCompactIcon()}
         <div className={styles.urlContainer}>
           <div className={styles.text}>
-            <InlineMarkdown parseBlocks={false}>{text ?? ""}</InlineMarkdown>
+            <PostTitleMarkdown>{text ?? ""}</PostTitleMarkdown>
           </div>
           <Url>{url}</Url>
         </div>

src/features/shared/markdown/PostTitleMarkdown.tsx

@@ -0,0 +1,9 @@
+import { ComponentProps } from "react";
+
+import InlineMarkdown from "./InlineMarkdown";
+
+export default function PostTitleMarkdown(
+  props: ComponentProps<typeof InlineMarkdown>,
+) {
+  return <InlineMarkdown {...props} parseBlocks={false} />;
+}

src/features/user/PostContext.tsx

@@ -1,7 +1,7 @@
 import { Link } from "react-router-dom";
 import { Community, Post } from "threadiverse";
 
-import InlineMarkdown from "#/features/shared/markdown/InlineMarkdown";
+import PostTitleMarkdown from "#/features/shared/markdown/PostTitleMarkdown";
 import { getHandle } from "#/helpers/lemmy";
 import { useOpenPostInSecondColumnIfNeededProps } from "#/routes/twoColumn/useOpenInSecondColumnIfNeededProps";
 
@@ -30,7 +30,7 @@ export default function PostContext({ post, community }: PostContextProps) {
       }}
     >
       <div className={styles.name}>
-        <InlineMarkdown parseBlocks={false}>{post.name}</InlineMarkdown>
+        <PostTitleMarkdown>{post.name}</PostTitleMarkdown>
       </div>
       <div className={styles.communityName}>{getHandle(community)}</div>
     </Link>