Add remark-gfm for markdown table rendering in Knowledge Base

Tables are a GitHub Flavored Markdown extension not supported by
react-markdown's default parser. Added remark-gfm plugin so tables,
strikethrough, and task lists render correctly in KB articles.
This commit is contained in:
Jordan Ramos
2026-06-16 14:03:57 -06:00
parent 93efb70d1c
commit 8d47f67318
3 changed files with 3102 additions and 1 deletions

File diff suppressed because it is too large Load Diff

View File

@@ -15,6 +15,7 @@
"react-scripts": "5.0.1", "react-scripts": "5.0.1",
"recharts": "^3.8.1", "recharts": "^3.8.1",
"rehype-sanitize": "^6.0.0", "rehype-sanitize": "^6.0.0",
"remark-gfm": "^3.0.1",
"web-vitals": "^2.1.4", "web-vitals": "^2.1.4",
"xlsx": "^0.18.5" "xlsx": "^0.18.5"
}, },
@@ -30,7 +31,16 @@
"react-app/jest" "react-app/jest"
], ],
"rules": { "rules": {
"no-unused-vars": ["warn", { "vars": "all", "args": "after-used", "ignoreRestSiblings": true, "varsIgnorePattern": "^_", "argsIgnorePattern": "^_" }] "no-unused-vars": [
"warn",
{
"vars": "all",
"args": "after-used",
"ignoreRestSiblings": true,
"varsIgnorePattern": "^_",
"argsIgnorePattern": "^_"
}
]
} }
}, },
"browserslist": { "browserslist": {

View File

@@ -1,5 +1,6 @@
import React, { useState, useEffect, useRef } from 'react'; import React, { useState, useEffect, useRef } from 'react';
import ReactMarkdown from 'react-markdown'; import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import rehypeSanitize from 'rehype-sanitize'; import rehypeSanitize from 'rehype-sanitize';
import mermaid from 'mermaid'; import mermaid from 'mermaid';
import { X, Download, Loader, AlertCircle, FileText, File } from 'lucide-react'; import { X, Download, Loader, AlertCircle, FileText, File } from 'lucide-react';
@@ -234,6 +235,7 @@ export default function KnowledgeBaseViewer({ article, onClose }) {
{isMarkdown && ( {isMarkdown && (
<div className="markdown-content"> <div className="markdown-content">
<ReactMarkdown <ReactMarkdown
remarkPlugins={[remarkGfm]}
rehypePlugins={[rehypeSanitize]} rehypePlugins={[rehypeSanitize]}
components={{ components={{
code({ inline, className, children }) { code({ inline, className, children }) {