Allow html in markdown

Signed-off-by: Bryan Frimin <bryan@getprobo.com>
This commit is contained in:
Bryan Frimin
2025-05-04 10:39:04 -07:00
parent fc4891c60d
commit ccdfe67dc5
6 changed files with 189 additions and 5 deletions

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>