fix: display changelog images (#552)

Signed-off-by: David Dal Busco <david.dalbusco@outlook.com>

Author: peterpeterparker

package-lock.json

@@ -56,6 +56,8 @@
     "jsdom": "^27.0.0",
     "prettier": "^3.6.2",
     "prettier-plugin-organize-imports": "^4.3.0",
+    "rehype-raw": "^7.0.0",
+    "rehype-sanitize": "^6.0.0",
     "sass": "^1.93.2",
     "turndown": "^7.2.1",
     "typescript": "^5.9.3"

package.json

@@ -0,0 +1,26 @@
+import ReactMarkdown from "react-markdown";
+import rehypeRaw from "rehype-raw";
+import rehypeSanitize, { defaultSchema } from "rehype-sanitize";
+import remarkGfm from "remark-gfm";
+import styles from "./styles.module.scss";
+
+export const Markdown = ({ body }) => {
+  const sanitizeSchema = {
+    ...defaultSchema,
+    attributes: {
+      ...defaultSchema.attributes,
+      img: [...(defaultSchema.attributes?.img || []), ["alt"], ["src"]]
+    }
+  };
+
+  return (
+    <div className={styles.markdown}>
+      <ReactMarkdown
+        remarkPlugins={[remarkGfm]}
+        rehypePlugins={[rehypeRaw, [rehypeSanitize, sanitizeSchema]]}
+      >
+        {body}
+      </ReactMarkdown>
+    </div>
+  );
+};

src/components/Markdown/index.tsx

@@ -0,0 +1,6 @@
+.markdown {
+  img {
+    width: 100%;
+    height: auto;
+  }
+}

src/components/Markdown/styles.module.scss

@@ -4,7 +4,7 @@ import { GitHubRelease } from "@site/src/types/github";
 import type { Props } from "@theme/BlogLayout";
 import ReadMoreLink from "@theme/BlogPostItem/Footer/ReadMoreLink";
 import clsx from "clsx";
-import Markdown from "react-markdown";
+import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 
 export default function ChangelogPage(
@@ -18,9 +18,9 @@ export default function ChangelogPage(
         <div key={tag_name} id={tag_name}>
           <Release tag_name={tag_name} published_at={published_at} />
 
-          <Markdown remarkPlugins={[remarkGfm]}>
+          <ReactMarkdown remarkPlugins={[remarkGfm]}>
             {body.length > 400 ? `${body.substring(0, 400)}...` : body}
-          </Markdown>
+          </ReactMarkdown>
 
           {body.length > 400 && (
             <footer className="row docusaurus-mt-lg">

src/pages/changelog/index.tsx

@@ -1,9 +1,8 @@
 import Changelog from "@site/src/components/Changelog";
+import { Markdown } from "@site/src/components/Markdown";
 import Release from "@site/src/components/Release";
 import { GitHubRelease } from "@site/src/types/github";
 import type { Props } from "@theme/BlogLayout";
-import Markdown from "react-markdown";
-import remarkGfm from "remark-gfm";
 import styles from "./index.module.scss";
 
 export default function ReleasePage(
@@ -25,7 +24,7 @@ export default function ReleasePage(
       <div key={tag_name} id={tag_name}>
         <Release tag_name={tag_name} published_at={published_at} />
 
-        <Markdown remarkPlugins={[remarkGfm]}>{body}</Markdown>
+        <Markdown body={body} />
 
         <footer className="row docusaurus-mt-lg">
           <div className="col text--left">