feat(frontend): render markdown in description and summary fields

- New shared MarkdownText component (react-markdown + remark-gfm)
  that renders links, bold, italic, lists, code, blockquotes.
  External links open in a new tab with rel=noopener.
- Applied to: technique description, threat actor description,
  test description, campaign description, detection rule descriptions,
  D3FEND defense descriptions, red/blue summaries and validation notes.
- procedure_text (code/commands) stays in <pre> — not processed as MD.
This commit is contained in:
kitos
2026-05-29 08:38:53 +02:00
parent 366fc2170c
commit 1c27e31101
7 changed files with 132 additions and 18 deletions
+3 -2
View File
@@ -1,4 +1,5 @@
import { useParams, useNavigate } from "react-router-dom";
import MarkdownText from "../components/MarkdownText";
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import { useState, useEffect, useCallback } from "react";
import { Loader2, AlertCircle, ArrowLeft } from "lucide-react";
@@ -441,8 +442,8 @@ export default function TestDetailPage() {
<dl className="space-y-4">
<div>
<dt className="text-xs font-medium uppercase text-gray-500">Description</dt>
<dd className="mt-1 text-sm text-gray-300">
{test.description || "\u2014"}
<dd className="mt-1">
<MarkdownText content={test.description || "\u2014"} className="text-sm text-gray-300" />
</dd>
</div>
<div>