Allow html in markdown

Signed-off-by: Bryan Frimin <bryan@getprobo.com>

Author: gearnode

apps/console/package.json

@@ -44,6 +44,7 @@
     "react-markdown": "^10.1.0",
     "react-relay": "^18.2.0",
     "react-router": "^7.1.5",
+    "rehype-raw": "^7.0.0",
     "relay-runtime": "^18.2.0",
     "remark-gfm": "^4.0.1",
     "tailwind-merge": "^3.0.2",

apps/console/src/pages/SigningRequestsPage.tsx

@@ -14,6 +14,7 @@ import {
 import { Progress } from "@/components/ui/progress";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
+import rehypeRaw from 'rehype-raw';
 
 type Document = {
   policy_version_id: string;
@@ -241,7 +242,8 @@ export default function SigningRequestsPage() {
         <CardContent>
           <div className="border rounded-md p-4 min-h-[400px] bg-muted/20">
             <div className="prose prose-olive max-w-none">
-              <ReactMarkdown remarkPlugins={[remarkGfm]}>
+              <ReactMarkdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeRaw]}
+              >
                 {currentDoc.content}
               </ReactMarkdown>
             </div>

apps/console/src/pages/organizations/measures/MeasureView.tsx

@@ -108,6 +108,7 @@ import { MeasureViewRisksQuery$data } from "./__generated__/MeasureViewRisksQuer
 import { MeasureViewRisksQuery } from "./__generated__/MeasureViewRisksQuery.graphql";
 import { MeasureViewDeleteMeasureMutation } from "./__generated__/MeasureViewDeleteMeasureMutation.graphql";
 import remarkGfm from "remark-gfm";
+import rehypeRaw from "rehype-raw";
 
 // Function to format ISO8601 duration to human-readable format
 const formatDuration = (isoDuration: string): string => {
@@ -2201,7 +2202,7 @@ function MeasureViewContent({
         <Card className="mt-4">
           <CardContent className="pt-6">
             <div className="prose prose-gray prose-sm md:prose-base text-secondary max-w-3xl">
-              <ReactMarkdown remarkPlugins={[remarkGfm]}>
+              <ReactMarkdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeRaw]}>
                 {data.measure.description}
               </ReactMarkdown>
             </div>
@@ -2831,7 +2832,7 @@ function MeasureViewContent({
                         Description
                       </h3>
                       <div className="prose prose-gray prose-sm max-w-none text-primary bg-invert-bg p-4 rounded-md border border-mid-b">
-                        <ReactMarkdown remarkPlugins={[remarkGfm]}>
+                        <ReactMarkdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeRaw]}>
                           {selectedTask.description}
                         </ReactMarkdown>
                       </div>

apps/console/src/pages/organizations/policies/ShowPolicyView.tsx

@@ -42,6 +42,7 @@ import {
 } from "@/components/ui/dialog";
 import { SignaturesModal } from "./SignaturesModal";
 import { VersionHistoryModal } from "./VersionHistoryModal";
+import rehypeRaw from "rehype-raw";
 
 const policyViewQuery = graphql`
   query ShowPolicyViewQuery($policyId: ID!) {
@@ -376,7 +377,7 @@ function ShowPolicyContent({
             )}
 
             <div className="prose prose-olive max-w-none">
-              <ReactMarkdown remarkPlugins={[remarkGfm]}>
+              <ReactMarkdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeRaw]}>
                 {latestVersionNode.content || "No content available"}
               </ReactMarkdown>
             </div>

apps/console/src/pages/organizations/policies/VersionHistoryModal.tsx

@@ -7,6 +7,7 @@ import ReactMarkdown from "react-markdown";
 import { graphql, useFragment } from "react-relay";
 import type { VersionHistoryModal_policyVersions$key } from "./__generated__/VersionHistoryModal_policyVersions.graphql";
 import remarkGfm from "remark-gfm";
+import rehypeRaw from "rehype-raw";
 
 export const policyVersionsFragment = graphql`
   fragment VersionHistoryModal_policyVersions on Policy {
@@ -133,7 +134,7 @@ export function VersionHistoryModal({
 
             <div className="prose prose-olive max-w-none">
               {selectedVersion && (
-                <ReactMarkdown remarkPlugins={[remarkGfm]}>
+                <ReactMarkdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeRaw]}>
                   {versions.find((v) => v.version === selectedVersion)
                     ?.content || "No content available"}
                 </ReactMarkdown>