Allow table in markdown

Signed-off-by: Bryan Frimin <bryan@getprobo.com>
This commit is contained in:
Bryan Frimin
2025-05-01 22:45:26 -07:00
parent 81e6d974ea
commit 5d690c0713
6 changed files with 304 additions and 5 deletions

View File

@@ -6,6 +6,7 @@ import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
import { Progress } from "@/components/ui/progress";
import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";
type Document = {
policy_version_id: string;
@@ -215,7 +216,7 @@ 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>{currentDoc.content}</ReactMarkdown>
<ReactMarkdown remarkPlugins={[remarkGfm]}>{currentDoc.content}</ReactMarkdown>
</div>
</div>
</CardContent>

View File

@@ -108,6 +108,7 @@ import { MeasureViewDeleteControlMappingMutation } from "./__generated__/Measure
import { MeasureViewRisksQuery$data } from "./__generated__/MeasureViewRisksQuery.graphql";
import { MeasureViewRisksQuery } from "./__generated__/MeasureViewRisksQuery.graphql";
import { MeasureViewDeleteMeasureMutation } from "./__generated__/MeasureViewDeleteMeasureMutation.graphql";
import remarkGfm from "remark-gfm";
// Function to format ISO8601 duration to human-readable format
const formatDuration = (isoDuration: string): string => {
@@ -1905,7 +1906,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>{data.measure.description}</ReactMarkdown>
<ReactMarkdown remarkPlugins={[remarkGfm]}>{data.measure.description}</ReactMarkdown>
</div>
</CardContent>
</Card>
@@ -2977,7 +2978,7 @@ function MeasureViewContent({
Description
</h3>
<div className="prose prose-sm max-w-none p-3 bg-invert-bg rounded-md border border-low-b">
<ReactMarkdown>{selectedTask.description}</ReactMarkdown>
<ReactMarkdown remarkPlugins={[remarkGfm]}>{selectedTask.description}</ReactMarkdown>
</div>
</div>
)}

View File

@@ -15,6 +15,7 @@ import type { ShowPolicyViewQuery } from "./__generated__/ShowPolicyViewQuery.gr
import { ShowPolicyViewPublishMutation } from "./__generated__/ShowPolicyViewPublishMutation.graphql";
import { ShowPolicyViewCreateDraftMutation } from "./__generated__/ShowPolicyViewCreateDraftMutation.graphql";
import ReactMarkdown from "react-markdown";
import remarkGfm from 'remark-gfm'
import { ShowPolicyViewSkeleton } from "./ShowPolicyPage";
import { format } from "date-fns";
import {
@@ -339,7 +340,7 @@ function ShowPolicyContent({
)}
<div className="prose prose-olive max-w-none">
<ReactMarkdown>
<ReactMarkdown remarkPlugins={[remarkGfm]}>
{latestVersionNode.content || "No content available"}
</ReactMarkdown>
</div>

View File

@@ -6,6 +6,7 @@ import { useState } from "react";
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";
export const policyVersionsFragment = graphql`
fragment VersionHistoryModal_policyVersions on Policy {
@@ -114,7 +115,7 @@ export function VersionHistoryModal({
<div className="prose prose-olive max-w-none">
{selectedVersion && (
<ReactMarkdown>
<ReactMarkdown remarkPlugins={[remarkGfm]}>
{versions.find(v => v.version === selectedVersion)?.content || "No content available"}
</ReactMarkdown>
)}