feat: parse announcement content as Markdown

src/components/annoucements/Announcement.jsx

@@ -75,6 +75,10 @@ const Announcement = ({
     "announcement",
   ].includes(type);
 
+  const htmlContent = {
+    __html: content,
+  };
+
   return (
     <div className={wrapperClassName} ref={ref}>
       <div className="flex items-center justify-between mb-2">
@@ -117,7 +121,10 @@ const Announcement = ({
           </DropdownMenu>
         )}
       </div>
-      <span className="leading-tight text-sm lg:text-base">{content}</span>
+      <div
+        className="leading-tight text-sm lg:text-base content-block"
+        dangerouslySetInnerHTML={htmlContent}
+      ></div>
     </div>
   );
 };

src/components/annoucements/AnnouncementList.jsx

@@ -43,7 +43,7 @@ const AnnouncementList = ({
           key={item.id}
           datetime={item.datetime}
           type={item.type}
-          content={item.content}
+          content={item.contentHtml}
           link={item.link}
           seen={item.seen}
           canRunActions={canRunActions}

src/utils.js

@@ -164,6 +164,7 @@ export const parseRawPost = (rawPost) => {
 export const parseRawAnnouncement = (rawAnnouncement) => {
   const announcement = {
     ...pick(rawAnnouncement, ["id", "content", "link"]),
+    contentHtml: markdownConverter.makeHtml(rawAnnouncement.content),
     datetime: parse(
       rawAnnouncement.datetime,
       "yyyy-MM-dd HH:mm:ss",

typings/cf2021.d.ts

@@ -70,6 +70,7 @@ declare namespace CF2021 {
     datetime: Date;
     type: AnnouncementType;
     content: string;
+    contentHtml: string;
     link?: string;
     relatedPostId: string;
     seen: boolean;