feat(dashboard): render markdown files in the code viewer

.md files opened from the file explorer now default to a rendered markdown view (react-markdown + remark-gfm, styled for the dark theme: headings, GFM tables, code blocks, blockquotes, links). A Rendered/Source toggle in the meta bar switches back to the syntax- highlighted source with line numbers; non-markdown files are unchanged. Toggle labels localized in all six dashboard locales. Fixes #555
2026-07-10 17:44:58 +08:00
parent f08763d11d
commit e5b6442178
8 changed files with 105 additions and 1 deletions
@@ -26,6 +26,7 @@
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "react-markdown": "^10.1.0",
+    "remark-gfm": "^4.0.1",
    "zustand": "^5.0.0"
  },
  "devDependencies": {
@@ -1,5 +1,7 @@
 import { useEffect, useMemo, useState } from "react";
 import { Highlight, themes } from "prism-react-renderer";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
 import { useDashboardStore } from "../store";
 import { useI18n } from "../contexts/I18nContext";

@@ -56,6 +58,66 @@ function formatBytes(bytes: number): string {
  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
 }

+/** Rendered markdown view for .md files, styled for the dark theme. */
+function MarkdownView({ content }: { content: string }) {
+  return (
+    <div className="px-6 py-5 max-w-3xl text-sm text-text-secondary leading-relaxed">
+      <ReactMarkdown
+        remarkPlugins={[remarkGfm]}
+        components={{
+          h1: ({ children }) => <h1 className="text-xl font-heading text-text-primary mt-6 mb-3 first:mt-0">{children}</h1>,
+          h2: ({ children }) => <h2 className="text-lg font-heading text-text-primary mt-5 mb-2 first:mt-0 border-b border-border-subtle pb-1">{children}</h2>,
+          h3: ({ children }) => <h3 className="text-base font-heading text-text-primary mt-4 mb-2 first:mt-0">{children}</h3>,
+          h4: ({ children }) => <h4 className="text-sm font-heading text-text-primary mt-3 mb-1.5 first:mt-0">{children}</h4>,
+          h5: ({ children }) => <h5 className="text-sm font-heading text-text-primary mt-3 mb-1.5 first:mt-0">{children}</h5>,
+          h6: ({ children }) => <h6 className="text-xs font-heading text-text-primary mt-3 mb-1.5 first:mt-0 uppercase tracking-wider">{children}</h6>,
+          p: ({ children }) => <p className="mb-3 last:mb-0">{children}</p>,
+          a: ({ children, href }) => (
+            <a href={href} target="_blank" rel="noreferrer" className="text-accent hover:underline">
+              {children}
+            </a>
+          ),
+          ul: ({ children }) => <ul className="list-disc pl-5 mb-3 space-y-1">{children}</ul>,
+          ol: ({ children }) => <ol className="list-decimal pl-5 mb-3 space-y-1">{children}</ol>,
+          blockquote: ({ children }) => (
+            <blockquote className="border-l-2 border-accent/40 pl-3 text-text-muted italic mb-3">{children}</blockquote>
+          ),
+          hr: () => <hr className="border-border-subtle my-4" />,
+          pre: ({ children }) => (
+            <pre className="bg-elevated border border-border-subtle rounded-lg p-3 mb-3 overflow-x-auto text-xs font-mono">
+              {children}
+            </pre>
+          ),
+          code: ({ className, children }) => {
+            const isInline = !className && !String(children).includes("\n");
+            return isInline ? (
+              <code className="bg-elevated px-1.5 py-0.5 rounded text-[0.85em] font-mono text-accent">{children}</code>
+            ) : (
+              <code className={className}>{children}</code>
+            );
+          },
+          table: ({ children }) => (
+            <div className="overflow-x-auto mb-3">
+              <table className="text-xs border-collapse">{children}</table>
+            </div>
+          ),
+          th: ({ children }) => (
+            <th className="border border-border-subtle bg-elevated px-2.5 py-1.5 text-left text-text-primary font-semibold">
+              {children}
+            </th>
+          ),
+          td: ({ children }) => <td className="border border-border-subtle px-2.5 py-1.5">{children}</td>,
+          img: ({ src, alt }) => (
+            <img src={src} alt={alt} className="max-w-full rounded-lg border border-border-subtle my-2" />
+          ),
+        }}
+      >
+        {content}
+      </ReactMarkdown>
+    </div>
+  );
+}
+
 export default function CodeViewer({
  accessToken,
  presentation = "sidebar",
@@ -79,6 +141,9 @@ export default function CodeViewer({
    source: null,
    error: null,
  });
+  // Markdown files default to the rendered view (#555); toggle back to
+  // source for line numbers / lineRange highlighting.
+  const [mdView, setMdView] = useState<"rendered" | "source">("rendered");
  const { t } = useI18n();

  useEffect(() => {
@@ -134,6 +199,8 @@ export default function CodeViewer({

  const source = state.source;
  const language = source?.language ?? fallbackLanguage(node.filePath);
+  const isMarkdown = language === "markdown";
+  const showRendered = isMarkdown && mdView === "rendered";
  const lineInfo = highlightedRange
    ? `${t.codeViewer.lines} ${highlightedRange.start}-${highlightedRange.end}`
    : t.codeViewer.fullFile;
@@ -212,8 +279,31 @@ export default function CodeViewer({
          <>
            <div className="px-4 py-2 border-b border-border-subtle bg-surface text-[11px] text-text-muted flex items-center justify-between">
              <span>{source.lineCount} {t.codeViewer.linesLabel}</span>
-              <span>{formatBytes(source.sizeBytes)}</span>
+              <div className="flex items-center gap-3">
+                {isMarkdown && (
+                  <div className="flex items-center rounded border border-border-subtle overflow-hidden" role="group">
+                    {(["rendered", "source"] as const).map((view) => (
+                      <button
+                        key={view}
+                        type="button"
+                        onClick={() => setMdView(view)}
+                        className={`px-2 py-0.5 text-[10px] uppercase tracking-wider transition-colors ${
+                          mdView === view
+                            ? "bg-accent/15 text-accent"
+                            : "text-text-muted hover:text-text-primary"
+                        }`}
+                        aria-pressed={mdView === view}
+                      >
+                        {view === "rendered" ? t.codeViewer.rendered : t.codeViewer.source}
+                      </button>
+                    ))}
+                  </div>
+                )}
+                <span>{formatBytes(source.sizeBytes)}</span>
+              </div>
            </div>
+            {showRendered && <MarkdownView content={source.content} />}
+            {!showRendered && (
            <Highlight code={source.content} language={language} theme={themes.vsDark}>
              {({ className, style, tokens, getLineProps, getTokenProps }) => (
                <pre
@@ -251,6 +341,7 @@ export default function CodeViewer({
                </pre>
              )}
            </Highlight>
+            )}
          </>
        )}
      </div>
@@ -179,6 +179,8 @@ export const en = {
    closeExpanded: "Close expanded code viewer",
    closeViewer: "Close code viewer",
    sourceUnavailable: "Source unavailable",
+    rendered: "Rendered",
+    source: "Source",
  },
  customNode: {
    tested: "Tested",
@@ -179,6 +179,8 @@ export const ja = {
    closeExpanded: "展開したコードビューアを閉じる",
    closeViewer: "コードビューアを閉じる",
    sourceUnavailable: "ソースが利用できません",
+    rendered: "プレビュー",
+    source: "ソース",
  },
  customNode: {
    tested: "テスト済み",
@@ -179,6 +179,8 @@ export const ko = {
    closeExpanded: "확장된 코드 뷰어 닫기",
    closeViewer: "코드 뷰어 닫기",
    sourceUnavailable: "소스 사용 불가",
+    rendered: "렌더링",
+    source: "소스",
  },
  customNode: {
    tested: "테스트됨",
@@ -179,6 +179,8 @@ export const ru = {
    closeExpanded: "Закрыть расширенный просмотрщик кода",
    closeViewer: "Закрыть просмотрщик кода",
    sourceUnavailable: "Исходный код недоступен",
+    rendered: "Просмотр",
+    source: "Исходник",
  },
  customNode: {
    tested: "Покрыт тестами",
@@ -179,6 +179,8 @@ export const zhTW = {
    closeExpanded: "關閉展開的程式碼檢視器",
    closeViewer: "關閉程式碼檢視器",
    sourceUnavailable: "原始碼不可用",
+    rendered: "渲染",
+    source: "原始碼",
  },
  customNode: {
    tested: "已測試",
@@ -179,6 +179,8 @@ export const zh = {
    closeExpanded: "关闭展开的代码查看器",
    closeViewer: "关闭代码查看器",
    sourceUnavailable: "源码不可用",
+    rendered: "渲染",
+    source: "源码",
  },
  customNode: {
    tested: "已测试",